Feat: 改用 <caniuse-embed> 元素嵌入组件

reference: https://github.com/Lruihao/caniuse-embed-element

Author: Lruihao

README.md

@@ -32,6 +32,26 @@ FixIt 主题 `v0.4.0` 及以上版本。
     # ... other partials
 ```
 
+组件配置：
+
+```toml
+[params]
+  # CanIUse Embed Element Configuration
+  # See: https://github.com/Lruihao/caniuse-embed-element
+  [params.caniuse_embed]
+    # show the past N versions that match the feature, range is 0 - 5, default is 2
+    past = 2
+    # show the future N versions that match the feature, range is 0 - 3, default is 1
+    future = 1
+    # the origin of the caniuse embed data source, default is "https://caniuse.lruihao.cn"
+    origin = "https://caniuse.lruihao.cn"
+    # loading strategy for the iframe (eager or lazy), default is lazy
+    loading = "lazy"
+    # only production environment effective
+    # e.g. https://unpkg.com/@cell-x/caniuse-embed-element/dist/caniuse-embed-element.iife.js
+    cdn = ""
+```
+
 ## 使用 Shortcode
 
 `caniuse` shortcode 有以下命名参数：
@@ -40,6 +60,7 @@ FixIt 主题 `v0.4.0` 及以上版本。
 - **past** _[可选]_（第二个位置参数）显示过去 N 个版本，范围是 `0 - 5`，默认为 `2`
 - **future** _[可选]_（第三个位置参数）显示未来 N 个版本，范围是 `0 - 3`，默认为 `1`
 - **origin** _[可选]_（第四个位置参数）caniuse embed 数据源，例如：`https://caniuse-embed-x.vercel.app`
+- **loading** _[可选]_（第五个位置参数）iframe 的加载策略（`eager` 或 `lazy`），默认为 `lazy`
 
 > 点击 `caniuse.com` 网站上功能左边 `#` 号，URL 中的 `pathname` 即为 `feature` 参数。
 
@@ -53,12 +74,12 @@ FixIt 主题 `v0.4.0` 及以上版本。
 
 ## 参考
 
+- [The CanIUse Embed — Add support tables to your site](https://caniuse.lruihao.cn/)
 - [Can I use… Support tables for HTML5, CSS3, etc](https://caniuse.com/)
-- [The CanIUse Embed — Add support tables to your site](https://caniuse-embed.vercel.app/)
-- [贡献指南 / 开发组件](https://fixit.lruihao.cn/zh-cn/contributing/components/)
 
 ## 致谢
 
+- [Lruihao/caniuse-embed-element](https://github.com/Lruihao/caniuse-embed-element)
+- [pengzhanbo/caniuse-embed](https://github.com/pengzhanbo/caniuse-embed)
 - [mdn-browser-compat-data](https://github.com/mdn/browser-compat-data)
 - [Fyrd/caniuse](https://github.com/Fyrd/caniuse)
-- [pengzhanbo/caniuse-embed](https://github.com/pengzhanbo/caniuse-embed)

assets/css/shortcode-caniuse/index.scss

@@ -1,12 +1,12 @@
 function setCanIUseEmbedsTheme(allCanIUseEmbeds, isDark) {
   allCanIUseEmbeds.forEach(function (embed) {
-    embed.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    embed.theme = isDark ? 'dark' : 'light';
   });
 }
 
 function CanIUseShortcodeInit() {
   if (typeof window.fixit?.switchThemeEventSet === 'object') {
-    const allCanIUseEmbeds = document.querySelectorAll('.ciu-embed');
+    const allCanIUseEmbeds = document.querySelectorAll('caniuse-embed');
     setCanIUseEmbedsTheme(allCanIUseEmbeds, window.fixit.isDark);
     window.fixit?.switchThemeEventSet.add(function (isDark) {
       setCanIUseEmbedsTheme(allCanIUseEmbeds, isDark);
@@ -20,4 +20,4 @@ if (document.readyState !== 'loading') {
   CanIUseShortcodeInit();
 } else {
   document.addEventListener('DOMContentLoaded', caniuseShortcodeInit, false);
-}
+}

assets/js/shortcode-caniuse.js

@@ -1,4 +1,20 @@
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.127.0"
+    min = "0.146.0"
+
+[params]
+  # CanIUse Embed Element Configuration
+  # See: https://github.com/Lruihao/caniuse-embed-element
+  [params.caniuse_embed]
+    # show the past N versions that match the feature, range is 0 - 5, default is 2
+    past = 2
+    # show the future N versions that match the feature, range is 0 - 3, default is 1
+    future = 1
+    # the origin of the caniuse embed data source, default is "https://caniuse.lruihao.cn"
+    origin = "https://caniuse.lruihao.cn"
+    # loading strategy for the iframe (eager or lazy), default is lazy
+    loading = "lazy"
+    # only production environment effective
+    # e.g. https://unpkg.com/@cell-x/caniuse-embed-element/dist/caniuse-embed-element.iife.js
+    cdn = ""

assets/lib/shortcode-caniuse/caniuse-embed-element.iife.js

@@ -1,20 +1,13 @@
 {{- if .HasShortcode "caniuse" -}}
   {{- $fingerprint := .Site.Store.Get "fingerprint" -}}
+  {{- $caniuseEmbedConfig := .Param "caniuse_embed" -}}
 
-  {{- /* shortcode-caniuse.min.css */ -}}
-  {{- $options := dict "Source" "css/shortcode-caniuse/index.scss" "Fingerprint" $fingerprint -}}
-  {{- $toCSS := dict "targetPath" "css/shortcode-caniuse.min.css" "enableSourceMap" true -}}
-  {{- $options = dict "Context" . "ToCSS" $toCSS | merge $options -}}
-  {{- partial "plugin/style.html" $options -}}
-
-  {{- /* embed.js */ -}}
-  {{- $source := resources.Get "lib/shortcode-caniuse/embed.js" -}}
-  {{- if hugo.IsProduction | and .Site.Params.cdn -}}
-    {{- $source = "https://caniuse.lruihao.cn/embed.js" -}}
+  {{- /* caniuse-embed-element.iife.js */ -}}
+  {{- $source := resources.Get "lib/shortcode-caniuse/caniuse-embed-element.iife.js" -}}
+  {{- if hugo.IsProduction | and $caniuseEmbedConfig.cdn -}}
+    {{- $source = $caniuseEmbedConfig.cdn -}}
   {{- end -}}
-  {{- /* debug */ -}}
-  {{/*  {{- $source = "http://localhost:4321/embed.js" -}}  */}}
-  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Page" . "Data" | partial "store/script.html" -}}
+  {{- dict "Source" $source "Fingerprint" $fingerprint "Async" true "Defer" true | dict "Page" . "Data" | partial "store/script.html" -}}
 
   {{- /* shortcode-caniuse.min.js */ -}}
   {{- $options := dict "targetPath" "js/shortcode-caniuse.min.js" "minify" hugo.IsProduction -}}

assets/lib/shortcode-caniuse/embed.js

@@ -1,15 +1,17 @@
 {{- /* 
-  reference https://github.com/pengzhanbo/caniuse-embed
+  reference https://github.com/Lruihao/caniuse-embed-element
   <feature>: Feature name
   <past>: Show the past N versions that match the feature, range is 0 - 5, default is 2
   <future>: Show the future N versions that match the feature, range is 0 - 3, default is 1
   <origin>: The origin of the caniuse embed data source, default is "https://caniuse.lruihao.cn"
+  <loading>: Loading strategy for the iframe (eager or lazy), default is lazy
 */ -}}
+{{- $caniuseEmbed := .Page.Param "caniuse_embed" -}}
 {{- $feature := cond .IsNamedParams (.Get "feature") (.Get 0) -}}
-{{- $past := cond .IsNamedParams (.Get "past") (.Get 1) | default 2 -}}
-{{- $future := cond .IsNamedParams (.Get "future") (.Get 2) | default 1 -}}
-{{- $origin := cond .IsNamedParams (.Get "origin") (.Get 3) | default "https://caniuse.lruihao.cn" -}}
-{{- $meta := delimit (collections.Shuffle (slice "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f") | first 4) "" -}}
+{{- $past := cond .IsNamedParams (.Get "past") (.Get 1) | default $caniuseEmbed.past | default 2 -}}
+{{- $future := cond .IsNamedParams (.Get "future") (.Get 2) | default $caniuseEmbed.future | default 1 -}}
+{{- $origin := cond .IsNamedParams (.Get "origin") (.Get 3) | default $caniuseEmbed.origin | default "https://caniuse.lruihao.cn" -}}
+{{- $loading := cond .IsNamedParams (.Get "loading") (.Get 4) | default $caniuseEmbed.loading | default "lazy" -}}
 
-<p class="ciu-embed" data-feature="{{ $feature }}" data-past="{{ $past }}" data-future="{{ $future }}" data-origin="{{ $origin }}" data-observer="true" data-theme="" data-meta="{{ $meta }}"></p>
+<caniuse-embed feature="{{ $feature }}" past="{{ $past }}" future="{{ $future }}" origin="{{ $origin }}"></caniuse-embed>
 {{- /* EOF */ -}}