feat: Add social share buttons to blog page and fix styles

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"
   },

src/components/Blog/BlogCard.astro

@@ -61,8 +61,9 @@ const date = new Date(dateGmt).toLocaleDateString("en-US", {
           img && (
             <img
               class="object-cover object-center w-full h-50 md:h-96"
-              src={img.node.link}
+              src={img.node.sourceUrl}
               alt={img.node.altText}
+              srcset={img.node.srcSet}
             />
           )
         }

src/components/SocialMeta.astro

@@ -2,29 +2,37 @@
 export type Props = {
   title: string;
   metaDesc: string;
-  filePath: string;
-  pageType: string;
+  opengraphImage: {
+    sourceUrl: string;
+  };
+  schema: {
+    pageType: string;
+  };
 };
 
 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;
 ---
 
 <meta property="og:title" content={title} />
 <meta property="og:description" content={metaDesc} />
-<meta property="og:image" content={filePath} />
+<meta property="og:image" content={opengraphImage?.sourceUrl} />
 <meta property="og:url" content=`${domain}` />
-<meta property="og:type" content={pageType} />
+<meta property="og:type" content={schema?.pageType} />
 <meta property="og:site_name" content={title} />
 
 <meta name="twitter:card" content="photo" />
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={metaDesc} />
-<meta name="twitter:image" content={filePath} />
+<meta name="twitter:image" content={opengraphImage?.sourceUrl} />
 <meta name="twitter:url" content=`${domain}` />

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;
 ---

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
                 }
             }
         }

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;
+    };
   };
 };
 

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]";
 ---
 
 <Layout title=`${blogBc.name} - ${postBc.name}` {seo}>
@@ -86,8 +93,9 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";
           img && (
             <img
               class="object-cover object-center w-full h-50 md:h-96"
-              src={img.node.link}
+              src={img.node.sourceUrl}
               alt={img.node.altText}
+              srcset={img.node.srcSet}
             />
           )
         }
@@ -97,11 +105,33 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";
       </section>
       <div class="container mx-auto py-6 max-w-xl text-theme-black">
         <p>SHARE:</p>
+        <SocialShare
+          buttons={[
+            TwitterShareButton,
+            BlueskyShareButton,
+            LinkedInShareButton,
+            WhatsAppShareButton,
+          ]}
+          description={seo.metaDesc}
+          title={title}
+        />
       </div>
     </article>
   </PageWrapper>
 </Layout>
 
+<script>
+  document.addEventListener("astro:page-load", function () {
+    document.querySelectorAll("pre code").forEach((block) => {
+      const html = block.innerText
+        .replace(/(\/\/.*)/g, '<span class="comment">$1</span>') // JS o C-style
+        .replace(/(#.*)/g, '<span class="comment">$1</span>');
+
+      block.innerHTML = html;
+    });
+  });
+</script>
+
 <style>
   @media (min-width: 640px) {
     :global(.triangle) {
@@ -116,6 +146,11 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";
     font-weight: var(--font-weight-bold);
   }
 
+  .wp-page :global(h2.wp-block-heading) {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+
   .wp-page :global(p) {
     margin-block: calc(var(--spacing) * 5);
     color: var(--color-theme-black);
@@ -127,4 +162,39 @@ const sizeBack = img ? "h-[50%] md:h-[65%]" : "h-[360px]";
     border-left: 4px solid var(--color-primary-light);
     padding-left: 8px;
   }
+
+  .wp-page :global(pre.wp-block-code) {
+    background-color: #1e1e1e; /* Fondo oscuro estilo VSCode */
+    color: #dcdcdc; /* Color de texto claro */
+    padding: 1em;
+    border-radius: 8px;
+    overflow-x: auto;
+    font-size: 0.95em;
+    line-height: 1.5;
+    margin-bottom: 1.5em;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    border: 1px solid #333;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .wp-page :global(pre.wp-block-code > code) {
+    font-family: "Fira Code", "Courier New", monospace;
+    font-weight: 400;
+    color: inherit;
+  }
+
+  .wp-page :global(pre.wp-block-code > code > .comment) {
+    color: var(--color-primary-light);
+    font-style: italic;
+  }
+
+  /* Si hay <code> suelto en línea (no en <pre>), lo estilizamos diferente */
+  .wp-page :global(pre.wp-block-code > code:not(pre code)) {
+    background-color: #f5f5f5;
+    color: #c7254e;
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-size: 0.9em;
+  }
 </style>