feat: allow giscus dynamatically update theme based on book theme

Author: MR-Addict

docs/book.toml

@@ -60,6 +60,6 @@ giscus.repo-id = "R_kgDOLCxX0Q"
 giscus.category = "General"
 giscus.category-id = "DIC_kwDOLCxX0c4CdGx-"
 giscus.reactions-enabled = "1"
-giscus.theme = "light"
+giscus.theme = "book"
 giscus.lang = "en"
 giscus.loading = "eager"

docs/src/more-apps.md

@@ -6,9 +6,9 @@ In this section, I will show you how to add more apps to this preprocessor.
 
 You may have some other apps that preprocessor doesn't support yet. However, it's very easy to add a new app based on project custom template engine.
 
-What we need to do is put a new app template in the `templates` folder. The template file name should be the app name ended with `.html`.
+What we need to do is put a new app template in the **templates** folder. The template file name should be the app name ended with **.html**.
 
-For example we want to add a new app called `youtube`, then we could create a `youtube.html` under `templates` folder.
+For example we want to add a new app called **youtube**, then we could create a **youtube.html** under **templates** folder.
 
 We know that we can use an iframe to embed a youtube video. Template file could be like this:
 
@@ -25,9 +25,9 @@ We know that we can use an iframe to embed a youtube video. Template file could
 
 > 💥Attention
 >
-> You can even add `style` and `js` content to the template file. But the `style` and `js` content should be put in the `style` and `js` blocks.
+> You can even add **style** and **js** content to the template file. But the style and js content should be put in the style and js **blocks**.
 
-However, we want video `id` and `loading` strategy to be dynamic and loading strategy has default `lazy` value. So we can replace them with placeholders like this:
+However, we want video **id** and **loading** strategy to be dynamic and loading strategy has default **lazy** value. So we can replace them with placeholders like this:
 
 ```html
 <iframe
@@ -40,19 +40,19 @@ However, we want video `id` and `loading` strategy to be dynamic and loading str
 ></iframe>
 ```
 
-The placeholder syntax is similar to a **function call** in programming languages, which is the combination of function `name` and `argument` wrapped by `{%` and `%}`.
+The placeholder syntax is similar to a **function call** in programming languages, which is the combination of function **name** and **argument** wrapped by **{%** and **%}**.
 
 **Function name**
 
-The preprocessor reconginzes two function names, `raw` and `markdown`. Which `raw` will keep inner value as it is, `markdown` will treat the inner value as markdown content and render it to be html.
+The preprocessor reconginzes two function names, **raw** and **markdown**. Which raw will keep inner value as it is, markdown will treat the inner value as markdown content and render it to be html.
 
 **Function argument**
 
-The inner value is key follwed by a default value in the form of `key=default_value`. If the key is not provided, the default value will be used.
+The inner value is key follwed by a default value in the form of **key=default_value**. If the key is not provided, the default value will be used.
 
-So `raw(id)` means the placeholder will be replaced by the value of `id` key and id is not optional because it doesn't have a default value.
+So **raw(id)** means the placeholder will be replaced by the value of **id** key and id is not optional because it doesn't have a default value.
 
-`raw(loading=lazy)` means the placeholder will be replaced by the value of `loading` key. If user doesn't provide the value, the default value `lazy` will be used. And means loading is optional.
+**raw(loading=lazy)** means the placeholder will be replaced by the value of **loading** key. If user doesn't provide the value, the default value **lazy** will be used. And means loading is optional.
 
 ## Build the project
 

docs/src/third-party/bilibili.md

@@ -4,10 +4,10 @@
 
 ## Options
 
-| Option  | Description  | Required | Default |
-| :------ | :----------- | :------- | :------ |
-| id      | Video ID     | Yes      | - -     |
-| loading | Loading type | No       | lazy    |
+| Option  | Description                     | Required | Default |
+| :------ | :------------------------------ | :------- | :------ |
+| id      | Video ID                        | Yes      | - -     |
+| loading | Supports **lazy** and **eager** | No       | lazy    |
 
 ## Example
 

docs/src/third-party/codepen.md

@@ -4,13 +4,13 @@
 
 ## Options
 
-| 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    |
+| Option  | Description                     | Required | Default |
+| :------ | :------------------------------ | :------- | :------ |
+| user    | username                        | Yes      | - -     |
+| slug    | Project slug                    | Yes      | - -     |
+| height  | Iframe height                   | No       | 600     |
+| theme   | Iframe theme                    | No       | dark    |
+| loading | Supports **lazy** and **eager** | No       | lazy    |
 
 ## Example
 

docs/src/third-party/codesandbox.md

@@ -4,11 +4,11 @@
 
 ## Options
 
-| Option  | Description  | Required | Default |
-| :------ | :----------- | :------- | :------ |
-| id      | Project ID   | Yes      | - -     |
-| theme   | Iframe theme | No       | dark    |
-| loading | Loading type | No       | lazy    |
+| Option  | Description                     | Required | Default |
+| :------ | :------------------------------ | :------- | :------ |
+| id      | Project ID                      | Yes      | - -     |
+| theme   | Iframe theme                    | No       | dark    |
+| loading | Supports **lazy** and **eager** | No       | lazy    |
 
 ## Example
 

docs/src/third-party/giscus.md

@@ -4,23 +4,23 @@
 
 ## Options
 
-| Option            | Description      | Required | Default |
-| :---------------- | :--------------- | :------- | :------ |
-| repo              | Repository       | Yes      | - -     |
-| repo-id           | Repository ID    | Yes      | - -     |
-| category          | Category         | Yes      | - -     |
-| category-id       | Category ID      | Yes      | - -     |
-| reactions-enabled | Enable reactions | No       | 1       |
-| theme             | Theme            | No       | light   |
-| lang              | Language         | No       | en      |
-| loading           | Loading type     | No       | lazy    |
+| Option            | Description                              | Required | Default |
+| :---------------- | :--------------------------------------- | :------- | :------ |
+| repo              | Repository                               | Yes      | - -     |
+| repo-id           | Repository ID                            | Yes      | - -     |
+| category          | Category                                 | Yes      | - -     |
+| category-id       | Category ID                              | Yes      | - -     |
+| reactions-enabled | Enable reactions                         | No       | 1       |
+| theme             | Supports **book**,**light** and **dark** | No       | book    |
+| lang              | Language                                 | No       | en      |
+| loading           | Supports **lazy** and **eager**          | 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" loading="eager" %}
+{% embed giscus repo="MR-Addict/mdbook-embedify" repo-id="R_kgDOLCxX0Q" category="General" category-id="DIC_kwDOLCxX0c4CdGx-" theme="book" loading="eager" %}
 ```
 
 <!-- embed ignore end -->
@@ -36,7 +36,7 @@ giscus.repo-id = "R_kgDOLCxX0Q"
 giscus.category = "General"
 giscus.category-id = "DIC_kwDOLCxX0c4CdGx-"
 giscus.reactions-enabled = "1"
-giscus.theme = "light"
+giscus.theme = "book"
 giscus.lang = "en"
 giscus.loading = "eager"
 ```
@@ -50,15 +50,15 @@ For exampe:
 **node.js installed**
 
 ```sh
-npx serve book
+npx serve book -p 3000
 ```
 
 Which will serve your book at [http://localhost:3000](http://localhost:3000).
 
 **python installed**
 
 ```sh
-python -m http.server --directory book
+python -m http.server --directory book 8080
 ```
 
 Which will serve your book at [http://localhost:8080](http://localhost:8080).

docs/src/third-party/index.md

@@ -3,6 +3,7 @@
 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)
+- [Vimeo](vimeo.md)
 - [Giscus](giscus.md)
 - [Youtube](youtube.md)
 - [Codepen](codepen.md)

docs/src/third-party/stackblitz.md

@@ -4,11 +4,11 @@
 
 ## Options
 
-| Option  | Description  | Required | Default |
-| :------ | :----------- | :------- | :------ |
-| id      | Project ID   | Yes      | - -     |
-| theme   | Iframe theme | No       | dark    |
-| loading | Loading type | No       | lazy    |
+| Option  | Description                     | Required | Default |
+| :------ | :------------------------------ | :------- | :------ |
+| id      | Project ID                      | Yes      | - -     |
+| theme   | Iframe theme                    | No       | dark    |
+| loading | Supports **lazy** and **eager** | No       | lazy    |
 
 ## Example
 

docs/src/third-party/vimeo.md

@@ -4,10 +4,10 @@ Vimeo is a video hosting platform that allows you to upload and share videos.
 
 ## Options
 
-| Option  | Description  | Required | Default |
-| :------ | :----------- | :------- | :------ |
-| id      | Video ID     | Yes      | - -     |
-| loading | Loading type | No       | lazy    |
+| Option  | Description                     | Required | Default |
+| :------ | :------------------------------ | :------- | :------ |
+| id      | Video ID                        | Yes      | - -     |
+| loading | Supports **lazy** and **eager** | No       | lazy    |
 
 ## Example
 

docs/src/third-party/youtube.md

@@ -4,10 +4,10 @@
 
 ## Options
 
-| Option  | Description  | Required | Default |
-| :------ | :----------- | :------- | :------ |
-| id      | Video ID     | Yes      | - -     |
-| loading | Loading type | No       | lazy    |
+| Option  | Description                     | Required | Default |
+| :------ | :------------------------------ | :------- | :------ |
+| id      | Video ID                        | Yes      | - -     |
+| loading | Supports **lazy** and **eager** | No       | lazy    |
 
 ## Example
 

templates/announcement-banner.html

@@ -86,30 +86,25 @@
     background-color: transparent;
   }
 </style>
-
 <div style="display: none" data-id="{% raw(id) %}" class="announcement-banner" data-theme="{% raw(theme=default) %}">
   {% markdown(message) %}
   <button type="button">X</button>
 </div>
-
 <script>
-  const banner = document.querySelector(".announcement-banner");
-  const id = banner.getAttribute("data-id");
-  const message = banner.querySelector("p").textContent;
-  const localData = JSON.parse(localStorage.getItem("mdbook-announcement-banner"));
-
-  if (!localData || localData.id !== id || localData.hide !== true) {
-    // update banner display style to be flex
-    banner.style.display = "flex";
-
-    // move banner before page class element slibling
-    const page = document.querySelector(".page");
-    page.parentNode.insertBefore(banner, page);
-
-    // add event listener to close button
-    banner.querySelector("button").addEventListener("click", () => {
-      banner.remove();
-      localStorage.setItem("mdbook-announcement-banner", JSON.stringify({ id, hide: true, message }));
-    });
-  }
+  (() => {
+    const banner = document.querySelector(".announcement-banner");
+    const id = banner.getAttribute("data-id");
+    const message = banner.querySelector("p").textContent;
+    const localData = JSON.parse(localStorage.getItem("mdbook-announcement-banner"));
+
+    if (!localData || localData.id !== id || localData.hide !== true) {
+      banner.style.display = "flex";
+      const page = document.querySelector(".page");
+      page.parentNode.insertBefore(banner, page);
+      banner.querySelector("button").addEventListener("click", () => {
+        banner.remove();
+        localStorage.setItem("mdbook-announcement-banner", JSON.stringify({ id, hide: true, message }));
+      });
+    }
+  })();
 </script>

templates/footer.html

@@ -12,5 +12,4 @@
     margin: 0;
   }
 </style>
-
 <footer>{% markdown(message) %}</footer>

templates/giscus.html

@@ -3,7 +3,6 @@
     margin-top: 6rem;
   }
 </style>
-
 <script
   src="{% raw(src=https://giscus.app/client.js) %}"
   data-repo="{% raw(repo) %}"
@@ -15,9 +14,25 @@
   data-reactions-enabled="{% raw(reactions-enabled=1) %}"
   data-emit-metadata="0"
   data-input-position="bottom"
-  data-theme="{% raw(theme=light) %}"
+  data-theme="{% raw(theme=book) %}"
   data-lang="{% raw(lang=en) %}"
   data-loading="{% raw(loading=lazy) %}"
   crossorigin="anonymous"
   async
 ></script>
+<script>
+  (() => {
+    const giscusScript = document.querySelector("script[data-repo][data-repo-id]");
+    if (giscusScript?.getAttribute("data-theme") !== "book") return;
+    const mapTheme = (theme) => (theme === "light" || theme === "rust" ? "light" : "dark");
+    const bookTheme = localStorage.getItem("mdbook-theme") || html.getAttribute("class");
+    giscusScript.setAttribute("data-theme", mapTheme(bookTheme));
+    document.querySelectorAll("button[role='menuitem'].theme").forEach((btn) => {
+      btn.addEventListener("click", (event) => {
+        theme = mapTheme(event.target.id);
+        const iframe = document.querySelector("iframe.giscus-frame");
+        if (iframe) iframe.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, "*");
+      });
+    });
+  })();
+</script>

templates/scroll-to-top.html

@@ -31,11 +31,9 @@
     }
   }
 </style>
-
 <button type="button" aria-label="scroll-to-top" class="scroll-to-top hidden" onclick="scrollToTop()">
   <i class="fa fa-angle-up"></i>
 </button>
-
 <script>
   const scrollToTop = () => window.scroll({ top: 0, behavior: "smooth" });
   window.addEventListener("scroll", () => {