Merge pull request #608 from lumeland/feat/other-tags-in-metas-plugin

Feat/other tags in metas plugin

CHANGELOG.md

@@ -14,6 +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: allow to add custom metas [#604].
 
 ### Changed
 - BREAKING: Removed `lume/cms.ts` module. Use import maps instead.

plugins/metas.ts

@@ -49,6 +49,10 @@ export interface MetaData {
 
   /** Whether include the generator or not (Boolean to enable/disable, String for a custom value) */
   generator?: string | boolean | ((data: Data) => string | boolean | undefined);
+
+  /** Other meta tags */
+  // deno-lint-ignore no-explicit-any
+  [name: string]: any;
 }
 
 const defaults: Options = {
@@ -75,25 +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 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");
@@ -136,6 +141,10 @@ export default function (userOptions?: Options) {
           generator === true ? defaultGenerator : generator,
         );
       }
+
+      for (const [name, value] of Object.entries(other)) {
+        addMeta(document, "name", name, getDataValue(data, value));
+      }
     }
   };
 }
@@ -156,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");
@@ -178,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

@@ -133,6 +133,8 @@ snapshot[`metas plugin 3`] = `
 <meta name="robots" content="index, follow">
 <meta name="theme-color" content="black">
 <meta name="generator" content="Lume testing">
+<meta name="twitter:label1" content="Reading time">
+<meta name="twitter:data1" content="1 minute">
 </head>
   <body>
     Hello world
@@ -174,6 +176,8 @@ snapshot[`metas plugin 3`] = `
         "lang",
         "color",
         "generator",
+        "twitter:label1",
+        "twitter:data1",
       ],
       page: [
         "src",
@@ -208,6 +212,8 @@ snapshot[`metas plugin 3`] = `
 <meta name="robots" content="noindex, nofollow, noarchive">
 <meta name="theme-color" content="black">
 <meta name="generator" content="Lume testing">
+<meta name="twitter:label1" content="Reading time">
+<meta name="twitter:data1" content="1 minute">
 </head>
   <body>
     Hello world
@@ -249,6 +255,8 @@ snapshot[`metas plugin 3`] = `
         "lang",
         "color",
         "generator",
+        "twitter:label1",
+        "twitter:data1",
       ],
       page: [
         "src",
@@ -282,6 +290,8 @@ snapshot[`metas plugin 3`] = `
 <meta name="robots" content="this robots will be overrided">
 <meta name="theme-color" content="black">
 <meta name="generator" content="Lume testing">
+<meta name="twitter:label1" content="Reading time">
+<meta name="twitter:data1" content="1 minute">
 </head><body><p>This is page excerpt will be used as meta description.</p>
 <!--more-->
 </body></html>',
@@ -318,6 +328,8 @@ snapshot[`metas plugin 3`] = `
         "lang",
         "color",
         "generator",
+        "twitter:label1",
+        "twitter:data1",
       ],
       page: [
         "src",

tests/assets/metas/page-1.vto

@@ -6,6 +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
+  "twitter:label1": Reading time
+  "twitter:data1": 1 minute
 ---
 <html>
   <head>

tests/assets/metas/page-2.vto

@@ -4,6 +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
+  "twitter:label1": Reading time
+  "twitter:data1": 1 minute
 ---
 <html>
   <head>

tests/assets/metas/page-3.md

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