From 3a27b2064eb8b57cf18744d829dc9e5d5c0e0df2 Mon Sep 17 00:00:00 2001 From: bpato Date: Sat, 26 Jul 2025 20:24:42 +0200 Subject: [PATCH] feat: Add social share buttons to blog page and fix styles --- package-lock.json | 7 +++ package.json | 1 + src/components/Blog/BlogCard.astro | 3 +- src/components/SocialMeta.astro | 22 ++++++--- src/layouts/Layout.astro | 16 +++++-- src/lib/wpResources.ts | 17 +++++-- src/pages/[pageSlug].astro | 8 +++- src/pages/post/[postSlug].astro | 74 +++++++++++++++++++++++++++++- 8 files changed, 127 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index 70bdc27..fd8964d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@wordpress/url": "^4.26.0", "aos": "^2.3.4", "astro": "^5.11.0", + "astro-social-share": "^2.2.0", "tailwindcss": "^4.1.11", "toml": "^3.0.0" }, @@ -2134,6 +2135,12 @@ "sharp": "^0.33.3" } }, + "node_modules/astro-social-share": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/astro-social-share/-/astro-social-share-2.2.0.tgz", + "integrity": "sha512-Z5ebhO6Yw4GLggw7wsTahdpS0f4pf/XuVjQlBpWZ0zyt0cKaVrlG/+u6RzrzN9B2t27wxp90XiosZNwvBZqA+Q==", + "license": "MIT" + }, "node_modules/axobject-query": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", diff --git a/package.json b/package.json index dcf6f09..0e8c448 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@wordpress/url": "^4.26.0", "aos": "^2.3.4", "astro": "^5.11.0", + "astro-social-share": "^2.2.0", "tailwindcss": "^4.1.11", "toml": "^3.0.0" }, diff --git a/src/components/Blog/BlogCard.astro b/src/components/Blog/BlogCard.astro index 2b596ca..0ef44ed 100644 --- a/src/components/Blog/BlogCard.astro +++ b/src/components/Blog/BlogCard.astro @@ -61,8 +61,9 @@ const date = new Date(dateGmt).toLocaleDateString("en-US", { img && ( {img.node.altText} ) } diff --git a/src/components/SocialMeta.astro b/src/components/SocialMeta.astro index 2db0d8a..5cf58b1 100644 --- a/src/components/SocialMeta.astro +++ b/src/components/SocialMeta.astro @@ -2,8 +2,12 @@ export type Props = { title: string; metaDesc: string; - filePath: string; - pageType: string; + opengraphImage: { + sourceUrl: string; + }; + schema: { + pageType: string; + }; }; const domain = import.meta.env.DOMAIN; @@ -11,20 +15,24 @@ const domain = import.meta.env.DOMAIN; const { title = "", metaDesc = "", - filePath = `${domain}/images/hero.webp`, - pageType = "", + opengraphImage = { + sourceUrl: `${domain}/images/hero.webp`, + }, + schema = { + pageType: "", + }, } = Astro.props; --- - + - + - + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e2322a4..45a88da 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -18,8 +18,12 @@ export type Props = { seo?: { title: string; metaDesc: string; - filePath: string; - pageType: string; + opengraphImage: { + sourceUrl: string; + }; + schema: { + pageType: string; + }; }; }; @@ -33,8 +37,12 @@ const { title: "Brais Pato's Portfolio", metaDesc: "I'm Brais Pato, Galician based Senior Backend Developer with 6+ years industry experience.", - filePath: `${domain}/images/hero.webp`, - pageType: "WebPage", + opengraphImage: { + sourceUrl: `${domain}/images/hero.webp`, + }, + schema: { + pageType: "WebPage", + }, }, } = Astro.props; --- diff --git a/src/lib/wpResources.ts b/src/lib/wpResources.ts index 2d17ae2..066cdb2 100644 --- a/src/lib/wpResources.ts +++ b/src/lib/wpResources.ts @@ -13,7 +13,8 @@ export enum Page { pageType } opengraphImage { - filePath + srcSet + sourceUrl } } } @@ -34,7 +35,9 @@ export enum Post { featuredImage { node { altText - link + uri + srcSet + sourceUrl } } tags { @@ -51,7 +54,8 @@ export enum Post { pageType } opengraphImage { - filePath + srcSet + sourceUrl } } } @@ -77,7 +81,9 @@ export enum Post { featuredImage { node { altText - link + uri + srcSet + sourceUrl } } tags { @@ -94,7 +100,8 @@ export enum Post { pageType } opengraphImage { - filePath + srcSet + sourceUrl } } } diff --git a/src/pages/[pageSlug].astro b/src/pages/[pageSlug].astro index 9878a7c..d44fd3f 100644 --- a/src/pages/[pageSlug].astro +++ b/src/pages/[pageSlug].astro @@ -14,8 +14,12 @@ export type Props = { seo: { title: string; metaDesc: string; - filePath: string; - pageType: string; + opengraphImage: { + sourceUrl: string; + }; + schema: { + pageType: string; + }; }; }; diff --git a/src/pages/post/[postSlug].astro b/src/pages/post/[postSlug].astro index 8aa99b7..ae654aa 100644 --- a/src/pages/post/[postSlug].astro +++ b/src/pages/post/[postSlug].astro @@ -7,6 +7,13 @@ import PageWrapper from "../../components/PageWrapper.astro"; import Breadcrumb, { type BreadcrumbParams, } from "@/components/Breadcrumb/Breadcrumb.astro"; +import { + SocialShare, + TwitterShareButton, + BlueskyShareButton, + LinkedInShareButton, + WhatsAppShareButton, +} from "astro-social-share"; const { postSlug: slug } = Astro.params; @@ -56,7 +63,7 @@ const postBc = { slug: slug, } satisfies BreadcrumbParams; -const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]"; +const sizeBack = img ? "h-[85%] md:h-[35%] xl:h-[60%]" : "h-[360px]"; --- @@ -86,8 +93,9 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]"; img && ( {img.node.altText} ) } @@ -97,11 +105,33 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";

SHARE:

+
+ +