feat: seperate CSS bundle from html

lino-levan · Mar 13, 2023 · ef7e639 · ef7e639
1 parent 82d69de
commit ef7e639
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 25 deletions.
diff --git a/src/build.ts b/src/build.ts
@@ -3,6 +3,7 @@ import { join, resolve } from "std/path/mod.ts";
 import { render } from "./lib/render.ts";
 import { copySync } from "std/fs/copy.ts";
 import { getMagic } from "./lib/magic.ts";
+import { CSS } from "./lib/css.ts";
 
 export function build() {
   try {
@@ -15,6 +16,8 @@ export function build() {
 
   copySync("./static", "./build");
 
+  Deno.writeTextFileSync("./build/bundle.css", CSS);
+
   const config = JSON.parse(Deno.readTextFileSync("deno.jsonc")).pyro;
   const magic = getMagic();
 

diff --git a/src/dev.ts b/src/dev.ts
@@ -3,6 +3,7 @@ import { resolve } from "std/path/mod.ts";
 import { serveDir } from "std/http/file_server.ts";
 import { render } from "./lib/render.ts";
 import { getMagic } from "./lib/magic.ts";
+import { CSS } from "./lib/css.ts";
 
 export function dev() {
   const config = JSON.parse(Deno.readTextFileSync("deno.jsonc")).pyro;
@@ -11,6 +12,15 @@ export function dev() {
     const url = new URL(req.url);
     const pathname = url.pathname.slice(1);
 
+    // Handle the bundled css
+    if (pathname === "bundle.css") {
+      return new Response(CSS, {
+        headers: {
+          "Content-Type": "text/css",
+        },
+      });
+    }
+
     // We're supposed to serve a static file
     if (pathname.includes(".")) {
       try {

diff --git a/src/lib/css.ts b/src/lib/css.ts
@@ -0,0 +1,5 @@
+import { CSS as MK_CSS, KATEX_CSS } from "gfm";
+
+export const CSS = (MK_CSS + KATEX_CSS +
+  ".markdown-body ul{list-style:disc}.markdown-body ol{list-style: numeric}.markdown-body table{width: fit-content;}details > summary{list-style: none;}details > summary::marker,details > summary::-webkit-details-marker {display: none;}")
+  .replaceAll("\n", "");
diff --git a/src/lib/magic.ts b/src/lib/magic.ts
@@ -44,8 +44,6 @@ function getBackground() {
       }
     }
 
-    console.log("Brightest color is", brightest_color);
-
     return brightest_color;
   } catch {
     return "white";

diff --git a/src/lib/page.tsx b/src/lib/page.tsx
@@ -1,4 +1,4 @@
-import { CSS, KATEX_CSS, render } from "gfm";
+import { render } from "gfm";
 import type { RouteMap } from "./route_map.ts";
 import type { Config, Magic } from "./types.ts";
 
@@ -79,28 +79,7 @@ export function page(options: {
     <html lang="en">
       <head>
         <title>{options.page.title} | {options.config.title}</title>
-        <style
-          dangerouslySetInnerHTML={{
-            __html: CSS + KATEX_CSS + `.markdown-body ul {
-            list-style: disc
-          }
-          .markdown-body ol {
-            list-style: numeric
-          }
-          .markdown-body table {
-            width: fit-content;
-          }
-
-          details > summary {
-            list-style: none;
-          }
-          details > summary::marker,
-          details > summary::-webkit-details-marker {
-            display: none;
-          }
-          `,
-          }}
-        />
+        <link rel="stylesheet" href="/bundle.css" />
         <script src="https://cdn.twind.style" />
         <meta name="description" content={options.page.description} />
         <link rel="icon" type="image/png" href="/icon.png" />