make font working with latest css-loader and webpack 5 asset modules

Bump style-loader from 1.3.0 to 3.3.1

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn build && git add . && git commit --amend --no-edit

.prettierrc

@@ -3,9 +3,9 @@
   "printWidth": 100,
   "trailingComma": "all",
   "overrides": [{
-    "files": ".html",
+    "files": ["*.html"],
     "options": {
-      "parser": "html"
+      "parser": "go-template"
     }
   }]
 }

README.md

@@ -99,13 +99,13 @@ You can download the theme manually by going to [https://github.com/panr/hugo-th
 You can also clone it directly to your Hugo folder:
 
 ```bash
-$ git clone https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
+git clone https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
 ```
 
 If you don't want to make any radical changes, it's the best option, because you can get new updates when they are available. To do so, include it as a git submodule:
 
 ```bash
-$ git submodule add https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
+git submodule add -f https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
 ```
 
 ⚠️ **The theme needs at least Hugo version 0.74.x**.
@@ -115,7 +115,7 @@ $ git submodule add https://github.com/panr/hugo-theme-hello-friend.git themes/h
 From your Hugo root directory run:
 
 ```
-$ hugo server -t hello-friend
+hugo server -t hello-friend
 ```
 
 and go to `localhost:1313` in your browser. From now on all the changes you make will go live, so you don't need to refresh your browser every single time.
@@ -201,6 +201,7 @@ Adding a cover image to your post is simple and there are two options when you e
   * Resulting in `https://www.yourpage.com/path/to/absolute/img.jpg`
 * Use `cover = "img.jpg"` and `useRelativeCover = true` to link the image relative to the blog post folder
   * Resulting in `https://www.yourpage.com/posts/blog-entry-xy/img.jpg`
+* Use `coverAlt = "description of image"` to add custom alt text to the cover image (defaults to post or page title as alt text)
 * Use `coverCaption = "Image Credit to [Barry Bluejeans](https://unsplash.com/)"` to add a caption for the cover image.
 
 ## How to display the Last Modified Date in your posts
@@ -232,27 +233,27 @@ To change something directly in the theme, you have to go to `themes/hello-frien
 First, you need to install Node dependencies. To do so, go to the theme directory (from your Hugo root directory):
 
 ```bash
- $ cd themes/hello-friend
+ cd themes/hello-friend
 ```
 
  then run:
 
  ```bash
- $ npm install
+ npm install
- $ npm i yarn
+ npm i yarn
- $ yarn
+ yarn
  ```
 
 After you modified the files you can run webpack in watch mode:
 
 ```bash
-$ yarn dev
+yarn dev
 ```
 
 or rebuild theme
 
 ```bash
-$ yarn build
+yarn build
 ```
 
 To see the changes (remember to restart `hugo server`).

USERS.md

@@ -22,6 +22,7 @@ TEMPLATE:
 - https://felixleger.com/ - **Félix Léger** (Sofware Developer and DevOps)
 - https://gabrielacaesar.com/ - **Gabriela Caesar** (Data journalist)
 - https://guilhermesteves.dev/ - **Guilherme Esteves** (Software Engineer, Writer, Speaker)
+- https://hesec.de - **Patrick Hener** (Security Researcher, Pentester and Coder)
 - https://ilya-lesikov.com - **Ilya Lesikov** (DevOps, SRE)
 - https://imgalone.com/ - **Iancu makes games alone** (Indie Game Dev)
 - https://jonathan.rico.live/ - **Jonathan Rico** (Electronics Engineer)
@@ -30,5 +31,14 @@ TEMPLATE:
 - https://mritd.com/ - **漠然** (Software Engineer and DevOps)
 - https://musq.github.io — **Ashish Ranjan** (Software Engineer)
 - https://protocod.gitlab.io/blog/ **protocod** (Web Developer)
-- https://simeononsecurity.ch/ - **SimeonOnSecurity)** (Security and Automation Blog)
+- https://shinytoyrobots.com - **shinytoyrobots** (Eclectic journaling and essays)
-- https://verso.re/ - **Joan Calabrés** (Security Engineer)
+- https://simeononsecurity.ch/ - **SimeonOnSecurity** (Security and Automation Blog)
+- https://verso.re/ - **Joan Calabrés** (Security Engineer)
+- https://atticuslab.com/ - **Atticus** (Game Server Engineer)
+- https://gregbair.dev/ - **Greg Bair** (Developer and App Architect)
+- https://www.miroslavbucek.cz - **Miroslav Buček** (Product Manager, Smart Home company owner)
+- https://farhamdani.com/ - **Farhamdani** (Freelancer & Nganggur Productive)
+- https://fmg3d.com/ - **Finn M Glas** (Aspiring Physicist, Software Developer)
+- https://nali.org/ - **Nick Ali** (Marketer)
+- https://abhinav031.github.io - **Abhinav Sriram** (Digital Artist, Hobbyist)
+- https://schnerring.net/ - **Michael Schnerring** (Software Engineer)

assets/css/fonts.css

@@ -3,8 +3,7 @@
   font-style: normal;
   font-weight: 400;
   font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
-  src: url("../fonts/Inter-Regular.woff2") format("woff2"),
+  src: url("../fonts/Inter-Regular.woff2") format("woff2");
-       url("../fonts/Inter-Regular.woff") format("woff");
   font-display: swap;
 }
 @font-face {
@@ -12,8 +11,7 @@
   font-style: italic;
   font-weight: 400;
   font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
-  src: url("../fonts/Inter-Italic.woff2") format("woff2"),
+  src: url("../fonts/Inter-Italic.woff2") format("woff2");
-       url("../fonts/Inter-Italic.woff") format("woff");
   font-display: swap;
 }
 
@@ -22,8 +20,7 @@
   font-style: normal;
   font-weight: 600;
   font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
-  src: url("../fonts/Inter-Medium.woff2") format("woff2"),
+  src: url("../fonts/Inter-Medium.woff2") format("woff2");
-       url("../fonts/Inter-Medium.woff") format("woff");
   font-display: swap;
 }
 @font-face {
@@ -31,8 +28,7 @@
   font-style: italic;
   font-weight: 600;
   font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
-  src: url("../fonts/Inter-MediumItalic.woff2") format("woff2"),
+  src: url("../fonts/Inter-MediumItalic.woff2") format("woff2");
-       url("../fonts/Inter-MediumItalic.woff") format("woff");
   font-display: swap;
 }
 
@@ -41,8 +37,7 @@
   font-style: normal;
   font-weight: 800;
   font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
-  src: url("../fonts/Inter-Bold.woff2") format("woff2"),
+  src: url("../fonts/Inter-Bold.woff2") format("woff2");
-       url("../fonts/Inter-Bold.woff") format("woff");
   font-display: swap;
 }
 @font-face {
@@ -50,7 +45,6 @@
   font-style: italic;
   font-weight: 800;
   font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
-  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2"),
+  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2");
-       url("../fonts/Inter-BoldItalic.woff") format("woff");
   font-display: swap;
 }

assets/css/main.css

@@ -133,6 +133,7 @@ code, kbd {
   border-radius: 5px;
   font-size: .9rem;
   font-weight: normal;
+  font-feature-settings: normal;
 
   code, kbd {
     background: transparent;
@@ -142,6 +143,7 @@ code, kbd {
 }
 
 pre {
+  font-feature-settings: normal;
   background: #212020;
   padding: 20px;
   border-radius: 8px;
@@ -154,6 +156,7 @@ pre {
   }
 
   code {
+    font-feature-settings: normal;
     background: none !important;
     color: #ccc;
     margin: 0;
@@ -190,7 +193,8 @@ blockquote {
   }
 }
 
-table {
+/* Fix for gist integration */
+table:not(.js-file-line-container) {
   table-layout: fixed;
   border-collapse: collapse;
   width: 100%;
@@ -198,7 +202,8 @@ table {
   border-radius: 5px;
 }
 
-table, th, td {
+/* Fix for gist integration */
+table, th, td:not(.js-line-number) {
   border: 1px solid;
   padding: 10px;
 }

assets/css/post.css

@@ -56,6 +56,7 @@
     max-width: 860px;
 
     img {
+      margin: 0 auto;
       border-radius: 8px;
       box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
     }

assets/css/style.css

@@ -1,5 +1,6 @@
-@import 'fonts.css';
 @import 'variables.css';
+
+@import 'fonts.css';
 @import 'buttons.css';
 
 @import 'header.css';

layouts/404.html

@@ -1,19 +1,29 @@
 {{ define "main" }}
-<div class="post">
+  <div class="post">
-    <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+    <h1 class="post-title">
+      <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+    </h1>
     <div class="post-content">
-        <p>{{ "Hmm... Sorry, this page seems to be missing." | markdownify }}
+      <p>
-        {{ if .Site.Taxonomies.tags }}
+        {{ "Hmm... Sorry, this page seems to be missing." | markdownify }}
-        {{ "Maybe these tags will help you find what you're looking for. :smile:" | markdownify | emojify }}</p>
+      </p>
+
+      {{ if .Site.Taxonomies.tags }}
+        <p>
+          {{ "Maybe these tags will help you find what you're looking for. :smile:" | markdownify | emojify }}
+        </p>
         <h2>Tags</h2>
         <div class="terms">
-            <ul class="terms__list">
+          <ul class="terms__list">
-                {{ range .Site.Taxonomies.tags }}
+            {{ range .Site.Taxonomies.tags }}
-                    <li class="terms__term"><a href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a><span class="terms__term-count">{{ .Count }}</span></li>
+              <li class="terms__term">
-                {{ end }}
+                <a href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a
-            </ul>
+                ><span class="terms__term-count">{{ .Count }}</span>
+              </li>
+            {{ end }}
+          </ul>
         </div>
-        {{ end }}
+      {{ end }}
     </div>
-</div>
+  </div>
-{{ end }}
+{{ end }}

layouts/_default/baseof.html

@@ -2,7 +2,11 @@
 <html lang="{{ $.Site.Language }}">
   <head>
     {{ block "title" . }}
-      <title>{{ if .IsHome }}{{ $.Site.Title }}{{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}{{ else }}{{ .Title }} :: {{ $.Site.Title }}{{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}{{ end }}</title>
+      <title>
+        {{ if .IsHome }}{{ $.Site.Title }}{{ with $.Site.Params.Subtitle }} —
+        {{ . }}{{ end }}{{ else }}{{ .Title }} ::
+        {{ $.Site.Title }}{{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}{{ end }}
+      </title>
     {{ end }}
     {{ partial "head.html" . }}
   </head>
@@ -11,8 +15,7 @@
       {{ partial "header.html" . }}
 
       <div class="content">
-        {{ block "main" . }}
+        {{ block "main" . }} {{ end }}
-        {{ end }}
       </div>
 
       {{ block "footer" . }}

layouts/_default/index.html

@@ -28,7 +28,11 @@
             {{ partial "lastmod.html" . }}
           {{ end }}
         {{ end }}
-        {{ with .Params.Author }}<span class="post-author">— {{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span>{{ end }}
+
+        {{ with .Params.Author }}
+          <span class="post-author">— {{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span>
+        {{ end }}
+
         {{ if $.Site.Params.ShowReadingTime }}
           <span class="post-read-time">— {{ .ReadingTime }} {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
         {{ end }}
@@ -37,23 +41,13 @@
       {{ if .Params.tags }}
         <span class="post-tags">
           {{ range .Params.tags }}
-            #<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp;
+            <a href="{{ (urlize (printf "tags/%s" . )) | absLangURL }}/">#{{ . }}</a>&nbsp;
           {{ end }}
         </span>
       {{ end }}
 
       {{ if .Params.Cover }}
-        <figure class="post-cover">
+        {{ partial "postcover.html" . }}
-          {{ if .Params.UseRelativeCover }}
-            <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}"/>
-          {{ else }}
-            <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}"/>
-          {{ end }}
-
-          {{ if .Params.CoverCaption }}
-            <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
-          {{ end }}
-        </figure>
       {{ end }}
 
       <div class="post-content">
@@ -61,7 +55,7 @@
           {{ . | markdownify }}
         {{ else }}
           {{ if .Truncated }}
-            {{ .Summary | markdownify }}
+            {{ .Summary }}
           {{ end }}
         {{ end }}
       </div>

layouts/_default/list.html

@@ -1,59 +1,60 @@
 {{ define "main" }}
   <div class="posts">
     {{ range .Pages }}
-    <div class="post on-list">
+      <div class="post on-list">
-      <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+        <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
-      <div class="post-meta">
+        <div class="post-meta">
-        {{ if .Date }}
+          {{ if .Date }}
-          <span class="post-date">
+            <span class="post-date">
-            {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
+              {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
+            </span>
+
+            {{ if $.Site.Params.LastModDisplay }}
+              {{ partial "lastmod.html" . }}
+            {{ end }}
+          {{ end }}
+          {{ with .Params.Author }}
+            <span class="post-author"
+              >— {{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span
+            >{{ end }}
+
+
+          {{ if $.Site.Params.ShowReadingTime }}
+            <span class="post-read-time"
+              >— {{ .ReadingTime }} {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span
+            >
+          {{ end }}
+        </div>
+
+        {{ if .Params.tags }}
+          <span class="post-tags">
+            {{ range .Params.tags }}
+              <a href="{{ (urlize (printf "tags/%s" . )) | absLangURL }}/">#{{ . }}</a>&nbsp;
+            {{ end }}
           </span>
-
-          {{ if $.Site.Params.LastModDisplay }}
-            {{ partial "lastmod.html" . }}
-          {{ end }}
         {{ end }}
-        {{ with .Params.Author }}<span class="post-author">— {{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span>{{ end }}
+
-        {{ if $.Site.Params.ShowReadingTime }}
+        {{ if .Params.Cover }}
-          <span class="post-read-time">— {{ .ReadingTime }} {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
+          {{ partial "postcover.html" . }}
+        {{ end }}
+
+        <div class="post-content">
+          {{ with .Description }}
+            {{ . | markdownify }}
+            {{ else }}
+            {{ if .Truncated }}
+              {{ .Summary }}
+            {{ end }}
+          {{ end }}
+        </div>
+        {{ if not .Params.hideReadMore }}
+          <div>
+            <a class="read-more button" href="{{ .RelPermalink }}"
+              >{{ $.Site.Params.ReadMore | default "Read more" }} →</a
+            >
+          </div>
         {{ end }}
       </div>
-
-      {{ if .Params.tags }}
-        <span class="post-tags">
-          {{ range .Params.tags }}
-            #<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp;
-          {{ end }}
-        </span>
-      {{ end }}
-
-      {{ if .Params.Cover }}
-        <figure class="post-cover">
-          {{ if .Params.UseRelativeCover }}
-            <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}" />
-          {{ else }}
-            <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}" />
-          {{ end }}
-
-          {{ if .Params.CoverCaption }}
-            <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
-          {{ end }}
-        </figure>
-      {{ end }}
-
-      <div class="post-content">
-        {{ with .Description }}
-          {{ . | markdownify }}
-        {{ else }}
-          {{ if .Truncated }}
-            {{ .Summary | markdownify }}
-          {{ end }}
-        {{ end }}
-      </div>
-      {{ if not .Params.hideReadMore }}
-        <div><a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }} →</a></div>
-      {{ end }}
-    </div>
     {{ end }}
     {{ partial "pagination.html" . }}
   </div>

layouts/_default/single.html

@@ -3,7 +3,7 @@
   {{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}
 
   <div class="post">
-    <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+    <h1 class="post-title">{{ .Title | markdownify }}</h1>
     <div class="post-meta">
       {{ if .Date | default nil }}
         <span class="post-date">
@@ -17,38 +17,37 @@
         {{ end }}
       {{ end }}
 
-      {{ with .Params.Author }}<span class="post-author">— {{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span>{{ end }}
+      {{ with .Params.Author }}
+        <span class="post-author"
+          >— {{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span
+        >{{ end }}
+
+
       {{ if $.Site.Params.ShowReadingTime }}
-        <span class="post-read-time">— {{ .ReadingTime }} {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
+        <span class="post-read-time"
+          >— {{ .ReadingTime }} {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span
+        >
       {{ end }}
     </div>
 
     {{ if .Params.tags }}
       <span class="post-tags">
         {{ range .Params.tags }}
-          #<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp;
+          <a href="{{ (urlize (printf "tags/%s" . )) | absLangURL }}/">#{{ . }}</a>&nbsp;
         {{ end }}
       </span>
     {{ end }}
 
     {{ if .Params.Cover }}
-      <figure class="post-cover">
+      {{ partial "postcover.html" . }}
-        {{ if .Params.UseRelativeCover }}
-          <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}" />
-        {{ else }}
-          <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}" />
-        {{ end }}
-
-        {{ if .Params.CoverCaption }}
-          <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
-        {{ end }}
-      </figure>
     {{ end }}
 
     <div class="post-content">
       {{ if or .Params.Toc $.Site.Params.Toc }}
+        {{ if ne .Params.Toc false }}
         <h2>Table of Contents</h2>
         <aside class="table-of-contents">{{ .TableOfContents }}</aside>
+        {{ end }}
       {{ end }}
       {{ .Content }}
     </div>
@@ -56,7 +55,9 @@
       {{ if or .NextInSection .PrevInSection }}
         <div class="pagination">
           <div class="pagination__title">
-            <span class="pagination__title-h">{{ $.Site.Params.ReadOtherPosts | default "Read other posts" }}</span>
+            <span class="pagination__title-h"
+              >{{ $.Site.Params.ReadOtherPosts | default "Read other posts" }}</span
+            >
             <hr />
           </div>
           <div class="pagination__buttons">
@@ -81,12 +82,10 @@
       {{ end }}
     {{ end }}
 
-
     {{ if not (eq .Params.Comments "false") }}
       {{ if or (eq .Type $.Site.Params.contentTypeName) (.Params.Comments) }}
         {{ partial "comments.html" . }}
       {{ end }}
     {{ end }}
-
+  </div>
-    </div>
 {{ end }}

layouts/_default/terms.html

@@ -1,18 +1,19 @@
 {{ define "main" }}
-
+  <div class="terms">
-<div class="terms">
+    <h1>{{ .Title }}</h1>
-  <h1>{{ .Title }}</h1>
+    <ul class="terms__list">
-  <ul class="terms__list">
+      {{ $type := .Type }}
-    {{ $type := .Type }}
+      {{ range $key, $value := .Data.Terms.Alphabetical }}
-    {{ range $key, $value := .Data.Terms.Alphabetical }}
+        {{ $name := .Name }}
-      {{ $name := .Name }}
+        {{ $count := .Count }}
-      {{ $count := .Count }}
+        {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
-      {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
+          <li class="terms__term">
-        <li class="terms__term">
+            <a href="{{ .Permalink }}"
-          <a href="{{ .Permalink }}">#{{ .Name }} <span class="terms__term-count">{{ $count }}</span></a>
+              >#{{ .Name }} <span class="terms__term-count">{{ $count }}</span></a
-        </li>
+            >
+          </li>
+        {{ end }}
       {{ end }}
-    {{ end }}
+    </ul>
-  </ul>
+  </div>
-</div>
 {{ end }}

layouts/archive/list.html

@@ -1,47 +1,49 @@
 {{ define "main" }}
+  {{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }}
+  {{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}
 
-{{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }}
+  <div class="archive">
-{{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}
+    <h1>{{ .Title }}</h1>
-
+    {{ range .Site.RegularPages.GroupByPublishDate "2006" }}
-<div class="archive">
+      {{ if ne .Key "0001" }}
-  <h1>{{ .Title }}</h1>
+        <div class="archive__group-year">
-  {{ range .Site.RegularPages.GroupByPublishDate "2006" }}
+          <h2 class="archive__group-year-header">{{ replace .Key "0001" "" }}</h2>
-  {{ if ne .Key "0001" }}
+          {{ range .Pages.GroupByDate "January" }}
-  <div class="archive__group-year">
+            <div class="archive__group-month">
-    <h2 class="archive__group-year-header">{{ replace .Key "0001" "" }}</h2>
+              <h3 class="archive__group-month-header">{{ .Key }}</h3>
-    {{ range .Pages.GroupByDate "January" }}
+              <div class="archive__group-posts">
-    <div class="archive__group-month">
+                {{ range where .Pages "Type" $contentTypeName }}
-      <h3 class="archive__group-month-header">{{ .Key }}</h3>
+                  {{ if eq .Kind "page" }}
-      <div class="archive__group-posts">
+                    <div class="archive__post">
-        {{ range where .Pages "Type" $contentTypeName }}
+                      <h3 class="archive__post-title">
-        {{ if eq .Kind "page" }}
+                        <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
-        <div class="archive__post">
+                      </h3>
-          <h3 class="archive__post-title"><a
+                      <div class="archive__post-meta">
-              href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+                        <span class="archive__post-date">
-          </h3>
+                          {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
-          <div class="archive__post-meta">
+                        </span>
-            <span class="archive__post-date">
+                        {{ with .Params.Author }}
-              {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
+                          <span class="archive__post-author"
-            </span>
+                            >—
-            {{ with .Params.Author }}
+                            {{ $.Site.Params.WrittenBy | default "Written by" }}
-            <span class="archive__post-author">—
+                            {{ . }}
-              {{ $.Site.Params.WrittenBy | default "Written by" }}
+                          </span>
-              {{ . }}
+                        {{ end }}
-            </span>
+                        {{ if $.Site.Params.ShowReadingTime }}
-            {{ end }}
+                          <span class="archive__post-read-time"
-            {{ if $.Site.Params.ShowReadingTime }}
+                            >— {{ .ReadingTime }}
-            <span class="archive__post-read-time">— {{ .ReadingTime }}
+                            {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span
-              {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
+                          >
-            {{ end }}
+                        {{ end }}
-          </div>
+                      </div>
+                    </div>
+                  {{ end }}
+                {{ end }}
+              </div>
+            </div>
+          {{ end }}
         </div>
-        {{ end }}
+      {{ end }}
-        {{ end }}
-      </div>
-    </div>
     {{ end }}
   </div>
-  {{ end }}
-  {{ end }}
-</div>
 {{ end }}

layouts/partials/analytics.html

@@ -4,7 +4,7 @@
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-ga('create', '{{.}}', 'auto');
+ga('create', '{{ . }}', 'auto');
 ga('send', 'pageview');
 
 </script>

layouts/partials/comments.html

@@ -4,5 +4,4 @@ Hugo directory and insert:
 
 {{ template "_internal/disqus.html" . }}
 
-or whatever comment engine you want -> https://gohugo.io/content-management/comments/#readout
+or whatever comment engine you want -> https://gohugo.io/content-management/comments/#readout -->
--->

layouts/partials/footer.html

@@ -2,13 +2,19 @@
   <div class="footer__inner">
     {{ if $.Site.Copyright }}
       <div class="copyright copyright--user">{{ $.Site.Copyright | safeHTML }}</div>
-    {{else}}
+      {{ else }}
       {{ partial "logo.html" . }}
       <div class="copyright">
-        <span>© {{ now.Year }} Powered by <a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a></span>
+        <span
-        <span>Theme created by <a href="https://twitter.com/panr" target="_blank" rel="noopener">panr</a></span>
+          >© {{ now.Year }} Powered by
+          <a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a></span
+        >
+        <span
+          >Theme created by
+          <a href="https://twitter.com/panr" target="_blank" rel="noopener">panr</a></span
+        >
       </div>
-    {{end}}
+    {{ end }}
   </div>
 </footer>
 

layouts/partials/greater-icon.html

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" class="greater-icon" viewBox="0 0 44 44">
-  <path fill="none" d="M15 8l14.729 14.382L15 35.367"/>
+  <path fill="none" d="M15 8l14.729 14.382L15 35.367" />
 </svg>

layouts/partials/head.html

@@ -1,21 +1,39 @@
-<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<meta name="description" content="{{ if .IsHome }}{{ $.Site.Params.Subtitle }}{{ else }}{{ .Summary | plainify }}{{ end }}"/>
+<meta
-<meta name="keywords" content="{{ with .Params.Keywords }}{{ delimit . ", " }}{{ else }}{{ $.Site.Params.Keywords }}{{ end }}"/>
+  name="description"
-<meta name="robots" content="noodp"/>
+  content="{{ if .IsHome }}{{ $.Site.Params.Subtitle }}{{ else }}{{ .Summary | plainify }}{{ end }}"
+/>
+<meta
+  name="keywords"
+  content="{{ with .Params.Keywords }}{{ delimit . ", " }}{{ else }}{{ $.Site.Params.Keywords }}{{ end }}"
+/>
+<meta name="robots" content="noodp" />
 <link rel="canonical" href="{{ .Permalink }}" />
 
 <!-- head custom -->
 {{- partial "prepended_head.html" . }}
 
 <!-- Theme CSS -->
-<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
+<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}" />
 <!-- Custom CSS to override theme properties (/static/style.css) -->
-<link rel="stylesheet" href="{{ "style.css" | absURL }}">
+<link rel="stylesheet" href="{{ "style.css" | absURL }}" />
 
 <!-- Icons -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ "img/apple-touch-icon-144-precomposed.png" | absURL }}">
+<link
-<link rel="shortcut icon" href="{{ "img/favicon.png" | absURL }}">
+  rel="apple-touch-icon-precomposed"
+  sizes="144x144"
+  href="{{ "img/apple-touch-icon-144-precomposed.png" | absURL }}"
+/>
+<link rel="shortcut icon" href="{{ "img/favicon.png" | absURL }}" />
+
+<!-- Fonts -->
+<link href="{{ "assets/fonts/Inter-Italic.woff2" | absURL }}" rel="preload" type="font/woff2" as="font" crossorigin="">
+<link href="{{ "assets/fonts/Inter-Regular.woff2" | absURL }}" rel="preload" type="font/woff2" as="font" crossorigin="">
+<link href="{{ "assets/fonts/Inter-Medium.woff2" | absURL }}" rel="preload" type="font/woff2" as="font" crossorigin="">
+<link href="{{ "assets/fonts/Inter-MediumItalic.woff2" | absURL }}" rel="preload" type="font/woff2" as="font" crossorigin="">
+<link href="{{ "assets/fonts/Inter-Bold.woff2" | absURL }}" rel="preload" type="font/woff2" as="font" crossorigin="">
+<link href="{{ "assets/fonts/Inter-BoldItalic.woff2" | absURL }}" rel="preload" type="font/woff2" as="font" crossorigin="">
 
 <!-- Twitter Card -->
 {{ template "_internal/twitter_cards.html" . }}
@@ -25,7 +43,7 @@
 
 <!-- RSS | JSON -->
 {{ range .AlternativeOutputFormats -}}
-    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
+  {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
 {{ end -}}
 
 <!-- head custom -->

layouts/partials/header.html

@@ -6,8 +6,8 @@
         {{ partial "menu.html" . }}
         <span class="menu-trigger">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <path d="M0 0h24v24H0z" fill="none"/>
+            <path d="M0 0h24v24H0z" fill="none" />
-            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
           </svg>
         </span>
       {{ end }}

layouts/partials/lastmod.html

@@ -3,7 +3,8 @@
 {{ if gt .Lastmod (add (time .Date).Unix $hourInSec) }}
   {{ with .Lastmod }}
     <span class="post-moddate">
-      ({{ $.Site.Params.LastModDisplay }} {{ .Format ($.Site.Params.DateFormatSingle | default "2006-01-02") }})
+      ({{ $.Site.Params.LastModDisplay }}
+      {{ .Format ($.Site.Params.DateFormatSingle | default "2006-01-02") }})
     </span>
   {{ end }}
 {{ end }}

layouts/partials/logo.html

@@ -1,9 +1,15 @@
-<a href="{{ if $.Site.Params.Logo.LogoHomeLink }}{{ $.Site.Params.Logo.LogoHomeLink }}{{else}}{{ $.Site.BaseURL }}{{ end }}" class="logo" style="text-decoration: none;">
+<a
+  href="{{ if $.Site.Params.Logo.LogoHomeLink }}{{ $.Site.Params.Logo.LogoHomeLink }}{{ else }}{{ $.Site.BaseURL }}{{ end }}"
+  class="logo"
+  style="text-decoration: none;"
+>
   {{ if $.Site.Params.Logo.path }}
     <img src="{{ $.Site.Params.Logo.path }}" alt="{{ $.Site.Params.Logo.alt }}" />
-  {{ else }}
+    {{ else }}
     <span class="logo__mark">{{ partial "greater-icon.html" . }}</span>
-    <span class="logo__text">{{ with $.Site.Params.Logo.logoText }}{{ . }}{{ else }}hello friend{{ end }}</span>
+    <span class="logo__text"
+      >{{ with $.Site.Params.Logo.logoText }}{{ . }}{{ else }}hello friend{{ end }}</span
+    >
     <span class="logo__cursor"></span>
   {{ end }}
 </a>

layouts/partials/menu.html

@@ -10,9 +10,10 @@
         <ul class="menu__sub-inner">
           <li class="menu__sub-inner-more-trigger">
             {{ $.Site.Params.MenuMore | default "Show more" }}
-            <span class="menu__sub-inner-more-trigger-icon">{{ partial "greater-icon.html" . }}</span>
+            <span class="menu__sub-inner-more-trigger-icon"
+              >{{ partial "greater-icon.html" . }}</span
+            >
           </li>
-
           <ul class="menu__sub-inner-more hidden">
             {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
               {{ if not .HasChildren }}
@@ -22,7 +23,7 @@
           </ul>
         </ul>
       {{ end }}
-    {{ else }}
+      {{ else }}
       {{ range $.Site.Menus.main }}
         {{ if not .HasChildren }}
           <li><a href="{{ .URL }}">{{ .Name }}</a></li>

layouts/partials/postcover.html

@@ -0,0 +1,11 @@
+<figure class="post-cover">
+  {{ if .Params.UseRelativeCover }}
+    <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Params.CoverAlt | plainify | default .Title }}"/>
+  {{ else }}
+    <img src="{{ .Params.Cover | absURL }}" alt="{{ .Params.CoverAlt | plainify | default .Title }}"/>
+  {{ end }}
+
+  {{ if .Params.CoverCaption }}
+    <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
+  {{ end }}
+</figure>

layouts/partials/theme-icon.html

@@ -1,5 +1,14 @@
-<svg class="theme-toggler" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
-  <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
+  class="theme-toggler"
+  width="24"
+  height="24"
+  viewBox="0 0 48 48"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
   3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
-  13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"/>
+  13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"
+  />
 </svg>

layouts/shortcodes/imgproc.html

@@ -1,25 +1,30 @@
 {{ $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
 {{ $command := .Get 1 }}
 {{ $options := .Get 2 }}
-{{ $position := .Get 3}}
+{{ $position := .Get 3 }}
 
-{{ if eq $command "Fit"}}
+{{ if eq $command "Fit" }}
   {{ .Scratch.Set "image" ($original.Fit $options) }}
-{{ else if eq $command "Resize"}}
+  {{ else if eq $command "Resize" }}
   {{ .Scratch.Set "image" ($original.Resize $options) }}
-{{ else if eq $command "Fill"}}
+  {{ else if eq $command "Fill" }}
   {{ .Scratch.Set "image" ($original.Fill $options) }}
-{{ else }}
+  {{ else }}
-  {{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
+  {{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize." }}
 {{ end }}
 
 {{ $image := .Scratch.Get "image" }}
 
-<figure class="{{ with $position }}{{ . }}{{ else -}} left {{- end }}" >
+<figure class="{{ with $position }}{{ . }}{{ else -}} left {{- end }}">
-	<img style="max-width: 100%; width: auto; height: auto; border-radius: 8px;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
+  <img
-	{{ with .Inner }}
+    style="max-width: 100%; width: auto; height: auto; border-radius: 8px;"
+    src="{{ $image.RelPermalink }}"
+    width="{{ $image.Width }}"
+    height="{{ $image.Height }}"
+  />
+  {{ with .Inner }}
     <figcaption>
       {{ . }}
     </figcaption>
-	{{ end }}
+  {{ end }}
 </figure>

package.json

@@ -6,7 +6,8 @@
   "license": "MIT",
   "scripts": {
     "dev": "webpack --mode=development --watch",
-    "build": "webpack --mode=production"
+    "build": "webpack --mode=production",
+    "prepare": "husky install"
   },
   "browserslist": [
     "last 2 versions",
@@ -22,35 +23,36 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.5",
     "browserslist": "^4.0.1",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "clipboard": "^2.0.4",
-    "css-loader": "^4.2.2",
+    "css-loader": "^6.5.1",
-    "cssnano": "^4.1.8",
+    "cssnano": "^5.0.8",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^6.1.0",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^5.5.0",
-    "husky": "^4.2.5",
+    "husky": "^7.0.4",
-    "mini-css-extract-plugin": "^0.11.0",
+    "mini-css-extract-plugin": "^2.4.3",
-    "postcss": "^7.0.0",
+    "postcss": "^8.2.10",
     "postcss-browser-reporter": "^0.6.0",
-    "postcss-cli": "^7.1.2",
+    "postcss-cli": "^9.0.1",
-    "postcss-import": "^12.0.1",
+    "postcss-color-function": "^4.0.1",
-    "postcss-loader": "^3.0.0",
+    "postcss-color-mod-function": "^3.0.3",
-    "postcss-mixins": "^6.2.1",
+    "postcss-import": "^14.0.0",
-    "postcss-nested": "^4.2.3",
+    "postcss-loader": "^6.2.0",
+    "postcss-mixins": "^8.1.0",
+    "postcss-nested": "^5.0.5",
     "postcss-preset-env": "^6.7.0",
-    "postcss-reporter": "^6.0.1",
+    "postcss-reporter": "^7.0.2",
-    "postcss-url": "^8.0.0",
+    "postcss-url": "^10.1.3",
     "prettier-eslint-cli": "^5.0.0",
     "ramda": "^0.27.1",
-    "style-loader": "^1.2.1",
+    "style-loader": "^3.3.1",
-    "uglifyjs-webpack-plugin": "^2.2.0",
+    "terser-webpack-plugin": "^5.2.4",
     "url-loader": "^4.1.0",
-    "webpack": "^4.29.3",
+    "webpack": "^5.27.1",
-    "webpack-cli": "^3.2.3"
+    "webpack-cli": "^4.5.0"
   },
   "husky": {
     "hooks": {

static/assets/main.js

@@ -1 +1 @@
-!function(n){var o={};function r(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}r.m=n,r.c=o,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,n){n(1),e.exports=n(2)},function(e,t){function n(){return window.matchMedia(l).matches}function o(){c&&c.classList.toggle("hidden",!n()),i&&i.classList.toggle("hidden",n()),u&&u.classList.toggle("hidden",!n())}var r=document.querySelector(".container"),i=document.querySelector(".menu"),c=document.querySelector(".menu-trigger"),d=(document.querySelector(".menu__inner--desktop"),document.querySelector(".menu__sub-inner-more-trigger")),u=document.querySelector(".menu__sub-inner-more"),l=getComputedStyle(document.body).getPropertyValue("--phoneWidth");i&&i.addEventListener("click",function(e){return e.stopPropagation()}),u&&u.addEventListener("click",function(e){return e.stopPropagation()}),o(),document.body.addEventListener("click",function(){n()||!u||u.classList.contains("hidden")?n()&&!i.classList.contains("hidden")&&i.classList.add("hidden"):u.classList.add("hidden")}),window.addEventListener("resize",o),c&&c.addEventListener("click",function(e){e.stopPropagation(),i&&i.classList.toggle("hidden")}),d&&d.addEventListener("click",function(e){e.stopPropagation(),u&&u.classList.toggle("hidden"),u&&u.getBoundingClientRect().right>r.getBoundingClientRect().right&&(u.style.left="auto",u.style.right=0)})},function(e,t){var n=window.localStorage&&window.localStorage.getItem("theme"),o=document.querySelector(".theme-toggle"),r="dark"===n;null!==n&&document.body.classList.toggle("dark-theme",r),o.addEventListener("click",function(){document.body.classList.toggle("dark-theme"),window.localStorage&&window.localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")})}]);
+!function(){var e,t,n,o,i,d,c,s,r,a,l;e=document.querySelector(".container"),t=document.querySelector(".menu"),n=document.querySelector(".menu-trigger"),document.querySelector(".menu__inner--desktop"),o=document.querySelector(".menu__sub-inner-more-trigger"),i=document.querySelector(".menu__sub-inner-more"),d=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),c=function(){return window.matchMedia(d).matches},s=function(){n&&n.classList.toggle("hidden",!c()),t&&t.classList.toggle("hidden",c()),i&&i.classList.toggle("hidden",!c())},t&&t.addEventListener("click",(function(e){return e.stopPropagation()})),i&&i.addEventListener("click",(function(e){return e.stopPropagation()})),s(),document.body.addEventListener("click",(function(){c()||!i||i.classList.contains("hidden")?c()&&!t.classList.contains("hidden")&&t.classList.add("hidden"):i.classList.add("hidden")})),window.addEventListener("resize",s),n&&n.addEventListener("click",(function(e){e.stopPropagation(),t&&t.classList.toggle("hidden")})),o&&o.addEventListener("click",(function(t){t.stopPropagation(),i&&i.classList.toggle("hidden"),i&&i.getBoundingClientRect().right>e.getBoundingClientRect().right&&(i.style.left="auto",i.style.right=0)})),r=window.localStorage&&window.localStorage.getItem("theme"),a=document.querySelector(".theme-toggle"),l="dark"===r,null!==r&&document.body.classList.toggle("dark-theme",l),a.addEventListener("click",(function(){document.body.classList.toggle("dark-theme"),window.localStorage&&window.localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark":"light")}))}();

webpack.config.js

@@ -1,8 +1,6 @@
-const Webpack = require("webpack");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 
 const path = require("path");
 
@@ -39,15 +37,18 @@ module.exports = (env, { mode }) => ({
         },
       },
       {
-        test: /\.(png|jpg|woff|woff2|ttf|eot|svg)$/,
+        test: /\.(png|jpe?g|svg)$/,
-        use: [
+        type: "asset/resource",
-          {
+        generator: {
-            loader: "url-loader",
+          filename: "images/[name][ext]",
-            options: {
+        },
-              limit: 8192,
+      },
-            },
+      {
-          },
+        test: /\.(woff|woff2|ttf|eot)$/,
-        ],
+        type: "asset/resource",
+        generator: {
+          filename: "fonts/[name][ext]",
+        },
       },
       {
         test: /\.css$/,
@@ -65,11 +66,6 @@ module.exports = (env, { mode }) => ({
           },
           {
             loader: "postcss-loader",
-            options: {
-              config: {
-                path: "postcss.config.js",
-              },
-            },
           },
         ],
       },
@@ -80,9 +76,11 @@ module.exports = (env, { mode }) => ({
       name: "vendor",
       minChunks: 2,
     },
+    minimize: true,
     minimizer: [
-      new UglifyJsPlugin({
+      new TerserPlugin({
-        sourceMap: true,
+        parallel: true,
+        extractComments: false,
       }),
     ],
   },