feat: update docs

Author: MR-Addict

.github/workflows/page.yaml

@@ -0,0 +1,23 @@
+name: pages
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  pages:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: setup
+        run: |
+          cd example && cp assets/bin/* /usr/local/bin
+          chmod u+x /usr/local/bin/mdbook* && mdbook build
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./example/book

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "mdbook-embedify"
-version = "0.1.0"
+version = "0.2.0"
 edition = "2021"
 license = "MIT"
 readme = "README.md"

Cargo.toml

@@ -32,21 +32,8 @@ Then you can use `embed` macro to embed an app. The syntax is like this:
 {% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}
 ```
 
-Some apps are not third-party apps, for example scroll-to-top button. You can use it like this:
-
-```text
-{% embed scroll-to-top %}
-```
-
-But this only works for chapter that embeds this, not for the whole book. Most of cases, you want to use it for the whole book. You can do this by adding `scroll-to-top` option to embedify preprocessor in `book.toml` file like this:
-
-```toml
-[preprocessor.embedify]
-scroll-to-top = true
-```
-
 ## 3. Examples
 
-![example](example.png)
+![preview](preview.png)
 
 You can see a live demo and more detailed documentation [here](https://mr-addict.github.io/mdbook-embedify).

README.md

@@ -4,5 +4,11 @@ table {
 }
 
 table tr :is(th, td) {
-  padding-block: 10px;
+  padding-block: 7px;
+}
+
+@media (min-width: 768px) {
+  table tr :is(th, td) {
+    padding-block: 10px;
+  }
 }

example/bin/mdbook example/assets/bin/mdbook

@@ -2,14 +2,19 @@
 
 Sometimes you may want preprocessors to ignore some embeds.
 
-You can do it by adding group of `<!-- embed ignore begin -->` and `<!-- embed ignore end -->` comment to the content where you want to ignore. For example:
+You can do it by wrapping content that you want to ignore with below two comments:
 
-```text
+- `<!-- embed ignore begin -->`
+- `<!-- embed ignore end -->`
+
+For example:
 
+```text
 <!-- embed ignore begin -->
 
-{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}
+{% embed youtube id="DyTCOwB0DVw" %}
 
 <!-- embed ignore end -->
-
 ```
+
+And youtube embed won't be rendered.

example/assets/bin/mdbook-embedify

@@ -1,9 +1,7 @@
 # Local Apps
 
-Local apps are apps that are not hosted on third party sites.
+Local apps are apps hosted on your local book, so it is not necessary to have internet connection to use them.
 
-They are hosted on your local book, so it is not necessary to have internet connection to use them.
-
-Below are all supported local apps and its detailed usage.
+Below are all supported local apps and its detailed options.
 
 - [Scroll To Top](scroll-to-top.md)

example/assets/css/patch.css

@@ -23,4 +23,4 @@ scroll-to-top = true
 
 <!-- embed ignore end -->
 
-This book uses this option. You can see it at the bottom right corner of this page. But it only shows pages that are longer enough to scroll. You can see it in action by scrolling down this page.
+This book uses this option. You can see it at the bottom right corner of this page. But it only shows pages that are longer enough to scroll. You can see it in action by scrolling down this page. Or you can see it my another book [Notes](https://mr-addict.github.io/notes).

example/src/ignore-embeds.md

@@ -10,9 +10,9 @@
 <!-- embed ignore begin -->
 
 ```text
-{% embed codesandbox id="ke8wx" theme="dark" %}
+{% embed codesandbox id="ke8wx" theme="light" %}
 ```
 
 <!-- embed ignore end -->
 
-{% embed codesandbox id="ke8wx" theme="dark" %}
+{% embed codesandbox id="ke8wx" theme="light" %}

example/src/local/intro.md

@@ -1,10 +1,10 @@
 # Third Party Apps
 
-Third party apps are apps that are hosted on third party sites.
-
-Below are all supported third party apps and its detailed usage.
+Third party apps are apps that are hosted on third party sites. Below are all supported third party apps and its detailed options.
 
 - [Gist](gist.md)
 - [Youtube](youtube.md)
 - [Bilibili](bilibili.md)
+- [Codesandbox](codesandbox.md)
+- [Stackblitz](stackblitz.md)
 - [Codepen](codepen.md)

example/src/local/scroll-to-top.md

@@ -10,9 +10,9 @@
 <!-- embed ignore begin -->
 
 ```text
-{% embed codesandbox id="vitejs-vite-y8mdxg" theme="dark" %}
+{% embed stackblitz id="vitejs-vite-y8mdxg" theme="light" %}
 ```
 
 <!-- embed ignore end -->
 
-{% embed codesandbox id="vitejs-vite-y8mdxg" theme="dark" %}
+{% embed stackblitz id="vitejs-vite-y8mdxg" theme="light" %}

example/src/third-party/codesandbox.md

@@ -9,9 +9,9 @@
 <!-- embed ignore begin -->
 
 ```text
-{% embed youtube id="EngW7tLk6R8" %}
+{% embed youtube id="DyTCOwB0DVw" %}
 ```
 
 <!-- embed ignore end -->
 
-{% embed youtube id="EngW7tLk6R8" %}
+{% embed youtube id="DyTCOwB0DVw" %}

example/src/third-party/intro.md

@@ -1,5 +1,3 @@
-# Usage
-
 ## Installation
 
 There are two ways to install this plugin.

example/src/third-party/stackblitz.md

@@ -38,7 +38,7 @@ impl Preprocessor for Embed {
 
                 // if scroll-to-top is enabled, add {% embed scrolltotop %}
                 if scroll_to_top {
-                    content.push_str("\n{% embed scroll-to-top %}");
+                    content.push_str("\n{% embed scroll-to-top %}\n");
                 }
 
                 // this can make the process faster

example/src/third-party/youtube.md

@@ -3,5 +3,5 @@
   loading="lazy"
   name="bilibili"
   src="https://player.bilibili.com/player.html?bvid={id}&danmaku=0"
-  style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem"
+  style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem; background: black"
 ></iframe>

example/src/usage.md

@@ -3,6 +3,6 @@
   loading="lazy"
   name="codepen"
   height="{height|600}"
-  style="width: 100%; border: none; border-radius: 1rem"
+  style="width: 100%; border: none; border-radius: 1rem; background: black"
   src="https://codepen.io/{user}/embed/{slug}?default-tab=result&theme-id={theme|dark}"
 ></iframe>

example.png preview.png

@@ -2,5 +2,5 @@
   loading="lazy"
   name="sandbox"
   src="https://codesandbox.io/embed/{id}?&theme={theme|dark}"
-  style="width: 100%; height: 100%; border: solid 1px #e5e7eb; aspect-ratio: 16/9; border-radius: 1rem"
+  style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem; background: black"
 ></iframe>

src/embed.rs

@@ -30,7 +30,7 @@
   }
 </style>
 
-<script>
+<script async defer>
   window.addEventListener("scroll", () => {
     const button = document.querySelector(".scroll-to-top");
     button.classList.toggle("hidden", window.scrollY < 200);

templates/bilibili.html

@@ -2,5 +2,5 @@
   loading="lazy"
   name="stackblitz"
   src="https://stackblitz.com/edit/{id}?embed=1&theme={theme|dark}&view=preview"
-  style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem"
+  style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem; background: black"
 ></iframe>

templates/codepen.html

@@ -1,8 +1,8 @@
 <iframe
   allowfullscreen
   loading="lazy"
-  name="YouTube"
+  name="youtube"
   src="https://www.youtube.com/embed/{id}"
-  style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 1rem"
+  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"
 ></iframe>