Skip to content

Commit af54ee9

Browse files
neural-loopneural-loop
authored
Merge pull request open-neuromorphic#226 from neural-loop/design-adjustments
Design adjustments - social media sharing
2 parents 46f54f0 + 61291b0 commit af54ee9

File tree

12 files changed

+246
-61
lines changed

12 files changed

+246
-61
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 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 opacity-0 pointer-events-none;
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+
pointer-events: none;
43+
}
44+
45+
.social-icons-container {
46+
@apply flex justify-center gap-3 w-full px-4 relative;
47+
transform: translateY(-50%);
48+
}
49+
50+
.social-icon {
51+
@apply text-white text-xl w-9 h-9 flex items-center justify-center transition-all duration-300 ease-in-out no-underline;
52+
background: rgba(0,0,0, 0.6);
53+
backdrop-filter: blur(2px);
54+
border-radius: 50%;
55+
pointer-events: auto;
56+
57+
&:hover {
58+
transform: scale(1.1);
59+
background: var(--color-primary-new);
60+
}
61+
62+
svg {
63+
pointer-events: none;
64+
}
65+
}
66+
67+
.dark .social-icon:hover {
68+
background: var(--color-darkmode-primary);
69+
}
70+
71+
.sharing-runner {
72+
@apply absolute bottom-0 left-0 right-0 h-10 flex items-center justify-between px-4 transition-all duration-300 ease-in-out z-[3] opacity-100;
73+
background: rgba(0,0,0, 0.7);
74+
backdrop-filter: blur(3px);
75+
color: white;
76+
77+
span {
78+
@apply text-lg font-medium;
79+
}
80+
}
81+
82+
.runner-icons {
83+
@apply flex gap-5 items-center;
84+
svg {
85+
@apply text-xl text-white opacity-80;
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+
@apply opacity-0;
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: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
{{ partial "page-header" . }}
33
<section class="section pt-6">
44
<div class="container">
5-
<div class="row">
6-
<article class="{{ if gt (len .TableOfContents) 80 }}lg:col-8{{ else }}lg:col-10{{ end }}">
5+
<div class="row lg:items-stretch">
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,11 @@
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>
21-
</div>
17+
{{ partial "components/share-cta.html" . }}
2218
{{ partial "components/author-bios.html" . }}
19+
2320
</article>
21+
2422
{{ partial "components/sidebar-toc-shared.html" . }}
2523
</div>
2624

@@ -30,6 +28,7 @@
3028
{{ $related = $related | shuffle | first 3 }}
3129
{{ with $related }}
3230
<div class="section pb-0">
31+
<h2 class="h3 mb-6 text-center">Related Posts</h2>
3332
<div class="row">
3433
{{ range . }}
3534
<div class="lg:col-4">

‎layouts/neuromorphic-hardware/single.html

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,47 @@
11
{{ define "main" }}
2-
{{ partial "page-header" . }}
3-
<section class="section pt-6">
4-
<div class="container">
5-
<div class="row">
6-
<div>
7-
<div class="content-panel p-6 shadow-lg">
8-
{{ partial "hardware/product-info" .Page }}
2+
{{ partial "page-header" . }}
3+
<section class="section pt-6">
4+
<div class="container">
5+
{{/* Row 1: "At a Glance" section, full width */}}
6+
<div class="row mb-8">
7+
<div class="lg:col-12">
8+
<div class="content-panel p-6 shadow-lg">
9+
{{ partial "hardware/product-info" .Page }}
10+
</div>
911
</div>
1012
</div>
11-
<article class="{{ if gt (len .TableOfContents) 80 }}lg:col-8{{ else }}lg:col-10{{ end }}">
12-
<div class="content mb-10">
13+
14+
{{/* Row 2: Main content and sidebar */}}
15+
<div class="row lg:items-stretch">
16+
<article
17+
class="{{ if gt (len .TableOfContents) 80 }}lg:col-8{{ else }}lg:col-10 mx-auto{{ end }}">
1318
<p class="mb-6 text-xl">{{ .Params.summary }}</p>
14-
<div class="content-panel p-6 shadow-lg">
19+
<div class="content-panel p-6 shadow-lg mb-8">
1520
{{ partial "hardware/company-info" .Page }}
1621
</div>
17-
{{ .Content }}
18-
</div>
19-
<div class="row items-start justify-between">
20-
<div class="lg:col-12 flex justify-end">
21-
{{ partial "override-social-share" (dict "Context" . "Class" "share-icons" "Title" (i18n "share") "Whatsapp"
22-
true "Telegram" false) }}
22+
<div class="content mb-10">
23+
{{ .Content }}
2324
</div>
24-
</div>
25-
</article>
26-
{{ partial "components/sidebar-toc-shared.html" . }}
27-
</div>
25+
{{ partial "components/share-cta.html" . }}
26+
</article>
27+
{{ partial "components/sidebar-toc-shared.html" . }}
28+
</div>
2829

29-
<!-- Related posts -->
30-
{{ $related := (where site.RegularPages "Section" "blog") | intersect (where
31-
site.RegularPages ".Title" "!=" .Title) | union (site.RegularPages.Related . ) }}
32-
{{ $related = $related | shuffle | first 3 }}
33-
{{ with $related }}
34-
<div class="section pb-0">
35-
<div class="row">
36-
{{ range . }}
37-
<div class="lg:col-4">
38-
{{ partial "components/blog-card" . }}
30+
<!-- Related posts -->
31+
{{ $related := (where site.RegularPages "Section" "blog") | intersect (where
32+
site.RegularPages ".Title" "!=" .Title) | union (site.RegularPages.Related . ) }}
33+
{{ $related = $related | shuffle | first 3 }}
34+
{{ with $related }}
35+
<div class="section pb-0">
36+
<div class="row">
37+
{{ range . }}
38+
<div class="lg:col-4">
39+
{{ partial "components/blog-card" . }}
40+
</div>
41+
{{ end }}
42+
</div>
3943
</div>
40-
{{ end }}
41-
</div>
44+
{{ end }}
4245
</div>
43-
{{ end }}
44-
</div>
45-
</section>
46+
</section>
4647
{{ end }}

‎layouts/neuromorphic-software/single.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{{ partial "page-header" . }}
33
<section class="section pt-6">
44
<div class="container">
5-
<div class="row lg:gx-8">
5+
<div class="row lg:gx-8 lg:items-stretch">
66
{{/* Main Content Column */}}
77
<div class="lg:col-8">
88
<article class="content mb-10">

‎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/share-cta.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="share-cta-section mt-12 pt-8">
2+
<div class="text-center">
3+
<h2 class="text-3xl font-bold mb-4">Enjoy this content? Share it!</h2>
4+
<p class="max-w-2xl mx-auto mb-8 text-lg text-gray-600 dark:text-gray-400">
5+
Sharing our articles and resources is one of the easiest and most effective ways to support Open Neuromorphic. It helps us reach a wider audience, grow our community, and continue our mission of advancing open-source neuromorphic computing. Your support is greatly appreciated!
6+
</p>
7+
</div>
8+
9+
{{ partial "components/og-preview.html" . }}
10+
</div>

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

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
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) }}
2+
<aside class="lg:col-4 hidden lg:block">
3+
<div class="mb-6">
4+
{{ partial "components/og-preview.html" . }}
55
</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>
6+
<div class="sticky top-24 space-y-6">
7+
{{/* Table of Contents Section */}}
8+
<div class="px-3 pt-5 pb-5 content-panel">
9+
<div class="pb-3">
10+
<strong class="text-xl">Table of Contents</strong>
11+
</div>
12+
<div id="tableOfContentContainer" class="max-h-[calc(100vh-28rem)] overflow-y-auto">
13+
{{ .TableOfContents }}
14+
</div>
915
</div>
10-
<aside class="tableOfContentContainer" id="tableOfContentContainer">
11-
{{ .TableOfContents }}
12-
</aside>
1316
</div>
14-
</div>
15-
{{ end }}
17+
</aside>
18+
{{ 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: "";

‎layouts/shortcodes/toc.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@
88
{{ end }}
99
</summary>
1010
{{ .Page.TableOfContents }}
11-
</details>
11+
</details>

0 commit comments

Comments
 (0)