Skip to content

Commit 45a5ce3

Browse files
committed
Enable post preview for a less dull experience
This will be used, along with other Open Graph (OG) metadata, for rich preview cards on sites like Discord, Twitter/X, Slack, LinkedIn, etc. - Title (og:title) - Description (og:description) - Preview image (og:image) - Site name (og:site_name) - URL (og:url) To prevent the card's 'image:' from the front matter to be used by Chirpy as a "hero image" in the post, we override the default post layout and add a per-post image setting 'show_in_post: false'. Signed-off-by: Joachim Wiberg <troglobit@gmail.com>
1 parent 4c1007c commit 45a5ce3

14 files changed

+207
-0
lines changed

_layouts/post.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
---
2+
layout: default
3+
refactor: true
4+
panel_includes:
5+
- toc
6+
tail_includes:
7+
- related-posts
8+
- post-nav
9+
- comments
10+
---
11+
12+
{% include lang.html %}
13+
14+
<article class="px-1">
15+
<header>
16+
<h1 data-toc-skip>{{ page.title }}</h1>
17+
{% if page.description %}
18+
<p class="post-desc fw-light mb-4">{{ page.description }}</p>
19+
{% endif %}
20+
21+
<div class="post-meta text-muted">
22+
<!-- published date -->
23+
<span>
24+
{{ site.data.locales[lang].post.posted }}
25+
{% include datetime.html date=page.date tooltip=true lang=lang %}
26+
</span>
27+
28+
<!-- lastmod date -->
29+
{% if page.last_modified_at and page.last_modified_at != page.date %}
30+
<span>
31+
{{ site.data.locales[lang].post.updated }}
32+
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
33+
</span>
34+
{% endif %}
35+
36+
{% if page.image and page.image.show_in_post != false %}
37+
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
38+
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
39+
{% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
40+
41+
{% if page.image.lqip %}
42+
{%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
43+
{% endif %}
44+
45+
<div class="mt-3 mb-3">
46+
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
47+
{%- if page.image.alt -%}
48+
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
49+
{%- endif -%}
50+
</div>
51+
{% endif %}
52+
53+
<div class="d-flex justify-content-between">
54+
<!-- author(s) -->
55+
<span>
56+
{% if page.author %}
57+
{% assign authors = page.author %}
58+
{% elsif page.authors %}
59+
{% assign authors = page.authors %}
60+
{% endif %}
61+
62+
{{ site.data.locales[lang].post.written_by }}
63+
64+
<em>
65+
{% if authors %}
66+
{% for author in authors %}
67+
{% if site.data.authors[author].url -%}
68+
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
69+
{%- else -%}
70+
{{ site.data.authors[author].name }}
71+
{%- endif %}
72+
{% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
73+
{% endfor %}
74+
{% else %}
75+
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
76+
{% endif %}
77+
</em>
78+
</span>
79+
80+
<div>
81+
<!-- pageviews -->
82+
{% if site.pageviews.provider and site.analytics[site.pageviews.provider].id %}
83+
<span>
84+
<em id="pageviews">
85+
<i class="fas fa-spinner fa-spin small"></i>
86+
</em>
87+
{{ site.data.locales[lang].post.pageview_measure }}
88+
</span>
89+
{% endif %}
90+
91+
<!-- read time -->
92+
{% include read-time.html content=content prompt=true lang=lang %}
93+
</div>
94+
</div>
95+
</div>
96+
</header>
97+
98+
<div class="content">
99+
{{ content }}
100+
</div>
101+
102+
<div class="post-tail-wrapper text-muted">
103+
<!-- categories -->
104+
{% if page.categories.size > 0 %}
105+
<div class="post-meta mb-3">
106+
<i class="far fa-folder-open fa-fw me-1"></i>
107+
{% for category in page.categories %}
108+
<a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
109+
{%- unless forloop.last -%},{%- endunless -%}
110+
{% endfor %}
111+
</div>
112+
{% endif %}
113+
114+
<!-- tags -->
115+
{% if page.tags.size > 0 %}
116+
<div class="post-tags">
117+
<i class="fa fa-tags fa-fw me-1"></i>
118+
{% for tag in page.tags %}
119+
<a
120+
href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
121+
class="post-tag no-text-decoration"
122+
>
123+
{{- tag -}}
124+
</a>
125+
{% endfor %}
126+
</div>
127+
{% endif %}
128+
129+
<div
130+
class="
131+
post-tail-bottom
132+
d-flex justify-content-between align-items-center mt-5 pb-2
133+
"
134+
>
135+
<div class="license-wrapper">
136+
{% if site.data.locales[lang].copyright.license.template %}
137+
{% capture _replacement %}
138+
<a href="{{ site.data.locales[lang].copyright.license.link }}">
139+
{{ site.data.locales[lang].copyright.license.name }}
140+
</a>
141+
{% endcapture %}
142+
143+
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
144+
{% endif %}
145+
</div>
146+
147+
{% include post-sharing.html lang=lang %}
148+
</div>
149+
<!-- .post-tail-bottom -->
150+
</div>
151+
<!-- div.post-tail-wrapper -->
152+
</article>

_posts/2024-01-30-ospf-unnumbered-infix.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ title: OSPF Unnumbered Interfaces
33
author: vatn
44
date: 2024-01-30 17:06:42 +0200
55
tags: [networking, ospf]
6+
image:
7+
path: /assets/img/ospf-unnumbered-fig1.svg
8+
alt: OSPF unnumbered interfaces network diagram
9+
show_in_post: false
610
---
711

812
This post explains how to use *Unnumbered Interfaces* to simplify OSPF

_posts/2024-03-08-containers.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ author: troglobit
44
date: 2024-03-08 15:44:42 +0100
55
categories: [showcase]
66
tags: [container, containers, docker, podman]
7+
image:
8+
path: /assets/img/docker.webp
9+
alt: Docker whale
10+
show_in_post: false
711
---
812

913
![Docker whale](/assets/img/docker.webp){: width="200" .right}

_posts/2024-03-11-advanced-containers.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ author: troglobit
44
date: 2024-03-11 14:11:50 +0100
55
categories: [showcase]
66
tags: [container, containers, docker, podman]
7+
image:
8+
path: /assets/img/docker.webp
9+
alt: Docker whale
10+
show_in_post: false
711
---
812

913
![Docker whale](/assets/img/docker.webp){: width="200" .right}

_posts/2024-03-12-firewall-container.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ date: 2024-03-12 08:08:41 +0100
55
last_modified_at: 2026-02-27 12:00:00 +0100
66
categories: [showcase]
77
tags: [container, containers, networking, firewall, docker, podman]
8+
image:
9+
path: /assets/img/docker.webp
10+
alt: Docker whale
11+
show_in_post: false
812
---
913

1014
![Docker whale](/assets/img/docker.webp){: width="200" .right}

_posts/2024-07-26-mascot.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ date: 2024-07-26 06:31:00 +0100
55
categories: [misc]
66
tags: [mascot, jack, jacky]
77
pin: false
8+
image:
9+
path: /assets/img/jack.png
10+
alt: Jack, or Jacky
11+
show_in_post: false
812
---
913

1014
If you didn't know this already, our RJ45-dwelling penguin 🐧 mascot is

_posts/2024-08-13-router-boards.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ last_modified_at: 2026-03-08 10:00:00 +0100
66
categories: [showcase]
77
tags: [boards]
88
pin: true
9+
image:
10+
path: /assets/img/bpi-r3-mini.jpg
11+
alt: Banana Pi BPi-R3 Mini Router
12+
show_in_post: false
913
---
1014

1115
Much thanks to the solid foundation curated by [Buildroot][1], Infix can

_posts/2024-10-15-basic-container.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ date: 2024-10-15 07:00:00 +0100
55
last_modified_at: 2026-02-27 12:00:00 +0100
66
categories: [showcase]
77
tags: [container, containers, networking, docker, podman]
8+
image:
9+
path: /assets/img/docker.webp
10+
alt: Docker whale
11+
show_in_post: false
812
---
913

1014
![Docker whale](/assets/img/docker.webp){: width="200" .right}

_posts/2025-10-27-banana-pi-r3.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ date: 2025-10-27 08:02:00 +0100
55
last_modified_at: 2026-02-27 10:00:00 +0100
66
categories: [showcase]
77
tags: [boards]
8+
image:
9+
path: /assets/img/bpi-r3-board.jpg
10+
alt: Banana Pi BPi-R3 router board
11+
show_in_post: false
812
---
913

1014
Infix now supports the [Banana Pi BPi-R3][1], an [affordable][7] (€130-€150),

_posts/2025-10-29-zone-based-firewall.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ author: troglobit
44
date: 2025-10-29 08:10:00 +0100
55
categories: [howto]
66
tags: [firewall, networking, security, zbf]
7+
image:
8+
path: /assets/img/fw-zones.svg
9+
alt: Traffic flow diagram showing zone-based firewall policies including a DMZ
10+
show_in_post: false
711
---
812

913
As of Infix v25.10, a zone-based firewall (ZBF) built on [firewalld][2]

0 commit comments

Comments
 (0)