WIP table of contents

2025-06-13 09:57:30 -05:00 · 2023-10-21 21:49:04 -05:00
15 changed files with 68 additions and 48 deletions
--- a/archetypes/blog/index.md
+++ b/archetypes/blog/index.md
@ -8,7 +8,7 @@ comments: true
 draft: true

 authors:
-  - {{ with .Site.Params.author.name }}{{ . }}{{ else }}John Doe{{ end }}
+  - {{ with .Site.Author.name }}{{ . }}{{ else }}John Doe{{ end }}

 categories:
  - archetype-stuff
--- a/archetypes/default/index.md
+++ b/archetypes/default/index.md
@ -6,7 +6,7 @@ toc: true
 comments: false

 authors:
-  - {{ with .Site.params.author.name }}{{ . }}{{ else }}John Doe{{ end }}
+  - {{ with .Site.Author.name }}{{ . }}{{ else }}John Doe{{ end }}

 ---

--- a/assets/css/bobastyle.css
+++ b/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;
@ -858,22 +875,22 @@ aside {
 }

 aside.note {
-  background-color: var(--accent-blue-1);
+  background-color: var(--background-blue-1);
 }
 aside.info {
-  background-color: var(--accent-green-1);
+  background-color: var(--background-green-1);
 }
 aside.tip {
-  background-color: var(--accent-teal-1);
+  background-color: var(--background-teal-1);
 }
 aside.warning {
-  background-color: var(--accent-yellow-1);
+  background-color: var(--background-yellow-1);
 }
 aside.example {
-  background-color: var(--accent-purple-1);
+  background-color: var(--background-purple-1);
 }
 aside.quote {
-  background-color: var(--accent-1);
+  background-color: var(--background-1);
 }

 /* }}} */
@ -965,40 +982,21 @@ aside.quote {
    break-inside: avoid;
  }

-  .table-of-contents {
+  .table-of-contents:not(.print) {
    display: none;
  }

  .table-of-contents.print {
    display: block;
+    background-color: unset;
+    padding: 0;
+  }
+  .table-of-contents.print ul {
+    margin: 0;
  }

-  /*
-   * reduce usage of background colors
-   */
-
-  aside {
-    background-color: unset !important;
-    border: 4px solid;
-  }
-
-  aside.note {
-    border-color: var(--background-blue-1);
-  }
-  aside.info {
-    border-color: var(--background-green-1);
-  }
-  aside.tip {
-    border-color: var(--background-teal-1);
-  }
-  aside.warning {
-    border-color: var(--background-yellow-1);
-  }
-  aside.example {
-    border-color: var(--background-purple-1);
-  }
-  aside.quote {
-    border-color: var(--background-1);
+  #back-to-top {
+    display: none !important;
  }
 }

--- a/assets/js/bobatheme.js
+++ b/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 => {
--- a/config.yaml
+++ b/config.yaml
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@ -10,13 +10,13 @@ enableGitInfo: true
 taxonomies:
  _merge: deep

+author:
+  name: bbaovanc
+
 markup: # this just keeps the bobatheme markup styling
  _merge: deep

 params:
-  author:
-    name: bbaovanc
-
  # these are for the OpenGraph/Twitter embeds in Hugo
  description: Example website for bobatheme

--- a/layouts/_default/baseof.html
+++ b/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">
--- a/layouts/partials/figure.html
+++ b/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 }}">
--- a/layouts/partials/head.html
+++ b/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" }}
--- a/layouts/partials/page-metadata/item/authors.html
+++ b/layouts/partials/page-metadata/item/authors.html
@ -6,9 +6,9 @@
            {{ $authors := slice }}
            {{ range . }}
                {{ $url := (printf "authors/%s" (. | anchorize)) | absLangURL }}
-                {{ $authors = $authors | append (printf `<a href="%s">%s</a>` $url .) }}
+                {{ $authors = $authors | append (printf `<a href="%s">%s</a>` $url . | safeHTML) }}
            {{ end }}
-            {{ delimit $authors ", " | safeHTML }}
+            {{ delimit $authors ", " }}
        {{ else }}
            {{ delimit . ", " }}
        {{ end }}
--- a/layouts/partials/page-metadata/item/categories.html
+++ b/layouts/partials/page-metadata/item/categories.html
@ -6,6 +6,6 @@

    <div class="page-metadata-section categories" aria-label="{{ i18n "aria_post_meta_categories" }}">
        {{ partial "icon.html" "folder" }}
-        {{ delimit $categories ", " | safeHTML }}
+        {{ delimit $categories ", " }}
    </div>
 {{ end }}
--- a/layouts/partials/page-metadata/item/series.html
+++ b/layouts/partials/page-metadata/item/series.html
@ -6,6 +6,6 @@

    <div class="page-metadata-section series" aria-label="{{ i18n "aria_post_meta_series" }}">
        {{ partial "icon.html" "files" }}
-        {{ delimit $series ", " | safeHTML }}
+        {{ delimit $series ", " }}
    </div>
 {{ end }}
--- a/layouts/partials/page-metadata/item/tags.html
+++ b/layouts/partials/page-metadata/item/tags.html
@ -6,6 +6,6 @@

    <div class="page-metadata-section tags" aria-label="{{ i18n "aria_post_meta_tags" }}">
        {{ partial "icon.html" "tag" }}
-        {{ delimit $tags ", " | safeHTML }}
+        {{ delimit $tags ", " }}
    </div>
 {{ end }}
--- a/layouts/partials/remote_figure.html
+++ b/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 }}">
--- a/layouts/partials/series-box.html
+++ b/layouts/partials/series-box.html
@ -12,6 +12,6 @@
            This post is part of a series:
        {{ end }}

-        {{ delimit $series ", " | safeHTML }}
+        {{ delimit $series ", " }}
    </div>
 {{ end }}