docs: add introduction to each app

example/src/SUMMARY.md

@@ -6,12 +6,12 @@
 - [Global Embedding](global-embedding.md)
 - [Third Party Apps](third-party/intro.md)
   - [Gist](third-party/gist.md)
-  - [Youtube](third-party/youtube.md)
   - [Giscus](third-party/giscus.md)
-  - [Bilibili](third-party/bilibili.md)
-  - [Codesandbox](third-party/codesandbox.md)
-  - [Stackblitz](third-party/stackblitz.md)
+  - [Youtube](third-party/youtube.md)
   - [Codepen](third-party/codepen.md)
+  - [Stackblitz](third-party/stackblitz.md)
+  - [Codesandbox](third-party/codesandbox.md)
+  - [Bilibili](third-party/bilibili.md)
 - [Local Apps](local/intro.md)
   - [Scroll to Top](local/scroll-to-top.md)
   - [Announcement Banner](local/announcement-banner.md)

example/src/local/announcement-banner.md

@@ -1,9 +1,13 @@
+# Announcement Banner
+
+Announcement banner allows you put important messages at the top of the page. It supports **markdown** syntax so that you can easily customize the message.
+
 ## Options
 
 | Option  | Description                                                  | Required | Default |
 | :------ | :----------------------------------------------------------- | :------- | :------ |
 | id      | Announcement id                                              | Yes      | - -     |
-| message | Announcement message, supports markdown syntax               | Yes      | - -     |
+| message | Announcement message, markdown supported                     | Yes      | - -     |
 | theme   | Supports theme: **default**, **ocean**, **forest**, **lava** | No       | default |
 
 ## Example

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

@@ -1,4 +1,12 @@
-Scroll to top button app has no options. You can use it like this:
+# Scroll to top button
+
+Scroll to top button allows users to smoothly scroll back to the top of the page.
+
+## Options
+
+Scroll to top button app has no options.
+
+## Example
 
 <!-- embed ignore begin -->
 

example/src/third-party/bilibili.md

@@ -1,3 +1,7 @@
+# Bilibili
+
+[Bilibili](https://www.bilibili.com) is a Chinese video sharing website based in Shanghai, themed around animation, comic, and games (ACG), where users can submit, view, and add commentary subtitles on videos.
+
 ## Options
 
 | Option | Description | Required | Default |

example/src/third-party/codepen.md

@@ -1,3 +1,7 @@
+# Codepen
+
+[Codepen](https://codepen.io) is a social development environment for front-end designers and developers. It's the best place to build and deploy a website, show off your work, build test cases, and find inspiration.
+
 ## Options
 
 | Option | Description   | Required | Default |

example/src/third-party/codesandbox.md

@@ -1,3 +1,7 @@
+# Codesandbox
+
+[Codesandbox](https://codesandbox.io) is an online code editor that allows you to create and share web applications. It is particularly useful for web developers who want to work on React, Vue, Angular, or any other front-end libraries.
+
 ## Options
 
 | Option | Description  | Required | Default |

example/src/third-party/giscus.md

@@ -1,3 +1,7 @@
+# Giscus
+
+[Giscus](https://giscus.app) is a comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by [utterances](https://github.com/utterance/utterances).
+
 ## Options
 
 | Option            | Description      | Required | Default |
@@ -37,20 +41,18 @@ giscus.lang = "en"
 
 ## Good to know
 
-Giscus is a comments system powered by GitHub Discussions. It's a great way to have discussions about our book. But it's only supported while your app is deployed. You can't see it if you open it with **file://** protocol.
+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.
 
-The simple way is to serve your book with a static server. For example:
+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.
 
-**python installed**
+**node.js installed**
 
 ```sh
-python -m http.server --directory book
+npx serve book
 ```
 
-**node.js installed**
+**python installed**
 
 ```sh
-npx serve book
+python -m http.server --directory book
 ```
-
-You can find more giscus configurations at [Giscus App](https://giscus.app/).

example/src/third-party/gist.md

@@ -1,3 +1,7 @@
+# Gist
+
+[Gist](https://gist.github.com) is a simple way to share snippets and pastes with others. All gists are Git repositories, so they are automatically versioned, forkable and usable from Git.
+
 ## Options
 
 | Option | Description | Required | Default |

example/src/third-party/intro.md

@@ -3,8 +3,9 @@
 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)
+- [Giscus](giscus.md)
 - [Youtube](youtube.md)
-- [Bilibili](bilibili.md)
-- [Codesandbox](codesandbox.md)
-- [Stackblitz](stackblitz.md)
 - [Codepen](codepen.md)
+- [Stackblitz](stackblitz.md)
+- [Codesandbox](codesandbox.md)
+- [Bilibili](bilibili.md)

example/src/third-party/stackblitz.md

@@ -1,3 +1,7 @@
+# Stackblitz
+
+[Stackblitz](https://stackblitz.com) is an instant fullstack web IDE for the JavaScript ecosystem. It's powered by [WebContainers](https://blog.stackblitz.com/posts/introducing-webcontainers), the first WebAssembly-based operating system which boots the Node.js environment in milliseconds, securely within your browser tab.
+
 ## Options
 
 | Option | Description  | Required | Default |

example/src/third-party/youtube.md

@@ -1,3 +1,7 @@
+# Youtube
+
+[YouTube](https://www.youtube.com) is an online video sharing and social media platform.
+
 ## Options
 
 | Option | Description | Required | Default |