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

exampleSite/content/posts/usage/configuration.md

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

layouts/partials/menu-extra.html

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

layouts/partials/site-footer.html

@@ -1,45 +1,56 @@
 <footer class="gblog-footer">
-    <nav class="container">
+    <nav class="container flex">
-        <section class="flex flex-wrap align-center">
+        <div>
-            {{ with (.Site.GetPage "home").OutputFormats.Get "atom" }}
+            <section class="flex flex-wrap align-center">
-            <span class="gblog-footer__item">
+                {{ with (.Site.GetPage "home").OutputFormats.Get "atom" }}
-                <svg class="icon gblog_rss_feed"><use xlink:href="#gblog_rss_feed"></use></svg>
+                <span class="gblog-footer__item gblog-footer__item--row">
-                <a href='{{ .Permalink | relURL }}' class="gblog-footer__link">Atom Feed</a>
+                    <svg class="icon gblog_rss_feed"><use xlink:href="#gblog_rss_feed"></use></svg>
-            </span>
+                    <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 }}
+            {{ with .Site.Params.GeekblogContentLicense }}
-            {{ partial "menu-extra" (dict "current" . "source" .Site.Data.menu.extra.footer "target" "footer") }}
+            <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 }}
+        </div>
-            <span class="gblog-footer__item">
+        {{ if (default true .Site.Params.GeekdocBackToTop) }}
-                <a href="{{ . | relURL }}" class="gblog-footer__link">Legal Notice</a>
+        <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 }}
+        </div>
-            {{ 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>
         {{ end }}
     </nav>
 </footer>

src/iconfont/uEA1F-keyborad_arrow_down.svg

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

src/iconfont/uEA20-keyborad_arrow_up.svg

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

src/icons/keyborad_arrow_down.svg

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

src/icons/keyborad_arrow_up.svg

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

src/sass/_base.scss

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

src/sass/_utils.scss

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