Merge pull request #382 from timolins/link-headers

Make headers in docs link + update site deps
timolins · Dec 30, 2024 · 0763f76 · 0763f76
2 parents 328aba9 + 6edec10
commit 0763f76
Show file tree

Hide file tree

Showing 6 changed files with 1,967 additions and 1,497 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -6,9 +6,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: pnpm/action-setup@v2.2.2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 7
+          version: 9
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:

diff --git a/site/components/code.tsx b/site/components/code.tsx
@@ -130,9 +130,9 @@ export const Code: React.FC<{
             }
 
             return (
-              <div {...getLineProps({ line, key: i })}>
+              <div {...getLineProps({ line, key: i })} key={i}>
                 {line.map((token, key) => (
-                  <span {...getTokenProps({ token, key })} />
+                  <span {...getTokenProps({ token, key })} key={key} />
                 ))}
               </div>
             );

diff --git a/site/next.config.mjs b/site/next.config.mjs
@@ -4,7 +4,7 @@ import nextMdx from '@next/mdx';
 import withPlugins from 'next-compose-plugins';
 
 const withMDX = nextMdx({
-  extension: /.mdx?$/,
+  extension: /\.mdx?$/,
   options: {
     rehypePlugins: [rehypeSlug],
     remarkPlugins: [remarkGfm],
@@ -37,7 +37,7 @@ export default withPlugins(
     withSvgr,
   ],
   {
-    async rewrites() {
+    rewrites() {
       return [
         {
           source: '/bee.js',

diff --git a/site/package.json b/site/package.json
@@ -6,31 +6,31 @@
     "start": "next start"
   },
   "dependencies": {
-    "@mdx-js/loader": "^2.1.2",
-    "@mdx-js/react": "^2.1.2",
-    "@next/mdx": "^12.2.1",
-    "@svgr/webpack": "^6.2.1",
-    "@types/prismjs": "^1.26.0",
-    "@vercel/analytics": "^0.1.5",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@next/mdx": "^12.3.4",
+    "@svgr/webpack": "^6.5.1",
+    "@types/prismjs": "^1.26.5",
+    "@vercel/analytics": "^0.1.11",
     "clsx": "^1.1.1",
-    "next": "^12.2.1",
-    "next-seo": "^5.4.0",
-    "postcss": "^8.4.14",
+    "next": "^12.3.4",
+    "next-seo": "^5.15.0",
+    "postcss": "^8.4.49",
     "prism-react-renderer": "^1.3.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hot-toast": "link:../",
-    "rehype-slug": "^5.0.1"
+    "rehype-slug": "^5.1.0"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.3",
-    "@types/node": "^18.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
-    "autoprefixer": "^10.4.7",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/node": "^18.19.68",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "autoprefixer": "^10.4.20",
     "next-compose-plugins": "^2.2.1",
     "remark-gfm": "^3.0.1",
-    "tailwindcss": "^3.1.5",
-    "typescript": "^4.7.4"
+    "tailwindcss": "^3.4.17",
+    "typescript": "^4.9.5"
   }
 }
diff --git a/site/pages/_app.tsx b/site/pages/_app.tsx
@@ -15,6 +15,48 @@ const components = {
       <a {...props} />
     </Link>
   ),
+  h1: (props) => {
+    const id = props.id || '';
+    return (
+      <h1 {...props}>
+        <Link href={`#${id}`}>
+          <a
+            className={`!no-underline !font-extrabold !text-toast-900 *:!text-toast-900`}
+          >
+            {props.children}
+          </a>
+        </Link>
+      </h1>
+    );
+  },
+  h2: (props) => {
+    const id = props.id || '';
+    return (
+      <h2 {...props}>
+        <Link href={`#${id}`}>
+          <a
+            className={`!no-underline !font-semibold !text-toast-800 *:!text-toast-800`}
+          >
+            {props.children}
+          </a>
+        </Link>
+      </h2>
+    );
+  },
+  h3: (props) => {
+    const id = props.id || '';
+    return (
+      <h3 {...props}>
+        <Link href={`#${id}`}>
+          <a
+            className={`!no-underline !font-semibold !text-toast-800 *:!text-toast-800`}
+          >
+            {props.children}
+          </a>
+        </Link>
+      </h3>
+    );
+  },
   code: (props) =>
     props.className ? (
       <Code className={props.className} snippet={props.children} />