remove pug

packages/nuxt/scripts/make-html.ts

@@ -2,6 +2,7 @@ import crypto from 'crypto'
 
 import scopeCss from '@patarapolw/scope-css'
 import cheerio from 'cheerio'
+import ejs from 'ejs'
 import jieba from 'nodejieba'
 import showdown from 'showdown'
 
@@ -16,7 +17,7 @@ export class MakeHTML {
     strikethrough: true,
     tables: true,
     tasklists: true,
-    simpleLineBreaks: true,
+    // simpleLineBreaks: true,
     openLinksInNewWindow: true,
     backslashEscapesHTMLTags: true,
     emoji: true,
@@ -24,7 +25,7 @@ export class MakeHTML {
     metadata: true,
   })
 
-  constructor(private slug: string) {
+  constructor() {
     /**
      * ! For some reasons default underscore italic fails to render...
      */
@@ -38,18 +39,24 @@ export class MakeHTML {
     )
   }
 
-  parse(md: string): string {
+  async parse(
+    filename: string
+  ): Promise<{
+    $: cheerio.Cheerio
+    html(): string
+    clean(): string
+  }> {
     const id =
       'md-' +
       crypto
         .createHash('sha256')
-        .update(this.slug || md)
+        .update(filename)
         .digest()
         .toString('hex')
         .substr(8)
 
     const $div = this.$(`<div id="${id}">`)
-    $div.html(this.mdConverter.makeHtml(md))
+    $div.html(await this.getHTML(filename))
     $div.find('style').each((_, el) => {
       const $el = this.$(el)
       const html = $el.html() || ''
@@ -58,14 +65,34 @@ export class MakeHTML {
       }
     })
 
-    return this.$('<div>').append($div).html() || ''
+    return {
+      $: $div,
+      html() {
+        return $div.html() || ''
+      },
+      clean() {
+        return jieba.cutForSearch($div.text() || '').join(' ')
+      },
+    }
   }
 
-  clean(md: string): string {
-    const $div = this.$('<div>')
-    $div.html(this.mdConverter.makeHtml(md))
-    $div.remove('style')
-
-    return jieba.cutForSearch($div.html() || '').join(' ')
+  private async getHTML(filename: string) {
+    return this.mdConverter.makeHtml(
+      await ejs.renderFile(filename, {
+        youtube: (id: string) =>
+          this.$('<div>')
+            .html(
+              /* html */ `
+            <div style="padding-top:56.25%">
+              <iframe src="https://www.youtube.com/embed/${id}"
+                frameborder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+                style="width:100%; height:100%"></iframe>
+            </div>`
+            )
+            .html(),
+      })
+    )
   }
 }