fix: sourcecode

pmndrs · Sep 3, 2024 · 7788f8d · 7788f8d
1 parent 7291584
commit 7788f8d
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 20 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -77,6 +77,7 @@ jobs:
             -e OUTPUT=export \
             -e HOME_REDIRECT \
             -e MDX_BASEURL \
+            -e SOURCECODE_BASEURL \
             -e EDIT_BASEURL \
             -e NEXT_PUBLIC_URL \
             -e ICON \
@@ -99,6 +100,7 @@ jobs:
           NEXT_PUBLIC_LIBNAME_SHORT: ${{ inputs.libname_short }}
           HOME_REDIRECT: ${{ inputs.home_redirect }}
           MDX_BASEURL: 'https://github.com/${{ github.repository }}/raw/${{ github.ref_name }}/${{ inputs.mdx }}'
+          SOURCECODE_BASEURL: 'https://github.com/${{ github.repository }}/tree/${{ github.ref_name }}'
           EDIT_BASEURL: 'https://github.com/${{ github.repository }}/edit/${{ github.ref_name }}/${{ inputs.mdx }}'
           NEXT_PUBLIC_URL: ${{ steps.configurepages.outputs.base_url }}
           ICON: '${{ inputs.icon }}'

diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
@@ -1,6 +1,7 @@
 ---
 title: Authoring
 description: How to write documentation
+sourcecode: docs/getting-started/authoring.mdx
 nav: 1
 ---
 
@@ -12,6 +13,7 @@ title: My Document
 description: Lorem ipsum...
 nav: 0
 image: dog.png
+sourcecode: to/my-document.mdx
 ---
 
 MARKDOWN
@@ -23,7 +25,7 @@ Any key is optional.
 
 - `title`: if not provided, last part of the path is used: `my document`
 - `description`
-- `source`: relative path to the source file, eg: `src/foo.tsx`
+- `sourcecode`: relative path to the source-code file
 - `image`:
   - relative (to the md file) or absolute path, eg: `dog.png`, `./dog.png`, `../../dog.png`, `/dog.png` or `https://animals.com/dog.png`
   - will be used as metadata image if provided

diff --git a/docs/getting-started/introduction.mdx b/docs/getting-started/introduction.mdx
@@ -28,6 +28,7 @@ $ npm ci
 | `OUTPUT`                    | Set to `export` for static output                                                                                                                                        | `export`                                                                                         |
 | `HOME_REDIRECT`             | Where the home should redirect                                                                                                                                           | `/getting-started/introduction`                                                                  |
 | `MDX_BASEURL`               | Base URL for inlining relative images                                                                                                                                    | `http://localhost:60141`or `https://github.com/pmndrs/react-three-fiber/raw/master/docs`         |
+| `SOURCECODE_BASEURL`        | Base URL for `sourcecode:` code path                                                                                                                                     | `https://github.com/pmndrs/react-three-fiber/tree/main`                                          |
 | `EDIT_BASEURL`              | Base URL for displaying "Edit this page" URLs                                                                                                                            | `https://github.com/pmndrs/react-three-fiber/edit/master/docs`                                   |
 | `NEXT_PUBLIC_URL`           | Final URL of the published website                                                                                                                                       | `https://pmndrs.github.io/react-three-fiber`                                                     |
 | `ICON`                      | Emoji or image to use as (fav)icon (path local to `MDX`)                                                                                                                 | `🇨🇭` or `/icon.png` or `/favicon.ico`                                                            |
@@ -96,7 +97,8 @@ $ (
   export OUTPUT=export
   export HOME_REDIRECT=
   export MDX_BASEURL=http://localhost:$_PORT
-  export EDIT_BASEURL="vscode://file/$MDX"
+  export SOURCECODE_BASEURL="vscode://file$(pwd)/docs"
+  export EDIT_BASEURL="vscode://file$(pwd)/docs"
   export NEXT_PUBLIC_URL=
   export ICON=
   export LOGO=gutenberg.jpg
@@ -142,6 +144,7 @@ $ (
   export OUTPUT=export
   export HOME_REDIRECT=/getting-started/introduction
   export MDX_BASEURL=http://localhost:$_PORT
+  export SOURCECODE_BASEURL=
   export EDIT_BASEURL=
   export NEXT_PUBLIC_URL=
   export ICON=
@@ -189,6 +192,7 @@ $ (
   export OUTPUT=export
   export HOME_REDIRECT=/getting-started/introduction
   export MDX_BASEURL=http://localhost:$_PORT
+  export SOURCECODE_BASEURL=
   export EDIT_BASEURL=
   export NEXT_PUBLIC_URL=
   export ICON=🇨🇭
@@ -215,6 +219,7 @@ $ (
     -e OUTPUT \
     -e HOME_REDIRECT \
     -e MDX_BASEURL \
+    -e SOURCECODE_BASEURL \
     -e EDIT_BASEURL \
     -e NEXT_PUBLIC_URL \
     -e ICON \

diff --git a/src/app/[...slug]/DocsContext.tsx b/src/app/[...slug]/DocsContext.tsx
@@ -17,10 +17,11 @@ export type Doc = {
   slug: string[]
   url: string
   editURL?: string
+  sourcecode?: string
+  sourcecodeURL?: string
   nav: number
   title: string
   description: string
-  source?: string
   image: string
   content: ReactNode
   boxes: string[]

diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx
@@ -88,20 +88,20 @@ export default async function Layout({ params, children }: Props) {
             aside={<Toc toc={doc.tableOfContents.filter(({ level }) => level > 0)} />}
             footer={
               <>
-                {(!!currentPage || doc.source) && (
+                {(!!currentPage || doc.sourcecode) && (
                   <div className="mx-auto mt-24 flex max-w-3xl flex-col gap-4 pb-10 text-right">
-                    {doc.source && (
+                    {doc.sourcecode && (
                       <p>
                         <a
                           target="_blank"
                           rel="noopener noreferrer"
                           className={cn(
                             'mb-2 text-base hover:underline',
-                            'text-on-surface-variant/50',
+                            'font-mono text-on-surface-variant/50',
                           )}
-                          href={currentPage.editURL || '#no-edit-url'}
+                          href={doc.sourcecodeURL || '#no-sourcecode-url'}
                         >
-                          <code>{doc.source}</code>
+                          {doc.sourcecode}
                         </a>
                       </p>
                     )}

diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
@@ -40,7 +40,15 @@ export default async function Page({ params }: Props) {
     <>
       <div className="mx-auto max-w-3xl">
         <div className={cn('post-header mb-6 border-b pb-4', 'border-outline-variant/50')}>
-          <h1 className="mb-2 text-5xl font-bold tracking-tighter">{doc?.title}</h1>
+          <h1 className="mb-2 text-5xl font-bold tracking-tighter">
+            {doc.sourcecode ? (
+              <a href={doc.sourcecodeURL} className="no-underline hover:underline">
+                <code>{doc.title}</code>
+              </a>
+            ) : (
+              doc.title
+            )}
+          </h1>
           {!!doc?.description?.length && (
             <p className={cn('text-base leading-5', 'text-on-surface-variant/50')}>
               {doc.description}

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -72,8 +72,8 @@ pre[class*='language-'] {
 }
 
 /* Inline code */
-:not(pre) > code[class*='language-'] {
-  @apply rounded-lg;
+:not(pre) > code {
+  @apply bg-surface-container-high rounded-lg px-1.5 py-0.5 font-mono text-[85%];
   white-space: normal;
 }
 

diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
@@ -96,13 +96,6 @@ export const a = ({ href, target, rel, ...props }: ComponentProps<'a'>) => {
 
 export const img = Img
 
-export const code = (props: ComponentProps<'code'>) => (
-  <code
-    className="bg-surface-container-high rounded-md px-1.5 py-0.5 font-mono text-[85%]"
-    {...props}
-  />
-)
-
 export const details = (props: ComponentProps<'details'>) => <details className="ml-4" {...props} />
 export const summary = (props: ComponentProps<'summary'>) => (
   <summary className="my-2 -ml-4 cursor-pointer select-none" {...props} />

diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx
@@ -93,6 +93,10 @@ async function _getDocs(
       // editURL
       const EDIT_BASEURL = process.env.EDIT_BASEURL
       const editURL = EDIT_BASEURL?.length ? file.replace(root, EDIT_BASEURL) : undefined
+      const SOURCECODE_BASEURL = process.env.SOURCECODE_BASEURL
+      const sourcecodeURL = SOURCECODE_BASEURL?.length
+        ? file.replace(root, SOURCECODE_BASEURL)
+        : undefined
 
       // Read & parse doc
 
@@ -108,7 +112,7 @@ async function _getDocs(
       const title: string = frontmatter.title ?? _lastSegment.replace(/\-/g, ' ')
 
       const description: string = frontmatter.description ?? ''
-      const sourceCode: string = frontmatter.source ?? ''
+      const sourcecode: string = frontmatter.sourcecode ?? ''
       const nav: number = frontmatter.nav ?? Infinity
 
       const frontmatterImage: string | undefined = frontmatter.image
@@ -189,10 +193,11 @@ async function _getDocs(
         slug,
         url,
         editURL,
+        sourcecode,
+        sourcecodeURL,
         title,
         image,
         description,
-        source: sourceCode,
         nav,
         content: jsx,
         boxes,