Optimize CDN images (#448)

* Optimize CDN images

* updated cdn path

* fix relative urls

* use url instead of path

* fixed path resolution

* updated relative path

docs/articles/api-key-administration.md

@@ -31,7 +31,7 @@ the form.
 Once a consumer is created, you can view or copy the API Key by clicking the
 icons shown.
 
-![Copy or View](/media/api-key-administration/image-5.png)
+![Copy or View](../../public/media/api-key-administration/image-5.png)
 
 If you're using the Zuplo [Developer Portal](./developer-portal.md), we have an
 integration with the API Key API that allows developers to access their API

src/DocusaurusDocsLicense.tsx

@@ -0,0 +1,23 @@
+/**
+ * Zudoku takes inspiration from some of the great features os Docusaurus.
+ * As such we duplicate some of the Docusaurus documentation to provide
+ * a consistent experience and make migration easier.
+ *
+ * Docusaurus Docs are licensed under Creative Commons Attribution 4.0
+ * International (CC BY 4.0). This means that any doc we copy content from
+ * needs to be attributed and linked to the original source.
+ */
+export function DocusaurusDocsLicense({ sourceUrl }: { sourceUrl: string }) {
+  return (
+    <p>
+      Portions of this document are adapted from from the{" "}
+      <a href="https://docusaurus.io/">Docusaurus project</a>, created by Meta
+      Platforms, Inc., and is licensed under the{" "}
+      <a href="https://github.com/facebook/docusaurus/blob/main/LICENSE-docs">
+        Creative Commons Attribution 4.0 International
+      </a>
+      (CC BY 4.0) license. The <a href={sourceUrl}>original document</a>
+      has been modified.
+    </p>
+  );
+}

src/EmbeddedChat.tsx

@@ -3,7 +3,6 @@ import {
   InkeepEmbeddedChat,
   type InkeepWidgetBaseSettings,
 } from "@inkeep/widgets";
-import React from "react";
 
 const baseSettings: InkeepWidgetBaseSettings = {
   apiKey: "499c156cf7a9798343949c8bb5665ac95e48132c6d68c42e",

src/mdx/static-images.ts

@@ -0,0 +1,52 @@
+import { Root } from "mdast";
+import { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+import type { VFile } from "vfile";
+
+/**
+ * Copies images from the /static folder to /public if they are referenced by a
+ * @returns
+ */
+const rehypeStaticImages: Plugin<[], Root, Root> =
+  () => async (root, vfile: VFile) => {
+    const promises: Promise<void>[] = [];
+    visit(root, ["element"], (node: any, index, parent) => {
+      promises.push(
+        (async () => {
+          if (
+            node.type === "element" &&
+            node.tagName === "img" &&
+            node.properties
+          ) {
+            if (!node.properties.src.startsWith("http")) {
+              let url = node.properties.src;
+              const relativePath = url.startsWith("/public/")
+                ? `/docs${url.substring("/public".length)}`
+                : url;
+              if (process.env.USE_IMAGE_CDN) {
+                node.properties.src = `https://cdn.zuplo.com${relativePath}`;
+              } else {
+                node.properties.src = relativePath;
+              }
+            }
+
+            if (
+              node.properties.src.startsWith("https://cdn.zuplo.com/") &&
+              !node.properties.src.endsWith(".svg") &&
+              !node.properties.src.endsWith(".gif")
+            ) {
+              const url = new URL(node.properties.src);
+              node.properties.srcSet = [
+                `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=640,format=auto${url.pathname}   640w`,
+                `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=960,format=auto${url.pathname}   960w`,
+                `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=1280,format=auto${url.pathname} 1280w`,
+                `https://cdn.zuplo.com/cdn-cgi/image/fit=contain,width=2560,format=auto${url.pathname} 2560w`,
+              ].join(", ");
+            }
+          }
+        })(),
+      );
+    });
+    await Promise.all(promises);
+  };
+export default rehypeStaticImages;

zudoku.config.tsx

@@ -3,18 +3,21 @@ import type { ZudokuConfig } from "zudoku";
 import { CogIcon, CopyIcon, FileTextIcon, ListEndIcon } from "zudoku/icons";
 import { devPortal, docs, policies, programming } from "./sidebar.js";
 import { BundlesTable } from "./src/BundlesTable";
+import { DocusaurusDocsLicense } from "./src/DocusaurusDocsLicense";
 import { EnterpriseFeature } from "./src/EnterpriseFeature";
 import { GithubButton } from "./src/GithubButton";
 import { HeadNavigation } from "./src/HeadNavigation";
 import { PolicyOverview } from "./src/PolicyOverview";
 import ZupIt from "./src/ZupIt.js";
+import rehypeStaticImages from "./src/mdx/static-images.js";
 
 const iconStyle = { display: "inline", verticalAlign: "-0.125em" };
 
 const EmbeddedChat = lazy(() => import("./src/EmbeddedChat"));
 
 const mdxComponents = {
   Screenshot: (props: any) => <img {...props} />,
+  DocusaurusDocsLicense,
   GithubButton,
   ZupIt: (props: any) => <ZupIt {...props} />,
   CodeEditorTabIcon: () => <FileTextIcon style={iconStyle} size={18} />,
@@ -120,6 +123,9 @@ const config: ZudokuConfig = {
   sitemap: {
     siteUrl: "https://zuplo.com/docs",
   },
+  build: {
+    rehypePlugins: [rehypeStaticImages],
+  },
 };
 
 export default config;