commit 5825e1a05dbcb5ba34e3f0949a851dfdb50b9cea parent cb5c4c290824e89c63234a12749c3e8c6740e540 Author: Yohanes Bandung <hi@ybbond.dev> Date: Sat, 30 May 2020 21:19:32 +0700 refactor: upgrade to gatsby 71, and improve darkToggler load Diffstat:
| A | layouts/_default/_markup/render-heading.html | | | 9 | +++++++++ |
| M | layouts/partials/components/content.html | | | 6 | +----- |
| M | layouts/partials/head/twitter-card-metas.html | | | 8 | ++++---- |
| M | static/darkToggler.js | | | 48 | +++++++++++++++++++++++------------------------- |
4 files changed, 37 insertions(+), 34 deletions(-)
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html @@ -0,0 +1,8 @@ +{{ $href := .Anchor | safeURL }} +{{ $hashrepeat := "#" | strings.Repeat .Level }} +<h{{ .Level }} id="{{ $href }}"> + <a class="before-hash h{{ .Level }}" href="#{{ $href }}"> + {{ $hashrepeat }} + </a>{{ .Text | safeHTML }} + <a class="headline-hash" href="#{{ $href }}">#</a> +</h{{ .Level }}>+ \ No newline at end of file diff --git a/layouts/partials/components/content.html b/layouts/partials/components/content.html @@ -1,8 +1,4 @@ -{{ $add_hash_after := . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" "${1} <a class=\"headline-hash\" href=\"#${2}\">#</a> ${3}" }} -{{ $h2_hash := $add_hash_after | replaceRE "(<h2 id=\"([^\"]+)\">)(.+)(</h2>)" "${1}<a class=\"before-hash h2\" href=\"#${2}\">##</a> ${3} ${4}" }} -{{ $h3_hash := $h2_hash | replaceRE "(<h3 id=\"([^\"]+)\">)(.+)(</h3>)" "${1}<a class=\"before-hash h3\" href=\"#${2}\">###</a> ${3} ${4}" }} -{{ $h4_hash := $h3_hash | replaceRE "(<h4 id=\"([^\"]+)\">)(.+)(</h4>)" "${1}<a class=\"before-hash h4\" href=\"#${2}\">####</a> ${3} ${4}" }} -{{ $list_span := $h4_hash | replaceRE "<li( id=\"fn:[\\d]+\" role=\"doc-endnote\")?>(\\n<p>)?" "<li${1}>${2}<span></span>" }} +{{ $list_span := . | replaceRE "<li( id=\"fn:[\\d]+\" role=\"doc-endnote\")?>(\\n<p>)?" "<li${1}>${2}<span></span>" }} {{ $footnote := $list_span | replaceRE "(<div class=\"footnotes\" role=\"doc-endnotes\">\\n<hr />)" "${1}<p class=\"footnotes__text\">Footnotes:</p>" }} {{ $checkbox_non_disabled := $footnote | replaceRE "disabled=\"\" type=\"checkbox" "type=\"checkbox" }} {{ $checkbox_non_disabled | safeHTML }} diff --git a/layouts/partials/head/twitter-card-metas.html b/layouts/partials/head/twitter-card-metas.html @@ -4,12 +4,12 @@ {{ $defaultDesc := cond (isset .Site "description") .Description (printf "%s by %s" .Site.Params.Description .Site.Params.Author) }} {{ $dateformat := .Params.Date.Format "2006-01-02 15:04" }} {{ $idslug := (print "date-" $dateformat "-") | urlize }} -{{ $lastUrlElement := index (last 1 (split (delimit (split .URL "/") "," "") ",")) 0 }} +{{ $lastUrlElement := index (last 1 (split (delimit (split .RelPermalink "/") "," "") ",")) 0 }} <meta name="twitter:title" content="{{ cond .IsHome $titleHome $titleRest }}"> <meta name="twitter:url" content="{{ cond (eq .Type "notes") ( (print .Site.BaseURL "notes#" $idslug)) .Permalink }}"> <meta name="twitter:description" content="{{ cond .IsHome .Site.Params.Description (cond (and (eq .Type "notes") (ne .Summary "")) .Summary (.Params.Twitter.Description | default $defaultDesc)) }}"> -<meta name="twitter:image" content="{{ .Params.Twitter.Image | (cond (isset .Params.Image "src") (printf "%s%s" .Permalink .Params.Image.Src) nil) | default "logo.png" | absURL }}"> +<meta name="twitter:image" content="{{ (cond (isset .Params.Image "src") (printf "%s%s" .Permalink .Params.Image.Src) nil) | default "logo.png" | absURL }}"> <meta name="twitter:image:alt" content="{{ cond .IsHome $titleHome $titleRest }}"> -<meta name="twitter:site" content="@{{ .Params.Twitter.Site | default .Site.Params.twitter }}"> -<meta name="twitter:creator" content="@{{ .Params.Twitter.Site | default .Site.Params.twitter }}"> +<meta name="twitter:site" content="@{{ .Site.Params.twitter }}"> +<meta name="twitter:creator" content="@{{ .Site.Params.twitter }}"> diff --git a/static/darkToggler.js b/static/darkToggler.js @@ -1,30 +1,28 @@ (function() { - window.onload = function() { - const toggler = document.getElementById("dark-toggler"); - const mainWrapper = document.getElementById("main-theme"); - const currentTheme = localStorage.getItem("theme"); + const toggler = document.getElementById("dark-toggler"); + const mainWrapper = document.getElementById("main-theme"); + const currentTheme = localStorage.getItem("theme"); - if (toggler && mainWrapper) { - toggler.className = "header__menu__list__toggler"; - toggler.onclick = function() { - if (mainWrapper.className === "theme-light") { - mainWrapper.className = "theme-dark"; - localStorage.setItem("theme", "dark"); - toggler.innerText = "🌛"; - } else if (mainWrapper.className === "theme-dark") { - mainWrapper.className = "theme-light"; - localStorage.setItem("theme", "light"); - toggler.innerText = "🌞"; - } - }; - } - - if (currentTheme && currentTheme === "light") { - mainWrapper.className = "theme-light"; - toggler.innerText = "🌞"; - } + if (toggler && mainWrapper) { + toggler.className = "header__menu__list__toggler"; + toggler.onclick = function() { + if (mainWrapper.className === "theme-light") { + mainWrapper.className = "theme-dark"; + localStorage.setItem("theme", "dark"); + toggler.innerText = "🌛"; + } else if (mainWrapper.className === "theme-dark") { + mainWrapper.className = "theme-light"; + localStorage.setItem("theme", "light"); + toggler.innerText = "🌞"; + } + }; + } - console.log("Nice! You have the privilege of toggling the dark mode :D"); - console.log("Just press the 🌞 or 🌛 logo on the top of page!"); + if (currentTheme && currentTheme === "light") { + mainWrapper.className = "theme-light"; + toggler.innerText = "🌞"; } + + console.log("Nice! You have the privilege of toggling the dark mode :D"); + console.log("Just press the 🌞 or 🌛 logo on the top of page!"); })() \ No newline at end of file