Purge CSS on a per-template basis
1 file changed, 25 insertions(+), 10 deletions(-)
changed files
M src/templates.ts → src/templates.ts
@@ -2,15 +2,20 @@ 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>,@@ -23,24 +28,34 @@ } } 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 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 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 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 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 @@ { xml: true, }, ); - $("style").text(await fs.readFile("templates/style.css", "utf-8")); + $("style").text(css); return $.xml(); }