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

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) =>
-          this.$('<div>')
-            .html(
+          ejs.render(
             /* html */ `
-            <div style="padding-top:56.25%">
+          <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="width:100%; height:100%"></iframe>
-            </div>`
+              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>')
+            .append(
+              this.$('<x-card>')
+                .attr(opts)
+                .append(
+                  this.$('<a>')
+                    .attr({
+                      href: opts.href,
+                      rel: 'noopener',
+                      target: '_blank',
+                    })
+                    .text(opts.title)
+                )
             )
             .html(),
       })