updated code themes

.gitignore

@@ -38,4 +38,5 @@ next-env.d.ts
 /docs/policies/
 src/components/bundles.json
 /policies.*.json
-/bundles.json
+/bundles.json
+src/shiki

docs/articles/step-1-setup-basic-gateway.md

@@ -39,15 +39,14 @@ You can quickly test this route by clicking the **Test** button next to the
 
 You should receive a 401 Unauthorized that says something similar to
 
-```
+```json
 {
   "status": 401,
   "title": "Unauthorized",
   "detail": "No key or invalid key provided",
   "type": "https://httpproblems.com/http-status/401",
   "instance": "/todos",
   "hint": "This is a demo API that requires authentication. You must add a header 'api-key' with a value '4f0aeaf7-d17f-4b2b-9b71-5177bd194759'"
-  ...
 }
 ```
 
@@ -91,7 +90,7 @@ Go back to your route in the Route Designer and click the **Test** button next
 to the **Path** field. Open the URL in the browser and you should see a list of
 todoitems.
 
-```
+```json
 [
   {
     "userId": 1,

docs/articles/step-2-add-api-key-auth.md

@@ -34,11 +34,12 @@ request pipeline, drag it to the top if you have multiple policies.
 
 If you test your route, you should get a 401 Unauthorized response
 
-```
+```json
 {
   "status": 401,
   "title": "Unauthorized",
-  "type": "https://httpproblems.com/http-status/401",
+  "type": "https://httpproblems.com/http-status/401"
+}
 ```
 
 ## 2/ Set up an API key consumer

docs/articles/step-3-add-rate-limiting.md

@@ -31,7 +31,7 @@ Assuming you followed [step 2](./step-2-add-api-key-auth.md) and setup API Key
 Authentication, set the policy to `rateLimitBy` `user` and allow 1 request every
 1 minute.
 
-```
+```json
 {
   "export": "RateLimitInboundPolicy",
   "module": "$import(@zuplo/runtime)",

next.config.js

@@ -2,11 +2,6 @@
 module.exports = {
   swcMinify: true,
   reactStrictMode: true,
-  experimental: {
-    outputFileTracingIncludes: {
-      "/docs/**": ["node_modules/shiki/**/*"],
-    },
-  },
   images: {
     deviceSizes: [576, 640, 760, 828, 992, 1180, 1440],
     imageSizes: [96, 128, 256, 384],

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "postinstall": "node ./scripts/update-bundles.mjs",
+    "postinstall": "node ./scripts/update-bundles.mjs && node ./scripts/copy-shiki.mjs",
     "start": "next start",
     "lint": "next lint",
     "format": "prettier --write ."

scripts/copy-shiki.mjs

@@ -0,0 +1,13 @@
+import { cp } from "fs/promises";
+import path from "path";
+
+await cp(
+  path.join(process.cwd(), "node_modules", "shiki", "languages"),
+  path.join(process.cwd(), "src", "shiki", "languages"),
+  { recursive: true },
+);
+await cp(
+  path.join(process.cwd(), "node_modules", "shiki", "themes"),
+  path.join(process.cwd(), "src", "shiki", "themes"),
+  { recursive: true },
+);

src/lib/markdown/mdx.ts

@@ -1,10 +1,12 @@
 import components from "@/components/mdx";
 import { Section } from "@/lib/interfaces";
 import remarkTransformLink from "@/lib/markdown/md-link";
+import fs from "fs/promises";
 import { Element } from "hast";
 import { h } from "hastscript";
 import { SerializeOptions } from "next-mdx-remote/dist/types";
 import { compileMDX } from "next-mdx-remote/rsc";
+import path from "path";
 import rehypeAutolinkHeadings, {
   Options as RehypeAutolinkHeadingsOptions,
 } from "rehype-autolink-headings";
@@ -15,9 +17,73 @@ import rehypeRewrite, { RehypeRewriteOptions } from "rehype-rewrite";
 import rehypeSlug from "rehype-slug";
 import remarkDirective from "remark-directive";
 import remarkGfm from "remark-gfm";
+import shiki from "shiki";
 import { VFileCompatible } from "vfile";
 import remarkCallout from "./callout";
 
+// Shiki loads languages and themes using "fs" instead of "import", so Next.js
+// doesn't bundle them into production build. To work around, we manually copy
+// them over to our source code (lib/shiki/*) and update the "paths".
+//
+// Note that they are only referenced on server side
+// See: https://github.com/shikijs/shiki/issues/138
+const getShikiPath = (): string => {
+  return path.join(process.cwd(), "src/shiki");
+};
+
+const touched = { current: false };
+
+// "Touch" the shiki assets so that Vercel will include them in the production
+// bundle. This is required because shiki itself dynamically access these files,
+// so Vercel doesn't know about them by default
+const touchShikiPath = (): void => {
+  if (touched.current) return; // only need to do once
+  fs.readdir(getShikiPath()); // fire and forget
+  touched.current = true;
+};
+
+const getHighlighter: PrettyCodeOptions["getHighlighter"] = async (options) => {
+  touchShikiPath();
+
+  const highlighter = await shiki.getHighlighter({
+    // This is technically not compatible with shiki's interface but
+    // necessary for rehype-pretty-code to work
+    // - https://rehype-pretty-code.netlify.app/ (see Custom Highlighter)
+    ...(options as any),
+    paths: {
+      languages: `${getShikiPath()}/languages/`,
+      themes: `${getShikiPath()}/themes/`,
+    },
+  });
+
+  return highlighter;
+};
+
+const getRehypeCodeOptions = (): Partial<PrettyCodeOptions> => ({
+  // Requirements for theme:
+  // - Has light and dark version
+  // - Uses italic in several places
+  theme: { light: "github-dark" },
+  // Need to use a custom highlighter because rehype-pretty-code doesn't
+  // let us customize "paths".
+  getHighlighter,
+
+  onVisitTitle(element) {
+    const hast = h(
+      "div",
+      {
+        class: "p-1 text-slate-800 dark:text-syntax-gray text-sm font-mono  ",
+      },
+      element.children as any,
+    );
+
+    element.properties = {
+      class: `not-prose mb-[-2.4em] pb-[1em] `,
+    };
+    element.children = [hast as any];
+  },
+});
+
 function getOptions(headings: Element[]): SerializeOptions {
   return {
     parseFrontmatter: false,
@@ -29,27 +95,7 @@ function getOptions(headings: Element[]): SerializeOptions {
         remarkCallout,
       ],
       rehypePlugins: [
-        [
-          rehypePrettyCode,
-          {
-            theme: "github-dark",
-            onVisitTitle(element) {
-              const hast = h(
-                "div",
-                {
-                  class:
-                    "p-1 text-syntax-gray text-sm font-mono pl-6 border-b border-syntax-dark",
-                },
-                element.children as any,
-              );
-
-              element.properties = {
-                class: `not-prose mb-[-2em] pb-[0.2em] bg-syntax rounded-t-md `,
-              };
-              element.children = [hast as any];
-            },
-          } as PrettyCodeOptions,
-        ],
+        [rehypePrettyCode, getRehypeCodeOptions()],
         rehypeSlug,
         [
           rehypeAutolinkHeadings,

tailwind.config.ts

@@ -80,6 +80,7 @@ export default {
           gray: "rgb(225, 228, 232)",
           dark: "rgb(106, 115, 125)",
           blue: "rgb(121, 184, 255)",
+          border: "rgb(229, 231, 235)",
         },
       },
       lineHeight: {