From ca181422a696dc90c9da295100e011bfc116e620 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 21 Jan 2022 17:46:01 +0800
Subject: [PATCH 1/2] Add blockquote prompts (resolve #489)

---
 _includes/refactor-content.html    | 48 +++++++++++++++++
 _sass/addon/commons.scss           | 84 +++++++++++++++++++++---------
 _sass/addon/module.scss            | 23 ++++++--
 _sass/addon/syntax.scss            |  5 ++
 _sass/colors/dark-syntax.scss      |  4 ++
 _sass/colors/dark-typography.scss  |  9 +++-
 _sass/colors/light-syntax.scss     |  6 ++-
 _sass/colors/light-typography.scss |  9 +++-
 8 files changed, 154 insertions(+), 34 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index fefaeba..3c07e9a 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -225,6 +225,54 @@
 
 {% assign _content = _heading_content %}
 
+<!-- Wrap prompt element of blockquote with the <div> tag -->
+
+{% assign blockquote_start = '<blockquote class=' %}
+{% assign blockquote_end = '</blockquote>' %}
+{% assign cls_prefix = 'prompt-' %}
+
+{% if _content contains blockquote_start %}
+
+  {% assign _prompt_content = nil %}
+  {% assign _prompt_snippets = _content | split: blockquote_start %}
+
+  {% for _snippet in _prompt_snippets %}
+
+    {% if forloop.first %}
+      {% assign _prompt_content =  _snippet %}
+      {% continue %}
+    {% endif %}
+
+    {% assign left = _snippet | split: blockquote_end | first %}
+    {% assign right = _snippet | slice: left.size, _snippet.size %}
+
+    {% assign cls_str = left | split: '>' | first %}
+    {% assign cls_array = cls_str | remove: '"' | split: ' ' %}
+    {% assign is_prompt = false %}
+
+    {% for cls in cls_array %}
+      {% if cls contains cls_prefix %}
+        {% assign is_prompt = true %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+
+    {% unless is_prompt %}
+      {% assign _prompt_content = _prompt_content | append: blockquote_start | append: _snippet %}
+      {% continue %}
+    {% endunless %}
+
+    {% assign left = left | slice: cls_str.size, left.size %}
+    {% assign left = cls_str | append: '><div' | append: left | append: '</div>' %}
+
+    {% assign _prompt_content = _prompt_content | append: blockquote_start | append: left | append: right %}
+
+  {% endfor %}
+
+  {% assign _content = _prompt_content %}
+
+{% endif %}
+
 <!-- return -->
 
 {{ _content }}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index da27ff1..e78a44a 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -104,6 +104,30 @@ blockquote {
   border-left: 5px solid var(--blockquote-border-color);
   padding-left: 1rem;
   color: var(--blockquote-text-color);
+
+  &[class^="prompt-"] {
+    display: flex;
+    border-left: 0;
+    border-radius: 6px;
+    padding: 0.75rem 1rem;
+
+    &::before {
+      margin-right: 0.8rem;
+      font-family: "Font Awesome 5 Free";
+      text-align: center;
+      width: 1.25rem;
+    }
+
+    p:last-child {
+      margin-bottom: 0rem;
+    }
+  }
+
+  @include prompt("note", "\f0eb", 400);
+
+  @include prompt("warning", "\f06a");
+
+  @include prompt("danger", "\f071");
 }
 
 kbd {
@@ -1142,32 +1166,6 @@ $sidebar-display: "sidebar-display";
 
   $footer-height: $footer-height-mobile; // overwrite
 
-  #main > div.row:first-child > div:first-child {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
-  }
-
-  #core-wrapper {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
-
-    h1 {
-      margin-top: 2.2rem;
-      font-size: 1.75rem;
-    }
-  }
-
-  #avatar > a {
-    width: 5rem;
-    height: 5rem;
-  }
-
-  .site-subtitle {
-    @include ml-mr(1.8rem);
-  }
-
-  #main-wrapper {
-    padding-bottom: $footer-height;
-  }
-
   footer {
     height: $footer-height;
 
@@ -1186,6 +1184,40 @@ $sidebar-display: "sidebar-display";
     }
   }
 
+  #main > div.row:first-child > div:first-child {
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
+  }
+
+  #core-wrapper {
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+
+    h1 {
+      margin-top: 2.2rem;
+      font-size: 1.75rem;
+    }
+
+    .post-content {
+      > blockquote[class^=prompt-] {
+        @include ml-mr(-1.25rem);
+        border-radius: 0;
+      }
+    }
+
+  }
+
+  #avatar > a {
+    width: 5rem;
+    height: 5rem;
+  }
+
+  .site-subtitle {
+    @include ml-mr(1.8rem);
+  }
+
+  #main-wrapper {
+    padding-bottom: $footer-height;
+  }
+
 }
 
 /* hide sidebar and panel */
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index f7ad4c1..b7f775a 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -104,17 +104,17 @@
   }
 }
 
+%sidebar-links {
+  color: rgba(117, 117, 117, 0.9);
+  user-select: none;
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
   text-decoration: none;
 }
 
-%sidebar-links {
-  color: rgba(117, 117, 117, 0.9);
-  user-select: none;
-}
-
 @mixin ml-mr($value) {
   margin-left: $value;
   margin-right: $value;
@@ -142,3 +142,16 @@
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
 }
+
+@mixin prompt($type, $fw-icon, $icon-weight: 900) {
+  &.prompt-#{$type} {
+    background-color: var(--prompt-#{$type}-bg);
+    color: var(--prompt-text-color);
+
+    &::before {
+      content: $fw-icon;
+      color: var(--prompt-#{$type}-icon-color);
+      font-weight: $icon-weight;
+    }
+  }
+}
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 6ace78d..c4d607a 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -108,6 +108,11 @@ code {
     padding: 3px 5px;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
+
+    blockquote[class^="prompt-"] & {
+      background-color: var(--prompt-code-bg);
+      color: var(--prompt-code-text-color);
+    }
   }
 
   a > &.highlighter-rouge {
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
index fb7c52a..cb7423c 100644
--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -79,6 +79,10 @@
   --code-header-icon-color: rgb(86 86 86);
   --clipboard-checked-color: #2bcc2b;
 
+  /* the code of prompts */
+  --prompt-code-bg: rgb(38 38 38 / 47%);
+  --prompt-code-text-color: var(--highlighter-rouge-color);
+
   .highlight {
     .gp { color: #818c96; }
   }
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index 0eb0932..e7d6e2a 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -69,6 +69,13 @@
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
+  --prompt-text-color: rgb(216 212 212 / 75%);
+  --prompt-note-bg: rgba(77, 187, 95, 0.2);
+  --prompt-note-icon-color: rgb(5 223 5 / 68%);
+  --prompt-warning-bg: rgb(90 69 3 / 95%);
+  --prompt-warning-icon-color: rgb(255 165 0 / 80%);
+  --prompt-danger-bg: rgb(86 28 8 / 80%);
+  --prompt-danger-icon-color: rgb(255 0 0 / 60%);
 
   /* tags */
   --tag-border: rgb(59, 79, 88);
@@ -145,4 +152,4 @@
     color-scheme: none;
   }
 
-} // dark-scheme
+} /* dark-scheme */
diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss
index e8f1e29..df5b24d 100644
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@@ -76,4 +76,8 @@
   --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
-} // light-syntax
+  /* the code of prompts */
+  --prompt-code-bg: rgb(219 217 217 / 35%);
+  --prompt-code-text-color: rgb(78 78 84);
+
+} /* light-syntax */
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 3cf4231..1031ab5 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -68,6 +68,13 @@
   --kbd-wrap-color: #bdbdbd;
   --kbd-text-color: var(--text-color);
   --kbd-bg-color: white;
+  --prompt-text-color: rgb(70 70 70 / 90%);
+  --prompt-note-bg: rgb(123 247 144 / 20%);
+  --prompt-note-icon-color: green;
+  --prompt-warning-bg: rgb(255 243 205);
+  --prompt-warning-icon-color: rgb(215 138 24);
+  --prompt-danger-bg: rgb(248 215 218 / 56%);
+  --prompt-danger-icon-color: #b31d1d;
 
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);
@@ -78,4 +85,4 @@
   --timeline-node-bg: #c2c6cc;
   --timeline-year-dot-color: #ffffff;
 
-} // light-scheme
+} /* light-scheme */

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 2/2] 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 }