Adds Admonition with additional shortcodes. Closure for Track3/hermit…

…#130

assets/scss/_admonition.scss

@@ -0,0 +1,44 @@
+.admonition{
+    position: relative;
+    margin: 1rem 0 1.5rem 0;
+    border-left: .25rem solid map-get($admonition-color, 'note');
+    box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.5);
+    border-radius: 0 8px 8px 0;
+    overflow: auto;
+    .admonition-title{
+        padding: .25rem .50rem;
+        border-bottom: 1px solid map-get($admonition-background, 'note');
+        background-color: rgba(map-get($admonition-background, 'note'), 0.1);
+        color: map-get($admonition-color, 'note');
+        .icon{
+            display: inline-block;
+            padding: 0 10px 0 0;
+            font-size: 0.85rem;
+            color: map-get($admonition-color, 'note');
+        }
+    }
+    .admonition-content{
+        padding: .25rem .50rem;
+    }
+    @each $type, $color in $admonition-color {
+        &.#{$type} {
+          border-left-color: $color;
+          .admonition-title {
+            color: $color;
+          }
+          .icon {
+            color: $color;
+          }
+        }
+    }
+    @each $type, $color in $admonition-background {
+        &.#{$type} {
+          background-color: $color;
+
+          .admonition-title {
+            border-bottom-color: $color;
+            background-color: rgba($color, 0.1);
+          }
+          }
+        }
+}

assets/scss/_predefined.scss

@@ -13,6 +13,30 @@ $typewriter: hsl(172, 100%, 36%);
 $fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
 $code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";
 
+//Admonition
+//
+$admonition-background: (
+  'note': rgba(68, 138, 255, 0.1),
+  'info': rgba(0, 184, 212, 0.1),
+  'tip': rgba(0, 191, 165, 0.1),
+  'success': rgba(0, 200, 83, 0.1),
+  'warning': rgba(255, 145, 0, 0.1),
+  'failure': rgba(255, 82, 82, 0.1),
+  'danger': rgba(255, 23, 68, 0.1),
+  'bug': rgba(245, 0, 87, 0.1),
+) !default;
+
+$admonition-color: (
+  'note': #448aff,
+  'info': #00b8d4,
+  'tip': #00bfa5,
+  'success': #00c853,
+  'warning': #ff9100,
+  'failure': #ff5252,
+  'danger': #ff1744,
+  'bug': #f50057,
+) !default;
+
 // Mixins
 //
 @mixin dimmed {

assets/scss/style.scss

@@ -3,6 +3,7 @@
 @import "syntax.scss";
 @import "animate.scss";
 @import "_scroll.scss";
+@import "_admonition.scss";
 @import "_mathjax.scss";
 
 /* Webkit Scrollbar Customize */

content/posts/admonition-shortcode.md

@@ -0,0 +1,79 @@
+---
+title: "Admonition Shortcode"
+slug : 'admonition-shortcode'
+date: 2023-10-20T20:06:06+05:30
+draft: false
+featuredImg: ""
+description : 'This explains admonition shortcode implementation'
+tags: 
+  - Demo
+  - Typography
+author : 1bl4z3r
+scrolltotop : true
+toc : true
+mathjax : false
+---
+
+The `admonition` shortcode supports **8** types of banners to help you put a notice on your page.
+
+*Markdown or HTML format in the content is supported.*
+
+{{< admonition type=note title="This is a note" >}}
+A **note** banner
+{{< /admonition >}}
+
+{{< admonition info "This is an info" >}}
+A **info** banner
+{{< /admonition >}}
+
+{{< admonition tip >}}
+A **tip** banner
+{{< /admonition >}}
+
+{{< admonition success >}}
+A **success** banner
+{{< /admonition >}}
+
+{{< admonition warning >}}
+A **warning** banner
+{{< /admonition >}}
+
+{{< admonition failure >}}
+A **failure** banner
+{{< /admonition >}}
+
+{{< admonition danger >}}
+A **danger** banner
+{{< /admonition >}}
+
+{{< admonition bug >}}
+A **bug** banner
+{{< /admonition >}}
+
+The `admonition` shortcode has the following named parameters:
+
+* **type** *[optional]* (**first** positional parameter)
+
+    Type of the `admonition` banner, the default value is `note`.
+
+* **title** *[optional]* (**second** positional parameter)
+
+    Title of the `admonition` banner, the default value is the value of the **type** parameter.
+
+Example `admonition` input:
+
+```markdown
+{{</* admonition type=tip title="This is a tip" */>}}
+A **tip** banner
+{{</* /admonition */>}}
+Or
+{{</* admonition tip "This is a tip" */>}}
+A **tip** banner
+{{</* /admonition */>}}
+```
+
+The rendered output looks like this:
+
+{{< admonition tip "This is a tip" >}}
+A **tip** banner
+{{< /admonition >}}

content/posts/long-article.md

@@ -5,6 +5,8 @@ date: 2023-09-22T22:00:01+05:30
 draft: false
 featuredImg: ""
 description : 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...'
+tags: 
+  - Demo
 author : 1bl4z3r
 scrolltotop : true
 toc : true