WIP - but blocked by hugo feature request

References:
- https://discourse.gohugo.io/t/render-alternative-output-format-outside-of-leaf-bundle-subdirectory/46968
- https://github.com/gohugoio/hugo/issues/8927

assets/css/bobastyle.css

@@ -361,6 +361,23 @@ h1 svg.icon {
 
 /* }}} */
 
+/* Back to top {{{ */
+#top {
+  font-size: 0;
+}
+#back-to-top {
+  position: fixed;
+  float: right;
+  bottom: 25px;
+  right: 25px;
+  background-color: var(--background-1);
+  color: var(--text-1);
+  border-radius: 100%;
+  padding: 12px;
+  display: none;
+}
+/* }}} */
+
 /* Skip to main content {{{ */
 #skip-to-main {
   position: absolute;
@@ -972,6 +989,10 @@ aside.quote {
   .table-of-contents.print {
     display: block;
   }
+
+  #back-to-top {
+    display: none !important;
+  }
 }
 
 /* }}} */

assets/css/syntax-light.css

@@ -5,17 +5,16 @@
     color: black;
   }
 
-/* Background */ .bg { background-color: #f8f8f8; }
+/* Background */ .bg { background-color: #f8f8f8 }
 /* PreWrapper */ .chroma { background-color: #f8f8f8; }
 /* Other */ .chroma .x { color: #000000 }
 /* Error */ .chroma .err { color: #a40000 }
 /* CodeLine */ .chroma .cl {  }
-/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #dfdfdf }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 /* Line */ .chroma .line { display: flex; }
 /* Keyword */ .chroma .k { color: #204a87; font-weight: bold }
 /* KeywordConstant */ .chroma .kc { color: #204a87; font-weight: bold }

assets/css/syntax.css

@@ -1,16 +1,15 @@
 /* native style */
 
-/* Background */ .bg { color: #d0d0d0; background-color: #202020; }
+/* Background */ .bg { color: #d0d0d0; background-color: #202020 }
 /* PreWrapper */ .chroma { color: #d0d0d0; background-color: #202020; }
 /* Other */ .chroma .x {  }
 /* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
 /* CodeLine */ .chroma .cl {  }
-/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #363636 }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 }
-/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 }
 /* Line */ .chroma .line { display: flex; }
 /* Keyword */ .chroma .k { color: #6ab825; font-weight: bold }
 /* KeywordConstant */ .chroma .kc { color: #6ab825; font-weight: bold }

assets/js/bobatheme.js

@@ -1,3 +1,13 @@
+// back to top
+const backToTop = document.getElementById("back-to-top");
+window.onscroll = function() {
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        backToTop.style.display = "block";
+    } else {
+        backToTop.style.display = "none";
+    }
+}
+
 // code block copy to clipboard
 window.onload = () => {
     document.querySelectorAll(".code-block").forEach(codeBlock => {

exampleSite/hugo.yaml

@@ -4,11 +4,9 @@ defaultContentLanguage: en
 copyright: '&copy; 2021 bbaovanc <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>'
 sectionPagesMenu: main
 enableRobotsTXT: true
+paginate: 5
 enableGitInfo: true
 
-pagination:
-  pagerSize: 5
-
 taxonomies:
   _merge: deep
 

layouts/_default/baseof.html

@@ -4,8 +4,20 @@
     {{ partial "head.html" . }}
 
     <body>
+        <a id="top" aria-hidden="true"></a>
         <a id="skip-to-main" href="#main-content">Skip to main content</a>
 
+        <a id="back-to-top" href="#top" aria-label="{{ i18n "aria_back_to_top_button" }}">
+            {{ partial "icon.html" "chevron-up" }}
+        </a>
+        <noscript>
+            <style>
+                #back-to-top {
+                    display: block;
+                }
+            </style>
+        </noscript>
+
         {{ partial "top.html" . }}
 
         <div class="main-container">
@@ -27,7 +39,7 @@
         {{ if or .Site.Copyright .Site.Params.footer }}
             <footer>
                 {{ with .Site.Copyright }}
-                    {{ . | safeHTML }}
+                    <p>{{ . | safeHTML }}</p>
                 {{ end }}
 
                 {{ with .Site.Params.footer }}

layouts/partials/figure.html

@@ -9,7 +9,7 @@
     {{ with index . "src" }}
         {{ $media := . }}
         {{ if eq .MediaType.MainType "image" }}
-            <img src="{{ $media.Permalink }}" alt="{{ $media.Title }}" loading="lazy" />
+            <img src="{{ $media.Permalink }}" alt="{{ $media.Title }}" />
         {{ else if eq .MediaType.MainType "video" }}
             <video controls preload="metadata">
                 <source src="{{ $media.Permalink }}" alt="{{ $media.Title }}">

layouts/partials/head.html

@@ -7,10 +7,10 @@
         <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
     {{ end }}
     {{ with resources.Get "css/syntax.css" | fingerprint "sha512" }}
-        <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" media="print" onload="this.media='all'">
+        <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
     {{ end }}
     {{ with resources.Get "css/syntax-light.css" | fingerprint "sha512" }}
-        <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" media="print" onload="this.media='all'">
+        <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
     {{ end }}
 
     {{ with resources.Get "js/bobatheme.js" | fingerprint "sha512" }}

layouts/partials/remote_figure.html

@@ -10,7 +10,7 @@
 {{ end }}
 
     {{ if eq $type "image" }}
-        <img src="{{ $src }}" alt="{{ $alt }}" loading="lazy" />
+        <img src="{{ $src }}" alt="{{ $alt }}" />
     {{ else if eq $type "video" }}
         <video controls preload="metadata">
             <source src="{{ $src }}" alt="{{ $alt }}">

layouts/partials/seo-tags/schema.html

@@ -21,9 +21,6 @@
     <meta itemprop="image" content="{{ $featured.Permalink }}">
 {{ end }}
 
-{{ with .Keywords }}
-    <meta itemprop="keywords" content="{{ delimit . ", " }}">
-{{ else }}
 {{ with (.GetTerms "tags") }}
     {{ $tags := slice }}
     {{ range . }}
@@ -31,4 +28,3 @@
     {{ end }}
     <meta itemprop="keywords" content="{{ delimit $tags ", " }}">
 {{ end }}
-{{ end }}

layouts/partials/seo-tags/twitter-cards.html

@@ -24,6 +24,6 @@
 <meta name="twitter:title" content="{{ .Title | plainify }}">
 <meta name="twitter:description" content="{{ (partial "seo-description.html" .) | plainify }}">
 
-{{ with .Site.Params.social.twitter }}
+{{ with .Site.Social.twitter }}
     <meta name="twitter:site" content="@{{ . }}">
 {{ end }}