Init Hugo Module

README.md

@@ -23,7 +23,6 @@
   - [Found a bug?](#bug)
   - [New cool idea or feature](#feature)
   - [`Hello Friend` theme user?](#hello-friend-theme-user)
-  - [Sponsoring](#sponsoring)
   - [License](#license)
 
 ## Features
@@ -53,7 +52,7 @@
     font-size: 1rem;
     overflow: auto;
 
-    @media (--phone) {
+    @media ($phone) {
       white-space: pre-wrap;
       word-wrap: break-word;
     }
@@ -94,19 +93,56 @@ Some enhancements have been made to Hugo's [internal RSS](https://github.com/goh
 
 You can download the theme manually by going to [https://github.com/panr/hugo-theme-hello-friend.git](https://github.com/panr/hugo-theme-hello-friend.git) and pasting it to `themes/hello-friend` in your root directory.
 
-You can also clone it directly to your Hugo folder:
+### Install theme as Hugo Module
+
+```bash
+# If this is the first time you're using Hugo Modules
+# in your project. You have to initiate your own module before
+# you fetch the theme module.
+#
+# hugo mod init [your website/module name]
+hugo mod get github.com/panr/hugo-theme-hello-friend
+```
+
+and in your config file add:
+
+```toml
+[module]
+  # this is needed when you fetch the theme as a submodule to your repo.
+  # replacements = "github.com/panr/hugo-theme-hello-friend -> themes/hello-friend"
+[[module.imports]]
+  path = 'github.com/panr/hugo-theme-hello-friend'
+```
+
+Keep in mind that the theme by default won't show up in the `themes` directory. This means that you are using the theme as it was on the repository at the moment you fetched it. Your local `go.sum` file keeps all the references. Read more about Hugo Modules in the [official documentation](https://gohugo.io/hugo-modules/).
+
+⚠️ If you encounter any issues with:
+
+```bash
+Error: module "hello-friend" not found; either add it as a Hugo Module or store it in "[...your custom path]/themes".: module does not exist
+```
+
+then please try to remove `theme = "hello-friend"` from your config file.
+
+⚠️ **The theme needs at least Hugo version 0.74.x**.
+
+### Install theme locally
 
 ```bash
 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:
+This will clone the repository directly to the `themes/hello-friend` directory.
+
+### Install theme as a submodule
 
 ```bash
 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**.
+This will install the repository as a sumbodule in the `themes/hello-friend` directory.
+
+⚠️ **The theme needs at least Hugo version 0.90.x**.
 
 ## How to run your site
 
@@ -125,6 +161,8 @@ The theme doesn't require any advanced configuration. Just copy:
 ```toml
 baseurl = "/"
 languageCode = "en-us"
+# Add it only if you keep the theme in the `themes` directory.
+# Remove it if you use the theme as a remote Hugo Module.
 theme = "hello-friend"
 paginate = 5
 
@@ -281,14 +319,8 @@ Sounds OK? Cool, let's rock! 🤘
 
 I'd be happy to know more about you and what you are doing. If you want to share it, please make a contribution and [add your site to the list](https://github.com/panr/hugo-theme-hello-friend/blob/master/USERS.md)! 🤗
 
-## Sponsoring
-
-If you like my work and want to support the development of the project, now you can! Just:
-
-<a href="https://www.buymeacoffee.com/panr" target="_blank"><img src="https://res.cloudinary.com/panr/image/upload/v1579374705/buymeacoffee_y6yvov.svg" alt="Buy Me A Coffee" ></a>
-
 ## License
 
-Copyright © 2019-2020 Radosław Kozieł ([@panr](https://twitter.com/panr))
+Copyright © 2019-2022 Radosław Kozieł ([@panr](https://twitter.com/panr))
 
 The theme is released under the MIT License. Check the [original theme license](https://github.com/panr/hugo-theme-hello-friend/blob/master/LICENSE.md) for additional licensing information.

assets/css/archive.scss

@@ -11,7 +11,7 @@
       align-items: flex-start;
       padding: 10px 0;
 
-      @media (--phone) {
+      @media ($phone) {
         flex-direction: column;
       }
 
@@ -23,7 +23,7 @@
     &-year {
       margin-top: 40px;
 
-      @media (--phone) {
+      @media ($phone) {
         margin-top: 20px;
       }
 
@@ -42,7 +42,7 @@
         width: 200px;
         opacity: .5;
 
-        @media (--phone) {
+        @media ($phone) {
           margin: 10px 0 0;
         }
       }

assets/css/footer.scss

@@ -11,7 +11,7 @@
     width: 760px;
     max-width: 100%;
 
-    @media (--tablet) {
+    @media ($tablet) {
       flex-direction: column;
     }
   }
@@ -36,14 +36,14 @@
       padding-right: 10px;
       margin-right: 10px;
 
-       @media (--tablet) {
+       @media ($tablet) {
         border: none;
         padding: 0;
         margin: 0;
       }
     }
 
-    @media (--tablet) {
+    @media ($tablet) {
       flex-direction: column;
       margin-top: 10px;
     }

assets/css/header.scss

@@ -11,7 +11,7 @@
     flex-direction: row;
     align-items: center;
 
-    @media (--phone) {
+    @media ($phone) {
       flex-direction: row-reverse;
     }
   }

assets/css/logo.scss

@@ -14,7 +14,7 @@
     align-items: center;
     margin-right: 5px;
 
-    @mixin greater-icon 8px;
+    @include greater-icon(8px);
   }
 
   &__text {

assets/css/main.scss

@@ -23,7 +23,7 @@ body {
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
 
-  @media (--phone) {
+  @media ($phone) {
     font-size: 1rem;
   }
 }
@@ -48,7 +48,7 @@ h4 {
   font-size: 1.125rem;
 }
 
-@media (--phone) {
+@media ($phone) {
   h1 {
     font-size: 2rem;
   }
@@ -150,7 +150,7 @@ pre {
   font-size: .9rem;
   overflow: auto;
 
-  @media (--phone) {
+  @media ($phone) {
     white-space: pre-wrap;
     word-wrap: break-word;
   }
@@ -170,7 +170,7 @@ blockquote {
   margin: 40px;
   padding: 10px 20px;
 
-  @media (--phone) {
+  @media ($phone) {
     margin: 10px;
     padding: 10px;
   }
@@ -216,7 +216,7 @@ ul, ol {
   margin-left: 40px;
   padding: 0;
 
-  @media (--phone) {
+  @media ($phone) {
     margin-left: 20px;
   }
 }
@@ -240,7 +240,7 @@ ol ol {
   justify-content: center;
   margin: 50px 0;
 
-  @media (--phone) {
+  @media ($phone) {
     margin-top: 0;
   }
 }
@@ -264,7 +264,7 @@ hr {
 }
 
 blockquote.twitter-tweet {
-  background: hsl(206deg 62% 45% / 10%);
+  background: hsla(206deg, 62%, 45%, 0.1);
   border: none;
   padding: 30px;
   color: inherit;

assets/css/menu.scss

@@ -1,4 +1,4 @@
-@define-mixin menu {
+@mixin menu {
   position: absolute;
   background: var(--header);
   box-shadow: var(--shadow);
@@ -18,8 +18,8 @@
   padding-right: 24px;
   font-weight: 500;
 
-  @media (--phone) {
+  @media ($phone) {
-    @mixin menu;
+    @include menu;
     border: none;
     top: 50px;
     right: 10px;
@@ -39,7 +39,7 @@
     padding: 0;
 
     &--desktop {
-      @media (--phone) {
+      @media ($phone) {
         display: none;
       }
     }
@@ -47,7 +47,7 @@
     &--mobile {
       display: none;
 
-      @media (--phone) {
+      @media ($phone) {
         display: block;
       }
     }
@@ -61,7 +61,7 @@
       }
     }
 
-    @media (--phone) {
+    @media ($phone) {
       flex-direction: column;
       align-items: flex-start;
       padding: 0;
@@ -84,7 +84,7 @@
     }
 
     &-more {
-      @mixin menu;
+      @include menu;
       top: 35px;
       left: 0;
 
@@ -101,7 +101,7 @@
           transform: rotate(90deg);
           line-height: 1;
 
-          @mixin greater-icon 5px;
+          @include greater-icon(5px);
         }
       }
 

assets/css/post.scss

@@ -5,7 +5,7 @@
   padding: 20px;
   margin: 20px auto;
 
-  @media (--tablet) {
+  @media ($tablet) {
     max-width: 660px;
   }
 
@@ -17,7 +17,7 @@
     font-size: 1rem;
     margin-bottom: 10px;
 
-    @media (--phone) {
+    @media ($phone) {
       font-size: .85rem;
     }
   }
@@ -26,7 +26,7 @@
     font-size: 2.625rem;
     margin: 0 0 20px;
 
-    @media (--phone) {
+    @media ($phone) {
       font-size: 2rem;
     }
 
@@ -61,7 +61,7 @@
       box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
     }
 
-    @media (--tablet) {
+    @media ($tablet) {
       margin: 20px 0;
       width: 100%;
     }

assets/css/style.css

@@ -1,18 +0,0 @@
-@import 'variables.css';
-
-@import 'fonts.css';
-@import 'buttons.css';
-
-@import 'header.css';
-@import 'logo.css';
-@import 'menu.css';
-@import 'main.css';
-@import 'post.css';
-@import 'pagination.css';
-@import 'footer.css';
-
-@import 'terms.css';
-@import 'archive.css';
-
-@import 'prism.css';
-@import 'code.css';

assets/css/style.scss

@@ -0,0 +1,18 @@
+@import 'variables';
+
+@import 'fonts';
+@import 'buttons';
+
+@import 'header';
+@import 'logo';
+@import 'menu';
+@import 'main';
+@import 'post';
+@import 'pagination';
+@import 'footer';
+
+@import 'terms';
+@import 'archive';
+
+@import 'prism';
+@import 'code';

assets/css/variables.scss

@@ -46,10 +46,11 @@ body.dark-theme {
   }
 }
 
-@custom-media --phone (width < 684px);
+/* MEDIA QUERIES */
-@custom-media --tablet (width < 900px);
+$phone: (max-width: 684px);
+$tablet: (max-width: 900px);
 
-@define-mixin greater-icon $stroke-width: 3px, $width: .95rem, $height: 100% {
+@mixin greater-icon($stroke-width: 3px, $width: .95rem, $height: 100%) {
   .greater-icon {
     width: $width;
     height: $height;
@@ -63,6 +64,6 @@ body.dark-theme {
 
 /* HOW TO USE */
 
-/*@media (--phone) {*/
+/*@media ($phone) {*/
   /*margin-top: 0;*/
 /*}*/

exampleSite/content/showcase.md

@@ -24,7 +24,7 @@ pre {
   font-size: 1rem;
   overflow: auto;
 
-  @media (--phone) {
+  @media ($phone) {
     white-space: pre-wrap;
     word-wrap: break-word;
   }

go.mod

@@ -0,0 +1,3 @@
+module github.com/panr/hugo-theme-hello-friend
+
+go 1.19

layouts/404.html

@@ -10,7 +10,7 @@
 
       {{ if .Site.Taxonomies.tags }}
         <p>
-          {{ "Maybe these tags will help you find what you're looking for. :smile:" | markdownify | emojify }}
+          {{ "Maybe these tags will help you find what you're looking for." | markdownify }}
         </p>
         <h2>Tags</h2>
         <div class="terms">

layouts/_default/index.html

@@ -16,13 +16,13 @@
 
   <div class="posts">
     {{ range $paginator.Pages }}
-    <div class="post on-list">
+    <article class="post on-list">
       <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
       <div class="post-meta">
         {{ if .Date }}
-          <span class="post-date">
+          <time class="post-date">
             {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
-          </span>
+          </time>
 
           {{ if $.Site.Params.LastModDisplay }}
             {{ partial "lastmod.html" . }}
@@ -62,7 +62,7 @@
       {{ if not .Params.hideReadMore }}
         <div><a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }} →</a></div>
       {{ end }}
-    </div>
+    </article>
     {{ end }}
     {{ partial "pagination.html" . }}
   </div>

layouts/_default/list.html

@@ -1,13 +1,13 @@
 {{ define "main" }}
   <div class="posts">
     {{ range .Pages }}
-      <div class="post on-list">
+      <article class="post on-list">
         <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
         <div class="post-meta">
           {{ if .Date }}
-            <span class="post-date">
+            <time class="post-date">
               {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
-            </span>
+            </time>
 
             {{ if $.Site.Params.LastModDisplay }}
               {{ partial "lastmod.html" . }}
@@ -54,7 +54,7 @@
             >
           </div>
         {{ end }}
-      </div>
+      </article>
     {{ end }}
     {{ partial "pagination.html" . }}
   </div>

layouts/_default/single.html

@@ -2,13 +2,13 @@
   {{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }}
   {{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}
 
-  <div class="post">
+  <article class="post">
     <h1 class="post-title">{{ .Title | markdownify }}</h1>
     <div class="post-meta">
       {{ if .Date | default nil }}
-        <span class="post-date">
+        <time class="post-date">
           {{ .Date.Format ($.Site.Params.DateFormatSingle | default "2006-01-02") }}
-        </span>
+        </time>
 
         {{ if eq .Type $contentTypeName }}
           {{ if $.Site.Params.LastModDisplay }}
@@ -87,5 +87,5 @@
         {{ partial "comments.html" . }}
       {{ end }}
     {{ end }}
-  </div>
+  </article>
 {{ end }}

layouts/archive/list.html

@@ -14,14 +14,14 @@
               <div class="archive__group-posts">
                 {{ range where .Pages "Type" $contentTypeName }}
                   {{ if eq .Kind "page" }}
-                    <div class="archive__post">
+                    <article class="archive__post">
                       <h3 class="archive__post-title">
                         <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
                       </h3>
                       <div class="archive__post-meta">
-                        <span class="archive__post-date">
+                        <time class="archive__post-date">
                           {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
-                        </span>
+                        </time>
                         {{ with .Params.Author }}
                           <span class="archive__post-author"
                             >—
@@ -36,7 +36,7 @@
                           >
                         {{ end }}
                       </div>
-                    </div>
+                    </article>
                   {{ end }}
                 {{ end }}
               </div>

layouts/partials/footer.html

@@ -18,7 +18,10 @@
   </div>
 </footer>
 
-<script src="{{ "assets/main.js" | absURL }}"></script>
+{{ $menu := resources.Get "js/menu.js" | js.Build }}
-<script src="{{ "assets/prism.js" | absURL }}"></script>
+{{ $prism := resources.Get "js/prism.js" | js.Build }}
+{{ $theme := resources.Get "js/theme.js" | js.Build }}
+{{ $bundle := slice $menu $prism $theme | resources.Concat "bundle.js" | resources.Minify }}
+<script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
 
 {{- partial "extended_footer.html" . }}

layouts/partials/head.html

@@ -15,25 +15,23 @@
 {{- partial "prepended_head.html" . }}
 
 <!-- Theme CSS -->
-<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}" />
+{{ $res := resources.Get "css/style.scss" }}
+{{ $style := $res | resources.ToCSS }}
+<link rel="stylesheet" href="{{ $style.RelPermalink }}" />
 <!-- Custom CSS to override theme properties (/static/style.css) -->
 <link rel="stylesheet" href="{{ "style.css" | absURL }}" />
 
 <!-- Icons -->
-<link
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ "img/apple-touch-icon-144-precomposed.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="{{ (resources.Get "fonts/Inter-Italic.woff2").RelPermalink }}" 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="{{ (resources.Get "fonts/Inter-Regular.woff2").RelPermalink }}" 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="{{ (resources.Get "fonts/Inter-Medium.woff2").RelPermalink }}" 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="{{ (resources.Get "fonts/Inter-MediumItalic.woff2").RelPermalink }}" 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="{{ (resources.Get "fonts/Inter-Bold.woff2").RelPermalink }}" rel="preload" type="font/woff2" as="font" crossorigin="">
-<link href="{{ "assets/fonts/Inter-BoldItalic.woff2" | absURL }}" rel="preload" type="font/woff2" as="font" crossorigin="">
+<link href="{{ (resources.Get "fonts/Inter-BoldItalic.woff2").RelPermalink }}" rel="preload" type="font/woff2" as="font" crossorigin="">
 
 <!-- Twitter Card -->
 {{ template "_internal/twitter_cards.html" . }}

package.hugo.json

@@ -0,0 +1,44 @@
+{
+  "name": "hello-friend",
+  "version": "3.0.0",
+  "main": "index.js",
+  "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "test": "echo 'Test'"
+  },
+  "browserslist": [
+    "last 2 versions",
+    ">1%",
+    "not dead"
+  ],
+  "comments": {
+    "dependencies": {
+      "yarn": "project"
+    },
+    "devDependencies": {
+      "browserslist": "project",
+      "clipboard": "project",
+      "eslint-config-airbnb": "project",
+      "eslint-config-prettier": "project",
+      "eslint-plugin-jsx-a11y": "project",
+      "husky": "project"
+    }
+  },
+  "dependencies": {
+    "yarn": "^1.22.10"
+  },
+  "devDependencies": {
+    "browserslist": "^4.16.5",
+    "clipboard": "^2.0.4",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "husky": "^5.1.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-push": "yarn build && git add . && git commit --amend --no-edit"
+    }
+  }
+}

package.json

@@ -1,58 +1,40 @@
 {
   "name": "hello-friend",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "main": "index.js",
   "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "dev": "webpack --mode=development --watch",
+    "test": "echo 'Test'"
-    "build": "webpack --mode=production",
-    "prepare": "husky install"
   },
   "browserslist": [
     "last 2 versions",
     ">1%",
     "not dead"
   ],
+  "comments": {
+    "dependencies": {
+      "yarn": "project"
+    },
+    "devDependencies": {
+      "browserslist": "project",
+      "clipboard": "project",
+      "eslint-config-airbnb": "project",
+      "eslint-config-prettier": "project",
+      "eslint-plugin-jsx-a11y": "project",
+      "husky": "project"
+    }
+  },
+  "dependencies": {
+    "yarn": "^1.22.10"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
+    "browserslist": "^4.16.5",
-    "@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",
+    "husky": "^5.1.3"
-    "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": {

postcss.config.js

@@ -1,6 +1,7 @@
 const url = require("postcss-url");
 const imports = require("postcss-import");
 const nested = require("postcss-nested");
+const postcssCustomMedia = require("postcss-custom-media");
 const postCSSPresetEnv = require("postcss-preset-env");
 const browsers = require("browserslist");
 const cssnano = require("cssnano");
@@ -12,6 +13,7 @@ module.exports = () => ({
     imports,
     mixins,
     nested,
+    postcssCustomMedia,
     postCSSPresetEnv({
       stage: 1,
     }),

static/assets/main.js

@@ -1 +0,0 @@
-!function(){var e,t,n,o,d,i,c,s,a,r;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"),d=document.querySelector(".menu__sub-inner-more"),i=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),c=function(){return window.matchMedia(i).matches},s=function(){n&&n.classList.toggle("hidden",!c()),t&&t.classList.toggle("hidden",c()),d&&d.classList.toggle("hidden",!c())},t&&t.addEventListener("click",(function(e){return e.stopPropagation()})),d&&d.addEventListener("click",(function(e){return e.stopPropagation()})),s(),document.body.addEventListener("click",(function(){c()||!d||d.classList.contains("hidden")?c()&&!t.classList.contains("hidden")&&t.classList.add("hidden"):d.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(),d&&d.classList.toggle("hidden"),d&&d.getBoundingClientRect().right>e.getBoundingClientRect().right&&(d.style.left="auto",d.style.right=0)})),a=window.localStorage&&window.localStorage.getItem("theme"),r=document.querySelector(".theme-toggle"),a&&(document.body.classList.remove("light-theme","dark-theme"),document.body.classList.add(a)),r.addEventListener("click",(function(){var e=!new RegExp("(dark|light)-theme").test(document.body.className),t=window.matchMedia("(prefers-color-scheme: dark)").matches;e?t?document.body.classList.add("light-theme"):document.body.classList.add("dark-theme"):(document.body.classList.toggle("light-theme"),document.body.classList.toggle("dark-theme")),window.localStorage&&window.localStorage.setItem("theme",document.body.classList.contains("dark-theme")?"dark-theme":"light-theme")}))}();

theme.toml

@@ -1,10 +1,10 @@
+name = "hello-friend"
 description = "A simple theme for Hugo. That's it."
 features = ["blog", "shortcode", "syntax Highlighting"]
 homepage = "https://github.com/panr/hugo-theme-hello-friend/"
 license = "MIT"
 licenselink = "https://github.com/panr/hugo-theme-hello-friend/blob/master/LICENSE.md"
-min_version = 0.74
+min_version = 0.90
-name = "hello-friend"
 tags = [
   "blog",
   "clean",

webpack.config.js

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