cssFile & placeholder options to prism and code_highlight

lumeland · Dec 21, 2024 · f47ec6d · f47ec6d
1 parent 1292b02
commit f47ec6d
Show file tree

Hide file tree

Showing 7 changed files with 610 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,8 @@ Go to the `v1` branch to see the changelog of Lume 1.
 - New plugin: `purgecss` to remove unused CSS. [#693]
 - New middleware `router`.
 - `google_fonts`: Added `subset` option to filter character ranges. [#692]
+- `prism` plugin: Added `cssFile` and `placeholder` option to themes.
+- `code_highlight` plugin: Added `cssFile` and `placeholder` option to themes.
 
 ### Changed
 - Files with extension `.d.ts` are ignored by default [#707].
@@ -20,6 +22,10 @@ Go to the `v1` branch to see the changelog of Lume 1.
   - Firefox: 100 (from 97)
   - Samsung: 19 (from 16)
 
+### Deprecated
+- `theme.path` option of `prism` plugin.
+- `theme.path` option of `code_highlight` plugin.
+
 ### Fixed
 - Updated deps: `sass`, `preact`, `xml`, `katex`, `jsr`, `pagefind`, `highlight.js`, `tailwindcss`, `magic-string` and some icons.
 - `esbuild`: JSR using import maps [#706].

diff --git a/plugins/code_highlight.ts b/plugins/code_highlight.ts
@@ -5,6 +5,8 @@ import hljs, {
 } from "../deps/highlight.ts";
 import { merge } from "../core/utils/object.ts";
 import { log } from "../core/utils/log.ts";
+import { readFile } from "../core/utils/read.ts";
+import { insertContent } from "../core/utils/page_content.ts";
 
 import type Site from "../core/site.ts";
 import type { Page } from "../core/file.ts";
@@ -33,8 +35,17 @@ interface Theme {
   /** The name of the theme */
   name: string;
 
-  /** The path to the theme file */
-  path: string;
+  /**
+   * The path to the theme file
+   * @deprecated Use cssFile instead
+   */
+  path?: string;
+
+  /** The CSS file to output the font-face rules */
+  cssFile?: string;
+
+  /** A placeholder to replace with the generated CSS (only for cssFile) */
+  placeholder?: string;
 }
 
 // Default options
@@ -72,11 +83,21 @@ export function codeHighlight(userOptions?: Options) {
         ? options.theme
         : [options.theme];
 
-      for (const { name, path } of themes) {
-        site.remoteFile(
-          path,
-          `${themesPath}${name}.min.css`,
-        );
+      for (const { name, path, cssFile, placeholder } of themes) {
+        if (cssFile) {
+          site.addEventListener("afterRender", async () => {
+            const cssCode = await readFile(`${themesPath}${name}.min.css`);
+            const page = await site.getOrCreatePage(cssFile);
+            insertContent(page, cssCode, placeholder);
+          });
+          return;
+        }
+
+        if (path) {
+          site.remoteFile(path, `${themesPath}${name}.min.css`);
+        } else {
+          throw new Error(`The theme ${name} must have a path or cssFile`);
+        }
       }
     }
 

diff --git a/plugins/prism.ts b/plugins/prism.ts
@@ -1,5 +1,7 @@
 import Prism, { themesPath } from "../deps/prism.ts";
 import { merge } from "../core/utils/object.ts";
+import { readFile } from "../core/utils/read.ts";
+import { insertContent } from "../core/utils/page_content.ts";
 
 import type Site from "../core/site.ts";
 import type { Page } from "../core/file.ts";
@@ -22,8 +24,17 @@ interface Theme {
   /** The name of the theme */
   name: string;
 
-  /** The path to the theme file */
-  path: string;
+  /**
+   * The path to the theme file
+   * @deprecated Use cssFile instead
+   */
+  path?: string;
+
+  /** The CSS file to output the font-face rules */
+  cssFile?: string;
+
+  /** A placeholder to replace with the generated CSS (only for cssFile) */
+  placeholder?: string;
 }
 
 // Default options
@@ -47,11 +58,21 @@ export function prism(userOptions?: Options) {
         ? options.theme
         : [options.theme];
 
-      for (const { name, path } of themes) {
-        site.remoteFile(
-          path,
-          `${themesPath}prism-${name}.min.css`,
-        );
+      for (const { name, path, cssFile, placeholder } of themes) {
+        if (cssFile) {
+          site.addEventListener("afterRender", async () => {
+            const cssCode = await readFile(getCssUrl(name));
+            const page = await site.getOrCreatePage(cssFile);
+            insertContent(page, cssCode, placeholder);
+          });
+          return;
+        }
+
+        if (path) {
+          site.remoteFile(path, getCssUrl(name));
+        } else {
+          throw new Error(`The theme ${name} must have a path or cssFile`);
+        }
       }
     }
 
@@ -63,3 +84,11 @@ export function prism(userOptions?: Options) {
 }
 
 export default prism;
+
+function getCssUrl(name: string) {
+  if (name === "default") {
+    return `${themesPath}prism.min.css`;
+  }
+
+  return `${themesPath}prism-${name}.min.css`;
+}