test that webcomponents work

_posts/2020/03/zhlevel-level-1.md

@@ -7,12 +7,12 @@ tag:
 
 Comes from my old repository [here](https://github.com/patarapolw/zhlevel/blob/master/resources/level/hanzi.json).
 
-<x-card
+<%- xCard({
-  href="https://github.com/patarapolw/zhlevel/blob/master/resources/level/hanzi.json"
+  href: "https://github.com/patarapolw/zhlevel/blob/master/resources/level/hanzi.json",
-  image="https://avatars3.githubusercontent.com/u/21255931?s=400&v=4"
+  image: "https://avatars3.githubusercontent.com/u/21255931?s=400&v=4",
-  title="patarapolw/zhlevel"
+  title: "patarapolw/zhlevel",
-  description="Learn Chinese from sentences, Tatoeba, or use your own sentences - patarapolw/zhlevel - /resources/level/hanzi.json"
+  description: "Learn Chinese from sentences, Tatoeba, or use your own sentences - patarapolw/zhlevel - /resources/level/hanzi.json"
-></x-card>
+})%>
 
 Level One
 
@@ -47,11 +47,11 @@ Level One
 
 According to <https://github.com/patarapolw/zhlevel/blob/master/resources/level/hsk.yaml>
 
-<x-card
+<%- xCard({
-  href="https://github.com/patarapolw/zhlevel/blob/master/resources/level/hsk.yaml"
+  href: 'https://github.com/patarapolw/zhlevel/blob/master/resources/level/hsk.yaml',
-  image="https://avatars3.githubusercontent.com/u/21255931?s=400&v=4"
+  image: 'https://avatars3.githubusercontent.com/u/21255931?s=400&v=4',
-  title="patarapolw/zhlevel"
+  title: 'patarapaolw/zhlevel',
-  description="Learn Chinese from sentences, Tatoeba, or use your own sentences - patarapolw/zhlevel - /resources/level/hsk.yaml"
+  description: 'Learn Chinese from sentences, Tatoeba, or use your own sentences - patarapolw/zhlevel - /resources/level/hsk.yaml'
-></x-card>
+}) %>
 
 爱, 八, 爸爸, 杯子, 北京, 本, 不, 不客气, 菜, 茶, 吃, 出租车, 打电话, 大, 的, 点, 电脑, 电视, 电影, 东西, 都, 读, 对不起, 多, 多少, 儿子, 二, 饭店, 飞机, 分钟

packages/nuxt/scripts/make-html.ts

@@ -37,6 +37,26 @@ export class MakeHTML {
       },
       'underscore-italic'
     )
+
+    /**
+     * ! This is the only way to preserve syntax highlighting, while output multiline strings correctly
+     */
+    this.mdConverter.addExtension(
+      {
+        type: 'lang',
+        regex: /(^|\n)```html parsed([^]+)\n```\n/g,
+        replace: (_: string, p1: string, p2: string) => {
+          return (
+            p1 +
+            ejs.render(p2, {
+              rmWhitespace: true,
+              beautify: false,
+            })
+          )
+        },
+      },
+      'html-parsed'
+    )
   }
 
   async parse(
@@ -80,16 +100,36 @@ export class MakeHTML {
     return this.mdConverter.makeHtml(
       await ejs.renderFile(filename, {
         youtube: (id: string) =>
+          ejs.render(
+            /* html */ `
+          <div style="position:relative;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="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>
+          </div>`,
+            { rmWhitespace: true, beautify: false }
+          ),
+        xCard: (opts: {
+          href: string
+          image?: string
+          title: string
+          description?: string
+        }) =>
           this.$('<div>')
-            .html(
+            .append(
-              /* html */ `
+              this.$('<x-card>')
-            <div style="padding-top:56.25%">
+                .attr(opts)
-              <iframe src="https://www.youtube.com/embed/${id}"
+                .append(
-                frameborder="0"
+                  this.$('<a>')
-                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                    .attr({
-                allowfullscreen
+                      href: opts.href,
-                style="width:100%; height:100%"></iframe>
+                      rel: 'noopener',
-            </div>`
+                      target: '_blank',
+                    })
+                    .text(opts.title)
+                )
             )
             .html(),
       })