New version of hello-friend-ng-clone

resources/_gen/assets/scss/scss/main.scss_de1a7f5f1c8c46959803c429bb697ff0.json

@@ -1 +1 @@
-{"Target":"main.d1ea4af8fd04fb24a4f8b882ea54bd04eb245427ca4baf527c81a5dab071410b.css","MediaType":"text/css","Data":{"Integrity":"sha256-0epK+P0E+ySk+LiC6lS9BOskVCfKS69SfIGl2rBxQQs="}}
+{"Target":"main.031a8efc33f94f55a4071bf4e91596478a5809fc8c148fab113801189cfd2152.css","MediaType":"text/css","Data":{"Integrity":"sha256-AxqO/DP5T1WkBxv06RWWR4pYCfyMFI+rETgBGJz9IVI="}}

themes/hello-friend-ng-clone/README.md

@@ -1,12 +1,13 @@
 # Hello Friend NG
 
-![Hello Friend NG](https://dsh.re/2bd45)
+![Hello Friend NG](https://dsh.re/d914c)
 
 ## General informations
 
-This theme was highly inspired by the [hello-friend](https://github.com/panr/hugo-theme-hello-friend) and [hermit](https://github.com/Track3/hermit). A lot of kudos for theier great work.
+This theme was highly inspired by the [hello-friend](https://github.com/panr/hugo-theme-hello-friend) and [hermit](https://github.com/Track3/hermit). A lot of kudos for their great work.
 
 ---
+
 ## Table of Contents
 
 - [Features](#features)
@@ -17,6 +18,7 @@ This theme was highly inspired by the [hello-friend](https://github.com/panr/hug
     - [image](#image)
   - [Code highlighting](#code-highlighting)
   - [Favicon](#favicon)
+  - [Audio Support](#audio-support)
 - [Social Icons](#social-icons)
 - [Known issues](#known-issues)
 - [How to edit the theme](#how-to-edit-the-theme)
@@ -25,16 +27,18 @@ This theme was highly inspired by the [hello-friend](https://github.com/panr/hug
 - [Licence](#licence)
 
 ---
+
 ## Features
 
-- Theming: **dark/light mode**, depending on your preferences (dark is default, but you can change it)
+- Theming: **dark/light mode**, depending on your system preferences or the users choice
 - Great reading experience thanks to [**Inter UI font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/)
 - Nice code highlighting thanks to [**PrismJS**](https://prismjs.com)
 - An easy way to modify the theme with Hugo tooling
 - Fully responsive
+- Audio support for posts (thanks to [@talbotp](https://github.com/talbotp))
 - Support for social icons
 - Support for sharing buttons
-
+- Support for [Commento](https://commento.io)
 
 ## How to start
 
@@ -69,7 +73,7 @@ paginate     = 10
   dateform        = "Jan 2, 2006"
   dateformShort   = "Jan 2"
   dateformNum     = "2006-01-02"
-  dateformNumTime = "2006-01-02 15:04 -0700"
+  dateformNumTime = "2006-01-02 15:04"
 
   # Subtitle for home
   homeSubtitle = "A simple and beautiful blog"
@@ -77,7 +81,7 @@ paginate     = 10
   # Set disableReadOtherPosts to true in order to hide the links to other posts.
   disableReadOtherPosts = false
 
-  # Enable sharing buttons, if you linke
+  # Enable sharing buttons, if you like
   enableSharingButtons = true
 
   # Metadata mostly used in document's head
@@ -85,9 +89,6 @@ paginate     = 10
   keywords = "homepage, blog"
   images = [""]
 
-  # Default theme "light" or "dark"
-  defaultTheme = "dark"
-
 [taxonomies]
     category = "blog"
     tag      = "tags"
@@ -139,8 +140,6 @@ Example:
 
 ### Code highlighting
 
-Supported languages: [Take a look here](https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+c+arff+asciidoc+asm6502+csharp+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+cpp+aspnet+arduino+cil+coffeescript+clojure+ruby+csp+css-extras+d+dart+diff+markup-templating+docker+eiffel+elixir+elm+lua+erb+erlang+fsharp+flow+fortran+gcode+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+less+handlebars+haskell+haxe+hcl+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+scala+php+javastacktrace+jolie+n4js+markdown+json+julia+keyman+kotlin+latex+crystal+scheme+liquid+lisp+livescript+lolcode+makefile+django+matlab+mel+mizar+monkey+n1ql+typescript+nand2tetris-hdl+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php-extras+sql+powershell+processing+prolog+properties+protobuf+scss+puppet+pure+python+q+qore+r+jsx+renpy+reason+vala+rest+rip+roboconf+textile+rust+plsql+sass+stylus+smalltalk+smarty+soy+sas+twig+swift+yaml+tcl+haml+toml+tt2+pug+tsx+visual-basic+vbnet+velocity+verilog+vhdl+vim+wasm+wiki+xeora+xojo+xquery+tap)
-
 By default the theme is using PrismJS to color your code syntax. All you need to do is to wrap you code like this:
 
 <pre>
@@ -153,9 +152,27 @@ By default the theme is using PrismJS to color your code syntax. All you need to
 
 Check the [docs](docs/favicons.md).
 
+### Audio Support
+
+You wrote an article and recorded it? Or do you have a special music that you would like to put on a certain article? Then you can do this now without further ado.
+
+In your article add to your front matters part:
+
+```yaml
+audio: path/to/file.mp3
+```
+
 ## Social Icons:
 
-Take a look into this [list](docs/svgs.md)
+A large variety of social icons are available and can be configured like this:
+
+```toml
+[[params.social]]
+  name = "<site>"
+  url = "<profile_URL>"
+```
+
+Take a look into this [list](docs/svgs.md) of available icon options. 
 
 If you need another one, just open an issue or create a pull request with your wished icon. :)
 
@@ -183,6 +200,6 @@ If you like my work and if you think this project is worth to support it, just <
 
 ## Licence
 
-Copyright © 2019-2020 Djordje Atlialp
+Copyright © 2019-2021 Djordje Atlialp
 
 The theme is released under the MIT License. Check the [original theme license](https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/LICENSE.md) for additional licensing information.

themes/hello-friend-ng-clone/assets/js/main.js

@@ -1 +1,51 @@
-// Some code could be here ...
+/**
+ * Theming.
+ *
+ * Supports the preferred color scheme of the operation system as well as
+ * the theme choice of the user.
+ *
+ */
+const themeToggle = document.querySelector(".theme-toggle");
+const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
+const chosenThemeIsDark = chosenTheme == "dark";
+const chosenThemeIsLight = chosenTheme == "light";
+
+// Detect the color scheme the operating system prefers.
+function detectOSColorTheme() {
+  if (chosenThemeIsDark) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else if (chosenThemeIsLight) {
+    document.documentElement.setAttribute("data-theme", "light");
+  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");
+  }
+}
+
+// Switch the theme.
+function switchTheme(e) {
+  if (chosenThemeIsDark) {
+    localStorage.setItem("theme", "light");
+  } else {
+    localStorage.setItem("theme", "dark");
+  }
+
+  detectOSColorTheme();
+  window.location.reload();
+}
+
+// Event listener
+if (themeToggle) {
+  themeToggle.addEventListener("click", switchTheme, false);
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (e) => e.matches && detectOSColorTheme());
+  window
+    .matchMedia("(prefers-color-scheme: light)")
+    .addEventListener("change", (e) => e.matches && detectOSColorTheme());
+
+  detectOSColorTheme();
+} else {
+  localStorage.removeItem("theme");
+}

themes/hello-friend-ng-clone/assets/js/theme.js

@@ -1,25 +0,0 @@
-// Toggle theme
-
-const theme = window.localStorage && window.localStorage.getItem("theme");
-const themeToggle = document.querySelector(".theme-toggle");
-const isDark = theme === "dark";
-var metaThemeColor = document.querySelector("meta[name=theme-color]");
-
-if (theme !== null) {
-  document.body.classList.toggle("dark-theme", isDark);
-  isDark
-    ? metaThemeColor.setAttribute("content", "#252627")
-    : metaThemeColor.setAttribute("content", "#fafafa");
-}
-
-themeToggle.addEventListener("click", () => {
-  document.body.classList.toggle("dark-theme");
-  window.localStorage &&
-    window.localStorage.setItem(
-      "theme",
-      document.body.classList.contains("dark-theme") ? "dark" : "light"
-    );
-  document.body.classList.contains("dark-theme")
-    ? metaThemeColor.setAttribute("content", "#252627")
-    : metaThemeColor.setAttribute("content", "#fafafa");
-});

themes/hello-friend-ng-clone/assets/scss/_404.scss

@@ -0,0 +1,9 @@
+.btn-404 svg {
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.btn-404 a {
+  margin: 0 10px;
+}

themes/hello-friend-ng-clone/assets/scss/_buttons.scss

@@ -13,7 +13,6 @@ a.button {
   justify-content: center;
   padding: 8px 18px;
   margin-bottom: 5px;
-  background: $light-background-secondary;
   text-decoration: none;
   text-align: center;
   font-weight: 500;
@@ -22,24 +21,51 @@ a.button {
   appearance: none;
   cursor: pointer;
   outline: none;
+  // Default
+  background: $light-background-header;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
-    background: $dark-background-secondary;
+    background: $dark-background-header;
     color: inherit;
   }
 
-  /* variants */
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+    color: inherit;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+  }
 
   &.outline {
     background: transparent;
-    border-color: $light-background-secondary;
     box-shadow: none;
     padding: 8px 18px;
+    // Default
+    border-color: $light-background-secondary;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       border-color: $dark-background-secondary;
       color: inherit;
     }
+  
+    @media (prefers-color-scheme: light) {
+      border-color: $light-background-secondary;
+    }
+  
+    [data-theme=dark] & {
+      border-color: $dark-background-secondary;
+      color: inherit;
+    }
+  
+    [data-theme=light] & {
+      border-color: $light-background-secondary;
+    }
 
     :hover {
       transform: none;
@@ -80,7 +106,6 @@ a.button {
     justify-content: center;
     padding: 3px 8px;
     margin-bottom: 5px;
-    background: $light-background-secondary;
     text-decoration: none;
     text-align: center;
     font-size: 13px;
@@ -90,10 +115,25 @@ a.button {
     appearance: none;
     cursor: pointer;
     outline: none;
+    // Default
+    background: $light-background-secondary;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       background: $dark-background-secondary;
       color: inherit;
     }
+  
+    @media (prefers-color-scheme: light) {
+      background: $light-background-secondary;
+    }
+  
+    [data-theme=dark] & {
+      background: $dark-background-secondary;
+      color: inherit;
+    }
+  
+    [data-theme=light] & {
+      background: $light-background-secondary;
+    }
   }
 }

themes/hello-friend-ng-clone/assets/scss/_footer.scss

@@ -39,7 +39,7 @@
     }
 
     & > *:last-child {
-      padding: 0 5px;
+      padding: 0 0px;
 
       @media #{$media-size-tablet} {
           padding: 0;

themes/hello-friend-ng-clone/assets/scss/_header.scss

@@ -1,13 +1,26 @@
 .header {
-  background: #fafafa;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   padding: 20px;
+  // Default
+  background: $light-background-header;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
-    background: #252627;
+    background: $dark-background-header;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
   }
 
   &__right {
@@ -42,7 +55,7 @@
   fill: currentColor;
 }
 
-.unselectable {
+.not-selectable {
   user-select: none;
   -webkit-user-select: none;  
   -moz-user-select: none;    

themes/hello-friend-ng-clone/assets/scss/_list.scss

@@ -10,10 +10,23 @@
   }
 
   &:not(:last-of-type) {
+    // Default
     border-bottom: 1px solid $light-border-color;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
-      border-color: $dark-border-color;
+      border-bottom: 1px solid $dark-border-color;
+    }
+  
+    @media (prefers-color-scheme: light) {
+      border-bottom: 1px solid $light-border-color;
+    }
+  
+    [data-theme=dark] & {
+      border-bottom: 1px solid $dark-border-color;
+    }
+  
+    [data-theme=light] & {
+      border-bottom: 1px solid $light-border-color;
     }
   }
 

themes/hello-friend-ng-clone/assets/scss/_main.scss

@@ -1,7 +1,7 @@
 html {
   box-sizing: border-box;
   line-height: 1.6;
-  letter-spacing: .06em;
+  letter-spacing: 0.06em;
   scroll-behavior: smooth;
 }
 
@@ -14,12 +14,11 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",  Helvetica, Arial, sans-serif;
+  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
+    "Segoe UI", Helvetica, Arial, sans-serif;
   font-display: auto;
   font-size: 1rem;
   line-height: 1.54;
-  background-color: $light-background;
-  color: $light-color;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
@@ -30,17 +29,40 @@ body {
   min-height: 100vh;
   flex-direction: column;
 
+  // Default
+  background-color: $light-background;
+  color: $light-color;
+
   @media #{$media-size-phone} {
     font-size: 1rem;
   }
 
-  &.dark-theme {
+  @media (prefers-color-scheme: dark) {
     background-color: $dark-background;
     color: $dark-color;
   }
+
+  @media (prefers-color-scheme: light) {
+    background-color: $light-background;
+    color: $light-color;
+  }
+
+  [data-theme=dark] & {
+    background-color: $dark-background;
+    color: $dark-color;
+  }
+
+  [data-theme=light] & {
+    background-color: $light-background;
+    color: $light-color;
+  }
 }
 
-h2, h3, h4, h5, h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
   display: flex;
   align-items: center;
   line-height: 1.3;
@@ -52,6 +74,7 @@ h1 {
 
 h2 {
   font-size: 1.625rem;
+  margin-top: 2.5em;
 }
 
 h3 {
@@ -150,7 +173,7 @@ figure {
   figcaption {
     font-size: 14px;
     margin-top: 5px;
-    opacity: .8;
+    opacity: 0.8;
 
     &.left {
       text-align: left;
@@ -166,26 +189,60 @@ figure {
   }
 }
 
+em, i, strong {
+  // Default
+  color: black;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (prefers-color-scheme: light) {
+    color: black;
+  }
+
+  [data-theme=dark] & {
+    color: white;
+  }
+
+  [data-theme=light] & {
+    color: black;
+  }
+}
+
 code {
-  font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
+  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
   font-display: auto;
   font-feature-settings: normal;
-  background: $light-background-secondary;
   padding: 1px 6px;
   margin: 0 2px;
   border-radius: 5px;
-  font-size: .95rem;
+  font-size: 0.95rem;
+  // Default
+  background: $light-background-secondary;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
   }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-secondary;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-secondary;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-secondary;
+  }
 }
 
 pre {
   background: #212020;
   padding: 10px 10px 10px 20px;
   border-radius: 8px;
-  font-size: .95rem;
+  font-size: 0.95rem;
   overflow: auto;
 
   @media #{$media-size-phone} {
@@ -195,19 +252,32 @@ pre {
 
   code {
     background: none !important;
-    color: #ccc;
     margin: 0;
     padding: 0;
     font-size: inherit;
+    // Default
+    color: #ccc;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       color: inherit;
     }
+  
+    @media (prefers-color-scheme: light) {
+      color: #ccc;
+    }
+  
+    [data-theme=dark] & {
+      color: inherit;
+    }
+  
+    [data-theme=light] & {
+      color: #ccc;
+    }
   }
 }
 
 blockquote {
-  border-left: 2px solid;
+  border-left: 3px solid #3eb0ef;
   margin: 40px;
   padding: 10px 20px;
 
@@ -217,7 +287,7 @@ blockquote {
   }
 
   &:before {
-    content: '”';
+    content: "”";
     font-family: Georgia, serif;
     font-display: auto;
     font-size: 3.875rem;
@@ -235,7 +305,8 @@ blockquote {
   }
 }
 
-ul, ol {
+ul,
+ol {
   margin-left: 40px;
   padding: 0;
 
@@ -272,12 +343,25 @@ ol ol {
 hr {
   width: 100%;
   border: none;
-  background: $light-border-color;
   height: 1px;
+  // Default
+  background: $light-border-color;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-border-color;
   }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-border-color;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-border-color;
+  }
+
+  [data-theme=light] & {
+    background: $light-border-color;
+  }
 }
 
 .hidden {
@@ -298,35 +382,47 @@ hr {
 
 // Accessibility
 .screen-reader-text {
-	border: 0;
+  border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
+  clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
+  clip-path: inset(50%);
-	height: 1px;
+  height: 1px;
-	margin: -1px;
+  margin: -1px;
-	overflow: hidden;
+  overflow: hidden;
-	padding: 0;
+  padding: 0;
-	position: absolute !important;
+  position: absolute !important;
-	width: 1px;
+  width: 1px;
-	word-wrap: normal !important;
+  word-wrap: normal !important;
 }
 
 .screen-reader-text:focus {
-	background-color: #f1f1f1;
+  background-color: #f1f1f1;
-	border-radius: 3px;
+  border-radius: 3px;
-	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto !important;
+  clip: auto !important;
-	clip-path: none;
+  clip-path: none;
-	color: #21759b;
+  color: #21759b;
-	display: block;
+  display: block;
-	font-size: 14px;
+  font-size: 14px;
-	font-size: 0.875rem;
+  font-size: 0.875rem;
-	font-weight: bold;
+  font-weight: bold;
-	height: auto;
+  height: auto;
-    width: auto;
+  width: auto;
-    top: 5px;
+  top: 5px;
-	left: 5px;
+  left: 5px;
-	line-height: normal;
+  line-height: normal;
-	padding: 15px 23px 14px;
+  padding: 15px 23px 14px;
-	text-decoration: none;
+  text-decoration: none;
-	z-index: 100000;
+  z-index: 100000;
 }
+
+.background-image {
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center center;
+}
+
+// Prism JS Additionals
+.highlight {
+  margin: 30px auto;
+}

themes/hello-friend-ng-clone/assets/scss/_menu.scss

@@ -1,11 +1,22 @@
 .menu {
-  background: #fafafa;
-  border-right: 1px solid;
-  margin-right: 18px;
   z-index: 9999;
+  // Default
+  background: $light-background-header;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
-    background: #252627;
+    background: $dark-background-header;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
   }
 
   @media #{$media-size-phone} {
@@ -49,6 +60,11 @@
     fill: currentColor;
     margin-left: 10px;
     cursor: pointer;
+    display: none;
+
+    @media #{$media-size-phone} {
+      display: block;
+    }
   }
 
   a {

themes/hello-friend-ng-clone/assets/scss/_prism.scss

@@ -1,18 +1,18 @@
-/* PrismJS 1.20.0
+/* PrismJS 1.23.0
-https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+arduino+arff+asciidoc+asm6502+aspnet+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+c+csharp+cpp+cil+coffeescript+clojure+crystal+csp+css-extras+d+dart+diff+django+docker+eiffel+elixir+elm+erb+erlang+fsharp+flow+fortran+gcode+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+javastacktrace+jolie+json+julia+keyman+kotlin+latex+less+liquid+lisp+livescript+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+monkey+n1ql+n4js+nand2tetris-hdl+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php+php-extras+plsql+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+python+q+qore+r+jsx+tsx+renpy+reason+rest+rip+roboconf+ruby+rust+sas+sass+scss+scala+scheme+smalltalk+smarty+soy+sql+stylus+swift+tap+tcl+textile+toml+tt2+twig+typescript+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+wasm+wiki+xeora+xojo+xquery+yaml */
+https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+ada+apacheconf+bash+batch+c+csharp+cpp+coffeescript+css-extras+dart+django+dns-zone-file+docker+elixir+etlua+erlang+git+go+graphql+groovy+haml+handlebars+haskell+http+hpkp+hsts+ini+java+javadoc+javadoclike+jsdoc+js-extras+json+json5+jsonp+julia+kotlin+latex+less+lisp+lua+markup-templating+matlab+nginx+objectivec+perl+php+phpdoc+php-extras+powershell+promql+protobuf+puppet+purescript+python+r+jsx+tsx+regex+rest+ruby+rust+sass+scss+shell-session+sql+stylus+swift+toml+twig+typescript+typoscript+verilog+vhdl+vim+visual-basic+wasm+xml-doc+yaml&plugins=line-highlight+line-numbers+show-language+toolbar */
 /**
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * prism.js Twilight theme
- * Based on https://github.com/chriskempson/tomorrow-theme
+ * Based (more or less) on the Twilight theme originally of Textmate fame.
- * @author Rose Pritchard
+ * @author Remy Bach
  */
-
 code[class*="language-"],
 pre[class*="language-"] {
-	color: #ccc;
+	color: white;
 	background: none;
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 	font-size: 1em;
 	text-align: left;
+	text-shadow: 0 -.1em .2em black;
 	white-space: pre;
 	word-spacing: normal;
 	word-break: normal;
@@ -27,84 +27,107 @@ pre[class*="language-"] {
 	-moz-hyphens: none;
 	-ms-hyphens: none;
 	hyphens: none;
+}
 
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+	background: hsl(0, 0%, 8%); /* #141414 */
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-	padding: 1em;
+	border-radius: .5em;
+	border: .3em solid hsl(0, 0%, 33%); /* #282A2B */
+	box-shadow: 1px 1px .5em black inset;
 	margin: .5em 0;
 	overflow: auto;
+	padding: 1em;
 }
 
-:not(pre) > code[class*="language-"],
+pre[class*="language-"]::-moz-selection {
-pre[class*="language-"] {
+	/* Firefox */
-	background: #2d2d2d;
+	background: hsl(200, 4%, 16%); /* #282A2B */
+}
+
+pre[class*="language-"]::selection {
+	/* Safari */
+	background: hsl(200, 4%, 16%); /* #282A2B */
+}
+
+/* Text Selection colour */
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	padding: .1em;
 	border-radius: .3em;
+	border: .13em solid hsl(0, 0%, 33%); /* #545454 */
+	box-shadow: 1px 1px .3em -.1em black inset;
+	padding: .15em .2em .05em;
 	white-space: normal;
 }
 
 .token.comment,
-.token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: #999;
+	color: hsl(0, 0%, 47%); /* #777777 */
 }
 
 .token.punctuation {
-	color: #ccc;
+	opacity: .7;
+}
+
+.token.namespace {
+	opacity: .7;
 }
 
 .token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-	color: #e2777a;
-}
-
-.token.function-name {
-	color: #6196cc;
-}
-
 .token.boolean,
 .token.number,
-.token.function {
+.token.deleted {
-	color: #f08d49;
+	color: hsl(14, 58%, 55%); /* #CF6A4C */
 }
 
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-	color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
 .token.keyword,
+.token.property,
+.token.selector,
+.token.constant,
+.token.symbol,
 .token.builtin {
-	color: #cc99cd;
+	color: hsl(53, 89%, 79%); /* #F9EE98 */
 }
 
+.token.attr-name,
+.token.attr-value,
 .token.string,
 .token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-	color: #7ec699;
-}
-
 .token.operator,
 .token.entity,
-.token.url {
+.token.url,
-	color: #67cdcc;
+.language-css .token.string,
+.style .token.string,
+.token.variable,
+.token.inserted {
+	color: hsl(76, 21%, 52%); /* #8F9D6A */
+}
+
+.token.atrule {
+	color: hsl(218, 22%, 55%); /* #7587A6 */
+}
+
+.token.regex,
+.token.important {
+	color: hsl(42, 75%, 65%); /* #E9C062 */
 }
 
 .token.important,
@@ -119,7 +142,237 @@ pre[class*="language-"] {
 	cursor: help;
 }
 
-.token.inserted {
+pre[data-line] {
-	color: green;
+	padding: 1em 0 1em 3em;
+	position: relative;
 }
 
+/* Markup */
+.language-markup .token.tag,
+.language-markup .token.attr-name,
+.language-markup .token.punctuation {
+	color: hsl(33, 33%, 52%); /* #AC885B */
+}
+
+/* Make the tokens sit above the line highlight so the colours don't look faded. */
+.token {
+	position: relative;
+	z-index: 1;
+}
+
+.line-highlight {
+	background: hsla(0, 0%, 33%, 0.25); /* #545454 */
+	background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
+	border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
+	border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
+	left: 0;
+	line-height: inherit;
+	margin-top: 0.75em; /* Same as .prism’s padding-top */
+	padding: inherit 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	white-space: pre;
+	z-index: 0;
+}
+
+.line-highlight:before,
+.line-highlight[data-end]:after {
+	background-color: hsl(215, 15%, 59%); /* #8794A6 */
+	border-radius: 999px;
+	box-shadow: 0 1px white;
+	color: hsl(24, 20%, 95%); /* #F5F2F0 */
+	content: attr(data-start);
+	font: bold 65%/1.5 sans-serif;
+	left: .6em;
+	min-width: 1em;
+	padding: 0 .5em;
+	position: absolute;
+	text-align: center;
+	text-shadow: none;
+	top: .4em;
+	vertical-align: .3em;
+}
+
+.line-highlight[data-end]:after {
+	bottom: .4em;
+	content: attr(data-end);
+	top: auto;
+}
+
+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;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+
+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 a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar 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 a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar 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 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 {
+	color: inherit;
+	text-decoration: none;
+}

themes/hello-friend-ng-clone/assets/scss/_single.scss

@@ -44,14 +44,19 @@
   &-cover {
     border-radius: 8px;
     margin: 40px -50px;
-    width: 860px;
+    width: $max-width;
-    max-width: 860px;
+    max-width: $max-width;
     @media #{$media-size-tablet} {
       margin: 20px 0;
       width: 100%;
     }
   }
 
+  &-excerpt {
+    color: grey;
+    font-style: italic;
+  }
+
   &-info {
     margin-top: 30px;
     font-size: 0.8rem;
@@ -86,6 +91,17 @@
     }
   }
 
+  &-audio {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 20px;
+
+    audio {
+      width: 90%;
+    }
+  }
+
   .flag {
     border-radius: 50%;
     margin: 0 5px;
@@ -105,18 +121,34 @@
       text-align: center;
       margin: 0 auto;
       padding: 5px 10px;
-      background: $light-background;
-      color: $light-color-secondary;
       font-size: 0.8rem;
       text-transform: uppercase;
       text-decoration: none;
       letter-spacing: 0.1em;
       z-index: 1;
+      // Default
+      background: $light-background;
+      color: $light-color-secondary;
 
-      .dark-theme & {
+      @media (prefers-color-scheme: dark) {
         background: $dark-background;
         color: $dark-color-secondary;
       }
+    
+      @media (prefers-color-scheme: light) {
+        background: $light-background;
+        color: $light-color-secondary;
+      }
+    
+      [data-theme=dark] & {
+        background: $dark-background;
+        color: $dark-color-secondary;
+      }
+    
+      [data-theme=light] & {
+        background: $light-background;
+        color: $light-color-secondary;
+      }
     }
 
     hr {
@@ -146,7 +178,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: $light-background-secondary;
   font-size: 1rem;
   font-weight: 600;
   border-radius: 8px;
@@ -154,11 +185,25 @@
   padding: 0;
   cursor: pointer;
   appearance: none;
+  // Default
+  background: $light-background-secondary;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
   }
 
+  @media (prefers-color-scheme: light) {
+    background: $light-background-secondary;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-secondary;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-secondary;
+  }
+
   + .button {
     margin-left: 10px;
   }

themes/hello-friend-ng-clone/assets/scss/_tables.scss

@@ -0,0 +1,84 @@
+.post-content {
+  table {
+    border-collapse: collapse;
+    margin: 25px auto;
+    font-size: 0.9em;
+    min-width: 400px;
+    max-width: 100%;
+
+    th,
+    td {
+      padding: 12px 15px;
+      // Default
+      border: 1px solid $light-table-color;
+      
+      @media (prefers-color-scheme: dark) {
+        border: 1px solid $dark-table-color;
+      }
+    
+      @media (prefers-color-scheme: light) {
+        border: 1px solid $light-table-color;
+      }
+    
+      [data-theme=dark] & {
+        border: 1px solid $dark-table-color;
+      }
+    
+      [data-theme=light] & {
+        border: 1px solid $light-table-color;
+      }
+    }
+
+    thead {
+      tr {
+        text-align: left;
+        // Default
+        background-color: $light-table-color;
+        color: $light-color;
+
+        @media (prefers-color-scheme: dark) {
+          background-color: $dark-table-color;
+          color: $dark-color;
+        }
+      
+        @media (prefers-color-scheme: light) {
+          background-color: $light-table-color;
+          color: $light-color;
+        }
+      
+        [data-theme=dark] & {
+          background-color: $dark-table-color;
+          color: $dark-color;
+        }
+      
+        [data-theme=light] & {
+          background-color: $light-table-color;
+          color: $light-color;
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        // Default
+        border: 1px solid $light-table-color;
+        
+        @media (prefers-color-scheme: dark) {
+          border: 1px solid $dark-table-color;
+        }
+      
+        @media (prefers-color-scheme: light) {
+          border: 1px solid $light-table-color;
+        }
+      
+        [data-theme=dark] & {
+          border: 1px solid $dark-table-color;
+        }
+      
+        [data-theme=light] & {
+          border: 1px solid $light-table-color;
+        }
+      }
+    }
+  }
+}

themes/hello-friend-ng-clone/assets/scss/_variables.scss

@@ -1,24 +1,31 @@
 @charset "UTF-8";
 
-/* light theme color */
+/* Light theme color */
 $light-background: #fff;
 $light-background-secondary: #eaeaea;
+$light-background-header: #fafafa;
 $light-color: #222;
 $light-color-secondary: #999;
 $light-border-color: #dcdcdc;
+$light-table-color: #dcdcdc;
 
-/* dark theme colors */
+/* Dark theme colors */
-$dark-background: #292a2d;
+$dark-background: #232425;
 $dark-background-secondary: #3b3d42;
+$dark-background-header: #1b1c1d;
 $dark-color: #a9a9b3;
-$dark-color-secondary: #73747b;
+$dark-color-secondary: #b3b3bd;
-$dark-border-color: #4a4b50;
+$dark-border-color: #4e4e57;
+$dark-table-color: #4e4e57;
 
 $media-size-phone: "(max-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";
 
-/* variables for js, must be the same as these in @custom-media queries */
+/* Variables for js, must be the same as these in @custom-media queries */
 :root {
   --phoneWidth: (max-width: 684px);
   --tabletWidth: (max-width: 900px);
 }
+
+/* Content */
+$max-width: 860px;

themes/hello-friend-ng-clone/assets/scss/main.scss

@@ -14,4 +14,6 @@
 @import "list";
 @import "single";
 @import "footer";
-@import "sharing-buttons";
+@import "sharing-buttons";
+@import "tables";
+@import "404";

themes/hello-friend-ng-clone/data/langFlags.yaml

@@ -2,10 +2,17 @@ de: de
 en: gb
 es: es
 fr: fr
+gl: es-ga
 hi: in
 it: it
+ja: jp
 ml: in
 nl: nl
 pt-br: br
 ru: ru
 tr: tr
+uk: uk
+zh-cn: cn
+zh-hk: hk
+zh-tw: tw
+ro: ro

themes/hello-friend-ng-clone/docs/svgs.md

@@ -1,9 +1,15 @@
 # Available Social Icons:
 
+- [amazon](https://simpleicons.org/?q=amazon)
+- [anilist](https://simpleicons.org/?q=anilist)
+- [box](https://simpleicons.org/?q=box)
 - [behance](https://simpleicons.org/?q=behance)
+- [bitbucket](https://simpleicons.org/?q=bitbucket)
+- case - generic briefcase icon for work based links
+- [codesandbox](https://simpleicons.org/?q=codesandbox)
 - [codechef](https://simpleicons.org/?q=codechef)
 - [codepen](https://simpleicons.org/?q=codepen)
-- [dev](https://simpleicons.org/?q=devto)
+- dev
 - [deviantart](https://simpleicons.org/?q=deviantart)
 - [discogs](https://simpleicons.org/?q=discogs)
 - [discord](https://simpleicons.org/?q=discord)
@@ -11,38 +17,58 @@
 - [dribbble](https://simpleicons.org/?q=dribbble)
 - [email](https://feathericons.com/?query=mail)
 - [facebook](https://simpleicons.org/?q=facebook)
+- [fitbit](https://simpleicons.org/?q=fitbit)
 - git
-- gitbook
+- [gitbook](https://simpleicons.org/?q=gitbook)
+- [gitea](https://simpleicons.org/?q=gitea)
 - [github](https://feathericons.com/?query=github)
 - [gitlab](https://feathericons.com/?query=gitlab)
+- [gitter](https://simpleicons.org/icons/gitter.svg)
 - [goodreads](https://simpleicons.org/?q=goodreads)
+- [googleplay](https://simpleicons.org/?q=googleplay)
+- [googlescholar](https://simpleicons.org/?q=googlescholar)
 - [hackerone](https://simpleicons.org/?q=hackerone)
 - [hackerrank](https://simpleicons.org/?q=hackerrank)
+- [hackthebox](https://simpleicons.org/?q=hackthebox)
 - [instagram](https://feathericons.com/?query=instagram)
 - [kaggle](https://simpleicons.org/?q=kaggle)
 - [keybase](https://simpleicons.org/?q=keybase)
 - [lastfm](https://simpleicons.org/?q=lastfm)
+- [leetcode](https://simpleicons.org/?q=leetcode)
+- [letterboxd](https://simpleicons.org/?q=letterboxd)
+- [librepay](https://simpleicons.org/?q=liberapay)
+- [lichess](https://simpleicons.org/?q=lichess)
+- [linkedin](https://feathericons.com/?query=linked)
 - [mastodon](https://simpleicons.org/?q=mastodon)
 - [matrix](https://simpleicons.org/?q=matrix)
 - [medium](https://simpleicons.org/?q=medium)
 - [mixcloud](https://simpleicons.org/?q=mixcloud)
-- [linkedin](https://feathericons.com/?query=linked)
+- [npm](https://simpleicons.org/?q=npm)
-- [pinterest](https://simpleicons.org/?q=pinterest)
+- [orcid](https://simpleicons.org/?q=orcid)
 - [peertube](https://simpleicons.org/?q=peertube)
+- [pinterest](https://simpleicons.org/?q=pinterest)
+- [pixelfed](https://github.com/pixelfed/pixelfed/blob/dev/public/img/pixelfed-icon-black.svg)
 - [podcasts-apple](https://simpleicons.org/?q=podcast)
 - [podcasts-google](https://simpleicons.org/?q=podcast)
+- [polywork](https://simpleicons.org/?q=polywork)
 - [reddit](https://simpleicons.org/?q=reddit)
+- [researchgate](https://simpleicons.org/?q=researchgate)
+- [signal](https://simpleicons.org/?q=signal)
 - [slack](https://simpleicons.org/?q=slack)
 - [soundcloud](https://simpleicons.org/?q=soundcloud)
-- stackoverflow
+- [spotify](https://simpleicons.org/?q=spotify)
+- [stackoverflow](https://simpleicons.org/?q=stackoverflow)
 - [steam](https://simpleicons.org/?q=Steam)
-- telegram
+- [telegram](https://simpleicons.org/?q=telegram)
+- [threema](https://simpleicons.org/?q=threema)
+- [tryhackme](https://simpleicons.org/?q=tryhackme)
 - [tumblr](https://simpleicons.org/?q=tumblr)
-- twitch
+- [twitch](https://simpleicons.org/?q=twitch)
-- twitter
+- [twitter](https://simpleicons.org/?q=twitter)
+- [unsplash](https://simpleicons.org/?q=unsplash)
 - [whatsapp](https://simpleicons.org/?q=whatsapp)
 - [xampp](https://simpleicons.org/?q=xampp)
 - [xing](https://simpleicons.org/?q=xing)
 - [xmpp](https://simpleicons.org/?q=xmpp)
 - [ycombinator](https://simpleicons.org/?q=ycombinator)
-- youtube
+- [youtube](https://simpleicons.org/?q=youtube)

themes/hello-friend-ng-clone/exampleSite/config.toml

@@ -51,46 +51,79 @@ disableHugoGeneratorInject = false
   dateform        = "Jan 2, 2006"
   dateformShort   = "Jan 2"
   dateformNum     = "2006-01-02"
-  dateformNumTime = "2006-01-02 15:04 -0700"
+  dateformNumTime = "2006-01-02 15:04"
 
   # Metadata mostly used in document's head
+  # 
   description = "Nice theme for homepages and blogs"
   keywords = ""
   images = [""]
 
+  # Home subtitle of the index page.
+  #
   homeSubtitle = "Hello Friend NG"
 
+  # Set a background for the homepage
+  # backgroundImage = "assets/images/background.jpg"
+
   # Prefix of link to the git commit detail page. GitInfo must be enabled.
+  #
   # gitUrl = ""
 
   # Set disableReadOtherPosts to true in order to hide the links to other posts.
+  #
   disableReadOtherPosts = false
 
+  # Enable theme toggle
+  # 
+  # This options enables the theme toggle for the theme. 
+  # Per default, this option is off. 
+  # The theme is respecting the prefers-color-scheme of the operating systeme. 
+  # With this option on, the page user is able to set the scheme he wants. 
+  enableThemeToggle = false
+
   # Sharing buttons
+  #
   # There are a lot of buttons preconfigured. If you want to change them,
   # generate the buttons here: https://sharingbuttons.io
   # and add them into your own `layouts/partials/sharing-buttons.html`
+  #
   enableSharingButtons = true
 
   # Integrate Javascript files or stylesheets by adding the url to the external assets or by
   # linking local files with their path relative to the static folder, e.g. "css/styles.css"
+  #
   customCSS = []
   customJS  = []
 
   # Toggle this option need to rebuild SCSS, requires extended version of Hugo
+  #
   justifyContent = false  # Set "text-align: justify" to .post-content.
 
-  # Default theme "light" or "dark"
+  # Custom footer 
-  defaultTheme = "dark"
+  # If you want, you can easily override the default footer with your own content. 
-  themeColor = "#252627"
+  #
+  [params.footer]
+    trademark = true
+    rss = true
+    copyright = true
+    author = true
+
+    topText = []
+    bottomText = [
+      "Powered by <a href=\"http://gohugo.io\">Hugo</a>",
+      "Made with &#10084; by <a href=\"https://github.com/rhazdon\">Djordje Atlialp</a>"
+    ]
 
   # Colors for favicons
+  #
   [params.favicon.color]
-    mask = "#252627"
+    mask = "#1b1c1d"
-    msapplication = "#252627"
+    msapplication = "#1b1c1d"
-    theme = "#252627"
+    theme = "#1b1c1d"
 
   [params.logo]
+    logoMark     = ">"
     logoText     = "$ cd /home/"
     logoHomeLink = "/"
     # Set true to remove the logo cursor entirely.
@@ -100,7 +133,19 @@ disableHugoGeneratorInject = false
     # Set to a valid CSS time value to change the animation duration, "0s" to disable.
     # logoCursorAnimate  = "2s"
 
+  # Commento is more than just a comments widget you can embed — 
+  # it’s a return to the roots of the internet. 
+  # An internet without the tracking and invasions of privacy. 
+  # An internet that is simple and lightweight. 
+  # An internet that is focused on interesting discussions, not ads. 
+  # A better internet.
+  # Uncomment this to enable Commento.
+  #
+  # [params.commento]
+  #   url = ""
+
   # Uncomment this if you want a portrait on your start page
+  #
   # [params.portrait]
   #   path     = "/img/image.jpg"
   #   alt      = "Portrait"

themes/hello-friend-ng-clone/i18n/de.toml

@@ -34,3 +34,6 @@ other = "Inhaltsverzeichnis"
 [wordCount]
 one   = "Ein Wort"
 other = "{{ .Count }} Wörter"
+
+[lastModified]
+other = "Letzte Aktualisierung"

themes/hello-friend-ng-clone/i18n/en.toml

@@ -34,3 +34,6 @@ other = "Table of Contents"
 [wordCount]
 one   = "One Word"
 other = "{{ .Count }} Words"
+
+[lastModified]
+other = "Last updated"

themes/hello-friend-ng-clone/i18n/es.toml

@@ -34,3 +34,6 @@ other = "Tabla de Contenido"
 [wordCount]
 one   = "Una Palabra"
 other = "{{ .Count }} Palabras"
+
+[lastModified]
+other = "Ultima actualización"

themes/hello-friend-ng-clone/i18n/fr.toml

@@ -34,3 +34,6 @@ other = "Table des matières"
 [wordCount]
 one   = "Un Mot"
 other = "{{ .Count }} Mots"
+
+[lastModified]
+other = "Mise à jour"

themes/hello-friend-ng-clone/i18n/gl.toml

@@ -0,0 +1,36 @@
+# Translations for Galician
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Traducións"
+
+[postAvailable]
+other = "Tamén dispoñible en"
+
+
+# 404.html
+#
+[archives]
+other = "Arquivos"
+
+[home]
+other = "Inicio"
+
+[notFound]
+other = "Vaia, non se atopou a páxina..."
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Un minuto"
+other = "{{ .Count }} minutos"
+
+[tableOfContents]
+other = "Táboa de contidos"
+
+[wordCount]
+one   = "Unha Palabra"
+other = "{{ .Count }} Palabras"

themes/hello-friend-ng-clone/i18n/hi.toml

@@ -33,4 +33,7 @@ other = "अनुक्रमणिका"
 
 [wordCount]
 one   = "एक शब्द"
-other = "{{ .Count }} शब्द"
+other = "{{ .Count }} शब्द"
+
+[lastModified]
+other = "आखरी अपडेट"

themes/hello-friend-ng-clone/i18n/it.toml

@@ -34,3 +34,6 @@ other = "Contenuti"
 [wordCount]
 one   = "Una parola"
 other = "{{ .Count }} parole"
+
+[lastModified]
+other = "Ultimo aggiornamento"

themes/hello-friend-ng-clone/i18n/ja.toml

@@ -0,0 +1,39 @@
+# Translations for Japanese
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "翻訳"
+
+[postAvailable]
+other = "他の言語"
+
+
+# 404.html
+#
+[archives]
+other = "アーカイブ"
+
+[home]
+other = "ホームページ"
+
+[notFound]
+other = "あっ、ページが見つかりません……"
+
+# Please add hasCJKLanguage = true under [languages.ja] for the below to behave correctly
+# posts/single.html
+#
+[readingTime]
+one   = "一分"
+other = "{{ .Count }}分"
+
+[tableOfContents]
+other = "目次"
+
+[wordCount]
+one   = "一文字"
+other = "{{ .Count }}文字"
+
+[lastModified]
+other = "最終更新"

themes/hello-friend-ng-clone/i18n/lmo.toml

@@ -34,3 +34,6 @@ other = "Contegnuu"
 [wordCount]
 one   = "Ona parolla"
 other = "{{ .Count }} paroll"
+
+[lastModified]
+other = "Last update"

themes/hello-friend-ng-clone/i18n/ml.toml

@@ -34,3 +34,6 @@ other = "ഉള്ളടക്ക പട്ടിക"
 [wordCount]
 one   = "ഒരു വാക്ക്"
 other = "{{ .Count }} വാക്കുകൾ"
+
+[lastModified]
+other = "അവസാനമായി പുതുക്കിയത്"

themes/hello-friend-ng-clone/i18n/pt-br.toml

@@ -33,4 +33,7 @@ other = "Índice"
 
 [wordCount]
 one   = "Uma Palavra"
-other = "{{ .Count }} Palavras"
+other = "{{ .Count }} Palavras"
+
+[lastModified]
+other = "Última actualização"

themes/hello-friend-ng-clone/i18n/ro.toml

@@ -0,0 +1,39 @@
+# Translations for Romanian
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Traduceri"
+
+[postAvailable]
+other = "Disponibil și în"
+
+
+# 404.html
+#
+[archives]
+other = "Arhive"
+
+[home]
+other = "Acasă"
+
+[notFound]
+other = "Ups, pagina nu a fost găsită…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "Un minut"
+other = "{{ .Count }} de minute"
+
+[tableOfContents]
+other = "Cuprins"
+
+[wordCount]
+one   = "Un cuvânt"
+other = "{{ .Count }} de cuvinte"
+
+[lastModified]
+other = "Ultima modificare"

themes/hello-friend-ng-clone/i18n/ru.toml

@@ -38,3 +38,6 @@ one   = "{{ .Count }} слово"
 few   = "{{ .Count }} слова"
 many  = "{{ .Count }} слов"
 other = "{{ .Count }} слов"
+
+[lastModified]
+other = "Последнее обновление"

themes/hello-friend-ng-clone/i18n/tr.toml

@@ -34,3 +34,6 @@ other = "İçindekiler"
 [wordCount]
 one   = "One Kelime"
 other = "{{ .Count }} Kelime"
+
+[lastModified]
+other = "Son güncelleme"

themes/hello-friend-ng-clone/i18n/uk.toml

@@ -0,0 +1,43 @@
+# Translations for Ukrainian
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "Переклади"
+
+[postAvailable]
+other = "Доступне на "
+
+
+# 404.html
+#
+[archives]
+other = "Архіви"
+
+[home]
+other = "Головна"
+
+[notFound]
+other = "Упс, сторінка не знайдена…"
+
+
+# posts/single.html
+#
+[readingTime]
+one   = "{{ .Count }} хвилина"
+few   = "{{ .Count }} хвилини"
+many  = "{{ .Count }} хвилин"
+other = "{{ .Count }} хвилин"
+
+[tableOfContents]
+other = "Вміст"
+
+[wordCount]
+one   = "{{ .Count }} слово"
+few   = "{{ .Count }} слова"
+many  = "{{ .Count }} слів"
+other = "{{ .Count }} слів"
+
+[lastModified]
+other = "Останнє оновлення"

themes/hello-friend-ng-clone/i18n/zh-cn.toml

@@ -0,0 +1,39 @@
+# Translations for Chinese (China)
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "译文"
+
+[postAvailable]
+other = "其他语言"
+
+
+# 404.html
+#
+[archives]
+other = "档案"
+
+[home]
+other = "主页"
+
+[notFound]
+other = "噢，找不到页面……"
+
+# Please add hasCJKLanguage = true under [languages.zh-cn] for the below to behave correctly
+# posts/single.html
+#
+[readingTime]
+one   = "一分钟"
+other = "{{ .Count }}分钟"
+
+[tableOfContents]
+other = "目录"
+
+[wordCount]
+one   = "一字"
+other = "{{ .Count }}字"
+
+[lastModified]
+other = "最后修改"

themes/hello-friend-ng-clone/i18n/zh-hk.toml

@@ -0,0 +1,39 @@
+# Translations for Chinese (Hong Kong) [Cantonese]
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "譯文"
+
+[postAvailable]
+other = "其他語言"
+
+
+# 404.html
+#
+[archives]
+other = "貼文"
+
+[home]
+other = "主頁"
+
+[notFound]
+other = "哎呀，揾唔到添……"
+
+# Please add hasCJKLanguage = true under [languages.zh-hk] for the below to behave correctly
+# posts/single.html
+#
+[readingTime]
+one   = "一分鐘"
+other = "{{ .Count }}分鐘"
+
+[tableOfContents]
+other = "目錄"
+
+[wordCount]
+one   = "一粒字"
+other = "{{ .Count }}字"
+
+[lastModified]
+other = "最後修改"

themes/hello-friend-ng-clone/i18n/zh-tw.toml

@@ -0,0 +1,39 @@
+# Translations for Chinese (Taiwan)
+# https://gohugo.io/content-management/multilingual/#translation-of-strings
+
+# Generic
+#
+[translations]
+other = "譯文"
+
+[postAvailable]
+other = "其他語言"
+
+
+# 404.html
+#
+[archives]
+other = "檔案"
+
+[home]
+other = "主頁"
+
+[notFound]
+other = "噢，找不到頁面……"
+
+# Please add hasCJKLanguage = true under [languages.zh-tw] for the below to behave correctly
+# posts/single.html
+#
+[readingTime]
+one   = "一分鐘"
+other = "{{ .Count }}分鐘"
+
+[tableOfContents]
+other = "目錄"
+
+[wordCount]
+one   = "一字"
+other = "{{ .Count }}字"
+
+[lastModified]
+other = "最後修改"

themes/hello-friend-ng-clone/layouts/404.html

@@ -7,8 +7,14 @@
             <h1>404</h1>
             <p>{{ i18n "notFound" }}</p>
             <p class="btn-404">
-                <a href="{{.Site.BaseURL}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>{{ i18n "home" }}</a>
+                <a href="{{.Site.BaseURL}}">
-                <a href="{{ "posts" | absLangURL }}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>{{ i18n "archives" }}</a>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  {{- i18n "home" -}}
+                </a>
+                <a href="{{ "posts" | absLangURL }}">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
+                  {{- i18n "archives" -}}
+                </a>
             </p>
         </div>
     </div>

themes/hello-friend-ng-clone/layouts/_default/baseof.html

@@ -4,7 +4,10 @@
         {{ partial "head.html" . }}
     </head>
 
-    <body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}">
+    {{ block "body" . }}
+        <body>
+    {{ end }}
+    
         <div class="container">
             {{ partial "header.html" . }}
 

themes/hello-friend-ng-clone/layouts/_default/list.html

@@ -30,6 +30,6 @@
                 </ul>
             </div>
         {{ end }}
-    {{ partial "pagination.html" . }}
+    {{ partial "pagination-list.html" . }}
     </main>
 {{ end }}

themes/hello-friend-ng-clone/layouts/_default/single.html

@@ -14,17 +14,23 @@
         <article>
             <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
 
-            {{- if .Params.toc }}
+            {{ if .Params.Cover }}
+                <figure class="post-cover">
+                    <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
+                
+                    {{ if .Params.CoverCaption }}
+                        <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
+                    {{ end }}
+                </figure>
+            {{ end }}
+            
+            {{ if .Params.toc }}
                 <hr />
                 <aside id="toc">
                 <div class="toc-title">{{ i18n "tableOfContents" }}</div>
                     {{ .TableOfContents }}
                 </aside>
                 <hr />
-            {{- end }}
-
-            {{ with .Params.Cover }}
-                <img src="/{{ . }}" class="post-cover" />
             {{ end }}
 
             <div class="post-content">
@@ -35,14 +41,8 @@
         <hr />
 
         <div class="post-info">
-  			{{- with .Params.tags }}
+            {{ partial "tags.html" .Params.tags }}
-  				<p>
+            {{ partial "categories.html" . }}
-  					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
-  					{{- range . -}}
-  					     <span class="tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}">{{.}}</a></span>
-  					{{- end }}
-  				</p>
-  			{{- end }}
 
             {{- if .GitInfo }}
 			    <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg><a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a> @ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}</p>

themes/hello-friend-ng-clone/layouts/index.html

@@ -1,3 +1,7 @@
+{{ define "body" }}
+    <body class="{{ if .Site.Params.backgroundImage }} background-image" style="background-image: url('{{ .Site.Params.backgroundImage }}');" {{ else }}"{{ end }}>
+{{ end }}
+
 {{ define "main" }}
     <main aria-role="main">
         <div>

themes/hello-friend-ng-clone/layouts/partials/categories.html

@@ -0,0 +1,9 @@
+{{ with .Params.categories }}
+    <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder meta-icon"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+
+        {{ range . -}}
+            <span class="tag"><a href="{{ "categories/" | absLangURL }}{{ . | urlize }}/">{{.}}</a></span>
+        {{ end }}
+    </p>
+{{ end }}

themes/hello-friend-ng-clone/layouts/partials/footer.html

@@ -1,20 +1,20 @@
 <footer class="footer">
+    {{if or (.Site.Params.footer.trademark) (.Site.Params.footer.author) (.Site.Params.footer.copyright) (.Site.Params.footer.rss) (.Site.Params.footer.topText) }}
     <div class="footer__inner">
         <div class="footer__content">
-            <span>&copy; {{ now.Format "2006" }}</span>
+            {{ if .Site.Params.footer.trademark }}<span>&copy; {{ now.Format "2006" }}</span>{{ end }}
-            {{ if .Site.Author.name }}
+            {{ if .Site.Params.footer.author }}<span><a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a></span>{{ end }}
-                <span><a href="{{ .Site.BaseURL }}">{{ .Site.Author.name }}</a></span>
+            {{ if .Site.Params.footer.copyright }}<span>{{ .Site.Copyright| safeHTML }}</span>{{ end }}
-            {{ end }}
+            {{ if .Site.Params.footer.rss }}<span><a href="{{ "posts/index.xml" | absLangURL }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a></span>{{ end }}
-            {{ if .Site.Copyright }}
+            {{ range .Site.Params.footer.topText }}<span>{{ . | safeHTML}}</span>{{ end }}
-                <span>{{ .Site.Copyright| safeHTML }}</span>
-            {{ end }}
-            <span>{{- with (not (in (.Site.Language.Get "disableKinds") "RSS")) }} <a href="{{ "posts/index.xml" | absLangURL }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>{{ end }}</span>
         </div>
     </div>
+    {{ end }}
+    {{with .Site.Params.footer.bottomText}}
     <div class="footer__inner">
         <div class="footer__content">
-            <span>Powered by <a href="http://gohugo.io">Hugo</a></span>
+            {{ range . }}<span>{{ . | safeHTML}}</span>{{ end }}
-            <span>Made with &#10084; by <a href="https://github.com/rhazdon">Djordje Atlialp</a></span>
         </div>
     </div>
+    {{ end }}
 </footer>

themes/hello-friend-ng-clone/layouts/partials/head.html

@@ -2,7 +2,7 @@
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="author" content="{{ if .Params.author }}{{ .Params.author }}{{ else }}{{ range .Site.Author }}{{ . }} {{ end }}{{ end }}">
-<meta name="description" content="{{ if .IsHome }}{{ .Site.Params.homeSubtitle }}{{ else }}{{ .Summary | plainify }}{{ end }}" />
+<meta name="description" content="{{ if .IsHome }}{{ .Site.Params.homeSubtitle }}{{ else }}{{ if .Params.Description }}{{ .Params.Description }}{{ else }}{{ .Summary | plainify }}{{ end }}{{ end }}" />
 <meta name="keywords" content="{{ .Site.Params.keywords }}{{ if .Params.tags }}{{ range .Params.tags }}, {{ . }}{{ end }}{{ end }}" />
 <meta name="robots" content="noodp" />
 <meta name="theme-color" content="{{ .Site.Params.themeColor }}" />
@@ -19,7 +19,7 @@
 {{ end }}
 
 <!-- CSS -->
-<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/css/flag-icon.min.css" rel="stylesheet"
+<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet"
     type="text/css">
 
 {{ $options := (dict "targetPath" "main.css" "outputStyle" "compressed" "enableSourceMap" true) }}
@@ -37,6 +37,7 @@
 
 {{ template "_internal/schema.html" . }}
 {{ template "_internal/twitter_cards.html" . }}
+{{ template "_internal/google_news.html" . }}
 
 {{ if isset .Site.Taxonomies "series" }}
     {{ template "_internal/opengraph.html" . }}
@@ -65,3 +66,8 @@
 {{- if templates.Exists "partials/extra-head.html" -}}
     {{ partial "extra-head.html" . }}
 {{- end }}
+
+<!-- Google Analytics internal template -->
+{{- if .Site.GoogleAnalytics }}
+    {{ template "_internal/google_analytics.html" . }}
+{{- end}}

themes/hello-friend-ng-clone/layouts/partials/header.html

@@ -13,7 +13,9 @@
                 </span>
             {{ end }}
 
-            <span class="theme-toggle unselectable">{{ partial "theme-icon.html" . }}</span>
+            {{- if .Site.Params.EnableThemeToggle }}
+                <span class="theme-toggle not-selectable">{{ partial "theme-toggle-icon.html" . }}</span>
+            {{- end}}
         </span>
     </span>
 </header>

themes/hello-friend-ng-clone/layouts/partials/javascript.html

@@ -1,14 +1,9 @@
 {{ $main := resources.Get "js/main.js" }}
 {{ $menu := resources.Get "js/menu.js" }}
 {{ $prism := resources.Get "js/prism.js" }}
-{{ $theme := resources.Get "js/theme.js" }}
+{{ $secureJS := slice $main $menu $prism | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
-{{ $secureJS := slice $main $menu $prism $theme | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
 <script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 
-{{- if .Site.GoogleAnalytics }}
-    {{ template "_internal/google_analytics.html" . }}
-{{- end}}
-
 {{ range $val := $.Site.Params.customJS }}
     {{ if gt (len $val) 0 }}
         <script src="{{ $val }}"></script>

themes/hello-friend-ng-clone/layouts/partials/logo.html

@@ -1,9 +1,9 @@
-<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{else}}{{ .Site.BaseURL }}{{ end }}" style="text-decoration: none;">
+<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{else}}{{ .Site.BaseURL | relLangURL }}{{ end }}" style="text-decoration: none;">
     <div class="logo">
         {{ if .Site.Params.Logo.path }}
             <img src="{{ .Site.Params.Logo.path }}" alt="{{ .Site.Params.Logo.alt }}" />
         {{ else }}
-            <span class="logo__mark">></span>
+            <span class="logo__mark">{{ with .Site.Params.Logo.logoMark }}{{ . }}{{ else }}>{{ end }}</span>
             <span class="logo__text">{{ with .Site.Params.Logo.logoText }}{{ . }}{{ else }}hello{{ end }}</span>
             <span class="logo__cursor" style=
                   "{{ with.Site.Params.Logo.logoCursorDisabled }}visibility:hidden;{{ end }}

themes/hello-friend-ng-clone/layouts/partials/menu.html

@@ -2,7 +2,7 @@
     <ul class="menu__inner">
         {{- $currentPage := . -}}
         {{ range .Site.Menus.main -}}
-            <li><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
+            <li><a href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
         {{- end }}
     </ul>
 </nav>

themes/hello-friend-ng-clone/layouts/partials/pagination-single.html

@@ -0,0 +1,28 @@
+{{ if and (not $.Site.Params.DisableReadOtherPosts) (or .NextInSection .PrevInSection) }}
+    <div class="pagination">
+        <div class="pagination__title">
+            <span class="pagination__title-h">{{ .Site.Params.ReadOtherPosts }}</span>
+            <hr />
+        </div>
+
+        <div class="pagination__buttons">
+            {{ if .NextInSection }}
+            <span class="button previous">
+                <a href="{{ .NextInSection.Permalink }}">
+                    <span class="button__icon">←</span>
+                    <span class="button__text">{{ .NextInSection.Title }}</span>
+                </a>
+            </span>
+            {{ end }}
+
+            {{ if .PrevInSection }}
+            <span class="button next">
+                <a href="{{ .PrevInSection.Permalink }}">
+                    <span class="button__text">{{ .PrevInSection.Title }}</span>
+                    <span class="button__icon">→</span>
+                </a>
+            </span>
+            {{ end }}
+        </div>
+    </div>
+{{ end }}

themes/hello-friend-ng-clone/layouts/partials/tags.html

@@ -0,0 +1,9 @@
+{{ with . }}
+    <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
+
+        {{ range . -}}
+            <span class="tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}/">{{.}}</a></span>
+        {{ end }}
+    </p>
+{{ end }}

themes/hello-friend-ng-clone/layouts/partials/theme-icon.html

@@ -1,5 +0,0 @@
-<svg class="theme-toggler" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
-  3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
-  13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"/>
-</svg>

themes/hello-friend-ng-clone/layouts/partials/theme-toggle-icon.html

@@ -0,0 +1,5 @@
+<svg class="theme-toggler" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
+   3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
+   13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"/>
+ </svg>

themes/hello-friend-ng-clone/layouts/posts/single.html

@@ -22,6 +22,20 @@
         <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
       </h1>
 
+      {{ with .Params.Description }}
+        <div class="post-excerpt">{{ . }}</div>
+      {{ end }}
+
+      {{ if .Params.Cover }}
+        <figure class="post-cover">
+          <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
+          
+          {{ if .Params.CoverCaption }}
+            <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
+          {{ end }}
+        </figure>
+      {{ end }}
+
       {{- if .Params.toc }}
         <hr />
         <aside id="toc">
@@ -31,8 +45,12 @@
         <hr />
       {{- end }}
 
-      {{ with .Params.Cover }}
+      {{ if .Params.Audio }}
-        <img src="/{{ . }}" class="post-cover" />
+        <div class="post-audio">
+          <audio controls>
+            <source src="{{ .Params.Audio }}">
+          </audio>
+        </div>
       {{ end }}
 
       <div class="post-content">
@@ -43,18 +61,8 @@
     <hr />
 
     <div class="post-info">
-      {{- with .Params.tags }}
+      {{ partial "tags.html" .Params.tags }}
-        <p>
+      {{ partial "categories.html" . }}
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon">
-            <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
-            <line x1="7" y1="7" x2="7" y2="7"></line>
-          </svg>
-
-          {{- range . -}}
-             <span class="tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}/">{{.}}</a></span>
-          {{- end }}
-        </p>
-      {{- end }}
 
       <p>
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
@@ -74,7 +82,21 @@
           <line x1="8" y1="2" x2="8" y2="6"></line>
           <line x1="3" y1="10" x2="21" y2="10"></line>
         </svg>
-        {{ if .Site.Params.dateformNumTime }}{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}{{ else }}{{ dateFormat "2006-01-02 15:04 -0700" .Date.Local }}{{ end }}
+        {{ if .Site.Params.dateformNumTime }}
+          {{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
+        {{ else }}
+          {{ dateFormat "2006-01-02 15:04" .Date.Local }}
+        {{ end }}
+
+        {{ if .Lastmod }} 
+          {{ if not (eq .Lastmod .Date )}}
+            {{ if .Site.Params.dateformNumTime }}
+              ({{ i18n "lastModified" }}: {{ dateFormat .Site.Params.dateformNumTime .Lastmod.Local }})
+            {{ else }} 
+              ({{ i18n "lastModified" }}: {{ dateFormat "2006-01-02 15:04" .Lastmod.Local }})
+            {{ end }}
+          {{ end }}
+        {{ end }}
       </p>
 
       {{- if .GitInfo }}
@@ -98,35 +120,7 @@
       </div>
     {{- end }}
 
-    {{ if and (not $.Site.Params.DisableReadOtherPosts) (or .NextInSection .PrevInSection) }}
+    {{ partial "pagination-single.html" . }}
-      <div class="pagination">
-        <div class="pagination__title">
-          <span class="pagination__title-h">{{ .Site.Params.ReadOtherPosts }}</span>
-          <hr />
-        </div>
-
-        <div class="pagination__buttons">
-          {{ if .NextInSection }}
-            <span class="button previous">
-              <a href="{{ .NextInSection.Permalink }}">
-                <span class="button__icon">←</span>
-                <span class="button__text">{{ .NextInSection.Title }}</span>
-              </a>
-            </span>
-          {{ end }}
-
-          {{ if .PrevInSection }}
-            <span class="button next">
-              <a href="{{ .PrevInSection.Permalink }}">
-                <span class="button__text">{{ .PrevInSection.Title }}</span>
-                <span class="button__icon">→</span>
-              </a>
-            </span>
-          {{ end }}
-        </div>
-      </div>
-    {{ end }}
-
 
     {{ if .Site.DisqusShortname }}
       {{ if not (eq .Params.Comments "false") }}
@@ -136,5 +130,10 @@
       {{ end }}
     {{ end }}
 
+    {{ if .Site.Params.Commento.Url }}
+      <script defer src={{ .Site.Params.Commento.Url }}></script>
+      <div id="commento"></div>
+    {{ end }}
+
   </main>
 {{ end }}