Purge CSS on a per-template basis

1 files changed, 25 insertions, 10 deletions

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();
 }