Move Social Cards astro layout to own directory, along with notes on current implementation

Author: webstackdev

@types/cssmodule.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}

_TODO.md

@@ -1,5 +1,9 @@
 # TODO
 
+## Analytics
+
+Vercel Analytics
+
 ## Themepicker tooltips, extra themes
 
 - Add additional themes

src/components/Social/Cards/TODO.md

@@ -0,0 +1,15 @@
+# How cards are provided currently
+
+index.astro is included in every layout; it renders Meta.astro, which in turn renders Social.astro.
+
+Social.astro builds the full Open Graph + Twitter meta block. It calls getSocialMetadata from index.ts with the current page title, description, slug, and optional image.
+
+getSocialMetadata normalizes the site base URL, then either uses the page's explicit image (if provided) or calls getSocialImage. That helper composes a URL to the serverless endpoint index.ts.
+
+The /api/social-card endpoint accepts title, description, slug, etc., and returns an HTML template styled as our share card; that URL is what ends up in og:image / twitter:image. Social platforms fetch the URL declared in those meta tags, so the card they render comes entirely from the metadata emitted by Head/Social.
+
+The Social/Shares component (Shares.astro) doesn't generate cards; it just renders on-page share buttons. Each platform config in platforms.ts produces a share URL (or, for Mastodon, opens our modal) using the already-published page URL and text. Those buttons rely on the card metadata above so platforms show the correct preview when the shared link is opened.
+Next steps (optional)
+
+If you need richer cards (dynamic screenshots, branded variants), enhance /api/social-card or point getSocialImage at an external image generator.
+To customize per-page artwork, pass an image prop from frontmatter so Head/Social uses that instead of the auto-generated URL.

…omponents/Social/Shares/SocialCard.astro src/components/Social/Cards/index.astrosrc/components/Social/Shares/SocialCard.astro renamed to src/components/Social/Cards/index.astro src/components/Social/Shares/SocialCard.astro renamed to src/components/Social/Cards/index.astro

@@ -17,7 +17,7 @@ const { title, description, publishedDate } = Astro.props
 ---
 
 <div
-  class="relative flex flex-col justify-center items-center overflow-hidden rounded-xl text-white font-sans box-border bg-gradient-to-br from-slate-900 to-blue-600 w-[1200px] h-[630px] p-16 max-w-full aspect-[1200/630] xl:w-full"
+  class="relative flex flex-col justify-center items-center overflow-hidden rounded-xl text-white font-sans box-border bg-linear-to-br from-slate-900 to-blue-600 w-[1200px] h-[630px] p-16 max-w-full aspect-1200/630 xl:w-full"
 >
   <!-- Decorative elements -->
   <div class="absolute inset-0 pointer-events-none">
@@ -28,14 +28,14 @@ const { title, description, publishedDate } = Astro.props
   </div>
 
   <!-- Content -->
-  <div class="text-center z-[2] max-w-[1000px]">
+  <div class="text-center z-2 max-w-[1000px]">
     <h1 class="font-medium text-white leading-tight text-6xl mb-8">{title}</h1>
     {description && <p class="leading-relaxed opacity-90 text-2xl mb-4">{description}</p>}
     {publishedDate && <div class="opacity-80 italic text-xl">Published on {publishedDate}</div>}
   </div>
 
   <!-- Brand -->
-  <div class="absolute font-bold opacity-80 z-[2] bottom-10 right-10 text-3xl">
+  <div class="absolute font-bold opacity-80 z-2 bottom-10 right-10 text-3xl">
     Webstack Builders
   </div>
 </div>