better support shortcodes, some ui bug fix, exampleSite shortcodes post added

README.ko.md

@@ -1033,8 +1033,8 @@ libraries:
 ### notice
 
 ```bash
-{{< notice note >}} # note, info, tip, warning
+{{< notice success >}} # success, info, warning, error
-A notice disclaimer
+success
 {{< /notice >}}
 ```
 

README.md

@@ -1026,8 +1026,8 @@ You can add some config option parameters at data/flowchartjs.json
 ### notice
 
 ```bash
-{{< notice note >}} # note, info, tip, warning
+{{< notice success >}} # success, info, warning, error
-A notice disclaimer
+success
 {{< /notice >}}
 ```
 

assets/sass/components/_alert.scss

@@ -1,30 +1,32 @@
 .alert {
-    padding: 0.5rem;
+    padding: 0.75rem;
     margin-bottom: 1rem;
     border: 1px solid transparent;
     border-radius: 0.125rem;
 
-    &-info {
+    @include themify($themes) {
-        background-color: #d7eef9;
+        &-info {
-        border: 2px solid #b2def4;
+            background-color: rgba(215, 238, 249, 0.4);
-        color: rgba(26, 128, 180, 0.9925);
+            border-left: 5px solid #bbdefb;
-    }
+            color: themed('dropdown-item-color');
+        }
 
-    &-success {
+        &-success {
-        background-color: #d9efd6;
+            background-color: rgba(217, 239, 214, 0.4);
-        border: 2px solid #bce3b5;
+            border-left: 5px solid #c8e6c9;
-        color: rgba(70, 149, 57, 0.9925);
+            color: themed('dropdown-item-color');
-    }
+        }
 
-    &-warning {
+        &-warning {
-        background-color: #fbf6e1;
+            background-color: rgba(255, 249, 196, 0.4);
-        border: 2px solid #f6ecbe;
+            border-left: 5px solid #ffeb3b;
-        color: rgba(180, 154, 26, 0.9925);
+            color: themed('dropdown-item-color');
-    }
+        }
 
-    &-danger {
+        &-danger {
-        background-color: #f5dddd;
+            background-color: rgba(245, 221, 221, 0.4);
-        border: 2px solid #ecbdbd;
+            border-left: 5px solid #ffcdd2;
-        color: rgba(159, 46, 46, 0.9925);
+            color: themed('dropdown-item-color');
+        }
     }
 }

assets/sass/components/_expand.scss

@@ -2,10 +2,9 @@
   position: relative;
   margin: 1.5rem 0;
   border-radius: 0.25rem;
-  @include box-shadow(1px, 1px, 3px, 0, rgba(0, 0, 0, 0.125));
 
   &__content {
-    padding: 0 18px;
+    padding: 0 1.125rem;
     overflow: hidden;
     max-height: 0;
     border-bottom-left-radius: 0.25rem;
@@ -13,6 +12,7 @@
 
     @include transition(all, 0.2s, ease);
     @include themify($themes) {
+      border-top: 1px solid themed('content-box-border-color');
       background-color: themed('toc-body-background-color');
     }
 
@@ -21,6 +21,10 @@
       font-size: 15.2px;
       margin: 0 0 0.525rem 2rem !important;
       list-style-type: '📂 ';
+
+      &:first-child {
+        margin-top: 0.25rem !important;
+      }
       
       li {
         font-size: 14.4px;

assets/sass/components/_notice.scss

@@ -4,66 +4,65 @@
     border-radius: .125rem;
     color: #fff;
     padding: .3rem 0.5rem .3rem 2rem;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
 
-    &:first-child {
+    &.warning {
-        &::before {
-            position: absolute;
-            top: -28.5px;
-            color: #fff;
-            content: '💡';
-            left: 10px;
-        }
-
-        &::after {
-            position: absolute;
-            top: -28.5px;
-            color: #fff;
-            left: 2rem;
-        }
-    }
-
-    &.info {
         border-top: 30px solid #f1b37e;
         background: #fefaf5;
         color: rgba(150, 90, 38, 0.995) !important;
 
-        &:first-child::after {
+        &::before {
-            content: 'Info';
+            position: absolute;
+            content: '⚠️   Warning';
             font-family: $title-font;
+            top: -26.5px;
+            left: 0.4rem;
+            height: 100%;
         }
     }
 
-    &.warning {
+    &.error {
         border-top: 30px solid #d58181;
         background: #fbeded;
         color: rgba(132, 56, 56, 0.995) !important;
 
-        &:first-child::after {
+        &::before {
-            content: 'Warning';
+            position: absolute;
+            content: '❌   Error';
             font-family: $title-font;
+            top: -26.5px;
+            left: 0.4rem;
+            height: 100%;
         }
     }
 
-    &.note {
+    &.info {
         border-top: 30px solid #6bb1e0;
         background: #e6f3fb;
         color: rgba(47, 103, 141, 0.995) !important;
 
-        &:first-child::after {
+        &::before {
-            content: 'Note';
+            position: absolute;
+            content: 'ℹ️   Info';
             font-family: $title-font;
+            top: -26.5px;
+            left: 0.4rem;
+            height: 100%;
         }
     }
 
-    &.tip {
+    &.success {
         border-top: 30px solid #84c578;
         background: #e8f7e6;
         color: rgba(72, 125, 63, 0.995) !important;
 
-        &:first-child::after {
+        &::before {
-            content: 'Tip';
+            position: absolute;
+            content: '✔️   Success';
             font-family: $title-font;
+            top: -26.5px;
+            left: 0.4rem;
+            height: 100%;
         }
     }
 }

assets/sass/layout/_navigation.scss

@@ -1,4 +1,4 @@
-.navbar {  
+.navbar {
   margin: auto;
   width: inherit;
   max-width: inherit;
@@ -26,6 +26,11 @@
   }
 
   &__slide-down {
+    svg {
+      margin: auto;
+      display: block;
+    }
+
     @include themify($themes) {
       background-color: themed('navbar-background-color');
       @include on-event {

assets/sass/themes/_dark.scss

@@ -66,9 +66,9 @@ $dark: (
     toc-title-color: #90a4ae,
     toc-vertical-line: #727072,
     toc-vertical-line-active: #FF6188,
-    toc-header-background-color: lighten(#2D2A2E, 6%),
+    toc-header-background-color: #403E41,
-    toc-header-background-color-hover: lighten(#2D2A2E, 4%),
+    toc-header-background-color-hover: #424242,
-    toc-body-background-color: lighten(#2D2A2E, 2%),
+    toc-body-background-color: #403E41,
     search-placeholder-color: #727072,
     search-color: #FCFCFA,
     search-icon-color: #727072,

assets/sass/themes/_hacker.scss

@@ -13,8 +13,8 @@ $hacker: (
     dropdown-item-active-background-color: lighten(#151715, 12%),
     dropdown-content-background-color: lighten(#151715, 5%),
     dropdown-item-hover-background-color: lighten(#151715, 20%),
-    dropdown-item-hover-color: #FCFCFA,
+    dropdown-item-hover-color: #E08C48,
-    dropdown-item-color: #e3cd26,
+    dropdown-item-color: #CDF5CC,
     navbar-border-bottom-color: #252526,
     navbar-background-color: #252526,
     navbar-mobile-background-color: #323232,

exampleSite/content/posts/shortcodes.md

@@ -1,11 +1,11 @@
 ---
 title: "Shortcodes"
 date: 2020-01-25T06:40:51+09:00
-description: tabs, code-tabs, expand, alert, notice, img, box
+description: tabs, code-tabs, expand, alert, warning, notice, img, box
 draft: false
 hideToc: false
 enableToc: true
-enableTocContent: false
+enableTocContent: true
 tocPosition: inner
 tags:
 - shortcode
@@ -16,23 +16,42 @@ categories:
 featured_image: feature3/code-file.png
 ---
 
+## Markdownify box
+
+{{< boxmd >}}
+This is **boxmd** shortcode
+{{< /boxmd >}}
+
+## Simple box
+
 {{< box >}}
-Box
+This is **box** shortcode
 {{< /box >}}
 
+## Code tabs
+
+Make it easy to switch between different code
+
 {{< codes java javascript >}}
   {{< code >}}
+
   ```java
   System.out.println('Hello World!');
   ```
+
   {{< /code >}}
+
   {{< code >}}
+
   ```javascript
   console.log('Hello World!');
   ```
+  
   {{< /code >}}
 {{< /codes >}}
 
+## Tabs for general purpose
+
 {{< tabs Windows MacOS Ubuntu >}}
   {{< tab >}}
 
@@ -42,6 +61,8 @@ Box
   console.log('Hello World!');
   ```
 
+  ⚠️Becareful that the content in the tab should be different from each other. The tab makes unique id hashes depending on the tab contents. So, If you just copy-paste the tabs with multiple times, since it has the same contents, the tab will not work.
+
   {{< /tab >}}
   {{< tab >}}
 
@@ -57,6 +78,28 @@ Box
   {{< /tab >}}
 {{< /tabs >}}
 
+## Expand
+
+{{< expand "Expand me" >}}
+
+### Title
+
+contents
+
+{{< /expand >}}
+
+{{< expand "Expand me2" >}}
+
+### Title2
+
+contents2
+
+{{< /expand >}}
+
+## Alert
+
+Colored box
+
 {{< alert theme="warning" >}}
 **this** is a text
 {{< /alert >}}
@@ -73,4 +116,26 @@ Box
 **this** is a text
 {{< /alert >}}
 
-{{< img src="/images/whoami/avatar.jpg" title="title" caption="caption" alt="example avatar" width="400px" >}}
+## Image
+
+Diaplay image with title and caption
+
+{{< img src="/images/whoami/avatar.jpg" title="Title" caption="example caption" alt="example avatar" width="400px" >}}
+
+## Notice
+
+{{< notice success >}}
+success text
+{{< /notice >}}
+
+{{< notice info >}}
+info text
+{{< /notice >}}
+
+{{< notice warning >}}
+warning text
+{{< /notice >}}
+
+{{< notice error >}}
+error text
+{{< /notice >}}

layouts/partials/head/scripts.html

@@ -194,8 +194,11 @@
     var navbar = document.querySelector('.navbar');
     var tocFlexbox = document.querySelector('.toc__flexbox');
     var tocFlexboxOuter = document.querySelector('.toc__flexbox--outer');
+    var expandContents = document.querySelectorAll('.expand__content');
+    var boxContents = document.querySelectorAll('.box');
     var notAllowedTitleIds = null;
 
+    // tab
     singleContentsElem && singleContentsElem.querySelectorAll(".tab") ?
     singleContentsElem.querySelectorAll(".tab").forEach(function (elem) {
       elem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (element) {
@@ -204,6 +207,25 @@
           [element.getAttribute('id')];
       });
     }) : null;
+
+    // expand
+    expandContents ? expandContents.forEach(function(elem) {
+      elem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (element) {
+        notAllowedTitleIds = Array.isArray(notAllowedTitleIds) ?
+          notAllowedTitleIds.concat(element.getAttribute('id')) :
+          [element.getAttribute('id')];
+      });
+    }) : null;
+
+    // box
+    boxContents ? boxContents.forEach(function(elem) {
+      elem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (element) {
+        notAllowedTitleIds = Array.isArray(notAllowedTitleIds) ?
+          notAllowedTitleIds.concat(element.getAttribute('id')) :
+          [element.getAttribute('id')];
+      });
+    }) : null;
+
     
     window.onscroll = function () {
       scrollFunction();

layouts/shortcodes/expand.html

@@ -6,6 +6,6 @@
     {{ .Get 0 }}
   </button>
   <div class="expand__content">
-    {{ .Inner | safeHTML }}
+    {{ .Inner | markdownify }}
   </div>
 </div>