Add blockquote prompts (resolve #489)

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

_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 */

_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;
+    }
+  }
+}

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

_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; }
   }

_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 */

_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 */

_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 */