flat metas object

CHANGELOG.md

@@ -14,7 +14,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 - New `afterLoad` event, triggered just after all files are (re)loaded.
 - Show the error if a file cannot be copied.
 - New option `theme` to download the theme CSS file automatically for the `prism` and `code_highlight` plugins.
-- Metas plugin: add `other` option to add custom metas [#604].
+- Metas plugin: allow to add custom metas [#604].
 
 ### Changed
 - BREAKING: Removed `lume/cms.ts` module. Use import maps instead.

plugins/metas.ts

@@ -51,7 +51,8 @@ export interface MetaData {
   generator?: string | boolean | ((data: Data) => string | boolean | undefined);
 
   /** Other meta tags */
-  other?: Record<string, string | ((data: Data) => string | undefined)>;
+  // deno-lint-ignore no-explicit-any
+  [name: string]: any;
 }
 
 const defaults: Options = {
@@ -78,26 +79,26 @@ export default function (userOptions?: Options) {
       }
 
       const { document, data } = page;
-      const metaIcon = getDataValue(data, metas["icon"]);
-      const metaImage = getDataValue(data, metas["image"]);
+      const [main, other] = getMetas(metas);
+      const metaIcon = getDataValue(data, main["icon"]);
+      const metaImage = getDataValue(data, main["image"]);
 
       const url = site.url(page.data.url, true);
       const icon = metaIcon ? new URL(site.url(metaIcon), url).href : undefined;
       const image = metaImage
         ? new URL(site.url(metaImage), url).href
         : undefined;
 
-      const type = getDataValue(data, metas["type"]);
-      const site_name = getDataValue(data, metas["site"]);
-      const lang = getDataValue(data, metas["lang"]);
-      const title = getDataValue(data, metas["title"]);
-      const description = getDataValue(data, metas["description"]);
-      const twitter = getDataValue(data, metas["twitter"]);
-      const keywords = getDataValue(data, metas["keywords"]);
-      const robots = getDataValue(data, metas["robots"]);
-      const color = getDataValue(data, metas["color"]);
-      const generator = getDataValue(data, metas["generator"]);
-      const other = metas.other;
+      const type = getDataValue(data, main["type"]);
+      const site_name = getDataValue(data, main["site"]);
+      const lang = getDataValue(data, main["lang"]);
+      const title = getDataValue(data, main["title"]);
+      const description = getDataValue(data, main["description"]);
+      const twitter = getDataValue(data, main["twitter"]);
+      const keywords = getDataValue(data, main["keywords"]);
+      const robots = getDataValue(data, main["robots"]);
+      const color = getDataValue(data, main["color"]);
+      const generator = getDataValue(data, main["generator"]);
 
       // Open graph
       addMeta(document, "property", "og:type", type || "website");
@@ -141,11 +142,8 @@ export default function (userOptions?: Options) {
         );
       }
 
-      if (other) {
-        for (const key in other) {
-          const value = getDataValue(data, other[key]);
-          addMeta(document, "name", key, value);
-        }
+      for (const [name, value] of Object.entries(other)) {
+        addMeta(document, "name", name, getDataValue(data, value));
       }
     }
   };
@@ -167,7 +165,7 @@ function addMeta(
     .trim();
 
   if (limit && content.length > limit) {
-    content = content.substr(0, limit - 1).trimEnd() + "…";
+    content = content.substring(0, limit - 1).trimEnd() + "…";
   }
 
   const meta = document.createElement("meta");
@@ -189,3 +187,35 @@ declare global {
     }
   }
 }
+
+function getMetas(metas: MetaData): [MetaData, Record<string, unknown>] {
+  const {
+    type,
+    site,
+    title,
+    lang,
+    description,
+    image,
+    icon,
+    keywords,
+    twitter,
+    color,
+    robots,
+    generator,
+    ...other
+  } = metas;
+  return [{
+    type,
+    site,
+    title,
+    lang,
+    description,
+    image,
+    icon,
+    keywords,
+    twitter,
+    color,
+    robots,
+    generator,
+  }, other];
+}

tests/__snapshots__/metas.test.ts.snap

@@ -176,7 +176,8 @@ snapshot[`metas plugin 3`] = `
         "lang",
         "color",
         "generator",
-        "other",
+        "twitter:label1",
+        "twitter:data1",
       ],
       page: [
         "src",
@@ -254,7 +255,8 @@ snapshot[`metas plugin 3`] = `
         "lang",
         "color",
         "generator",
-        "other",
+        "twitter:label1",
+        "twitter:data1",
       ],
       page: [
         "src",
@@ -326,7 +328,8 @@ snapshot[`metas plugin 3`] = `
         "lang",
         "color",
         "generator",
-        "other",
+        "twitter:label1",
+        "twitter:data1",
       ],
       page: [
         "src",

tests/assets/metas/page-1.vto

@@ -6,9 +6,8 @@ metas:
     that will be truncated to a maximum of 155 characters and then append "…" to the end.
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   robots: true
-  other:
-    "twitter:label1": Reading time
-    "twitter:data1": 1 minute
+  "twitter:label1": Reading time
+  "twitter:data1": 1 minute
 ---
 <html>
   <head>

tests/assets/metas/page-2.vto

@@ -4,9 +4,8 @@ metas:
   description: Tests the use of relative path (to page.data.url) when filling out the og:image or og:icon URL
   image: ./my-image.png
   icon: ./my-icon.png
-  other:
-    "twitter:label1": Reading time
-    "twitter:data1": 1 minute
+  "twitter:label1": Reading time
+  "twitter:data1": 1 minute
 ---
 <html>
   <head>

tests/assets/metas/page-3.md

@@ -7,9 +7,8 @@ metas:
   title: "=header.title"
   robots: "=robots"
   image: "=cover"
-  other:
-    "twitter:label1": Reading time
-    "twitter:data1": 1 minute
+  "twitter:label1": Reading time
+  "twitter:data1": 1 minute
 ---
 
 This is page excerpt will be used as meta description.