Improve taxonomy handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/blockquote.scss

@@ -0,0 +1,21 @@
+blockquote {
+  border-left: 0.15rem solid
+    color-mix(in srgb, var(--text) 30%, var(--background));
+
+  .alert-heading {
+    font-weight: bold;
+    margin: 0 0 0.5rem 0;
+  }
+
+  .alert-emoji {
+    margin-right: 0.5rem;
+  }
+
+  p {
+    margin: 0 0 0.5rem 0;
+  }
+
+  p:last-child {
+    margin: 0;
+  }
+}

assets/sass/code.scss

@@ -0,0 +1,423 @@
+pre {
+  color: var(--text);
+  background-color: var(--background-50);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+}
+
+/* PreWrapper */
+.chroma {
+  .line.prompt::before {
+    content: "$ ";
+  }
+
+  /* Error */
+  .err {
+    color: var(--accent-500);
+  }
+
+  /* LineLink */
+  .lnlinks {
+    outline: none;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  /* LineTableTD */
+  .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  /* LineTable */
+  .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  /* LineHighlight */
+  .hl {
+    background-color: var(--background-200);
+  }
+
+  /* LineNumbersTable */
+  .lnt {
+    white-space: pre;
+    -webkit-user-select: none;
+    user-select: none;
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+  }
+
+  /* LineNumbers */
+  .ln {
+    white-space: pre;
+    -webkit-user-select: none;
+    user-select: none;
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+  }
+
+  /* Line */
+  .line {
+    display: flex;
+  }
+
+  /* Keyword */
+  .k {
+    color: var(--secondary-600);
+  }
+
+  /* KeywordConstant */
+  .kc {
+    color: var(--primary-500);
+  }
+
+  /* KeywordDeclaration */
+  .kd {
+    color: var(--secondary-600);
+  }
+
+  /* KeywordNamespace */
+  .kn {
+    color: var(--secondary-600);
+  }
+
+  /* KeywordPseudo */
+  .kp {
+    color: var(--primary-500);
+  }
+
+  /* KeywordReserved */
+  .kr {
+    color: var(--secondary-600);
+  }
+
+  /* KeywordType */
+  .kt {
+    color: var(--secondary-600);
+  }
+
+  /* Name */
+  .nc {
+    color: var(--accent-600);
+    font-weight: bold;
+  }
+
+  /* NameConstant */
+  .no {
+    color: var(--primary-500);
+    font-weight: bold;
+  }
+
+  /* NameDecorator */
+  .nd {
+    color: var(--secondary-700);
+    font-weight: bold;
+  }
+
+  /* NameEntity */
+  .ni {
+    color: var(--accent-600);
+  }
+
+  /* NameException */
+  .ne {
+    color: var(--accent-600);
+    font-weight: bold;
+  }
+
+  /* NameLabel */
+  .nl {
+    color: var(--primary-500);
+    font-weight: bold;
+  }
+
+  /* NameNamespace */
+  .nn {
+    color: var(--secondary-600);
+  }
+
+  /* NameProperty */
+  .py {
+    color: var(--primary-500);
+  }
+
+  /* NameTag */
+  .nt {
+    color: var(--primary-600);
+  }
+
+  /* NameVariable */
+  .nv {
+    color: var(--primary-500);
+  }
+
+  /* NameVariableClass */
+  .vc {
+    color: var(--primary-500);
+  }
+
+  /* NameVariableGlobal */
+  .vg {
+    color: var(--primary-500);
+  }
+
+  /* NameVariableInstance */
+  .vi {
+    color: var(--primary-500);
+  }
+
+  /* NameVariableMagic */
+  .vm {
+    color: var(--primary-500);
+  }
+
+  /* NameFunction */
+  .nf {
+    color: var(--secondary-700);
+    font-weight: bold;
+  }
+
+  /* NameFunctionMagic */
+  .fm {
+    color: var(--secondary-700);
+    font-weight: bold;
+  }
+
+  /* Literal */
+  .l {
+    color: var(--primary-600);
+  }
+
+  /* LiteralDate */
+  .ld {
+    color: var(--primary-500);
+  }
+
+  /* LiteralString */
+  .s {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringAffix */
+  .sa {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringBacktick */
+  .sb {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringChar */
+  .sc {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringDelimiter */
+  .dl {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringDoc */
+  .sd {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringDouble */
+  .s2 {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringEscape */
+  .se {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringHeredoc */
+  .sh {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringInterpol */
+  .si {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringOther */
+  .sx {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringRegex */
+  .sr {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringSingle */
+  .s1 {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringSymbol */
+  .ss {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumber */
+  .m {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberBin */
+  .mb {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberFloat */
+  .mf {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberHex */
+  .mh {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberInteger */
+  .mi {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberIntegerLong */
+  .il {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberOct */
+  .mo {
+    color: var(--primary-600);
+  }
+
+  /* Operator */
+  .o {
+    color: var(--secondary-600);
+    font-weight: bold;
+  }
+
+  /* OperatorWord */
+  .ow {
+    color: var(--secondary-600);
+    font-weight: bold;
+  }
+
+  /* Comment */
+  .c {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-style: italic;
+  }
+
+  /* CommentHashbang */
+  .ch {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-style: italic;
+  }
+
+  /* CommentMultiline */
+  .cm {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-style: italic;
+  }
+
+  /* CommentSingle */
+  .c1 {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-style: italic;
+  }
+
+  /* CommentSpecial */
+  .cs {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  /* CommentPreproc */
+  .cp {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  /* CommentPreprocFile */
+  .cpf {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  /* GenericDeleted */
+  .gd {
+    color: var(--accent-900);
+    background-color: var(--accent-300);
+  }
+
+  /* GenericEmph */
+  .ge {
+    font-style: italic;
+  }
+
+  /* GenericError */
+  .gr {
+    color: var(--accent-500);
+  }
+
+  /* GenericHeading */
+  .gh {
+    color: var(--primary-500);
+    font-weight: bold;
+  }
+
+  /* GenericInserted */
+  .gi {
+    color: var(--primary-800);
+    background-color: var(--primary-200);
+  }
+
+  /* GenericOutput */
+  .go {
+    color: color-mix(in srgb, var(--text) 70%, var(--background-50));
+  }
+
+  /* GenericPrompt */
+  .gp {
+    color: color-mix(in srgb, var(--text) 70%, var(--background-50));
+  }
+
+  /* GenericStrong */
+  .gs {
+    font-weight: bold;
+  }
+
+  /* GenericSubheading */
+  .gu {
+    color: var(--primary-500);
+  }
+
+  /* GenericTraceback */
+  .gt {
+    color: var(--secondary-600);
+  }
+
+  /* GenericUnderline */
+  .gl {
+    text-decoration: underline;
+  }
+}

assets/sass/common.scss

@@ -13,7 +13,7 @@ a {
 }
 
 a:hover {
-  color: var(--text-700);
+  color: var(--text-800);
 }
 
 h1,
@@ -22,14 +22,27 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0;
   font-weight: 500;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+hr {
+  margin: 1rem 0 1rem 0;
+  border: none;
+  height: 0.15rem;
+  background-color: color-mix(in srgb, var(--text) 30%, var(--background));
 }
 
 figure {
   margin: 0;
 }
 
+blockquote {
+  margin: 1rem 0 1rem 0;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+}
+
 body {
   margin: 0.5rem;
   min-height: calc(100vh - 1rem);
@@ -41,3 +54,11 @@ body {
     flex: 1;
   }
 }
+
+p {
+  margin: 1.5rem 0 1.5rem 0;
+}
+
+li {
+  margin: 0.5rem 0 0.5rem 0;
+}

assets/sass/details.scss

@@ -0,0 +1,55 @@
+main.with-details {
+  max-width: $width-wide;
+  margin: 0 auto;
+  padding: 2rem;
+
+  > .content {
+    width: 100%;
+    padding: 0;
+  }
+
+  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
+  display: grid;
+  grid-template-columns: $width-sidebar $width-content $width-sidebar;
+  column-gap: 2rem;
+
+  .title {
+    font-size: 1.75rem;
+    margin: 0;
+  }
+
+  .length {
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    margin: 0.5rem 0 0.5rem 0;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: $width-wide) {
+  main.with-details {
+    display: block;
+    padding: 0;
+
+    > .details {
+      max-width: $width-content;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    > .content {
+      padding: 2rem;
+    }
+  }
+}
+
+@media (max-width: $width-mobile) {
+  main.with-details {
+    > .details {
+      padding: 1rem;
+    }
+
+    > .content {
+      padding: 0 1rem 1rem 1rem;
+    }
+  }
+}

assets/sass/footer.scss

@@ -36,6 +36,7 @@
         list-style: none;
 
         li {
+          margin: 0;
           font-size: 0.85rem;
         }
       }

assets/sass/hero.scss

@@ -3,25 +3,10 @@
   margin: 0 auto;
   padding: 2rem 2rem 0 2rem;
 
-  h1 {
+  .title {
+    margin: 0;
     font-size: 2.5rem;
   }
-
-  .meta {
-    font-size: 0.8rem;
-
-    .date {
-      color: var(--text-600);
-    }
-
-    .duration {
-      color: color-mix(in srgb, var(--text) 50%, var(--background));
-    }
-  }
-
-  .captioned-image {
-    padding-top: 1.5rem;
-  }
 }
 
 .hero + .content {
@@ -30,6 +15,6 @@
 
 @media (max-width: $width-mobile) {
   .hero {
-    padding: 1rem 1em 0 1rem;
+    padding: 1rem;
   }
 }

assets/sass/list.scss

@@ -1,86 +1,31 @@
-main.with-meta {
-  max-width: $width-wide;
-  margin: 0 auto;
-  padding: 2rem;
-
-  > .content {
-    padding: 0;
-  }
-
-  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
-  display: grid;
-  grid-template-columns: $width-sidebar $width-content $width-sidebar;
-  column-gap: 2rem;
-
-  h1 {
-    font-size: 1.75rem;
-  }
-
-  .length {
-    color: color-mix(in srgb, var(--text) 50%, var(--background));
-    margin: 0.25rem 0;
-    font-size: 0.8rem;
-  }
-}
-
-@media (max-width: $width-wide) {
-  main.with-meta {
-    display: block;
-    padding: 0;
-
-    > .meta {
-      max-width: $width-content;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-
-    > .content {
-      padding: 2rem;
-    }
-  }
-}
-
-@media (max-width: $width-mobile) {
-  main.with-meta {
-    > .meta {
-      padding: 1rem;
-    }
-
-    > .content {
-      padding: 0 1rem 1rem 1rem;
-    }
-  }
-}
-
 .list {
   .post {
     display: block;
-    color: inherit;
+
+    >a {
+      color: inherit;
+    }
+
+    >a:hover {
+      color: var(--text-800);
+    }
 
     &:not(:first-child) {
-      margin-top: 4rem;
+      margin: 4rem 0 4rem 0;
     }
 
     .title {
+      margin: 0;
       font-size: 2.25rem;
     }
 
-    .meta {
-      font-size: 0.8rem;
-
-      .date {
-        color: var(--text-600);
-      }
-
-      .duration {
-        color: color-mix(in srgb, var(--text) 50%, var(--background));
-      }
+    .summary {
+      margin: 0.5rem 0 0.5rem 0;
     }
-  }
 
-  .post:hover .title,
-  .post:hover .summary {
-    color: var(--text-800);
+    .heading-anchor {
+      display: none;
+    }
   }
 }
 
@@ -88,7 +33,11 @@ main.with-meta {
   .list {
     .post {
       &:not(:first-child) {
-        margin-top: 2rem;
+        margin: 2rem 0 2rem 0;
+      }
+
+      .title {
+        font-size: 1.5rem;
       }
     }
   }

assets/sass/main.scss

@@ -8,13 +8,19 @@ $width-wide: 75rem;
 
 @import "heading";
 @import "image";
+@import "blockquote";
+@import "code";
+@import "table";
+@import "meta";
 
+@import "details";
 @import "list";
 @import "gallery";
 
 @import "header";
-@import "content";
 @import "hero";
+@import "content";
+@import "postnav";
 @import "footer";
 
 @import "photoswipe";

assets/sass/meta.scss

@@ -0,0 +1,20 @@
+.meta {
+  margin: 1rem 0 1rem 0;
+  font-size: 0.8rem;
+
+  .tag {
+    color: var(--secondary-600);
+  }
+
+  .tag:hover {
+    color: var(--secondary-800);
+  }
+
+  .date {
+    color: var(--text-600);
+  }
+
+  .duration {
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+  }
+}

assets/sass/postnav.scss

@@ -0,0 +1,59 @@
+.postnav {
+  max-width: $width-content;
+  margin: 0 auto;
+  padding: 2rem;
+
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+
+  a {
+    flex: 50%;
+    color: inherit;
+  }
+
+  a:hover {
+    color: var(--text-800);
+  }
+
+  p {
+    margin: 0.5rem 0 0.5rem 0;
+  }
+
+  .caption {
+    font-weight: 500;
+  }
+
+  .title {
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+
+  .next {
+    text-align: right;
+  }
+
+  .previous .caption::before {
+    content: "‹ ";
+  }
+
+  .next .caption::after {
+    content: " ›";
+  }
+}
+
+.content + .postnav {
+  padding-top: 0;
+}
+
+@media (max-width: $width-mobile) {
+  .postnav {
+    padding: 1rem;
+
+    flex-direction: column;
+
+    a {
+      flex: auto;
+    }
+  }
+}

assets/sass/table.scss

@@ -0,0 +1,30 @@
+.table-wrapper {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead th {
+    border-bottom: 0.1rem solid
+      color-mix(in srgb, var(--text) 20%, var(--background));
+  }
+
+  tr + tr td {
+    border-top: 0.1rem solid
+      color-mix(in srgb, var(--text) 10%, var(--background));
+  }
+
+  th,
+  td {
+    padding: 0.5rem;
+    border-right: 0.1rem solid
+      color-mix(in srgb, var(--text) 10%, var(--background));
+  }
+
+  th:last-child,
+  td:last-child {
+    border-right: none;
+  }
+}

layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,26 @@
+{{ $emoji := dict
+  "caution" ":exclamation:"
+  "warning" ":warning:"
+  "important" ":information_source:"
+  "tip" ":bulb:"
+}}
+{{- if eq .Type "alert" -}}
+  <blockquote class="alert alert-{{ .AlertType }}">
+    <p class="alert-heading">
+      <span class="alert-emoji">
+        {{- transform.Emojify (index $emoji .AlertType) -}}
+      </span>
+      {{ if .AlertTitle }}
+        {{- .AlertTitle -}}
+      {{ else }}
+        {{- .AlertType | title -}}
+      {{ end }}
+    </p>
+    {{- .Text -}}
+  </blockquote>
+{{- else -}}
+  <blockquote>
+    {{- .Text -}}
+  </blockquote>
+{{- end -}}
+{{- /* chomp trailing newline */ -}}

layouts/_default/_markup/render-codeblock-bash.html

@@ -0,0 +1,4 @@
+{{ $result := transform.HighlightCodeBlock . }}
+{{ $pattern := `(?s)<span class="line"([^>]*)>(\s*<span[^>]*>)?\$ (.*?)(</span>\s*)</span>` }}
+{{ $processed := replaceRE $pattern `<span class="line prompt"$1>$2$3$4</span>` $result.Wrapped }}
+{{ $processed | safeHTML }}

layouts/_default/_markup/render-heading.html

@@ -2,3 +2,4 @@
   {{ .Text | safeHTML }}
   <a href="#{{- .Anchor | safeURL -}}" class="heading-anchor">#</a>
 </h{{ .Level }}>
+{{- /* chomp trailing newline */ -}}

layouts/_default/_markup/render-image.html

@@ -1,6 +1,7 @@
-{{ partial "components/image/index.html" (dict
+{{ partial "components/image/index.html" (dict "page" .Page "image" (dict
   "src" .Destination
   "caption" .Text
   "alt" .Title
-  )
+  ))
 }}
+{{- /* chomp trailing newline */ -}}

layouts/_default/_markup/render-link.html

@@ -5,5 +5,6 @@
     target="_blank" rel="noopener"
   {{ end }}
 >
-  {{ .Text | safeHTML }}
+  {{- .Text -}}
 </a>
+{{- /* chomp trailing newline */ -}}

layouts/_default/_markup/render-table.html

@@ -0,0 +1,41 @@
+<div class="table-wrapper">
+  <table
+    {{- range $k, $v := .Attributes }}
+      {{- if $v }}
+        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+      {{- end }}
+    {{- end }}
+  >
+    <thead>
+      {{- range .THead }}
+        <tr>
+          {{- range . }}
+            <th
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </th>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </thead>
+    <tbody>
+      {{- range .TBody }}
+        <tr>
+          {{- range . }}
+            <td
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </td>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>
+{{- /* chomp trailing newline */ -}}

layouts/_default/list.html

@@ -1,8 +1,8 @@
 {{ define "main" }}
-  {{ $withMeta := default true .Params.withMeta }}
-  <main class="{{- if $withMeta -}}with-meta{{- end -}}">
-    {{ if $withMeta }}
-      {{ partial "components/list/meta.html" . }}
+  {{ $details := default true .Params.details }}
+  <main class="{{- if $details -}}with-details{{- end -}}">
+    {{ if $details }}
+      {{ partial "components/list/details.html" . }}
     {{ end }}
     <div class="content">
       {{ partial "posts/list.html" . }}

layouts/_default/single.html

@@ -1,8 +1,9 @@
 {{ define "main" }}
   <main>
-    {{ partial "components/hero/default.html" . }}
+    {{ partial "components/hero/index.html" . }}
     <div class="content">
       {{ .Content }}
     </div>
+    {{ partial "components/postnav/index.html" . }}
   </main>
 {{ end }}

layouts/_shortcodes/sub.html

@@ -0,0 +1 @@
+<sub>{{ .Get 0 | markdownify }}</sub> {{- /* chomp trailing newline */ -}}

layouts/_shortcodes/sup.html

@@ -0,0 +1 @@
+<sup>{{ .Get 0 | markdownify }}</sup> {{- /* chomp trailing newline */ -}}

layouts/gallery/list.html

@@ -1,10 +1,16 @@
 {{ define "main" }}
-  {{ $withMeta := default true .Params.withMeta }}
-  <main class="{{- if $withMeta -}}with-meta{{- end -}}">
-    {{ if $withMeta }}
-      {{ partial "components/list/meta.html" . }}
+  {{ $details := default true .Params.details }}
+  <main class="{{- if $details -}}with-details{{- end -}}">
+    {{ if $details }}
+      {{ partial "components/list/details.html" . }}
     {{ end }}
-    <div class="{{- if $withMeta -}}content{{- else -}}content wide{{- end -}}">
+    <div
+      class="{{- if $details -}}
+        content
+      {{- else -}}
+        content wide
+      {{- end -}}"
+    >
       {{ partial "gallery/list.html" . }}
     </div>
   </main>

layouts/partials/components/hero/default.html

@@ -1,9 +0,0 @@
-<section class="hero">
-  <h1>{{ .Title }}</h1>
-  <div class="meta">
-    <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
-    &middot;
-    <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
-  </div>
-  {{ partial "components/image/index.html" .Params.hero }}
-</section>

layouts/partials/components/hero/index.html

@@ -0,0 +1,5 @@
+<section class="hero">
+  <h1 class="title">{{ .Title }}</h1>
+  {{ partial "components/meta/index.html" . }}
+  {{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
+</section>

layouts/partials/components/image/index.html

@@ -1,24 +1,59 @@
-{{ $imageData := partial "components/image/reflect.html" . }}
-{{- with $imageData.image -}}
+{{- $page := .page -}}
+{{- $image := .image -}}
+
+{{- $src := $image -}}
+{{- $caption := "" -}}
+{{- $title := "" -}}
+{{- $alt := "" -}}
+
+{{- if reflect.IsMap $image -}}
+  {{- $src = $image.src | default "" -}}
+  {{- $caption = $image.caption | default "" -}}
+  {{- $title = $image.title | default $caption | default "" | plainify -}}
+  {{- $alt = $image.alt | default $title | default "" | plainify -}}
+{{- end -}}
+
+{{- if $src -}}
+  {{- $isRemote := strings.HasPrefix $src "http" -}}
+
+  {{- if $isRemote -}}
+    {{- $remote := resources.GetRemote $src -}}
+    {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
+  {{- else -}}
+    {{- $image = ($page.Resources.Get $src) | default (resources.Get $src) -}}
+  {{- end -}}
+{{- end -}}
+
+{{- with $image -}}
+  {{ $full := . | images.Filter (images.Process "webp q90") }}
+
+  {{ $thumb := . }}
+  {{- if gt .Width 2000 -}}
+    {{- $thumb = . | images.Filter (images.Process "resize 2000x webp q75") -}}
+  {{- else -}}
+    {{- $thumb = . | images.Filter (images.Process "webp q75") -}}
+  {{- end -}}
+
+
   <figure class="captioned-image lightbox">
     <a
-      href="{{- .RelPermalink -}}"
-      data-pswp-src="{{- .RelPermalink -}}"
-      data-pswp-width="{{- .Width -}}"
-      data-pswp-height="{{- .Height -}}"
+      href="{{- $full.RelPermalink -}}"
+      data-pswp-src="{{- $full.RelPermalink -}}"
+      data-pswp-width="{{- $full.Width -}}"
+      data-pswp-height="{{- $full.Height -}}"
       class="pswp-image"
     >
       <img
-        src="{{- .RelPermalink -}}"
-        width="{{- .Width -}}"
-        height="{{- .Height -}}"
+        src="{{- $thumb.RelPermalink -}}"
+        width="{{- $thumb.Width -}}"
+        height="{{- $thumb.Height -}}"
         loading="lazy"
-        {{ with $imageData.title }}title="{{- . -}}"{{ end }}
-        {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
+        {{ with $title }}title="{{- . -}}"{{ end }}
+        {{ with $alt }}alt="{{- . -}}"{{ end }}
       />
     </a>
-    {{ with $imageData.caption }}
-      <figcaption>{{ . }}</figcaption>
+    {{ with $caption }}
+      <figcaption>{{ . | safeHTML }}</figcaption>
     {{ end }}
   </figure>
 {{- end -}}

layouts/partials/components/image/reflect.html

@@ -1,31 +0,0 @@
-{{- $input := . -}}
-
-{{- $src := $input -}}
-{{- $caption := "" -}}
-{{- $title := "" -}}
-{{- $alt := "" -}}
-
-{{- if reflect.IsMap $input -}}
-  {{- $src = $input.src | default "" -}}
-  {{- $caption = $input.caption | default "" -}}
-  {{- $title = $input.title | default $caption | default "" -}}
-  {{- $alt = $input.alt | default $title | default "" -}}
-{{- end -}}
-
-{{ $result := dict "image" nil "caption" $caption "title" $title "alt" $alt }}
-
-{{- if $src -}}
-  {{- $isRemote := strings.HasPrefix $src "http" -}}
-  {{- $image := "" -}}
-
-  {{- if $isRemote -}}
-    {{- $remote := resources.GetRemote $src -}}
-    {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
-  {{- else -}}
-    {{- $image = resources.Get $src -}}
-  {{- end -}}
-
-  {{- $result = (dict "image" $image "caption" $caption "title" $title "alt" $alt) -}}
-{{- end -}}
-
-{{- return $result -}}

layouts/partials/components/list/details.html

@@ -1,5 +1,5 @@
-<section class="meta">
-  <h1>{{ .Page.Title }}</h1>
+<section class="details">
+  <h1 class="title">{{ .Page.Title }}</h1>
   <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
   {{ .Content }}
 </section>

layouts/partials/components/meta/index.html

@@ -0,0 +1,18 @@
+<div class="meta">
+  <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
+  &middot;
+  {{ if eq .Kind "page" }}
+    {{ range .Params.tags }}
+      <a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
+      &middot;
+    {{ end }}
+    <span class="duration">
+      {{ printf "%d min. read" .ReadingTime }}
+    </span>
+  {{ else }}
+    {{ $count := len .Pages }}
+    <span class="duration">
+      {{ printf "%d %s" $count (cond (eq $count 1) "item" "items") }}
+    </span>
+  {{ end }}
+</div>

layouts/partials/components/postnav/index.html

@@ -0,0 +1,26 @@
+{{ $pages := .CurrentSection.Pages.ByDate.Reverse }}
+
+
+<div class="postnav">
+  {{ with $pages.Prev . }}
+    {{ if eq .Kind "page" }}
+      <a href="{{ .RelPermalink }}">
+        <div class="previous">
+          <p class="caption">Previous Post</p>
+          <p class="title">{{ .Title }}</p>
+        </div>
+      </a>
+    {{ end }}
+  {{ end }}
+
+  {{ with $pages.Next . }}
+    {{ if eq .Kind "page" }}
+      <a href="{{ .RelPermalink }}">
+        <div class="next">
+          <p class="caption">Next Post</p>
+          <p class="title">{{ .Title }}</p>
+        </div>
+      </a>
+    {{ end }}
+  {{ end }}
+</div>

layouts/partials/posts/list.html

@@ -1,15 +1,13 @@
 <div class="list">
   {{ range sort .Pages "Date" "desc" }}
     {{ if not .Params.private }}
-      <a href="{{- .RelPermalink -}}" class="post">
-        <h1 class="title">{{ .Title }}</h1>
-        <div class="summary">{{ .Summary }}</div>
-        <div class="meta">
-          <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
-          &middot;
-          <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
-        </div>
-      </a>
+      <div class="post">
+        <a href="{{- .RelPermalink -}}">
+          <h1 class="title">{{ .Title }}</h1>
+          <div class="summary">{{ .Summary | plainify }}</div>
+        </a>
+        {{ partial "components/meta/index.html" . }}
+      </div>
     {{ end }}
   {{ end }}
 </div>