Purge CSS on a per-template basis

4 files changed, 51 insertions, 10 deletions

diff --git a/bun.lockb b/bun.lockb
index bd34a0f..3fd980c 100755
--- a/bun.lockb
+++ b/bun.lockb
Binary files differdiff --git a/package.json b/package.json
index 56b517a..84bf38c 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "highlight.js": "^11.8.0",
     "marked": "^9.0.3",
     "marked-highlight": "^2.0.6",
+    "purgecss": "^6.0.0",
     "toml-matter": "^1.0.0"
   },
   "peerDependencies": {
diff --git a/src/templates.ts b/src/templates.ts
index b5043c0..4f8ab9f 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -2,16 +2,21 @@ import * as fs from "node:fs/promises";
 import * as cheerio from "cheerio";
 import { matter } from "toml-matter";
 import { Marked } from "marked";
+import { PurgeCSS } from "purgecss";
 import log from "loglevel";
 
 import config from "./config";
 import { getPost, readPosts, type Post } from "./posts";
 
+const css = await Bun.file("templates/style.css").text();
+
 const marked = new Marked();
 marked.use({
   gfm: true,
 });
 
+const purgeCSS = new PurgeCSS();
+
 function addMenu(
   parent: cheerio.Cheerio<cheerio.AnyNode>,
   child: cheerio.Cheerio<cheerio.AnyNode>,
@@ -23,24 +28,34 @@ function addMenu(
 }
 
 export async function layout(
-  $: cheerio.CheerioAPI,
+  html: string,
   pageTitle: string,
 ): Promise<cheerio.CheerioAPI> {
+  const ccss = (
+    await purgeCSS.purge({
+      content: [
+        {
+          raw: html,
+          extension: ".html",
+        },
+      ],
+      css: [{ raw: css }],
+    })
+  )[0].css;
+  const $ = cheerio.load(html);
   $("html").attr("lang", config.default_language);
   $("head > link[rel=alternate]").attr("title", config.title);
   addMenu($("nav"), $("nav a"));
   $(".title").text(config.title);
   $("title").text(pageTitle);
   $(".p-name").text(pageTitle);
-  $("head")
-    .children("style")
-    .text(await fs.readFile("templates/style.css", "utf-8"));
+  $("head").children("style").text(ccss);
   return $;
 }
 
 async function render404Page(): Promise<string> {
   const $ = await layout(
-    cheerio.load(await fs.readFile("templates/404.html", "utf-8")),
+    await fs.readFile("templates/404.html", "utf-8"),
     "404 Not Found",
   );
   return $.html();
@@ -49,7 +64,7 @@ async function render404Page(): Promise<string> {
 async function renderHomepage(posts: Array<Post>): Promise<string> {
   const file = matter(await fs.readFile("content/_index.md", "utf-8"));
   const $ = await layout(
-    cheerio.load(await fs.readFile("templates/homepage.html", "utf-8")),
+    await fs.readFile("templates/homepage.html", "utf-8"),
     config.title,
   );
 
@@ -84,7 +99,7 @@ async function renderHomepage(posts: Array<Post>): Promise<string> {
 
 async function renderPost(file: Post, content: string) {
   const $ = await layout(
-    cheerio.load(await fs.readFile("templates/post.html", "utf-8")),
+    await fs.readFile("templates/post.html", "utf-8"),
     file.title,
   );
 
@@ -112,7 +127,7 @@ async function renderPost(file: Post, content: string) {
 
 async function renderListPage(tag: string, posts: Post[]) {
   const $ = await layout(
-    cheerio.load(await fs.readFile("templates/list.html", "utf-8")),
+    await fs.readFile("templates/list.html", "utf-8"),
     tag || config.title,
   );
   const $feed = $(".h-feed");
@@ -139,7 +154,7 @@ async function renderListPage(tag: string, posts: Post[]) {
 
 async function renderTags(tags: string[]) {
   const $ = await layout(
-    cheerio.load(await fs.readFile("templates/tags.html", "utf-8")),
+    await fs.readFile("templates/tags.html", "utf-8"),
     config.title,
   );
   const $tags = $(".tags");
@@ -192,7 +207,7 @@ async function renderFeedStyles() {
       xml: true,
     },
   );
-  $("style").text(await fs.readFile("templates/style.css", "utf-8"));
+  $("style").text(css);
   return $.xml();
 }
 
diff --git a/templates/post.html b/templates/post.html
index d08ea86..1262ee0 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -33,6 +33,31 @@
           Enim lobortis scelerisque fermentum dui faucibus in ornare quam
           viverra. Eget egestas purus viverra accumsan in nisl nisi, scelerisque
           eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at.
+
+          <code>/bin/test</code>
+
+          <pre>
+            <code class="language-conf">
+foo=bar
+            </code>
+          </pre>
+
+          <table>
+            <thead>
+              <tr>
+                <th>One</th>
+                <th>Two</th>
+                <th>Three</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>1</td>
+                <td>2</td>
+                <td>3</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
         <ul class="p-categories tags">
           Tags: