Upgrade dependencies

.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,25 @@ import {LightAsync} from "react-syntax-highlighter";
 import {a11yDark} from "react-syntax-highlighter/dist/cjs/styles/hljs";
 
 function SyntaxHighlighter(props) {
-    return (
+    const {children, className, node, ...rest} = props;
+    const match = /language-(\w+)/.exec(className || "");
+
+    if (!children) {
+        return null;
+    }
+
+    return match ? (
         <LightAsync
-            language={props.language}
+            {...rest}
+            PreTag="div"
+            children={String(children).replace(/\n$/, "")}
+            language={match[1]}
             style={a11yDark}
-            children={props.value || ""}
         />
+    ) : (
+        <code {...rest} className={className}>
+            {children}
+        </code>
     );
 }
 

components/Template.tsx

@@ -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,9 @@ 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-highliter handles it. */
+.markdown-body pre {
+    padding: 0px;
+}

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.1.0",
+        "postcss": "8.4.35",
+        "prettier": "3.2.5",
+        "tailwindcss": "3.4.1",
+        "typescript": "5.3.3"
     },
     "prettier": {
         "bracketSpacing": false,

pages/_app.tsx

@@ -1,4 +1,4 @@
-import "github-markdown-css/github-markdown.css";
+import "github-markdown-css/github-markdown-light.css";
 import "../global.css";
 
 import "@fortawesome/fontawesome-svg-core/styles.css";