From 9c7fd78d6004e57430e40a33da9838c4a8140219 Mon Sep 17 00:00:00 2001 From: Cael Date: Mon, 12 Feb 2024 14:44:57 +0800 Subject: [PATCH] docs: add introduction to each app --- example/src/SUMMARY.md | 8 ++++---- example/src/local/announcement-banner.md | 6 +++++- example/src/local/scroll-to-top.md | 10 +++++++++- example/src/third-party/bilibili.md | 4 ++++ example/src/third-party/codepen.md | 4 ++++ example/src/third-party/codesandbox.md | 4 ++++ example/src/third-party/giscus.md | 18 ++++++++++-------- example/src/third-party/gist.md | 4 ++++ example/src/third-party/intro.md | 7 ++++--- example/src/third-party/stackblitz.md | 4 ++++ example/src/third-party/youtube.md | 4 ++++ 11 files changed, 56 insertions(+), 17 deletions(-) diff --git a/example/src/SUMMARY.md b/example/src/SUMMARY.md index 31bdf31..b472d52 100644 --- a/example/src/SUMMARY.md +++ b/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) diff --git a/example/src/local/announcement-banner.md b/example/src/local/announcement-banner.md index 4cbaafa..2de8014 100644 --- a/example/src/local/announcement-banner.md +++ b/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 diff --git a/example/src/local/scroll-to-top.md b/example/src/local/scroll-to-top.md index dbe9ef6..e888e80 100644 --- a/example/src/local/scroll-to-top.md +++ b/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 diff --git a/example/src/third-party/bilibili.md b/example/src/third-party/bilibili.md index 8cbc3d1..7c2083b 100644 --- a/example/src/third-party/bilibili.md +++ b/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 | diff --git a/example/src/third-party/codepen.md b/example/src/third-party/codepen.md index 533e17e..dc3e70f 100644 --- a/example/src/third-party/codepen.md +++ b/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 | diff --git a/example/src/third-party/codesandbox.md b/example/src/third-party/codesandbox.md index eb50d4f..d8d6402 100644 --- a/example/src/third-party/codesandbox.md +++ b/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 | diff --git a/example/src/third-party/giscus.md b/example/src/third-party/giscus.md index f5e3cb6..de65a9f 100644 --- a/example/src/third-party/giscus.md +++ b/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/). diff --git a/example/src/third-party/gist.md b/example/src/third-party/gist.md index 6e4ab4e..ced5285 100644 --- a/example/src/third-party/gist.md +++ b/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 | diff --git a/example/src/third-party/intro.md b/example/src/third-party/intro.md index c16a8ee..9d4c56a 100644 --- a/example/src/third-party/intro.md +++ b/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) diff --git a/example/src/third-party/stackblitz.md b/example/src/third-party/stackblitz.md index c242df4..c548bd5 100644 --- a/example/src/third-party/stackblitz.md +++ b/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 | diff --git a/example/src/third-party/youtube.md b/example/src/third-party/youtube.md index 619f6fb..bce4872 100644 --- a/example/src/third-party/youtube.md +++ b/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 |