github
/
hugo-geekblog
mirror of https://github.com/thegeeklab/hugo-geekblog.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add 'back-to-top' link to site footer (#113)

This commit is contained in:
Robert Kaussow 2021-11-23 21:40:58 +01:00 committed by GitHub
parent 73e3888dcc
commit 17e2455161
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 87 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
exampleSite/content/posts/usage/configuration.md
View File

@ -124,6 +124,9 @@ enableRobotsTXT = true
# bright spots while using the dark mode.
geekblogDarkModeDim = false
# (Optional, default true) Display a "Back to top" link in the site footer.
geekblogBackToTop = true
# (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
# Could be used if you want to give credits to your hosting provider.
[params.geekblogHostedOn]
@ -253,6 +256,9 @@ params:
# bright spots while using the dark mode.
geekblogDarkModeDim: false
# (Optional, default true) Display a "Back to top" link in the site footer.
geekblogBackToTop: true
# (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
# Could be used if you want to give credits to your hosting provider.
geekblogHostedOn:

2
layouts/partials/menu-extra.html
View File

@ -14,7 +14,7 @@
{{ $icon := default false .icon }}
{{ if eq $target "footer" }}
<span class="gblog-footer__item">
<span class="gblog-footer__item gblog-footer__item--row">
{{ if $icon }}<svg class="icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>{{ end }}
<a href="{{ if .external }}{{ .ref }}{{ else }}{{ relref $current .ref }}{{ end }}"
class="gblog-footer__link">

87
layouts/partials/site-footer.html
View File

@ -1,45 +1,56 @@
<footer class="gblog-footer">
<nav class="container">
<section class="flex flex-wrap align-center">
{{ with (.Site.GetPage "home").OutputFormats.Get "atom" }}
<span class="gblog-footer__item">
<svg class="icon gblog_rss_feed"><use xlink:href="#gblog_rss_feed"></use></svg>
<a href='{{ .Permalink | relURL }}' class="gblog-footer__link">Atom Feed</a>
</span>
<nav class="container flex">
<div>
<section class="flex flex-wrap align-center">
{{ with (.Site.GetPage "home").OutputFormats.Get "atom" }}
<span class="gblog-footer__item gblog-footer__item--row">
<svg class="icon gblog_rss_feed"><use xlink:href="#gblog_rss_feed"></use></svg>
<a href='{{ .Permalink | relURL }}' class="gblog-footer__link">Atom Feed</a>
</span>
{{ end }}
{{ if .Site.Data.menu.extra.footer }}
{{ partial "menu-extra" (dict "current" . "source" .Site.Data.menu.extra.footer "target" "footer") }}
{{ end }}
{{ with .Site.Params.GeekblogLegalNotice }}
<span class="gblog-footer__item gblog-footer__item--row">
<a href="{{ . | relURL }}" class="gblog-footer__link">Legal Notice</a>
</span>
{{ end }}
{{ with .Site.Params.GeekblogPrivacyPolicy }}
<span class="gblog-footer__item gblog-footer__item--row">
<a href="{{ . | relURL }}" class="gblog-footer__link">Privacy Policy</a>
</span>
{{ end }}
</section>
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Built with <a href="https://gohugo.io/" class="gblog-footer__link">Hugo</a> and
<svg class="icon gblog_heart"><use xlink:href="#gblog_heart"></use></svg>
</span>
</section>
{{ with .Site.Params.GeekblogHostedOn }}
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Hosted on <a href="{{ .link }}" class="gblog-footer__link">{{ .name }}</a>
</span>
</section>
{{ end }}
{{ if .Site.Data.menu.extra.footer }}
{{ partial "menu-extra" (dict "current" . "source" .Site.Data.menu.extra.footer "target" "footer") }}
{{ with .Site.Params.GeekblogContentLicense }}
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Content licensed under <a href="{{ .link }}" class="gblog-footer__link no-wrap">{{ .name }}</a>
</span>
</section>
{{ end }}
{{ with .Site.Params.GeekblogLegalNotice }}
<span class="gblog-footer__item">
<a href="{{ . | relURL }}" class="gblog-footer__link">Legal Notice</a>
</div>
{{ if (default true .Site.Params.GeekdocBackToTop) }}
<div class="flex flex-25 justify-end">
<span class="gblog-footer__item text-right">
<a class="gblog-footer__link fake-link" href="#" aria-label="Back to top">
<svg class="icon gblog_keyborad_arrow_up"><use xlink:href="#gblog_keyborad_arrow_up"></use></svg> <span class="hidden-mobile">Back to top</span>
</a>
</span>
{{ end }}
{{ with .Site.Params.GeekblogPrivacyPolicy }}
<span class="gblog-footer__item">
<a href="{{ . | relURL }}" class="gblog-footer__link">Privacy Policy</a>
</span>
{{ end }}
</section>
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Built with <a href="https://gohugo.io/" class="gblog-footer__link">Hugo</a> and
<svg class="icon gblog_heart"><use xlink:href="#gblog_heart"></use></svg>
</span>
</section>
{{ with .Site.Params.GeekblogHostedOn }}
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Hosted on <a href="{{ .link }}" class="gblog-footer__link">{{ .name }}</a>
</span>
</section>
{{ end }}
{{ with .Site.Params.GeekblogContentLicense }}
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Content licensed under <a href="{{ .link }}" class="gblog-footer__link no-wrap">{{ .name }}</a>
</span>
</section>
</div>
{{ end }}
</nav>
</footer>

1
src/iconfont/uEA1F-keyborad_arrow_down.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M3.281 5.36L14 16.079 24.719 5.36 28 8.641l-14 14-14-14z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 171 B

1
src/iconfont/uEA20-keyborad_arrow_up.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M24.719 22.64L14 11.921 3.281 22.64 0 19.359l14-14 14 14z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 172 B

4
src/icons/keyborad_arrow_down.svg Normal file
View File

@ -0,0 +1,4 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>keyboard_arrow_down</title>
<path d="M3.281 5.36l10.719 10.719 10.719-10.719 3.281 3.281-14 14-14-14z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 255 B

5
src/icons/keyborad_arrow_up.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>keyboard_arrow_up</title>
<path d="M24.719 22.64l-10.719-10.719-10.719 10.719-3.281-3.281 14-14 14 14z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 257 B

13
src/sass/_base.scss
View File

@ -447,8 +447,19 @@ img {
background: $second-color;
color: $gray-100;
.fake-link {
background-image: linear-gradient(
var(--footer-link-color),
var(--footer-link-color)
);
}
&__item {
margin: $padding-8 $padding-8 $padding-8 0;
line-height: 2em;
&--row {
margin-right: $padding-16;
}
}
&__link {

8
src/sass/_utils.scss
View File

@ -10,6 +10,10 @@
flex: 1 1 auto;
}
.flex-25 {
flex: 1 1 25%;
}
.flex-even {
flex: 1 1;
}
@ -53,6 +57,10 @@
text-align: center;
}
.text-right {
text-align: right;
}
.no-wrap {
white-space: nowrap;
}