From 24af9ac892f6f3933f371c41f80d8757f4623c73 Mon Sep 17 00:00:00 2001 From: Ben Parker Date: Wed, 11 Sep 2024 08:21:14 +0100 Subject: [PATCH 1/2] add social sharing buttons to blog post --- src/assets/icons/mastodon.svg | 3 + src/components/sections/SocialsSharing.astro | 173 +++++++++++++++++++ src/content/data/socialsSharing.yaml | 8 + src/layouts/BlogLayout.astro | 17 +- 4 files changed, 195 insertions(+), 6 deletions(-) create mode 100644 src/assets/icons/mastodon.svg create mode 100644 src/components/sections/SocialsSharing.astro create mode 100644 src/content/data/socialsSharing.yaml diff --git a/src/assets/icons/mastodon.svg b/src/assets/icons/mastodon.svg new file mode 100644 index 0000000..9ba916e --- /dev/null +++ b/src/assets/icons/mastodon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/sections/SocialsSharing.astro b/src/components/sections/SocialsSharing.astro new file mode 100644 index 0000000..881f155 --- /dev/null +++ b/src/components/sections/SocialsSharing.astro @@ -0,0 +1,173 @@ +--- +import { Icon } from "astro-icon/components"; +import { getEntry } from "astro:content"; + +type Props = { + size?: number; + color?: string; + outline?: boolean; + styles?: string; + description: string; +}; + +const { data: icons } = await getEntry("data", "socialsSharing"); + +const url = Astro.request.url; + +const encodedUrl = encodeURIComponent(url); + +const links = [ + { + name: "Facebook", + baseUrl: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&src=sdkpreparse`, + }, + { + name: "X", + baseUrl: `https://twitter.com/intent/tweet?url=${url}`, + }, + { + name: "LinkedIn", + baseUrl: `http://www.linkedin.com/shareArticle?mini=true&url=${url}`, + }, + { + name: "Mastodon", + baseUrl: "test", + }, +]; + +const iconMap = icons.reduce( + (acc: { [x: string]: any }, item: { label: string; icon: any }) => { + acc[item.label] = item.icon; + return acc; + }, + {} +); + +const mergedLists = links.map((item) => ({ + ...item, + icon: iconMap[item.name], +})); + +const { size, color, outline, styles, description } = Astro.props; +const iconColor = color ? `text-${color}` : "text-white"; +const borderColor = color ? `border-${color}` : `border-white`; +--- + +
+ +
+
+ + +
+ Submit + +
+ +
+
+ + + +
+ diff --git a/src/content/data/socialsSharing.yaml b/src/content/data/socialsSharing.yaml new file mode 100644 index 0000000..941c4b0 --- /dev/null +++ b/src/content/data/socialsSharing.yaml @@ -0,0 +1,8 @@ +- label: X + icon: X +- label: Facebook + icon: facebook +- label: LinkedIn + icon: linkedin +- label: Mastodon + icon: mastodon diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro index 18a24ab..af45779 100644 --- a/src/layouts/BlogLayout.astro +++ b/src/layouts/BlogLayout.astro @@ -12,6 +12,7 @@ import stripMarkdown from "strip-markdown"; import ArticleContent from "@/components/article/ArticleContent.astro"; import { getCollection } from "astro:content"; import BlogListing from "@/components/article/blog/BlogListing.astro"; +import SocialsSharing from "@/components/sections/SocialsSharing.astro"; type Props = { post: CollectionEntry<"blogs">; @@ -91,13 +92,11 @@ if (related.length > 0) {
+ class="z-0">
+ ]}>

{title}

@@ -127,6 +126,13 @@ if (related.length > 0) { class="block sm:inline-block sm:before:content-['|'] sm:before:mx-4" >{readTime} +

    { @@ -147,8 +153,7 @@ if (related.length > 0) {