fix(v2): code link component

novorender · Aug 23, 2023 · 397bbab · 397bbab
1 parent 72ddaff
commit 397bbab
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/v2/docs/guides/camera_controllers.mdx b/v2/docs/guides/camera_controllers.mdx
@@ -5,7 +5,6 @@ keywords: ["novorender api docs", "webgl api", "clipping volumes"]
 ---
 
 import { snippets } from "@site/demo-snippets/index";
-import { CodeLink } from "@site/src/components/CodeLink";
 
 Before we dive into camera controllers, let's examine what they control exactly.
 The camera orientation and projection used for rendering is described in the render state as a 3D vector and quaternion.

diff --git a/v2/docs/guides/getting_started.mdx b/v2/docs/guides/getting_started.mdx
@@ -5,8 +5,8 @@ description: "Setting up instructions for the various Novorender packages."
 keywords: ["novorender api docs", "getting started"]
 ---
 
+import Link from "@docusaurus/Link";
 import { snippets } from "@site/demo-snippets/index";
-import { CodeLink } from "@site/src/components/CodeLink";
 
 The novorender API consist of several modules.
 

diff --git a/v2/docs/guides/render_state.mdx b/v2/docs/guides/render_state.mdx
@@ -6,7 +6,6 @@ keywords: ["novorender api docs", "render state"]
 ---
 
 import { snippets } from "@site/demo-snippets/index";
-import { CodeLink } from "@site/src/components/CodeLink";
 
 In this guide we will dive more into <CodeLink type="interface" name="RenderState"/> and how to modify it.
 

diff --git a/v2/src/components/CodeLink.tsx → v2/src/components/CodeLink/index.tsx b/v2/src/components/CodeLink.tsx → v2/src/components/CodeLink/index.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import Link from "@docusaurus/Link";
 
 export type TypeString = "class" | "interface" | "type" | "function" | "enum" | "variable";
 
-export const CodeLink = ({ type, name }: { readonly type: TypeString; readonly name: string }) => {
+export default function CodeLink({ type, name }: { readonly type: TypeString; readonly name: string; }): JSX.Element {
   let path = "???";
   let [typeName, ...propNames] = name.split(".");
   propNames = propNames.map((n) => "#" + (n == "new" ? "new-view" : n.toLowerCase()));
@@ -30,8 +31,8 @@ export const CodeLink = ({ type, name }: { readonly type: TypeString; readonly n
   }
   const url = useBaseUrl(`docs/web_api/${path}`);
   return (
-    <a href={url}>
+    <Link to={url}>
       <code>{name}</code>
-    </a>
+    </Link>
   );
 };
diff --git a/v2/src/theme/MDXComponents.js b/v2/src/theme/MDXComponents.js
@@ -2,11 +2,13 @@ import React from "react";
 // Import the original mapper
 import MDXComponents from "@theme-original/MDXComponents";
 import PlaygroundComponent from "@site/src/components/PlaygroundComponent";
+import CodeLink from "@site/src/components/CodeLink";
 
 export default {
   // Re-use the default mapping
   ...MDXComponents,
-  // Map the "PlaygroundComponent" tag to our <PlaygroundComponent /> component!
-  // `PlaygroundComponent` will receive all props that were passed to `PlaygroundComponent` in MDX
+  // Map custom components to their corresponding tags
+  // these tags will receive all props that were passed to the components in MDX
   PlaygroundComponent: PlaygroundComponent,
+  CodeLink: CodeLink,
 };