social icons

.github/workflows/build.yml

@@ -23,6 +23,10 @@ on:
         default: '/logo.png'
       base_path:
         type: string
+      github:
+        type: string
+      discord:
+        type: string
 
 jobs:
   build-job:
@@ -52,6 +56,8 @@ jobs:
             -e NEXT_PUBLIC_URL \
             -e ICON \
             -e LOGO \
+            -e GITHUB \
+            -e DISCORD \
             ghcr.io/pmndrs/docs:main npm run build
         env:
           BASE_PATH: ${{ steps.set-base-path.outputs.BASE_PATH }}
@@ -64,6 +70,8 @@ jobs:
           NEXT_PUBLIC_URL: ${{ steps.configurepages.outputs.base_url }}
           ICON: '${{ inputs.icon }}'
           LOGO: '${{ inputs.logo }}'
+          GITHUB: '${{ inputs.github }}'
+          DISCORD: '${{ inputs.discord }}'
 
       - uses: actions/upload-pages-artifact@v3
         with:

.github/workflows/preview.yml

@@ -30,6 +30,8 @@ jobs:
             --build-env NEXT_PUBLIC_URL="$VERCEL_PROJECT_PRODUCTION_URL" \
             --build-env ICON="🖨️" \
             --build-env LOGO=gutenberg.jpg \
+            --build-env GITHUB="https://github.com/${{ github.repository }}" \
+            --build-env DISCORD="${{ secrets.DISCORD }}" \
             > deployment-url.txt
 
           echo "deployment_url=$(cat deployment-url.txt)" >> $GITHUB_OUTPUT

.github/workflows/release.yml

@@ -32,6 +32,8 @@ jobs:
             --build-env NEXT_PUBLIC_URL="$VERCEL_PROJECT_PRODUCTION_URL" \
             --build-env ICON= \
             --build-env LOGO=gutenberg.jpg \
+            --build-env GITHUB="https://github.com/${{ github.repository }}" \
+            --build-env DISCORD="${{ secrets.DISCORD }}" \
             > deployment-url.txt
 
           echo "deployment_url=$(cat deployment-url.txt)" >> $GITHUB_OUTPUT

docs/getting-started/github-actions.mdx

@@ -15,6 +15,8 @@ uses: pmndrs/docs/.github/workflows/build.yml@main
     home_redirect: '/getting-started/introduction'
     icon: '🇨🇭'
     logo: '/logo.png'
+    github: 'https://github.com/pmndrs/react-three-fiber'
+    discord: 'https://discord.com/channels/740090768164651008/740093168770613279'
 ```
 
 See [`pmndrs/react-three-fiber/.github/workflows/docs.yml`](https://github.com/pmndrs/react-three-fiber/blob/master/.github/workflows/docs.yml) for an example implementation.

docs/getting-started/introduction.mdx

@@ -30,6 +30,8 @@ $ npm ci
 | `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`                                                    |
 | `LOGO`                      | Logo src/path (either FQURL or local to `MDX` path)                                                                                                                      | `/logo.png` or `https://worldvectorlogo.com/r3f.png`                                     |
+| `GITHUB`                    | Github URL                                                                                                                                                               | `https://github.com/pmndrs/react-three-fiber`                                            |
+| `DISCORD`                   | Discord URL                                                                                                                                                              | `https://discord.com/channels/740090768164651008/740093168770613279`                     |
 
 \* Required
 
@@ -75,6 +77,8 @@ $ (
   export NEXT_PUBLIC_URL=
   export ICON=
   export LOGO=gutenberg.jpg
+  export GITHUB=https://github.com/pmndrs/docs
+  export DISCORD=https://discord.com/channels/740090768164651008/1264328004172255393
 
   kill $(lsof -ti:"$_PORT")
   npx serve $MDX -p $_PORT --no-port-switching --no-clipboard &
@@ -111,6 +115,8 @@ $ (
   export NEXT_PUBLIC_URL=
   export ICON=
   export LOGO=gutenberg.jpg
+  export GITHUB=https://github.com/pmndrs/docs
+  export DISCORD=https://discord.com/channels/740090768164651008/1264328004172255393
 
   npm run build
 
@@ -123,3 +129,59 @@ $ (
 ```
 
 http://localhost:3000
+
+## Docker
+
+```sh
+$ docker build -t pmndrs-docs .
+```
+
+```sh
+$ cd ~/code/pmndrs/react-three-fiber
+$ (
+  trap 'kill -9 0' SIGINT
+
+  export _PORT=60141
+
+  export MDX=./docs
+  export NEXT_PUBLIC_LIBNAME="React Three Fiber"
+  export NEXT_PUBLIC_LIBNAME_SHORT="r3f"
+  export BASE_PATH=
+  export OUTPUT=export
+  export HOME_REDIRECT=/getting-started/introduction
+  export MDX_BASEURL=http://localhost:$_PORT
+  export EDIT_BASEURL=
+  export NEXT_PUBLIC_URL=
+  export ICON=🇨🇭
+  export LOGO=/logo.png
+  export GITHUB=https://github.com/pmndrs/react-three-fiber
+  export DISCORD=https://discord.com/channels/740090768164651008/740093168770613279
+
+  rm -rf "$MDX/out"
+
+  docker run --rm --init -it \
+    -v "$MDX":/app/docs \
+    -e MDX \
+    -e NEXT_PUBLIC_LIBNAME \
+    -e BASE_PATH \
+    -e DIST_DIR="$MDX/out$BASE_PATH" \
+    -e OUTPUT \
+    -e HOME_REDIRECT \
+    -e MDX_BASEURL \
+    -e EDIT_BASEURL \
+    -e NEXT_PUBLIC_URL \
+    -e ICON \
+    -e LOGO \
+    -e GITHUB \
+    -e DISCORD \
+    pmndrs-docs npm run build
+
+  kill $(lsof -ti:"$_PORT")
+  npx serve $MDX -p $_PORT --no-port-switching --no-clipboard &
+  npx -y serve "$MDX/out" &
+
+  wait
+)
+```
+
+Then go to: http://localhost:3000

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

@@ -35,7 +35,7 @@ export function Menu({
         <div className="flex w-full items-center justify-between pr-2">
           {header}
           <button
-            className="ml-2 mr-2 block p-2 lg:hidden"
+            className="flex size-9 items-center justify-center lg:hidden"
             onClick={() => setMenuOpen((v) => !v)}
             type="button"
             aria-label="Menu"

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

@@ -10,6 +10,8 @@ import Search from '@/components/Search'
 import ToggleTheme from '@/components/ToggleTheme'
 import Toc from '@/components/Toc'
 import cn from '@/lib/cn'
+import { VscGithubAlt } from 'react-icons/vsc'
+import { PiDiscordLogoLight } from 'react-icons/pi'
 
 export type Props = {
   params: { slug: string[] }
@@ -59,7 +61,28 @@ export default async function Layout({ params, children }: Props) {
                 </div>
 
                 <Search />
-                <ToggleTheme />
+
+                <div className="flex gap-0">
+                  {process.env.GITHUB && (
+                    <Link
+                      href={process.env.GITHUB}
+                      className="hidden size-9 items-center justify-center sm:flex"
+                      target="_blank"
+                    >
+                      <VscGithubAlt />
+                    </Link>
+                  )}
+                  {process.env.DISCORD && (
+                    <Link
+                      href={process.env.DISCORD}
+                      className="hidden size-9 items-center justify-center sm:flex"
+                      target="_blank"
+                    >
+                      <PiDiscordLogoLight />
+                    </Link>
+                  )}
+                  <ToggleTheme className="hidden size-9 items-center justify-center sm:flex" />
+                </div>
               </>
             }
             nav={

src/components/ToggleTheme.tsx

@@ -4,8 +4,10 @@ import * as React from 'react'
 import { CiDark, CiLight } from 'react-icons/ci'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
+import cn from '@/lib/cn'
+import { ComponentProps } from 'react'
 
-const ToggleTheme = () => {
+const ToggleTheme = (props: ComponentProps<'button'>) => {
   const { setTheme, resolvedTheme } = useTheme()
 
   const [isDark, setIsDark] = React.useState<boolean | undefined>(undefined)
@@ -25,7 +27,7 @@ const ToggleTheme = () => {
 
   return (
     <button
-      className="flex h-9 w-9 items-center justify-center"
+      className={cn('', props.className)}
       onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
     >
       {isDark !== undefined ? (