Generate card from banner if present. Use page/section description instead of config if available (fixes #51 and #50)

content/blog/the-quill-of-duck/index.md

@@ -7,7 +7,7 @@ updated = "2024-06-21"
 [taxonomies]
 tags = ["Demo", "Test"]
 [extra]
-banner = "quill.png#pixels"
+banner = "blog/the-quill-of-duck/quill.png"
 toc = true
 trigger = "This page contains blackjack and hookers, and bad jokes such as this one."
 disclaimer = """
@@ -27,6 +27,10 @@ Recommended banner dimensions are 2:1 aspect ratio and 1920x960 resolution.
 Other sizes will also work, but will be cut off at the bottom/won't be high enough.
 {% end %}
 
+{% alert(note=true) %}
+The path to the banner should be the same as the resulting path to the post, e.g. `blog/the-quill-of-duck/quill.png`. If the folder name has a timestamp, remove it. You can simply open the post in your browser and copy the path from the URL.
+{% end %}
+
 ## The what?
 
 This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo.

templates/article.html

@@ -7,7 +7,7 @@
 <article>
 	{%- if page.extra.banner -%}
 		<div id="banner-container">
-			<img id="banner" class="full-bleed" src="{{ current_url | safe }}{{ page.extra.banner }}" {%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%} />
+			<img id="banner" class="full-bleed{% if page.extra.banner_pixels %} pixels{% endif %}" src="{{ get_url(path=page.extra.banner, lang=lang)}}" {% if config.markdown.lazy_async_image %}decoding="async" loading="lazy"{% endif %} />
 		</div>
 	{%- endif -%}
 
@@ -15,13 +15,13 @@
 
 	{%- if page.date -%}
 		<small>
-			<time datetime="{{ page.date | date(format=' %+') }}" pubdate>
+			<time datetime="{{ page.date | date(format=' %+') }}">
 				{{- macros_translate::translate(key="published", default="Published on", language_strings=language_strings) }}
 				{{ page.date | date(format=date_format, locale=date_locale) -}}
 			</time>
 			{%- if page.updated -%}
 				<span> • </span>
-				<time datetime="{{ page.updated | date(format=' %+') }}" pubdate>
+				<time datetime="{{ page.updated | date(format=' %+') }}">
 					{{- macros_translate::translate(key="updated", default="Updated on", language_strings=language_strings) }}
 					{{ page.updated | date(format=date_format, locale=date_locale) -}}
 				</time>

templates/partials/card.html

@@ -0,0 +1,6 @@
+{%- if page.extra.banner -%}
+    {% set card = resize_image(path=page.extra.banner, width=1200, height=628, op="fill") %}
+    {{ card.url }}
+{%- else -%}
+    {{ get_url(path='card.png') }}
+{%- endif -%}

templates/partials/description.html

@@ -0,0 +1,7 @@
+{%- if page.description -%}
+    {{- page.description }}
+{%- elif section.description -%}
+    {{- section.description }}
+{%- else -%}
+    {{- config.description -}}
+{%- endif -%}

templates/partials/head.html

@@ -123,8 +123,7 @@
 	<meta property="og:site_name" content="{{ config.title }}" />
 	<meta property="og:title" content="{% include 'partials/title.html' %}" />
 	<meta property="og:url" content="{{ current_url | default(value='/') | safe }}" />
-	<meta property="og:description" content="{{ page.description | default(value=config.description) }}" />
+	<meta property="og:description" content="{% include 'partials/description.html' %}" />
-	<meta property="og:image" content="{{ get_url(path='card.png') }}" />
+	<meta property="og:image" content="{% include 'partials/card.html' %}" />
-	<meta property="twitter:card" content="summary_large_image" />
 	<meta property="og:locale" content="{{ macros_translate::translate(key='date_locale', default='en_US', language_strings=language_strings) }}" />
 </head>