Merge pull request #408 from QuLogic/min-version

Add required version to config

.eslintrc.yml

@@ -18,7 +18,7 @@ rules:
     - as-needed
   semi:
     - 2
-    - never
+    - always
   class-methods-use-this: 0
   comma-dangle:
     - 2
@@ -33,7 +33,7 @@ rules:
   func-names: 0
   quotes:
     - 2
-    - single
+    - double
     - allowTemplateLiterals: true
   no-underscore-dangle: 0
   object-curly-newline: 0

.prettierrc

@@ -2,6 +2,7 @@
   "parser": "babel",
   "printWidth": 100,
   "trailingComma": "all",
+  "arrowParens": "avoid",
   "overrides": [{
     "files": ".html",
     "options": {

.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier-scss"
+  ],
+  "rules": {
+    "max-empty-lines": 1 
+  }
+}
+

README.md

@@ -3,6 +3,7 @@
 ![Terminal](https://github.com/panr/hugo-theme-terminal/blob/master/images/screenshot.png?raw=true)
 
 ### DEMO - https://hugo-terminal.now.sh/
+### ⚠️ The theme needs at least Hugo **Extended** v0.90.x.
 
 ---
 
@@ -14,7 +15,7 @@
 - [How to configure](#how-to-configure)
 - [Post archetype](#post-archetype)
 - [Add-ons](#add-ons)
-- [How to (safely) edit the theme](#how-to-edit)
+- [How to edit the theme](#how-to-edit)
 - [Found a bug?](#bug)
 - [New cool idea or feature](#feature)
 - [Terminal theme user?](#terminal-theme-user)
@@ -82,11 +83,23 @@ 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.
 
+You can also choose **one of the 3 possibilities** to install the theme:
+
+1. as Hugo Module
+2. as a standalone local directory
+3. as a git submodule
+
+⚠️ The theme needs at least Hugo **Extended** v0.90.x.
+
 ### Install theme as Hugo Module
 
 ```bash
-hugo mod init github.com/panr/hugo-theme-terminal
-hugo mod get github.com/panr/hugo-theme-terminal
+# If this is the first time you're using Hugo Modules
+# in your project. You have to initiate your own module before
+# you fetch the theme module.
+#
+# hugo mod init [your website/module name]
+hugo mod get github.com/panr/hugo-theme-terminal/v3
 ```
 
 and in your config file add:
@@ -96,14 +109,7 @@ and in your config file add:
   # 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'
-```
-
-and also remove reference to the theme (since Hugo Module don't need it):
-
-```toml
-# REMOVE OR COMMENT THIS LINE
-theme = "terminal"
+  path = 'github.com/panr/hugo-theme-terminal/v3'
 ```
 
 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/).
@@ -124,12 +130,16 @@ git submodule add -f https://github.com/panr/hugo-theme-terminal.git themes/term
 
 This will install the repository as a sumbodule in the `themes/terminal` directory.
 
-⚠️ **The theme needs at least Hugo version 0.90.x**.
+⚠️ If you encounter any issues with:
+
+```bash
+Error: module "terminal" not found; either add it as a Hugo Module or store it in "[...your custom path]/themes".: module does not exist
+```
+
+then please try to remove `theme = "terminal"` from your config file.
 
 ## How to run your site
 
-If you installed all needed `npm` dependencies, then you can run:
-
 ```bash
 hugo server -t terminal
 ```
@@ -143,6 +153,8 @@ The theme doesn't require any advanced configuration. Just copy:
 ```toml
 baseurl = "/"
 languageCode = "en-us"
+# Add it only if you keep the theme in the `themes` directory.
+# Remove it if you use the theme as a remote Hugo Module.
 theme = "terminal"
 paginate = 5
 

USERS.md

@@ -33,6 +33,7 @@
 - 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://erisianrite.com/ **ErisianRite** (Coding, Engineering, Tools for Thought)
 - https://dongzhi.me **Joe** (Software Developer)
 - https://isaes.com.tr/ **Isa Es** (Software Engineer)
 - https://conight.com **Conight Wang** (Software Engineer)

assets/css/buttons.scss

@@ -15,9 +15,10 @@ a.button {
   margin-bottom: 5px;
   text-decoration: none;
   text-align: center;
-  border-radius: 0;
+  border-radius: 8;
   border: 1px solid $accent;
   background: $accent;
+  color: $background;
   font: inherit;
   font-weight: bold;
   appearance: none;
@@ -25,7 +26,7 @@ a.button {
   outline: none;
 
   &:hover {
-    background: opacify($accent, .9);
+    background: transparentize($accent, .1);
   }
 
   /* variants */

assets/css/font.scss

@@ -4,7 +4,6 @@
   font-style:  normal;
   font-weight: 400;
   src: url("../fonts/FiraCode-Regular.woff") format("woff");
-  font-display: swap;
 }
 
 @font-face {
@@ -13,5 +12,4 @@
   font-style:  normal;
   font-weight: 800;
   src: url("../fonts/FiraCode-Bold.woff") format("woff");
-  font-display: swap;
 }

assets/css/footer.scss

@@ -22,9 +22,11 @@
 
   .copyright {
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
+    flex: 1;
     align-items: center;
     font-size: 1rem;
+    justify-content: center;
 
     &--user {
       margin: auto;
@@ -33,17 +35,10 @@
 
     & > *:first-child:not(:only-child) {
       margin-right: 10px;
-
-       @media ($tablet) {
-        border: none;
-        padding: 0;
-        margin: 0;
-      }
     }
 
-    @media ($tablet) {
-      flex-direction: column;
-      margin-top: 10px;
+    span {
+      white-space: nowrap;
     }
   }
 }

assets/css/form.scss

@@ -26,5 +26,5 @@ select {
 }
 
 ::placeholder {
-  color: color-mod($accent) a(50%);
+  color: transparentize($accent, .5);
 }

assets/css/header.scss

@@ -1,17 +1,3 @@
-@mixin menu {
-  $shadow-color: opacify($background, .8);
-  $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
-  position: absolute;
-  background: $background;
-  box-shadow: $shadow;
-  color: white;
-  border: 2px solid;
-  margin: 0;
-  padding: 10px;
-  list-style: none;
-  z-index: 99;
-}
-
 .header {
   display: flex;
   flex-direction: column;
@@ -45,128 +31,4 @@
       text-decoration: none;
     }
   }
-
-  .menu {
-    margin: 20px 1px;
-
-    @media ($phone) {
-      @include menu;
-      top: 50px;
-      right: 0;
-
-      &.hidden-on-mobile {
-        display: none;
-      }
-    }
-
-    &__inner {
-      display: flex;
-      flex-wrap: wrap;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      &--desktop {
-        @media ($phone) {
-          display: none;
-        }
-      }
-
-      &--mobile {
-        display: none;
-
-        @media ($phone) {
-          display: block;
-        }
-      }
-
-      li {
-        &:not(:last-of-type) {
-          margin-right: 20px;
-          margin-bottom: 10px;
-          flex: 0 0 auto;
-        }
-      }
-
-      @media ($phone) {
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 0;
-
-        li {
-          margin: 0;
-          padding: 5px;
-        }
-      }
-    }
-
-    &__sub-inner {
-      position: relative;
-      list-style: none;
-      padding: 0;
-      margin: 0;
-
-      &:not(:only-child) {
-        margin-left: 20px;
-      }
-
-      &-more {
-        @include menu;
-        top: 35px;
-        left: 0;
-
-        &-trigger {
-          color: $accent;
-          user-select: none;
-          cursor: pointer;
-        }
-
-        li {
-          margin: 0;
-          padding: 5px;
-          white-space: nowrap;
-        }
-      }
-    }
-
-    .spacer {
-      flex-grow: 1;
-    }
-
-    .language-selector {
-      position: relative;
-      list-style: none;
-      margin: 0;
-
-      &-current {
-        list-style-type: none;
-        display: flex;
-        flex-direction: row;
-        color: $accent;
-        cursor: pointer;
-        margin: 0;
-      }
-
-      &__more {
-        @include menu;
-        top: 35px;
-        right: 0;
-      }
-    }
-
-    &-trigger {
-      display: none;
-      color: $accent;
-      border: 2px solid;
-      margin-left: 10px;
-      height: 100%;
-      padding: 3px 8px;
-      position: relative;
-      cursor: pointer;
-
-      @media ($phone) {
-        display: block;
-      }
-    }
-  }
 }

assets/css/main.scss

@@ -130,7 +130,7 @@ figure {
 code, kbd {
   font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
   font-feature-settings: normal;
-  background: color-mod($accent) a(20%);
+  background: transparentize($accent, .8);
   color: $accent;
   padding: 1px 6px;
   margin: 0 2px;
@@ -203,7 +203,7 @@ blockquote {
 
   &.twitter-tweet {
     position: relative;
-    background: color-mod($accent) a(10%);
+    background: transparentize($accent, .9);
     font: inherit;
     color: inherit;
     border: 1px solid $accent;

assets/css/menu.scss

@@ -0,0 +1,157 @@
+@mixin menu {
+  display: none;
+  flex-direction: column;
+  $shadow-color: transparentize($background, .2);
+  $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
+  position: absolute;
+  background: $background;
+  box-shadow: $shadow;
+  color: white;
+  border: 2px solid;
+  margin: 0;
+  padding: 10px;
+  top: 10px;
+  left: 0;
+  list-style: none;
+  z-index: 99;
+}
+
+@mixin header-menu-trigger {
+  color: $accent;
+  border: 2px solid;
+  margin-left: 10px;
+  height: 100%;
+  padding: 3px 8px;
+  margin-bottom: 0 !important;
+  position: relative;
+  cursor: pointer;
+}
+
+.navigation-menu {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin: 20px 1px;
+
+  @media ($phone) {
+    margin: 0;
+  }
+
+  &__inner {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      flex: 0 0 auto;
+      margin-bottom: 10px;
+      white-space: nowrap;
+
+      &:not(:last-of-type) {
+        margin-right: 20px;
+      }
+    }
+
+    @media ($phone) {
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 0;
+
+      li {
+        margin: 0;
+        padding: 5px;
+      }
+    }
+  }
+
+  .spacer {
+    flex-grow: 1 !important;
+  }
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  &__trigger {
+    margin-right: 0 !important;
+    color: $accent;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  &__dropdown {
+    @include menu;
+
+    .open & {
+      display: flex;
+    }
+
+    > li {
+      flex: 0 0 auto;
+
+      &:not(:last-of-type) {
+        margin-bottom: 10px;
+      }
+
+      a {
+        display: flex;
+        padding: 5px;
+      }
+    }
+  }
+
+  &--desktop {
+    @media ($phone) {
+      display: none
+    }
+  }
+
+  &--mobile {
+    .menu__trigger {
+      @include header-menu-trigger;
+      display: none;
+
+      @media ($phone) {
+        display: block;
+      }
+    }
+
+    .menu__dropdown {
+      @media ($phone) {
+        left: auto;
+        right: 0;
+      }
+    }
+
+    li {
+      flex: 0 0 auto;
+
+      &:not(:last-of-type) {
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  &--language-selector {
+    .menu__trigger {
+      @include header-menu-trigger;
+
+      @media ($phone) {
+        display: none;
+      }
+    }
+
+    .menu__dropdown {
+      left: auto;
+      right: 0;
+    }
+  }
+}

assets/css/pagination.scss

@@ -15,7 +15,8 @@
       text-align: center;
       margin: 0 auto;
       padding: 5px 10px;
-      background: mix($accent, #1D1E28, 98%);
+      background: $background;
+      color: transparentize($color, .7);
       font-size: .8rem;
       text-transform: uppercase;
       text-decoration: none;
@@ -37,6 +38,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-flow: row wrap;
+    gap: 10px;
 
     a {
       text-decoration: none;
@@ -47,22 +50,20 @@
 .button {
   position: relative;
   display: inline-flex;
-  flex: 1;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
-  border-radius: 8px;
   padding: 0;
-  cursor: pointer;
   appearance: none;
-  overflow: hidden;
 
-  + .button {
-    margin-left: 10px;
+  @media($phone) {
+    flex: 1;
   }
 
   a {
     display: flex;
+    justify-content: center;
+    flex: 1;
     padding: 8px 16px;
     text-decoration: none;
     text-overflow: ellipsis;

assets/css/post.scss

@@ -32,7 +32,7 @@
   &-meta {
     font-size: 1rem;
     margin-bottom: 10px;
-    color: opcift($accent, 70%);
+    color: transparentize($accent, .3);
   }
 
   &-title {
@@ -113,7 +113,7 @@
 }
 
 .hanchor {
-  color: opacify($accent, .9);
+  color: transparentize($accent, .1);
   text-decoration: none;
   margin-left: 10px;
   visibility: hidden;
@@ -124,5 +124,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 }
 
 .footnotes {
-  color: opacify($color, .5);
+  color: transparentize($color, .5);
 }

assets/css/style.scss

@@ -5,6 +5,7 @@
 @import "form";
 
 @import "header";
+@import "menu";
 @import "logo";
 @import "main";
 @import "post";

assets/css/syntax.scss

@@ -34,7 +34,7 @@ code.language-scss,
 .token.class-name,
 .token.constant,
 .token.symbol {
-  color: opacify($accent, .7) !important;
+  color: transparentize($accent, .3) !important;
 }
 
 .token.property,
@@ -80,7 +80,7 @@ pre[class*="language-"] {
   right: 0;
   padding: 0;
   margin: 0;
-  background: opacify(mix($accent, #999, 90%), .08);
+  background: transparentize(mix($accent, #999, 90%), .92);
   pointer-events: none;
   line-height: inherit;
   white-space: pre;

assets/css/variables.scss

@@ -4,8 +4,8 @@ $color: white;
 $border-color: rgba(255, 255, 255, .1);
 
 /* MEDIA QUERIES */
-$phone: (max-width: 684px);
-$tablet: (max-width: 900px);
+$phone: "max-width: 684px";
+$tablet: "max-width: 900px";
 
 /* variables for js, must be the same as these in @custom-media queries */
 :root {

assets/js/languageSelector.js

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

assets/js/menu.js

@@ -1,49 +1,44 @@
 const container = document.querySelector(".container");
-const menu = document.querySelector(".menu");
-const mobileMenuTrigger = document.querySelector(".menu-trigger");
-const desktopMenu = document.querySelector(".menu__inner--desktop");
-const desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger");
-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());
-};
-
-// Common
-
-menu && menu.addEventListener("click", (e) => e.stopPropagation());
-menuMore && menuMore.addEventListener("click", (e) => e.stopPropagation());
-
-// handleMenuClasses();
+const allMenus = document.querySelectorAll(".menu");
 
+// Hide menus on body click
 document.body.addEventListener("click", () => {
-  if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {
-    menuMore.classList.add("hidden");
-  } else if (isMobile() && !menu.classList.contains("hidden")) {
-    menu.classList.add("hidden");
-  }
-});
-
-window.addEventListener("resize", handleMenuClasses);
-
-// Mobile menu
-
-mobileMenuTrigger &&
-  mobileMenuTrigger.addEventListener("click", (e) => {
-    e.stopPropagation();
-    menu && menu.classList.toggle("hidden-on-mobile");
-  });
-
-// Desktop menu
-
-desktopMenuTrigger &&
-  desktopMenuTrigger.addEventListener("click", (e) => {
-    e.stopPropagation();
-    menuMore && menuMore.classList.toggle("hidden");
-
-    if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {
-      menuMore.style.left = "auto";
-      menuMore.style.right = 0;
+  allMenus.forEach(menu => {
+    if (menu.classList.contains("open")) {
+      menu.classList.remove("open");
     }
   });
+});
+
+// Reset menus on resize
+window.addEventListener("resize", () => {
+  allMenus.forEach(menu => {
+    menu.classList.remove("open");
+  });
+});
+
+// Handle desktop menu
+allMenus.forEach(menu => {
+  const trigger = menu.querySelector(".menu__trigger");
+  const dropdown = menu.querySelector(".menu__dropdown");
+
+  trigger.addEventListener("click", e => {
+    e.stopPropagation();
+
+    if (menu.classList.contains("open")) {
+      menu.classList.remove("open");
+    } else {
+      // Close all menus...
+      allMenus.forEach(m => m.classList.remove("open"));
+      // ...before opening the current one
+      menu.classList.add("open");
+    }
+
+    if (dropdown.getBoundingClientRect().right > container.getBoundingClientRect().right) {
+      dropdown.style.left = "auto";
+      dropdown.style.right = 0;
+    }
+  });
+
+  dropdown.addEventListener("click", e => e.stopPropagation());
+});

config.toml

@@ -0,0 +1,4 @@
+[module]
+  [module.hugoVersion]
+    extended = true
+    min = '0.90.0'

go.mod

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

layouts/_default/index.html

@@ -21,13 +21,13 @@
         </h1>
 
         <div class="post-meta">
-          {{ with .Date }}
+          {{ if .Date }}
             <time class="post-date">
-              {{ .Format "2006-01-02" }}
+              {{ .Date.Format "2006-01-02" }} ::
             </time>
           {{ end }}
           {{ with .Params.Author }}
-            <span class="post-author">:: {{ . }}</span>
+            <span class="post-author">{{ . }}</span>
           {{ end }}
         </div>
 

layouts/_default/list.html

@@ -11,9 +11,9 @@
           <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
         </h1>
         <div class="post-meta">
-          {{ with .Date }}
+          {{ if .Date }}
             <time class="post-date">
-              {{ .Format "2006-01-02" }} ::
+              {{ .Date.Format "2006-01-02" }} ::
             </time>
           {{ end }}
           {{ with .Params.Author }}

layouts/_default/single.html

@@ -4,9 +4,9 @@
     <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
   </h1>
   <div class="post-meta">
-    {{ with .Date }}
+    {{ if .Date }}
       <time class="post-date">
-        {{ .Format "2006-01-02" }} ::
+        {{ .Date.Format "2006-01-02" }} ::
         {{ if $.Site.Params.showLastUpdated }}
           [{{or $.Site.Params.updatedDatePrefix "Updated"}} :: {{ .Lastmod.Format "2006-01-02" }}]
         {{ end }}

layouts/partials/footer.html

@@ -7,16 +7,15 @@
       <div class="copyright">
         <span>© {{ now.Year }} Powered by <a href="http://gohugo.io">Hugo</a></span>
     {{ end }}
-        <span>:: Theme made by <a href="https://twitter.com/panr">panr</a></span>
+      <span>:: <a href="https://github.com/panr/hugo-theme-terminal" target="_blank">Theme</a> made by <a href="https://github.com/panr" target="_blank">panr</a></span>
       </div>
   </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 }}
 
-{{ $bundle := slice $menu $languageSelector $prism | resources.Concat "bundle.js" | resources.Minify }}
+{{ $bundle := slice $menu $prism | resources.Concat "bundle.js" | resources.Minify }}
 
 <script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
 

layouts/partials/head.html

@@ -9,23 +9,23 @@
 
 {{ $defaultStyles := resources.Get "css/style.scss" }}
 <!-- Local Theme Variables -->
-{{ if (isset .Params "color") }}
+{{ if and (isset .Params "color") (not (eq .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 }}">
+  <link rel="stylesheet" href="{{ $localColorStyles.Permalink }}">
 {{ 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")) }}
+  {{ $options := (dict "targetPath" "styles.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="{{ $styles.Permalink }}">
 {{ 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 -->
@@ -52,8 +52,12 @@
 <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="{{ $.Site.Title }}" />
-{{ if and (not .IsHome) (isset .Params "cover") }}
-  <meta property="og:image" content="{{ .Param "cover" | absURL }}">
+{{ if (isset .Params "cover") }}
+  {{ $pageCover := .Param "cover" }}
+  {{ with (.Resources.GetMatch (.Param "cover")) }}
+    {{ $pageCover = .RelPermalink }}
+  {{ end }}
+  <meta property="og:image" content="{{ $pageCover | absURL }}">
 {{ else }}
   {{ if isset $.Site.Params "favicon" }}
     <meta property="og:image" content="{{ $.Site.Params.favicon | absURL }}">
@@ -61,8 +65,8 @@
     <meta property="og:image" content="{{ printf "img/favicon/%s.png" $.Site.Params.ThemeColor | absURL }}">
   {{ end }}
 {{ end }}
-<meta property="og:image:width" content="2048">
-<meta property="og:image:height" content="1024">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="627">
 {{ range .Params.categories }}
   <meta property="article:section" content="{{ . }}" />
 {{ end }}

layouts/partials/header.html

@@ -4,7 +4,10 @@
       {{ partial "logo.html" . }}
     </div>
     {{ if len $.Site.Menus }}
-      <div class="menu-trigger">menu</div>
+      {{ partial "mobile-menu.html" . }}
+    {{ end }}
+    {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
+      {{ partial "language-menu.html" . }}
     {{ end }}
   </div>
   {{ if len $.Site.Menus }}

layouts/partials/language-menu.html

@@ -0,0 +1,10 @@
+<ul class="menu menu--desktop menu--language-selector">
+  <li class="menu__trigger">{{ .Language.LanguageName }}&nbsp;▾</li>
+  <li>
+    <ul class="menu__dropdown">
+      {{ range $.Site.Home.AllTranslations }}
+        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+      {{ end }}
+    </ul>
+  </li>
+</ul>

layouts/partials/menu.html

@@ -1,5 +1,5 @@
-<nav class="menu hidden-on-mobile">
-  <ul class="menu__inner menu__inner--desktop">
+<nav class="navigation-menu">
+  <ul class="navigation-menu__inner menu--desktop">
     {{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
       {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
         {{ if not .HasChildren }}
@@ -7,17 +7,20 @@
         {{ end }}
       {{ end }}
       {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
-        <ul class="menu__sub-inner">
-          <li class="menu__sub-inner-more-trigger">{{ $.Site.Params.MenuMore }} ▾</li>
-
-          <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>
-              {{ end }}
-            {{ end }}
+        <li>
+          <ul class="menu">
+            <li class="menu__trigger">{{ $.Site.Params.MenuMore }}&nbsp;▾</li>
+            <li>
+              <ul class="menu__dropdown">
+                {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
+                  {{ if not .HasChildren }}
+                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+                  {{ end }}
+                {{ end }}
+              </ul>
+            </li>
           </ul>
-        </ul>
+        </li>
       {{ end }}
     {{ else }}
       {{ range $.Site.Menus.main }}
@@ -26,35 +29,5 @@
         {{ end }}
       {{ end }}
     {{ end }}
-
-    {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
-    <div class="spacer"></div>
-    <ul class="language-selector">
-      <ul class="language-selector-current">
-          <li>{{ .Language.LanguageName }} ▾</li>
-      </ul>
-      <ul class="language-selector__more hidden">
-        {{ range $.Site.Home.AllTranslations }}
-        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
-        {{ end }}
-      </ul>
-    </ul>
-    {{ end }}
-  </ul>
-
-  <ul class="menu__inner menu__inner--mobile">
-    {{ range $.Site.Menus.main }}
-      {{ if not .HasChildren }}
-        <li><a href="{{ .URL }}">{{ .Name }}</a></li>
-      {{ end }}
-    {{ end }}
-    {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
-    <hr />
-      {{ range $.Site.Home.AllTranslations }}
-        <li>
-          <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
-        </li>
-      {{ end }}
-    {{ end }}
   </ul>
 </nav>

layouts/partials/mobile-menu.html

@@ -0,0 +1,20 @@
+<ul class="menu menu--mobile">
+  <li class="menu__trigger">Menu&nbsp;▾</li>
+  <li>
+    <ul class="menu__dropdown">
+      {{ range $.Site.Menus.main }}
+        {{ if not .HasChildren }}
+          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+        {{ end }}
+      {{ end }}
+      {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
+        <hr />
+        {{ range $.Site.Home.AllTranslations }}
+          <li>
+            <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+          </li>
+        {{ end }}
+      {{ end }}
+    </ul>
+  </li>
+</ul>

layouts/partials/pagination.html

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

layouts/shortcodes/prismjs.html

@@ -20,6 +20,7 @@
       >{{ $inner }}</code></pre>
   {{ else }}
     <pre class="language-{{ .Get 0 }}">
-      <code class="language-{{ .Get 0 }}">{{ $inner }}</code></pre>
+      <code class="language-{{ .Get 0 }}">{{ $inner }}</code>
+    </pre>
   {{ end }}
 {{ end }}

package.json

@@ -1,5 +1,12 @@
 {
+  "name": "terminal",
+  "version": "3.1.0",
   "author": "Radosław Kozieł <@panr> <radoslaw.koziel@gmail.com>",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "test": "echo 'Test'"
+  },
   "browserslist": [
     "last 2 versions",
     ">1%",
@@ -24,16 +31,13 @@
   "devDependencies": {
     "browserslist": "^4.16.5",
     "clipboard": "^2.0.4",
+    "eslint": "^7.32.0",
     "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"
+    "husky": "^5.1.3",
+    "stylelint": "^14.14.1",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^6.1.0"
+  }
 }

postcss.config.js

@@ -1,21 +0,0 @@
-const url = require("postcss-url");
-const imports = require("postcss-import");
-const nested = require("postcss-nested");
-const postcssCustomMedia = require("postcss-custom-media");
-const cssnano = require("cssnano");
-const color = require("postcss-color-mod-function");
-const mixins = require("postcss-mixins");
-
-module.exports = () => ({
-  plugins: [
-    url,
-    imports,
-    mixins,
-    nested,
-    postcssCustomMedia,
-    cssnano({
-      preset: "default",
-    }),
-    color,
-  ],
-});

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.74
+min_version = 0.90
 
 [author]
   name = "panr"