test that webcomponents work

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(
-              /* 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>`
+            .append(
+              this.$('<x-card>')
+                .attr(opts)
+                .append(
+                  this.$('<a>')
+                    .attr({
+                      href: opts.href,
+                      rel: 'noopener',
+                      target: '_blank',
+                    })
+                    .text(opts.title)
+                )
             )
             .html(),
       })