Skip to content

Commit 69a38ab

Browse files
neural-loopneural-loop
committed
feat: blog: Enhance post sharing and TOC display
Adds sharing CTA to blog posts and improves TOC. - Implements a new OG preview component for sharing. - Improves sticky TOC. - Removes unused icon from data. - Updates styling and layout.
1 parent 5fe513f commit 69a38ab

File tree

8 files changed

+201
-22
lines changed

8 files changed

+201
-22
lines changed

‎assets/scss/components/_og-preview.scss

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
.og-preview-wrapper {
2+
@apply relative max-w-sm mx-auto p-2 lg:max-w-xs;
3+
}
4+
5+
.og-preview-container {
6+
@apply relative w-full rounded-lg overflow-hidden transition-all duration-300 ease-in-out;
7+
box-shadow: 0 4px 12px rgba(0,0,0, 0.2), 0 0 0 1px theme('colors.border'), 0 0 15px rgba(102, 126, 234, 0.3);
8+
aspect-ratio: 1.91 / 1;
9+
10+
&:hover {
11+
@apply lg:scale-110;
12+
box-shadow: 0 6px 20px rgba(0,0,0, 0.15), 0 0 0 1px var(--color-primary-new), 0 0 25px rgba(102, 126, 234, 0.5);
13+
14+
.social-share-overlay {
15+
@apply opacity-100;
16+
}
17+
.sharing-runner {
18+
@apply translate-y-full;
19+
}
20+
}
21+
}
22+
23+
.dark .og-preview-container {
24+
box-shadow: 0 4px 12px rgba(0,0,0, 0.4), 0 0 0 1px theme('colors.darkmode.border'), 0 0 20px rgba(188, 251, 255, 0.4);
25+
&:hover {
26+
box-shadow: 0 6px 25px rgba(0,0,0, 0.3), 0 0 0 1px theme('colors.darkmode.primary'), 0 0 30px rgba(188, 251, 255, 0.6);
27+
}
28+
}
29+
30+
.og-preview-image {
31+
@apply w-full h-full bg-cover bg-center bg-no-repeat relative;
32+
background-color: theme('colors.body');
33+
}
34+
35+
.image-dark-overlay {
36+
@apply absolute inset-0 z-[1] pointer-events-none;
37+
background: rgba(0,0,0,0);
38+
}
39+
40+
.social-share-overlay {
41+
@apply absolute left-0 right-0 bottom-0 h-auto flex justify-center opacity-0 transition-opacity duration-300 ease-in-out z-[2];
42+
}
43+
44+
.social-icons-container {
45+
@apply flex justify-center gap-3 w-full px-4 relative;
46+
transform: translateY(-50%);
47+
}
48+
49+
.social-icon {
50+
@apply text-white text-xl w-9 h-9 flex items-center justify-center transition-all duration-300 ease-in-out no-underline;
51+
background: rgba(0,0,0, 0.6);
52+
backdrop-filter: blur(2px);
53+
border-radius: 50%;
54+
55+
&:hover {
56+
transform: scale(1.1);
57+
background: var(--color-primary-new);
58+
}
59+
}
60+
61+
.dark .social-icon:hover {
62+
background: var(--color-darkmode-primary);
63+
}
64+
65+
.sharing-runner {
66+
@apply absolute bottom-0 left-0 right-0 h-10 flex items-center justify-between px-4 transition-transform duration-300 ease-in-out z-[3];
67+
background: rgba(0,0,0, 0.7);
68+
backdrop-filter: blur(3px);
69+
color: white;
70+
71+
span {
72+
@apply text-lg font-medium;
73+
}
74+
}
75+
76+
.runner-icons {
77+
@apply flex gap-5 items-center;
78+
svg {
79+
@apply text-xl text-white opacity-80;
80+
}
81+
}
82+
83+
@screen lg {
84+
.og-preview-wrapper {
85+
@apply mt-6;
86+
}
87+
}
88+
89+
@media (max-width: 1023.98px) {
90+
.og-preview-container:hover {
91+
transform: none;
92+
}
93+
.og-preview-image {
94+
background-size: contain;
95+
}
96+
.social-share-overlay {
97+
opacity: 1;
98+
}
99+
.sharing-runner {
100+
transform: translateY(100%);
101+
}
102+
}

‎assets/scss/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
@import "components/involvement-card";
4040
@import "components/hardware-card-wide"; // Add this line
4141

42+
@import "components/og-preview";
4243
// Import new custom typography and buttons
4344
@import "components/mega-menu"; // Add this line
4445
@import "typography-custom";

‎data/used_icons.yml

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ fontawesome_svgs:
77
- { style: solid, name: rocket }
88
- { style: solid, name: chalkboard-user }
99
- { style: solid, name: user-group }
10-
- { style: solid, name: user-group }
1110
- { style: solid, name: house }
1211
- { style: solid, name: magnifying-glass }
1312
- { style: solid, name: user }
@@ -24,6 +23,11 @@ fontawesome_svgs:
2423
- { style: brands, name: linkedin }
2524
- { style: brands, name: youtube }
2625
- { style: brands, name: wikipedia-w }
26+
- { style: brands, name: facebook }
27+
- { style: brands, name: x-twitter }
28+
- { style: brands, name: reddit }
29+
- { style: brands, name: whatsapp }
30+
- { style: brands, name: telegram }
2731
- { style: regular, name: circle-user }
2832
- { style: regular, name: clock }
2933
- { style: regular, name: calendar }

‎layouts/blog/single.html

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<section class="section pt-6">
44
<div class="container">
55
<div class="row">
6-
<article class="{{ if gt (len .TableOfContents) 80 }}lg:col-8{{ else }}lg:col-10{{ end }}">
6+
<article class="{{ if gt (len .TableOfContents) 80 }}lg:col-8{{ else }}lg:col-10 mx-auto{{ end }}">
77
{{ $image:= .Params.image }}
88
{{ if $image }}
99
<div class="mb-6">
@@ -14,13 +14,20 @@
1414
<div class="content mb-10">
1515
{{ .Content }}
1616
</div>
17-
<div class="row items-start justify-between">
18-
<div class="lg:col-12 flex justify-end">
19-
{{ partial "override-social-share" (dict "Context" . "Class" "share-icons" "Title" (i18n "share") "Whatsapp" true "Telegram" false) }}
20-
</div>
17+
18+
{{/* --- SHARING & SUPPORT CTA SECTION --- */}}
19+
<div class="border-t border-border dark:border-darkmode-border mt-10 pt-8 text-center">
20+
<h3 class="text-2xl font-bold mb-3">Enjoyed This Post? Support Our Community</h3>
21+
<p class="mb-6 text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
22+
Thanks for reading! If you made it this far, you might be interested in supporting us. Sharing our posts helps amplify our signal and get the word out—it's an extremely valuable way to support our community, along with linking to our content from your website.
23+
</p>
24+
{{ partial "components/og-preview.html" . }}
2125
</div>
26+
{{/* --- END SHARING & SUPPORT CTA SECTION --- */}}
27+
2228
{{ partial "components/author-bios.html" . }}
2329
</article>
30+
2431
{{ partial "components/sidebar-toc-shared.html" . }}
2532
</div>
2633

@@ -30,6 +37,7 @@
3037
{{ $related = $related | shuffle | first 3 }}
3138
{{ with $related }}
3239
<div class="section pb-0">
40+
<h2 class="h3 mb-6 text-center">Related Posts</h2>
3341
<div class="row">
3442
{{ range . }}
3543
<div class="lg:col-4">

‎layouts/partials/components/og-preview.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{{ $ogImageResource := "" }}
2+
3+
{{/* 1. Try to find the auto-generated OG image: [slug]-og.jpg */}}
4+
{{ if .File }}
5+
{{ $pageSlug := path.Base .File.Dir }}
6+
{{ $generatedOgImageName := printf "%s-og.jpg" $pageSlug }}
7+
{{ $ogImageResource = .Resources.GetMatch $generatedOgImageName }}
8+
{{ end }}
9+
10+
{{/* 2. If not found, fall back to the `image` param in front matter */}}
11+
{{ if not $ogImageResource }}
12+
{{ with .Params.image }}
13+
{{ $fmImage := . }}
14+
{{ $ogImageResource = $.Page.Resources.GetMatch $fmImage }}
15+
{{ if not $ogImageResource }}
16+
{{ $ogImageResource = resources.Get $fmImage }}
17+
{{ end }}
18+
{{ end }}
19+
{{ end }}
20+
21+
{{/* 3. If still not found, use a site-wide default */}}
22+
{{ if not $ogImageResource }}
23+
{{ with site.Params.metadata.image }}
24+
{{ $ogImageResource = resources.Get . }}
25+
{{ end }}
26+
{{ end }}
27+
28+
29+
{{ if $ogImageResource }}
30+
{{ $resizedOg := $ogImageResource.Fill "600x315 Lanczos q85" }}
31+
{{ $ogImageDisplay := $resizedOg.RelPermalink }}
32+
33+
<div class="og-preview-wrapper">
34+
<div class="og-preview-container">
35+
<div class="og-preview-image" style="background-image: url('{{ $ogImageDisplay }}')">
36+
<div class="image-dark-overlay"></div>
37+
<div class="social-share-overlay">
38+
<div class="social-icons-container">
39+
<a href="https://twitter.com/intent/tweet/?text={{ .Title | urlquery }}&url={{ .Permalink | absURL }}" target="_blank" rel="noopener" class="social-icon" title="Share on X/Twitter">
40+
{{ partial "icon.html" (dict "style" "brands" "name" "x-twitter") }}
41+
</a>
42+
<a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink | absURL }}" target="_blank" rel="noopener" class="social-icon" title="Share on Facebook">
43+
{{ partial "icon.html" (dict "style" "brands" "name" "facebook") }}
44+
</a>
45+
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink | absURL }}&title={{ .Title | urlquery }}" target="_blank" rel="noopener" class="social-icon" title="Share on LinkedIn">
46+
{{ partial "icon.html" (dict "style" "brands" "name" "linkedin") }}
47+
</a>
48+
</div>
49+
</div>
50+
</div>
51+
<div class="sharing-runner">
52+
<span>Share this post</span>
53+
<div class="runner-icons">
54+
{{ partial "icon.html" (dict "style" "brands" "name" "x-twitter") }}
55+
{{ partial "icon.html" (dict "style" "brands" "name" "facebook") }}
56+
{{ partial "icon.html" (dict "style" "brands" "name" "linkedin") }}
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
{{ end }}

‎layouts/partials/components/sidebar-toc-shared.html

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
{{ if gt (len .TableOfContents) 80 }}
2-
<div class="toc lg:col-4 md:hidden lg:block">
3-
<div class="pb-4 text-center">~ Share this Site ~
4-
{{ partial "override-social-share" (dict "Context" . "Class" "share-icons" "Whatsapp" true "Telegram" false) }}
5-
</div>
6-
<div class="px-3 pt-5 pb-5 content-panel">
7-
<div class="pb-3">
8-
<strong class="text-xl">Table of Contents</strong>
2+
<aside class="lg:col-4 hidden lg:block">
3+
<div class="sticky top-24">
4+
<div class="px-3 pt-5 pb-5 content-panel">
5+
<div class="pb-3">
6+
<strong class="text-xl">Table of Contents</strong>
7+
</div>
8+
<div id="tableOfContentContainer" class="max-h-[calc(100vh-12rem)] overflow-y-auto">
9+
{{ .TableOfContents }}
10+
</div>
911
</div>
10-
<aside class="tableOfContentContainer" id="tableOfContentContainer">
11-
{{ .TableOfContents }}
12-
</aside>
1312
</div>
14-
</div>
13+
</aside>
1514
{{ end }}

‎layouts/partials/essentials/style.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,14 @@
3838
.dark a[target='_blank']::after {
3939
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABtQTFRFAAAAaGlp////1tbWTE1N8vLykZKS8fHxdnZ2RkLL8wAAAAl0Uk5TAE//9SD/kP9kb5xATAAAAFlJREFUeJxNzTsKgDAQhOGpJLVH+IWQa1jYSxp7T+ARQsB7u4/Gafbb2UAkz8oWUwfohkeLATg1HXYp1B6YjN1RaLYRRSALQxaGbsXleEe8RNn/kJF/aqn6ABiVDmAZHw+0AAAAAElFTkSuQmCC');
4040
}
41-
.social-icons [target="_blank"]::after,
42-
.share-icons [target="_blank"]::after,
43-
.contributor-socials [target="_blank"]::after {
44-
content: none; /* Remove the 'external-link-alt' icon */
41+
/* --- EXCEPTION LIST --- */
42+
/* The global rule above adds an icon to all external links. */
43+
/* Add component-specific selectors here to suppress the icon where it's not wanted. */
44+
.social-icons a[target="_blank"]::after,
45+
.share-icons a[target="_blank"]::after,
46+
.contributor-socials a[target="_blank"]::after,
47+
.og-preview-container a[target="_blank"]::after {
48+
content: none;
4549
}
4650
a.btn[target='_blank']::after {
4751
content: "";

‎postcss.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const purgecssOptions = {
99
];
1010
},
1111
safelist: [
12-
/^swiper-/, /^lb-/, /^gl/, /^go/, /^gc/, /^gs/, /^gi/, /^gz/,
12+
/^lb-/, /^gl/, /^go/, /^gc/, /^gs/, /^gi/, /^gz/,
1313
/^gprev/, /^gnext/, /^desc/, /^zoom/, /^search/, /^:is/,
1414
/dark/, /show/, /dragging/, /fullscreen/, /loaded/, /visible/,
1515
/current/, /active/,

0 commit comments

Comments
 (0)