css fix, featuredImage shortcode, edit-this-page bug fix, exampleSite update

archetypes/default.md

@@ -1,8 +1,9 @@
 ---
 title: "{{ replace .Name "-" " " | title }}"
+description: ""
 date: {{ .Date }}
 draft: false
 weight: 0
 enableToc: true
 tocLevels: ["h2", "h3", "h4"]
----
+---

archetypes/post.md

@@ -0,0 +1,13 @@
+---
+author: "Hugo Authors"
+title: "{{ replace .Name "-" " " | title }}"
+description: ""
+date: {{ .Date }}
+draft: false
+weight: 0
+tags:
+- 
+image: "" # relative path to the static folder. The image is in the root/static/images folder.
+enableToc: true
+tocLevels: ["h2", "h3", "h4"]
+---

archetypes/section.md

@@ -0,0 +1,8 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+description: ""
+date: {{ .Date }}
+draft: false
+weight: 0
+collapsible: true
+---

assets/sass/components/_codetab.scss

@@ -3,9 +3,9 @@
 
   &__links {
     position: absolute;
-    top: 0;
+    top: 2px;
     left: 0;
-    height: 27px;
+    height: 26px;
     z-index: z('clipboard');
     border-top-left-radius: 0.25rem;
 
@@ -18,7 +18,7 @@
   }
 
   &__link {
-    height: 27px;
+    height: 26px;
     border: none;
     outline: none;
     cursor: pointer;

assets/sass/components/_featuredImage.scss

@@ -0,0 +1,13 @@
+.featured-image {
+  width: 100%;
+  object-fit: cover;
+
+  &--wrapper {
+    width: 100%;
+    height: 100%;
+
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+  }
+}

assets/sass/components/_notice.scss

@@ -18,7 +18,7 @@
     }
 
     &.warning {
-        border-top: 30px solid #ffca28;
+        border-top: 30px solid #ffd54f;
         background: #fefaf5;
         color: #161209;
 

assets/sass/components/_toc.scss

@@ -2,8 +2,8 @@
   position: -webkit-sticky;
   position: sticky;
   top: $grid-nav-height;
-  padding: 0.25rem;
-  margin: 0.25rem;
+  padding: 0.5rem;
+  margin: 0 0.5rem;
   margin-top: 0;
   padding-top: 1.25rem;
   height: calc(100vh - $grid-nav-height);
@@ -66,7 +66,7 @@
   ul {
     li {
       li {
-        margin-left: 0.6rem;
+        margin-left: 0.5rem;
       }
     }
   }

assets/sass/layout/_grid.scss

@@ -56,7 +56,7 @@
 
 .sv { // single view
     display: grid;
-    grid-template-columns: minmax(630px, 1fr) minmax(125px, 325px);
+    grid-template-columns: minmax(630px, 960px) minmax(125px, 325px);
     grid-template-rows: 1fr;
     grid-column-gap: 0px;
     grid-row-gap: 0px;

assets/sass/main.scss

@@ -52,6 +52,7 @@ $light-nav-icon-color: {{ .Site.Data.color.light_nav_icon_color }};
 @import 'components/tab';
 @import 'components/codetab';
 @import 'components/box';
+@import 'components/featuredImage';
 
 @import 'layout/grid';
 @import 'layout/footer';

exampleSite/config/_default/params.toml

@@ -30,7 +30,7 @@ taxoGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
 github = "https://github.com/zzossig/hugo-theme-zdoc"
 
 # comment
-enableComment = true
+enableComment = false
 disqus_shortname = ""
 commento = false
 

exampleSite/content/en/blog/_index.md

@@ -1,33 +1,40 @@
 ---
 title: Blog
 description: Blog list page
-blogHeaderType: text
-headerHeight: 112
+blogHeaderType: img
 header:
   - type: text
+    height: 200
     paddingX: 50
-    paddingY: 0
     align: center
     title:
       - Blog
-    subtitle:
+    subtitle: 
       - 
-    spaceBetweenTitleSubtitle: 0
+      - 
+    titleColor: 
+    titleFontSize: 44
+    subtitleColor: 
+    subtitleFontSize: 20
+    spaceBetweenTitleSubtitle: 16
   
   - type: img
-    imageSrc: images/header/background.png
-    imageSize: initial
+    imageSrc: images/header/background.jpg
+    imageSize: cover
     imageRepeat: no-repeat
     imagePosition: center
-    height: 170
+    height: 370
     paddingX: 50
     paddingY: 0
     align: center
     title:
-      - 
+      - Zzo blog
     subtitle:
       - 
+    titleColor: 
     titleShadow: true
-    subtitleCursive: true
+    titleFontSize: 44
+    subtitleColor:
+    subtitleFontSize: 16
     spaceBetweenTitleSubtitle: 20
 ---

exampleSite/content/en/blog/emoji-support.md

@@ -2,18 +2,12 @@
 author = "Hugo Authors"
 title = "Emoji Support"
 date = "2019-03-05"
-# description = "Guide to emoji usage in Hugo"
+description = "Guide to emoji usage in Hugo"
 tags = [
     "emoji",
 ]
-image = "images/mountains.jpg"
 +++
 
-Lorem est tota propiore conpellat pectoribus de
-pectora summo. Redit teque digerit hominumque toris verebor lumina non cervice
-subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc
-caluere tempus<!--more-->
-
 Emoji can be enabled in a Hugo project in a number of ways. 
 <!--more-->
 The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). 

exampleSite/content/en/blog/markdown-syntax.md

@@ -2,24 +2,16 @@
 author = "Hugo Authors"
 title = "Markdown Syntax Guide"
 date = "2019-03-11"
-# description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
 tags = [
     "markdown",
     "css",
     "html",
     "themes",
 ]
-categories = [
-    "themes",
-    "syntax",
-]
-series = ["Themes Guide"]
-+++
+tocLevels = ["h2", "h3", "h4", "h5"]
 
-Lorem est tota propiore conpellat pectoribus de
-pectora summo. Redit teque digerit hominumque toris verebor lumina non cervice
-subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc
-caluere tempus<!--more-->
++++
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
 <!--more-->
@@ -45,12 +37,12 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
 
-#### Blockquote without attribution
+### Blockquote without attribution
 
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use *Markdown syntax* within a blockquote.
 
-#### Blockquote with attribution
+### Blockquote with attribution
 
 > Don't communicate by sharing memory, share memory by communicating.</p>
 > — <cite>Rob Pike[^1]</cite>

exampleSite/content/en/blog/placeholder-text.md

@@ -2,18 +2,17 @@
 author = "Hugo Authors"
 title = "Placeholder Text"
 date = "2019-03-09"
-#description = "Lorem Ipsum Dolor Si Amet"
+description = "Lorem Ipsum Dolor Si Amet"
 tags = [
     "markdown",
     "text",
 ]
-image = "images/landscape.jpg"
 +++
 
 Lorem est tota propiore conpellat pectoribus de
-pectora summo. Redit teque digerit hominumque toris verebor lumina non cervice
+pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice
 subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc
-caluere tempus<!--more--> inhospita parcite confusaque translucet patri vestro qui optatis
+caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis
 lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
 
 1. Exierant elisi ambit vivere dedere

exampleSite/content/en/blog/rich-content.md

@@ -2,7 +2,7 @@
 author = "Hugo Authors"
 title = "Rich Content"
 date = "2019-03-10"
-# description = "A brief description of Hugo Shortcodes"
+description = "A brief description of Hugo Shortcodes"
 tags = [
     "shortcodes",
     "privacy",
@@ -10,10 +10,7 @@ tags = [
 image = "images/mountain.jpg"
 +++
 
-Lorem est tota propiore conpellat pectoribus de
-pectora summo. Redit teque digerit hominumque toris verebor lumina non cervice
-subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc
-caluere tempus<!--more-->
+{{< featuredImage >}}
 
 Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
 <!--more-->

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "header" }}
- {{ partial "main/header.html" . }}
+  {{ partial "main/header.html" . }}
 {{ end }}
 {{ define "main" }}
   {{ partial "main/single.html" . }}

layouts/partials/main/component/edit-this-page.html

@@ -1,7 +1,10 @@
 {{ if $.Param "enableEditBtn" }}
-  <a href="{{ $.Param "editBaseURL" }}{{ strings.TrimSuffix "/" (.Permalink | relLangURL) }}.md" target="_blank" rel="noreferrer">
-    <button class="editBtn" aria-label="Edit This Page Button">
-      {{ i18n "edit-this-page" | default "EDIT THIS PAGE" }}
-    </button>
-  </a>
+  {{ $root := .}}
+  {{ with .FirstSection }}
+    <a href="{{ .Params.editBaseURL | default ($.Param "editBaseURL") }}{{ strings.TrimSuffix "/" ($root.Permalink | relLangURL) }}.md" target="_blank" rel="noreferrer">
+      <button class="editBtn" aria-label="Edit This Page Button">
+        {{ i18n "edit-this-page" | default "EDIT THIS PAGE" }}
+      </button>
+    </a>
+  {{ end }}
 {{ end }}

layouts/shortcodes/featuredImage.html

@@ -0,0 +1,14 @@
+{{ $imgSrc := false }}
+{{ $params := $.Page.Params }}
+
+{{ if $params.image }}
+  {{ $imgSrc = $params.image }}
+{{ else if $params.featured_image }}
+  {{ $imgSrc = (print "images/" $params.featured_image) }}
+{{ end }}
+
+{{ if $imgSrc }}
+  <div class="featured-image__wrapper">
+    <img src="{{ $imgSrc | relURL }}" alt="{{ (.Get "alt") | default "Featured Image" }}" class="featured-image" style="width: {{ with (.Get "width") }}{{ . }}px{{ end }};height: {{ with (.Get "height") }}{{ . }}px{{ end }};">
+  </div>
+{{ end }}