Merge branch 'feature/prompt-blockquote'

2022-01-23 02:00:48 +08:00 · 2022-01-23 02:00:48 +08:00 · 7b0e9a6803
commit 7b0e9a6803
parent 4845f6ef14 f043123f23
14 changed files with 205 additions and 45 deletions
--- 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 }}
--- 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

--- 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

--- 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:

--- 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.
--- 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

--- 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 */
--- 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;
+    }
+  }
+}
--- 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 {
--- 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; }
  }
--- 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 */
--- 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 */
--- 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 */
--- 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 }