From 9795a7535f51defd6e5ebab3342f9293eb509af4 Mon Sep 17 00:00:00 2001
From: Mirus <mirusim@gmail.com>
Date: Fri, 23 Aug 2024 12:29:28 +0300
Subject: [PATCH] feat: coverCaption

---
 README.md                          |   1 +
 archetypes/posts.md                |   1 +
 assets/css/post.scss               |  12 +++
 demoSite/content/posts/css-vars.md |   1 +
 demoSite/hugo.toml                 | 120 ++++++++++++++---------------
 layouts/partials/cover.html        |  23 ++++--
 6 files changed, 93 insertions(+), 65 deletions(-)

diff --git a/README.md b/README.md
index da1cdec..b8c0506 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,7 @@ So, welcome aboard! I'm excited to have you join us on this journey as we shape
 - site top banner, aka call to action banner
 - migrated from SCSS variable to CSS' Native, it brings super easy color customization via `style.css`
 - add submenus for the main menu
+- `coverCaption` for your article covers. Now you can add some information about the image in proper way
 
 ----
 
diff --git a/archetypes/posts.md b/archetypes/posts.md
index af38c55..3e3e249 100644
--- a/archetypes/posts.md
+++ b/archetypes/posts.md
@@ -4,6 +4,7 @@ date = "{{ .Date }}"
 author = ""
 authorTwitter = "" #do not include @
 cover = ""
+coverCaption = ""
 tags = ["", ""]
 keywords = ["", ""]
 description = ""
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 594e02e..9c50531 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -134,3 +134,15 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 .footnotes {
   color: color-mix(in srgb, var(--accent), transparent 50%);
 }
+
+figure:has(.post-cover) {
+  margin: 20px;
+
+  & > .post-cover {
+    margin: 0;
+  }
+
+  & > figcaption {
+    margin-top: 0;
+  }
+}
\ No newline at end of file
diff --git a/demoSite/content/posts/css-vars.md b/demoSite/content/posts/css-vars.md
index 6beba0d..9cf0db2 100644
--- a/demoSite/content/posts/css-vars.md
+++ b/demoSite/content/posts/css-vars.md
@@ -3,6 +3,7 @@ title = "CSS Variables update"
 date = "2024-07-30"
 author = "Mirus"
 cover = "img/css-variables-update.webp"
+coverCaption = "By the way, you can add a caption for your cover"
 description = "A small demo of native CSS Variables. You can create your very own re-Terminal today!"
 layout = "css-vars-showcase"
 Toc=true
diff --git a/demoSite/hugo.toml b/demoSite/hugo.toml
index 7ec08b4..ec8c838 100644
--- a/demoSite/hugo.toml
+++ b/demoSite/hugo.toml
@@ -4,72 +4,72 @@ languageCode = "en-us"
 paginate = 5
 
 [params]
-contentTypeName = "posts"
-themeColor = "blue"
-showMenuItems = 3
-fullWidthTheme = false
-centerTheme = true
-[params.banner]
-dismissible = false
-text = "Check it out on GitHub"
-url = "https://github.com/mirus-ua/hugo-theme-re-terminal"
+  contentTypeName = "posts"
+  themeColor = "blue"
+  showMenuItems = 3
+  fullWidthTheme = false
+  centerTheme = true
+  [params.banner]
+    dismissible = false
+    text = "Check it out on GitHub"
+    url = "https://github.com/mirus-ua/hugo-theme-re-terminal"
 
 [languages]
-[languages.en.params]
-title = "re-Terminal"
-subtitle = "A simple, retro theme for Hugo"
-keywords = ""
-copyright = ""
-menuMore = "Show more"
-readMore = "Read more"
-readOtherPosts = "Read other posts"
+  [languages.en.params]
+    title = "re-Terminal"
+    subtitle = "A simple, retro theme for Hugo"
+    keywords = ""
+    copyright = ""
+    menuMore = "Show more"
+    readMore = "Read more"
+    readOtherPosts = "Read other posts"
 
-[languages.en.params.logo]
-logoText = "re-Terminal"
-logoHomeLink = "/"
+    [languages.en.params.logo]
+      logoText = "re-Terminal"
+      logoHomeLink = "/"
 
 [languages.en.menu]
-[[languages.en.menu.main]]
-identifier = "submenu"
-name = "Sub menus"
-weight = 10
-[[languages.en.menu.main]]
-identifier = "subabout"
-name = "About"
-url = "/about"
-parent = "submenu"
-[[languages.en.menu.main]]
-identifier = "subshowcase"
-name = "Showcase"
-url = "/showcase"
-parent = "submenu"
-[[languages.en.menu.main]]
-identifier = "about"
-name = "About"
-url = "/about"
-[[languages.en.menu.main]]
-identifier = "showcase"
-name = "Showcase"
-url = "/showcase"
+  [[languages.en.menu.main]]
+    identifier = "submenu"
+    name = "Sub menus"
+    weight = 10
+  [[languages.en.menu.main]]
+    identifier = "subabout"
+    name = "About"
+    url = "/about"
+    parent = "submenu"
+  [[languages.en.menu.main]]
+    identifier = "subshowcase"
+    name = "Showcase"
+    url = "/showcase"
+    parent = "submenu"
+  [[languages.en.menu.main]]
+    identifier = "about"
+    name = "About"
+    url = "/about"
+  [[languages.en.menu.main]]
+    identifier = "showcase"
+    name = "Showcase"
+    url = "/showcase"
 
 
 # Only for demo deploy perpous
 [module]
-[[module.mounts]]
-source = 'demoSite/content'
-target = 'content'
-[[module.mounts]]
-source = 'demoSite/static'
-target = 'static'
-[[module.mounts]]
-source = 'static'
-target = 'static'
-[[module.mounts]]
-source = 'layouts'
-target = 'layouts'
-[[module.mounts]]
-source = 'demoSite/layouts'
-target = 'layouts'
-[[module.mounts]]
-source = 'archetypes'
-target = 'archetypes'
+  [[module.mounts]]
+    source = 'demoSite/content'
+    target = 'content'
+  [[module.mounts]]
+    source = 'demoSite/static'
+    target = 'static'
+  [[module.mounts]]
+    source = 'static'
+    target = 'static'
+  [[module.mounts]]
+    source = 'layouts'
+    target = 'layouts'
+  [[module.mounts]]
+    source = 'demoSite/layouts'
+    target = 'layouts'
+  [[module.mounts]]
+    source = 'archetypes'
+    target = 'archetypes'
diff --git a/layouts/partials/cover.html b/layouts/partials/cover.html
index ea562ea..58800cf 100644
--- a/layouts/partials/cover.html
+++ b/layouts/partials/cover.html
@@ -16,9 +16,22 @@
 {{- end -}}
 
 {{if $cover -}}
-  <!-- Cover image found -->
-  <img src="{{ $cover }}"
-    class="post-cover"
-    alt="{{ .Title | plainify | default " " }}"
-    title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" />
+  {{ if .Params.coverCaption }}
+    <figure> 
+      <!-- Cover image found -->
+      <img src="{{ $cover }}"
+      class="post-cover"
+      alt="{{ .Title | plainify | default " " }}"
+      title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" />
+      
+      <figcaption class="right">{{ .Params.coverCaption | safeHTML }}</figcaption>
+    </figure>
+  {{ else }}
+    <!-- Cover image found -->
+    <img src="{{ $cover }}"
+      class="post-cover"
+      alt="{{ .Title | plainify | default " " }}"
+      title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" />
+  {{ end }}
 {{- end }}
+