docs: update gisucus and usage docs

example/src/third-party/giscus.md

@@ -39,20 +39,24 @@ giscus.theme = "light"
 giscus.lang = "en"
 ```
 
-## Good to know
+## Refuse to Connect
 
-Giscus is only supported while your app is deployed. You can't see it if you open it with **file://** protocol which is mdbook default behavior.
+Giscus will refuse to connect if you build and preview your book with **file://** protocol. The easiest solution is to use some static server so that you can preview your book with **http://** protocol.
 
-The simple way is to serve your book with a static server so that you can see the giscus by opening it with **http://** protocol. Typically, there is no problem if you deploy your book to GitHub Pages or Netlify. But if you want to see it locally, you can use below commands to serve your book.
+For exampe:
 
 **node.js installed**
 
 ```sh
 npx serve book
 ```
 
+Which will serve your book at [http://localhost:3000](http://localhost:3000).
+
 **python installed**
 
 ```sh
 python -m http.server --directory book
 ```
+
+Which will serve your book at [http://localhost:8080](http://localhost:8080).

example/src/usage.md

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

src/utils.rs

@@ -29,7 +29,7 @@ pub fn parse_options(options_str: &str) -> Vec<(String, String)> {
     let options_str = format!("<p {}/>", options_str);
     // parse the options and warn if there is an syntax error
     let doc = roxmltree::Document::parse(&options_str)
-        .expect("Failed to parse options, please check your syntax");
+        .expect("Failed to parse embed options, please check your syntax");
     let mut options = Vec::new();
     for attr in doc.root_element().attributes() {
         options.push((attr.name().to_owned(), attr.value().to_owned()));

templates/announcement-banner.html

@@ -2,7 +2,6 @@
   .announcement-banner {
     color: black;
     z-index: 150;
-    display: flex;
     position: relative;
     flex-direction: column;
     justify-content: center;
@@ -67,7 +66,7 @@
   }
 </style>
 
-<div class="announcement-banner" data-theme="{% theme|default %}" data-id="{% id %}">
+<div style="display: none" class="announcement-banner" data-theme="{% theme|default %}" data-id="{% id %}">
   {% markdown(message) %}
   <button type="button">X</button>
 </div>
@@ -78,8 +77,10 @@
   const message = banner.querySelector("p").textContent;
   const localData = JSON.parse(localStorage.getItem("mdbook-announcement-banner"));
 
-  if (localData && localData.hide === true && localData.id === id) banner.remove();
-  else {
+  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);