feat: expose loading api to all third apps that using iframes

MR-Addict · Feb 15, 2024 · e43c3fc · e43c3fc
1 parent 04fdf10
commit e43c3fc
Show file tree

Hide file tree

Showing 18 changed files with 51 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ Then you can use `embed` macro to embed an app. The syntax is like this:
 **options** are key-value based array seperated by space and its value must be wrapped by **quotes**. For example:
 
 ```text
-{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}
+{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" loading="lazy" %}
 ```
 
 ## 3. Examples

diff --git a/example/book.toml b/example/book.toml
@@ -6,9 +6,6 @@ multilingual = false
 src = "src"
 title = "Mdbook Embedify"
 
-[rust]
-edition = "2021"
-
 [build]
 build-dir = "book"
 create-missing = false
@@ -32,12 +29,6 @@ enable = true
 enable = true
 level = 1
 
-[output.html.playground]
-editable = true
-copyable = true
-copy-js = true
-line-numbers = true
-
 [output.html.search]
 enable = true
 limit-results = 30
@@ -71,3 +62,4 @@ giscus.category-id = "DIC_kwDOLCxX0c4CdGx-"
 giscus.reactions-enabled = "1"
 giscus.theme = "light"
 giscus.lang = "en"
+giscus.loading = "eager"
diff --git a/example/src/global-embedding.md b/example/src/global-embedding.md
@@ -39,6 +39,7 @@ giscus.category-id = "DIC_kwDOLCxX0c4CdGx-"
 giscus.reactions-enabled = "1"
 giscus.theme = "light"
 giscus.lang = "en"
+giscus.loading = "eager"
 ```
 
 You can see more details about each app at its own page.
diff --git a/example/src/ignore-embeds.md b/example/src/ignore-embeds.md
@@ -12,7 +12,7 @@ For example:
 ```text
 <!-- embed ignore begin -->
 
-{% embed youtube id="DyTCOwB0DVw" %}
+{% embed youtube id="DyTCOwB0DVw" loading="lazy" %}
 
 <!-- embed ignore end -->
 ```

diff --git a/example/src/third-party/bilibili.md b/example/src/third-party/bilibili.md
@@ -4,18 +4,19 @@
 
 ## Options
 
-| Option | Description | Required | Default |
-| :----- | :---------- | :------- | :------ |
-| id     | Video ID    | Yes      | - -     |
+| Option  | Description  | Required | Default |
+| :------ | :----------- | :------- | :------ |
+| id      | Video ID     | Yes      | - -     |
+| loading | Loading type | No       | lazy    |
 
 ## Example
 
 <!-- embed ignore begin -->
 
 ```text
-{% embed bilibili id="BV1uT4y1P7CX" %}
+{% embed bilibili id="BV1uT4y1P7CX" loading="lazy" %}
 ```
 
 <!-- embed ignore end -->
 
-{% embed bilibili id="BV1uT4y1P7CX" %}
+{% embed bilibili id="BV1uT4y1P7CX" loading="lazy" %}
diff --git a/example/src/third-party/codepen.md b/example/src/third-party/codepen.md
@@ -4,21 +4,22 @@
 
 ## Options
 
-| Option | Description   | Required | Default |
-| :----- | :------------ | :------- | :------ |
-| user   | username      | Yes      | - -     |
-| slug   | Project slug  | Yes      | - -     |
-| height | Iframe height | No       | 600     |
-| theme  | Iframe theme  | No       | dark    |
+| Option  | Description   | Required | Default |
+| :------ | :------------ | :------- | :------ |
+| user    | username      | Yes      | - -     |
+| slug    | Project slug  | Yes      | - -     |
+| height  | Iframe height | No       | 600     |
+| theme   | Iframe theme  | No       | dark    |
+| loading | Loading type  | No       | lazy    |
 
 ## Example
 
 <!-- embed ignore begin -->
 
 ```text
-{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}
+{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" loading="lazy" %}
 ```
 
 <!-- embed ignore end -->
 
-{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}
+{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" loading="lazy" %}
diff --git a/example/src/third-party/codesandbox.md b/example/src/third-party/codesandbox.md
@@ -4,19 +4,20 @@
 
 ## Options
 
-| Option | Description  | Required | Default |
-| :----- | :----------- | :------- | :------ |
-| id     | Project ID   | Yes      | - -     |
-| theme  | Iframe theme | No       | dark    |
+| Option  | Description  | Required | Default |
+| :------ | :----------- | :------- | :------ |
+| id      | Project ID   | Yes      | - -     |
+| theme   | Iframe theme | No       | dark    |
+| loading | Loading type | No       | lazy    |
 
 ## Example
 
 <!-- embed ignore begin -->
 
 ```text
-{% embed codesandbox id="ke8wx" theme="light" %}
+{% embed codesandbox id="ke8wx" theme="light" loading="lazy" %}
 ```
 
 <!-- embed ignore end -->
 
-{% embed codesandbox id="ke8wx" theme="light" %}
+{% embed codesandbox id="ke8wx" theme="light" loading="lazy" %}
diff --git a/example/src/third-party/giscus.md b/example/src/third-party/giscus.md
@@ -13,13 +13,14 @@
 | reactions-enabled | Enable reactions | No       | 1       |
 | theme             | Theme            | No       | light   |
 | lang              | Language         | No       | en      |
+| loading           | Loading type     | No       | lazy    |
 
 ## Example
 
 <!-- embed ignore begin -->
 
 ```text
-{% embed giscus repo="MR-Addict/mdbook-embedify" repo-id="R_kgDOLCxX0Q" category="General" category-id="DIC_kwDOLCxX0c4CdGx-" theme="light" %}
+{% embed giscus repo="MR-Addict/mdbook-embedify" repo-id="R_kgDOLCxX0Q" category="General" category-id="DIC_kwDOLCxX0c4CdGx-" theme="light" loading="lazy" %}
 ```
 
 <!-- embed ignore end -->
@@ -37,6 +38,7 @@ giscus.category-id = "DIC_kwDOLCxX0c4CdGx-"
 giscus.reactions-enabled = "1"
 giscus.theme = "light"
 giscus.lang = "en"
+giscus.loading = "eager"
 ```
 
 ## Refuse to Connect

diff --git a/example/src/third-party/stackblitz.md b/example/src/third-party/stackblitz.md
@@ -4,19 +4,20 @@
 
 ## Options
 
-| Option | Description  | Required | Default |
-| :----- | :----------- | :------- | :------ |
-| id     | Project ID   | Yes      | - -     |
-| theme  | Iframe theme | No       | dark    |
+| Option  | Description  | Required | Default |
+| :------ | :----------- | :------- | :------ |
+| id      | Project ID   | Yes      | - -     |
+| theme   | Iframe theme | No       | dark    |
+| loading | Loading type | No       | lazy    |
 
 ## Example
 
 <!-- embed ignore begin -->
 
 ```text
-{% embed stackblitz id="vitejs-vite-y8mdxg" theme="light" %}
+{% embed stackblitz id="vitejs-vite-y8mdxg" theme="light" loading="lazy" %}
 ```
 
 <!-- embed ignore end -->
 
-{% embed stackblitz id="vitejs-vite-y8mdxg" theme="light" %}
+{% embed stackblitz id="vitejs-vite-y8mdxg" theme="light" loading="lazy" %}
diff --git a/example/src/third-party/youtube.md b/example/src/third-party/youtube.md
@@ -4,18 +4,19 @@
 
 ## Options
 
-| Option | Description | Required | Default |
-| :----- | :---------- | :------- | :------ |
-| id     | Video ID    | Yes      | - -     |
+| Option  | Description  | Required | Default |
+| :------ | :----------- | :------- | :------ |
+| id      | Video ID     | Yes      | - -     |
+| loading | Loading type | No       | lazy    |
 
 ## Example
 
 <!-- embed ignore begin -->
 
 ```text
-{% embed youtube id="DyTCOwB0DVw" %}
+{% embed youtube id="DyTCOwB0DVw" loading="lazy" %}
 ```
 
 <!-- embed ignore end -->
 
-{% embed youtube id="DyTCOwB0DVw" %}
+{% embed youtube id="DyTCOwB0DVw" loading="lazy" %}
diff --git a/example/src/usage.md b/example/src/usage.md
@@ -41,7 +41,7 @@ The basic syntax is like this:
 For example:
 
 ```text
-{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}
+{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" loading="lazy" %}
 ```
 
 <!-- embed ignore end -->

diff --git a/src/embed.rs b/src/embed.rs
@@ -82,6 +82,7 @@ fn render_giscus(config: &Config) -> String {
     let reactions_enabled = cfg::get_config_string(config, "giscus.reactions-enabled", "1");
     let theme = cfg::get_config_string(config, "giscus.theme", "light");
     let lang = cfg::get_config_string(config, "giscus.lang", "en");
+    let loading = cfg::get_config_string(config, "giscus.loading", "lazy");
 
     // render the template
     let options = vec![
@@ -92,6 +93,7 @@ fn render_giscus(config: &Config) -> String {
         ("reactions-enabled".to_string(), reactions_enabled),
         ("theme".to_string(), theme),
         ("lang".to_string(), lang),
+        ("loading".to_string(), loading),
     ];
     utils::render_template("giscus", &options)
 }

diff --git a/templates/bilibili.html b/templates/bilibili.html
@@ -1,7 +1,7 @@
 <iframe
   allowfullscreen
-  loading="lazy"
   name="bilibili"
+  loading="{% raw(loading=lazy) %}"
   src="https://player.bilibili.com/player.html?bvid={% raw(id) %}&danmaku=0"
   style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem; background: black"
 ></iframe>
diff --git a/templates/codepen.html b/templates/codepen.html
@@ -1,7 +1,7 @@
 <iframe
   allowfullscreen
-  loading="lazy"
   name="codepen"
+  loading="{% raw(loading=lazy) %}"
   height="{% raw(height=600) %}"
   style="width: 100%; border: none; border-radius: 1rem; background: black"
   src="https://codepen.io/{% raw(user) %}/embed/{% raw(slug) %}?default-tab=result&theme-id={% raw(theme=dark) %}"

diff --git a/templates/codesandbox.html b/templates/codesandbox.html
@@ -1,6 +1,6 @@
 <iframe
-  loading="lazy"
   name="sandbox"
+  loading="{% raw(loading=lazy) %}"
   src="https://codesandbox.io/embed/{% raw(id) %}?&theme={% raw(theme=dark) %}"
   style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem; background: black"
 ></iframe>
diff --git a/templates/giscus.html b/templates/giscus.html
@@ -17,7 +17,7 @@
   data-input-position="bottom"
   data-theme="{% raw(theme=light) %}"
   data-lang="{% raw(lang=en) %}"
-  data-loading="lazy"
+  data-loading="{% raw(loading=lazy) %}"
   crossorigin="anonymous"
   async
 ></script>
diff --git a/templates/stackblitz.html b/templates/stackblitz.html
@@ -1,6 +1,6 @@
 <iframe
-  loading="lazy"
   name="stackblitz"
+  loading="{% raw(loading=lazy) %}"
   src="https://stackblitz.com/edit/{% raw(id) %}?embed=1&theme={% raw(theme=dark) %}&view=preview"
   style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem; background: black"
 ></iframe>
diff --git a/templates/youtube.html b/templates/youtube.html
@@ -1,7 +1,7 @@
 <iframe
   allowfullscreen
-  loading="lazy"
   name="youtube"
+  loading="{% raw(loading=lazy) %}"
   src="https://www.youtube.com/embed/{% raw(id) %}"
   style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem; background: black"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"