From f043123f2373993708d85df2ea9f8c2f65cab4b3 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 21 Jan 2022 21:38:50 +0800
Subject: [PATCH] Introduce the prompts in docs

---
 _posts/2019-08-08-text-and-typography.md   | 13 +++++++-
 _posts/2019-08-08-write-a-new-post.md      | 35 ++++++++++++++++++----
 _posts/2019-08-09-getting-started.md       |  3 +-
 _posts/2019-08-11-customize-the-favicon.md |  3 +-
 _posts/2021-01-03-enable-google-pv.md      |  4 ++-
 _tabs/about.md                             |  4 +--
 6 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index bc1f553..2979c90 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -76,7 +76,18 @@ Moon
 
 ## Block Quote
 
-> This line to shows the Block Quote.
+> This line shows the _block quote_.
+
+## Prompts
+
+> An example showing the `note` type prompt.
+{: .prompt-note }
+
+> An example showing the `warning` type prompt.
+{: .prompt-warning }
+
+> An example showing the `danger` type prompt.
+{: .prompt-danger }
 
 ## Tables
 
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index df46625..0caec6d 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -28,7 +28,8 @@ tags: [TAG]     # TAG names should always be lowercase
 ---
 ```
 
-> **Note**: The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
+> The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
+{: .prompt-note }
 
 ### Timezone of Date
 
@@ -131,7 +132,10 @@ Starting from _Chirpy v5.0.0_, `height` and `width` support abbreviations (`heig
 
 ### Position
 
-By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`. For example:
+By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`.
+
+> Once the position is specified, the image caption should not be added.
+{: .prompt-warning }
 
 - **Normal position**
 
@@ -156,8 +160,6 @@ By default, the image is centered, but you can specify the position by using one
   ```
   {: .nolineno}
 
-> **Limitation**: Once the position of the image is specified, the image caption should not be added.
-
 ### Shadow
 
 The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
@@ -245,6 +247,28 @@ pin: true
 ---
 ```
 
+## Prompts
+
+There are three types of prompts, `note`, `warning` and `danger`. When writing, add the class `prompt-{type}` to a blockquote:
+
+- **Note**
+  ```md
+  > Example line for prompt.
+  {: .prompt-note }
+  ```
+
+- **Warning**
+  ```md
+  > Example line for prompt.
+  {: .prompt-warning }
+  ```
+
+- **Danger**
+  ```md
+  > Example line for prompt.
+  {: .prompt-danger }
+  ```
+
 ## Code Block
 
 Markdown symbols ```` ``` ```` can easily create a code block as follows:
@@ -265,7 +289,8 @@ key: value
 ```
 ````
 
-> **Limitation**: The Jekyll style `highlight` tag is not compatible with this theme.
+> The Jekyll tag `{% highlight %}` is not compatible with this theme.
+{: .prompt-danger }
 
 ### Line Number
 
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
index b45fe62..ad0fcfd 100644
--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -36,7 +36,8 @@ And then execute:
 $ bash tools/init.sh
 ```
 
-> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
+> If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
+{: .prompt-note }
 
 The above command will:
 
diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md
index 99178a5..b4b22cb 100644
--- a/_posts/2019-08-11-customize-the-favicon.md
+++ b/_posts/2019-08-11-customize-the-favicon.md
@@ -32,6 +32,7 @@ The following table will help you understand the changes to the favicon files:
 | `*.PNG`             | ✓                                 | ✗           |
 | `*.ICO`             | ✓                                 | ✗           |
 
-> Note: ✓ means keep, ✗ means delete.
+>  ✓ means keep, ✗ means delete.
+{: .prompt-note }
 
 The next time you build the site, the favicon will be replaced with a customized edition.
diff --git a/_posts/2021-01-03-enable-google-pv.md b/_posts/2021-01-03-enable-google-pv.md
index c9883a6..b24c492 100644
--- a/_posts/2021-01-03-enable-google-pv.md
+++ b/_posts/2021-01-03-enable-google-pv.md
@@ -146,7 +146,9 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
     ```
     {: file="src/config.py"}
 
-    **Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
+    > You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`.
+    > But, for the sake of keeping it simple, we will be using the Google provided default URL.
+    {: .prompt-note }
 
 5.  From inside the src/ directory, deploy the app
 
diff --git a/_tabs/about.md b/_tabs/about.md
index b511014..8c2a815 100644
--- a/_tabs/about.md
+++ b/_tabs/about.md
@@ -4,5 +4,5 @@ icon: fas fa-info-circle
 order: 4
 ---
 
-
-> **Note**: Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page.
+> Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page.
+{: .prompt-note }