diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 6a4784be..0c60b0cc 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,10 +1,11 @@
+"use client";
+
+import { navigation } from "@/build/navigation.mjs";
+import { NavCategory, NavItem } from "@/lib/interfaces";
import clsx from "clsx";
import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
-
-import { navigation } from "@/build/navigation.mjs";
-import { NavCategory, NavItem } from "@/lib/interfaces";
import { useState } from "react";
function SubNavSection({
diff --git a/src/components/markdown/Callout.tsx b/src/components/markdown/Callout.tsx
index 565e6acf..f4fd4fa3 100644
--- a/src/components/markdown/Callout.tsx
+++ b/src/components/markdown/Callout.tsx
@@ -10,7 +10,7 @@ type CalloutType = "note" | "tip" | "info" | "warning" | "caution" | "danger";
type CalloutProps = {
type: CalloutType;
children: any;
- title: string;
+ title?: string;
};
// -----------------------------------------------------------
diff --git a/src/components/markdown/GithubButton.module.css b/src/components/markdown/GithubButton.module.css
index 7b60f8c4..109bb20d 100644
--- a/src/components/markdown/GithubButton.module.css
+++ b/src/components/markdown/GithubButton.module.css
@@ -1,7 +1,9 @@
.github-button {
margin-right: auto;
margin-left: auto;
- display: inherit;
+ display: flex;
+ align-items: center;
+ gap: 5px;
width: fit-content;
background-color: black;
border: black;
diff --git a/src/components/markdown/GithubButton.tsx b/src/components/markdown/GithubButton.tsx
index e47fe280..d5a89a4e 100644
--- a/src/components/markdown/GithubButton.tsx
+++ b/src/components/markdown/GithubButton.tsx
@@ -13,7 +13,7 @@ export default function GithubButton({
{text}
diff --git a/src/components/markdown/ZupIt.tsx b/src/components/markdown/ZupIt.tsx
new file mode 100644
index 00000000..ac6f630f
--- /dev/null
+++ b/src/components/markdown/ZupIt.tsx
@@ -0,0 +1,17 @@
+/* eslint-disable @next/next/no-img-element */
+import Link from "next/link";
+import Callout from "./Callout";
+
+export default function ZupIt({ repoUrl }: { repoUrl: string }) {
+ return (
+
+
+ This sample is available on on GitHub or
+ click the button below to open the code directly in the portal.{" "}
+
+
+ 
+
+
+ );
+}
diff --git a/src/components/markdown/index.tsx b/src/components/markdown/index.tsx
index 673b0c60..1648084b 100644
--- a/src/components/markdown/index.tsx
+++ b/src/components/markdown/index.tsx
@@ -3,6 +3,7 @@ import { MDXProvider } from "@mdx-js/react";
import { ChevronLeftIcon } from "lucide-react";
import { Fence } from "../Fence";
import Callout from "./Callout";
+import ZupIt from "./ZupIt";
import {
ApiTestConsoleTabIcon,
BuildStatusTabIcon,
@@ -30,6 +31,7 @@ const components: React.ComponentProps
["components"] = {
GitHubIcon,
GithubButton,
Callout,
+ ZupIt,
pre: Fence as any,
img: (props) => (
// eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element
diff --git a/src/lib/content.ts b/src/lib/content.ts
index e9f37ea7..e36753b3 100644
--- a/src/lib/content.ts
+++ b/src/lib/content.ts
@@ -29,7 +29,7 @@ export async function getSlugContent>({
const filepath = path.join(
process.cwd(),
sourceDir,
- fileName.replace("%5C", "/"),
+ fileName.replaceAll("%5C", "/"),
);
if (!existsSync(filepath)) {
return undefined;
diff --git a/src/lib/markdown/md-links.ts b/src/lib/markdown/md-links.ts
index b1474dea..43af5a9b 100644
--- a/src/lib/markdown/md-links.ts
+++ b/src/lib/markdown/md-links.ts
@@ -8,10 +8,16 @@ import type { VFile } from "vfile";
*/
export default function remarkTransformLink() {
return async (root: Node, vfile: VFile) => {
+ const promises: Promise[] = [];
visit(root, "link", (node: Link, index, parent) => {
- if (node.url.endsWith(".md")) {
- node.url = node.url.replace(".md", "");
- }
+ promises.push(
+ (async () => {
+ if (node.url.endsWith(".md")) {
+ node.url = node.url.replace(".md", "");
+ }
+ })(),
+ );
});
+ await Promise.all(promises);
};
}
diff --git a/src/lib/markdown/mdx.ts b/src/lib/markdown/mdx.ts
index ac97cf90..5e16ed6f 100644
--- a/src/lib/markdown/mdx.ts
+++ b/src/lib/markdown/mdx.ts
@@ -126,7 +126,7 @@ export async function compileMdx>(
const migrated = await migrateContent(source);
const vfile = new VFile(migrated);
- vfile.path = filepath;
+ vfile.path = filepath.replace(".md", ".mdx"); // Trick mdxjs that this is MDX
const nodes: (Element & { tagName: "h2" | "h3" })[] = [];
const options = getOptions(nodes);
diff --git a/src/lib/markdown/static-images.ts b/src/lib/markdown/static-images.ts
index b4407b7f..d8667dfd 100644
--- a/src/lib/markdown/static-images.ts
+++ b/src/lib/markdown/static-images.ts
@@ -9,17 +9,23 @@ import type { VFile } from "vfile";
*/
export default function remarkStaticImage() {
return async (root: Parent, vfile: VFile) => {
+ const promises: Promise[] = [];
visit(root, "image", (node: Image, index, parent) => {
- if (!node.url.startsWith("http")) {
- const publicDir = path.join(process.cwd(), "public");
- let url = path.resolve(path.dirname(vfile.path), node.url);
- const relativePath = url.replace(publicDir, "");
- if (process.env.USE_IMAGE_CDN) {
- node.url = `https://cdn.zuplo.com/docs${relativePath}`;
- } else {
- node.url = `/docs${relativePath}`;
- }
- }
+ promises.push(
+ (async () => {
+ if (!node.url.startsWith("http")) {
+ const publicDir = path.join(process.cwd(), "public");
+ let url = path.resolve(path.dirname(vfile.path), node.url);
+ const relativePath = url.replace(publicDir, "");
+ if (process.env.USE_IMAGE_CDN) {
+ node.url = `https://cdn.zuplo.com/docs${relativePath}`;
+ } else {
+ node.url = `/docs${relativePath}`;
+ }
+ }
+ })(),
+ );
});
+ await Promise.all(promises);
};
}