Upgrade dependencies

.github/workflows/ci.yaml

@@ -11,14 +11,14 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
               with:
                   node-version-file: ".tool-versions"
             - name: Get the Yarn cache directory path
               id: yarn-cache-dir-path
               run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-            - uses: actions/cache@v3
+            - uses: actions/cache@v4
               with:
                   path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
                   key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -30,8 +30,8 @@ jobs:
               run: yarn run format:check
             # - name: Lint the code
             #   run: yarn run lint
-            - name: Export the website
-              run: yarn run export
+            - name: Build the website
+              run: yarn run build
             - name: Run Lighthouse
               run: npx --package=@lhci/cli lhci autorun
               env:

.nvmrc

@@ -1 +1 @@
-18.16.0
+20.11.1

.tool-versions

@@ -1 +1 @@
-nodejs 18.16.0
+nodejs 20.11.1

components/SyntaxHighlighter.tsx

@@ -2,12 +2,44 @@ import {LightAsync} from "react-syntax-highlighter";
 import {a11yDark} from "react-syntax-highlighter/dist/cjs/styles/hljs";
 
 function SyntaxHighlighter(props) {
-    return (
+    const {children, className} = props;
+    if (!children) {
+        return null;
+    }
+
+    // An example className is "language-python"
+    const languageMatch = /language-(\w+)/.exec(className || "");
+
+    /* This is a simplified version of the example from the react-markdown docs:
+       https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
+
+       If we have a language, we render it as a code block with syntax
+       highlighting. Otherwise, we render an inline code element.
+
+       One issue is that this approach doesn't handle a code block that doesn't
+       have a language identifier, though GitHub supports that:
+       https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#fenced-code-blocks
+
+       It is rendered as an inline code element instead of a code block. See
+       this issue for more context:
+       https://github.com/remarkjs/react-markdown/issues/776
+
+       If we could distinguish between inline code and code blocks, we could
+       still use the syntax highlighter and pass in plain text for the language.
+       Instead, our hacky fix for this is to apply CSS by targeting the
+       language-less code blocks and copying over the styling that is provided
+       by github-markdown-css. See the ".markdown-body pre > code" selector in
+       global.css.
+    */
+    return languageMatch ? (
         <LightAsync
-            language={props.language}
+            PreTag="div"
+            children={children}
+            language={languageMatch[1]}
             style={a11yDark}
-            children={props.value || ""}
         />
+    ) : (
+        <code className={className} children={children} />
     );
 }
 

components/Template.tsx

@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
 import TextareaAutosize from "react-textarea-autosize";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 
-const initialTemplate = `# Foobar
+const INITIAL_TEMPLATE = `# Foobar
 
 Foobar is a Python library for dealing with word pluralization.
 
@@ -42,7 +42,7 @@ Please make sure to update tests as appropriate.
 [MIT](https://choosealicense.com/licenses/mit/)`;
 
 export function Template() {
-    const [template, setTemplate] = useState(initialTemplate);
+    const [template, setTemplate] = useState(INITIAL_TEMPLATE);
 
     return (
         <section id="template" className="bg-medium-gray pb-10">
@@ -72,7 +72,7 @@ export function Template() {
                         id="rendered"
                         className="markdown-body bg-white p-4 rounded-lg"
                     >
-                        <ReactMarkdown renderers={{code: SyntaxHighlighter}}>
+                        <ReactMarkdown components={{code: SyntaxHighlighter}}>
                             {template}
                         </ReactMarkdown>
                     </div>

global.css

@@ -52,3 +52,19 @@ a.anchorjs-link:hover {
 #faq h2 > a.anchorjs-link {
     @apply text-blue-400;
 }
+
+/* For code examples in the rendered template, avoid padding because the div
+   that comes with react-syntax-highlighter has padding. */
+.markdown-body pre {
+    padding: 0px;
+}
+
+/* This is a hacky fix for an issue with syntax highlighting. See the comment in
+   SyntaxHighlighter.tsx. */
+.markdown-body pre > code {
+    display: block;
+    overflow-x: auto;
+    background: rgb(43, 43, 43);
+    color: rgb(248, 248, 242);
+    padding: 0.5em;
+}

netlify.toml

@@ -1,13 +1,13 @@
 [build]
-  command = "yarn run export"
-  publish = "build"
+command = "yarn run build"
+publish = "build"
 
 # Plausible
 [[redirects]]
-  from = "/lava-cake/js/script.js"
-  to = "https://plausible.io/js/script.js"
-  status = 200
+from = "/lava-cake/js/script.js"
+to = "https://plausible.io/js/script.js"
+status = 200
 [[redirects]]
-  from = "/lava-cake/api/event"
-  to = "https://plausible.io/api/event"
-  status = 200
+from = "/lava-cake/api/event"
+to = "https://plausible.io/api/event"
+status = 200

next.config.js

@@ -1,3 +1,12 @@
-module.exports = {
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
+    distDir: "build",
+    output: "export",
     productionBrowserSourceMaps: true
 };
+
+module.exports = nextConfig;

package.json

@@ -5,7 +5,6 @@
     "scripts": {
         "dev": "yarn install && next dev",
         "build": "next build",
-        "export": "next build && next export -o build",
         "format": "prettier --write .",
         "format:check": "prettier --check ."
     },
@@ -14,27 +13,27 @@
     "license": "MIT",
     "private": true,
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "6.2.0",
-        "@fortawesome/free-solid-svg-icons": "6.2.0",
+        "@fortawesome/fontawesome-svg-core": "6.5.1",
+        "@fortawesome/free-solid-svg-icons": "6.5.1",
         "@fortawesome/react-fontawesome": "0.2.0",
-        "github-markdown-css": "5.1.0",
+        "github-markdown-css": "5.5.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-github-corner": "2.5.0",
-        "react-markdown": "5.0.3",
+        "react-markdown": "9.0.1",
         "react-syntax-highlighter": "15.5.0",
-        "react-textarea-autosize": "8.4.1"
+        "react-textarea-autosize": "8.5.3"
     },
     "devDependencies": {
-        "@types/node": "18.11.9",
-        "@types/react": "18.0.25",
-        "@types/react-syntax-highlighter": "15.5.5",
-        "autoprefixer": "10.4.13",
-        "next": "13.5.1",
-        "postcss": "8.4.31",
-        "prettier": "2.7.1",
-        "tailwindcss": "3.2.2",
-        "typescript": "4.8.4"
+        "@types/node": "20.11.20",
+        "@types/react": "18.2.57",
+        "@types/react-syntax-highlighter": "15.5.11",
+        "autoprefixer": "10.4.17",
+        "next": "14.0.0",
+        "postcss": "8.4.35",
+        "prettier": "3.2.5",
+        "tailwindcss": "3.4.1",
+        "typescript": "5.3.3"
     },
     "prettier": {
         "bracketSpacing": false,