feat: add more apps: bilibili, codesandbox and stackblitz

MR-Addict · Jan 10, 2024 · 781b7d4 · 781b7d4
1 parent df8f4a7
commit 781b7d4
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 15 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mdbook-embedify"
-version = "0.0.1"
+version = "0.0.2"
 edition = "2021"
 license = "MIT"
 readme = "README.md"

diff --git a/README.md b/README.md
@@ -26,10 +26,10 @@ Then you can use `embed` macro to embed an app. The syntax is like this:
 {% embed app options[] %}
 ```
 
-**options** are key-value based array seperated by space and its value must be wrapped by quotes. For example:
+**options** are key-value based array seperated by space and its value must be wrapped by **quotes**. For example:
 
 ```text
-{% embed codepen username="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}
+{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}
 ```
 
 ## 3. Examples

diff --git a/docs/index.css b/docs/index.css
@@ -105,6 +105,10 @@ pre {
   color: red;
 }
 
+iframe:not(:last-of-type) {
+  margin-bottom: 2rem;
+}
+
 @media (max-width: 600px) {
   body {
     padding: 0.5rem;

diff --git a/docs/index.html b/docs/index.html
@@ -45,7 +45,7 @@ <h2>2. Usage</h2>
           For example:
         </p>
 
-        <pre><code>{% embed codepen username="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}</code></pre>
+        <pre><code>{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}</code></pre>
 
         <p>Below is the list of supported apps and their options(<strong class="red">*</strong> means required):</p>
 
@@ -57,17 +57,29 @@ <h2>2. Usage</h2>
             </tr>
           </thead>
           <tbody>
+            <tr>
+              <td>gist</td>
+              <td>id<strong class="red">*</strong></td>
+            </tr>
             <tr>
               <td>youtube</td>
               <td>id<strong class="red">*</strong></td>
             </tr>
             <tr>
-              <td>gist</td>
+              <td>bilibili</td>
               <td>id<strong class="red">*</strong></td>
             </tr>
+            <tr>
+              <td>codesandbox</td>
+              <td>id<strong class="red">*</strong>, theme(dark)</td>
+            </tr>
+            <tr>
+              <td>stackblitz</td>
+              <td>id<strong class="red">*</strong>, theme(dark)</td>
+            </tr>
             <tr>
               <td>codepen</td>
-              <td>username<strong class="red">*</strong>, slug<strong class="red">*</strong>, height, theme</td>
+              <td>user<strong class="red">*</strong>, slug<strong class="red">*</strong>, theme(dark), height(600)</td>
             </tr>
           </tbody>
         </table>
@@ -76,13 +88,13 @@ <h2>2. Usage</h2>
       <section>
         <h2>3. Examples</h2>
 
-        <h3>3.1 Gist</h3>
+        <h3>Gist</h3>
 
         <pre><code>{% embed gist id="76cf171d1bdd7da41d4ca96b908eb57a" %}</code></pre>
 
         <script src="https://gist.github.com/MR-Addict/76cf171d1bdd7da41d4ca96b908eb57a.js"></script>
 
-        <h3>3.2 Youtube</h3>
+        <h3>Youtube</h3>
 
         <pre><code>{% embed youtube id="EngW7tLk6R8" %}</code></pre>
 
@@ -93,9 +105,44 @@ <h3>3.2 Youtube</h3>
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         ></iframe>
 
-        <h3>3.3 Codepen</h3>
+        <h3>Bilibili</h3>
+
+        <pre><code>{% embed bilibili id="BV1uT4y1P7CX" danmaku="0" %}</code></pre>
+
+        <iframe
+          allowfullscreen
+          name="Bilibili"
+          src="https://player.bilibili.com/player.html?bvid=BV1uT4y1P7CX&danmaku=0"
+          style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 0.375rem"
+        ></iframe>
+
+        <h3>Codesandbox</h3>
+
+        <pre><code>{% embed codesandbox id="ke8wx" theme="dark" %}</code></pre>
+
+        <iframe
+          loading="lazy"
+          name="Sandbox"
+          src="https://codesandbox.io/embed/ke8wx?&theme=light"
+          style="width: 100%; height: 100%; border: solid 1px #e5e7eb; aspect-ratio: 16/9; border-radius: 0.375rem"
+        ></iframe>
+
+        <h3>Stackblitz</h3>
+
+        <pre><code>{% embed stackblitz id="vitejs-vite-y8mdxg" theme="light" %}</code></pre>
+
+        <iframe
+          loading="lazy"
+          name="Stackblitz"
+          src="https://stackblitz.com/edit/vitejs-vite-y8mdxg?embed=1&theme=light&view=preview"
+          style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 0.375rem"
+        ></iframe>
+      </section>
+
+      <section>
+        <h3>Codepen</h3>
 
-        <pre><code>{% embed codepen username="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}</code></pre>
+        <pre><code>{% embed codepen user="MR-Addict" slug="NWBOqKw" height="600" theme="dark" %}</code></pre>
 
         <iframe
           height="600"

diff --git a/templates/bilibili.html b/templates/bilibili.html
@@ -0,0 +1,7 @@
+<iframe
+  allowfullscreen
+  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: 0.375rem"
+></iframe>
diff --git a/templates/codepen.html b/templates/codepen.html
@@ -1,8 +1,8 @@
 <iframe
-  title="Codepen"
-  height="{height|600}"
   allowfullscreen
-  allowtransparency
+  loading="lazy"
+  name="Codepen"
+  height="{height|600}"
   style="width: 100%; border: none; border-radius: 0.375rem"
-  src="https://codepen.io/{username}/embed/{slug}?default-tab=result&theme-id={theme|dark}"
+  src="https://codepen.io/{user}/embed/{slug}?default-tab=result&theme-id={theme|dark}"
 ></iframe>
diff --git a/templates/codesandbox.html b/templates/codesandbox.html
@@ -0,0 +1,6 @@
+<iframe
+  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: 0.375rem"
+></iframe>
diff --git a/templates/stackblitz.html b/templates/stackblitz.html
@@ -0,0 +1,6 @@
+<iframe
+  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: 0.375rem"
+></iframe>
diff --git a/templates/youtube.html b/templates/youtube.html
@@ -1,5 +1,7 @@
 <iframe
   allowfullscreen
+  loading="lazy"
+  name="YouTube"
   src="https://www.youtube.com/embed/{id}"
   style="width: 100%; height: 100%; border: none; aspect-ratio: 16/9; border-radius: 0.375rem"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"