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,29 +99,23 @@ 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**.
+
 ## How to run your site
 
-The theme is using [Hugo Pipes](https://gohugo.io/hugo-pipes/) to handle Javascript and PostCSS files. This setup **requires** following npm packages:
+From your Hugo root directory run:
 
 ```
-@babel/cli @babel/core @babel/preset-env browserslist clipboard cssnano postcss-cli postcss-import postcss-mixins postcss-nested postcss-preset-env postcss-url
-```
-
-Before you start, you have to install them (globally or locally).
-
-Then:
-
-```
-$ 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.
@@ -207,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
@@ -231,7 +226,37 @@ In a post's front matter you have to add `hideReadMore` param set to `true`. Thi
 
 ## How to (safely) edit the theme <a id="how-to-edit" />
 
-To change something in the theme, you have to go to `themes/hello-friend` and modify the files. You can also copy them (like `assets` folder) from the theme to your root directory and modify the files there (thanks to Hugo's lookup https://gohugo.io/templates/lookup-order). This will protect your changes from overriding when you update the theme.
+If you have to override only some of the styles, you can do this easily by adding `static/style.css` in your root directory and point things you want to change.
+
+To change something directly in the theme, you have to go to `themes/hello-friend` and modify the files.
+
+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
+```
+
+ then run:
+
+ ```bash
+ npm install
+ npm i yarn
+ yarn
+ ```
+
+After you modified the files you can run webpack in watch mode:
+
+```bash
+yarn dev
+```
+
+or rebuild theme
+
+```bash
+yarn build
+```
+
+To see the changes (remember to restart `hugo server`).
 
 ## Found a bug? <a id="bug" />
 

USERS.md

@@ -8,25 +8,37 @@ TEMPLATE:
 -->
 
 - https://0x44.pw — **Ian Pringle** (System Admin and developer)
-- https://blog.agung.io - **Agung Pratama** (Software Engineer and DevOps)
-- https://protocod.gitlab.io/blog/ **protocod** (Web Developer)
+- https://adamormsby.com - **Adam Ormsby** (Generalist Programmer - Web, Mobile, Games)
 - https://arubacao.com **Christopher Lass** (Software Engineer and DevOps)
-- https://mfaishal.com **Faishal Irawan** (Student)
-- https://musq.github.io — **Ashish Ranjan** (Software Engineer)
-- https://fazi1058.github.io **Faezeh Roeinfard** (Student)
-- https://www.gabrielacaesar.com/ - **Gabriela Caesar** (Data journalist)
-- https://verso.re/ - **Joan Calabrés** (Security Engineer)
-- https://blog.lepape.me/ - **François Le Pape** (Student & developer freelance)
+- https://blog.agate.pw/ - **Marco Agate** (System Engineer, DevOps)
+- https://blog.agung.io - **Agung Pratama** (Software Engineer and DevOps)
 - https://blog.jyny.dev/ - **Jyny Chen** (Software Engineer)
-- https://felixleger.com/ - **Félix Léger** (Sofware Developer and DevOps)
-- https://cobalto.net/ - **Daniel Pessoa** (Sofware Developer and BI Analyst)
-- https://www.imgalone.com/ - **Iancu makes games alone** (Indie Game Dev)
-- https://jonathan.rico.live/ - **Jonathan Rico** (Electronics Engineer)
-- https://mritd.com/ - **漠然** (Software Engineer and DevOps)
-- https://ilya-lesikov.com - **Ilya Lesikov** (DevOps, SRE)
-- https://www.adamormsby.com - **Adam Ormsby** (Generalist Programmer - Web, Mobile, Games)
-- https://kartiniteknologi.id/ - **Kartini Teknologi team** (Tech podcast)
-- https://eallion.com/ - **大大的小蜗牛** (E-commerce operator)
-- https://guilhermesteves.dev/ - **Guilherme Esteves** (Software Engineer, Writer, Speaker)
-- https://etra0.github.io/ - **Sebastián Aedo** (Computer Science student, interested in Game Hacking)
+- https://blog.lepape.me/ - **François Le Pape** (Student & developer freelance)
 - https://blog.toluwalemi.com/ - **Toluwalemi Oluwadare** (Software Engineer and Content Writer)
+- https://cobalto.net/ - **Daniel Pessoa** (Sofware Developer and BI Analyst)
+- https://eallion.com/ - **大大的小蜗牛** (E-commerce operator)
+- https://etra0.github.io/ - **Sebastián Aedo** (Computer Science student, interested in Game Hacking)
+- https://fazi1058.github.io **Faezeh Roeinfard** (Student)
+- 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)
+- https://kartiniteknologi.id/ - **Kartini Teknologi team** (Tech podcast)
+- https://mfaishal.com **Faishal Irawan** (Student)
+- https://mritd.com/ - **漠然** (Software Engineer and DevOps)
+- https://musq.github.io — **Ashish Ranjan** (Software Engineer)
+- https://protocod.gitlab.io/blog/ **protocod** (Web Developer)
+- https://shinytoyrobots.com - **shinytoyrobots** (Eclectic journaling and essays)
+- 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"),
-       url("../fonts/Inter-Regular.woff") format("woff");
+  src: url("../fonts/Inter-Regular.woff2") format("woff2");
   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"),
-       url("../fonts/Inter-Italic.woff") format("woff");
+  src: url("../fonts/Inter-Italic.woff2") format("woff2");
   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"),
-       url("../fonts/Inter-Medium.woff") format("woff");
+  src: url("../fonts/Inter-Medium.woff2") format("woff2");
   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"),
-       url("../fonts/Inter-MediumItalic.woff") format("woff");
+  src: url("../fonts/Inter-MediumItalic.woff2") format("woff2");
   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"),
-       url("../fonts/Inter-Bold.woff") format("woff");
+  src: url("../fonts/Inter-Bold.woff2") format("woff2");
   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"),
-       url("../fonts/Inter-BoldItalic.woff") format("woff");
+  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2");
   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;
 }
@@ -257,3 +262,13 @@ hr {
   border: 1px solid var(--border-color);
   max-width: 800px;
 }
+
+blockquote.twitter-tweet {
+  background: hsl(206deg 62% 45% / 10%);
+  border: none;
+  padding: 30px;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: 8px;
+}

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">
-    <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+  <div class="post">
+    <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>
+        {{ "Hmm... Sorry, this page seems to be missing." | markdownify }}
+      </p>
+
       {{ if .Site.Taxonomies.tags }}
-        {{ "Maybe these tags will help you find what you're looking for. :smile:" | markdownify | emojify }}</p>
+        <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">
             {{ 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">
+                <a href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a
+                ><span class="terms__term-count">{{ .Count }}</span>
+              </li>
             {{ end }}
           </ul>
         </div>
       {{ end }}
     </div>
-</div>
+  </div>
 {{ 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" . }}
-        {{ end }}
+        {{ block "main" . }} {{ 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">
-          {{ 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>
+        {{ partial "postcover.html" . }}
       {{ end }}
 
       <div class="post-content">
@@ -61,7 +55,7 @@
           {{ . | markdownify }}
         {{ else }}
           {{ if .Truncated }}
-            {{ .Summary | markdownify }}
+            {{ .Summary }}
           {{ end }}
         {{ end }}
       </div>

layouts/_default/list.html

@@ -13,32 +13,29 @@
               {{ 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>
+            <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">
-          {{ 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>
+          {{ partial "postcover.html" . }}
         {{ end }}
 
         <div class="post-content">
@@ -46,12 +43,16 @@
             {{ . | markdownify }}
             {{ else }}
             {{ if .Truncated }}
-            {{ .Summary | markdownify }}
+              {{ .Summary }}
             {{ end }}
           {{ end }}
         </div>
         {{ if not .Params.hideReadMore }}
-        <div><a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }} →</a></div>
+          <div>
+            <a class="read-more button" href="{{ .RelPermalink }}"
+              >{{ $.Site.Params.ReadMore | default "Read more" }} →</a
+            >
+          </div>
         {{ end }}
       </div>
     {{ end }}

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,46 +17,47 @@
         {{ 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">
-        {{ 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>
+      {{ partial "postcover.html" . }}
     {{ 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>
     {{ if eq .Type $.Site.Params.contentTypeName }}
       {{ 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>
 {{ end }}

layouts/_default/terms.html

@@ -1,6 +1,5 @@
 {{ define "main" }}
-
-<div class="terms">
+  <div class="terms">
     <h1>{{ .Title }}</h1>
     <ul class="terms__list">
       {{ $type := .Type }}
@@ -9,10 +8,12 @@
         {{ $count := .Count }}
         {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
           <li class="terms__term">
-          <a href="{{ .Permalink }}">#{{ .Name }} <span class="terms__term-count">{{ $count }}</span></a>
+            <a href="{{ .Permalink }}"
+              >#{{ .Name }} <span class="terms__term-count">{{ $count }}</span></a
+            >
           </li>
         {{ end }}
       {{ end }}
     </ul>
-</div>
+  </div>
 {{ end }}

layouts/archive/list.html

@@ -1,9 +1,8 @@
 {{ 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 " ") "")) }}
-{{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}
-
-<div class="archive">
+  <div class="archive">
     <h1>{{ .Title }}</h1>
     {{ range .Site.RegularPages.GroupByPublishDate "2006" }}
       {{ if ne .Key "0001" }}
@@ -16,22 +15,25 @@
                 {{ range where .Pages "Type" $contentTypeName }}
                   {{ if eq .Kind "page" }}
                     <div class="archive__post">
-          <h3 class="archive__post-title"><a
-              href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+                      <h3 class="archive__post-title">
+                        <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
                       </h3>
                       <div class="archive__post-meta">
                         <span class="archive__post-date">
                           {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
                         </span>
                         {{ with .Params.Author }}
-            <span class="archive__post-author">—
+                          <span class="archive__post-author"
+                            >—
                             {{ $.Site.Params.WrittenBy | default "Written by" }}
                             {{ . }}
                           </span>
                         {{ end }}
                         {{ if $.Site.Params.ShowReadingTime }}
-            <span class="archive__post-read-time">— {{ .ReadingTime }}
-              {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
+                          <span class="archive__post-read-time"
+                            >— {{ .ReadingTime }}
+                            {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span
+                          >
                         {{ end }}
                       </div>
                     </div>
@@ -43,5 +45,5 @@
         </div>
       {{ end }}
     {{ end }}
-</div>
+  </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,22 +2,23 @@
   <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>Theme created by <a href="https://twitter.com/panr" target="_blank" rel="noopener">panr</a></span>
+        <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>
 
-{{ $opts := dict "noComments" true "minified" true "compact" true }}
-{{ $menu := resources.Get "js/menu.js" | js.Build | babel $opts }}
-{{ $theme := resources.Get "js/theme.js" | js.Build | babel $opts }}
-{{ $prism := resources.Get "js/prism.js" | js.Build | babel $opts }}
-<script src="{{ $menu.Permalink }}"></script>
-<script src="{{ $theme.Permalink }}"></script>
-<script src="{{ $prism.Permalink }}"></script>
+<script src="{{ "assets/main.js" | absURL }}"></script>
+<script src="{{ "assets/prism.js" | absURL }}"></script>
 
 {{- partial "extended_footer.html" . }}

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,25 +1,39 @@
-<meta http-equiv="content-type" content="text/html; charset=utf-8">
-<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 name="keywords" content="{{ with .Params.Keywords }}{{ delimit . ", " }}{{ else }}{{ $.Site.Params.Keywords }}{{ end }}"/>
-<meta name="robots" content="noodp"/>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<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
+  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 -->
-{{ $css := resources.Get "css/style.css" }}
-{{ $opts := dict "inlineImports" true }}
-{{ $style := $css | resources.PostCSS $opts | minify }}
-<link rel="stylesheet" href="{{ $style.Permalink }}">
-
+<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 rel="shortcut icon" href="{{ "img/favicon.png" | absURL }}">
+<link
+  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" . }}

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="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+            <path d="M0 0h24v24H0z" fill="none" />
+            <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 }}
     <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 }}

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">
-  <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
+<svg
+  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,22 +1,27 @@
 {{ $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 }}
-  {{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
+  {{ else }}
+  {{ 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 }}" >
-	<img style="max-width: 100%; width: auto; height: auto; border-radius: 8px;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
+<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 }}"
+  />
   {{ with .Inner }}
     <figcaption>
       {{ . }}

package.json

@@ -1,7 +1,62 @@
 {
   "name": "hello-friend",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
-  "license": "MIT"
+  "license": "MIT",
+  "scripts": {
+    "dev": "webpack --mode=development --watch",
+    "build": "webpack --mode=production",
+    "prepare": "husky install"
+  },
+  "browserslist": [
+    "last 2 versions",
+    ">1%",
+    "not dead"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-stage-2": "^7.0.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.5",
+    "browserslist": "^4.0.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "clipboard": "^2.0.4",
+    "css-loader": "^6.5.1",
+    "cssnano": "^5.0.8",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "file-loader": "^6.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "^7.0.4",
+    "mini-css-extract-plugin": "^2.4.3",
+    "postcss": "^8.2.10",
+    "postcss-browser-reporter": "^0.6.0",
+    "postcss-cli": "^9.0.1",
+    "postcss-color-function": "^4.0.1",
+    "postcss-color-mod-function": "^3.0.3",
+    "postcss-import": "^14.0.0",
+    "postcss-loader": "^6.2.0",
+    "postcss-mixins": "^8.1.0",
+    "postcss-nested": "^5.0.5",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-reporter": "^7.0.2",
+    "postcss-url": "^10.1.3",
+    "prettier-eslint-cli": "^5.0.0",
+    "ramda": "^0.27.1",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.2.4",
+    "url-loader": "^4.1.0",
+    "webpack": "^5.27.1",
+    "webpack-cli": "^4.5.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-push": "yarn build && git add . && git commit --amend --no-edit"
+    }
+  }
 }

static/assets/main.js

@@ -0,0 +1 @@
+!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

@@ -0,0 +1,98 @@
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+
+const path = require("path");
+
+const join = (...paths) => path.join(__dirname, ...paths);
+
+module.exports = (env, { mode }) => ({
+  resolve: {
+    extensions: [".js", ".css"],
+    modules: ["assets", "node_modules"],
+  },
+  entry: {
+    main: [join("assets", "js", "menu.js"), join("assets", "js", "theme.js")],
+    prism: join("assets", "js", "prism.js"),
+    style: join("assets", "css", "style.css"),
+  },
+  output: {
+    filename: "[name].js",
+    path: join("static/assets"),
+    publicPath: "",
+  },
+  performance: {
+    hints: false,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"],
+          },
+        },
+      },
+      {
+        test: /\.(png|jpe?g|svg)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "images/[name][ext]",
+        },
+      },
+      {
+        test: /\.(woff|woff2|ttf|eot)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "fonts/[name][ext]",
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[local]",
+              },
+              import: true,
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: "postcss-loader",
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      name: "vendor",
+      minChunks: 2,
+    },
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        extractComments: false,
+      }),
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [join("static/assets")],
+      cleanAfterEveryBuildPatterns: [join("static/assets/style.js")],
+      verbose: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+      chunkFilename: "[id].css",
+    }),
+  ],
+});