Automatically discover meta description

Author: dragonstyle

src/core/text.ts

@@ -47,3 +47,19 @@ export function formatLineRange(
     lines: result,
   };
 }
+
+export function truncateText(text: string, length: number) {
+  if (text.length < length) {
+    return text;
+  } else {
+    // Since we'll insert elips, trim an extra space
+    const clipLength = length - 1;
+    const clipped = text.substring(0, clipLength);
+    const lastSpace = clipped.lastIndexOf(" ");
+    if (lastSpace > 0) {
+      return clipped.substring(0, lastSpace) + "…";
+    } else {
+      return clipped + "…";
+    }
+  }
+}

src/project/types/website/util/discover-meta.ts

@@ -27,6 +27,19 @@ const kMdPreviewClassRegex = RegExp(kPreviewClassPattern);
 const kMdNamedImageRegex = RegExp(kMdNamedImagePattern);
 const kMarkdownImg = /!\[[^\]]*\]\((.*?)(?:\".*\")?\)(?:\{(?:[^\|]*)\})?/;
 
+export function findDescription(doc: Document): string | undefined {
+  const paras = doc.querySelectorAll(
+    "main.content > p,  main.content > section > p",
+  );
+  for (const para of paras) {
+    const paraEl = para as Element;
+    if (paraEl.innerText) {
+      return paraEl.innerText;
+    }
+  }
+  return undefined;
+}
+
 export function findPreviewImg(
   doc: Document,
 ): string | undefined {

src/project/types/website/website-meta.ts

@@ -36,7 +36,7 @@ import {
   createMarkdownPipeline,
   MarkdownPipeline,
 } from "./website-pipeline-md.ts";
-import { findPreviewImg } from "./util/discover-meta.ts";
+import { findDescription, findPreviewImg } from "./util/discover-meta.ts";
 import { isAbsoluteRef } from "../../../core/http.ts";
 import {
   kHtmlEmptyPostProcessResult,
@@ -45,6 +45,7 @@ import { HtmlPostProcessResult } from "../../../command/render/types.ts";
 import { imageSize } from "../../../core/image.ts";
 import { writeMetaTag } from "../../../format/html/format-html-shared.ts";
 import { joinUrl } from "../../../core/url.ts";
+import { truncateText } from "../../../core/text.ts";
 
 const kCard = "card";
 
@@ -53,6 +54,7 @@ interface SocialMetadataProvider {
   prefix: string;
   metadata: Metadata;
   filter?: (key: string) => string;
+  resolveValue?: (key: string, value: string) => string;
   resolveDefaults?: (finalMetadata: Metadata) => void;
 }
 
@@ -101,6 +103,14 @@ export function metadataHtmlPostProcessor(
         }
         return key;
       },
+      resolveValue: (key: string, value: string) => {
+        // Limit to 300 chars for Open Graph
+        if ([kDescription].includes(key)) {
+          return truncateText(value, 300);
+        }
+
+        return value;
+      },
     };
 
     // The twitter card provider
@@ -122,6 +132,14 @@ export function metadataHtmlPostProcessor(
 
         return key;
       },
+      resolveValue: (key: string, value: string) => {
+        // Limit to 200 chars for Twitter
+        if ([kDescription].includes(key)) {
+          return truncateText(value, 200);
+        }
+
+        return value;
+      },
       resolveDefaults: (finalMetadata: Metadata) => {
         if (finalMetadata[kCardStyle] === undefined) {
           finalMetadata[kCardStyle] = finalMetadata[kImage]
@@ -156,6 +174,11 @@ export function metadataHtmlPostProcessor(
         metadata[kImage] = findPreviewImg(doc);
       }
 
+      // cook up a description if one is not provided
+      if (metadata[kDescription] === undefined) {
+        metadata[kDescription] = findDescription(doc);
+      }
+
       // Convert image to absolute href and add height and width
       resolveImageMetadata(source, project, format, metadata);
 
@@ -167,11 +190,18 @@ export function metadataHtmlPostProcessor(
       // Append the metadata
       Object.keys(metadata).forEach((key) => {
         if (metadata[key] !== undefined) {
+          // Resolve the value
           const data = metadata[key] as string;
+          const value = provider.resolveValue
+            ? provider.resolveValue(key, data)
+            : data;
+
+          // Filter the key
           if (provider.filter) {
             key = provider.filter(key);
           }
-          writeMetaTag(`${provider.prefix}:${key}`, data, doc);
+
+          writeMetaTag(`${provider.prefix}:${key}`, value, doc);
         }
       });
     });