WIP breadcrumb style

See #52

.gitignore

@@ -0,0 +1 @@
+.hugo_build.lock

.gitmodules

@@ -1,4 +1,4 @@
-[submodule "assets/feather"]
-	path = assets/feather
-	url = https://github.com/feathericons/feather.git
-        branch = master
+[submodule "assets/jam"]
+	path = assets/jam
+	url = https://github.com/michaelampr/jam.git
+	branch = master

README.md

@@ -1,2 +1,4 @@
 # bobatheme
-Simple Hugo theme
+
+The (boba) best Hugo theme. Contains everything I need for bbaovanc.com and
+boba.best.

archetypes/authors/_index.md

@@ -0,0 +1,15 @@
+---
+
+title: {{ replace .Name "-" " " | title }}
+
+---
+
+A short description about the author.
+
+<!--more-->
+
+Optionally provide more information about the author here. This part will only
+show on the author page, not on the authors list page.
+
+If you delete this section, DO NOT delete the summary separator (`<!--more-->`)
+or else the summary won't be shown.

archetypes/blog/index.md

@@ -1,13 +1,24 @@
 ---
 
-title: {{ replace .Name "-" " " | title }}
-date: {{ .Date | time.Format "2006-01-02" }}
+title: {{ replace .Name "-" " " | humanize }}
+date: {{ .Date }}
+lastmod: {{ .Date }}
 toc: true
+comments: true
 draft: true
 
+authors:
+  - {{ with .Site.Author.name }}{{ . }}{{ else }}John Doe{{ end }}
+
+categories:
+  - archetype-stuff
+
 tags:
   - awesome
 
+series:
+  - archetype
+
 # this will be shown for the article in list pages and in the page metadata
 # it can be either an image or video (this might change in the future, however)
 resources:

archetypes/categories/_index.md

@@ -0,0 +1,15 @@
+---
+
+title: {{ replace .Name "-" " " | title }}
+
+---
+
+A short summary of what the category is about.
+
+<!--more-->
+
+Optionally provide more information about the category here. This part will only
+show on the category page, not on the category list page.
+
+If you delete this section, DO NOT delete the summary separator (`<!--more-->`)
+or else the summary won't be shown.

archetypes/default/index.md

@@ -1,8 +1,12 @@
 ---
 
-title: {{ replace .Name "-" " " | title }}
+title: {{ replace .Name "-" " " | humanize }}
 menu: main
 toc: true
+comments: false
+
+authors:
+  - {{ with .Site.Author.name }}{{ . }}{{ else }}John Doe{{ end }}
 
 ---
 

archetypes/series/_index.md

@@ -0,0 +1,15 @@
+---
+
+title: {{ replace .Name "-" " " | title }}
+
+---
+
+Some information about the series.
+
+<!--more-->
+
+Optionally provide more information about the series here. This part will only
+show on the series page, not on the series list page.
+
+If you delete this section, DO NOT delete the summary separator (`<!--more-->`)
+or else the summary won't be shown.

archetypes/tags/_index.md

@@ -0,0 +1,15 @@
+---
+
+title: {{ replace .Name "-" " " | title }}
+
+---
+
+A short summary of what the tag is.
+
+<!--more-->
+
+Optionally provide more information about the tag here. This part will only show
+on the tag page, not on the tags list page.
+
+If you delete this section, DO NOT delete the summary separator (`<!--more-->`)
+or else the summary won't be shown.

assets/css/bobastyle.css

@@ -2,36 +2,191 @@
  * https://github.com/BBaoVanC/bobatheme.
  */
 
+:root {
+  --background-0: #111111;  /* lch(5, 0, X) */
+  --background-1: #212121;  /* lch(12.5, 0, X) */
+  --background-2: #303030;  /* lch(20, 0, X) */
+  --background-3: #414141;  /* lch(27.5, 0, X) */
 
-/* Post layout (in list pages) */
-.post {
-  margin-bottom: 40px;
+  --background-pink-1:      #331821;  /* lch(12.5, 15, 0) */
+  --background-red-1:       #331917;  /* lch(12.5, 15, 30) */
+  --background-orange-1:    #2e1c0e;  /* lch(12.5, 15, 60) */
+  --background-yellow-1:    #262008;  /* lch(12.5, 15, 90) */
+  --background-lime-1:      #1b230c;  /* lch(12.5, 15, 120) */
+  --background-green-1:     #0e2516;  /* lch(12.5, 15, 150) */
+  --background-turquoise-1: #012620;  /* lch(12.5, 15, 180) */
+  --background-teal-1:      #00262b;  /* lch(12.5, 15, 210) -- out of sRGB */
+  --background-cerulean-1:  #032432;  /* lch(12.5, 15, 240) */
+  --background-blue-1:      #152135;  /* lch(12.5, 15, 270) */
+  --background-purple-1:    #241d33;  /* lch(12.5, 15, 300) */
+  --background-magenta-1:   #2e1a2b;  /* lch(12.5, 15, 330) */
+
+  --background-pink-2:      #4b2431;  /* lch(20, 20, 0) */
+  --background-red-2:       #4a2623;  /* lch(20, 20, 30) */
+  --background-orange-2:    #432a17;  /* lch(20, 20, 60) */
+  --background-yellow-2:    #373012;  /* lch(20, 20, 90) */
+  --background-lime-2:      #283416;  /* lch(20, 20, 120) */
+  --background-green-2:     #163721;  /* lch(20, 20, 150) */
+  --background-turquoise-2: #003830;  /* lch(20, 20, 180) -- out of sRGB */
+  --background-teal-2:      #00373e;  /* lch(20, 20, 210) -- out of sRGB */
+  --background-cerulean-2:  #013549;  /* lch(20, 20, 240) */
+  --background-blue-2:      #1f314e;  /* lch(20, 20, 270) */
+  --background-purple-2:    #352c4a;  /* lch(20, 20, 300) */
+  --background-magenta-2:   #43263f;  /* lch(20, 20, 330) */
+
+  --background-accent-1: var(--background-blue-1);
+  --background-accent-2: var(--background-blue-2);
+
+  --text-0: #d4d4d4;  /* lch(85, 0, X) */
+  --text-1: #d4d4d4;  /* lch(85, 0, X) */
+  --text-2: #d4d4d4;  /* lch(85, 0, X) */
+  --text-3: #e9e9e9;  /* lch(92.5, 0, X) */
+
+  --text-gray-0: #ababab; /* lch(70, 0, X) */
+  --text-gray-1: #919191; /* lch(60, 0, X) */
+
+  --link-0: #3a94fb; /* lch(60, 60, 270) */
+
+  --figure-border: #1f5593; /* lch(35, 40, 270) */
+
+  --pagination-active-hover-text: black;
+  --pagination-active-background: #1a3d69; /* lch(25, 30, 270) */
+  --pagination-active-hover-background: #2061a8; /* lch(40, 45, 270) */
 }
 
-.post-title {
+@media print, (prefers-color-scheme: light) {
+  :root {
+    --background-0: #f1f1f1;  /* lch(95, 0, X) */
+    --background-1: #dbdbdb;  /* lch(87.5, 0, X) */
+    --background-2: #c6c6c6;  /* lch(80, 0, X) */
+    --background-3: #b2b2b2;  /* lch(72.5, 0, X) */
+
+    --background-pink-1:      #f7d1dc;  /* lch(87.5, 15, 0) */
+    --background-red-1:       #f8d2ce;  /* lch(87.5, 15, 30) */
+    --background-orange-1:    #f1d6c3;  /* lch(87.5, 15, 60) */
+    --background-yellow-1:    #e4dbbf;  /* lch(87.5, 15, 90) */
+    --background-lime-1:      #d5dfc2;  /* lch(87.5, 15, 120) */
+    --background-green-1:     #c6e3cc;  /* lch(87.5, 15, 150) */
+    --background-turquoise-1: #bce4db;  /* lch(87.5, 15, 180) */
+    --background-teal-1:      #bae3e9;  /* lch(87.5, 15, 210) */
+    --background-cerulean-1:  #c2e0f4;  /* lch(87.5, 15, 240) */
+    --background-blue-1:      #d0dcf8;  /* lch(87.5, 15, 270) */
+    --background-purple-1:    #e1d7f4;  /* lch(87.5, 15, 300) */
+    --background-magenta-1:   #efd3ea;  /* lch(87.5, 15, 330) */
+
+    --background-pink-2:      #fbb1c8;  /* lch(80, 30, 0) */
+    --background-red-2:       #fbb4ac;  /* lch(80, 30, 30) */
+    --background-orange-2:    #eebc97;  /* lch(80, 30, 60) */
+    --background-yellow-2:    #d6c58e;  /* lch(80, 30, 90) */
+    --background-lime-2:      #b8ce95;  /* lch(80, 30, 120) */
+    --background-green-2:     #9ad4a9;  /* lch(80, 30, 150) */
+    --background-turquoise-2: #81d6c5;  /* lch(80, 30, 180) */
+    --background-teal-2:      #7ad5e1;  /* lch(80, 30, 210) */
+    --background-cerulean-2:  #8cd0f6;  /* lch(80, 30, 240) */
+    --background-blue-2:      #adc8fe;  /* lch(80, 30, 270) */
+    --background-purple-2:    #d0bef7;  /* lch(80, 30, 300) */
+    --background-magenta-2:   #ecb5e3;  /* lch(80, 30, 330) */
+
+    --background-accent-1: var(--background-blue-1);
+    --background-accent-2: var(--background-blue-2);
+
+    --text-0: #262626;  /* lch(15, 0, X) */
+    --text-1: #262626;  /* lch(15, 0, X) */
+    --text-2: #262626;  /* lch(15, 0, X) */
+    --text-3: #171717;  /* lch(72.5, 0, X) */
+
+    --text-gray-0: #474747; /* lch(30, 0, X) */
+    --text-gray-1: #5e5e5e; /* lch(40, 0, X) */
+
+    --link-0: #2061a8; /* lch(40, 45, 270) */
+
+    --figure-border: #367acd; /* lch(50, 50, 270) */
+
+    --pagination-active-hover-text: white;
+    --pagination-active-background: #9fbaf0; /* lch(75, 30, 270) */
+    --pagination-active-hover-background: #6193e0; /* lch(60, 45, 270) */
+  }
+}
+
+@media print {
+  :root {
+    --background-0: #fff;
+  }
+}
+
+
+
+/* Post layout (in list pages) */
+.list-page-content {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.page-list ul,
+.series-taxonomy ul {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: 0;
+  gap: 40px;
+}
+
+.series-taxonomy ul {
+  gap: 80px;
+}
+
+.page-list li,
+.series-taxonomy li {
+  padding-top: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-bottom: 24px;
+  border-radius: 12px;
+  background-color: var(--background-1);
+  color: var(--text-1);
+}
+
+.post-series-position {
+  position: relative;
+  float: right;
+  opacity: .75;
+}
+
+.post-title,
+.author-name {
   margin-bottom: 10px;
 }
 
-.post-title a {
+.post-title a,
+.author-name a {
   color: inherit;
   text-decoration: inherit;
 }
 
-.post-meta-item {
+.post-meta-item,
+.author-meta-item {
   margin-right: 10px;
-  white-space: nowrap;
+  display: inline-block;
 }
 
-.post-metadata {
+.post-metadata,
+.author-metadata {
   margin-bottom: 15px;
 }
 
+.categories,
+.tags,
+.series {
+  margin-top: 10px;
+}
+
 .post-media {
   margin-top: 15px;
-  display: inline-block;
 }
 
-.post-description {
+.post-description,
+.author-description {
   margin-top: 10px;
 }
 
@@ -41,12 +196,120 @@
 
 
 
-/* Header formatting (website title and article section headers) */
-.top {
-  margin: 20px;
+/* Taxonomy list format */
+.taxonomy-list a,
+.taxonomy-list .taxonomy-metadata {
+  white-space: nowrap;
 }
 
-.header a, .section-header a {
+.taxonomy-list p {
+  margin: 0;
+}
+
+.taxonomy-list ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.taxonomy-list li {
+  background-color: var(--background-1);
+  color: var(--text-1);
+  padding: 8px 12px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+
+.taxonomy-list-left {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 480px) {
+  .taxonomy-list li {
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .taxonomy-list-left {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+
+
+/* Series list format */
+.series-pages ul {
+  display: flex;
+  gap: 10px;
+  flex-flow: row wrap;
+  list-style: none;
+  background-color: var(--background-0);
+  color: var(--text-0);
+  padding: 8px;
+  border-radius: 16px;
+}
+
+.series-pages li {
+  flex: 1;
+  min-width: 49%;
+}
+
+
+
+/* Subsection formatting */
+.sections {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.section {
+  background-color: var(--background-1);
+  color: var(--text-1);
+  border-radius: 12px;
+  padding: 1px 25px;
+}
+
+.section:hover {
+  background-color: var(--background-2);
+  color: var(--text-2);
+}
+
+.section-title {
+  margin: 10px 0;
+}
+
+.section-anchor {
+  color: inherit;
+}
+
+.section-anchor:hover {
+  text-decoration: none;
+}
+
+.section-description {
+  margin-bottom: 5px;
+}
+
+.view-section {
+  margin-top: 5px;
+}
+
+
+
+/* Header formatting (website title and article section headers) */
+h1.header {
+  font-size: 1.5em;
+}
+
+.header a,
+.section-header a {
   color: inherit;
 }
 
@@ -58,57 +321,283 @@
 
 
 /* Content formatting */
-#table-of-contents h2 {
-  font-size: 20px;
+.series-box {
+  background-color: var(--background-1);
+  color: var(--text-1);
+  padding: 8px 16px;
+  border-radius: 8px;
+  margin: 15px 0;
 }
 
-.content, footer {
+.table-of-contents {
+  background-color: var(--background-1);
+  color: var(--text-1);
+  padding: 8px 20px;
+  border-radius: 8px;
+  margin: 10px 0;
+}
+
+.table-of-contents summary {
+  cursor: pointer;
+}
+
+.table-of-contents.print {
+  display: none;
+  padding: 8px 15px;
+}
+
+
+/* Related posts */
+.full-width-page-list {
+  /* make left/right 0 margin so it takes up full width */
+  margin: 25px 0;
+}
+
+.full-width-page-list > hr,
+.full-width-page-list > h1 {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.full-width-page-list li {
+  min-width: 300px;
+  max-width: 300px;
+
+}
+
+.full-width-page-list li:first-child {
+  margin-left: 20px;
+}
+.full-width-page-list li:last-child {
+  margin-right: 20px;
+}
+
+@media (max-width: 720px) {
+  /* when the screen is smaller than max size, make sure that the .related div
+   * still reaches the screen edge. then if the posts overflow and require
+   * scrolling, you can see it cut off on the side of your phone screen
+   */
+  .full-width-page-list {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+}
+
+@media (min-width: 720px) {
+  .full-width-page-list {
+    /* this makes it full width -- 720px max-width on body it is exactly 720px
+     * so .related takes up full width
+     */
+    margin-left: calc(-100vw / 2 + 720px / 2);
+    margin-right: calc(-100vw / 2 + 720px / 2);
+  }
+}
+
+.full-width-page-list .page-list ul {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  overflow-x: scroll;
+}
+
+
+/* Social media share buttons */
+.share-buttons {
+  background: var(--background-1);
+  color: var(--text-1);
+  margin: 25px 0;
+  padding: 8px 0;
+  border-radius: 8px;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.share-buttons button,
+.share-buttons a {
+  background-color: var(--background-2);
+  color: var(--text-2);
+  padding: 4px;
+  border-radius: 8px;
+}
+
+.share-buttons button {
+  border: none;
+}
+
+.share-buttons svg {
+  width: 32px;
+  height: 32px;
+}
+
+/* https://stackoverflow.com/a/72073682/19003757 */
+/*
+.telegram-share > svg {
+  transform: scale(1.5);
+  margin: 9px -9px -9px 9px;
+}
+*/
+
+
+/* See also formating */
+.see-also {
+  background-color: var(--background-1);
+  color: var(--text-1);
+  padding: 8px 12px;
+  border-radius: 8px;
+  margin: 10px 0;
+}
+
+.see-also p {
+  margin: 0;
+}
+
+
+/* Back to top */
+#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;
+}
+
+
+
+/* Navbar formatting */
+.topbar {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  background-color: var(--background-1);
+  color: var(--text-1);
+  border-radius: 8px;
+  margin-top: 5px;
+  padding: 4px;
+  align-items: flex-start;
+}
+
+.navbar {
+  display: flex;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.navbar a {
+  padding: 8px 12px;
+  border-radius: 12px;
+  white-space: nowrap;
+}
+
+.navbar-item:hover,
+.langpicker summary:hover,
+.langpicker[open] summary {
+  background-color: var(--background-3);
+  text-decoration: none;
+}
+
+.langpicker summary:hover,
+.langpicker[open] summary {
+  color: var(--text-3);
+}
+
+.topbar .active {
+  font-weight: bold;
+}
+
+.langpicker {
+  position: relative;
+  white-space: nowrap;
+}
+
+.langpicker summary {
+  cursor: pointer;
+  margin-left: 24px;
+  padding: 8px 12px;
+  border-radius: 12px;
+}
+
+.langpicker .languages {
+  position: absolute;
+  margin-top: 8px;
+  right: 0;
+  background-color: var(--background-1);
+  color: var(--text-1);
+  border: 2px solid var(--background-2);
+  padding: 8px 12px;
+  border-radius: 8px;
+  list-style: none;
+}
+
+.langpicker .unavailable {
+  color: inherit;
+}
+
+.langpicker .unavailable:hover {
+  cursor: not-allowed;
+  text-decoration: none;
+}
+
+
+
+/* Basic elements */
+html {
+  scroll-behavior: smooth;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+body {
+  background-color: var(--background-0);
+  color: var(--text-0);
+  font-family: "Open Sans", "Noto Sans", sans-serif;
   margin: 20px;
+  max-width: 720px;
+  overflow-wrap: break-word;
+}
+
+@media (min-width: 760px) {
+  body {
+    margin: 20px auto;
+  }
 }
 
 footer {
   text-align: center;
 }
 
-
-
-/* Navbar formatting */
-.navbar, .langbar {
-  margin: 5px 0px;
+footer p {
+  margin: 0;
 }
 
-(.navbar, .langbar) h2 {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-.navbar-item, .langbar-item {
-  margin-right: 5px;
-}
-
-
-
-/* Basic elements */
-body {
-  background-color: #111;
-  color: lightgray;
-  font-family: "Open Sans", "Noto Sans", sans-serif;
-  margin: auto;
-  max-width: 720px;
-  overflow-wrap: break-word;
-}
-
-img, video {
+img,
+video {
   max-width: 100%;
 }
 
-img:not(.noborder), video:not(.noborder) {
+.post-media > figure.border img,
+.post-media > figure.border video {
   padding: 5px;
-  border: 5px solid #1b5b9b;
+  border: 7px solid var(--figure-border);
+}
+
+figure.border img,
+figure.border video {
+  padding: 5px;
+  border: 2px solid var(--figure-border);
 }
 
 figure {
   margin: auto;
+  display: inline-block;
 }
 
 figcaption {
@@ -118,7 +607,7 @@ figcaption {
 }
 
 a {
-  color: #4da6ff;
+  color: var(--link-0);
   text-decoration: inherit;
 }
 
@@ -127,15 +616,36 @@ a:hover {
 }
 
 blockquote {
-  border-left: 5px solid #333;
-}
-
-blockquote p {
+  border-left: 5px solid var(--background-2);
   padding-left: 15px;
 }
 
 hr {
-  border-color: #444;
+  border: 1px solid var(--background-3);
+}
+
+table.markdown {
+  border-collapse: collapse;
+  border: 2px solid var(--text-1);
+}
+
+.markdown thead {
+  background-color: var(--background-2);
+  color: var(--text-2);
+}
+
+.markdown th,
+.markdown td {
+  padding: 8px;
+}
+
+.markdown tbody tr:nth-child(odd) {
+  background-color: var(--background-0);
+  color: var(--text-0);
+}
+.markdown tbody tr:nth-child(even) {
+  background-color: var(--background-1);
+  color: var(--text-1);
 }
 
 * {
@@ -145,13 +655,21 @@ hr {
 
 
 /* Code blocks */
+.highlight {
+  margin: 16px 0;
+}
+
 .highlight > pre {
   padding: 12px 8px;
   overflow: auto;
 }
 
 :not(pre) > code {
-  background-color: #282828;
+  background-color: var(--background-2);
+  /* Disable this because it overrides inline code blocks that are
+   * also links
+  color: var(--text-2);
+   */
   padding: 2px 4px;
   overflow-wrap: break-word;
 }
@@ -166,11 +684,53 @@ code {
 
 
 
+/* Asides */
+aside {
+  padding: 8px 16px;
+  margin: 16px 0;
+  border-radius: 8px;
+  color: var(--text-1);
+}
+
+.aside-title {
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  font-weight: bold;
+}
+
+.aside-content > :first-child {
+  margin-top: 0;
+}
+.aside-content > :last-child {
+  margin-bottom: 0;
+}
+
+aside.note {
+  background-color: var(--background-blue-1);
+}
+aside.info {
+  background-color: var(--background-green-1);
+}
+aside.tip {
+  background-color: var(--background-teal-1);
+}
+aside.warning {
+  background-color: var(--background-yellow-1);
+}
+aside.example {
+  background-color: var(--background-purple-1);
+}
+aside.quote {
+  background-color: var(--background-1);
+}
+
+
+
 /* Icons */
 .icon {
   width: 20px;
   height: 20px;
-  color: lightgray;
+  color: var(--text-1);
   text-align: center;
   display: inline;
   vertical-align: middle;
@@ -187,6 +747,7 @@ h1 svg.icon {
 .pagination {
   list-style: none;
   text-align: center;
+  padding: 0;
 }
 
 .page-item {
@@ -196,43 +757,178 @@ h1 svg.icon {
 .page-link {
   padding: 8px 16px;
   border-radius: 5px;
-  color: lightgray;
+  color: var(--text-1);
 }
 
 .page-item.active .page-link {
-  background-color: #163b64;
+  background-color: var(--pagination-active-background);
   color: inherit;
 }
 
 .page-item.active .page-link:hover {
-  background-color: #2b72c0;
-  color: white;
+  background-color: var(--pagination-active-hover-background);
+  color: var(--pagination-active-hover-text);
+  cursor: default;
 }
 
 .page-link:hover {
-  background-color: #444;
-  color: white;
   text-decoration: none;
 }
 
+:not(li.disabled) > .page-link:hover {
+  background-color: var(--background-3);
+}
+
+li.disabled {
+  opacity: .5;
+}
+
+li.disabled > .page-link:hover {
+  cursor: not-allowed;
+}
+
+
+
+/* Breadcrumb navigation */
+.breadcrumb {
+  margin: 16px 0;
+}
+
+.breadcrumb ul {
+  padding: 0;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  flex-grow: 1;
+}
+
+.breadcrumb li {
+  display: inline;
+  padding: 8px;
+  background-color: var(--background-1);
+}
+
+.breadcrumb li:hover {
+  background-color: var(--background-2);
+  cursor: pointer;
+}
+
+.breadcrumb li a:hover {
+  text-decoration: none;
+}
+
+.breadcrumb li.active:hover {
+  cursor: default;
+}
+
+.breadcrumb li:first-child {
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+  padding-left: 12px;
+}
+.breadcrumb li:last-child {
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+  padding-right: 12px;
+}
+
+
+
+/* Previous and next page */
+.prevnext {
+  display: flex;
+  margin: 20px 0;
+}
+
+.prevnext > * {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  background-color: var(--background-1);
+  color: var(--text-1);
+  padding: 8px 16px;
+}
+
+.prevnext > a:hover {
+  background-color: var(--background-2);
+  color: var(--text-2);
+  text-decoration: none;
+}
+
+.prevnext > .prev {
+  text-align: left;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.prevnext > .next {
+  text-align: right;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.prevnext .prev-caption,
+.prevnext .next-caption {
+  opacity: 65%;
+}
+
+.prevnext .prev-post,
+.prevnext .next-post {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
+
+/* Light mode */
+@media print,
+(prefers-color-scheme: light) {
+  li.disabled {
+    opacity: .25;
+  }
+}
+
 
 
 /* Print compatibility */
 @media print {
-  .top, .section-header-link {
+  .top,
+  .section-header-link,
+  .post-meta-edit-history,
+  .prevnext,
+  .share-buttons,
+  .related-posts,
+  .latest-posts {
     display: none;
   }
 
-  .icon {
-    color: black;
-  }
-
-  :not(pre) > code {
-    background-color: lightgray;
+  * {
+    -webkit-print-color-adjust: exact !important;
+    color-adjust: exact !important;
   }
 
   body {
-    background-color: white;
-    color: black;
+    max-width: 100%;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    break-inside: avoid;
+  }
+
+  .table-of-contents {
+    display: none;
+  }
+
+  .table-of-contents.print {
+    display: block;
+  }
+
+  #back-to-top {
+    display: none !important;
   }
 }

assets/css/starwars.css

@@ -1,116 +0,0 @@
-@media screen and (max-width: 700px) {
-  .row {
-    flex-direction: column;
-  }
-}
-@media screen and (max-width: 400px) {
-  .navbar a {
-    float: none;
-    width: 100%;
-  }
-}
-
-body, html {
-  height: 100%;
-}
-
-body {
-  font-family: sans-serif;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-}
-a {
-  color: blue;
-}
-
-.header {
-  padding: 10px;
-  text-align: center;
-  background: url(../images/stars.png);
-  background-size: cover;
-  color: white;
-}
-.header h1 {
-  font-size: 50px;
-  font-weight: bold;
-  transform-origin: 50% 100%;
-  transform: perspective(350px) rotateX(25deg);
-  color: yellow;
-}
-
-.navbar {
-  overflow: hidden;
-  background-color: #999;
-}
-.navbar a {
-  float: left;
-  display: block;
-  color: white;
-  text-align: center;
-  padding: 14px 20px;
-  text-decoration: none;
-}
-/* .navbar a.right {
-  float: right;
-} */
-.navbar a:hover {
-  background-color: #ddd;
-  color: black;
-}
-
-* {
-  box-sizing: border-box;
-}
-.row {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-}
-.side {
-  width: 25%;
-  background-color: lightgray;
-  padding: 20px;
-}
-.main {
-  width: 75%;
-  background-color: white;
-  padding: 20px;
-}
-.footer {
-  padding: 20px;
-  text-align: center;
-  background: #ddd;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: black;
-  }
-  a {
-    color: #4da6ff;
-  }
-  .navbar {
-    background-color: #222;
-  }
-  .navbar a {
-    color: lightgray;
-  }
-  .navbar a:hover {
-    background-color: #444;
-    color: white;
-  }
-  .side {
-    background-color: #111;
-    color: lightgray;
-  }
-  .main {
-    background-color: black;
-    color: lightgray;
-  }
-  .footer {
-    background: #222;
-    color: lightgray;
-  }
-  max-width: 650px;
-}

assets/css/syntax-light.css

@@ -0,0 +1,96 @@
+@media print, (prefers-color-scheme: light) {
+  .chroma {
+    color: black;
+  }
+/* Other */ .chroma .x { color: #000000 }
+/* Error */ .chroma .err { color: #a40000 }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Keyword */ .chroma .k { color: #204a87; font-weight: bold }
+/* KeywordConstant */ .chroma .kc { color: #204a87; font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { color: #204a87; font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { color: #204a87; font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { color: #204a87; font-weight: bold }
+/* KeywordReserved */ .chroma .kr { color: #204a87; font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #204a87; font-weight: bold }
+/* Name */ .chroma .n { color: #000000 }
+/* NameAttribute */ .chroma .na { color: #c4a000 }
+/* NameBuiltin */ .chroma .nb { color: #204a87 }
+/* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 }
+/* NameClass */ .chroma .nc { color: #000000 }
+/* NameConstant */ .chroma .no { color: #000000 }
+/* NameDecorator */ .chroma .nd { color: #5c35cc; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #ce5c00 }
+/* NameException */ .chroma .ne { color: #cc0000; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #000000 }
+/* NameFunctionMagic */ .chroma .fm { color: #000000 }
+/* NameLabel */ .chroma .nl { color: #f57900 }
+/* NameNamespace */ .chroma .nn { color: #000000 }
+/* NameOther */ .chroma .nx { color: #000000 }
+/* NameProperty */ .chroma .py { color: #000000 }
+/* NameTag */ .chroma .nt { color: #204a87; font-weight: bold }
+/* NameVariable */ .chroma .nv { color: #000000 }
+/* NameVariableClass */ .chroma .vc { color: #000000 }
+/* NameVariableGlobal */ .chroma .vg { color: #000000 }
+/* NameVariableInstance */ .chroma .vi { color: #000000 }
+/* NameVariableMagic */ .chroma .vm { color: #000000 }
+/* Literal */ .chroma .l { color: #000000 }
+/* LiteralDate */ .chroma .ld { color: #000000 }
+/* LiteralString */ .chroma .s { color: #4e9a06 }
+/* LiteralStringAffix */ .chroma .sa { color: #4e9a06 }
+/* LiteralStringBacktick */ .chroma .sb { color: #4e9a06 }
+/* LiteralStringChar */ .chroma .sc { color: #4e9a06 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #4e9a06 }
+/* LiteralStringDoc */ .chroma .sd { color: #8f5902; font-style: italic }
+/* LiteralStringDouble */ .chroma .s2 { color: #4e9a06 }
+/* LiteralStringEscape */ .chroma .se { color: #4e9a06 }
+/* LiteralStringHeredoc */ .chroma .sh { color: #4e9a06 }
+/* LiteralStringInterpol */ .chroma .si { color: #4e9a06 }
+/* LiteralStringOther */ .chroma .sx { color: #4e9a06 }
+/* LiteralStringRegex */ .chroma .sr { color: #4e9a06 }
+/* LiteralStringSingle */ .chroma .s1 { color: #4e9a06 }
+/* LiteralStringSymbol */ .chroma .ss { color: #4e9a06 }
+/* LiteralNumber */ .chroma .m { color: #0000cf; font-weight: bold }
+/* LiteralNumberBin */ .chroma .mb { color: #0000cf; font-weight: bold }
+/* LiteralNumberFloat */ .chroma .mf { color: #0000cf; font-weight: bold }
+/* LiteralNumberHex */ .chroma .mh { color: #0000cf; font-weight: bold }
+/* LiteralNumberInteger */ .chroma .mi { color: #0000cf; font-weight: bold }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #0000cf; font-weight: bold }
+/* LiteralNumberOct */ .chroma .mo { color: #0000cf; font-weight: bold }
+/* Operator */ .chroma .o { color: #ce5c00; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #204a87; font-weight: bold }
+/* Punctuation */ .chroma .p { color: #000000; font-weight: bold }
+/* Comment */ .chroma .c { color: #8f5902; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #8f5902; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #8f5902; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #8f5902; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #8f5902; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #8f5902; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #8f5902; font-style: italic }
+/* Generic */ .chroma .g { color: #000000 }
+/* GenericDeleted */ .chroma .gd { color: #a40000 }
+/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
+/* GenericError */ .chroma .gr { color: #ef2929 }
+/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #00a000 }
+/* GenericOutput */ .chroma .go { color: #000000; font-style: italic }
+/* GenericPrompt */ .chroma .gp { color: #8f5902 }
+/* GenericStrong */ .chroma .gs { color: #000000; font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
+/* GenericTraceback */ .chroma .gt { color: #a40000; font-weight: bold }
+/* GenericUnderline */ .chroma .gl { color: #000000; text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #f8f8f8; text-decoration: underline }
+}
+
+@media (prefers-color-scheme: light) {
+  /* Background */ .chroma { background-color: #f8f8f8 }
+}
+
+@media print {
+  .chroma {
+    background-color: white;
+  }
+}

assets/js/back-to-top.js

@@ -0,0 +1,8 @@
+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";
+    }
+}

assets/js/share-event.js

@@ -0,0 +1,3 @@
+function share_event(service) {
+    // this function does nothing by default
+}

config.yaml

@@ -0,0 +1,26 @@
+markup:
+  highlight:
+    noClasses: false
+    lineNos: true
+
+params:
+  readingtime: true
+
+taxonomies:
+  category: categories
+  tag: tags
+  author: authors
+  series: series
+
+privacy:
+  googleAnalytics:
+    disable: true
+
+  twitter:
+    enableDNT: true
+
+  vimeo:
+    enableDNT: true
+
+  youtube:
+    privacyEnhanced: true

data/meses.toml

@@ -1,12 +0,0 @@
-1 = "enero"
-2 = "febrero"
-3 = "marzo"
-4 = "abril"
-5 = "mayo"
-6 = "julio"
-7 = "junio"
-8 = "agosto"
-9 = "septiembre"
-10 = "octubre"
-11 = "noviembre"
-12 = "diciembre"

data/meses.yml

@@ -0,0 +1,12 @@
+1: "enero"
+2: "febrero"
+3: "marzo"
+4: "abril"
+5: "mayo"
+6: "julio"
+7: "junio"
+8: "agosto"
+9: "septiembre"
+10: "octubre"
+11: "noviembre"
+12: "diciembre"

exampleSite/config.toml

@@ -1,41 +0,0 @@
-baseURL = "https://example.com"
-theme = "bobatheme"
-defaultContentLanguage = "en"
-author = "bbaovanc"
-sectionPagesMenu = "main"
-enableRobotsTXT = true
-paginate = 5
-enableGitInfo = true
-
-[markup]
-  [markup.highlight]
-    noClasses = false
-    lineNos = true
-
-[params]
-  # these are for the OpenGraph/Twitter embeds in Hugo
-  description = "Example website for bobatheme"
-
-  # these are for favicons in bobatheme
-  faviconICO = "/favicon.ico"
-  faviconPNG = "/favicon.png"
-
-  # show word count and/or reading time
-  wordcount = true
-  readingtime = true
-
-  # used for last update
-  repoURL = "https://github.com/BBaoVanC/bobatheme"
-
-[languages]
-  [languages.en]
-    languageName = "English"
-    title = "Example Website"
-    weight = 1
-
-  [languages.es]
-    languageName = "Español"
-    title = "Sitio web ejemplo"
-    weight = 2
-    [languages.es.params]
-      description = "Sitio web ejemplo para bobatheme"

exampleSite/config.yaml

@@ -0,0 +1,70 @@
+baseURL: https://example.com
+theme: bobatheme
+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
+
+taxonomies:
+  _merge: deep
+
+author:
+  name: bbaovanc
+
+markup: # this just keeps the bobatheme markup styling
+  _merge: deep
+
+params:
+  # these are for the OpenGraph/Twitter embeds in Hugo
+  description: Example website for bobatheme
+
+  # these are for favicons in bobatheme (disabled by default)
+  # faviconSVG: favicon.svg
+  # appleTouchPNG: apple-touch-icon.png
+
+  # show reading time (enabled by default)
+  # readingtime: true
+
+  # used for "View source" (unset by default)
+  # gitFileURL: https://github.com/BBaoVanC/bobatheme/blob/master
+  # gitFileIcon: github-circle
+  # gitHistoryURL: https://github.com/BBaoVanC/bobatheme/commits/master
+
+  # display a "Latest Posts" section on the homepage below its content
+  homepageLatestPosts: true
+
+  # social media share icons
+  # shareButtons:
+  #   twitter: true
+  #   facebook: true
+  #   linkedin: true
+  #   reddit: true
+  #   telegram: true
+  #   print: true
+
+  # show "Latest Posts" section at bottom of content pages
+  # latestPostsOnContent: true
+
+  # footer: >-
+  #   Some example text for the footer.
+
+
+# see https://gohugo.io/about/hugo-and-gdpr/#all-privacy-settings
+# you probably want to keep this default
+privacy:
+  _merge: deep
+
+languages:
+  en:
+    languageName: English
+    title: Example Website
+    weight: 1
+
+  es:
+    languageName: Español
+    title: Sitio web ejemplo
+    weight: 2
+    params:
+      description: Sitio web ejemplo para bobatheme

i18n/en.toml

@@ -1,31 +0,0 @@
-[credit_comment]
-  other = "<!-- bobatheme is available under the MIT license at https://github.com/BBaoVanC/bobatheme. -->"
-
-[long_date]
-  other = "{{ .Date.Format `January 2, 2006` }}"
-
-[wordcount]
-  one = "{{ . }} word"
-  other = "{{ . }} words"
-
-[readingtime]
-  one = "{{ . }} min"
-  other = "{{ . }} mins"
-
-[read_more]
-  other = "Read more"
-
-
-[browser_no_video_support]
-  other = "Your browser does not support video."
-
-
-[filtering_for]
-  other = "Filtering for \"{{ . }}\""
-
-[no_posts]
-  other = "No posts here!"
-
-
-[table_of_contents]
-  other = "Table of Contents"

i18n/en.yaml

@@ -0,0 +1,128 @@
+# Misc
+credit_comment:
+  other: "<!-- bobatheme is available under the MIT license at https://github.com/BBaoVanC/bobatheme. -->"
+
+table_of_contents:
+  other: "Table of Contents"
+
+browser_no_video_support:
+  other: "Your browser does not support video."
+
+latest_posts:
+  other: "Latest Posts"
+
+see_also:
+  other: "SEE ALSO:"
+
+
+# Meta items
+long_date:
+  other: "{{ .Date.Format `January 2, 2006` }}"
+
+wordcount:
+  one: "{{ . }} word"
+  other: "{{ . }} words"
+
+readingtime:
+  one: "{{ . }} min"
+  other: "{{ . }} mins"
+
+edit_history:
+  other: "Edit history"
+
+
+# Post count
+no_posts:
+  other: "No posts here!"
+
+post_count:
+  one: "{{ . }} post"
+  other: "{{ . }} posts"
+
+
+# Navigation
+read_more:
+  other: "Read more"
+
+related_posts:
+  other: "Related Posts"
+
+older_post:
+  other: "Older"
+
+newer_post:
+  other: "Newer"
+
+
+# ARIA labels
+aria_header_link:
+  other: "header link"
+
+aria_back_to_top_button:
+  other: "back to top button"
+
+aria_rss_link:
+  other: "RSS feed link"
+
+aria_post_meta_edit_history:
+  other: "link to page edit history"
+
+aria_post_meta_translations:
+  other: "translations"
+
+aria_post_meta_categories:
+  other: "categories"
+
+aria_post_meta_tags:
+  other: "tags"
+
+aria_post_meta_reading_time:
+  other: "reading time"
+
+aria_post_meta_authors:
+  other: "authors"
+
+aria_post_meta_series:
+  other: "series"
+
+aria_breadcrumbnav:
+  other: "breadcrumb navigation bar"
+
+aria_post_metadata:
+  other: "post metadata"
+
+aria_author_metadata:
+  other: "author metadata"
+
+aria_taxonomy_metadata:
+  other: "taxonomy metadata"
+
+aria_post_meta_date:
+  other: "date"
+
+aria_post_meta_modified_date:
+  other: "last modified date"
+
+aria_author_post_count:
+  other: "post count"
+
+aria_author_word_count:
+  other: "word count"
+
+aria_taxonomy_post_count:
+  other: "post count"
+
+aria_series_metadata:
+  other: "series metadata"
+
+aria_navbar:
+  other: "navigation bar"
+
+aria_langpicker:
+  other: "language picker"
+
+aria_langpicker_list:
+  other: "language list"
+
+aria_table_of_contents:
+  other: "table of contents"

i18n/es.toml

@@ -1,31 +0,0 @@
-[credit_comment]
-  other = "<!-- bobatheme está disponible en GitHub basado en la licensia MIT: https://github.com/BBaoVanC/bobatheme. -->"
-
-[long_date]
-  other = "{{ .Date.Day }} de {{ index .Data.meses (printf `%d` .Date.Month) }} de {{ .Date.Year }}"
-
-[wordcount]
-  one = "{{ . }} palabra"
-  other = "{{ . }} palabras"
-
-[readingtime]
-  one = "{{ . }} min"
-  other = "{{ . }} mins"
-
-[read_more]
-  other = "Leer más"
-
-
-[browser_no_video_support]
-  other = "Tu navegador de internet no admite video."
-
-
-[filtering_for]
-  other = "Filtrando por \"{{ . }}\""
-
-[no_posts]
-  other = "¡No hay contenido para mostrar!"
-
-
-[table_of_contents]
-  other = "Índice"

i18n/es.yaml

@@ -0,0 +1,128 @@
+# Misc
+credit_comment:
+  other: "<!-- bobatheme está disponible en GitHub basado en la licensia MIT: https://github.com/BBaoVanC/bobatheme. -->"
+
+table_of_contents:
+  other: "Índice"
+
+browser_no_video_support:
+  other: "Tu navegador de internet no admite video."
+
+latest_posts:
+  other: "Artículos recientes"
+
+see_also:
+  other: "Véase también:"
+
+
+# Meta items
+long_date:
+  other: "{{ .Date.Day }} de {{ index .Data.meses (printf `%d` .Date.Month) }} de {{ .Date.Year }}"
+
+wordcount:
+  one: "{{ . }} palabra"
+  other: "{{ . }} palabras"
+
+readingtime:
+  one: "{{ . }} min"
+  other: "{{ . }} mins"
+
+edit_history:
+  other: "Historial de cambios"
+
+
+# Post count
+no_posts:
+  other: "¡No hay contenido para mostrar!"
+
+post_count:
+  one: "{{ . }} publicación"
+  other: "{{ . }} publicaciones"
+
+
+# Navigation
+read_more:
+  other: "Leer más"
+
+related_posts:
+  other: "Publicaciones similares"
+
+older_post:
+  other: "Más antiguo"
+
+newer_post:
+  other: "Más nuevo"
+
+
+# ARIA labels
+# aria_header_link:
+#   other: "header link"
+
+# aria_back_to_top_button:
+#   other: "back to top button"
+
+# aria_rss_link:
+#   other: "RSS feed link"
+
+# aria_post_meta_edit_history:
+#   other: "link to page edit history"
+
+# aria_post_meta_translations:
+#   other: "translations"
+
+# aria_post_meta_categories:
+#   other: "categories"
+
+# aria_post_meta_tags:
+#   other: "tags"
+
+# aria_post_meta_reading_time:
+#   other: "reading time"
+
+# aria_post_meta_authors:
+#   other: "authors"
+
+# aria_post_meta_series:
+#   other: "series"
+
+# aria_breadcrumbnav:
+#   other: "breadcrumb navigation bar"
+
+# aria_post_metadata:
+#   other: "post metadata"
+
+# aria_author_metadata:
+#   other: "author metadata"
+
+# aria_taxonomy_metadata:
+#   other: "taxonomy metadata"
+
+# aria_post_meta_date:
+#   other: "date"
+
+# aria_post_meta_modified_date:
+#   other: "last modified date"
+
+# aria_author_post_count:
+#   other: "post count"
+
+# aria_author_word_count:
+#   other: "word count"
+
+# aria_taxonomy_post_count:
+#   other: "post count"
+
+# aria_series_metadata:
+#   other: "series metadata"
+
+# aria_navbar:
+#   other: "navigation bar"
+
+# aria_langpicker:
+#   other: "language picker"
+
+# aria_langpicker_list:
+#   other: "language list"
+
+# aria_table_of_contents:
+#   other: "table of contents"

layouts/_default/_markup/render-heading.html

@@ -1,7 +1,7 @@
 <h{{ .Level }} id="{{ .Anchor | safeURL }}" class="section-header">
     {{ .Text | safeHTML }}
     <a href="#{{ .Anchor | safeURL }}">
-        <span class="section-header-link">
+        <span class="section-header-link" aria-label="{{ i18n "aria_header_link" }}">
             {{ partial "icon.html" "link" }}
         </span>
     </a>

layouts/_default/_markup/render-link.html

@@ -1 +1,8 @@
-<a href="{{ .Destination | safeURL }}"{{ with .Title}}title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }}target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>{{/* DO NOT REMOVE THE TRAILING NEWLINE HERE -- it prevents there from being whitespace in between the link and the next word/element (for example: if there's a period right after a link) */}}
+<a
+    href="{{ .Destination | safeURL }}"
+    {{ with .Title }}title="{{ . }}"{{ end }}
+    {{ if strings.HasPrefix .Destination "http" }}target="_blank" rel="noopener"{{ end }}
+>
+    {{- .Text | safeHTML -}}
+</a>
+{{- /* This comment gets rid of the trailing newline. */ -}}

layouts/_default/baseof.html

@@ -1,30 +1,50 @@
 {{ partial "credit.html" }}
 <!DOCTYPE html>
 <html lang="{{ .Language.Lang }}">
-    {{- partial "head.html" . -}}
+    {{ partial "head.html" . }}
 
     <body>
+        <a id="top" name="top" aria-hidden="true"></a>
+
         <div class="top">
             {{ partial "top.html" . }}
         </div>
 
-        <div class="content">
-        {{- block "main" . }}
-        {{ .Content }}
-        {{- end }}
-        </div>
-
-        {{ with .Site.Copyright }}
-        <footer>
-            <hr>
-            <small>
-                &copy;
-                {{ now.Format "2006" }}
-                {{ $.Site.Author.name }}
-                {{ . | safeHTML }}
-            </small>
-        </footer>
+        {{ if not .IsHome }}
+            {{ partial "breadcrumb.html" . }}
         {{ end }}
+
+        <main>
+            {{ block "main" . }}
+                THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
+            {{ end }}
+        </main>
+
+        {{ if or .Site.Copyright .Site.Params.footer }}
+            <hr>
+            <footer>
+                <small>
+                    {{ with .Site.Copyright }}
+                        <p>{{ . | safeHTML }}</p>
+                    {{ end }}
+
+                    {{ with .Site.Params.footer }}
+                        {{ . | $.RenderString (dict "display" "block") }}
+                    {{ end }}
+                </small>
+            </footer>
+        {{ end }}
+
+        <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>
     </body>
 
 </html>

layouts/_default/list.html

@@ -1,27 +1,21 @@
 {{ define "main" }}
+    <h1>
+        {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
+        {{ .Title | markdownify }}
+        {{ partial "rss-link.html" . }}
+    </h1>
 
-<h1>
-    {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
-    {{ .Title | markdownify }}
-    <span class="rss-link">
-        {{ with .OutputFormats.Get "rss" }}
-        <a href="{{ .Permalink }}">{{ partial "icon.html" "rss" }}</a>
+    <div class="list-page-content">
+        {{ with .Sections }}
+            <div class="sections">
+                {{ range . }}
+                    {{ .Render "summary/section" }}
+                {{ end }}
+            </div>
         {{ end }}
-    </span>
-</h1>
 
-<div class="posts">
-    {{ range .Paginator.Pages }}
-        {{ .Render "summary" }}
-    {{ else }}
-        {{ i18n "no_posts" }}
-    {{ end }}
-</div>
-
-{{ if gt .Paginator.TotalPages 1 }}
-<div class="pagination">
-    {{ template "_internal/pagination.html" . }}
-</div>
-{{ end }}
+        {{ partial "page-list.html" .Paginator.Pages }}
+    </div>
 
+    {{ partial "pagination.html" . }}
 {{ end }}

layouts/_default/single.html

@@ -1,27 +1,89 @@
 {{ define "main" }}
-<div class="post-title">
-    <h1>
-        {{ .Title | markdownify }}
-        {{ if .Draft }}{{ partial "icon.html" "edit" }}{{ end }}
-    </h1>
-</div>
+    <div class="post-title">
+        <h1>
+            {{ .Title | markdownify }}
+            {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
+        </h1>
+    </div>
 
-{{ partial "post-metadata.html" . }}
+    {{ partial "post-metadata/full.html" . }}
+    {{ partial "series-box.html" . }}
 
-{{ if .Params.Toc }}
-<div id="table-of-contents">
-    <h2>{{ i18n "table_of_contents" }}</h2>
-    {{ .TableOfContents }}
-</div>
-{{ end }}
-
-<hr>
-
-{{ with .Resources.GetMatch "feature" }}
-<div class="post-media">
-    {{ partial "figure.html" . }}
-</div>
-{{ end }}
-
-{{ .Content }}
+    {{ if .Params.Toc }}
+        <div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
+            <details>
+                <summary>{{ i18n "table_of_contents" }}</summary>
+                {{ .TableOfContents }}
+            </details>
+        </div>
+        <div class="table-of-contents print">
+            {{ i18n "table_of_contents" }}
+            {{ .TableOfContents }}
+        </div>
+    {{ end }}
+
+    {{ with .Resources.GetMatch "feature" }}
+        <div class="post-media">
+            {{ partial "figure.html" (dict "src" .) }}
+        </div>
+    {{ end }}
+
+    <div class="post-content">
+        {{ .Content }}
+    </div>
+
+    {{ partial "series-box.html" . }}
+
+    {{ if or .NextInSection .PrevInSection }}
+        <div class="prevnext">
+            {{ with .NextInSection }}
+                <a class="prev" href="{{ .Permalink }}">
+                    <div class="prev-caption">
+                        &larr; {{ i18n "newer_post" }}
+                    </div>
+                    <div class="prev-post">
+                        {{ .Title | markdownify }}
+                    </div>
+                </a>
+            {{ else }}
+                <div class="prev"></div>
+            {{ end }}
+
+            {{ with .PrevInSection }}
+                <a class="next" href="{{ .Permalink }}">
+                    <div class="next-caption">
+                        {{ i18n "older_post" }} &rarr;
+                    </div>
+                    <div class="next-post">
+                        {{ .Title | markdownify }}
+                    </div>
+                </a>
+            {{ else }}
+                <div class="next"></div>
+            {{ end }}
+        </div>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons }}
+        {{ partial "share.html" . }}
+    {{ end }}
+
+    {{ if .Params.comments }}
+        <div class="comments">
+            {{ partial "comments.html" . }}
+        </div>
+    {{ end }}
+
+    {{ $related := .Site.RegularPages.Related . | first 10 }}
+    {{ with $related }}
+        <div class="related-posts full-width-page-list">
+            <hr>
+            <h1>{{ i18n "related_posts" }}</h1>
+            {{ partial "page-list.html" . }}
+        </div>
+    {{ end }}
+
+    {{ if .Site.Params.latestPostsOnContent }}
+        {{ partialCached "latest-posts.html" . }}
+    {{ end }}
 {{ end }}

layouts/_default/summary/author.html

@@ -0,0 +1,16 @@
+<div class="author">
+    <h2 class="author-name">
+        <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+        {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
+    </h2>
+
+    {{ partial "post-metadata/author.html" . }}
+
+    <div class="author-description">
+        {{ partial "description-or-summary.html" . }}
+    </div>
+
+    <div class="readmore">
+        <a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
+    </div>
+</div>

layouts/_default/summary/post.html

@@ -0,0 +1,23 @@
+<div class="post">
+    <h2 class="post-title">
+        {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
+        <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+        {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
+    </h2>
+
+    {{ partial "post-metadata/short.html" . }}
+
+    {{ with .Resources.GetMatch "feature" }}
+        <div class="post-media">
+            {{ partial "figure.html" (dict "src" .) }}
+        </div>
+    {{ end }}
+
+    <div class="post-description">
+        {{ partial "description-or-summary.html" . }}
+    </div>
+
+    <div class="readmore">
+        <a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
+    </div>
+</div>

layouts/_default/summary/section.html

@@ -0,0 +1,12 @@
+<a class="section-anchor" href="{{ .Permalink }}">
+    <div class="section">
+        <h2 class="section-title">
+            {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
+            {{ .Title | markdownify }}
+        </h2>
+
+        <div class="section-description">
+            {{ partial "description-or-summary.html" . }}
+        </div>
+    </div>
+</a>

layouts/_default/summary/series.html

@@ -0,0 +1,26 @@
+<div class="post">
+    <h2 class="post-title">
+        {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
+        <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+        {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
+    </h2>
+
+    {{ partial "post-metadata/series.html" . }}
+
+    <div class="post-description">
+        {{ partial "description-or-summary.html" . }}
+    </div>
+
+    <div class="series-pages">
+        <ul>
+            {{ $i := 0 }}
+            {{ $total := len .Data.Pages }}
+            {{ range .Data.Pages.Reverse }}
+                {{ $i = add 1 $i }}
+                {{ .Scratch.Set "series_position" $i }}
+                {{ .Scratch.Set "series_total" $total }}
+                <li>{{ .Render "summary/series_post" }}</li>
+            {{ end }}
+        </ul>
+    </div>
+</div>

layouts/_default/summary/series_post.html

@@ -1,30 +1,26 @@
 <div class="post">
-    <h2 class="post-title">
-        {{ range .Params.categories }}
-        <code>{{ . }}</code>
+    <div class="post-series-position">
+        {{ if .Scratch.Get "series_position" }}
+            ({{ .Scratch.Get "series_position" }}/{{ .Scratch.Get "series_total" }})
         {{ end }}
+    </div>
 
+    <h2 class="post-title">
         {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
         <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
-        {{ if .Draft }}{{ partial "icon.html" "edit" }}{{ end }}
+        {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
     </h2>
 
-    {{ partial "post-metadata.html" . }}
+    {{ partial "post-metadata/short.html" . }}
 
     {{ with .Resources.GetMatch "feature" }}
-    <div class="post-media">
-        {{ partial "figure.html" . }}
-    </div>
+        <div class="post-media">
+            {{ partial "figure.html" (dict "src" .) }}
+        </div>
     {{ end }}
 
     <div class="post-description">
-        {{ if .Description }}
-        <p>
-            {{ .Description | markdownify }}
-        </p>
-        {{ else }}
-        {{ .Summary }}
-        {{ end }}
+        {{ partial "description-or-summary.html" . }}
     </div>
 
     <div class="readmore">

layouts/authors/list.html

@@ -0,0 +1,20 @@
+{{ define "main" }}
+    <h1>
+        {{ partial "icon.html" "user-circle" }}
+        {{ .Title | markdownify }}
+    </h1>
+
+    <div class="page-list">
+        {{ with .Paginator.Pages }}
+            <ul>
+                {{ range . }}
+                    <li>{{ .Render "summary/author" }}</li>
+                {{ end }}
+            </ul>
+        {{ else }}
+            <div>
+                {{ i18n "no_posts" }}
+            </div>
+        {{ end }}
+    </div>
+{{ end }}

layouts/authors/term.html

@@ -0,0 +1,17 @@
+{{ define "main" }}
+    <h1>
+        {{ partial "icon.html" "user-circle" }}
+        {{ .Title | markdownify }}
+        {{ partial "rss-link.html" . }}
+    </h1>
+
+    {{ partial "post-metadata/author.html" . }}
+
+    {{ with .Content }}
+        {{ . }}
+    {{ end }}
+
+    {{ partial "page-list.html" .Paginator.Pages }}
+
+    {{ partial "pagination.html" . }}
+{{ end }}

layouts/index.html

@@ -1,2 +1,21 @@
 {{ define "main" }}
+    {{ with .Content }}
+        <div class="homepage-content">
+            {{ . }}
+        </div>
+        <hr>
+    {{ end }}
+
+    {{ if .Site.Params.homepageLatestPosts }}
+        <div class="homepage-latest-posts">
+            <h1>
+                {{ i18n "latest_posts" }}
+                {{ partial "rss-link.html" . }}
+            </h1>
+
+            {{ partial "page-list.html" (.Paginate .Site.RegularPages).Pages }}
+
+            {{ partial "pagination.html" . }}
+        </div>
+    {{ end }}
 {{ end }}

layouts/partials/additional-head.html

@@ -0,0 +1,4 @@
+{{/*
+    Create a file named `layouts/partials/additional-head.html` at your site root to
+    add extra tags into <head>. Page variables are passed.
+*/}}

layouts/partials/breadcrumb.html

@@ -0,0 +1,19 @@
+<nav class="breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
+    <ul>
+        {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
+    </ul>
+</nav>
+{{ define "breadcrumbnav" }}
+{{ if .p1.Parent }}
+{{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 ) }}
+{{ else if not .p1.IsHome }}
+{{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
+{{ end }}
+<li{{ if eq .p1 .p2 }} class="active"{{ end }}>
+    {{ if eq .p1 .p2 }}
+    {{ .p1.Title | markdownify }}
+    {{ else }}
+    <a href="{{ .p1.Permalink }}">{{ .p1.Title | markdownify }}</a>
+    {{ end }}
+</li>
+{{ end }}

layouts/partials/comments.html

@@ -0,0 +1,4 @@
+{{/*
+    Create a file named `layouts/partials/comments.html` at your site root to
+    add a comment system. Page variables are passed.
+*/}}

layouts/partials/description-or-summary.html

@@ -0,0 +1,7 @@
+{{ with .Description }}
+    <p>{{ . | markdownify }}</p>
+{{ else }}
+    {{ with .Summary }}
+        {{ . }}
+    {{ end }}
+{{ end }}

layouts/partials/figure.html

@@ -1,41 +1,28 @@
-<figure>
-    {{ $media := . | resources.Fingerprint "sha512" }}
+{{ $hidecaption := index . "hidecaption" }}
 
-    {{ if eq .MediaType.MainType "image" }}
+{{ if index . "noborder" }}
+    <figure>
+{{ else }}
+    <figure class="border">
+{{ end }}
 
-    {{ $tiny := $media.Resize "500x" }}
-    {{ $small := $media.Resize "800x" }}
-    {{ $medium := $media.Resize "1200x" }}
-    {{ $large := $media.Resize "1500x" }}
-    <img src="{{ $media.Permalink }}"
-         alt="{{ $media.Title }}"
-         srcset='
-         {{ if ge $media.Width "500" }}
-             {{ $tiny.RelPermalink}} 500w,
-         {{ end }}
-         {{ if ge $media.Width "800" }}
-             {{ $small.RelPermalink }} 800w,
-         {{ end }}
-         {{ if ge $media.Width "1200" }}
-             {{ $medium.RelPermalink }} 1200w,
-         {{ end }}
-         {{ if ge $media.Width "1500" }}
-             {{ $large.RelPermalink }} 1500w,
-         {{ end }}
-         {{ $media.RelPermalink }} {{ $media.Width }}w
-         '
-    />
+    {{ with index . "src" }}
+        {{ $media := . }}
+        {{ if eq .MediaType.MainType "image" }}
+            <img src="{{ $media.Permalink }}" alt="{{ $media.Title }}" />
+        {{ else if eq .MediaType.MainType "video" }}
+            <video controls preload="metadata">
+                <source src="{{ $media.Permalink }}" alt="{{ $media.Title }}">
+                {{ i18n "browser_no_video_support" }}
+            </video>
+        {{ end }}
 
-    {{ else if eq .MediaType.MainType "video" }}
-    <video controls>
-        <source src="{{ $media.Permalink }}" alt="{{ $media.Title }}">
-        {{ i18n "browser_no_video_support" }}
-    </video>
-    {{ end }}
-
-    {{ with $media.Title }}
-    <figcaption>
-        {{ . | markdownify }}
-    </figcaption>
+        {{ if not $hidecaption }}
+            {{ with $media.Title }}
+                <figcaption>
+                    {{ . | markdownify }}
+                </figcaption>
+            {{ end }}
+        {{ end }}
     {{ end }}
 </figure>

layouts/partials/head.html

@@ -4,32 +4,43 @@
     {{ hugo.Generator }}
 
     {{ with resources.Get "css/bobastyle.css" | fingerprint "sha512" }}
-    <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+        <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">
+        <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">
     {{ end }}
 
-    {{ with .Site.Params.faviconICO }}
-    <link rel="icon" type="image/x-icon" href="{{ . | absURL }}" />
+    {{ with resources.Get "js/back-to-top.js" | fingerprint "sha512" }}
+        <script defer src="{{ .Permalink }}" type="text/javascript" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
     {{ end }}
-    {{ with .Site.Params.faviconPNG }}
-    <link rel="icon" type="image/png" href="{{ . | absURL }}" />
+    {{ with resources.Get "js/share-event.js" | fingerprint "sha512" }}
+        <script defer src="{{ .Permalink }}" type="text/javascript" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
     {{ end }}
 
-    {{ range .AlternativeOutputFormats -}}
-        {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
-    {{ end -}}
+    {{ with .Site.Params.faviconSVG }}
+        <link rel="icon" href="{{ . | absURL }}" />
+    {{ end }}
+    {{ with .Site.Params.appleTouchPNG }}
+        <link rel="apple-touch-icon" href="{{ . | absURL }}" />
+    {{ end }}
 
     {{ if .IsHome }}
-    <title>{{ .Site.Title }}</title>
+        <title>{{ .Site.Title | plainify }}</title>
     {{ else }}
-    <title>{{ print .Title " | " .Site.Title }}</title>
+        <title>{{ (print .Title " | " .Site.Title) | plainify }}</title>
     {{ end }}
 
-    {{ partial "opengraph.html" . }}
-    {{ template "_internal/twitter_cards.html" . }}
-    {{ template "_internal/schema.html" . }}
+    {{ partial "seo-tags/opengraph.html" . }}
+    {{ partial "seo-tags/twitter-cards.html" . }}
+    {{ partial "seo-tags/schema.html" . }}
+    {{ partial "seo-tags/link.html" . }}
+    {{ partial "seo-tags/author.html" . }}
 
-    <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
+    <meta name="language" content="{{ .Language.Lang }}">
+    <meta name="description" content="{{ (partial "seo-tags/description.html" .) | plainify }}">
+
+    {{ partial "additional-head.html" . }}
 </head>

layouts/partials/icon.html

@@ -1,5 +1 @@
-{{ $icon_resource := resources.Get (printf "feather/icons/%s.svg" .) }}
-{{ $icon := $icon_resource.Content }}
-{{ $icon = replaceRE `<svg` `<svg class="icon"` $icon }}
-{{ $icon = replaceRE `</svg>` (printf `<title>%s icon</title></svg>` .) $icon }}
-{{ $icon | safeHTML }}
+{{ partialCached "icon_code.html" . . }}

layouts/partials/icon_code.html

@@ -0,0 +1,6 @@
+{{- $icon_resource := resources.Get (printf "jam/icons/%s.svg" .) -}}
+{{- $icon := $icon_resource.Content -}}
+{{- $icon = replaceRE `<svg` `<svg class="icon"` $icon -}}
+{{- $icon = replaceRE `</svg>` (printf `<title>%s icon</title></svg>` .) $icon -}}
+{{- $icon = replaceRE `(width|height)="[0-9]*"` "" $icon -}}
+{{- $icon | safeHTML -}}

layouts/partials/latest-posts.html

@@ -0,0 +1,11 @@
+<div class="latest-posts full-width-page-list">
+    <hr>
+    <h1>
+        {{ i18n "latest_posts" }}
+        {{ partial "rss-link.html" .Site.Home }}
+    </h1>
+
+    {{ with .Site.RegularPages | first 5 }}
+        {{ partial "page-list.html" . }}
+    {{ end }}
+</div>

layouts/partials/opengraph.html

@@ -1,52 +0,0 @@
-<meta property="og:title" content="{{ .Title }}" />
-<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
-<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
-<meta property="og:url" content="{{ .Permalink }}" />
-
-{{- with $.Params.images -}}
-{{- range first 6 . }}<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
-{{- else -}}
-{{- $images := $.Resources.ByType "image" -}}
-{{- $featured := $images.GetMatch "*feature*" -}}
-{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
-{{- with $featured -}}
-<meta property="og:image" content="{{ $featured.Permalink }}"/>
-{{- else -}}
-{{- with $.Site.Params.images }}<meta property="og:image" content="{{ index . 0 | absURL }}"/>{{ end -}}
-{{- end -}}
-{{- end -}}
-
-{{- if .IsPage }}
-{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
-<meta property="article:section" content="{{ .Section }}" />
-{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
-{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
-{{- end -}}
-
-{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
-{{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
-{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
-
-{{- with .Params.videos -}}
-{{- range first 6 . }}<meta property="og:video" content="{{ . | absURL }}" />{{ end -}}
-{{- else -}}
-{{- $videos := $.Resources.ByType "video" -}}
-{{- $featured_video := $videos.GetMatch "*feature*" -}}
-{{- if not $featured_video }}{{ $featured_video = $videos.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
-{{- with $featured_video -}}
-<meta property="og:video" content="{{ $featured_video.Permalink | absURL }}" />
-{{- end -}}
-{{- end -}}
-
-{{- /* If it is part of a series, link to related articles */}}
-{{- $permalink := .Permalink }}
-{{- $siteSeries := .Site.Taxonomies.series }}
-{{ with .Params.series }}{{- range $name := . }}
-  {{- $series := index $siteSeries ($name | urlize) }}
-  {{- range $page := first 6 $series.Pages }}
-    {{- if ne $page.Permalink $permalink }}<meta property="og:see_also" content="{{ $page.Permalink }}" />{{ end }}
-  {{- end }}
-{{ end }}{{ end }}
-
-{{- /* Facebook Page Admin ID for Domain Insights */}}
-{{- with .Site.Social.facebook_admin }}<meta property="fb:admins" content="{{ . }}" />{{ end }}

layouts/partials/page-list.html

@@ -0,0 +1,13 @@
+<div class="page-list">
+    {{ with . }}
+        <ul>
+            {{ range . }}
+                <li>{{ .Render "summary/post" }}</li>
+            {{ end }}
+        </ul>
+    {{ else }}
+        <div>
+            {{ i18n "no_posts" }}
+        </div>
+    {{ end }}
+</div>

layouts/partials/pagination.html

@@ -0,0 +1,5 @@
+{{ if gt .Paginator.TotalPages 1 }}
+    <div class="pagination">
+        {{ template "_internal/pagination.html" . }}
+    </div>
+{{ end }}

layouts/partials/post-meta-item/authors.html

@@ -0,0 +1,16 @@
+{{ with .Params.authors }}
+    <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_authors" }}">
+        {{ partial "icon.html" "user-circle" }}
+
+        {{ if index $.Site.Taxonomies "authors" }}
+            {{ $authors := slice }}
+            {{ range . }}
+                {{ $url := (printf "authors/%s" (. | anchorize)) | absLangURL }}
+                {{ $authors = $authors | append (printf `<a href="%s">%s</a>` $url . | safeHTML) }}
+            {{ end }}
+            {{ delimit $authors ", " }}
+        {{ else }}
+            {{ delimit . ", " }}
+        {{ end }}
+    </span>
+{{ end }}

layouts/partials/post-meta-item/categories.html

@@ -0,0 +1,11 @@
+{{ with (.GetTerms "categories") }}
+    {{ $categories := slice }}
+    {{ range . }}
+        {{ $categories = $categories | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
+    {{ end }}
+
+    <div class="categories" aria-label="{{ i18n "aria_post_meta_categories" }}">
+        {{ partial "icon.html" "folder" }}
+        {{ delimit $categories ", " }}
+    </div>
+{{ end }}

layouts/partials/post-meta-item/edithistory.html

@@ -0,0 +1,8 @@
+{{ if and .Site.Params.gitHistoryURL .File.Path }}
+    <span class="post-meta-item post-meta-edit-history" aria-label="{{ i18n "aria_post_meta_edit_history" }}">
+        {{ partial "icon.html" "history" }}
+        <a href="{{ printf "%s/content/%s" .Site.Params.gitHistoryURL .File.Path }}" target="_blank" rel="noopener">
+            {{- i18n "edit_history" -}}
+        </a>
+    </span>
+{{ end }}

layouts/partials/post-meta-item/readingtime.html

@@ -0,0 +1,6 @@
+{{ if ne .Site.Params.readingtime false }}
+    <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_reading_time" }}">
+        {{ partial "icon.html" "clock" }}
+        {{ i18n "readingtime" .ReadingTime }}
+    </span>
+{{ end }}

layouts/partials/post-meta-item/series.html

@@ -0,0 +1,11 @@
+{{ with (.GetTerms "series") }}
+    {{ $series := slice }}
+    {{ range . }}
+        {{ $series = $series | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
+    {{ end }}
+
+    <div class="series" aria-label="{{ i18n "aria_post_meta_series" }}">
+        {{ partial "icon.html" "files" }}
+        {{ delimit $series ", " }}
+    </div>
+{{ end }}

layouts/partials/post-meta-item/tags.html

@@ -0,0 +1,11 @@
+{{ with (.GetTerms "tags") }}
+    {{ $tags := slice }}
+    {{ range . }}
+        {{ $tags = $tags | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
+    {{ end }}
+
+    <div class="tags" aria-label="{{ i18n "aria_post_meta_tags" }}">
+        {{ partial "icon.html" "tag" }}
+        {{ delimit $tags ", " }}
+    </div>
+{{ end }}

layouts/partials/post-meta-item/translations.html

@@ -0,0 +1,8 @@
+{{ if .IsTranslated }}
+    <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_translations" }}">
+        {{ partial "icon.html" "world" }}
+        {{ range .Translations }}
+            <a href="{{ .Permalink }}">{{ .Language }}</a>
+        {{ end }}
+    </span>
+{{ end }}

layouts/partials/post-metadata.html

@@ -1,66 +0,0 @@
-{{ if or .Date .IsTranslated .Site.Params.wordcount .Site.Params.readingtime .Site.Params.repoURL }}
-<div class="post-metadata">
-    {{ if .Date }}
-    <span class="post-meta-item">
-        {{ partial "icon.html" "calendar" }}
-        <time datetime="{{ .Date.Format "January 2, 2006" }}" pubdate>
-            {{ i18n "long_date" (dict "Date" .Date "Data" .Site.Data) }}
-        </time>
-    </span>
-
-    {{ if not .Site.Params.repoURL }}
-    {{ if ne .Lastmod .Date }}
-    <span class="post-meta-item">
-        {{ partial "icon.html" "edit-2" }}
-        <time datetime="{{ .Lastmod.Format "2006-01-02" }}" pubdate>
-            {{ i18n "long_date" (dict "Date" .Lastmod "Data" .Site.Data) }}
-        </time>
-        {{ end }}
-    </span>
-    {{ end }}
-    {{ end }}
-
-    {{ if .IsTranslated }}
-    <span class="post-meta-item">
-        {{ partial "icon.html" "globe" }}
-        {{ range .Translations }}
-        <a href="{{ .Permalink }}">{{ .Language }}</a>
-        {{ end }}
-    </span>
-    {{ end }}
-
-    {{ if .Site.Params.wordcount }}
-    <span class="post-meta-item">
-        {{ partial "icon.html" "type" }}
-        {{ i18n "wordcount" .WordCount }}
-    </span>
-    {{ end }}
-
-    {{ if .Site.Params.readingtime }}
-    <span class="post-meta-item">
-        {{ partial "icon.html" "clock" }}
-        {{ i18n "readingtime" .ReadingTime }}
-    </span>
-    {{ end }}
-
-    {{ if .Site.Params.repoURL }}
-    {{ with .GitInfo }}
-    <span class="post-meta-item">
-        {{ partial "icon.html" "git-commit" }}
-        <a href="{{ (printf "%s/commit/%s" $.Site.Params.repoURL .Hash) | absLangURL }}">
-            <code>{{ .AbbreviatedHash }}</code>
-        </a>
-    </span>
-    {{ end }}
-    {{ end }}
-
-    <div class="tags">
-        {{ range (.GetTerms "tags") }}
-        <span class="post-meta-item">
-            {{ partial "icon.html" "tag" }}
-            <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
-        </span>
-        {{ end }}
-    </div>
-</div>
-{{ end }}

layouts/partials/post-metadata/author.html

@@ -0,0 +1,17 @@
+<div class="author-metadata" aria-label="{{ i18n "aria_author_metadata" }}">
+    {{/* Calculate the total word count */}}
+    {{ $total_words := 0 }}
+    {{ range .Data.Pages }}
+        {{ $total_words = add $total_words .WordCount }}
+    {{ end }}
+
+    <span class="author-meta-item" aria-label="{{ i18n "aria_author_post_count" }}">
+        {{ partial "icon.html" "newspaper" }}
+        {{ i18n "post_count" (len .Data.Pages) }}
+    </span>
+
+    <span class="author-meta-item" aria-label="{{ i18n "aria_author_word_count" }}">
+        {{ partial "icon.html" "align-left" }}
+        {{ i18n "wordcount" $total_words }}
+    </span>
+</div>

layouts/partials/post-metadata/full.html

@@ -0,0 +1,31 @@
+{{ if or .Date .Params.authors .IsTranslated .Site.Params.readingtime .Site.Params.gitFileURL }}
+    <div class="post-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
+        {{ if .Date }}
+            <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_date" }}">
+                {{ partial "icon.html" "calendar" }}
+                <time datetime="{{ .Date.Format "2006-01-02" }}" pubdate>
+                    {{ i18n "long_date" (dict "Date" .Date "Data" .Site.Data) }}
+                </time>
+            </span>
+
+            {{/* TODO: make this be a tooltip */}}
+            {{/* DISABLED
+            {{ if ne (time.Format "2006-01-02" .Lastmod) (time.Format "2006-01-02" .Date) }}
+                <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_modified_date" }}">
+                    {{ partial "icon.html" "pencil" }}
+                    <time datetime="{{ .Lastmod.Format "2006-01-02" }}" pubdate>
+                        {{ i18n "long_date" (dict "Date" .Lastmod "Data" .Site.Data) }}
+                    </time>
+                    {{ end }}
+                </span>
+            */}}
+        {{ end }}
+
+        {{ partial "post-meta-item/authors.html" . }}
+        {{ partial "post-meta-item/translations.html" . }}
+        {{ partial "post-meta-item/readingtime.html" . }}
+        {{ partial "post-meta-item/edithistory.html" . }}
+        {{ partial "post-meta-item/categories.html" . }}
+        {{ partial "post-meta-item/tags.html" . }}
+    </div>
+{{ end }}

layouts/partials/post-metadata/series.html

@@ -0,0 +1,19 @@
+<div class="post-metadata" aria-label="{{ i18n "aria_series_metadata" }}">
+    <span class="post-meta-item">
+        {{ partial "icon.html" "newspaper" }}
+        {{ i18n "post_count" (len .Data.Pages) }}
+    </span>
+
+    {{ if ne .Site.Params.readingtime false }}
+        <span class="post-meta-item">
+            {{ partial "icon.html" "clock" }}
+            {{ $readingtime := 0 }}
+            {{ range .Data.Pages }}
+                {{ $readingtime = (add $readingtime .ReadingTime) }}
+            {{ end }}
+            {{ i18n "readingtime" $readingtime }}
+        </span>
+    {{ end }}
+
+    {{ partial "post-meta-item/translations.html" . }}
+</div>

layouts/partials/post-metadata/short.html

@@ -0,0 +1,19 @@
+{{ if or .Date .Params.authors .IsTranslated .Site.Params.readingtime }}
+    <div class="post-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
+        {{ if .Date }}
+            <span class="post-meta-item" aria-label="date">
+                {{ partial "icon.html" "calendar" }}
+                <time datetime="{{ .Date.Format "2006-01-02" }}" pubdate>
+                    {{ i18n "long_date" (dict "Date" .Date "Data" .Site.Data) }}
+                </time>
+            </span>
+        {{ end }}
+
+        {{ partial "post-meta-item/authors.html" . }}
+        {{ partial "post-meta-item/translations.html" . }}
+        {{ partial "post-meta-item/readingtime.html" . }}
+        {{ partial "post-meta-item/series.html" . }}
+        {{ partial "post-meta-item/categories.html" . }}
+        {{ partial "post-meta-item/tags.html" . }}
+    </div>
+{{ end }}

layouts/partials/post-metadata/taxonomy.html

@@ -0,0 +1,6 @@
+<div class="taxonomy-metadata" aria-label="{{ i18n "aria_taxonomy_metadata" }}">
+    <span class="taxonomy-meta-item" aria-label="{{ i18n "aria_taxonomy_post_count" }}">
+        {{ partial "icon.html" "newspaper" }}
+        {{ i18n "post_count" (len .Data.Pages) }}
+    </span>
+</div>

layouts/partials/remote_figure.html

@@ -0,0 +1,28 @@
+{{ $hidecaption := index . "hidecaption" }}
+{{ $type := index . "type" }}
+{{ $src := index . "src" }}
+{{ $alt := index . "alt" }}
+
+{{ if index . "border" }}
+    <figure class="border">
+{{ else }}
+    <figure>
+{{ end }}
+
+    {{ if eq $type "image" }}
+        <img src="{{ $src }}" alt="{{ $alt }}" />
+    {{ else if eq $type "video" }}
+        <video controls preload="metadata">
+            <source src="{{ $src }}" alt="{{ $alt }}">
+            {{ i18n "browser_no_video_support" }}
+        </video>
+    {{ end }}
+
+    {{ if not $hidecaption }}
+        {{ with $alt }}
+            <figcaption>
+                {{ . | markdownify }}
+            </figcaption>
+        {{ end }}
+    {{ end }}
+</figure>

layouts/partials/rss-link.html

@@ -0,0 +1,5 @@
+<span class="rss-link">
+    {{ with .OutputFormats.Get "rss" }}
+        <a href="{{ .Permalink }}" target="_blank" rel="noopener" aria-label="{{ i18n "aria_rss_link" }}">{{ partial "icon.html" "rss-feed" }}</a>
+    {{ end }}
+</span>

layouts/partials/seo-tags/author.html

@@ -0,0 +1,7 @@
+{{ with .Params.authors }}
+    <meta name="author" content="{{ delimit . ", " }}">
+
+    {{ range . }}
+        <meta property="article:author" content="{{ . }}">
+    {{ end }}
+{{ end }}

layouts/partials/seo-tags/description.html

@@ -0,0 +1,9 @@
+{{- with .Description -}}
+    <p>{{- . | markdownify -}}</p>
+{{- else -}}
+    {{- with .Summary -}}
+        {{- . -}}
+    {{- else -}}
+        {{- .Site.Params.description -}}
+    {{- end -}}
+{{- end -}}

layouts/partials/seo-tags/link.html

@@ -0,0 +1,15 @@
+{{ range .AlternativeOutputFormats }}
+    <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink }}" title="{{ $.Site.Title | plainify }}">
+{{ end }}
+{{ with .OutputFormats.Get "rss" }}
+    <link rel="start" type="{{ .MediaType.Type }}" href="{{ .Permalink }}" title="{{ $.Site.Title | plainify }}">
+{{ end }}
+
+{{ with .PrevInSection }}
+    <link rel="prev" title="{{ .Title | plainify }}" href="{{ .Permalink }}">
+{{ end }}
+{{ with .NextInSection }}
+    <link rel="next" title="{{ .Title | plainify }}" href="{{ .Permalink }}">
+{{ end }}
+
+<link rel="canonical" href="{{ .Permalink }}">

layouts/partials/seo-tags/opengraph.html

@@ -0,0 +1,48 @@
+<meta property="og:title" content="{{ .Title | plainify }}">
+<meta property="og:description" content="{{ (partial "seo-tags/description.html" .) | plainify }}">
+<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
+<meta property="og:url" content="{{ .Permalink }}">
+
+{{ $images := $.Resources.ByType "image" }}
+{{ $featured := $images.GetMatch "*feature*" }}
+{{ if not $featured }}
+    {{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}
+{{ end }}
+
+{{ with $featured }}
+    <meta property="og:image" content="{{ $featured.Permalink }}">
+{{ end }}
+
+{{ with .Section }}
+    <meta property="article:section" content="{{ . }}">
+{{ end }}
+
+{{ $format := "2006-01-02T15:04:05-07:00" }}
+{{ with .Date }}
+    <meta property="article:published_time" content="{{ .Format $format }}">
+{{ end }}
+{{ with .Lastmod }}
+    <meta property="article:modified_time" {{ .Format $format | printf "content=%q" | safeHTMLAttr }}>
+{{ end }}
+
+{{ with .Params.audio }}
+    <meta property="og:audio" content="{{ . }}">
+{{ end }}
+
+{{ with .Language.Lang }}
+    <meta property="og:locale" content="{{ . }}">
+{{ end }}
+
+{{ with .Site.Params.title }}
+    <meta property="og:site_name" content="{{ . }}">
+{{ end }}
+
+{{ $videos := $.Resources.ByType "video" }}
+{{ $featured_video := $videos.GetMatch "*feature*" }}
+{{ if not $featured_video }}
+    {{ $featured_video = $videos.GetMatch "{*cover*,*thumbnail*}" }}
+{{ end }}
+
+{{ with $featured_video }}
+    <meta property="og:video" content="{{ $featured_video.Permalink | absURL }}">
+{{ end }}

layouts/partials/seo-tags/schema.html

@@ -0,0 +1,26 @@
+<meta itemprop="name" content="{{ .Title | plainify }}">
+<meta itemprop="description" content="{{ (partial "seo-tags/description.html" .) | plainify }}">
+
+{{ $format := "2006-01-02T15:04:05-07:00" }}
+{{ with .Date }}
+    <meta itemprop="datePublished" content="{{ .Format $format }}">
+{{ end }}
+{{ with .Lastmod }}
+    <meta itemprop="dateModified" content="{{ .Format $format }}">
+{{ end }}
+
+<meta itemprop="wordCount" content="{{ .WordCount }}">
+
+{{ $images := $.Resources.ByType "image" }}
+{{ $featured := $images.GetMatch "*feature*" }}
+{{ if not $featured }}
+    {{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}
+{{ end }}
+
+{{ with $featured }}
+    <meta itemprop="image" content="{{ $featured.Permalink }}">
+{{ end }}
+
+{{ with .Params.tags }}
+    <meta itemprop="keywords" content="{{ delimit . ", " }}">
+{{ end }}

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

@@ -0,0 +1,29 @@
+{{ $images := $.Resources.ByType "image" }}
+{{ $featured := $images.GetMatch "*feature*" }}
+{{ if not $featured }}
+    {{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}
+{{ end }}
+
+{{ with $featured }}
+    {{ $ratio := 0 }}
+    {{ if gt .Width .Height }}
+        {{ $ratio = div (float .Width) .Height }}
+    {{ else }}
+        {{ $ratio = div (float .Height) .Width }}
+    {{ end }}
+
+    {{ if lt $ratio 1.75 }}
+        <meta name="twitter:card" content="summary_large_image">
+    {{ else }}
+        <meta name="twitter:card" content="summary">
+    {{ end }}
+
+    <meta name="twitter:image" content="{{ $featured.Permalink }}">
+{{ end }}
+
+<meta name="twitter:title" content="{{ .Title | plainify }}">
+<meta name="twitter:description" content="{{ (partial "seo-tags/description.html" .) | plainify }}">
+
+{{ with .Site.Social.twitter }}
+    <meta name="twitter:site" content="@{{ . }}">
+{{ end }}

layouts/partials/series-box.html

@@ -0,0 +1,17 @@
+{{ with (.GetTerms "series") }}
+    {{ $series := slice }}
+    {{ range . }}
+        {{ $series = $series | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
+    {{ end }}
+
+    <div class="series-box">
+        {{ partial "icon.html" "info" }}
+        {{ if gt (len $series) 1 }}
+            This post is part of multiple series:
+        {{ else }}
+            This post is part of a series:
+        {{ end }}
+
+        {{ delimit $series ", " }}
+    </div>
+{{ end }}

layouts/partials/share.html

@@ -0,0 +1,62 @@
+<div class="share-buttons">
+    {{ if .Site.Params.shareButtons.twitter }}
+        <a class="twitter-share"
+           target="_blank"
+           rel="noopener"
+           onclick="share_event('Twitter');"
+           href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}&via=bbaovanc">
+            {{- partial "icon.html" "twitter" -}}
+        </a>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons.facebook }}
+        <a class="facebook-share"
+           target="_blank"
+           rel="noopener"
+           onclick="share_event('Facebook');"
+           href="https://www.facebook.com/sharer.php?u={{ .Permalink }}">
+            {{- partial "icon.html" "facebook" -}}
+        </a>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons.linkedin }}
+        <a class="linkedin-share"
+           target="_blank"
+           rel="noopener"
+           onclick="share_event('LinkedIn');"
+           href="https://www.linkedin.com/sharing/share-offsite/?url={{ .Permalink }}">
+            {{- partial "icon.html" "linkedin" -}}
+        </a>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons.reddit }}
+        <a class="reddit-share"
+           target="_blank"
+           rel="noopener"
+           onclick="share_event('Reddit');"
+           href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}">
+            {{- partial "icon.html" "reddit" -}}
+        </a>
+    {{ end }}
+
+    {{/* Telegram icon doesn't have `viewbox` set, which breaks the sizing.
+            https://stackoverflow.com/q/72073399/19003757
+            https://github.com/michaelampr/jam/issues/39
+    {{ if .Site.Params.shareButtons.telegram }}
+        <a class="telegram-share"
+           target="_blank"
+           rel="noopener"
+           onclick="share_event('Telegram');"
+           href="https://t.me/share/url?url={{ .Permalink }}&text={{ .Title }}">
+            {{- partial "icon.html" "telegram" -}}
+        </a>
+    {{ end }}
+    */}}
+
+    {{ if .Site.Params.shareButtons.print }}
+        <button class="print-share"
+           onclick="window.print(); share_event('Print');">
+            {{- partial "icon.html" "printer" -}}
+        </button>
+    {{ end }}
+</div>

layouts/partials/top.html

@@ -1,27 +1,52 @@
-<h2 class="header">
-    <a href="{{ "/" | absLangURL }}">{{ .Site.Title | markdownify }}</a>
-</h2>
+<h1 class="header">
+    <a href="{{ .Site.Home.Permalink | absLangURL }}">{{ .Site.Title | markdownify }}</a>
+</h1>
 
-<nav class="navbar">
-    {{ with .Site.GetPage "/" }}
-    <a class="navbar-item" href="{{ .Permalink | absLangURL }}">{{ .Title }}</a>
+<div class="topbar">
+    <nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
+        {{ with .Site.Home }}
+            <a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
+        {{ end }}
+
+        {{ range .Site.Menus.main }}
+            {{ $isActive := false }}
+            {{ if or ($.HasMenuCurrent .Menu .) ($.IsMenuCurrent .Menu .) }}
+                {{ $isActive = true }}
+            {{ end }}
+            <a class="navbar-item{{ if $isActive }} active{{ end }}"
+               {{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }}
+               href="{{ .URL }}">{{ .Name }}</a>
+        {{ end }}
+    </nav>
+
+    {{ if .Site.IsMultiLingual }}
+        <details class="langpicker" aria-label="{{ i18n "aria_langpicker" }}">
+            <summary>
+                {{- partial "icon.html" "world" -}}
+            </summary>
+            <ul class="languages" aria-label="{{ i18n "aria_langpicker_list" }}">
+                {{ range .AllTranslations }}
+                    <li>
+                        <a class="langpicker-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+                    </li>
+                {{ end }}
+
+                {{ $site_translations := slice }}
+                {{ range .Site.Languages }}
+                    {{ $site_translations = $site_translations | append .LanguageName }}
+                {{ end }}
+
+                {{ $translation_codes := slice }}
+                {{ range .AllTranslations }}
+                    {{ $translation_codes = $translation_codes | append .Language }}
+                {{ end }}
+
+                {{ range (.Site.Languages | complement $translation_codes) }}
+                    <li>
+                        <a class="langpicker-item unavailable" aria-disabled="true">{{ .LanguageName }}</a>
+                    </li>
+                {{ end }}
+            </ul>
+        </details>
     {{ end }}
-
-    {{ range .Site.Menus.main }}
-    <a class="navbar-item" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
-    {{ end }}
-</nav>
-
-{{ if .Site.IsMultiLingual }}
-<nav class="langbar">
-    {{ range .Site.Home.AllTranslations }}
-
-    {{ if eq .Language $.Site.Language }}
-    <b><a class="langbar-item" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></b>
-    {{ else }}
-    <a class="langbar-item" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
-    {{ end }}
-
-    {{ end }}
-</nav>
-{{ end }}
+</div>

layouts/series/list.html

@@ -0,0 +1,20 @@
+{{ define "main" }}
+    <h1>
+        {{ partial "icon.html" "files" }}
+        {{ .Title | markdownify }}
+    </h1>
+
+    <div class="series-taxonomy">
+        {{ with .Pages }}
+            <ul>
+                {{ range . }}
+                    <li>{{ .Render "summary/series" }}</li>
+                {{ end }}
+            </ul>
+        {{ else }}
+            <div>
+                {{ i18n "no_posts" }}
+            </div>
+        {{ end }}
+    </div>
+{{ end }}

layouts/series/term.html

@@ -0,0 +1,20 @@
+{{ define "main" }}
+    <h1>
+        {{ partial "icon.html" "files" }}
+        {{ .Title | markdownify }}
+        {{ partial "rss-link.html" . }}
+    </h1>
+
+    {{ partial "post-metadata/series.html" . }}
+
+    {{ with .Content }}
+        {{ . }}
+    {{ end }}
+
+    {{ with .Paginator.Pages.Reverse }}
+        {{ partial "page-list.html" . }}
+    {{ end }}
+
+
+    {{ partial "pagination.html" . }}
+{{ end }}

layouts/shortcodes/abbr.html

@@ -0,0 +1,5 @@
+{{ if .IsNamedParams }}
+    <abbr title="{{ .Get "title" }}">{{ .Inner }}</abbr>
+{{ else }}
+    <abbr title="{{ .Get 0 }}">{{ .Inner }}</abbr>
+{{ end }}

layouts/shortcodes/aside.html

@@ -0,0 +1,28 @@
+{{ $type := "" }}
+{{ if .IsNamedParams }}
+    {{ $type = .Get "type" | default "note" }}
+{{ else }}
+    {{ $type = .Get 0 | default "note" }}
+{{ end }}
+
+{{/* This idea comes from the LoveIt theme:
+     https://github.com/dillonzq/LoveIt/blob/aa834e89af8349f6c18d4c7ad50a73fd5f1e40e0/layouts/shortcodes/admonition.html#L3-L14
+*/}}
+
+{{ $icons := dict "note" "pencil" }}
+{{ $icons  = dict "info" "info" | merge $icons }}
+{{ $icons  = dict "tip" "lightbulb" | merge $icons }}
+{{ $icons  = dict "warning" "info" | merge $icons }}
+{{ $icons  = dict "example" "flask" | merge $icons }}
+{{ $icons  = dict "quote" "quote" | merge $icons }}
+
+<aside class="{{ $type }}">
+    <div class="aside-title">
+        {{ partial "icon.html" (index $icons $type) }}
+        {{ title $type }}
+    </div>
+
+    <div class="aside-content">
+        {{ .Inner | .Page.RenderString (dict "display" "block") }}
+    </div>
+</aside>

layouts/shortcodes/figure.html

@@ -1,2 +1,20 @@
-{{ $resource := $.Page.Resources.GetMatch (.Get "src") }}
-{{ partial "figure.html" $resource }}
+{{ $resource := "" }}
+{{ if .IsNamedParams }}
+    {{ $resource = $.Page.Resources.GetMatch (.Get "src") }}
+{{ else }}
+    {{ $resource = $.Page.Resources.GetMatch (.Get 0) }}
+{{ end }}
+
+{{ $noborder := false }}
+{{ if .Get "noborder" }}
+    {{ $noborder = true }}
+{{ end }}
+
+{{ $hidecaption := false }}
+{{ if .Get "hidecaption" }}
+    {{ $hidecaption = true }}
+{{ end }}
+
+<p>
+    {{ partial "figure.html" (dict "src" $resource "noborder" $noborder "hidecaption" $hidecaption) }}
+</p>

layouts/shortcodes/image.html

@@ -0,0 +1,13 @@
+{{ $border := false }}
+{{ if .Get "border" }}
+    {{ $border = true }}
+{{ end }}
+
+{{ $hidecaption := false }}
+{{ if .Get "hidecaption" }}
+    {{ $hidecaption = true }}
+{{ end }}
+
+<p>
+    {{ partial "remote_figure.html" (dict "src" (.Get "src") "border" $border "hidecaption" $hidecaption "type" "image" "alt" (.Get "alt")) }}
+</p>

layouts/shortcodes/see-also.html

@@ -0,0 +1,7 @@
+<div class="see-also">
+    {{ with .Site.GetPage (.Get 0) }}
+        <p>{{ i18n "see_also" }} <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></p>
+    {{ else }}
+        {{ errorf "Page could not be found for see-also shortcode: %s" .Position }}
+    {{ end }}
+</div>

layouts/shortcodes/table.html

@@ -0,0 +1,10 @@
+{{/* See https://willschenk.com/articles/2020/styling_tables_with_hugo/ */}}
+
+{{ $class := "markdown" }}
+{{ with .Get "class" }}
+    {{ $class = delimit (slice $class .) " " }}
+{{ end }}
+
+{{ $htmlTable := .Inner | markdownify }}
+{{ $new := printf `<table class="%s">` $class }}
+{{ (replace $htmlTable "<table>" $new) | safeHTML }}

layouts/shortcodes/video.html

@@ -0,0 +1,13 @@
+{{ $border := false }}
+{{ if .Get "border" }}
+    {{ $border = true }}
+{{ end }}
+
+{{ $hidecaption := false }}
+{{ if .Get "hidecaption" }}
+    {{ $hidecaption = true }}
+{{ end }}
+
+<p>
+    {{ partial "remote_figure.html" (dict "src" (.Get "src") "border" $border "hidecaption" $hidecaption "type" "video" "alt" (.Get "alt")) }}
+</p>

layouts/taxonomy/list.html

@@ -1,41 +1,37 @@
 {{ define "main" }}
-
-<h1>
-    {{ partial "icon.html" "filter" }}
-    {{ i18n "filtering_for" .Title }}
-    {{ if eq .Kind "term" }}
-    <span class="rss-link">
-        {{ with .OutputFormats.Get "rss" }}
-        <a href="{{ .Permalink }}">{{ partial "icon.html" "rss" }}</a>
+    <h1>
+        {{ if eq .Data.Singular "tag" }}
+            {{ partial "icon.html" "tag" }}
+        {{ else if eq .Data.Singular "category" }}
+            {{ partial "icon.html" "folder" }}
+        {{ else }}
+            {{ partial "icon.html" "filter" }}
         {{ end }}
-    </span>
-    {{ end }}
-</h1>
 
-{{ if eq .Kind "taxonomy" }}
-<ul>
-    {{ range .Pages }}
-    <li>
-        <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
-    </li>
-    {{ end }}
-</ul>
-
-{{ else }}
-{{ range .Paginator.Pages }}
-    {{ .Render "summary" }}
-{{ else }}
-<div>
-    {{ i18n "no_posts" }}
-</div>
-{{ end }}
-
-{{ if gt .Paginator.TotalPages 1 }}
-<div class="pagination">
-    {{ template "_internal/pagination.html" . }}
-</div>
-{{ end }}
-
-{{ end }}
+        {{ .Title | markdownify }}
+    </h1>
 
+    <div class="taxonomy-list">
+        {{ with .Data.Terms.Alphabetical }}
+            <ul>
+                {{ range . }}
+                    {{ with .Page }}
+                        <li>
+                            <div class="taxonomy-list-left">
+                                <a href="{{ .Permalink }}">
+                                    <p>{{ .Title | markdownify }}</p>
+                                </a>
+                                {{ partial "post-metadata/taxonomy.html" . }}
+                            </div>
+                            {{ partial "description-or-summary.html" . }}
+                        </li>
+                    {{ end }}
+                {{ end }}
+            </ul>
+        {{ else }}
+            <div>
+                {{ i18n "no_posts" }}
+            </div>
+        {{ end }}
+    </div>
 {{ end }}

layouts/taxonomy/term.html

@@ -0,0 +1,24 @@
+{{ define "main" }}
+    <h1>
+        {{ if eq .Data.Singular "tag" }}
+            {{ partial "icon.html" "tag" }}
+        {{ else if eq .Data.Singular "category" }}
+            {{ partial "icon.html" "folder" }}
+        {{ else }}
+            {{ partial "icon.html" "filter" }}
+        {{ end }}
+
+        {{ .Title | markdownify }}
+        {{ partial "rss-link.html" . }}
+    </h1>
+
+    {{ partial "post-metadata/taxonomy.html" . }}
+
+    {{ with .Content }}
+        {{ . }}
+    {{ end }}
+
+    {{ partial "page-list.html" .Paginator.Pages }}
+
+    {{ partial "pagination.html" . }}
+{{ end }}

theme.toml

@@ -5,10 +5,10 @@ name = "bobatheme"
 license = "MIT"
 licenselink = "https://github.com/BBaoVanC/bobatheme/blob/master/LICENSE"
 description = "Simple Hugo theme for boba.best and bbaovanc.com"
-homepage = "https://boba.best/"
+homepage = "https://bbaovanc.com"
 tags = []
 features = []
-min_version = "0.87.0"
+min_version = "0.80.0"
 
 [author]
   name = "bbaovanc"