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

* feat: add 'back-to-top' link to site footer

* add aria-label to link

exampleSite/content/usage/configuration.md

@@ -94,6 +94,9 @@ enableGitInfo = true
   # (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
   # bright spots while using the dark mode.
   geekdocDarkModeDim = false
+
+  # (Optional, default true) Display a "Back to top" link in the site footer.
+  geekdocBackToTop = true
 ```
 
 {{< /tab >}}
@@ -190,6 +193,9 @@ params:
   # (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
   # bright spots while using the dark mode.
   geekdocDarkModeDim: false
+
+  # (Optional, default true) Display a "Back to top" link in the site footer.
+  geekdocBackToTop: true
 ```
 
 {{< /tab >}}

layouts/partials/site-footer.html

@@ -1,18 +1,25 @@
-<footer class="gdoc-footer">
+<footer class="gdoc-footer flex">
     <div class="container flex flex-wrap">
-        <span class="gdoc-footer__item">
+        <span class="gdoc-footer__item gdoc-footer__item--row">
             Built with <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> and
             <svg class="icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg>
         </span>
         {{ with .Site.Params.GeekdocLegalNotice }}
-        <span class="gdoc-footer__item">
+        <span class="gdoc-footer__item gdoc-footer__item--row">
             <a href="{{ . | relURL }}" class="gdoc-footer__link">Legal Notice</a>
         </span>
         {{ end }}
         {{ with .Site.Params.GeekdocPrivacyPolicy }}
-        <span class="gdoc-footer__item">
+        <span class="gdoc-footer__item gdoc-footer__item--row">
             <a href="{{ . | relURL }}" class="gdoc-footer__link">Privacy Policy</a>
         </span>
         {{ end }}
     </div>
+    {{ if (default true .Site.Params.GeekdocBackToTop) }}
+    <div class="container flex flex-25 justify-end">
+        <span class="gdoc-footer__item">
+            <a class="gdoc-footer__link fake-link" href="#" aria-label="Back to top"><svg class="icon gdoc_keyborad_arrow_up"><use xlink:href="#gdoc_keyborad_arrow_up"></use></svg> <span class="hidden-mobile">Back to top</span></a>
+        </span>
+    </div>
+    {{ end }}
 </footer>

src/iconfont/uEA1C-gdoc_keyborad_arrow_down.svg

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

src/iconfont/uEA1D-gdoc_keyborad_arrow_up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-2.29 -2.29 32.57 32.57"><path d="M24.719 22.64L14 11.921 3.281 22.64 0 19.359l14-14 14 14z"/></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

@@ -385,7 +385,7 @@ img {
   word-wrap: break-word;
   border-top: 1px dashed $gray-600;
   padding: $padding-32 0;
-  line-height: 1.5;
+  line-height: 1.5em;
 
   &:first-of-type {
     padding-top: 0;
@@ -446,9 +446,19 @@ img {
   background: var(--footer-background);
   color: var(--footer-font-color);
 
+  .fake-link:hover {
+    background-image: linear-gradient(
+      var(--footer-link-color),
+      var(--footer-link-color)
+    );
+  }
+
   &__item {
-    margin-right: 1em;
     line-height: 2em;
+
+    &--row {
+      margin-right: 1em;
+    }
   }
 
   &__link {

src/sass/_mobile.scss

@@ -50,7 +50,7 @@
   }
 
   .gdoc-footer {
-    &__item {
+    &__item--row {
       width: 100%;
     }
   }

src/sass/_utils.scss

@@ -6,6 +6,10 @@
   flex: 1 1 auto;
 }
 
+.flex-25 {
+  flex: 1 1 25%;
+}
+
 .flex-inline {
   display: inline-flex;
 }