diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index f4715d8..de8312a 100644
--- a/.github/workflows/ci.yaml
+++ b/.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:
diff --git a/.nvmrc b/.nvmrc
index 6d80269..2dbbe00 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.16.0
+20.11.1
diff --git a/.tool-versions b/.tool-versions
index 8ead549..d7568ad 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -1 +1 @@
-nodejs 18.16.0
+nodejs 20.11.1
diff --git a/components/SyntaxHighlighter.tsx b/components/SyntaxHighlighter.tsx
index fe86a24..8bfd3e9 100644
--- a/components/SyntaxHighlighter.tsx
+++ b/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 ? (
+ ) : (
+