docs: add video embedding instructions to the theme guide

pnpm-lock.yaml

@@ -4028,8 +4028,8 @@ packages:
       typescript: ^4.9.4 || ^5.0.2
       zod: ^3
 
-  zod@3.25.17:
+  zod@3.25.20:
-    resolution: {integrity: sha512-8hQzQ/kMOIFbwOgPrm9Sf9rtFHpFUMy4HvN0yEB0spw14aYi0uT5xG5CE2DB9cd51GWNsz+DNO7se1kztHMKnw==}
+    resolution: {integrity: sha512-z03fqpTMDF1G02VLKUMt6vyACE7rNWkh3gpXVHgPTw28NPtDFRGvcpTtPwn2kMKtQ0idtYJUTxchytmnqYswcw==}
 
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
@@ -4194,7 +4194,7 @@ snapshots:
     dependencies:
       sitemap: 8.0.0
       stream-replace-string: 2.0.0
-      zod: 3.25.17
+      zod: 3.25.20
 
   '@astrojs/telemetry@3.2.1':
     dependencies:
@@ -5527,7 +5527,7 @@ snapshots:
   astro-robots-txt@1.0.0:
     dependencies:
       valid-filename: 4.0.0
-      zod: 3.25.17
+      zod: 3.25.20
 
   astro@5.7.14(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0):
     dependencies:
@@ -5589,9 +5589,9 @@ snapshots:
       xxhash-wasm: 1.1.0
       yargs-parser: 21.1.1
       yocto-spinner: 0.2.3
-      zod: 3.25.17
+      zod: 3.25.20
-      zod-to-json-schema: 3.24.5(zod@3.25.17)
+      zod-to-json-schema: 3.24.5(zod@3.25.20)
-      zod-to-ts: 1.2.0(typescript@5.8.3)(zod@3.25.17)
+      zod-to-ts: 1.2.0(typescript@5.8.3)(zod@3.25.20)
     optionalDependencies:
       sharp: 0.33.5
     transitivePeerDependencies:
@@ -8797,15 +8797,15 @@ snapshots:
 
   yoctocolors@2.1.1: {}
 
-  zod-to-json-schema@3.24.5(zod@3.25.17):
+  zod-to-json-schema@3.24.5(zod@3.25.20):
     dependencies:
-      zod: 3.25.17
+      zod: 3.25.20
 
-  zod-to-ts@1.2.0(typescript@5.8.3)(zod@3.25.17):
+  zod-to-ts@1.2.0(typescript@5.8.3)(zod@3.25.20):
     dependencies:
       typescript: 5.8.3
-      zod: 3.25.17
+      zod: 3.25.20
 
-  zod@3.25.17: {}
+  zod@3.25.20: {}
 
   zwitch@2.0.4: {}

src/content/posts/guides/Markdown Extended Features-en.md

@@ -30,7 +30,7 @@ To create automatic figure captions, use the standard Markdown image syntax `![a
 
 ## Github Repository Cards
 
-To create a Github repository card, use the double colon syntax `::github{repo="owner/repo"}`. Repository data is fetched from the GitHub API after the page loads.
+To create a Github repository card, use the double colon syntax `::github{repo="owner/repo"}`. Repository data is fetched in real-time from the GitHub API after the page loads.
 
 ### Syntax
 
@@ -83,3 +83,23 @@ Advises about risks or negative outcomes of certain actions.
 :::note[YOUR CUSTOM TITLE]
 This is a note with a custom title.
 :::
+
+## Videos
+
+To embed videos, copy the embed code from YouTube or other video platforms and paste it into your markdown file. You don't need to keep the `width` and `height` parameters.
+
+### Syntax
+
+```html
+<!-- Youtube -->
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<!-- Bilibili -->
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+```
+
+### Output
+
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

src/content/posts/guides/Markdown Extended Features-es.md

@@ -30,7 +30,7 @@ Para crear leyendas automáticas para figuras, utilice la sintaxis estándar de
 
 ## Tarjetas de Repositorios de Github
 
-Para crear una tarjeta de repositorio de Github, utilice la sintaxis de doble dos puntos `::github{repo="owner/repo"}`. Los datos del repositorio se obtienen de la API de GitHub después de que la página se carga.
+Para crear una tarjeta de repositorio de Github, utilice la sintaxis de doble dos puntos `::github{repo="owner/repo"}`. Los datos del repositorio se obtienen en tiempo real de la API de GitHub después de que la página se carga.
 
 ### Sintaxis
 
@@ -83,3 +83,23 @@ Advierte sobre riesgos o resultados negativos de ciertas acciones.
 :::note[TÍTULO PERSONALIZADO]
 Esta es una nota con un título personalizado.
 :::
+
+## Videos
+
+Para incrustar videos, copie el código de inserción de YouTube u otras plataformas de video y péguelo en su archivo markdown. No necesita mantener los parámetros `width` y `height`.
+
+### Sintaxis
+
+```html
+<!-- Youtube -->
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<!-- Bilibili -->
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+```
+
+### Resultado
+
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

src/content/posts/guides/Markdown Extended Features-ja.md

@@ -30,7 +30,7 @@ abbrlink: markdown-extended-features
 
 ## Githubリポジトリカード
 
-二重コロン構文 `::github{repo="owner/repo"}` を使用すると、Githubリポジトリカードを作成できます。ページの読み込み後、GitHub APIからリポジトリデータが取得されます。
+二重コロン構文 `::github{repo="owner/repo"}` を使用すると、Githubリポジトリカードを作成できます。ページの読み込み後、GitHub APIからリアルタイムでリポジトリデータが取得されます。
 
 ### 構文
 
@@ -83,3 +83,23 @@ GitHub構文 `> [!TYPE]` または三重コロン構文 `:::type` を使用し
 :::note[カスタムタイトル]
 カスタムタイトルのノート。
 :::
+
+## 動画
+
+YouTubeや他の動画プラットフォームから埋め込みコードを取得し、markdownファイルに貼り付けることで、動画を作成できます。`width`と`height`パラメータを保持する必要はありません。
+
+### 構文
+
+```html
+<!-- Youtube -->
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<!-- Bilibili -->
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+```
+
+### 効果
+
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

src/content/posts/guides/Markdown Extended Features-ru.md

@@ -30,7 +30,7 @@ abbrlink: markdown-extended-features
 
 ## Карточки репозиториев Github
 
-Для создания карточки репозитория Github используйте синтаксис с двойным двоеточием `::github{repo="owner/repo"}`. Данные репозитория загружаются из API GitHub после загрузки страницы.
+Для создания карточки репозитория Github используйте синтаксис с двойным двоеточием `::github{repo="owner/repo"}`. Данные репозитория в режиме реального времени загружаются из API GitHub после загрузки страницы.
 
 ### Синтаксис
 
@@ -83,3 +83,23 @@ abbrlink: markdown-extended-features
 :::note[ПОЛЬЗОВАТЕЛЬСКИЙ ЗАГОЛОВОК]
 Это примечание с пользовательским заголовком.
 :::
+
+## Видео
+
+Для добавления видео скопируйте код для встраивания с YouTube или другой видеоплатформы и вставьте его в markdown файл. Не нужно сохранять параметры `width` и `height`.
+
+### Синтаксис
+
+```html
+<!-- Youtube -->
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<!-- Bilibili -->
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+```
+
+### Результат
+
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

src/content/posts/guides/Markdown Extended Features-zh-tw.md

@@ -30,7 +30,7 @@ abbrlink: markdown-extended-features
 
 ## Github 倉庫卡片
 
-使用雙冒號語法 `::github{repo="owner/repo"}`，即可創建 Github 倉庫卡片。在頁面載入後，從 GitHub API 中獲取倉庫數據。
+使用雙冒號語法 `::github{repo="owner/repo"}`，即可創建 Github 倉庫卡片。在頁面載入後，從 GitHub API 中即時獲取倉庫數據。
 
 ### 語法
 
@@ -83,3 +83,23 @@ abbrlink: markdown-extended-features
 :::note[自定義標題]
 自定義標題的提示塊。
 :::
+
+## 視頻
+
+從 YouTube 或其它視頻平台獲取嵌入代碼，並粘貼至 markdown 文件中，即可創建視頻。不需要保留 `width` 和 `height` 參數。
+
+### 語法
+
+```html
+<!-- Youtube -->
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<!-- Bilibili -->
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+```
+
+### 效果
+
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

src/content/posts/guides/Markdown Extended Features-zh.md

@@ -30,7 +30,7 @@ abbrlink: markdown-extended-features
 
 ## Github 仓库卡片
 
-使用双冒号语法 `::github{repo="owner/repo"}`，即可创建 Github 仓库卡片。在页面加载后，从 GitHub API 中获取仓库数据。
+使用双冒号语法 `::github{repo="owner/repo"}`，即可创建 Github 仓库卡片。在页面加载后，从 GitHub API 中实时获取仓库数据。
 
 ### 语法
 
@@ -84,6 +84,26 @@ abbrlink: markdown-extended-features
 自定义标题的提示块。
 :::
 
+## 视频
+
+从 YouTube 或其它视频平台获取嵌入代码，并粘贴至 markdown 文件中，即可创建视频。不需要保留 `width` 和 `height` 参数。
+
+### 语法
+
+```html
+<!-- Youtube -->
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<!-- Bilibili -->
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+```
+
+### 效果
+
+<iframe src="https://www.youtube.com/embed/9pP0pIgP2kE?si=Rlk4C4ltaVPHXZ80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=930327443&bvid=BV1sK4y1Z7KG&cid=329802177&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+
 <!-- <details>
   <summary>
     我有钥匙却无门，有空间却无房间。你能进入却无法离开。我是什么？

src/styles/extend.css

@@ -120,11 +120,24 @@
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+/* Fix KaTeX Overflow with Hidden Scrollbar >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+.katex-display {
+  --at-apply: 'my-6 overflow-x-auto overflow-y-hidden scrollbar-hidden';
+}
+.katex-display::-webkit-scrollbar {
+  display: none;
+}
+
 /* Video */
-/* iframe {
+iframe {
-  --at-apply: 'mb-4 w-full aspect-video';
+  --at-apply: 'my-6 aspect-video w-full';
-} */
+}
+:is(h1, h2, h3, h4, h5, h6, iframe) + iframe {
+  --at-apply: 'mt-4';
+}
+iframe:has(+ iframe) {
+  --at-apply: 'mb-4';
+}
 
 /* :where(details) {
   --at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';

src/styles/global.css

@@ -19,14 +19,6 @@ body::selection {
   --at-apply: 'bg-highlight';
 }
 
-/* Fix KaTeX Overflow with Hidden Scrollbar */
-.katex-display {
-  --at-apply: 'my-6 overflow-x-auto overflow-y-hidden scrollbar-hidden';
-}
-.katex-display::-webkit-scrollbar {
-  display: none;
-}
-
 /* Heading Anchor Link */
 .heading-anchor-link {
   --at-apply: 'inline-block translate-y-0.1em';