docusaurus-theme-openapi-docs 0.0.0-783 → 0.0.0-797

package/lib/theme/ApiExplorer/CodeSnippets/code-snippets-types.d.ts

@@ -1,4 +1,4 @@
-export type CodeSampleLanguage = "C" | "C#" | "C++" | "CoffeeScript" | "CSS" | "Dart" | "DM" | "Elixir" | "Go" | "Groovy" | "HTML" | "Java" | "JavaScript" | "Kotlin" | "Objective-C" | "Perl" | "PHP" | "PowerShell" | "Python" | "Ruby" | "Rust" | "Scala" | "Shell" | "Swift" | "TypeScript";
+export type CodeSampleLanguage = "C" | "C#" | "C++" | "CoffeeScript" | "CSS" | "Dart" | "DM" | "Elixir" | "Go" | "Groovy" | "HTML" | "Java" | "JavaScript" | "Kotlin" | "Objective-C" | "OCaml" | "Perl" | "PHP" | "PowerShell" | "Python" | "R" | "Ruby" | "Rust" | "Scala" | "Shell" | "Swift" | "TypeScript";
 export interface Language {
     highlight: string;
     language: string;

package/lib/theme/ApiExplorer/CodeSnippets/index.js

@@ -78,118 +78,7 @@ const postman_code_generators_1 = __importDefault(
   require("postman-code-generators")
 );
 const languages_1 = require("./languages");
-exports.languageSet = [
-  {
-    highlight: "bash",
-    language: "curl",
-    codeSampleLanguage: "Shell",
-    logoClass: "bash",
-    options: {
-      longFormat: false,
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "cURL",
-    variants: ["curl"],
-  },
-  {
-    highlight: "python",
-    language: "python",
-    codeSampleLanguage: "Python",
-    logoClass: "python",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "requests",
-    variants: ["requests", "http.client"],
-  },
-  {
-    highlight: "go",
-    language: "go",
-    codeSampleLanguage: "Go",
-    logoClass: "go",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "native",
-    variants: ["native"],
-  },
-  {
-    highlight: "javascript",
-    language: "nodejs",
-    codeSampleLanguage: "JavaScript",
-    logoClass: "nodejs",
-    options: {
-      ES6_enabled: true,
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "axios",
-    variants: ["axios", "native"],
-  },
-  {
-    highlight: "ruby",
-    language: "ruby",
-    codeSampleLanguage: "Ruby",
-    logoClass: "ruby",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "Net::HTTP",
-    variants: ["net::http"],
-  },
-  {
-    highlight: "csharp",
-    language: "csharp",
-    codeSampleLanguage: "C#",
-    logoClass: "csharp",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "RestSharp",
-    variants: ["restsharp", "httpclient"],
-  },
-  {
-    highlight: "php",
-    language: "php",
-    codeSampleLanguage: "PHP",
-    logoClass: "php",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "cURL",
-    variants: ["curl", "guzzle", "pecl_http", "http_request2"],
-  },
-  {
-    highlight: "java",
-    language: "java",
-    codeSampleLanguage: "Java",
-    logoClass: "java",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "OkHttp",
-    variants: ["okhttp", "unirest"],
-  },
-  {
-    highlight: "powershell",
-    language: "powershell",
-    codeSampleLanguage: "PowerShell",
-    logoClass: "powershell",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "RestMethod",
-    variants: ["restmethod"],
-  },
-];
+exports.languageSet = (0, languages_1.generateLanguageSet)();
 function CodeTab({ children, hidden, className }) {
   return react_1.default.createElement(
     "div",
@@ -392,6 +281,7 @@ function CodeSnippets({ postman, codeSamples }) {
           setSelectedSample: setSelectedSample,
         },
         languageSet: mergedLangs,
+        defaultValue: defaultLang[0]?.language ?? mergedLangs[0].language,
         lazy: true,
       },
       mergedLangs.map((lang) => {

package/lib/theme/ApiExplorer/CodeSnippets/languages.d.ts

@@ -2,3 +2,4 @@ import { CodeSample, Language } from "./code-snippets-types";
 export declare function mergeCodeSampleLanguage(languages: Language[], codeSamples: CodeSample[]): Language[];
 export declare const mergeArraysbyLanguage: (arr1: any, arr2: any) => any[];
 export declare function getCodeSampleSourceFromLanguage(language: Language): string;
+export declare function generateLanguageSet(): Language[];

package/lib/theme/ApiExplorer/CodeSnippets/languages.js

@@ -11,7 +11,8 @@ var __importDefault =
     return mod && mod.__esModule ? mod : { default: mod };
   };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCodeSampleSourceFromLanguage =
+exports.generateLanguageSet =
+  exports.getCodeSampleSourceFromLanguage =
   exports.mergeArraysbyLanguage =
   exports.mergeCodeSampleLanguage =
     void 0;
@@ -19,6 +20,9 @@ const find_1 = __importDefault(require("lodash/find"));
 const isArray_1 = __importDefault(require("lodash/isArray"));
 const mergeWith_1 = __importDefault(require("lodash/mergeWith"));
 const unionBy_1 = __importDefault(require("lodash/unionBy"));
+const postman_code_generators_1 = __importDefault(
+  require("postman-code-generators")
+);
 function mergeCodeSampleLanguage(languages, codeSamples) {
   return languages.map((language) => {
     const languageCodeSamples = codeSamples.filter(
@@ -73,3 +77,27 @@ function getCodeSampleSourceFromLanguage(language) {
   return "";
 }
 exports.getCodeSampleSourceFromLanguage = getCodeSampleSourceFromLanguage;
+function generateLanguageSet() {
+  const languageSet = [];
+  postman_code_generators_1.default.getLanguageList().forEach((language) => {
+    const variants = [];
+    language.variants.forEach((variant) => {
+      variants.push(variant.key);
+    });
+    languageSet.push({
+      highlight: language.syntax_mode,
+      language: language.key,
+      codeSampleLanguage: language.label,
+      logoClass: language.key,
+      options: {
+        longFormat: false,
+        followRedirect: true,
+        trimRequestBody: true,
+      },
+      variant: variants[0],
+      variants: variants,
+    });
+  });
+  return languageSet;
+}
+exports.generateLanguageSet = generateLanguageSet;

package/lib/theme/ApiExplorer/CodeTabs/_CodeTabs.scss

@@ -146,6 +146,24 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
+.openapi-tabs__code-item--dart {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/dart/dart-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-dart);
+    border-color: var(--openapi-code-tab-border-color-dart);
+  }
+}
+
 .openapi-tabs__code-item--javascript {
   color: var(--ifm-color-warning);
 
@@ -164,7 +182,7 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
-.openapi-tabs__code-item--bash {
+.openapi-tabs__code-item--curl {
   color: var(--ifm-color-danger);
 
   &::after {
@@ -179,7 +197,7 @@ body[class="ReactModal__Body--open"] {
   }
 
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-bash);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-curl);
     border-color: var(--ifm-color-danger);
   }
 }
@@ -220,6 +238,96 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
+.openapi-tabs__code-item--r {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/r/r-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-r);
+    border-color: var(--openapi-code-tab-border-color-r);
+  }
+}
+
+.openapi-tabs__code-item--swift {
+  color: var(--ifm-color-danger);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/swift/swift-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-swift);
+    border-color: var(--openapi-code-tab-border-color-swift);
+  }
+}
+
+.openapi-tabs__code-item--c {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-c);
+    border-color: var(--openapi-code-tab-border-color-c);
+  }
+}
+
+.openapi-tabs__code-item--objective-c {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/objectivec/objectivec-plain.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-objective-c);
+    border-color: var(--openapi-code-tab-border-color-objective-c);
+  }
+}
+
+.openapi-tabs__code-item--ocaml {
+  color: var(--ifm-color-warning);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ocaml/ocaml-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-objective-ocaml);
+    border-color: var(--openapi-code-tab-border-color-objective-ocaml);
+  }
+}
+
 .openapi-tabs__code-item--nodejs {
   color: var(--ifm-color-success);
 
@@ -256,6 +364,42 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
+.openapi-tabs__code-item--kotlin {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/kotlin/kotlin-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-kotlin);
+    border-color: var(--openapi-code-tab-border-color-kotlin);
+  }
+}
+
+.openapi-tabs__code-item--rust {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/rust/rust-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-rust);
+    border-color: var(--openapi-code-tab-border-color-rust);
+  }
+}
+
 .openapi-tabs__code-item--java {
   color: var(--ifm-color-warning);
 

package/lib/theme/ApiExplorer/CodeTabs/index.js

@@ -71,12 +71,24 @@ function TabList({
   selectValue,
   tabValues,
 }) {
-  const tabRefs = [];
+  const tabRefs = (0, react_1.useRef)([]);
   const { blockElementScrollPositionUntilNextRender } = (0,
   internal_1.useScrollPositionBlocker)();
+  (0, react_1.useEffect)(() => {
+    const activeTab = tabRefs.current.find(
+      (tab) => tab?.getAttribute("aria-selected") === "true"
+    );
+    if (activeTab) {
+      activeTab.scrollIntoView({
+        behavior: "auto",
+        block: "center",
+        inline: "start",
+      });
+    }
+  }, []);
   const handleTabChange = (event) => {
     const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
+    const newTabIndex = tabRefs.current.indexOf(newTab);
     const newTabValue = tabValues[newTabIndex].value;
     if (newTabValue !== selectedValue) {
       blockElementScrollPositionUntilNextRender(newTab);
@@ -100,7 +112,7 @@ function TabList({
         newLanguage = languageSet.filter(
           (lang) => lang.language === newTabValue
         )[0];
-        action.setSelectedVariant(newLanguage.variant.toLowerCase());
+        action.setSelectedVariant(newLanguage.variants[0].toLowerCase());
         action.setSelectedSample(newLanguage.sample);
       }
       action.setLanguage(newLanguage);
@@ -114,13 +126,15 @@ function TabList({
         break;
       }
       case "ArrowRight": {
-        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs[nextTab] ?? tabRefs[0];
+        const nextTab = tabRefs.current.indexOf(event.currentTarget) + 1;
+        focusElement = tabRefs.current[nextTab] ?? tabRefs.current[0];
         break;
       }
       case "ArrowLeft": {
-        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1];
+        const prevTab = tabRefs.current.indexOf(event.currentTarget) - 1;
+        focusElement =
+          tabRefs.current[prevTab] ??
+          tabRefs.current[tabRefs.current.length - 1];
         break;
       }
       default:
@@ -151,7 +165,7 @@ function TabList({
           tabIndex: selectedValue === value ? 0 : -1,
           "aria-selected": selectedValue === value,
           key: value,
-          ref: (tabControl) => tabRefs.push(tabControl),
+          ref: (tabControl) => tabRefs.current.push(tabControl),
           onKeyDown: handleKeydown,
           onClick: handleTabChange,
           ...attributes,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-783",
+  "version": "0.0.0-797",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -42,7 +42,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-783",
+    "docusaurus-plugin-openapi-docs": "0.0.0-797",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
@@ -69,5 +69,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "fde0fbcb9f5e91b02506de828ad39cc295f68608"
+  "gitHead": "0ad6968bd07b838eab231eb7ef399d1dc5c6ac8d"
 }

package/src/theme/ApiExplorer/CodeSnippets/code-snippets-types.ts

@@ -22,10 +22,12 @@ export type CodeSampleLanguage =
   | "JavaScript"
   | "Kotlin"
   | "Objective-C"
+  | "OCaml"
   | "Perl"
   | "PHP"
   | "PowerShell"
   | "Python"
+  | "R"
   | "Ruby"
   | "Rust"
   | "Scala"

package/src/theme/ApiExplorer/CodeSnippets/index.tsx

@@ -27,120 +27,10 @@ import {
   getCodeSampleSourceFromLanguage,
   mergeArraysbyLanguage,
   mergeCodeSampleLanguage,
+  generateLanguageSet,
 } from "./languages";
 
-export const languageSet: Language[] = [
-  {
-    highlight: "bash",
-    language: "curl",
-    codeSampleLanguage: "Shell",
-    logoClass: "bash",
-    options: {
-      longFormat: false,
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "cURL",
-    variants: ["curl"],
-  },
-  {
-    highlight: "python",
-    language: "python",
-    codeSampleLanguage: "Python",
-    logoClass: "python",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "requests",
-    variants: ["requests", "http.client"],
-  },
-  {
-    highlight: "go",
-    language: "go",
-    codeSampleLanguage: "Go",
-    logoClass: "go",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "native",
-    variants: ["native"],
-  },
-  {
-    highlight: "javascript",
-    language: "nodejs",
-    codeSampleLanguage: "JavaScript",
-    logoClass: "nodejs",
-    options: {
-      ES6_enabled: true,
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "axios",
-    variants: ["axios", "native"],
-  },
-  {
-    highlight: "ruby",
-    language: "ruby",
-    codeSampleLanguage: "Ruby",
-    logoClass: "ruby",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "Net::HTTP",
-    variants: ["net::http"],
-  },
-  {
-    highlight: "csharp",
-    language: "csharp",
-    codeSampleLanguage: "C#",
-    logoClass: "csharp",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "RestSharp",
-    variants: ["restsharp", "httpclient"],
-  },
-  {
-    highlight: "php",
-    language: "php",
-    codeSampleLanguage: "PHP",
-    logoClass: "php",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "cURL",
-    variants: ["curl", "guzzle", "pecl_http", "http_request2"],
-  },
-  {
-    highlight: "java",
-    language: "java",
-    codeSampleLanguage: "Java",
-    logoClass: "java",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "OkHttp",
-    variants: ["okhttp", "unirest"],
-  },
-  {
-    highlight: "powershell",
-    language: "powershell",
-    codeSampleLanguage: "PowerShell",
-    logoClass: "powershell",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "RestMethod",
-    variants: ["restmethod"],
-  },
-];
+export const languageSet: Language[] = generateLanguageSet();
 
 export interface Props {
   postman: sdk.Request;
@@ -339,6 +229,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
 
   return (
     <>
+      {/* Outer language tabs */}
       <CodeTabs
         groupId="code-samples"
         action={{
@@ -347,6 +238,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
           setSelectedSample: setSelectedSample,
         }}
         languageSet={mergedLangs}
+        defaultValue={defaultLang[0]?.language ?? mergedLangs[0].language}
         lazy
       >
         {mergedLangs.map((lang) => {
@@ -359,6 +251,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
                 className: `openapi-tabs__code-item--${lang.logoClass}`,
               }}
             >
+              {/* Inner x-codeSamples tabs */}
               {lang.samples && (
                 <CodeTabs
                   className="openapi-tabs__code-container-inner"
@@ -400,6 +293,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
                 </CodeTabs>
               )}
 
+              {/* Inner generated code snippets */}
               <CodeTabs
                 className="openapi-tabs__code-container-inner"
                 action={{

package/src/theme/ApiExplorer/CodeSnippets/languages.ts

@@ -9,6 +9,7 @@ import find from "lodash/find";
 import isArray from "lodash/isArray";
 import mergeWith from "lodash/mergeWith";
 import unionBy from "lodash/unionBy";
+import codegen from "postman-code-generators";
 
 import { CodeSample, Language } from "./code-snippets-types";
 
@@ -73,3 +74,27 @@ export function getCodeSampleSourceFromLanguage(language: Language) {
 
   return "";
 }
+
+export function generateLanguageSet() {
+  const languageSet: Language[] = [];
+  codegen.getLanguageList().forEach((language: any) => {
+    const variants: any = [];
+    language.variants.forEach((variant: any) => {
+      variants.push(variant.key);
+    });
+    languageSet.push({
+      highlight: language.syntax_mode,
+      language: language.key,
+      codeSampleLanguage: language.label,
+      logoClass: language.key,
+      options: {
+        longFormat: false,
+        followRedirect: true,
+        trimRequestBody: true,
+      },
+      variant: variants[0],
+      variants: variants,
+    });
+  });
+  return languageSet;
+}

package/src/theme/ApiExplorer/CodeTabs/_CodeTabs.scss

@@ -146,6 +146,24 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
+.openapi-tabs__code-item--dart {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/dart/dart-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-dart);
+    border-color: var(--openapi-code-tab-border-color-dart);
+  }
+}
+
 .openapi-tabs__code-item--javascript {
   color: var(--ifm-color-warning);
 
@@ -164,7 +182,7 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
-.openapi-tabs__code-item--bash {
+.openapi-tabs__code-item--curl {
   color: var(--ifm-color-danger);
 
   &::after {
@@ -179,7 +197,7 @@ body[class="ReactModal__Body--open"] {
   }
 
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-bash);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-curl);
     border-color: var(--ifm-color-danger);
   }
 }
@@ -220,6 +238,96 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
+.openapi-tabs__code-item--r {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/r/r-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-r);
+    border-color: var(--openapi-code-tab-border-color-r);
+  }
+}
+
+.openapi-tabs__code-item--swift {
+  color: var(--ifm-color-danger);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/swift/swift-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-swift);
+    border-color: var(--openapi-code-tab-border-color-swift);
+  }
+}
+
+.openapi-tabs__code-item--c {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-c);
+    border-color: var(--openapi-code-tab-border-color-c);
+  }
+}
+
+.openapi-tabs__code-item--objective-c {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/objectivec/objectivec-plain.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-objective-c);
+    border-color: var(--openapi-code-tab-border-color-objective-c);
+  }
+}
+
+.openapi-tabs__code-item--ocaml {
+  color: var(--ifm-color-warning);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ocaml/ocaml-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-objective-ocaml);
+    border-color: var(--openapi-code-tab-border-color-objective-ocaml);
+  }
+}
+
 .openapi-tabs__code-item--nodejs {
   color: var(--ifm-color-success);
 
@@ -256,6 +364,42 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
+.openapi-tabs__code-item--kotlin {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/kotlin/kotlin-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-kotlin);
+    border-color: var(--openapi-code-tab-border-color-kotlin);
+  }
+}
+
+.openapi-tabs__code-item--rust {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/rust/rust-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-rust);
+    border-color: var(--openapi-code-tab-border-color-rust);
+  }
+}
+
 .openapi-tabs__code-item--java {
   color: var(--ifm-color-warning);
 

package/src/theme/ApiExplorer/CodeTabs/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { cloneElement, ReactElement } from "react";
+import React, { cloneElement, ReactElement, useEffect, useRef } from "react";
 
 import {
   sanitizeTabsChildren,
@@ -43,10 +43,23 @@ function TabList({
   selectValue,
   tabValues,
 }: CodeTabsProps & ReturnType<typeof useTabs>) {
-  const tabRefs: (HTMLLIElement | null)[] = [];
+  const tabRefs = useRef<(HTMLLIElement | null)[]>([]);
   const { blockElementScrollPositionUntilNextRender } =
     useScrollPositionBlocker();
 
+  useEffect(() => {
+    const activeTab = tabRefs.current.find(
+      (tab) => tab?.getAttribute("aria-selected") === "true"
+    );
+    if (activeTab) {
+      activeTab.scrollIntoView({
+        behavior: "auto",
+        block: "center",
+        inline: "start",
+      });
+    }
+  }, []);
+
   const handleTabChange = (
     event:
       | React.FocusEvent<HTMLLIElement>
@@ -54,7 +67,7 @@ function TabList({
       | React.KeyboardEvent<HTMLLIElement>
   ) => {
     const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
+    const newTabIndex = tabRefs.current.indexOf(newTab);
     const newTabValue = tabValues[newTabIndex]!.value;
 
     if (newTabValue !== selectedValue) {
@@ -80,7 +93,7 @@ function TabList({
         newLanguage = languageSet.filter(
           (lang: Language) => lang.language === newTabValue
         )[0];
-        action.setSelectedVariant(newLanguage.variant.toLowerCase());
+        action.setSelectedVariant(newLanguage.variants[0].toLowerCase());
         action.setSelectedSample(newLanguage.sample);
       }
       action.setLanguage(newLanguage);
@@ -96,13 +109,15 @@ function TabList({
         break;
       }
       case "ArrowRight": {
-        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
+        const nextTab = tabRefs.current.indexOf(event.currentTarget) + 1;
+        focusElement = tabRefs.current[nextTab] ?? tabRefs.current[0]!;
         break;
       }
       case "ArrowLeft": {
-        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1]!;
+        const prevTab = tabRefs.current.indexOf(event.currentTarget) - 1;
+        focusElement =
+          tabRefs.current[prevTab] ??
+          tabRefs.current[tabRefs.current.length - 1]!;
         break;
       }
       default:
@@ -132,7 +147,7 @@ function TabList({
           tabIndex={selectedValue === value ? 0 : -1}
           aria-selected={selectedValue === value}
           key={value}
-          ref={(tabControl) => tabRefs.push(tabControl)}
+          ref={(tabControl) => tabRefs.current.push(tabControl)}
           onKeyDown={handleKeydown}
           onClick={handleTabChange}
           {...attributes}