Update README

A11y fixes

.husky/.gitignore

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

.husky/pre-push

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

.postcssrc.js

@@ -2,7 +2,6 @@ const url = require("postcss-url");
 const imports = require("postcss-import");
 const nested = require("postcss-nested");
 const postCSSPresetEnv = require("postcss-preset-env");
-const browsers = require("browserslist");
 const cssnano = require("cssnano");
 const color = require("postcss-color-mod-function");
 const mixins = require("postcss-mixins");

COMMUNITY-FEATURES.md

@@ -16,6 +16,10 @@ eg:
   - John, a javascript developer.
 -->
 
-- **Social media icons** (https://github.com/...)
+- **Portfolio** (https://github.com/Louisload/hugo-theme-terminal-portfolio)
-  - This is the biggest missing feature of the theme. But now it will help your audience reach you over the internet.
+  - Allows you to create a portfolio page (or several). Supports icons and subsections.
-  - John, a javascript developer.
+  - Luís Rodrigues Alves (Louisload), a game dev and musician.
+
+- **Single Page Website** (https://github.com/justinnuwin/hugo-theme-terminal)
+  - A layout where the homepage can render lists of pages and the navigation menu can link to sections on the homepage.
+  - Justin Nguyen, software and hardware developer.

README.md

@@ -4,8 +4,6 @@
 
 ### DEMO - https://hugo-terminal.now.sh/
 
-<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>
-
 ---
 
 - [Features](#features)
@@ -20,24 +18,29 @@
 - [Found a bug?](#bug)
 - [New cool idea or feature](#feature)
 - [Terminal theme user?](#terminal-theme-user)
-- [Sponsoring](#sponsoring)
 - [Licence](#licence)
 
 ## Features
 
-- **5 duetone themes**, depending on your preferences (orange is default, red, blue, green, pink)
+- **5 duotone themes**, depending on your preferences (orange is default, red, blue, green, pink)
 - [**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
 
 #### Built-in shortcodes
 
-- **`image`** (prop required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**)
+- **`image`** (props required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**)
-  - eg: `{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}`
+  - e.g.
+  ```go
+  {{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}
+  ```
 - **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`**)
-  - eg: `{{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}`
+  - e.g.
-- **`code`** (prop required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"), **`isCollapsed`**)
+  ```go
-  - eg:
+  {{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}
+  ```
+- **`code`** (props required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"), **`isCollapsed`**)
+  - e.g.
   ```go
   {{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
   pre {
@@ -72,7 +75,7 @@ A custom syntax highlighting based on PrismJS. All you need to do is to wrap you
 ```
 ````
 
-**Supported languages**: bash/shell, css, clike, javascript, apacheconf, actionscript, applescript, c, csharp, cpp, coffeescript, ruby, csp, css-extras, diff, django, docker, elixir, elm, markup-templating, erlang, fsharp, flow, git, go, graphql, less, handlebars, haskell, http, java, json, kotlin, latex, markdown, makefile, objectivec, ocaml, perl, php, php-extras, r, sql, processing, scss, python, jsx, typescript, toml, reason, textile, rust, sass, stylus, scheme, pug, swift, yaml, haml, twig, tsx, vim, visual-basic, wasm.
+**Supported languages**: actionscript, apacheconf, applescript, bash, c, clike, cmake, coffeescript, cpp, csharp, csp, css, css-extras, diff, django, docker, elixir, elm, erlang, flow, fsharp, git, go, graphql, haml, handlebars, haskell, http, java, javascript, json, jsx, kotlin, latex, less, llvm, makefile, markdown, markup, markup-templating, nasm, objectivec, ocaml, perl, php, php-extras, powershell, processing, pug, python, r, reason, ruby, rust, sass, scala, scheme, scss, sql, stylus, swift, textile, toml, tsx, twig, typescript, vim, visual-basic, wasm, yaml.
 
 ## How to start
 
@@ -81,29 +84,23 @@ You can download the theme manually by going to [https://github.com/panr/hugo-th
 You can also clone it directly to your Hugo folder:
 
 ```
-$ git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal
+git clone -b webpack https://github.com/panr/hugo-theme-terminal.git themes/terminal
 ```
 
 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:
 
 ```
-$ git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal
+git submodule add -b webpack -f 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
 
-The theme is using [Hugo Pipes](https://gohugo.io/hugo-pipes/) to handle Javascript and PostCSS files. This setup **requires** following npm packages:
+If you installed all needed `npm` dependencies, then you can run:
 
 ```
-@babel/cli @babel/core @babel/preset-env browserslist clipboard cssnano postcss-cli postcss-import postcss-mixins postcss-nested postcss-preset-env postcss-url
+hugo server -t terminal
-```
-
-Before you start, you have to install them (globally or locally).
-
-Then:
-
-```
-$ 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.
@@ -138,18 +135,35 @@ paginate = 5
   # center theme with default width
   centerTheme = false
 
-  # set a custom favicon (default is a `themeColor` square)
+  # if your resource directory contains an image called `cover.(jpg|png|webp)`,
-  # favicon = "favicon.ico"
+  # then the file will be used as a cover automatically.
+  # With this option you don't have to put the `cover` param in a front-matter.
+  autoCover = true
 
   # set post to show the last updated
   # If you use git, you can set `enableGitInfo` to `true` and then post will automatically get the last updated
   showLastUpdated = false
+
+  # set a custom favicon (default is a `themeColor` square)
+  # favicon = "favicon.ico"
+
   # Provide a string as a prefix for the last update date. By default, it looks like this: 2020-xx-xx [Updated: 2020-xx-xx] :: Author
   # updatedDatePrefix = "Updated"
 
   # set all headings to their default size (depending on browser settings)
-  # it's set to `true` by default
+  # oneHeadingSize = true # default
-  # oneHeadingSize = false
+
+  # whether to show a page's estimated reading time
+  # readingTime = false # default
+
+  # whether to show a table of contents
+  # can be overridden in a page's front-matter
+  # Toc = false # default
+
+  # set title for the table of contents
+  # can be overridden in a page's front-matter
+  # TocTitle = "Table of Contents" # default
+
 
 [params.twitter]
   # set Twitter handles for Twitter cards
@@ -169,6 +183,8 @@ paginate = 5
     menuMore = "Show more"
     readMore = "Read more"
     readOtherPosts = "Read other posts"
+    newerPosts = "Newer posts"
+    olderPosts = "Older posts"
     missingContentMessage = "Page not found..."
     missingBackButtonLabel = "Back to home page"
 
@@ -193,7 +209,7 @@ to `config.toml` file in your Hugo root directory and change params fields. In c
 
 ## Post archetype
 
-See the basic `post` file params supported by the theme — https://github.com/panr/hugo-theme-terminal/blob/master/archetypes/posts.md
+See the default `post` file params supported by the theme — https://github.com/panr/hugo-theme-terminal/blob/master/archetypes/posts.md
 
 ## Add-ons
 
@@ -203,7 +219,37 @@ See the basic `post` file params supported by the theme — https://github.com/p
 
 ## How to (safely) edit the theme <a id="how-to-edit" />
 
-To change something in the theme, you have to go to `themes/terminal` and modify the files. You can also copy them (like `assets` folder) from the theme to your root directory and modify the files there (thanks to Hugo's lookup https://gohugo.io/templates/lookup-order). This will protect your changes from overriding when you update the theme.
+If you have to override only some of the styles, you can do this easily by adding `static/style.css` in your root directory and point things you want to change.
+
+To change something directly in the theme, you have to go to `themes/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" />
 
@@ -230,14 +276,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-terminal/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-terminal/blob/master/LICENSE.md) for additional licensing information.

USERS.md

@@ -22,7 +22,6 @@
 - https://security.jtang.dev **Jonathan Tang** (Student & Software Engineer)
 - https://andreacaravano.net **Andrea Caravano** (Student)
 - https://dawsonverboven.com/ **Dawson Verboven** (Student & Software Developer)
-- https://www.rockyourcode.com **Sophia Brandt** (tax officer and hobby coder)
 - https://qbunt.com **Jeremy Bunting** (Software Engineer)
 - https://smeik.org **Smeik** (Embedded Developer)
 - https://code.willstocks.co.uk **Will Stocks** (Blogger & Developer)
@@ -30,14 +29,45 @@
 - https://m47r1x.github.io **Neo** (Citizen of Zion)
 - https://bgameiro.me/ **Bernardo Gameiro** (Engineer Physicist student)
 - https://return-to-libc.com/ **elraro** (Cyber Security Specialist)
-- https://waterloos.niflheimr.blue/ **niflheimr1011** (Aspiring Software Engineer)
+- https://pablart.com/ **Pablo Diaz-Gutierrez** (Software Engineer, General Tinkerer)
+- https://waterloos.niflheimr.blue/ **cindrmon** (Student and 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)
+- https://mpostument.com/ **Maksym Postument** (DevOps Engineer)
+- https://mathiejosh.xyz **Josh Mathie** (Electrical Engineering Technology Student/Sales and Engineering Tech)
+- https://yuji.ne.jp/ **YUJI** (Student & Software Developer)
+- https://blog.puvvadi.me **KD Puvvadi** (Software Dev & Cloud Orchestrator)
+- https://hidden.land/ **Louisload** (Game Developer & Musician)
+- https://linuxbase.nl **Michael Trip** (DevOps Engineer)
+- https://markopolo123.github.io **Markopolo** (DevOps Engineer)
+- https://openfoxblog.leven.dev/ **Damon Leven** (Student & Software Developer)
+- https://blog.sethforprivacy.com **Seth For Privacy** (Security, privacy, and cryptocurrency writer, podcaster)
+- https://thesprawl.city **crish** (Software and stuff)
+- https://justinnuwin.com **Justin Nguyen** (Software & Hardware Developer)
+- https://blog.woosal.com/ **Vusal Ismayilov** (Computer Engineering Student)
+- https://itsembedded.com/  **Norbert Kremeris** (digital logic design and verification engineer)
+- https://nereuxofficial.github.io **Nereuxofficial** (Software Developer & Student)
+- https://biplav.xyz **Biplav's Blog** (Student)
+- https://santiago.wtf **Nicholas Santiago** (DevOps Engineer)
+- https://2200g.github.io/ **2200g** (Blogger/Student)
+- https://cristiioan.me **Cristian Margine** (Student)
+- https://they.mint.lgbt **Joey Aliaga** (Software Developer & Student)
+- https://tatewilhelm.me **Tate Wilhelm** (Student, Programmer & Tinkerer)
+- https://mikefoden.com **Mike Foden** (Software Developer)
+- https://undemalum.github.io/portfolio/ **Mateusz Konat** (Student)
+- https://ku0hn.radio **Ben Kuhn** (Ham Radio Operator, InfoSec Engineer, Tinkerer)
+- https://bg117.xyz/projects **bg117** (Student and Hobby Programmer)
+- https://www.grumpymetalguy.com **GrumpyMetalGuy** (General Grumper and Developer)
+- https://blog.jontes.page **Jonte** (general tech geek)
+- https://nazdarthegame.com/ **Michal Skoula** (Software Developer)
 
 <!--
-TEMPLATE:
+ TEMPLATE:
 
-- https://radoslawkoziel.pl **Radek Kozieł** (Software Designer and Developer)
+ - https://radoslawkoziel.pl **Radek Kozieł** (Software Designer and Developer)
 
--->
+ -->

archetypes/posts.md

@@ -1,6 +1,6 @@
 +++
-title = ""
+title = "{{ replace .TranslationBaseName "-" " " | title }}"
-date = ""
+date = "{{ .Date }}"
 author = ""
 authorTwitter = "" #do not include @
 cover = ""
@@ -8,4 +8,6 @@ tags = ["", ""]
 keywords = ["", ""]
 description = ""
 showFullContent = false
+readingTime = false
+hideComments = false
 +++

assets/css/buttons.css

@@ -15,12 +15,19 @@ a.button {
   margin-bottom: 5px;
   text-decoration: none;
   text-align: center;
-  border-radius: 8px;
+  border-radius: 0;
-  border: 1px solid transparent;
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  font: inherit;
+  font-weight: bold;
   appearance: none;
   cursor: pointer;
   outline: none;
 
+  &:hover {
+    background: color-mod(var(--accent) a(90%));
+  }
+
   /* variants */
 
   &.outline {
@@ -34,20 +41,11 @@ a.button {
     }
   }
 
-  &.primary {
-    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
-
-    &:hover {
-      box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);
-    }
-  }
-
   &.link {
     background: none;
     font-size: 1rem;
   }
 
-
   /* sizes */
 
   &.small {
@@ -64,6 +62,8 @@ a.read-more,
 a.read-more:hover,
 a.read-more:active {
   display: inline-flex;
+  border: none;
+  color: var(--accent);
   background: none;
   box-shadow: none;
   padding: 0;

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/form.css

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

assets/css/gist.css

@@ -0,0 +1,6 @@
+body .gist .blob-num /* line numbers */,
+body .gist .blob-code-inner
+{
+    border: none;
+}
+

assets/css/header.css

@@ -47,7 +47,7 @@
   .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 0;
+    margin: 20px 1px;
 
     @media (--phone) {
       @mixin menu;

assets/css/main.css

@@ -19,7 +19,7 @@ body {
   color: var(--color);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
+  font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
   font-variant-ligatures: contextual;
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
@@ -128,7 +128,7 @@ figure {
 }
 
 code, kbd {
-  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
+  font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
   font-feature-settings: normal;
   background: color-mod(var(--accent) a(20%));
   color: var(--accent);
@@ -147,7 +147,7 @@ pre {
   background: transparent !important;
   padding: 20px 10px;
   margin: 40px 0;
-  font-size: .95rem;
+  font-size: .95rem !important;
   overflow: auto;
   border-top: 1px solid rgba(255, 255, 255, .1);
   border-bottom: 1px solid rgba(255, 255, 255, .1);
@@ -228,7 +228,7 @@ blockquote {
 }
 
 table {
-  table-layout: fixed;
+  table-layout: auto;
   border-collapse: collapse;
   width: 100%;
   margin: 40px 0;
@@ -247,7 +247,7 @@ th {
 
 ul,
 ol {
-  margin-left: 30px;
+  margin-left: 22px;
   padding: 0;
 
   li {
@@ -275,10 +275,18 @@ ol {
     display: inline-block;
     text-align: right;
   }
-}
 
-ol ol {
+  ol {
-  list-style-type: lower-alpha;
+    margin-left: 38px;
+
+    li {
+      counter-increment: li;
+    }
+
+    li:before {
+      content: counters(li, ".") " ";
+    }
+  }
 }
 
 mark {
@@ -332,3 +340,7 @@ hr {
 .hidden {
   display: none;
 }
+
+sup {
+ line-height: 0;
+}

assets/css/prism.css

@@ -1,19 +1,17 @@
-/* PrismJS 1.15.0
+/* PrismJS 1.24.1
-https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+c+csharp+bash+cpp+coffeescript+ruby+csp+css-extras+diff+django+docker+elixir+elm+markup-templating+erlang+fsharp+flow+git+go+graphql+less+handlebars+haskell+http+java+json+kotlin+latex+markdown+makefile+objectivec+ocaml+perl+php+php-extras+sql+processing+scss+python+jsx+typescript+reason+textile+rust+sass+stylus+scheme+pug+swift+yaml+haml+toml+twig+tsx+vim+visual-basic+wasm&plugins=line-numbers+toolbar+jsonp-highlight+command-line+copy-to-clipboard */
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+bash+c+csharp+cpp+cmake+coffeescript+csp+css-extras+diff+django+docker+elixir+elm+erlang+fsharp+flow+git+go+graphql+haml+handlebars+haskell+http+java+json+kotlin+latex+less+llvm+makefile+markdown+markup-templating+nasm+objectivec+ocaml+perl+php+php-extras+powershell+processing+pug+python+r+jsx+tsx+reason+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+textile+toml+twig+typescript+vim+visual-basic+wasm+yaml&plugins=line-highlight+line-numbers+jsonp-highlight+highlight-keywords+command-line+toolbar+copy-to-clipboard */
 /**
  * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
  * Based on https://github.com/chriskempson/tomorrow-theme
  * @author Rose Pritchard
  */
 
-:root {
-	--code-margin: 40px;
-}
-
 code[class*="language-"],
 pre[class*="language-"] {
+	color: #ccc;
 	background: none;
-	font-family: inherit, monospace;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;
@@ -21,30 +19,94 @@ pre[class*="language-"] {
 	word-wrap: normal;
 	line-height: 1.5;
 
-	tab-size: 2;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
 	hyphens: none;
 
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-	margin: 0;
+	padding: 1em;
-	padding: 0;
+	margin: .5em 0;
 	overflow: auto;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	border-radius: 0;
+	background: #2d2d2d;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
 	padding: .1em;
-	border-radius: 0;
+	border-radius: .3em;
 	white-space: normal;
 }
 
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
 .token.important,
 .token.bold {
 	font-weight: bold;
@@ -57,6 +119,81 @@ pre[class*="language-"] {
 	cursor: help;
 }
 
+.token.inserted {
+	color: green;
+}
+
+pre[data-line] {
+	position: relative;
+	padding: 1em 0 1em 3em;
+}
+
+.line-highlight {
+	position: absolute;
+	left: 0;
+	right: 0;
+	padding: inherit 0;
+	margin-top: 1em; /* Same as .prism’s padding-top */
+
+	background: hsla(24, 20%, 50%,.08);
+	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+
+	pointer-events: none;
+
+	line-height: inherit;
+	white-space: pre;
+}
+
+@media print {
+	.line-highlight {
+		/*
+		 * This will prevent browsers from replacing the background color with white.
+		 * It's necessary because the element is layered on top of the displayed code.
+		 */
+		-webkit-print-color-adjust: exact;
+		color-adjust: exact;
+	}
+}
+
+	.line-highlight:before,
+	.line-highlight[data-end]:after {
+		content: attr(data-start);
+		position: absolute;
+		top: .4em;
+		left: .6em;
+		min-width: 1em;
+		padding: 0 .5em;
+		background-color: hsla(24, 20%, 50%,.4);
+		color: hsl(24, 20%, 95%);
+		font: bold 65%/1.5 sans-serif;
+		text-align: center;
+		vertical-align: .3em;
+		border-radius: 999px;
+		text-shadow: none;
+		box-shadow: 0 1px white;
+	}
+
+	.line-highlight[data-end]:after {
+		content: attr(data-end);
+		top: auto;
+		bottom: .4em;
+	}
+
+.line-numbers .line-highlight:before,
+.line-numbers .line-highlight:after {
+	content: none;
+}
+
+pre[id].linkable-line-numbers span.line-numbers-rows {
+	pointer-events: all;
+}
+pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
+	cursor: pointer;
+}
+pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
+	background-color: rgba(128, 128, 128, .2);
+}
+
 pre[class*="language-"].line-numbers {
 	position: relative;
 	padding-left: 3.8em;
@@ -76,104 +213,28 @@ pre[class*="language-"].line-numbers > code {
 	left: -3.8em;
 	width: 3em; /* works for line-numbers below 1000 lines */
 	letter-spacing: -1px;
-	border-right: 1px solid color-mod(var(--accent) blend(#999 90%) a(20%));
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
 	user-select: none;
+
 }
 
-.line-numbers-rows > span {
+	.line-numbers-rows > span {
-	pointer-events: none;
 		display: block;
 		counter-increment: linenumber;
-}
+	}
 
-.line-numbers-rows > span:before {
+		.line-numbers-rows > span:before {
 			content: counter(linenumber);
-	color: color-mod(var(--accent) blend(#999 90%) a(40%));
+			color: #999;
 			display: block;
 			padding-right: 0.8em;
 			text-align: right;
-}
-
-.code-toolbar {
-	position: relative;
-	margin: var(--code-margin) 0;
-	padding: 20px;
-	border: 1px solid rgba(255, 255, 255, .1);
-
-	+ .code-toolbar,
-	+ .highlight,
-	+ .highlight .code-toolbar {
-		border-top: 0;
-		margin-top: calc(-1 * var(--code-margin));
 		}
 
-	pre, code {
-		border: none;
-	}
-
-	code {
-		display: block;
-		color: inherit;
-	}
-}
-
-.highlight + .highlight .code-toolbar {
-	border-top: 0;
-	margin-top: calc(-1 * var(--code-margin));
-}
-
-div.code-toolbar > .toolbar {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	transition: opacity 0.3s ease-in-out;
-	opacity: 0;
-}
-
-div.code-toolbar:hover > .toolbar {
-	opacity: 1;
-}
-
-div.code-toolbar > .toolbar .toolbar-item {
-	display: inline-block;
-}
-
-div.code-toolbar > .toolbar a {
-	cursor: pointer;
-}
-
-div.code-toolbar > .toolbar button {
-	background: none;
-	border: 0;
-	color: inherit;
-	font: inherit;
-	line-height: normal;
-	overflow: visible;
-	padding: 0;
-	user-select: none;
-}
-
-div.code-toolbar > .toolbar a,
-div.code-toolbar > .toolbar button,
-div.code-toolbar > .toolbar span {
-	color: #bbb;
-	font-size: .8em;
-	padding: 10px;
-	background: #f5f2f0;
-	background: rgba(224, 224, 224, 0.2);
-	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
-	border-radius: 0;
-}
-
-div.code-toolbar > .toolbar a:hover,
-div.code-toolbar > .toolbar a:focus,
-div.code-toolbar > .toolbar button:hover,
-div.code-toolbar > .toolbar button:focus,
-div.code-toolbar > .toolbar span:hover,
-div.code-toolbar > .toolbar span:focus {
-	text-decoration: none;
-}
-
 .command-line-prompt {
 	border-right: 1px solid #999;
 	display: block;
@@ -182,10 +243,15 @@ div.code-toolbar > .toolbar span:focus {
 	letter-spacing: -1px;
 	margin-right: 1em;
 	pointer-events: none;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
 	user-select: none;
 }
 
 .command-line-prompt > span:before {
+	color: #999;
 	content: ' ';
 	display: block;
 	padding-right: 0.8em;
@@ -202,3 +268,69 @@ div.code-toolbar > .toolbar span:focus {
 .command-line-prompt > span[data-prompt]:before {
 	content: attr(data-prompt);
 }
+
+div.code-toolbar {
+	position: relative;
+}
+
+div.code-toolbar > .toolbar {
+	position: absolute;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item {
+	display: inline-block;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar > .toolbar-item > span {
+	color: #bbb;
+	font-size: .8em;
+	padding: 0 .5em;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.2);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: .5em;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar > .toolbar-item > a:focus,
+div.code-toolbar > .toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar > .toolbar-item > button:focus,
+div.code-toolbar > .toolbar > .toolbar-item > span:hover,
+div.code-toolbar > .toolbar > .toolbar-item > span:focus {
+	color: inherit;
+	text-decoration: none;
+}
+

assets/css/style.css

@@ -2,6 +2,7 @@
 
 @import 'font.css';
 @import 'buttons.css';
+@import 'form.css';
 
 @import 'header.css';
 @import 'logo.css';
@@ -14,3 +15,4 @@
 @import 'syntax.css';
 @import 'code.css';
 @import 'terms.css';
+@import 'gist.css';

assets/css/syntax.css

@@ -14,8 +14,10 @@ code.language-scss,
 .token.statement,
 .token.regex,
 .token.atrule,
-.token.number {
+.token.number,
-  color: var(--accent);
+.token.inserted,
+.token.important {
+  color: var(--accent) !important;
 }
 
 .token.tag-id,
@@ -24,16 +26,25 @@ code.language-scss,
 .token.unit,
 .token.placeholder,
 .token.variable,
-.token.attr-name {
+.token.tag,
-  color: color-mod(var(--accent) a(70%));
+.token.attr-name,
+.token.namespace,
+.token.deleted,
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: color-mod(var(--accent) a(70%)) !important;
 }
 
 .token.property,
 .token.function,
+.token.function-name,
+.token.deleted,
 code.language-javascript,
 code.language-html,
 .command-line-prompt > span:before {
-  color: color-mod(var(--accent) blend(#999 90%));
+  color: color-mod(var(--accent) blend(#999 90%)) !important;
 }
 
 .token.selector,
@@ -46,17 +57,23 @@ code.language-html,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: rgba(255, 255, 255, .3);
+  color: rgba(255, 255, 255, .3) !important;
 }
 
 .token.namespace {
-  opacity: .7;
+  opacity: .7 !important;
 }
 
 pre[data-line] {
   position: relative;
 }
 
+pre[class*="language-"] {
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+
 .line-highlight {
   position: absolute;
   left: 0;
@@ -97,3 +114,43 @@ pre[data-line] {
 .line-numbers .line-highlight:after {
   content: none;
 }
+
+:root {
+	--code-margin: 40px;
+}
+
+.code-toolbar {
+	position: relative;
+	margin: var(--code-margin) 0;
+	padding: 20px;
+	border: 1px solid rgba(255, 255, 255, .1);
+
+	+ .code-toolbar,
+	+ .highlight,
+	+ .highlight .code-toolbar {
+		border-top: 0;
+		margin-top: calc(-1 * var(--code-margin));
+	}
+
+	pre, code {
+		border: none;
+	}
+
+	code {
+		display: block;
+		color: inherit;
+	}
+
+  > .toolbar {
+    button {
+      font-size: .8em !important;
+      background: hsla(0,0%,87.8%,.2) !important;
+      color: #bbb !important;
+      box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important;
+      border-radius: 0 !important;
+      margin: 6px !important;
+      padding: 10px !important;
+      user-select:none
+    }
+  }
+}

assets/css/variables.css

@@ -9,5 +9,5 @@
   --tabletWidth: (max-width: 900px);
 }
 
-@custom-media --phone (width < 684px);
+@custom-media --phone (max-width: 684px);
-@custom-media --tablet (width < 900px);
+@custom-media --tablet (max-width: 900px);

assets/js/languageSelector.js

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

assets/js/main.js

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

exampleSite/config.toml

@@ -4,7 +4,7 @@ theme = "hugo-theme-terminal"
 paginate = 5
 
 [params]
-  contentTypeName = "post"
+  contentTypeName = "posts"
   themeColor = "orange"
   showMenuItems = 2
   fullWidthTheme = false

layouts/_default/baseof.html

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

layouts/_default/index.html

@@ -15,14 +15,16 @@
     {{ $paginator := .Paginate (where $PageContext.RegularPages "Type" $contentTypeName) }}
 
     {{ 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">
-          <span class="post-date">
+          {{- with .Date }}
-            {{ .Date.Format "2006-01-02" }}
+            <time class="post-date">
-          </span>
+              {{ .Format "2006-01-02" }}
+            </time>
+          {{- end }}
           {{ with .Params.Author }}
             <span class="post-author">:: {{ . }}</span>
           {{ end }}
@@ -38,20 +40,18 @@
           </span>
         {{ end }}
 
-        {{ if .Params.Cover }}
+
-          <img src="{{ .Params.Cover | absURL }}" class="post-cover" alt="{{ .Title | plainify | default " " }}" />
+        {{ partial "cover.html" . }}
-        {{ end }}
+
 
         <div class="post-content">
           {{ if .Params.showFullContent }}
-          {{ .Content | markdownify }}
+            {{ .Content }}
           {{ else if .Description }}
             {{ .Description | markdownify }}
           {{ else }}
-          {{ if .Truncated }}
             {{ .Summary | markdownify }}
           {{ end }}
-          {{ end }}
         </div>
 
         {{ if not .Params.showFullContent }}
@@ -60,7 +60,7 @@
             href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
         </div>
         {{ end }}
-      </div>
+      </article>
     {{ end }}
     {{ partial "pagination.html" . }}
   </div>

layouts/_default/list.html

@@ -5,15 +5,17 @@
     </div>
   {{ end }}
   <div class="posts">
-    {{ range .Pages }}
+    {{ 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">
-          <span class="post-date">
+          {{- with .Date }}
-            {{ .Date.Format "2006-01-02" }}
+            <time class="post-date">
-          </span>
+              {{ .Format "2006-01-02" }}
+            </time>
+          {{- end }}
           {{ with .Params.Author }}
             <span class="post-author">:: {{ . }}</span>
           {{ end }}
@@ -29,19 +31,16 @@
           </span>
         {{ end }}
 
-        {{ if .Params.Cover }}
+        {{ partial "cover.html" . }}
-          <img src="{{ .Params.Cover | absURL }}" class="post-cover" alt="{{ .Title | plainify | default " " }}" />
+
-        {{ end }}
       
         <div class="post-content">
           {{ if .Params.showFullContent }}
-          {{ .Content | markdownify }}
+            {{ .Content }}
           {{ else if .Description }}
             {{ .Description | markdownify }}
           {{ else }}
-          {{ if .Truncated }}
+            {{ .Summary }}
-          {{ .Summary | markdownify }}
-          {{ end }}
           {{ end }}
         </div>
 
@@ -51,7 +50,7 @@
             href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
         </div>
         {{ end }}
-      </div>
+      </article>
     {{ end }}
     {{ partial "pagination.html" . }}
   </div>

layouts/_default/rss.xml

@@ -0,0 +1,40 @@
+{{- $pctx := . -}}
+{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
+{{- $pages := slice -}}
+{{- if or $.IsHome $.IsSection -}}
+{{- $pages = $pctx.RegularPages -}}
+{{- else -}}
+{{- $pages = $pctx.Pages -}}
+{{- end -}}
+{{- $limit := .Site.Config.Services.RSS.Limit -}}
+{{- if ge $limit 1 -}}
+{{- $pages = $pages | first $limit -}}
+{{- end -}}
+{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
+    <link>{{ .Permalink }}</link>
+    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
+    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
+    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
+    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
+    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+    {{- with .OutputFormats.Get "RSS" -}}
+    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+    {{- end -}}
+    {{ range $pages }}
+    <item>
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+      <guid>{{ .Permalink }}</guid>
+      <description>{{ .Summary | html }}</description>
+      <content>{{ .Content | html }}</content>
+    </item>
+    {{ end }}
+  </channel>
+</rss>

layouts/_default/single.html

@@ -1,16 +1,22 @@
 {{ define "main" }}
-<div class="post">
+<article class="post">
   <h1 class="post-title">
     <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
   <div class="post-meta">
     {{ if .Params.Date }}
       <span class="post-date">
-        {{ .Date.Format "2006-01-02" }} {{ if $.Site.Params.showLastUpdated }}[{{or $.Site.Params.updatedDatePrefix "Updated"}}: {{ .Lastmod.Format "2006-01-02" }}]{{ end }}
+        <time>{{ .Date.Format "2006-01-02" }}</time>
+        {{ if $.Site.Params.showLastUpdated }}
+          [{{or $.Site.Params.updatedDatePrefix "Updated"}}: <time>{{ .Lastmod.Format "2006-01-02" }}</time>]
+        {{ end }}
       </span>
     {{ end }}
     {{ with .Params.Author }}
       <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>
+    {{ end }}
   </div>
 
   {{ if .Params.tags }}
@@ -20,21 +26,12 @@
     {{ end }}
   </span>
   {{ end }}
+  {{ partial "cover.html" . }}
 
-  {{ if .Params.Cover }}
+  {{ if (.Params.Toc | default .Site.Params.Toc) }}
-    <img src="{{ .Params.Cover | absURL }}" class="post-cover" alt="{{ .Title | plainify | default " " }}" />
-  {{ end }}
-
-  {{ if .Params.Toc }}
     <div class="table-of-contents">
       <h2>
-        {{ if .Params.TocTitle }}
+        {{ (.Params.TocTitle | default .Site.Params.TocTitle) | default "Table of Contents" }}
-          {{ .Params.TocTitle }}
-        {{ else if $.Site.Params.TocTitle }}
-          {{ $.Site.Params.TocTitle }}
-        {{ else }}
-          Table of Contents
-        {{ end }}
       </h2>
       {{ .TableOfContents }}
     </div>
@@ -43,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>
@@ -52,6 +49,8 @@
   {{ partial "posts_pagination.html" . }}
   {{ end }}
 
+  {{ if not (.Params.hideComments | default false) }}
   {{ partial "comments.html" . }}
-</div>
+  {{ end }}
+</article>
 {{ end }}

layouts/partials/cover.html

@@ -0,0 +1,24 @@
+{{- $cover := false -}}
+{{- $autoCover := default $.Site.Params.autoCover false }}
+
+{{- if index .Params "cover" -}}
+  {{- if .Resources.GetMatch .Params.Cover }}
+    {{- $cover = (.Resources.GetMatch .Params.Cover).RelPermalink -}}
+  {{- else -}}
+    {{- $cover = absURL .Params.Cover -}}
+  {{- end -}}
+{{- else if $.Site.Params.AutoCover -}}
+  {{- if (not .Params.Cover) -}}
+    {{- if .Resources.GetMatch "cover.*" -}}
+      {{- $cover = (.Resources.GetMatch "cover.*").RelPermalink -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
+
+{{if $cover -}}
+  <!-- Cover image found -->
+  <img src="{{ $cover }}"
+    class="post-cover"
+    alt="{{ .Title | plainify | default " " }}"
+    title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" />
+{{- end }}

layouts/partials/footer.html

@@ -3,22 +3,21 @@
     {{ 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>
 </footer>
 
-{{ $js := resources.Get "js/main.js" | js.Build }}
+<script src="{{ "assets/main.js" | absURL }}"></script>
-{{ $js := resources.Get "js/prism.js" | js.Build }}
+<script src="{{ "assets/prism.js" | absURL }}"></script>
-{{ $opts := dict "noComments" true "minified" true "compact" true }}
+
-{{ $menu := resources.Get "js/menu.js" | js.Build | babel $opts }}
+{{ if $.Site.Params.showLanguageSelector }}
-{{ $prism := resources.Get "js/prism.js" | js.Build | babel $opts }}
+  <script src="{{ "assets/languageSelector.js" | absURL }}"></script>
-<script src="{{ $menu.Permalink }}"></script>
+{{ end }}
-<script src="{{ $prism.Permalink }}"></script>
 
 <!-- Extended footer section-->
 {{ partial "extended_footer.html" . }}

layouts/partials/head.html

@@ -1,6 +1,6 @@
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="description" content="{{ if .IsHome }}{{ .Site.Params.Subtitle }}{{ else }}{{ .Summary | plainify }}{{ end }}" />
+<meta name="description" content="{{ if .IsHome }}{{ $.Site.Params.Subtitle }}{{ else if .Description}}{{ .Description | plainify }}{{ else }}{{ .Summary | plainify }}{{ end }}" />
 <meta name="keywords" content="{{ with .Params.Keywords }}{{ delimit . ", " }}{{ else }}{{ $.Site.Params.Keywords }}{{ end }}" />
 <meta name="robots" content="noodp" />
 <link rel="canonical" href="{{ .Permalink }}" />
@@ -8,15 +8,11 @@
 {{ template "_internal/google_analytics.html" . }}
 
 <!-- Theme CSS -->
-{{ $css := resources.Get "css/style.css" }}
+<link rel="stylesheet" href="{{ "assets/style.css" | absURL }}">
-{{ $opts := dict "inlineImports" true }}
+{{ if (isset .Params "color") }}
-{{ $style := $css | resources.PostCSS $opts | minify }}
+  <link rel="stylesheet" href="{{ (printf "assets/%s.css" .Params.color) | absURL }}">
-<link rel="stylesheet" href="{{ $style.Permalink }}">
+{{ 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 }}">
-{{ if (or (isset .Params "color") (ne $.Site.Params.ThemeColor "orange")) }}
-  {{ $colorCss := resources.Get (printf "css/color/%s.css" (or .Params.color $.Site.Params.ThemeColor)) }}
-  {{ $color := $colorCss | resources.PostCSS $opts | minify }}
-  <link rel="stylesheet" href="{{ $color.Permalink }}">
 {{ end }}
 
 <!-- Custom CSS to override theme properties (/static/style.css) -->
@@ -25,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 }}

layouts/partials/header.html

@@ -3,7 +3,9 @@
     <div class="header__logo">
       {{ partial "logo.html" . }}
     </div>
+    {{ if len $.Site.Menus }}
       <div class="menu-trigger">menu</div>
+    {{ end }}
   </div>
   {{ if len $.Site.Menus }}
     {{ partial "menu.html" . }}

layouts/partials/menu.html

@@ -3,7 +3,7 @@
     {{ 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,12 +22,12 @@
     {{ 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 }}
 
-    {{ if $.Site.Params.showLanguageSelector }}
+    {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
     <div class="spacer"></div>
     <ul class="language-selector">
       <ul class="language-selector-current">
@@ -45,10 +45,10 @@
   <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 $.Site.Params.showLanguageSelector }}
+    {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
     <hr />
       {{ range $.Site.Home.AllTranslations }}
         <li>

layouts/partials/pagination.html

@@ -4,14 +4,14 @@
       <span class="button previous">
         <a href="{{ .Paginator.Prev.URL }}">
           <span class="button__icon">←</span>
-          <span class="button__text">Newer posts</span>
+          <span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>
         </a>
       </span>
     {{ end }}
     {{ if .Paginator.HasNext }}
       <span class="button next">
         <a href="{{ .Paginator.Next.URL }}">
-          <span class="button__text">Older posts</span>
+          <span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>
           <span class="button__icon">→</span>
         </a>
       </span>

layouts/shortcodes/figure.html

@@ -2,7 +2,7 @@
   <figure class="{{ with .Get "position"}}{{ . }}{{ else -}} left {{- end }}" >
     <img src="{{ .Get "src" | safeURL }}" {{ with .Get "alt" }} alt="{{ . | plainify }}" {{ end }} {{ with .Get "style" }} style="{{ . | safeCSS }}" {{ end }} />
     {{ if .Get "caption" }}
-      <figcaption class="{{ with .Get "captionPosition"}}{{ . }}{{ else -}} center {{- end }}" {{ with .Get "captionStyle" }} style="{{ . | safeCSS }}" {{ end }}>{{ .Get "caption" }}</figcaption>
+      <figcaption class="{{ with .Get "captionPosition"}}{{ . }}{{ else -}} center {{- end }}" {{ with .Get "captionStyle" }} style="{{ . | safeCSS }}" {{ end }}>{{ .Get "caption" | safeHTML }}</figcaption>
     {{ end }}
   </figure>
 {{ end }}

layouts/shortcodes/prismjs.html

@@ -1,4 +1,4 @@
-{{ $inner := replaceRE "^\n" "" .Inner | string }}
+{{ $inner := replaceRE "^\r?\n" "" .Inner | string }}
 {{ if len .Params | eq 0 }}
   <pre><code>{{ $inner }}</code></pre>
 {{ else }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminal",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
   "license": "MIT",
@@ -9,29 +9,52 @@
     ">1%",
     "not dead"
   ],
+  "scripts": {
+    "dev": "webpack --mode=development --watch",
+    "build": "webpack --mode=production"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
+    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.10.5",
+    "@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",
-    "babel-eslint": "^8.2.1",
+    "angular-html-parser": "^1.2.0",
-    "browserslist": "^4.0.1",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.5",
+    "browserslist": "^4.16.5",
+    "clean-webpack-plugin": "^3.0.0",
     "clipboard": "^2.0.4",
-    "cssnano": "^4.1.8",
+    "css-loader": "^5.1.3",
-    "eslint-config-prettier": "^2.10.0",
+    "cssnano": "^5.0.8",
-    "postcss": "^7.0.0",
+    "eslint-config-airbnb": "^18.2.0",
-    "postcss-browser-reporter": "^0.5.0",
+    "eslint-config-prettier": "^8.1.0",
-    "postcss-cli": "^7.1.1",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "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": "^12.0.1",
+    "postcss-import": "^14.0.0",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^5.2.0",
-    "postcss-mixins": "^6.2.3",
+    "postcss-mixins": "^7.0.3",
-    "postcss-nested": "^4.2.3",
+    "postcss-nested": "^5.0.5",
     "postcss-preset-env": "^6.7.0",
-    "postcss-reporter": "^6.0.1",
+    "postcss-reporter": "^7.0.2",
-    "postcss-url": "^8.0.0",
+    "postcss-url": "^10.1.3",
-    "prettier-eslint-cli": "^4.7.1"
+    "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"
+  },
+  "dependencies": {
+    "yarn": "^1.22.10"
   }
 }

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"]()})();

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,33 +1,28 @@
-const Webpack = require("webpack");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CleanPlugin = require("clean-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 
 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": [
+    main: join("assets", "js", "menu.js"),
-      join("source", "js", "main.js"),
+    languageSelector: join("assets", "js", "languageSelector.js"),
-      join("source", "js", "menu.js"),
+    prism: join("assets", "js", "prism.js"),
-      join("source", "js", "languageSelector.js")
+    style: join("assets", "css", "style.css"),
-    ],
+    red: join("assets", "css", "color", "red.css"),
-    "prism.js": join("source", "js", "prism.js"),
+    blue: join("assets", "css", "color", "blue.css"),
-    "style.css": join("source", "css", "style.css"),
+    green: join("assets", "css", "color", "green.css"),
-    "red.css": join("source", "css", "color", "red.css"),
+    pink: join("assets", "css", "color", "pink.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"),
   },
   output: {
-    filename: "[name]",
+    filename: "[name].js",
     path: join("static/assets"),
     publicPath: "",
   },
@@ -59,28 +54,20 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: "style-loader",
         use: [
+          MiniCssExtractPlugin.loader,
           {
             loader: "css-loader",
             options: {
-                minimize: true,
+              modules: {
-                modules: true,
-                importLoaders: 1,
                 localIdentName: "[local]",
               },
-            },
+              import: true,
-            {
+              importLoaders: 1,
-              loader: "postcss-loader",
-              options: {
-                config: {
-                  path: "postcss.config.js",
-                },
             },
           },
+          "postcss-loader",
         ],
-        }),
       },
     ],
   },
@@ -89,11 +76,29 @@ module.exports = {
       name: "vendor",
       minChunks: 2,
     },
+    minimize: true,
     minimizer: [
-      new UglifyJsPlugin({
+      new TerserPlugin({
-        sourceMap: true,
+        parallel: true,
+        extractComments: false,
       }),
     ],
   },
-  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",
+    }),
+  ],
+});