Add Scroll To Top button

This commit is contained in:
1bl4z3r 2023-08-06 18:46:12 +05:30
parent cfcfd6cd3e
commit 301efb837f
9 changed files with 90 additions and 12 deletions

View file

@ -100,3 +100,15 @@ if (header !== null) {
} }
}, 250)); }, 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);

16
assets/scss/_scroll.scss Normal file
View file

@ -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);
}

View file

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

View file

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

View file

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

View file

@ -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 }}

View file

@ -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> <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") -}} {{- 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> <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 -}} {{- 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> <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 -}} {{- end -}}

View file

@ -22,14 +22,10 @@
<div class="post-meta"><span>{{ .Date.Format .Site.Params.dateform }}</span></div> <div class="post-meta"><span>{{ .Date.Format .Site.Params.dateform }}</span></div>
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
</header> </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 }}
{{- partial "related-posts.html" . -}}
{{- end }} {{- end }}
<hr class="post-end">
<footer class="post-info">
{{- with $.Param "author" }} {{- 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> <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 }} {{- end }}
@ -42,11 +38,25 @@
</p> </p>
{{- end }} {{- 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-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 }} {{- 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> <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 }} {{- 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> </article>
{{- if .Params.toc }} {{- if .Params.toc }}
<aside id="toc"> <aside id="toc">

View file

@ -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>