Update README

A11y fixes

.gitignore

@@ -88,6 +88,3 @@ typings/
 .dynamodb/
 
 # End of https://www.gitignore.io/api/node
-
-public
-.hugo_build.lock

.postcssrc.js

@@ -1,7 +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 cssnano = require("cssnano");
 const color = require("postcss-color-mod-function");
 const mixins = require("postcss-mixins");
@@ -12,7 +12,13 @@ module.exports = () => ({
     imports,
     mixins,
     nested,
-    postcssCustomMedia,
+    postCSSPresetEnv({
+      stage: 1,
+      preserve: true,
+      features: {
+        "custom-properties": true,
+      },
+    }),
     cssnano({
       preset: "default",
     }),

README.md

@@ -26,7 +26,6 @@
 - [**Fira Code**](https://github.com/tonsky/FiraCode) as default monospaced font. It's gorgeous!
 - **really nice duotone**, custom syntax highlighting based on [**PrismJS**](https://prismjs.com)
 - fully responsive
-- fully based on Hugo ecosystem (Pipes and Modules)
 
 #### Built-in shortcodes
 
@@ -82,55 +81,25 @@ A custom syntax highlighting based on PrismJS. All you need to do is to wrap you
 
 You can download the theme manually by going to [https://github.com/panr/hugo-theme-terminal.git](https://github.com/panr/hugo-theme-terminal.git) and pasting it to `themes/terminal` in your root directory.
 
-### Install theme as Hugo Module
+You can also clone it directly to your Hugo folder:
 
-```bash
-hugo mod init github.com/panr/hugo-theme-terminal
-hugo mod get github.com/panr/hugo-theme-terminal
+```
+git clone -b webpack https://github.com/panr/hugo-theme-terminal.git themes/terminal
 ```
 
-and in your config file add:
+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. You can also include it as a git submodule:
 
-```toml
-[module]
-  # this is needed when you fetch the theme as a submodule to your repo.
-  # replacements = "github.com/panr/hugo-theme-terminal -> themes/terminal"
-[[module.imports]]
-  path = 'github.com/panr/hugo-theme-terminal'
+```
+git submodule add -b webpack -f https://github.com/panr/hugo-theme-terminal.git themes/terminal
 ```
 
-and also remove reference to the theme (since Hugo Module don't need it):
-
-```toml
-# REMOVE OR COMMENT THIS LINE
-theme = "terminal"
-```
-
-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/).
-
-### Install theme locally
-
-```bash
-git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal
-```
-
-This will clone the repository directly to the `themes/terminal` directory.
-
-### Install theme as a submodule
-
-```bash
-git submodule add -f https://github.com/panr/hugo-theme-terminal.git themes/terminal
-```
-
-This will install the repository as a sumbodule in the `themes/terminal` directory.
-
-⚠️ **The theme needs at least Hugo version 0.90.x**.
+⚠️ **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:
 
-```bash
+```
 hugo server -t terminal
 ```
 
@@ -232,14 +201,6 @@ paginate = 5
         identifier = "showcase"
         name = "Showcase"
         url = "/showcase"
-
-[module]
-  # In case you would like to make changes to the theme and keep it locally in you repository,
-  # uncomment the line below (and correct the local path if necessary).
-  # --
-  # replacements = "github.com/panr/hugo-theme-terminal -> themes/terminal"
-[[module.imports]]
-  path = 'github.com/panr/hugo-theme-terminal'
 ```
 
 to `config.toml` file in your Hugo root directory and change params fields. In case you need, here's [a YAML version](https://gist.github.com/panr/9eeea6f595c257febdadc11763e3a6d1).
@@ -256,11 +217,39 @@ See the default `post` file params supported by the theme — https://github.com
 - **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 edit the theme <a id="how-to-edit" />
+## How to (safely) edit the theme <a id="how-to-edit" />
 
-If you are using as a remote Hugo Module (you don't have the theme files in the `theme/terminal`) and 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.
+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.
 
-If you have the theme files in the theme directory, then you can directly edit anything in the theme, you just have to go to `themes/terminal` and modify the files. No compilation step needed.
+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
+```
+
+ 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" />
 
@@ -287,7 +276,6 @@ 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-terminal/blob/master/USERS.md)! 🤗
 
-
 ## License
 
 Copyright © 2019-2022 Radosław Kozieł ([@panr](https://twitter.com/panr))

archetypes/posts.md

@@ -10,5 +10,4 @@ description = ""
 showFullContent = false
 readingTime = false
 hideComments = false
-color = "" #color from the theme settings
 +++

assets/css/buttons.css

@@ -16,8 +16,8 @@ a.button {
   text-decoration: none;
   text-align: center;
   border-radius: 0;
-  border: 1px solid $accent;
-  background: $accent;
+  border: 1px solid var(--accent);
+  background: var(--accent);
   font: inherit;
   font-weight: bold;
   appearance: none;
@@ -25,7 +25,7 @@ a.button {
   outline: none;
 
   &:hover {
-    background: opacify($accent, .9);
+    background: color-mod(var(--accent) a(90%));
   }
 
   /* variants */
@@ -63,7 +63,7 @@ a.read-more:hover,
 a.read-more:active {
   display: inline-flex;
   border: none;
-  color: $accent;
+  color: var(--accent);
   background: none;
   box-shadow: none;
   padding: 0;

assets/css/code.css

@@ -1,5 +1,5 @@
 .collapsable-code {
-  $border-color: mix($accent, #999, 90%);
+  --border-color: color-mod(var(--accent) blend(#999 90%));
 
   position: relative;
   width: 100%;
@@ -39,13 +39,13 @@
     min-width: 30px;
     min-height: 30px;
     margin: 0;
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--border-color);
     cursor: pointer;
   }
 
   &__title {
     flex: 1;
-    color: $accent;
+    color: var(--accent);
     padding: 3px 10px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -53,15 +53,15 @@
   }
 
   &__language {
-    color: $accent;
-    border: 1px solid $border-color;
+    color: var(--accent);
+    border: 1px solid var(--border-color);
     border-bottom: none;
     text-transform: uppercase;
     padding: 3px 10px;
   }
 
   &__toggle {
-    color: $accent;
+    color: var(--accent);
     font-size: 16px;
     padding: 3px 10px;
 

assets/css/color/blue.css

@@ -0,0 +1,14 @@
+@import '../main.css';
+@import '../header.css';
+@import '../logo.css';
+@import '../pagination.css';
+@import '../post.css';
+@import '../syntax.css';
+@import '../variables.css';
+
+:root {
+  --accent: #23B0FF;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/blue.scss

@@ -1 +0,0 @@
-$accent: #23B0FF;

assets/css/color/green.css

@@ -0,0 +1,14 @@
+@import '../main.css';
+@import '../header.css';
+@import '../logo.css';
+@import '../pagination.css';
+@import '../post.css';
+@import '../syntax.css';
+@import '../variables.css';
+
+:root {
+  --accent: #78E2A0;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/green.scss

@@ -1 +0,0 @@
-$accent: #78E2A0;

assets/css/color/orange.scss

@@ -1 +0,0 @@
-$accent: #FFA86A;

assets/css/color/pink.css

@@ -0,0 +1,14 @@
+@import '../main.css';
+@import '../header.css';
+@import '../logo.css';
+@import '../pagination.css';
+@import '../post.css';
+@import '../syntax.css';
+@import '../variables.css';
+
+:root {
+  --accent: #EE72F1;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/pink.scss

@@ -1 +0,0 @@
-$accent: #EE72F1;

assets/css/color/red.css

@@ -0,0 +1,14 @@
+@import '../main.css';
+@import '../header.css';
+@import '../logo.css';
+@import '../pagination.css';
+@import '../post.css';
+@import '../syntax.css';
+@import '../variables.css';
+
+:root {
+  --accent: #FF6266;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+}

assets/css/color/red.scss

@@ -1 +0,0 @@
-$accent: #FF6266;

assets/css/footer.css

@@ -11,7 +11,7 @@
     width: 760px;
     max-width: 100%;
 
-    @media ($tablet) {
+    @media (--tablet) {
       flex-direction: column;
     }
   }
@@ -25,6 +25,7 @@
     flex-direction: row;
     align-items: center;
     font-size: 1rem;
+    color: var(--light-color-secondary);
 
     &--user {
       margin: auto;
@@ -34,14 +35,14 @@
     & > *:first-child:not(:only-child) {
       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/form.css

@@ -1,15 +1,15 @@
 input, textarea, select {
   background: transparent;
-  color: $accent;
-  border: 1px solid $accent;
+  color: var(--accent);
+  border: 1px solid var(--accent);
   border-radius: 0;
   padding: 10px;
   font: inherit;
   appearance: none;
 
   &:focus, :active {
-    border-color: $color;
-    outline: 1px solid $color;
+    border-color: var(--color);
+    outline: 1px solid var(--color);
   }
 
   &:active {
@@ -18,13 +18,13 @@ input, textarea, select {
 }
 
 select {
-  background: $background;
+  background: var(--background);
 
   option {
-    background: $background;
+    background: var(--background);
   }
 }
 
 ::placeholder {
-  color: color-mod($accent) a(50%);
+  color: color-mod(var(--accent) a(50%));
 }

assets/css/header.css

@@ -1,9 +1,7 @@
-@mixin menu {
-  $shadow-color: opacify($background, .8);
-  $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
+@define-mixin menu {
   position: absolute;
-  background: $background;
-  box-shadow: $shadow;
+  background: var(--background);
+  box-shadow: var(--shadow);
   color: white;
   border: 2px solid;
   margin: 0;
@@ -33,7 +31,7 @@
 
     &:after {
       content: '';
-      background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
+      background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
       display: block;
       width: 100%;
       right: 10px;
@@ -47,16 +45,14 @@
   }
 
   .menu {
+    --shadow-color: color-mod(var(--background) a(80%));
+    --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
     margin: 20px 1px;
 
-    @media ($phone) {
-      @include menu;
+    @media (--phone) {
+      @mixin menu;
       top: 50px;
       right: 0;
-
-      &.hidden-on-mobile {
-        display: none;
-      }
     }
 
     &__inner {
@@ -67,7 +63,7 @@
       padding: 0;
 
       &--desktop {
-        @media ($phone) {
+        @media (--phone) {
           display: none;
         }
       }
@@ -75,7 +71,7 @@
       &--mobile {
         display: none;
 
-        @media ($phone) {
+        @media (--phone) {
           display: block;
         }
       }
@@ -88,7 +84,7 @@
         }
       }
 
-      @media ($phone) {
+      @media (--phone) {
         flex-direction: column;
         align-items: flex-start;
         padding: 0;
@@ -111,12 +107,12 @@
       }
 
       &-more {
-        @include menu;
+        @mixin menu;
         top: 35px;
         left: 0;
 
         &-trigger {
-          color: $accent;
+          color: var(--accent);
           user-select: none;
           cursor: pointer;
         }
@@ -142,31 +138,25 @@
         list-style-type: none;
         display: flex;
         flex-direction: row;
-        color: $accent;
+        color: var(--accent);
         cursor: pointer;
         margin: 0;
       }
 
       &__more {
-        @include menu;
+        @mixin menu;
         top: 35px;
         right: 0;
       }
     }
 
     &-trigger {
-      display: none;
-      color: $accent;
+      color: var(--accent);
       border: 2px solid;
       margin-left: 10px;
       height: 100%;
       padding: 3px 8px;
       position: relative;
-      cursor: pointer;
-
-      @media ($phone) {
-        display: block;
-      }
     }
   }
 }

assets/css/logo.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   text-decoration: none;
-  background: $accent;
+  background: var(--accent);
   color: black;
   padding: 5px 10px;
 }

assets/css/main.css

@@ -15,8 +15,8 @@ body {
   font-size: 1rem;
   line-height: 1.54;
   letter-spacing: -0.02em;
-  background-color: $background;
-  color: $color;
+  background-color: color-mod(var(--accent) blend(#1D1E28 98%));
+  color: var(--color);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
@@ -24,7 +24,7 @@ body {
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
 
-  @media ($phone) {
+  @media (--phone) {
     font-size: 1rem;
   }
 }
@@ -61,7 +61,7 @@ a {
 
   /* Waiting for a better times... */
   /* &:has(code) {
-    text-decoration-color: $accent;
+    text-decoration-color: var(--accent);
   } */
 }
 
@@ -109,8 +109,8 @@ figure {
     font-size: 14px;
     padding: 5px 10px;
     margin-top: 5px;
-    background: $accent;
-    color: $background;
+    background: var(--accent);
+    color: var(--background);
     /* opacity: .8; */
 
     &.left {
@@ -130,8 +130,8 @@ figure {
 code, kbd {
   font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
   font-feature-settings: normal;
-  background: color-mod($accent) a(20%);
-  color: $accent;
+  background: color-mod(var(--accent) a(20%));
+  color: var(--accent);
   padding: 1px 6px;
   margin: 0 2px;
   font-size: .95rem;
@@ -157,7 +157,7 @@ pre {
     margin-top: -40px;
   }
 
-  @media ($phone) {
+  @media (--phone) {
     white-space: pre-wrap;
     word-wrap: break-word;
   }
@@ -172,12 +172,12 @@ pre {
 }
 
 blockquote {
-  border-top: 1px solid $accent;
-  border-bottom: 1px solid $accent;
+  border-top: 1px solid var(--accent);
+  border-bottom: 1px solid var(--accent);
   margin: 40px 0;
   padding: 25px;
 
-  @media ($phone) {
+  @media (--phone) {
     padding-right: 0;
   }
 
@@ -198,15 +198,15 @@ blockquote {
     display: block;
     position: absolute;
     left: -25px;
-    color: $accent;
+    color: var(--accent);
   }
 
   &.twitter-tweet {
     position: relative;
-    background: color-mod($accent) a(10%);
+    background: color-mod(var(--accent) a(10%));
     font: inherit;
     color: inherit;
-    border: 1px solid $accent;
+    border: 1px solid var(--accent);
     padding-top: 60px;
 
     p:before {
@@ -217,12 +217,12 @@ blockquote {
       content: '> From Twitter:';
       position: absolute;
       top: 20px;
-      color: $accent;
+      color: var(--accent);
       font-weight: bold;
     }
 
     a {
-      color: $accent;
+      color: var(--accent);
     }
   }
 }
@@ -237,12 +237,12 @@ table {
 table,
 th,
 td {
-  border: 1px dashed $accent;
+  border: 1px dashed var(--accent);
   padding: 10px;
 }
 
 th {
-  color: $accent;
+  color: var(--accent);
 }
 
 ul,
@@ -254,7 +254,7 @@ ol {
     position: relative;
   }
 
-  @media ($phone) {
+  @media (--phone) {
     margin-left: 20px;
   }
 }
@@ -271,7 +271,7 @@ ol {
     content: counter(li);
     position: absolute;
     right: calc(100% + 10px);
-    color: $accent;
+    color: var(--accent);
     display: inline-block;
     text-align: right;
   }
@@ -290,8 +290,8 @@ ol {
 }
 
 mark {
-  background: $accent;
-  color: $background;
+  background: var(--accent);
+  color: var(--background);
 }
 
 .container {
@@ -312,7 +312,7 @@ mark {
     max-width: 100%;
   }
 
-  @media ($phone) {
+  @media (--phone) {
     padding: 20px;
   }
 
@@ -333,7 +333,7 @@ mark {
 hr {
   width: 100%;
   border: none;
-  background: $border-color;
+  background: var(--border-color);
   height: 1px;
 }
 

assets/css/pagination.css

@@ -15,7 +15,7 @@
       text-align: center;
       margin: 0 auto;
       padding: 5px 10px;
-      background: mix($accent, #1D1E28, 98%);
+      background: color-mod(var(--accent) blend(#1D1E28 98%));
       font-size: .8rem;
       text-transform: uppercase;
       text-decoration: none;

assets/css/post.css

@@ -3,7 +3,7 @@
 }
 
 .framed {
-  border: 1px solid $accent;
+  border: 1px solid var(--accent);
   padding: 20px;
 
   *:first-child {
@@ -25,23 +25,27 @@
   margin: 20px auto;
   padding: 20px 0;
 
+  @media (--tablet) {
+    max-width: 660px;
+  }
+
   &:not(:last-of-type) {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--border-color);
   }
 
   &-meta {
     font-size: 1rem;
     margin-bottom: 10px;
-    color: opcift($accent, 70%);
+    color: color-mod(var(--accent) a(70%));
   }
 
   &-title {
-    $border: 3px dotted $accent;
+    --border: 3px dotted var(--accent);
     position: relative;
-    color: $accent;
+    color: var(--accent);
     margin: 0 0 15px;
     padding-bottom: 15px;
-    border-bottom: $border;
+    border-bottom: var(--border);
 
     &:after {
       content: '';
@@ -49,7 +53,7 @@
       bottom: 2px;
       display: block;
       width: 100%;
-      border-bottom: $border;
+      border-bottom: var(--border);
     }
 
     a {
@@ -73,12 +77,12 @@
   }
 
   &-cover {
-    border: 20px solid $accent;
+    border: 20px solid var(--accent);
     background: transparent;
     margin: 40px 0;
     padding: 20px;
 
-    @media ($phone) {
+    @media (--phone) {
       padding: 10px;
       border-width: 10px;
     }
@@ -91,7 +95,7 @@
       content: '-';
       position: absolute;
       left: -20px;
-      color: $accent;
+      color: var(--accent);
     }
   }
 }
@@ -113,7 +117,7 @@
 }
 
 .hanchor {
-  color: opacify($accent, .9);
+  color: color-mod(var(--accent) alpha(90%));
   text-decoration: none;
   margin-left: 10px;
   visibility: hidden;
@@ -124,5 +128,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 }
 
 .footnotes {
-  color: opacify($color, .5);
+  color: color-mod(var(--color) alpha(50%));
 }

assets/css/style.css

@@ -0,0 +1,18 @@
+@import 'variables.css';
+
+@import 'font.css';
+@import 'buttons.css';
+@import 'form.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';
+@import 'gist.css';

assets/css/style.scss

@@ -1,18 +0,0 @@
-@import "variables";
-
-@import "font";
-@import "buttons";
-@import "form";
-
-@import "header";
-@import "logo";
-@import "main";
-@import "post";
-@import "pagination";
-@import "footer";
-
-@import "prism";
-@import "syntax";
-@import "code";
-@import "terms";
-@import "gist";

assets/css/syntax.css

@@ -17,7 +17,7 @@ code.language-scss,
 .token.number,
 .token.inserted,
 .token.important {
-  color: $accent !important;
+  color: var(--accent) !important;
 }
 
 .token.tag-id,
@@ -34,7 +34,7 @@ code.language-scss,
 .token.class-name,
 .token.constant,
 .token.symbol {
-  color: opacify($accent, .7) !important;
+  color: color-mod(var(--accent) a(70%)) !important;
 }
 
 .token.property,
@@ -44,7 +44,7 @@ code.language-scss,
 code.language-javascript,
 code.language-html,
 .command-line-prompt > span:before {
-  color: mix($accent, #999, .9) !important;
+  color: color-mod(var(--accent) blend(#999 90%)) !important;
 }
 
 .token.selector,
@@ -80,7 +80,7 @@ pre[class*="language-"] {
   right: 0;
   padding: 0;
   margin: 0;
-  background: opacify(mix($accent, #999, 90%), .08);
+  background: color-mod(var(--accent) blend(#999 90%) a(8%));
   pointer-events: none;
   line-height: inherit;
   white-space: pre;
@@ -115,10 +115,13 @@ pre[class*="language-"] {
   content: none;
 }
 
+:root {
+	--code-margin: 40px;
+}
+
 .code-toolbar {
-  $code-margin: 40px;
 	position: relative;
-	margin: $code-margin 0;
+	margin: var(--code-margin) 0;
 	padding: 20px;
 	border: 1px solid rgba(255, 255, 255, .1);
 
@@ -126,7 +129,7 @@ pre[class*="language-"] {
 	+ .highlight,
 	+ .highlight .code-toolbar {
 		border-top: 0;
-		margin-top: calc(-1 * $code-margin);
+		margin-top: calc(-1 * var(--code-margin));
 	}
 
 	pre, code {

assets/css/terms.css

@@ -1,6 +1,6 @@
 .terms {
   h1 {
-    color: $accent;
+    color: var(--accent);
   }
 
   h3 {

assets/css/variables.css

@@ -0,0 +1,13 @@
+:root {
+  --accent: #FFA86A;
+  --background: color-mod(var(--accent) blend(#1D1E28 98%));
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
+
+  /* variables for js, must be the same as these in @custom-media queries */
+  --phoneWidth: (max-width: 684px);
+  --tabletWidth: (max-width: 900px);
+}
+
+@custom-media --phone (max-width: 684px);
+@custom-media --tablet (max-width: 900px);

assets/css/variables.scss

@@ -1,14 +0,0 @@
-/* COLOR VARIABLES */
-$background: mix($accent, #1D1E28, 2%);
-$color: white;
-$border-color: rgba(255, 255, 255, .1);
-
-/* MEDIA QUERIES */
-$phone: (max-width: 684px);
-$tablet: (max-width: 900px);
-
-/* variables for js, must be the same as these in @custom-media queries */
-:root {
-  --phoneWidth: (max-width: 684px);
-  --tabletWidth: (max-width: 900px);
-}

assets/js/menu.js

@@ -7,15 +7,17 @@ const menuMore = document.querySelector(".menu__sub-inner-more");
 const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
 const isMobile = () => window.matchMedia(mobileQuery).matches;
 const handleMenuClasses = () => {
-  menuMore && menuMore.classList.toggle("hidden-on-mobile", !isMobile());
+  mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile());
+  menu && menu.classList.toggle("hidden", isMobile());
+  menuMore && menuMore.classList.toggle("hidden", !isMobile());
 };
 
 // Common
 
-menu && menu.addEventListener("click", (e) => e.stopPropagation());
-menuMore && menuMore.addEventListener("click", (e) => e.stopPropagation());
+menu && menu.addEventListener("click", e => e.stopPropagation());
+menuMore && menuMore.addEventListener("click", e => e.stopPropagation());
 
-// handleMenuClasses();
+handleMenuClasses();
 
 document.body.addEventListener("click", () => {
   if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {
@@ -30,15 +32,15 @@ window.addEventListener("resize", handleMenuClasses);
 // Mobile menu
 
 mobileMenuTrigger &&
-  mobileMenuTrigger.addEventListener("click", (e) => {
+  mobileMenuTrigger.addEventListener("click", e => {
     e.stopPropagation();
-    menu && menu.classList.toggle("hidden-on-mobile");
+    menu && menu.classList.toggle("hidden");
   });
 
 // Desktop menu
 
 desktopMenuTrigger &&
-  desktopMenuTrigger.addEventListener("click", (e) => {
+  desktopMenuTrigger.addEventListener("click", e => {
     e.stopPropagation();
     menuMore && menuMore.classList.toggle("hidden");
 

go.mod

@@ -1,3 +0,0 @@
-module github.com/panr/hugo-theme-terminal
-
-go 1.16

layouts/_default/index.html

@@ -19,13 +19,12 @@
         <h1 class="post-title">
           <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
         </h1>
-
         <div class="post-meta">
-          {{ with .Date }}
+          {{- with .Date }}
             <time class="post-date">
               {{ .Format "2006-01-02" }}
             </time>
-          {{ end }}
+          {{- end }}
           {{ with .Params.Author }}
             <span class="post-author">:: {{ . }}</span>
           {{ end }}
@@ -41,8 +40,10 @@
           </span>
         {{ end }}
 
+
         {{ partial "cover.html" . }}
 
+
         <div class="post-content">
           {{ if .Params.showFullContent }}
             {{ .Content }}
@@ -55,12 +56,12 @@
 
         {{ if not .Params.showFullContent }}
         <div>
-            <a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
+          <a class="read-more button"
+            href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
         </div>
         {{ end }}
       </article>
     {{ end }}
-
     {{ partial "pagination.html" . }}
   </div>
 {{ end }}

layouts/_default/list.html

@@ -11,13 +11,13 @@
           <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
         </h1>
         <div class="post-meta">
-          {{ with .Date }}
+          {{- with .Date }}
             <time class="post-date">
-              {{ .Format "2006-01-02" }} ::
+              {{ .Format "2006-01-02" }}
             </time>
-          {{ end }}
+          {{- end }}
           {{ with .Params.Author }}
-            <span class="post-author">{{ . }}</span>
+            <span class="post-author">:: {{ . }}</span>
           {{ end }}
         </div>
 
@@ -33,24 +33,25 @@
 
         {{ partial "cover.html" . }}
 
+      
         <div class="post-content">
           {{ if .Params.showFullContent }}
             {{ .Content }}
           {{ else if .Description }}
             {{ .Description | markdownify }}
           {{ else }}
-            {{ .Summary | markdownify }}
+            {{ .Summary }}
           {{ end }}
         </div>
 
         {{ if not .Params.showFullContent }}
         <div>
-            <a class="read-more button" href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
+          <a class="read-more button"
+            href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
         </div>
         {{ end }}
       </article>
     {{ end }}
-
     {{ partial "pagination.html" . }}
   </div>
 {{ end }}

layouts/_default/single.html

@@ -1,19 +1,18 @@
 {{ define "main" }}
 <article class="post">
   <h1 class="post-title">
-    <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
-  </h1>
+    <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
   <div class="post-meta">
-    {{ with .Date }}
-      <time class="post-date">
-        {{ .Format "2006-01-02" }} ::
+    {{ if .Params.Date }}
+      <span class="post-date">
+        <time>{{ .Date.Format "2006-01-02" }}</time>
         {{ if $.Site.Params.showLastUpdated }}
-          [{{or $.Site.Params.updatedDatePrefix "Updated"}} :: {{ .Lastmod.Format "2006-01-02" }}]
+          [{{or $.Site.Params.updatedDatePrefix "Updated"}}: <time>{{ .Lastmod.Format "2006-01-02" }}</time>]
         {{ end }}
-      </time>
+      </span>
     {{ end }}
     {{ with .Params.Author }}
-      <span class="post-author">{{ . }}</span>
+      <span class="post-author">:: {{ . }}</span>
     {{ end }}
     {{ if and (.Param "readingTime") (eq (.Param "readingTime") true) }}
       <span class="post-reading-time">:: {{ .ReadingTime }} min read ({{ .WordCount }} words)</span>
@@ -41,7 +40,7 @@
   <div class="post-content">
     {{- with .Content -}}
       <div>
-        {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor">&#8983;</a> ${3}` | safeHTML }}
+        {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" aria-label="Anchor">&#8983;</a> ${3}` | safeHTML }}
       </div>
     {{- end -}}
   </div>

layouts/partials/footer.html

@@ -12,13 +12,12 @@
   </div>
 </footer>
 
-{{ $menu := resources.Get "js/menu.js" | js.Build }}
-{{ $languageSelector := resources.Get "js/languageSelector.js" | js.Build }}
-{{ $prism := resources.Get "js/prism.js" | js.Build }}
+<script src="{{ "assets/main.js" | absURL }}"></script>
+<script src="{{ "assets/prism.js" | absURL }}"></script>
 
-{{ $bundle := slice $menu $languageSelector $prism | resources.Concat "bundle.js" | resources.Minify }}
-
-<script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
+{{ if $.Site.Params.showLanguageSelector }}
+  <script src="{{ "assets/languageSelector.js" | absURL }}"></script>
+{{ end }}
 
 <!-- Extended footer section-->
 {{ partial "extended_footer.html" . }}

layouts/partials/head.html

@@ -7,33 +7,25 @@
 
 {{ template "_internal/google_analytics.html" . }}
 
-{{ $defaultStyles := resources.Get "css/style.scss" }}
-<!-- Local Theme Variables -->
+<!-- Theme CSS -->
+<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
 {{ if (isset .Params "color") }}
-  {{ $localColorCss := resources.Get (printf "css/color/%s.scss" .Params.color) }}
-  {{ $localCss := slice $localColorCss $defaultStyles | resources.Concat (printf "css/%s-local.scss" .Params.color) }}
-  {{ $localColorStyles := $localCss | resources.ToCSS }}
-  <link rel="stylesheet" href="{{ $localColorStyles.RelPermalink }}">
-{{ else }}
-  <!-- Theme Variables -->
-  {{ $colorCss := resources.Get (printf "css/color/%s.scss" ($.Site.Params.ThemeColor | default "orange")) }}
-  {{ $css := slice $colorCss $defaultStyles | resources.Concat "css/base.scss" }}
-  {{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
-  {{ $styles := $css | resources.ToCSS $options }}
-  <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
+  <link rel="stylesheet" href="{{ (printf "assets/%s.css" .Params.color) | absURL }}">
+{{ 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 }}
 
-<!-- Custom CSS to override theme properties (/static/style.scss) -->
-{{ if (fileExists "static/style.scss") -}}
-  <link rel="stylesheet" href="{{ "style.scss" | absURL }}">
+<!-- Custom CSS to override theme properties (/static/style.css) -->
+{{ if (fileExists "static/style.css") -}}
+  <link rel="stylesheet" href="{{ "style.css" | absURL }}">
 {{- end }}
 
 <!-- Icons -->
+<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/theme-colors/%s.png" (or .Params.color $.Site.Params.ThemeColor | default "orange") | absURL }}">
-  <link rel="apple-touch-icon" href="{{ printf "img/theme-colors/%s.png" (or .Params.color $.Site.Params.ThemeColor | default "orange") | absURL }}">
+  <link rel="shortcut icon" href="{{ printf "img/favicon/%s.png" ($.Site.Params.ThemeColor | default "orange") | absURL }}">
 {{ end }}
 
 <!-- Twitter Card -->

layouts/partials/menu.html

@@ -1,9 +1,9 @@
-<nav class="menu hidden-on-mobile">
+<nav class="menu">
   <ul class="menu__inner menu__inner--desktop">
     {{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
       {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
         {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+          <li><a href="{{ .URL }}" {{ if .Params.NewTab }} target="_blank" {{ end }}>{{ .Name }}</a></li>
         {{ end }}
       {{ end }}
       {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
@@ -13,7 +13,7 @@
           <ul class="menu__sub-inner-more hidden">
             {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
               {{ if not .HasChildren }}
-                <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+                <li><a href="{{ .URL }}" {{ if .Params.NewTab }} target="_blank" {{ end }}>{{ .Name }}</a></li>
               {{ end }}
             {{ end }}
           </ul>
@@ -22,7 +22,7 @@
     {{ else }}
       {{ range $.Site.Menus.main }}
         {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+          <li><a href="{{ .URL }}" {{ if .Params.NewTab }} target="_blank" {{ end }}>{{ .Name }}</a></li>
         {{ end }}
       {{ end }}
     {{ end }}
@@ -45,7 +45,7 @@
   <ul class="menu__inner menu__inner--mobile">
     {{ range $.Site.Menus.main }}
       {{ if not .HasChildren }}
-        <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+        <li><a href="{{ .URL }}" {{ if .Params.NewTab }} target="_blank" {{ end }}>{{ .Name }}</a></li>
       {{ end }}
     {{ end }}
     {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}

package.hugo.json

@@ -1,39 +0,0 @@
-{
-  "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
-  "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"
-  },
-  "license": "MIT",
-  "main": "index.js",
-  "name": "terminal",
-  "scripts": {
-    "test": "echo 'Test'"
-  },
-  "version": "2.1.0"
-}

package.json

@@ -1,39 +1,60 @@
 {
+  "name": "terminal",
+  "version": "2.1.0",
+  "main": "index.js",
   "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
+  "license": "MIT",
   "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"
+  "scripts": {
+    "dev": "webpack --mode=development --watch",
+    "build": "webpack --mode=production"
   },
   "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/parser": "^7.4.2",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-stage-2": "^7.0.0",
+    "angular-html-parser": "^1.2.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.5",
     "browserslist": "^4.16.5",
+    "clean-webpack-plugin": "^3.0.0",
     "clipboard": "^2.0.4",
+    "css-loader": "^5.1.3",
+    "cssnano": "^5.0.8",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "husky": "^5.1.3"
+    "file-loader": "^6.1.0",
+    "husky": "^5.1.3",
+    "mini-css-extract-plugin": "^1.3.9",
+    "postcss": "^8.2.10",
+    "postcss-browser-reporter": "^0.6.0",
+    "postcss-cli": "^8.3.1",
+    "postcss-color-function": "^4.0.1",
+    "postcss-color-mod-function": "^3.0.3",
+    "postcss-import": "^14.0.0",
+    "postcss-loader": "^5.2.0",
+    "postcss-mixins": "^7.0.3",
+    "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": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "url-loader": "^4.1.0",
+    "webpack": "^5.27.1",
+    "webpack-cli": "^4.5.0"
   },
-  "license": "MIT",
-  "main": "index.js",
-  "name": "terminal",
-  "scripts": {
-    "test": "echo 'Test'"
-  },
-  "version": "2.1.0"
+  "dependencies": {
+    "yarn": "^1.22.10"
+  }
 }

resources/_gen/assets/scss/css/base.scss_06c91705bc48efa09403e08ed1e70fce.json

@@ -1 +0,0 @@
-{"Target":"style.css","MediaType":"text/css","Data":{}}

static/assets/languageSelector.js

@@ -0,0 +1,4 @@
+(function(){var __webpack_modules__={"./assets/js/languageSelector.js":
+/*!***************************************!*\
+  !*** ./assets/js/languageSelector.js ***!
+  \***************************************/function(){eval('var mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nvar languageSelector = document.querySelector(".language-selector-current");\nvar moreLanguagesContainer = document.querySelector(".language-selector__more");\ndocument.body.addEventListener("click", function () {\n  if (!isMobile() && moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) {\n    moreLanguagesContainer.classList.add("hidden");\n  }\n});\nlanguageSelector && languageSelector.addEventListener("click", function (e) {\n  if (!isMobile()) {\n    e.stopPropagation();\n    moreLanguagesContainer.classList.toggle("hidden");\n  }\n});\n\n//# sourceURL=webpack://terminal/./assets/js/languageSelector.js?')}},__webpack_exports__={};__webpack_modules__["./assets/js/languageSelector.js"]()})();

static/assets/main.js

@@ -0,0 +1,4 @@
+(function(){var __webpack_modules__={"./assets/js/menu.js":
+/*!***************************!*\
+  !*** ./assets/js/menu.js ***!
+  \***************************/function(){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://terminal/./assets/js/menu.js?')}},__webpack_exports__={};__webpack_modules__["./assets/js/menu.js"]()})();

webpack.config.js

@@ -0,0 +1,104 @@
+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"),
+    languageSelector: 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].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|jpg|woff|woff2|ttf|eot|svg)$/,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[local]",
+              },
+              import: true,
+              importLoaders: 1,
+            },
+          },
+          "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"),
+        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",
+    }),
+  ],
+});