Merge pull request #15 from mirus-ua/14-feat-post-banner-image-source

[feat] cover caption on post page

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
 
 ----
 

archetypes/posts.md

@@ -4,6 +4,7 @@ date = "{{ .Date }}"
 author = ""
 authorTwitter = "" #do not include @
 cover = ""
+coverCaption = ""
 tags = ["", ""]
 keywords = ["", ""]
 description = ""

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;
+  }
+}

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

layouts/partials/cover.html

@@ -16,9 +16,22 @@
 {{- end -}}
 
 {{if $cover -}}
+  {{ 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 }}
+