Add extension components to the content of xLog

Incorporating custom extension components into the content of an article may be a requirement for some people (like me).

xfm (xLog flavored markdown) is basically based on gfm and provides some built-in component extensions.

So if there is a certain need for content customization, it is actually better to directly use HTML tags to build it.

Embedding Video Components#

The most commonly used video websites use iframes to embed videos (such as Bilibili).

Bilibili Video

However, embedding Bilibili's player requires customizing some styles and using some parameters to make it work better.

<style>iframe{ aspect-ratio: 16/9 }</style>
<iframe src="//player.bilibili.com/player.html?bvid=BV1Zh411M7P7&autoplay=0" width="100%" allowfullscreen> </iframe>

Since the content of xlog uses remark-directive, if you don't like writing HTML tags, you can also use:

::style[iframe{aspect-ratio: 16/9}]

::iframe{src="//player.bilibili.com/player.html?bvid=BV1Zh411M7P7&autoplay=0" width="100%" allowfullscreen}

Of course, there is also YouTube.

YouTube

<iframe width="560" height="315" src="https://www.youtube.com/embed/uHGShqcAHlQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Embedding iframes can be said to be very simple, but what if you need components with some interactivity?

Simple Content Interaction Extension Components#

In fact, modern CSS can provide some interactive capabilities, but it requires a deep understanding of CSS techniques.

However, based on the functionality of iframes, we can completely use front-end framework components to extend your article content with component extensions. But there are a few prerequisites here.

Using iframes to use front-end framework components#

For example, now I have a web component (from YunYouJun).

<!-- Actually, there should be normal HTML structure -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/wc-github-corners@latest"
></script>

<github-corners blank="true"></github-corners>

In normal cases, we can convert this HTML code to base64 and put it in the src attribute of an iframe. The following should be usable, but due to the absolute positioning of this component, the display effect may not be very good.

<iframe 
src="data:text/html;base64,PGh0bWwgc3R5bGU9IiI+DQo8aGVhZD4NCjxzY3JpcHQgdHlwZT0ibW9kdWxlIiBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vd2MtZ2l0aHViLWNvcm5lcnNAbGF0ZXN0Ij48L3NjcmlwdD4NCjwvaGVhZD4NCjxib2R5IHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsiPg0KPGdpdGh1Yi1jb3JuZXJzIGJsYW5rPSJ0cnVlIj48L2dpdGh1Yi1jb3JuZXJzPg0KPC9ib2R5Pg0KPC9odG1sPg==" style="color-scheme: auto;"></iframe>

But since xLog does not allow protocols other than http and https to appear in the src attribute, how can we solve this? ~~Contribute code to xlog to remove this restriction~~

Obviously, that won't work. So we can provide a very simple service to convert the parameters directly into HTML and return it. This way, we can provide some simple interactive components. Don't forget to use encodeURIComponent for URL parameters.

The service used in the following example is a randomly written vercel function and does not have much stability.

Of course, this approach can completely use some simple front-end framework components, or web components can directly find existing components.

If using React, you may need babel-standalone.

Using solutions like Apline.js or vue/petite-vue will cause the base64 string to exceed the URL length if the HTML scale is too large. Therefore, if the functionality is complex, it is recommended to publish an npm package and import it via CDN.

enpitsulin