Merge branch 'master' into patch-1

COMMUNITY-FEATURES.md

@@ -0,0 +1,21 @@
+# Community features
+
+<!--
+Did a cool thing with the theme and want to share it with rest of the Hello Friend theme users? Jump in!
+
+Please follow the template:
+
+- **NAME_OF_THE_FEATURE** (LINK TO YOUR FORK)
+  - SHORT DESCRIPTION
+  - SOMETHING ABOUT YOU (name and who you are / what you do / etc.)
+
+eg:
+
+- **Social media icons** (https://github.com/...)
+  - This was a big missing feature of the theme. It will help your audience reach you over the internet.
+  - John, a javascript developer.
+-->
+
+- **Social media icons** (https://github.com/...)
+  - This is the biggest missing feature of the theme. But now it will help your audience reach you over the internet.
+  - John, a javascript developer.

README.md

@@ -12,12 +12,13 @@
 - [Built-in shortcodes](#built-in-shortcodes)
 - [Code highlighting](#code-highlighting)
 - [How to start](#how-to-start)
+- [How to run your site](#how-to-run-your-site)
 - [How to configure](#how-to-configure)
 - [Post archetype](#post-archetype)
 - [Add-ons](#add-ons)
-- [How to run your site](#how-to-run-your-site)
-- [How to edit the theme](#how-to-edit-the-theme)
-- [How to contribute](#how-to-contribute)
+- [How to (safely) edit the theme](#how-to-edit)
+- [Found a bug?](#bug)
+- [New cool idea or feature](#feature)
 - [Terminal theme user?](#terminal-theme-user)
 - [Sponsoring](#sponsoring)
 - [Licence](#licence)
@@ -89,6 +90,18 @@ If you don't want to make any radical changes, it's the best option, because you
 $ git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal
 ```
 
+⚠️ **The theme needs at least Hugo version 0.74.x**.
+
+## How to run your site
+
+If you installed all needed `npm` dependencies, then you can run:
+
+```
+$ hugo server -t terminal
+```
+
+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.
+
 ## How to configure
 
 The theme doesn't require any advanced configuration. Just copy:
@@ -182,37 +195,60 @@ See the basic `post` file params supported by the theme — https://github.com/p
 - **Extended Head** — please take a look at `layouts/partials/extended_head.html` https://github.com/panr/hugo-theme-terminal/blob/master/layouts/partials/extended_head.html
 - **Extended Footer** — please take a look at `layouts/partials/extended_footer.html` https://github.com/panr/hugo-theme-terminal/blob/master/layouts/partials/extended_footer.html
 
-## How to run your site
+## How to (safely) edit the theme <a id="how-to-edit" />
 
-From your Hugo root directory run:
+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.
 
-```
-$ hugo server -t terminal
+To change something directly in the theme, you have to go to `themes/terminal` 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/terminal
 ```
 
-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.
+ then run:
 
-## How to edit the theme
+ ```bash
+ $ npm install
+ $ npm i yarn
+ $ yarn
+ ```
 
-If you have to override 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.
+After you modified the files you can run webpack in watch mode:
 
-Otherwise, if you really want to edit the theme, you need to install Node dependencies. To do so, go to the theme directory (from your Hugo root directory):
-
-```
-$ cd themes/terminal
+```bash
+$ yarn dev
 ```
 
-and then run:
+or rebuild theme
 
-```
-$ npm install
-$ npm i yarn
-$ yarn
+```bash
+$ yarn build
 ```
 
-## How to contribute
+To see the changes (remember to restart `hugo server`).
 
-If you spot any bugs, please use [Issue Tracker](https://github.com/panr/hugo-theme-terminal/issues) or if you want to add a new feature directly please create a new [Pull Request](https://github.com/panr/hugo-theme-terminal/pulls).
+## Found a bug? <a id="bug" />
+
+If you spot any bugs, please use [Issue Tracker](https://github.com/panr/hugo-theme-terminal/issues) or create a new [Pull Request](https://github.com/panr/hugo-theme-terminal/pulls) to fix the issue.
+
+## New cool idea or feature? <a id="feature" />
+
+The theme is in constant development since 2019 and has got many cool features that helped many of you and made the theme better. But there were also many features that I wasn't sure about because I want to keep the theme as simple as possible.
+
+So, let's say you have an idea of how to extend the theme. That's cool and you're welcome to do that, just follow these steps:
+
+- fork the theme
+- implement the feature
+- write an instruction how to use the feature
+- give a working example of the implementation for other users
+- add info about your work to `COMMUNITY-FEATURES.md`
+- make a PR with edited `COMMUNITY-FEATURES.md`
+
+This will help keeping the theme close to its roots, and also allow anyone who wishes to improve it and match their needs, to do whatever they want.
+
+Sounds OK? Cool, let's rock! 🤘
 
 ## Terminal theme user?
 
@@ -226,6 +262,6 @@ If you like my work and want to support the development of the project, now you
 
 ## License
 
-Copyright © 2019 Radosław Kozieł ([@panr](https://twitter.com/panr))
+Copyright © 2019-2020 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-terminal/blob/master/LICENSE.md) for additional licensing information.

USERS.md

@@ -31,10 +31,18 @@
 - https://bgameiro.me/ **Bernardo Gameiro** (Engineer Physicist student)
 - https://return-to-libc.com/ **elraro** (Cyber Security Specialist)
 - https://pablart.com/ **Pablo Diaz-Gutierrez** (Software Engineer, General Tinkerer)
+- https://waterloos.niflheimr.blue/ **niflheimr1011** (Aspiring Software Engineer)
+- https://monocle.rpod.club/ **classx** (DevOps Engineer)
+- https://wjdevschool.com/ **Wojciech Bogócki** (Making Things & Teaching / W&J Dev School)
+- https://waterloos.niflheimr.blue/ **cindrmon** (Aspiring Software Engineer and Student)
+- https://dongzhi.me **Joe** (Software Developer)
+- https://isaes.com.tr/ **Isa Es** (Software Engineer)
+- https://conight.com **Conight Wang** (Software Engineer)
+- https://blog.m5e.de/ **Christoph Miksche** (Software Developer)
 
 <!--
-TEMPLATE:
+ TEMPLATE:
 
-- https://radoslawkoziel.pl **Radek Kozieł** (Software Designer and Developer)
+ - https://radoslawkoziel.pl **Radek Kozieł** (Software Designer and Developer)
 
--->
+ -->

assets/css/font.css

@@ -1,13 +1,17 @@
 @font-face {
+  font-display: swap;
   font-family: 'Fira Code';
   font-style:  normal;
   font-weight: 400;
   src: url("../fonts/FiraCode-Regular.woff") format("woff");
+  font-display: swap;
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'Fira Code';
   font-style:  normal;
   font-weight: 800;
   src: url("../fonts/FiraCode-Bold.woff") format("woff");
+  font-display: swap;
 }

assets/css/style.css

@@ -0,0 +1,16 @@
+@import 'variables.css';
+
+@import 'font.css';
+@import 'buttons.css';
+
+@import 'header.css';
+@import 'logo.css';
+@import 'main.css';
+@import 'post.css';
+@import 'pagination.css';
+@import 'footer.css';
+
+@import 'prism.css';
+@import 'syntax.css';
+@import 'code.css';
+@import 'terms.css';

assets/js/languageSelector.js

@@ -0,0 +1,23 @@
+const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
+const isMobile = () => window.matchMedia(mobileQuery).matches;
+
+const languageSelector = document.querySelector(".language-selector-current");
+const moreLanguagesContainer = document.querySelector(".language-selector__more");
+
+document.body.addEventListener("click", () => {
+  if (
+    !isMobile() &&
+    moreLanguagesContainer &&
+    !moreLanguagesContainer.classList.contains("hidden")
+  ) {
+    moreLanguagesContainer.classList.add("hidden");
+  }
+});
+
+languageSelector &&
+  languageSelector.addEventListener("click", (e) => {
+    if (!isMobile()) {
+      e.stopPropagation();
+      moreLanguagesContainer.classList.toggle("hidden");
+    }
+  });

babel.config.js

@@ -0,0 +1,18 @@
+module.exports = function(api) {
+  api.cache(true);
+
+  const presets = [
+    [
+      "@babel/preset-env",
+      {
+        targets: "last 2 versions, >1%, not dead",
+      },
+    ],
+  ];
+  const plugins = [];
+
+  return {
+    presets,
+    plugins,
+  };
+};

layouts/_default/baseof.html

@@ -2,11 +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 }}{{ else }}{{ .Title }} :: {{ $.Site.Title }}{{ end }}</title>
   {{ end }}
   {{ partial "head.html" . }}
 </head>
-<body class="">
+<body class="{{- ( or .Params.color $.Site.Params.ThemeColor ) -}}">
 {{ $container := cond $.Site.Params.FullWidthTheme "container full" (cond $.Site.Params.CenterTheme "container center" "container") }}
 
 <div class="{{- $container -}}{{- cond ($.Site.Params.oneHeadingSize | default true) " headings--one-size" "" }}">

layouts/_default/index.html

@@ -24,7 +24,7 @@
             {{ .Date.Format "2006-01-02" }}
           </span>
           {{ with .Params.Author }}
-            <span class="post-author">::{{ . }}</span>
+            <span class="post-author">:: {{ . }}</span>
           {{ end }}
         </div>
 

layouts/_default/list.html

@@ -15,7 +15,7 @@
             {{ .Date.Format "2006-01-02" }}
           </span>
           {{ with .Params.Author }}
-            <span class="post-author">::{{ . }}</span>
+            <span class="post-author">:: {{ . }}</span>
           {{ end }}
         </div>
 

layouts/_default/single.html

@@ -9,9 +9,7 @@
       </span>
     {{ end }}
     {{ with .Params.Author }}
-    <span class="post-author">::
-      {{ . }}
-    </span>
+    <span class="post-author">:: {{ . }}</span>
     {{ end }}
   </div>
 

layouts/partials/footer.html

@@ -3,10 +3,10 @@
     {{ if $.Site.Copyright }}
       <div class="copyright copyright--user">
         <span>{{ $.Site.Copyright | safeHTML }}</span>
-    {{else}}
+    {{ else }}
       <div class="copyright">
         <span>© {{ now.Year }} Powered by <a href="http://gohugo.io">Hugo</a></span>
-    {{end}}
+    {{ end }}
         <span>:: Theme made by <a href="https://twitter.com/panr">panr</a></span>
       </div>
   </div>
@@ -15,5 +15,9 @@
 <script src="{{ "assets/main.js" | absURL }}"></script>
 <script src="{{ "assets/prism.js" | absURL }}"></script>
 
+{{ if $.Site.Params.showLanguageSelector }}
+  <script src="{{ "assets/languageSelector.js" | absURL }}"></script>
+{{ end }}
+
 <!-- Extended footer section-->
 {{ partial "extended_footer.html" . }}

layouts/partials/head.html

@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
 {{ if (isset .Params "color") }}
   <link rel="stylesheet" href="{{ (printf "assets/%s.css" .Params.color) | absURL }}">
-{{ else if (ne $.Site.Params.ThemeColor "orange") }}
+{{ else if and (ne $.Site.Params.ThemeColor "orange") (ne $.Site.Params.ThemeColor "color" "") }}
   <link rel="stylesheet" href="{{ (printf "assets/%s.css" $.Site.Params.ThemeColor) | absURL }}">
 {{ end }}
 
@@ -21,27 +21,29 @@
 {{- end }}
 
 <!-- Icons -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ "img/apple-touch-icon-144-precomposed.png" | absURL }}">
+<link rel="apple-touch-icon" href="{{ "img/apple-touch-icon-192x192.png" | absURL }}">
 {{ if isset $.Site.Params "favicon" }}
   <link rel="shortcut icon" href="{{ $.Site.Params.favicon | absURL }}">
 {{ else }}
-  <link rel="shortcut icon" href="{{ printf "img/favicon/%s.png" $.Site.Params.ThemeColor | absURL }}">
+  <link rel="shortcut icon" href="{{ printf "img/favicon/%s.png" ($.Site.Params.ThemeColor | default "orange") | absURL }}">
 {{ end }}
 
 <!-- Twitter Card -->
 <meta name="twitter:card" content="summary" />
-{{ if (isset $.Site.Params.Twitter "site") }}
+{{ if (isset $.Site.Params "twitter") }}
+  {{ if (isset $.Site.Params.Twitter "site") }}
     <meta name="twitter:site" content="{{ $.Site.Params.Twitter.site }}" />
+  {{ end }}
+    <meta name="twitter:creator" content="{{ if .IsHome }}{{ $.Site.Params.Twitter.creator }}{{ else if isset .Params "authortwitter" }}{{ .Params.authorTwitter }}{{ else }}{{ .Params.Author }}{{ end }}" />
 {{ end }}
-<meta name="twitter:creator" content="{{ if .IsHome }}{{ $.Site.Params.Twitter.creator }}{{ else if isset .Params "authortwitter" }}{{ .Params.authorTwitter }}{{ else }}{{ .Params.Author }}{{ end }}" />
 
 <!-- OG data -->
 <meta property="og:locale" content="{{ $.Site.Language.Lang }}" />
 <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
-<meta property="og:title" content="{{ if .IsHome }}{{ $.Site.Title }}{{ else }}{{ .Title }} :: {{ $.Site.Title }}{{ end }}">
+<meta property="og:title" content="{{ if .IsHome }}{{ $.Site.Title }}{{ else }}{{ .Title }}{{ end }}">
 <meta property="og:description" content="{{ if .IsHome }}{{ $.Site.Params.Subtitle }}{{ else if .Description}}{{ .Description | plainify }}{{ else }}{{ .Summary | plainify }}{{ end }}" />
 <meta property="og:url" content="{{ .Permalink }}" />
-<meta property="og:site_name" content="{{ .Title }}" />
+<meta property="og:site_name" content="{{ $.Site.Title }}" />
 {{ if and (not .IsHome) (isset .Params "cover") }}
   <meta property="og:image" content="{{ .Param "cover" | absURL }}">
 {{ else }}

package.json

@@ -1,18 +1,18 @@
 {
   "name": "terminal",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
   "license": "MIT",
-  "scripts": {
-    "dev": "webpack --mode=development --watch",
-    "build": "webpack --mode=production"
-  },
   "browserslist": [
     "last 2 versions",
     ">1%",
     "not dead"
   ],
+  "scripts": {
+    "dev": "webpack --mode=development --watch",
+    "build": "webpack --mode=production"
+  },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.2",
@@ -21,37 +21,43 @@
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-stage-2": "^7.0.0",
     "angular-html-parser": "^1.2.0",
-    "babel-eslint": "^8.2.1",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.5",
     "browserslist": "^4.0.1",
-    "clean-webpack-plugin": "^0.1.19",
+    "clean-webpack-plugin": "^3.0.0",
     "clipboard": "^2.0.4",
-    "css-loader": "^1.0.1",
+    "css-loader": "^4.2.2",
     "cssnano": "^4.1.8",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^2.10.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.2.0",
+    "file-loader": "^6.1.0",
+    "html-webpack-plugin": "^4.4.1",
+    "husky": "^4.2.5",
+    "mini-css-extract-plugin": "^0.11.0",
     "postcss": "^7.0.0",
-    "postcss-browser-reporter": "^0.5.0",
-    "postcss-cli": "^6.1.1",
+    "postcss-browser-reporter": "^0.6.0",
+    "postcss-cli": "^7.1.2",
     "postcss-color-function": "^4.0.1",
     "postcss-color-mod-function": "^3.0.3",
-    "postcss-import": "^11.1.0",
-    "postcss-loader": "^2.1.6",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
     "postcss-mixins": "^6.2.1",
-    "postcss-nested": "^3.0.0",
-    "postcss-preset-env": "^5.3.0",
-    "postcss-reporter": "^5.0.0",
-    "postcss-url": "^7.3.2",
-    "prettier-eslint-cli": "^4.7.1",
-    "ramda": "^0.25.0",
-    "style-loader": "^0.21.0",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "url-loader": "^1.1.2",
+    "postcss-nested": "^4.2.3",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-reporter": "^6.0.1",
+    "postcss-url": "^8.0.0",
+    "prettier-eslint-cli": "^5.0.0",
+    "ramda": "^0.27.1",
+    "style-loader": "^1.2.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^4.1.0",
     "webpack": "^4.29.3",
     "webpack-cli": "^3.2.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-push": "yarn build && git add . && git commit --amend --no-edit"
+    }
   }
 }

source/css/style.css

@@ -1,16 +0,0 @@
-@import 'variables';
-
-@import 'font';
-@import 'buttons';
-
-@import 'header';
-@import 'logo';
-@import 'main';
-@import 'post';
-@import 'pagination';
-@import 'footer';
-
-@import 'prism';
-@import 'syntax';
-@import 'code';
-@import 'terms';

source/js/languageSelector.js

@@ -1,18 +0,0 @@
-const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
-const isMobile = () => window.matchMedia(mobileQuery).matches;
-
-if(!isMobile()) {
-  languageSelector = document.querySelector(".language-selector-current");
-  moreLanguagesContainer = document.querySelector(".language-selector__more");
-
-  document.body.addEventListener("click", () => {
-    if (moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) {
-      moreLanguagesContainer.classList.add("hidden");
-    }
-  });
-
-  languageSelector && languageSelector.addEventListener("click", e => {
-    e.stopPropagation();
-    moreLanguagesContainer.classList.toggle("hidden");
-  });
-}

source/js/main.js

@@ -1 +0,0 @@
-// Add your script here

static/assets/main.js

@@ -1,133 +1 @@
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
-/******/ })
-/************************************************************************/
-/******/ ({
-
-/***/ "./source/js/languageSelector.js":
-/*!***************************************!*\
-  !*** ./source/js/languageSelector.js ***!
-  \***************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-eval("var mobileQuery = getComputedStyle(document.body).getPropertyValue(\"--phoneWidth\");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nif (!isMobile()) {\n  languageSelector = document.querySelector(\".language-selector-current\");\n  moreLanguagesContainer = document.querySelector(\".language-selector__more\");\n  document.body.addEventListener(\"click\", function () {\n    if (moreLanguagesContainer && !moreLanguagesContainer.classList.contains(\"hidden\")) {\n      moreLanguagesContainer.classList.add(\"hidden\");\n    }\n  });\n  languageSelector && languageSelector.addEventListener(\"click\", function (e) {\n    e.stopPropagation();\n    moreLanguagesContainer.classList.toggle(\"hidden\");\n  });\n}\n\n//# sourceURL=webpack:///./source/js/languageSelector.js?");
-
-/***/ }),
-
-/***/ "./source/js/main.js":
-/*!***************************!*\
-  !*** ./source/js/main.js ***!
-  \***************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-eval("// Add your script here\n\n//# sourceURL=webpack:///./source/js/main.js?");
-
-/***/ }),
-
-/***/ "./source/js/menu.js":
-/*!***************************!*\
-  !*** ./source/js/menu.js ***!
-  \***************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-eval("var container = document.querySelector(\".container\");\nvar menu = document.querySelector(\".menu\");\nvar mobileMenuTrigger = document.querySelector(\".menu-trigger\");\nvar desktopMenu = document.querySelector(\".menu__inner--desktop\");\nvar desktopMenuTrigger = document.querySelector(\".menu__sub-inner-more-trigger\");\nvar menuMore = document.querySelector(\".menu__sub-inner-more\");\nvar mobileQuery = getComputedStyle(document.body).getPropertyValue(\"--phoneWidth\");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nvar handleMenuClasses = function handleMenuClasses() {\n  mobileMenuTrigger && mobileMenuTrigger.classList.toggle(\"hidden\", !isMobile());\n  menu && menu.classList.toggle(\"hidden\", isMobile());\n  menuMore && menuMore.classList.toggle(\"hidden\", !isMobile());\n}; // Common\n\n\nmenu && menu.addEventListener(\"click\", function (e) {\n  return e.stopPropagation();\n});\nmenuMore && menuMore.addEventListener(\"click\", function (e) {\n  return e.stopPropagation();\n});\nhandleMenuClasses();\ndocument.body.addEventListener(\"click\", function () {\n  if (!isMobile() && menuMore && !menuMore.classList.contains(\"hidden\")) {\n    menuMore.classList.add(\"hidden\");\n  } else if (isMobile() && !menu.classList.contains(\"hidden\")) {\n    menu.classList.add(\"hidden\");\n  }\n});\nwindow.addEventListener(\"resize\", handleMenuClasses); // Mobile menu\n\nmobileMenuTrigger && mobileMenuTrigger.addEventListener(\"click\", function (e) {\n  e.stopPropagation();\n  menu && menu.classList.toggle(\"hidden\");\n}); // Desktop menu\n\ndesktopMenuTrigger && desktopMenuTrigger.addEventListener(\"click\", function (e) {\n  e.stopPropagation();\n  menuMore && menuMore.classList.toggle(\"hidden\");\n\n  if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {\n    menuMore.style.left = \"auto\";\n    menuMore.style.right = 0;\n  }\n});\n\n//# sourceURL=webpack:///./source/js/menu.js?");
-
-/***/ }),
-
-/***/ 0:
-/*!*************************************************************************************!*\
-  !*** multi ./source/js/main.js ./source/js/menu.js ./source/js/languageSelector.js ***!
-  \*************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-eval("__webpack_require__(/*! /Users/radek/Documents/Git/Moje/terminal/themes/terminal/source/js/main.js */\"./source/js/main.js\");\n__webpack_require__(/*! /Users/radek/Documents/Git/Moje/terminal/themes/terminal/source/js/menu.js */\"./source/js/menu.js\");\nmodule.exports = __webpack_require__(/*! /Users/radek/Documents/Git/Moje/terminal/themes/terminal/source/js/languageSelector.js */\"./source/js/languageSelector.js\");\n\n\n//# sourceURL=webpack:///multi_./source/js/main.js_./source/js/menu.js_./source/js/languageSelector.js?");
-
-/***/ })
-
-/******/ });
+!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(s).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"),s=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.getBoundingClientRect().right>r.getBoundingClientRect().right&&(u.style.left="auto",u.style.right=0)})},function(e,t){function n(){return window.matchMedia(o).matches}var o=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),r=document.querySelector(".language-selector-current"),i=document.querySelector(".language-selector__more");document.body.addEventListener("click",function(){n()||!i||i.classList.contains("hidden")||i.classList.add("hidden")}),r&&r.addEventListener("click",function(e){n()||(e.stopPropagation(),i.classList.toggle("hidden"))})}]);

theme.toml

@@ -5,7 +5,7 @@ description = "A simple, retro theme for Hugo."
 homepage = "https://github.com/panr/hugo-theme-terminal/"
 tags = ["blog", "clean", "customizable", "dark", "highlighting", "minimal", "monotone", "multilingual", "personal", "responsive", "simple", "technical", "retro"]
 features = ["blog", "shortcode", "syntax highlighting"]
-min_version = 0.57
+min_version = 0.74
 
 [author]
   name = "panr"

webpack.config.js

@@ -1,6 +1,6 @@
 const Webpack = require("webpack");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-const CleanPlugin = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 
@@ -8,26 +8,22 @@ const path = require("path");
 
 const join = (...paths) => path.join(__dirname, ...paths);
 
-module.exports = {
+module.exports = (env, { mode }) => ({
   resolve: {
     extensions: [".js", ".css"],
-    modules: ["source", "node_modules"],
+    modules: ["assets", "node_modules"],
   },
   entry: {
-    "main.js": [
-      join("source", "js", "main.js"),
-      join("source", "js", "menu.js"),
-      join("source", "js", "languageSelector.js")
-    ],
-    "prism.js": join("source", "js", "prism.js"),
-    "style.css": join("source", "css", "style.css"),
-    "red.css": join("source", "css", "color", "red.css"),
-    "blue.css": join("source", "css", "color", "blue.css"),
-    "green.css": join("source", "css", "color", "green.css"),
-    "pink.css": join("source", "css", "color", "pink.css"),
+    main: [join("assets", "js", "menu.js"), join("assets", "js", "languageSelector.js")],
+    prism: join("assets", "js", "prism.js"),
+    style: join("assets", "css", "style.css"),
+    red: join("assets", "css", "color", "red.css"),
+    blue: join("assets", "css", "color", "blue.css"),
+    green: join("assets", "css", "color", "green.css"),
+    pink: join("assets", "css", "color", "pink.css"),
   },
   output: {
-    filename: "[name]",
+    filename: "[name].js",
     path: join("static/assets"),
     publicPath: "",
   },
@@ -59,17 +55,17 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: "style-loader",
         use: [
+          MiniCssExtractPlugin.loader,
           {
             loader: "css-loader",
             options: {
-                minimize: true,
-                modules: true,
-                importLoaders: 1,
+              modules: {
                 localIdentName: "[local]",
               },
+              import: true,
+              importLoaders: 1,
+            },
           },
           {
             loader: "postcss-loader",
@@ -80,7 +76,6 @@ module.exports = {
             },
           },
         ],
-        }),
       },
     ],
   },
@@ -95,5 +90,21 @@ module.exports = {
       }),
     ],
   },
-  plugins: [new CleanPlugin(join("static/assets")), new ExtractTextPlugin("[name]")],
-};
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [join("static/assets")],
+      cleanAfterEveryBuildPatterns: [
+        join("static/assets/style.js"),
+        join("static/assets/blue.js"),
+        join("static/assets/green.js"),
+        join("static/assets/red.js"),
+        join("static/assets/pink.js"),
+      ],
+      verbose: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+      chunkFilename: "[id].css",
+    }),
+  ],
+});