From 9deef3a1f17bb66e4187e4f35207007437bd20d9 Mon Sep 17 00:00:00 2001
From: Duoc Nguyen <nguyenvanduocit@gmail.com>
Date: Sat, 29 Dec 2018 06:51:11 +0700
Subject: [PATCH] add post and update short code

---
 config.toml                                   |  2 +-
 content/pages/_index.md                       |  1 +
 content/pages/shortcodes.md                   | 49 +++++++++++++++++++
 ...ng-css-variables-de-xay-dung-dark-theme.md |  3 +-
 themes/blog/assets/scss/style.scss            |  8 +++
 themes/blog/layouts/partials/footer.html      | 20 ++++++--
 themes/blog/layouts/shortcodes/mermaid.html   |  4 ++
 themes/blog/layouts/shortcodes/oembed.html    |  7 +++
 themes/blog/layouts/shortcodes/zoom-img.html  | 12 +++++
 9 files changed, 98 insertions(+), 8 deletions(-)
 create mode 100644 content/pages/_index.md
 create mode 100644 themes/blog/layouts/shortcodes/mermaid.html
 create mode 100644 themes/blog/layouts/shortcodes/oembed.html
 create mode 100644 themes/blog/layouts/shortcodes/zoom-img.html

diff --git a/config.toml b/config.toml
index b7f651a..afc9f3b 100644
--- a/config.toml
+++ b/config.toml
@@ -19,7 +19,7 @@ paginate=20
 
 [blackfriday]
   hrefTargetBlank = true
-
+  noreferrerLinks = true
 [menu]
   [[menu.main]]
     identifier = "about"
diff --git a/content/pages/_index.md b/content/pages/_index.md
new file mode 100644
index 0000000..9766475
--- /dev/null
+++ b/content/pages/_index.md
@@ -0,0 +1 @@
+ok
diff --git a/content/pages/shortcodes.md b/content/pages/shortcodes.md
index 6d93df6..feb6d10 100644
--- a/content/pages/shortcodes.md
+++ b/content/pages/shortcodes.md
@@ -114,3 +114,52 @@ console.log(array1[2]);
 ```
 
 {{< caniuse feature="proxy" >}}
+
+## mermaid
+
+```markdown
+{{</* mermaid */>}}
+graph TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+{{</* /mermaid */>}}
+```
+
+{{< mermaid >}}
+graph TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+{{< /mermaid >}}
+
+## image-zoom
+
+```markdown
+{{</* zoom-img src="/img/posts/default-thumb-1200-630.png" */>}}
+```
+
+{{< zoom-img src="/img/posts/default-thumb-1200-630.png" >}}
+
+## oembed
+
+```markdown
+{{</* oembed url="https://open.spotify.com/playlist/37i9dQZEVXbc3uyDjJcA7l" title="ahhi" */>}}
+```
+
+{{< oembed url="https://open.spotify.com/playlist/37i9dQZEVXbc3uyDjJcA7l" title="ahhi">}}
+
diff --git a/content/posts/ung-dung-css-variables-de-xay-dung-dark-theme.md b/content/posts/ung-dung-css-variables-de-xay-dung-dark-theme.md
index 2cec088..2489802 100644
--- a/content/posts/ung-dung-css-variables-de-xay-dung-dark-theme.md
+++ b/content/posts/ung-dung-css-variables-de-xay-dung-dark-theme.md
@@ -54,5 +54,4 @@ Demo
 
 {{<codepen tatthien LgMKpm>}}
 
-Browsers support
-https://caniuse.com/#feat=css-variables
+{{% caniuse feature="css-variables" %}}
diff --git a/themes/blog/assets/scss/style.scss b/themes/blog/assets/scss/style.scss
index 094381c9..4a9e852 100644
--- a/themes/blog/assets/scss/style.scss
+++ b/themes/blog/assets/scss/style.scss
@@ -42,6 +42,9 @@ ol, ul{
     &:last-child{
       margin-bottom: 0;
     }
+    > ol,ul{
+      margin-top: 15px;
+    }
   }
 }
 
@@ -459,3 +462,8 @@ figcaption{
     border: 0;
   }
 }
+
+.oembed-card{
+  padding: 10px 0 0 0;
+  box-shadow: 0 1px 4px rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.09);
+}
diff --git a/themes/blog/layouts/partials/footer.html b/themes/blog/layouts/partials/footer.html
index 861afb4..3c0fa14 100644
--- a/themes/blog/layouts/partials/footer.html
+++ b/themes/blog/layouts/partials/footer.html
@@ -9,22 +9,32 @@
 </div>
 <!-- #wrap -->
 
-{{ $js := resources.Get "js/app.js" | resources.Minify | resources.Fingerprint }}
+{{ $app := resources.Get "js/app.js" | resources.Minify | resources.Fingerprint }}
 {{ $commentJs := resources.Get "js/comment.js" | resources.Minify | resources.Fingerprint }}
-<script src="{{ $js.RelPermalink }}"></script>
+<script src="{{ $app.RelPermalink }}"></script>
 
 {{ if .IsPage }}
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
 <script src="/js/md5.min.js"></script>
 <script src="{{ $commentJs.RelPermalink }}"></script>
 {{ end }}
 
 {{ $highlightJs := resources.Get "js/highlight.pack.js" | resources.Minify | resources.Fingerprint }}
-<script src="{{ $highlightJs.RelPermalink }}"></script>
-<script>hljs.initHighlightingOnLoad();</script>
+<script src="{{ $highlightJs.RelPermalink }}" async defer onload="hljs.initHighlightingOnLoad();"></script>
+
+{{ if ($.Page.Scratch.Get "include_embedly") "true" }}
+<script src="//cdn.embedly.com/widgets/platform.js" async defer onload="mediumZoom('[data-zoomable]');"></script>
+{{ end }}
+
 {{ if ($.Page.Scratch.Get "include_caniuse") "true" }}
 <script async src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/caniuse-embed.min.js"></script>
 {{ end }}
+{{ if ($.Page.Scratch.Get "include_mermaid") "true" }}
+<script async src="https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js"></script>
+{{ end }}
+{{ if ($.Page.Scratch.Get "include_image_zoom") "true" }}
+<script src="https://unpkg.com/medium-zoom@1.0.2/dist/medium-zoom.min.js" async defer onload="mediumZoom('[data-zoomable]');"></script>
+{{ end }}
 </body>
 
 </html>
diff --git a/themes/blog/layouts/shortcodes/mermaid.html b/themes/blog/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..3cf1a34
--- /dev/null
+++ b/themes/blog/layouts/shortcodes/mermaid.html
@@ -0,0 +1,4 @@
+{{ .Page.Scratch.Set "include_mermaid" true }}
+<div class="mermaid">
+  {{ .Inner }}
+</div>
diff --git a/themes/blog/layouts/shortcodes/oembed.html b/themes/blog/layouts/shortcodes/oembed.html
new file mode 100644
index 0000000..99e4953
--- /dev/null
+++ b/themes/blog/layouts/shortcodes/oembed.html
@@ -0,0 +1,7 @@
+{{ .Page.Scratch.Set "include_embedly" true }}
+{{- $url := .Get "url" -}}
+{{- $title := .Get "url" | default "" -}}
+
+<div class="oembed-card">
+  <a data-card-controls="0" class="embedly-card" href="{{ $url }}">{{ $title }}</a>
+</div>
diff --git a/themes/blog/layouts/shortcodes/zoom-img.html b/themes/blog/layouts/shortcodes/zoom-img.html
new file mode 100644
index 0000000..7dc1b28
--- /dev/null
+++ b/themes/blog/layouts/shortcodes/zoom-img.html
@@ -0,0 +1,12 @@
+{{ .Page.Scratch.Set "include_image_zoom" true }}
+{{- $title := .Get "url" | default "" -}}
+{{- $src := .Get "src" | default "" -}}
+<p>
+  <img
+    data-zoomable
+    src="{{ $src }}"
+    data-zoom-src="{{ $src }}"
+    title="{{ $title }}"
+    alt="{{ $title }}"
+  >
+</p>