Add: EsaRouteProcess - 記事の文頭文字列や画像の抽出

Author: mugifly

package-lock.json

@@ -45,7 +45,8 @@
     "@angular/compiler-cli": "12.2.16",
     "@types/jest": "27.5.2",
     "@types/lunr": "2.3.4",
-    "@types/node": "16.11.56",
+    "@types/marked": "^4.0.8",
+    "@types/node": "^16.11.56",
     "concurrently": "^7.6.0",
     "jest": "27.5.1",
     "jest-preset-angular": "11.1.2",

package.json

@@ -2,9 +2,11 @@
   "name": "scully-plugin-esa",
   "version": "0.0.1",
   "peerDependencies": {
-    "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0",
-    "jsdom": "^21.1.0"
+    "@angular/common": "^13.3.0",
+    "@angular/core": "^13.3.0",
+    "@scullyio/scully": "^2.1.36",
+    "jsdom": "^21.1.0",
+    "marked": "^4.0.12"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/scully-plugin-esa/package.json

@@ -1,15 +1,23 @@
 import { registerPlugin, HandledRoute } from '@scullyio/scully';
-import * as from 'fs';
+import * as fs from 'fs/promises';
+import { marked } from 'marked';
 
+// @ts-ignore
+import { JSDOM } from 'jsdom';
 
 const Plugin = async (routes?: HandledRoute[], config = {}): Promise<HandledRoute[]> => {
   if (!routes) {
     return [];
   }
 
-  routes.map((route) => {
-    console.log(route);
-    if (route.type !== 'contentFolder') return route;
+  for (let i = 0, l = routes.length; i < l; i++) {
+    const route = routes[i];
+
+    if (route.type !== 'contentFolder') continue;
+
+    if (route.data === undefined) {
+      route.data = {};
+    }
 
     // Remove strange extension (".html") added by esa from the url
     if (route.templateFile?.match(/\.html\.md$/)) {
@@ -21,11 +29,53 @@ const Plugin = async (routes?: HandledRoute[], config = {}): Promise<HandledRout
       route.data.tags = route.data.tags.split(/\s*,\s*/);
     }
 
-    // Open file
+    // Parse file
+    if (route.templateFile && route.templateFile.match(/\.md$/)) {
+      try {
+        let markdown = await fs.readFile(route.templateFile, 'utf-8');
+        let markdownLines = markdown.split(/\n/);
+        let endLineOfMetaData = 0;
+        for (let i = 1; i < markdownLines.length; i++) {
+          if (markdownLines[i].match(/^---$/)) {
+            endLineOfMetaData = i;
+            break;
+          }
+        }
+        markdown = markdownLines.slice(endLineOfMetaData + 1).join('\n');
+
+        const html = marked.parse(markdown);
+        const dom = new JSDOM(html);
 
+        // Extract beginning text
+        route.data.beginningText = '';
+        const paragraphs = dom.window.document.querySelectorAll('p');
+        for (let i = 0; i < paragraphs.length; i++) {
+          const paragraph = paragraphs[i];
+          if (paragraph.textContent?.length) {
+            route.data.beginningText += paragraph.textContent;
+          }
+          if (route.data.beginningText.length > 200) {
+            break;
+          }
+        }
+
+        // Extract images
+        route.data.imageUrls = [];
+        const imageElems = dom.window.document.querySelectorAll('img');
+        for (let i = 0; i < imageElems.length; i++) {
+          const image = imageElems[i];
+          route.data.imageUrls.push(image.src);
+        }
+      } catch (e: any) {
+        console.error(`[EsaRouteProcess]`, e);
+      }
+    } else {
+      console.warn(`[EsaRouteProcess]`, 'Could not parse file', route.templateFile);
+    }
+
+    routes[i] = route;
+  }
 
-    return route;
-  });
   return routes;
 };
 

projects/scully-plugin-esa/src/lib/esa-route-process.ts

@@ -41,6 +41,8 @@
         </ul>
         <!---->
 
+        {{ page | json }}
+
         <br style="clear: both" />
       </mat-card-subtitle>
     </mat-card>