Update Lume

_components/SidebarNav.tsx → _components/SidebarNav/comp.tsx

@@ -1,5 +1,5 @@
 // deno-lint-ignore-file no-explicit-any
-import ReferenceSidebarNav from "../reference/_components/ReferenceSidebarNav.tsx";
+import ReferenceSidebarNav from "../../reference/_components/ReferenceSidebarNav.tsx";
 
 export default function (data: Lume.Data) {
   const sectionData = data.sectionData;
@@ -129,5 +129,3 @@ function SidebarCategoryHeading(props: {
     </h2>
   );
 }
-
-export const js = `import "/js/sidebar.client.js";`;

_components/ThemeToggle.tsx → _components/ThemeToggle/comp.tsx

@@ -20,8 +20,3 @@ export default function () {
     </button>
   );
 }
-
-export const js = `
-import "/js/darkmode.client.js";
-import "/js/darkmode-toggle.client.js";
-`;

_components/ThemeToggle/script.js

@@ -0,0 +1,2 @@
+import "./darkmode.js";
+import "./darkmode-toggle.js";

_components/VideoPlayer.tsx → _components/VideoPlayer/comp.tsx

@@ -32,7 +32,3 @@ function urlMatcher(url: string): string | undefined {
   const match = url.match(urlPattern);
   return match?.[3];
 }
-
-export const js = `
-  import "/js/youtube-lite.client.js";
-`;

_config.ts

@@ -2,16 +2,13 @@ import "@std/dotenv/load";
 
 import lume from "lume/mod.ts";
 import esbuild from "lume/plugins/esbuild.ts";
-import jsx from "lume/plugins/jsx_preact.ts";
+import jsx from "lume/plugins/jsx.ts";
 import mdx from "lume/plugins/mdx.ts";
 import ogImages from "lume/plugins/og_images.ts";
-import postcss from "lume/plugins/postcss.ts";
 import redirects from "lume/plugins/redirects.ts";
 import search from "lume/plugins/search.ts";
 import sitemap from "lume/plugins/sitemap.ts";
-import postcssNesting from "npm:@tailwindcss/nesting";
-
-import tailwind from "@tailwindcss/postcss";
+import tailwind from "lume/plugins/tailwindcss.ts";
 
 import Prism from "./prism.ts";
 
@@ -159,23 +156,25 @@ site.use(search());
 site.use(jsx());
 site.use(mdx());
 
-site.use(
-  postcss({
-    includes: false,
-    plugins: [postcssNesting, tailwind()],
-  }),
-);
-
+site.add("js");
 site.use(
   esbuild({
-    extensions: [".client.ts", ".client.js"],
+    extensions: [".ts"],
     options: {
       minify: false,
       splitting: true,
+      alias: {
+        "node:crypto": "./_node-crypto.js",
+      },
     },
   }),
 );
 
+site.add("style.css");
+site.use(tailwind({
+  minify: true,
+}));
+
 site.use(toc({ anchor: false }));
 site.use(title());
 site.use(sitemap());
@@ -209,7 +208,7 @@ site.addEventListener("afterBuild", async () => {
       Deno.writeTextFileSync(site.dest("llms-full.txt"), llmsFullTxt);
       log.info("Generated llms-full.txt in site root");
     } catch (error) {
-      log.error("Error generating LLMs files:", error);
+      log.error("Error generating LLMs files:" + error);
     }
   }
 });
@@ -297,7 +296,7 @@ if (Deno.env.get("BUILD_TYPE") == "FULL") {
   site.data("openGraphLayout", "/open_graph/default.jsx");
   site.use(
     ogImages({
-      satori: {
+      options: {
         width: 1200,
         height: 630,
         fonts: [
@@ -326,13 +325,11 @@ if (Deno.env.get("BUILD_TYPE") == "FULL") {
           },
         ],
       },
-      cache: false,
     }),
   );
 }
 
 site.scopedUpdates(
-  (path) => path == "/overrides.css",
   (path) => /\.(js|ts)$/.test(path),
   (path) => path.startsWith("/api/deno/"),
 );

_includes/doc.tsx

@@ -36,25 +36,19 @@ export default function Doc(data: Lume.Data, helpers: Lume.Helpers) {
   function getTocCtx(
     d: Lume.Data,
   ): { document_navigation: unknown; document_navigation_str: string } | null {
-    const ch: unknown = (d as unknown as { children?: unknown })?.children;
-    if (ch && typeof ch === "object" && "props" in ch) {
-      const props: unknown = (ch as { props?: unknown }).props;
-      if (props && typeof props === "object" && "data" in props) {
-        const pdata: unknown = (props as { data?: unknown }).data;
-        if (pdata && typeof pdata === "object" && "toc_ctx" in pdata) {
-          const toc: unknown = (pdata as { toc_ctx?: unknown }).toc_ctx;
-          if (
-            toc && typeof toc === "object" &&
-            "document_navigation" in toc &&
-            "document_navigation_str" in toc
-          ) {
-            const t = toc as {
-              document_navigation: unknown;
-              document_navigation_str: string;
-            };
-            return t;
-          }
-        }
+    const pdata = d.data;
+    if (pdata && typeof pdata === "object" && "toc_ctx" in pdata) {
+      const toc: unknown = (pdata as { toc_ctx?: unknown }).toc_ctx;
+      if (
+        toc && typeof toc === "object" &&
+        "document_navigation" in toc &&
+        "document_navigation_str" in toc
+      ) {
+        const t = toc as {
+          document_navigation: unknown;
+          document_navigation_str: string;
+        };
+        return t;
       }
     }
     return null;

_includes/layout.tsx

@@ -31,7 +31,7 @@ export default function Layout(data: Lume.Data) {
 
         <link
           rel="stylesheet"
-          href={`/styles.css${fingerprint ? `?v=${fingerprint}` : ""}`}
+          href={`/style.css${fingerprint ? `?v=${fingerprint}` : ""}`}
         />
 
         <link
@@ -59,13 +59,13 @@ export default function Layout(data: Lume.Data) {
           name="keywords"
           content="Deno, JavaScript, TypeScript, reference, documentation, guide, tutorial, example"
         />
-        <script type="module" defer src="/components.js"></script>
-        <script type="module" defer src="/main.client.js"></script>
-        <script type="module" defer src="/lint_rules.client.js"></script>
-        <script type="module" defer src="/copy.client.js"></script>
-        <script type="module" defer src="/tabs.client.js"></script>
-        <script type="module" defer src="/feedback.client.js"></script>
-        <script type="module" defer src="/search.client.js"></script>
+        <script type="module" defer src="/script.js"></script>
+        <script type="module" defer src="/js/main.js"></script>
+        <script type="module" defer src="/js/lint_rules.js"></script>
+        <script type="module" defer src="/js/copy.js"></script>
+        <script type="module" defer src="/js/tabs.js"></script>
+        <script type="module" defer src="/js/feedback.js"></script>
+        <script type="module" defer src="/js/search.js"></script>
         <script
           async
           src="https://www.googletagmanager.com/gtm.js?id=GTM-5B5TH8ZJ"

_includes/lintRule.tsx

@@ -97,7 +97,7 @@ export default function LintRule(props: Lume.Data, _helpers: Lume.Helpers) {
 
   return (
     <>
-      <LintRuleTags tags={tags} ruleName={props.title} />
+      <LintRuleTags tags={tags} ruleName={props.title!} />
       {props.children}
     </>
   );

_includes/open_graph/cli-commands.jsx

@@ -1,5 +1,3 @@
-/** @jsxImportSource npm:[email protected] */
-
 export default function ({ title, description, openGraphTitle }) {
   if (!openGraphTitle) {
     title = "deno help";

_includes/open_graph/default.jsx

@@ -1,5 +1,3 @@
-/** @jsxImportSource npm:[email protected] */
-
 export default function ({ title, description, openGraphColor }) {
   // Process text to replace superscript EA with "Early Access"
   const processEarlyAccessText = (text) => {

_includes/open_graph/examples.jsx

@@ -1,5 +1,3 @@
-/** @jsxImportSource npm:[email protected] */
-
 export default function ({ title, description }) {
   // Process text to replace superscript EA with "Early Access"
   const processEarlyAccessText = (text) => {

_node-crypto.js

@@ -0,0 +1 @@
+export const crypto = globalThis.crypto;

deno.json

@@ -8,23 +8,21 @@
     "@std/media-types": "jsr:@std/media-types@^1.0.3",
     "@std/path": "jsr:@std/path@^1.0.8",
     "@deno/doc": "jsr:@deno/[email protected]",
-    "@tailwindcss/cli": "npm:@tailwindcss/cli@^4.1.11",
-    "@tailwindcss/postcss": "npm:@tailwindcss/postcss@^4.1.11",
     "ga4": "https://raw.githubusercontent.com/denoland/ga4/04a1ce209116f158b5ef1658b957bdb109db68ed/mod.ts",
-    "lume/": "https://deno.land/x/[email protected]/",
+    "lume/": "https://deno.land/x/[email protected]/",
+    "lume/jsx-runtime": "https://deno.land/x/[email protected]/jsx-runtime.ts",
     "googleapis": "npm:googleapis@^144.0.0",
-    "postcss": "npm:postcss@^8.5.6",
     "prismjs": "npm:[email protected]",
-    "tailwindcss": "npm:tailwindcss@^4.1.11",
     "@orama/core": "jsr:@orama/core@^1.2.4"
   },
   "tasks": {
-    "dev": "LUME_LOGS=WARN deno run --env-file -A lume.ts -s",
+    "lume": "deno run --env-file -A lume/cli.ts",
+    "dev": "LUME_LOGS=WARN deno task lume -s",
     "serve": "deno task dev",
     "serve:style": "BUILD_TYPE=FULL deno task lume -s --config=_config-styleguide.ts",
     "start": "deno task dev",
-    "build": "deno task generate:reference && BUILD_TYPE=FULL deno run --env-file -A lume.ts && tailwindcss -i styles.css -o _site/styles.css --minify",
-    "build:light": "deno run --env-file -A lume.ts",
+    "build": "deno task generate:reference && BUILD_TYPE=FULL deno task lume",
+    "build:light": "deno task lume",
     "prod": "deno run --allow-read --allow-env --allow-net server.ts",
     "test": "deno test -A",
     "check:links": "deno run --no-lock --allow-net --allow-env .github/workflows/better_link_checker.ts",
@@ -44,8 +42,8 @@
     "types": [
       "lume/types.ts"
     ],
-    "jsx": "react-jsx",
-    "jsxImportSource": "npm:preact"
+    "jsx": "precompile",
+    "jsxImportSource": "lume"
   },
   "test": {
     "exclude": [
@@ -57,5 +55,19 @@
     "reference_gen",
     "orama"
   ],
+  "unstable": [
+    "temporal",
+    "fmt-component"
+  ],
+  "lint": {
+    "plugins": [
+      "https://deno.land/x/[email protected]/lint.ts"
+    ],
+    "rules": {
+      "exclude": [
+        "no-import-prefix"
+      ]
+    }
+  },
   "nodeModulesDir": "auto"
 }