Improve taxonomy handling

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

assets/sass/code.scss

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

@@ -16,16 +16,6 @@ a:hover {
   color: var(--text-800);
 }
 
-sup,
-sub {
-  color: var(--text-600);
-}
-
-sup:hover,
-sub:hover {
-  color: var(--text-800);
-}
-
 h1,
 h2,
 h3,
@@ -64,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

@@ -1,28 +1,12 @@
 .hero {
   max-width: $width-content;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 2rem 2rem 0 2rem;
 
   .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 {

assets/sass/list.scss

@@ -1,64 +1,17 @@
-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 {
@@ -67,38 +20,20 @@ main.with-meta {
     }
 
     .summary {
-      margin-top: 0.5rem;
-    }
-
-    .meta {
-      margin-top: 1rem;
-      font-size: 0.8rem;
-
-      .date {
-        color: var(--text-600);
-      }
-
-      .duration {
-        color: color-mix(in srgb, var(--text) 50%, var(--background));
-      }
+      margin: 0.5rem 0 0.5rem 0;
     }
 
     .heading-anchor {
       display: none;
     }
   }
-
-  .post:hover .title,
-  .post:hover .summary {
-    color: var(--text-800);
-  }
 }
 
 @media (max-width: $width-mobile) {
   .list {
     .post {
       &:not(:first-child) {
-        margin-top: 2rem;
+        margin: 2rem 0 2rem 0;
       }
 
       .title {

assets/sass/main.scss

@@ -11,7 +11,9 @@ $width-wide: 75rem;
 @import "blockquote";
 @import "code";
 @import "table";
+@import "meta";
 
+@import "details";
 @import "list";
 @import "gallery";
 

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));
+  }
+}

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-image.html

@@ -1,7 +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/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/_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/index.html

@@ -1,9 +1,5 @@
 <section class="hero">
   <h1 class="title">{{ .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 }}
+  {{ 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,61 @@
-{{ $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 -}}
+  {{ $original := . }}
+
+  {{ $full := $original | images.Filter (images.Process "webp q90") }}
+
+  {{ $thumb := $original }}
+  {{- if gt $original.Width 2000 -}}
+    {{- $thumb = $original | images.Filter (images.Process "resize 2000x webp q75") -}}
+  {{- else -}}
+    {{- $thumb = $original | 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="{{- $original.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

@@ -1,22 +1,26 @@
-{{ $pages := .CurrentSection.Pages.ByDate }}
+{{ $pages := .CurrentSection.Pages.ByDate.Reverse }}
 
 
 <div class="postnav">
   {{ with $pages.Prev . }}
-    <a href="{{ .RelPermalink }}">
-      <div class="previous">
-        <p class="caption">Previous Post</p>
-        <p class="title">{{ .Title }}</p>
-      </div>
-    </a>
+    {{ 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 . }}
-    <a href="{{ .RelPermalink }}">
-      <div class="next">
-        <p class="caption">Next Post</p>
-        <p class="title">{{ .Title }}</p>
-      </div>
-    </a>
+    {{ 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 | plainify }}</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>