replace code examples with markdown/html/etc

- set languageTabs to [] in config - add x-code-samples (with placeholders) to openapi spec - modify Example component to populate placeholders
chris48s · Dec 10, 2022 · 67a873b · 67a873b
1 parent a6f5d04
commit 67a873b
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 13 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -46,6 +46,7 @@ const config = {
   themeConfig:
     /** @type {import('docusaurus-preset-openapi').ThemeConfig} */
     ({
+      languageTabs: [],
       navbar: {
         title: "My Site",
         logo: {

diff --git a/openapi.json b/openapi.json
@@ -62,6 +62,33 @@
           },
           {"$ref": "#/components/parameters/logo"},
           {"$ref": "#/components/parameters/logoColor"}
+        ],
+        "x-code-samples": [
+            {
+                "lang": "URL",
+                "label": "URL",
+                "source": "$url"
+            },
+            {
+                "lang": "Markdown",
+                "label": "Markdown",
+                "source": "![Bitbucket Pipelines]($url)"
+            },
+            {
+                "lang": "reStructuredText",
+                "label": "rSt",
+                "source": ".. image:: $url\n:   alt: Bitbucket Pipelines"
+            },
+            {
+                "lang": "AsciiDoc",
+                "label": "AsciiDoc",
+                "source": "image:$url[Bitbucket Pipelines]"
+            },
+            {
+                "lang": "HTML",
+                "label": "HTML",
+                "source": "<img alt=\"Bitbucket Pipelines\" src=\"$url\">"
+            }
         ]
       }
     },
@@ -98,6 +125,33 @@
           },
           {"$ref": "#/components/parameters/logo"},
           {"$ref": "#/components/parameters/logoColor"}
+        ],
+        "x-code-samples": [
+            {
+                "lang": "URL",
+                "label": "URL",
+                "source": "$url"
+            },
+            {
+                "lang": "Markdown",
+                "label": "Markdown",
+                "source": "![Bitbucket Pipelines]($url)"
+            },
+            {
+                "lang": "reStructuredText",
+                "label": "rSt",
+                "source": ".. image:: $url\n:   alt: Bitbucket Pipelines"
+            },
+            {
+                "lang": "AsciiDoc",
+                "label": "AsciiDoc",
+                "source": "image:$url[Bitbucket Pipelines]"
+            },
+            {
+                "lang": "HTML",
+                "label": "HTML",
+                "source": "<img alt=\"Bitbucket Pipelines\" src=\"$url\">"
+            }
         ]
       }
     },
@@ -135,6 +189,33 @@
           },
           {"$ref": "#/components/parameters/logo"},
           {"$ref": "#/components/parameters/logoColor"}
+        ],
+        "x-code-samples": [
+            {
+                "lang": "URL",
+                "label": "URL",
+                "source": "$url"
+            },
+            {
+                "lang": "Markdown",
+                "label": "Markdown",
+                "source": "![Drone Build]($url)"
+            },
+            {
+                "lang": "reStructuredText",
+                "label": "rSt",
+                "source": ".. image:: $url\n:   alt: Drone Build"
+            },
+            {
+                "lang": "AsciiDoc",
+                "label": "AsciiDoc",
+                "source": "image:$url[Drone Build]"
+            },
+            {
+                "lang": "HTML",
+                "label": "HTML",
+                "source": "<img alt=\"Drone Build\" src=\"$url\">"
+            }
         ]
       }
     },
@@ -154,6 +235,33 @@
           },
           {"$ref": "#/components/parameters/logo"},
           {"$ref": "#/components/parameters/logoColor"}
+        ],
+        "x-code-samples": [
+            {
+                "lang": "URL",
+                "label": "URL",
+                "source": "$url"
+            },
+            {
+                "lang": "Markdown",
+                "label": "Markdown",
+                "source": "![NPM Version]($url)"
+            },
+            {
+                "lang": "reStructuredText",
+                "label": "rSt",
+                "source": ".. image:: $url\n:   alt: NPM Version"
+            },
+            {
+                "lang": "AsciiDoc",
+                "label": "AsciiDoc",
+                "source": "image:$url[NPM Version]"
+            },
+            {
+                "lang": "HTML",
+                "label": "HTML",
+                "source": "<img alt=\"NPM Version\" src=\"$url\">"
+            }
         ]
       }
     }

diff --git a/src/shields-theme/Example.tsx b/src/shields-theme/Example.tsx
@@ -151,19 +151,18 @@ function Example({ postman, codeSamples }: Props) {
   const [codeText, setCodeText] = useState("");
 
   useEffect(() => {
+    const postmanRequest = buildPostmanRequest(postman, {
+      queryParams,
+      pathParams,
+      cookieParams,
+      contentType,
+      accept,
+      headerParams,
+      body,
+      server,
+      auth,
+    });
     if (language && !!language.options) {
-      const postmanRequest = buildPostmanRequest(postman, {
-        queryParams,
-        pathParams,
-        cookieParams,
-        contentType,
-        accept,
-        headerParams,
-        body,
-        server,
-        auth,
-      });
-
       codegen.convert(
         language.language,
         language.variant,
@@ -177,7 +176,7 @@ function Example({ postman, codeSamples }: Props) {
         }
       );
     } else if (language && !!language.source) {
-      setCodeText(language.source);
+      setCodeText(language.source.replace('$url', postmanRequest.url.toString()));
     } else {
       setCodeText("");
     }