From 7788f8d64c0610f2005a77d4a7e874f903f724d7 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Tue, 3 Sep 2024 08:03:15 +0200 Subject: [PATCH] fix: sourcecode --- .github/workflows/build.yml | 2 ++ docs/getting-started/authoring.mdx | 4 +++- docs/getting-started/introduction.mdx | 7 ++++++- src/app/[...slug]/DocsContext.tsx | 3 ++- src/app/[...slug]/layout.tsx | 10 +++++----- src/app/[...slug]/page.tsx | 10 +++++++++- src/app/globals.css | 4 ++-- src/components/mdx/index.tsx | 7 ------- src/utils/docs.tsx | 9 +++++++-- 9 files changed, 36 insertions(+), 20 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 2146499d..04b21f65 100644 --- 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 index 4cf8980d..368139ea 100644 --- 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 index 9ad69e4e..b6cb0b7f 100644 --- 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 index a710ea40..d9335d4b 100644 --- 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 index 0192ce5d..8a0a4c0c 100644 --- 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={ level > 0)} />} footer={ <> - {(!!currentPage || doc.source) && ( + {(!!currentPage || doc.sourcecode) && (
- {doc.source && ( + {doc.sourcecode && (

- {doc.source} + {doc.sourcecode}

)} diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx index b086beb3..c20d0f0f 100644 --- a/src/app/[...slug]/page.tsx +++ b/src/app/[...slug]/page.tsx @@ -40,7 +40,15 @@ export default async function Page({ params }: Props) { <>
-

{doc?.title}

+

+ {doc.sourcecode ? ( + + {doc.title} + + ) : ( + doc.title + )} +

{!!doc?.description?.length && (

{doc.description} diff --git a/src/app/globals.css b/src/app/globals.css index e2b124f9..9db26a11 100644 --- 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 index 5e75739f..c79b7bde 100644 --- 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'>) => ( - -) - export const details = (props: ComponentProps<'details'>) =>

export const summary = (props: ComponentProps<'summary'>) => ( diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx index 6e4c6e89..a9b20ff8 100644 --- 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,