Add Scroll To Top button

assets/js/main.js

@@ -100,3 +100,15 @@ if (header !== null) {
     }
   }, 250));
 }
+// Scroll to Top button Toggle
+//
+const scroll = document.querySelector(".scroll-up"), rootElement = document.documentElement;
+
+function handleScroll() {
+  if (rootElement.scrollTop / (rootElement.scrollHeight - rootElement.clientHeight) > 0.4) {
+    scroll.classList.remove("hide");scroll.classList.add("show");
+  } else {
+    scroll.classList.add("hide");scroll.classList.remove("show");
+  }
+}
+document.addEventListener("scroll", handleScroll);

assets/scss/_scroll.scss

@@ -0,0 +1,16 @@
+.scroll-up{
+    position: fixed;
+    bottom: 10%;
+    right: 0;
+    z-index: 1;
+    opacity: 0;
+    transition: all 0.5s ease;
+}
+.hide{
+    opacity: 0;
+    transform: translateY(20px);
+}
+.show{
+    opacity: 1;
+    transform: translateY(0);
+  }

assets/scss/style.scss

@@ -2,6 +2,7 @@
 @import "normalize.scss";
 @import "syntax.scss";
 @import "animate.scss";
+@import "scroll.scss";
 
 /* Webkit Scrollbar Customize */
 ::-webkit-scrollbar {

hugo.toml

@@ -95,6 +95,7 @@ enableEmoji = true
   # Add custom css
   # customCSS = ["css/foo.css", "css/bar.css"]
 
+  scrollToTop = true # To enable Scroll to Top button Sitewide
   # Social Icons
   # Check https://github.com/Track3/hermit#social-icons for more info.
   [[params.social]]

layouts/_default/baseof.html

@@ -30,7 +30,7 @@
 	{{ block "header" . -}}{{ end -}}
 	{{ block "main" . -}}{{ end -}}
 	{{ block "footer" . -}}{{ end }}
-
+	{{ partial "scroll-to-top.html" . }}
 	{{ $main := resources.Get "js/main.js" -}}
 	{{ if .Site.Params.code_copy_button | default true -}}
 		{{ $codeCopy := resources.Get "js/code-copy.js" -}}

layouts/partials/scroll-to-top.html

@@ -0,0 +1,6 @@
+{{ if and (.Site.Params.scrollToTop) (.Params.scrolltotop) }}
+<a href="#" class="scroll-up">{{ partial "svg.html" (dict "context" . "name" "scrollup") }}</a>
+<noscript>
+    <a href="#" class="scroll-up show">{{ partial "svg.html" (dict "context" . "name" "scrollup") }}</a>
+</noscript>
+{{ end }}

layouts/partials/svg.html

@@ -46,6 +46,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.428 14.359c-.326 1.678-2.92 3.513-5.9 3.87-1.554.185-3.084.355-4.715.28-2.668-.122-4.773-.637-4.773-.637 0 .26.016.507.048.739.347 2.633 2.61 2.79 4.755 2.864 2.164.074 4.092-.534 4.092-.534l.089 1.957s-1.514.813-4.211.962c-1.487.082-3.334-.037-5.485-.606C1.664 22.019.862 17.047.738 12.002.702 10.504.726 9.092.726 7.91c0-5.159 3.38-6.67 3.38-6.67C5.809.456 8.733.126 11.774.102h.074c3.04.024 5.967.354 7.671 1.136 0 0 3.38 1.512 3.38 6.671 0 0 .043 3.806-.471 6.449"/><path d="M18.912 8.31v6.247h-2.474V8.494c0-1.278-.538-1.927-1.614-1.927-1.19 0-1.785.77-1.785 2.291v3.319h-2.46V8.858c0-1.521-.596-2.29-1.786-2.29-1.075 0-1.613.648-1.613 1.926v6.063H4.705V8.31c0-1.276.325-2.29.978-3.041.674-.75 1.555-1.136 2.65-1.136 1.266 0 2.225.487 2.86 1.46l.616 1.034.616-1.033c.634-.974 1.593-1.46 2.86-1.46 1.094 0 1.976.384 2.65 1.135.652.75.977 1.765.977 3.041"/></svg>
 {{- else if (eq .name "rss") -}}
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+{{- else if (eq .name "scrollup") -}}
+<svg fill="#3B3E48" width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" id="up-circle" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="icon flat-color" stroke="#3B3E48" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.9600000000000002"><circle id="primary" cx="12" cy="12" r="10" style="fill: #3B3E48;"></circle><path id="secondary" d="M15,14a1,1,0,0,1-.71-.29L12,11.41l-2.29,2.3a1,1,0,0,1-1.42-1.42l3-3a1,1,0,0,1,1.42,0l3,3a1,1,0,0,1,0,1.42A1,1,0,0,1,15,14Z" style="fill: #018574;"></path></g><g id="SVGRepo_iconCarrier"><circle id="primary" cx="12" cy="12" r="10" style="fill: #3B3E48;"></circle><path id="secondary" d="M15,14a1,1,0,0,1-.71-.29L12,11.41l-2.29,2.3a1,1,0,0,1-1.42-1.42l3-3a1,1,0,0,1,1.42,0l3,3a1,1,0,0,1,0,1.42A1,1,0,0,1,15,14Z" style="fill: #018574;"></path></g></svg>
 {{- else -}}
 <svg xmlns="http://www.w3.org/2000/svg" class="feather feather-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
 {{- end -}}

layouts/posts/single.html

@@ -22,14 +22,10 @@
 				<div class="post-meta"><span>{{ .Date.Format .Site.Params.dateform }}</span></div>
 				<h1>{{ .Title }}</h1>
 			</header>
-			<div class="content">
+			<div class="post-info">
-				{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
+				{{- with .Params.description }}
-			</div>
+				<p>{{.}}</p>
-			{{- if .Site.Params.relatedPosts }}
+				{{- end }}
-			{{- partial "related-posts.html" . -}}
-			{{- end }}
-			<hr class="post-end">
-			<footer class="post-info">
 				{{- with $.Param "author" }}
 				<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-feather"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>{{ . }}</p>
 				{{- end }}
@@ -42,11 +38,25 @@
 				</p>
 				{{- end }}
 				<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>{{ i18n "wordCount" . }}</p>
-				<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}</p>
+				<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
+					{{ if .Lastmod }}
+						{{ if not (eq .Lastmod .Date ) }}
+							[Modified : {{ dateFormat .Site.Params.dateformNumTime .Lastmod.Local }}]
+						{{ end }}
+					{{ end }}
+				</p>
 				{{- if and .GitInfo .Site.Params.gitUrl }}
 				<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg><a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a> @ {{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}</p>
 				{{- end }}
-			</footer>
+			</div>
+			<hr class="post-end">
+			<div class="content">
+				{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
+			</div>
+			{{- if .Site.Params.relatedPosts }}
+			{{- partial "related-posts.html" . -}}
+			{{- end }}
+			<hr class="art-end">
 		</article>
 		{{- if .Params.toc }}
 		<aside id="toc">
@@ -74,4 +84,4 @@
 
 {{ define "footer" }}
 {{ partialCached "footer.html" . }}
-{{ end }}
+{{ end }}

layouts/shortcodes/figure.html

@@ -0,0 +1,30 @@
+<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end -}}
+    <img src="{{ .Get "src" }}"
+         {{- if or (.Get "alt") (.Get "caption") }}
+         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+         {{- end -}}
+         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+         {{- with .Get "loading" }} loading="{{ . }}"{{ end -}}
+         loading="lazy"
+    /><!-- Closing img tag -->
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption>
+            {{ with (.Get "title") -}}
+                <h4>{{ . }}</h4>
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>