svg icon + metadata

.github/workflows/build.yml

@@ -39,6 +39,7 @@ jobs:
  -e HOME_REDIRECT \
  -e INLINE_IMAGES_ORIGIN \
  -e EDIT_ORIGIN \
+ -e NEXT_PUBLIC_URL \
  ghcr.io/pmndrs/docs:app-router npm run build
  env:
  BASE_PATH: ${{ steps.configurepages.outputs.base_path }}
@@ -47,6 +48,7 @@ jobs:
  HOME_REDIRECT: ${{ inputs.home_redirect }}
  INLINE_IMAGES_ORIGIN: ${{ inputs.inline_images_origin }}/${{ inputs.mdx }}
  EDIT_ORIGIN: 'https://github.com/${{ github.repository }}/edit/${{ github.ref_name }}/${{ inputs.mdx }}'
+ NEXT_PUBLIC_URL: ${{ steps.configurepages.outputs.base_url }}
 
  - uses: actions/upload-pages-artifact@v3
  with:

README.md

@@ -10,6 +10,7 @@
 | `HOME_REDIRECT` | Where the home should redirect | `/getting-started/introduction` | none |
 | `INLINE_IMAGES_ORIGIN` | [Origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for inlining relative images | `http://localhost:60141`or `https://github.com/pmndrs/react-three-fiber/raw/master/docs` | none |
 | `EDIT_ORIGIN` | [Origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for displaying "Edit this page" URLs | `https://github.com/pmndrs/react-three-fiber/edit/master/docs` | none |
+| `NEXT_PUBLIC_URL` | Final URL of the published website | `https://pmndrs.github.io/react-three-fiber` | none |
 
 \* Required
 
@@ -51,6 +52,7 @@ $ (
  export HOME_REDIRECT=/getting-started/introduction
  export INLINE_IMAGES_ORIGIN=http://localhost:$_PORT
  export EDIT_ORIGIN="vscode://file/$MDX"
+ export NEXT_PUBLIC_URL=
 
  kill $(lsof -ti:"$_PORT")
  npx serve $MDX -p $_PORT --no-port-switching --no-clipboard &
@@ -84,6 +86,7 @@ $ (
  export HOME_REDIRECT=/getting-started/introduction
  export INLINE_IMAGES_ORIGIN=http://localhost:$_PORT
  export EDIT_ORIGIN=
+ export NEXT_PUBLIC_URL=
 
  npm run build
 
@@ -118,6 +121,7 @@ $ (
  export HOME_REDIRECT=/getting-started/introduction
  export INLINE_IMAGES_ORIGIN=http://localhost:$_PORT
  export EDIT_ORIGIN=
+ export NEXT_PUBLIC_URL=
 
  rm -rf "$MDX/out"
 
@@ -131,6 +135,7 @@ $ (
  -e HOME_REDIRECT \
  -e INLINE_IMAGES_ORIGIN \
  -e EDIT_ORIGIN \
+ -e NEXT_PUBLIC_URL \
  pmndrs-docs npm run build
 
  kill $(lsof -ti:"$_PORT")

src/app/[...slug]/page.tsx

@@ -1,11 +1,33 @@
 import * as React from 'react'
+
 import Post from '@/components/Post'
 import { getData, getDocs } from '@/utils/docs'
 
 export type Props = {
  params: { slug: string[] }
 }
 
+export async function generateMetadata({ params }: Props) {
+ const slug = params.slug
+
+ const { doc } = await getData(...slug)
+
+ const title = `${doc.title} - ${process.env.NEXT_PUBLIC_LIBNAME}`
+ const description = doc.description
+ const url = doc.url
+
+ return {
+ title,
+ description,
+ openGraph: {
+ title,
+ description,
+ url,
+ type: 'article',
+ },
+ }
+}
+
 export default async function Page({ params }: Props) {
  // console.log('page', params)
 

src/app/layout.tsx

@@ -4,9 +4,39 @@ import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 
+const NEXT_PUBLIC_URL = process.env.NEXT_PUBLIC_URL
+const NEXT_PUBLIC_LIBNAME = process.env.NEXT_PUBLIC_LIBNAME
+
+const title = NEXT_PUBLIC_LIBNAME
+const description = `Documentation for ${NEXT_PUBLIC_LIBNAME}`
+const url = NEXT_PUBLIC_URL
+const siteName = NEXT_PUBLIC_LIBNAME
+
 export const metadata: Metadata = {
- title: 'Create Next App',
- description: 'Generated by create next app',
+ metadataBase: NEXT_PUBLIC_URL ? new URL(NEXT_PUBLIC_URL) : undefined,
+ title,
+ description: `Documentation for ${NEXT_PUBLIC_LIBNAME}`,
+ openGraph: {
+ title,
+ description,
+ url,
+ siteName,
+ // images: [
+ // {
+ // url: 'https://nextjs.org/og.png', // Must be an absolute URL
+ // width: 800,
+ // height: 600,
+ // },
+ // {
+ // url: 'https://nextjs.org/og-alt.png', // Must be an absolute URL
+ // width: 1800,
+ // height: 1600,
+ // alt: 'My custom alt',
+ // },
+ // ],
+ locale: 'en_US',
+ type: 'website',
+ },
 }
 
 export default function RootLayout({