replaced imagick with transform_images, renamed Lume.PageData to Lume…

….Data, etc

CHANGELOG.md

@@ -7,7 +7,8 @@ Go to the `v1` branch to see the changelog of Lume 1.
 
 ## 2.0.0 - Unreleased
 ### Added
-- New plugin UnoCSS, to replace WindiCSS.
+- New plugin `unocss`, to replace WindiCSS.
+- New plugin `transform_images`, to replace Imagick.
 - New option `server.root` to `Site`.
 - New `basename` variable to change the final name of files/directories
 - New function `site.getOrCreatePage()`.
@@ -54,6 +55,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 - Replace `fn-date` with `Temporal` polyfill to convert dates.
 - Refactor of `Server` class to work with `Deno.serve()` API [#501].
 - Renamed `core/filesystem.ts` to `core/file.ts`.
+- Picture plugin: Renamed the attribute `imagick` to `transform-images`.
 - TOML plugin:
   - is installed by default
   - Changed `extensions` option type to `string[]`.
@@ -109,6 +111,8 @@ Go to the `v1` branch to see the changelog of Lume 1.
   - New option `item.updated`;
 
 ### Removed
+- Removed plugin `windi_css`. Use `unocss` instead.
+- Removed plugin `imagick`. Use `transform_images` instead.
 - Removed output extension detection in the filename: [#430]
 - Removed `processAll` and `preprocessAll`.
 - Removed `Page.dest` property [#290].

core/cache.ts

@@ -8,7 +8,7 @@ export interface Options {
 }
 
 /**
- * Class to cache the content transformations (like imagick manipulations)
+ * Class to cache the content transformations (like transform_images manipulations)
  */
 export default class Cache {
   #folder: string;

core/file.ts

@@ -196,6 +196,9 @@ export interface RawData {
 
 /** The data of a page/folder once loaded and processed */
 export interface Data extends RawData {
+  /** The title of the page */
+  title?: string;
+
   /** The language of the page */
   lang?: string;
 

core/utils/lume_config.ts

@@ -4,12 +4,12 @@ export const pluginNames = [
   "base_path",
   "code_highlight",
   "date",
+  "decap_cms",
   "esbuild",
   "eta",
   "favicon",
   "feed",
   "filter_pages",
-  "imagick",
   "inline",
   "jsx",
   "jsx_preact",
@@ -23,7 +23,6 @@ export const pluginNames = [
   "multilanguage",
   "nav",
   "nunjucks",
-  "decap_cms",
   "on_demand",
   "pagefind",
   "picture",
@@ -43,6 +42,7 @@ export const pluginNames = [
   "svgo",
   "tailwindcss",
   "terser",
+  "transform_images",
   "toml",
   "unocss",
 ];

deps/sharp.ts

@@ -0,0 +1,12 @@
+export { default } from "npm:[email protected]";
+
+import sharp from "npm:[email protected]";
+import icoEndec from "npm:[email protected]";
+
+export async function sharpsToIco(...images: sharp.Sharp[]) {
+  const buffers = await Promise.all(
+    images.map((image) => image.toFormat("png").toBuffer()),
+  );
+
+  return icoEndec.encode(buffers.map((buffer) => buffer.buffer));
+}

init.ts

@@ -206,8 +206,8 @@ function initPlugins(plugins: string[], denoConfig: DenoConfigResult) {
   // Ensure that tailwindcss is loaded before postcss
   fixPluginOrder(plugins, "tailwindcss", "postcss");
 
-  // Ensure that picture is loaded before imagick
-  fixPluginOrder(plugins, "picture", "imagick");
+  // Ensure that picture is loaded before transform_images
+  fixPluginOrder(plugins, "picture", "transform_images");
 }
 
 function fixPluginOrder(plugins: string[], plugin1: string, plugin2: string) {

plugins/attributes.ts

@@ -128,10 +128,10 @@ function isValid(name: string, validNames: string[]) {
   return name && (!validNames.length || validNames.includes(name));
 }
 
-/** Extends PageHelpers interface */
+/** Extends Helpers interface */
 declare global {
   namespace Lume {
-    export interface PageHelpers {
+    export interface Helpers {
       /** @see https://lume.land/plugins/attributes/ */
       attr: (values: unknown, ...validNames: string[]) => string;
 

plugins/date.ts

@@ -61,10 +61,10 @@ export default function (userOptions?: Options) {
   };
 }
 
-/** Extends PageHelpers interface */
+/** Extends Helpers interface */
 declare global {
   namespace Lume {
-    export interface PageHelpers {
+    export interface Helpers {
       /** @see https://lume.land/plugins/date/ */
       date: (
         date: string | Date,

plugins/decap_cms.ts

@@ -126,10 +126,10 @@ export default function (userOptions?: Options) {
   };
 }
 
-/** Extends PageData interface */
+/** Extends Data interface */
 declare global {
   namespace Lume {
-    export interface PageData {
+    export interface Data {
       /**
        * Decap CMS configuration
        * @see https://lume.land/plugins/decap_cms/

plugins/favicon.ts

@@ -1,13 +1,11 @@
 import { merge } from "../core/utils/object.ts";
 import binLoader from "../core/loaders/binary.ts";
 import textLoader from "../core/loaders/text.ts";
-import { ImageMagick, MagickFormat, MagickGeometry } from "../deps/imagick.ts";
 import { Page } from "../core/file.ts";
 import Cache from "../core/cache.ts";
-import { svg2png } from "../deps/svg2png.ts";
+import sharp, { sharpsToIco } from "../deps/sharp.ts";
 
 import type Site from "../core/site.ts";
-import type { IMagickImage } from "../deps/imagick.ts";
 
 export interface Options {
   /**
@@ -35,13 +33,13 @@ export const defaults: Options = {
       url: "/favicon.ico",
       size: 32,
       rel: "icon",
-      format: MagickFormat.Ico,
+      format: "ico",
     },
     {
       url: "/apple-touch-icon.png",
       size: 180,
       rel: "apple-touch-icon",
-      format: MagickFormat.Png,
+      format: "png",
     },
   ],
 };
@@ -69,37 +67,30 @@ export default function (userOptions?: Options) {
     }
 
     async function getContent(): Promise<Uint8Array> {
-      const path = options.input;
+      const content = await site.getContent(options.input, binLoader);
 
-      // Convert the SVG to PNG
-      if (path.endsWith(".svg")) {
-        const content = await site.getContent(path, textLoader) as
-          | string
-          | undefined;
-
-        if (!content) {
-          throw new Error(`Favicon: ${path} not found`);
-        }
-
-        return await svg2png(content, { width: 180, height: 180 });
+      if (!content) {
+        throw new Error(`File not found: ${options.input}`);
       }
 
-      return await site.getContent(path, binLoader) as Uint8Array;
+      return typeof content === "string"
+        ? new TextEncoder().encode(content)
+        : content;
     }
 
     site.addEventListener("afterRender", async (event) => {
       const content = await getContent();
 
-      if (!(content instanceof Uint8Array)) {
-        throw new Error(`Favicon: ${options.input} not found`);
-      }
-
       for (const favicon of options.favicons) {
-        const format = favicon.format.toUpperCase() as MagickFormat;
         event.pages?.push(
           Page.create({
             url: favicon.url,
-            content: await buildIco(content, format, favicon.size, cache),
+            content: await buildIco(
+              content,
+              favicon.format as keyof sharp.FormatEnum,
+              favicon.size,
+              cache,
+            ),
           }),
         );
       }
@@ -157,7 +148,7 @@ function addIcon(document: Document, attributes: Record<string, string>) {
 
 async function buildIco(
   content: Uint8Array,
-  format: MagickFormat,
+  format: keyof sharp.FormatEnum | "ico",
   size: number,
   cache?: Cache,
 ): Promise<Uint8Array> {
@@ -169,17 +160,25 @@ async function buildIco(
     }
   }
 
-  return new Promise((resolve) => {
-    ImageMagick.read(content, (image: IMagickImage) => {
-      const geometry = new MagickGeometry(size, size);
-      image.resize(geometry);
+  let image: Uint8Array;
+
+  if (format === "ico") {
+    const resizeOptions = { background: { r: 0, g: 0, b: 0, alpha: 0 } };
+    const img = sharp(content);
+    image = await sharpsToIco(
+      img.clone().resize(16, 16, resizeOptions),
+      img.clone().resize(32, 32, resizeOptions),
+    );
+  } else {
+    image = await sharp(content)
+      .resize(size, size)
+      .toFormat(format)
+      .toBuffer();
+  }
 
-      image.write(format, (output: Uint8Array) => {
-        if (cache) {
-          cache.set(content, { format, size }, output);
-        }
-        resolve(new Uint8Array(output));
-      });
-    });
-  });
+  if (cache) {
+    cache.set(content, { format, size }, image);
+  }
+
+  return image;
 }

plugins/jsx.ts

@@ -119,10 +119,10 @@ export default function (userOptions?: Options) {
   };
 }
 
-/** Extends PageData interface */
+/** Extends Data interface */
 declare global {
   namespace Lume {
-    export interface PageData {
+    export interface Data {
       /**
        * The JSX children elements
        * @see https://lume.land/plugins/jsx/

plugins/liquid.ts

@@ -241,10 +241,10 @@ function createCustomTagWithBody(fn: Helper): TagClass {
   };
 }
 
-/** Extends PageHelpers interface */
+/** Extends Helpers interface */
 declare global {
   namespace Lume {
-    export interface PageHelpers {
+    export interface Helpers {
       /** @see https://lume.land/plugins/liquid/ */
       liquid: (
         string: string,

plugins/markdown.ts

@@ -136,10 +136,10 @@ export default function (userOptions?: Options) {
   };
 }
 
-/** Extends PageHelpers interface */
+/** Extends Helpers interface */
 declare global {
   namespace Lume {
-    export interface PageHelpers {
+    export interface Helpers {
       /** @see https://lume.land/plugins/markdown/ */
       md: (string: string, inline?: boolean) => string;
     }

plugins/metas.ts

@@ -166,10 +166,10 @@ function addMeta(
   document.head.appendChild(document.createTextNode("\n"));
 }
 
-/** Extends PageData interface */
+/** Extends Data interface */
 declare global {
   namespace Lume {
-    export interface PageData {
+    export interface Data {
       /**
        * Meta elements
        * @see https://lume.land/plugins/metas/

plugins/nunjucks.ts

@@ -350,10 +350,10 @@ function createCustomTag(name: string, fn: Helper, options: HelperOptions) {
   return tagExtension;
 }
 
-/** Extends PageHelpers interface */
+/** Extends Helpers interface */
 declare global {
   namespace Lume {
-    export interface PageHelpers {
+    export interface Helpers {
       /** @see https://lume.land/plugins/nunjucks/ */
       njk: (string: string, data?: Record<string, unknown>) => Promise<string>;
     }

plugins/paginate.ts

@@ -126,10 +126,10 @@ export function createPaginator(defaults: PaginateOptions): Paginator {
   };
 }
 
-/** Extends PageData interface */
+/** Extends Data interface */
 declare global {
   namespace Lume {
-    export interface PageData {
+    export interface Data {
       /**
        * The paginator helper
        * @see https://lume.land/plugins/paginate/