feat(website): Phase 1 marketing — star button, social share, playground CTA, WCAG, RSS

- Hero: live GitHub star button with client-side count fetch (GitHubStarButton)
- Hero: fix WCAG contrast — zinc-500/emerald-400/70 → zinc-400/emerald-400
- Blog post: X/Twitter, LinkedIn, HN share buttons after article content
- Playground: post-use CTA bar with copyable go get command (after first parse)
- Footer: add Release RSS feed link
- Blog: add missing v1.12.0–v1.13.0 comparison links to changelog footer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

website/src/app/blog/[slug]/page.tsx

@@ -129,6 +129,45 @@ export default async function BlogPostPage({ params }: Props) {
           {content}
         </div>
 
+        {/* Social share */}
+        {(() => {
+          const postUrl = `https://gosqlx.dev/blog/${slug}/`;
+          const shareText = encodeURIComponent(`${post.title} — GoSQLX`);
+          const shareUrl = encodeURIComponent(postUrl);
+          return (
+            <div className="mt-12 pt-8 border-t border-zinc-800 flex items-center gap-3">
+              <span className="text-sm text-zinc-500">Share:</span>
+              <a
+                href={`https://x.com/intent/tweet?text=${shareText}&url=${shareUrl}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 text-xs text-zinc-400 hover:text-white border border-zinc-800 hover:border-zinc-600 rounded px-2.5 py-1.5 transition-colors"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-label="X (Twitter)"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+                X / Twitter
+              </a>
+              <a
+                href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 text-xs text-zinc-400 hover:text-white border border-zinc-800 hover:border-zinc-600 rounded px-2.5 py-1.5 transition-colors"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-label="LinkedIn"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+                LinkedIn
+              </a>
+              <a
+                href={`https://news.ycombinator.com/submitlink?u=${shareUrl}&t=${shareText}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 text-xs text-zinc-400 hover:text-white border border-zinc-800 hover:border-zinc-600 rounded px-2.5 py-1.5 transition-colors"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-label="Hacker News"><path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896H6.95z"/></svg>
+                HN
+              </a>
+            </div>
+          );
+        })()}
+
         {/* Navigation */}
         <nav className="mt-16 pt-8 border-t border-zinc-800 flex justify-between gap-4">
           {prevPost ? (

website/src/components/home/Hero.tsx

@@ -6,6 +6,40 @@ import { GradientText } from '@/components/ui/GradientText';
 import { VersionBadge } from '@/components/ui/VersionBadge';
 import { Button } from '@/components/ui/Button';
 import Link from 'next/link';
+import { useState, useEffect } from 'react';
+
+function GitHubStarButton() {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    fetch('https://api.github.com/repos/ajitpratap0/GoSQLX')
+      .then((r) => r.json())
+      .then((d) => { if (typeof d.stargazers_count === 'number') setStars(d.stargazers_count); })
+      .catch(() => {});
+  }, []);
+
+  return (
+    <a
+      href="https://github.com/ajitpratap0/GoSQLX"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 transition-colors text-sm font-medium text-zinc-200"
+    >
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+        <path d="M8 .25a7.75 7.75 0 1 0 0 15.5A7.75 7.75 0 0 0 8 .25ZM6.5 13.5v-2.1a2.9 2.9 0 0 1-.8.1c-.6 0-1-.3-1.2-.8-.2-.4-.5-.8-.9-.9l-.1-.1c-.1-.1-.1-.2 0-.2l.1-.1c.5-.2.9.1 1.2.6.2.4.5.6.8.6.3 0 .5-.1.7-.2.1-.6.4-1 .8-1.3-2-.2-3.3-1-3.3-3.1 0-.7.3-1.4.7-1.9-.1-.3-.3-1 0-2 0 0 .6-.2 2 .7a6.8 6.8 0 0 1 3.6 0c1.4-.9 2-.7 2-.7.3 1 .1 1.7 0 2 .4.5.7 1.2.7 1.9 0 2.1-1.3 2.9-3.3 3.1.4.4.7 1 .7 1.9v2.5c0 .1 0 .2.1.2C10.7 14.9 12.5 12 12.5 8A4.5 4.5 0 0 0 8 3.5" />
+      </svg>
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" className="text-yellow-400">
+        <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 11.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
+      </svg>
+      Star
+      {stars !== null && (
+        <span className="bg-white/10 text-zinc-300 text-xs px-1.5 py-0.5 rounded font-mono">
+          {stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : stars}
+        </span>
+      )}
+    </a>
+  );
+}
 
 const SAMPLE_SQL = `SELECT
   u.name,
@@ -112,6 +146,7 @@ export function Hero() {
             <Button variant="ghost" href="/playground">
               Try Playground
             </Button>
+            <GitHubStarButton />
           </div>
         </FadeIn>
 
@@ -128,7 +163,7 @@ export function Hero() {
                       <span className="w-2.5 h-2.5 rounded-full bg-yellow-500/60" />
                       <span className="w-2.5 h-2.5 rounded-full bg-green-500/60" />
                     </div>
-                    <span className="text-xs text-zinc-500 font-mono ml-2">query.sql</span>
+                    <span className="text-xs text-zinc-400 font-mono ml-2">query.sql</span>
                   </div>
                   <div className="relative">
                     <pre
@@ -146,8 +181,8 @@ export function Hero() {
                 {/* AST Output side */}
                 <div className="text-left">
                   <div className="flex items-center gap-2 px-4 py-2.5 border-b border-white/[0.06]">
-                    <span className="text-xs text-zinc-500 font-mono">AST Output</span>
-                    <span className="ml-auto text-[10px] text-emerald-400/70 font-mono">parsed in &lt;1ms</span>
+                    <span className="text-xs text-zinc-400 font-mono">AST Output</span>
+                    <span className="ml-auto text-[10px] text-emerald-400 font-mono">parsed in &lt;1ms</span>
                   </div>
                   <pre
                     tabIndex={0}

website/src/components/layout/Footer.tsx

@@ -23,6 +23,7 @@ const FOOTER_LINKS = {
     { label: 'Issues', href: 'https://github.com/ajitpratap0/GoSQLX/issues', external: true },
     { label: 'Discussions', href: 'https://github.com/ajitpratap0/GoSQLX/discussions', external: true },
     { label: 'Releases', href: 'https://github.com/ajitpratap0/GoSQLX/releases', external: true },
+    { label: 'Release RSS', href: 'https://github.com/ajitpratap0/GoSQLX/releases.atom', external: true },
   ],
 };
 

website/src/components/playground/Playground.tsx

@@ -190,6 +190,16 @@ export default function Playground() {
     );
   }
 
+  const [copied, setCopied] = useState(false);
+  const hasResults = results.ast !== null;
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText('go get github.com/ajitpratap0/GoSQLX').then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, []);
+
   return (
     <div className="flex flex-col h-full bg-[#09090b]">
       {/* Top toolbar */}
@@ -279,6 +289,32 @@ export default function Playground() {
           </div>
         </div>
       </div>
+      {/* Post-use CTA — appears after first successful parse */}
+      {hasResults && (
+        <div className="flex items-center justify-between gap-4 px-4 py-2.5 border-t border-slate-800 bg-slate-900/50">
+          <span className="text-xs text-slate-400 hidden sm:block">Ready to use this in your project?</span>
+          <div className="flex items-center gap-2 flex-1 sm:flex-none">
+            <code className="text-xs font-mono text-emerald-400 bg-slate-800 px-2.5 py-1 rounded">
+              go get github.com/ajitpratap0/GoSQLX
+            </code>
+            <button
+              onClick={handleCopy}
+              className="text-xs text-slate-400 hover:text-white border border-slate-700 hover:border-slate-500 rounded px-2 py-1 transition-colors flex-shrink-0"
+              aria-label="Copy install command"
+            >
+              {copied ? '✓ Copied' : 'Copy'}
+            </button>
+          </div>
+          <a
+            href="https://github.com/ajitpratap0/GoSQLX"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-slate-400 hover:text-white transition-colors flex-shrink-0"
+          >
+            GitHub →
+          </a>
+        </div>
+      )}
     </div>
   );
 }

website/src/content/blog/v0-9-0.md

@@ -65,7 +65,10 @@ For questions about upgrading or changelog entries:
 - Open an issue: https://github.com/ajitpratap0/GoSQLX/issues
 - Join discussions: https://github.com/ajitpratap0/GoSQLX/discussions
 
-[Unreleased]: https://github.com/ajitpratap0/GoSQLX/compare/v1.8.0...HEAD
+[Unreleased]: https://github.com/ajitpratap0/GoSQLX/compare/v1.12.1...HEAD
+[1.13.0]: https://github.com/ajitpratap0/GoSQLX/compare/v1.12.1...v1.13.0
+[1.12.1]: https://github.com/ajitpratap0/GoSQLX/compare/v1.12.0...v1.12.1
+[1.12.0]: https://github.com/ajitpratap0/GoSQLX/compare/v1.10.2...v1.12.0
 [1.8.0]: https://github.com/ajitpratap0/GoSQLX/compare/v1.7.0...v1.8.0
 [1.7.0]: https://github.com/ajitpratap0/GoSQLX/compare/v1.6.0...v1.7.0
 [1.6.0]: https://github.com/ajitpratap0/GoSQLX/compare/v1.5.1...v1.6.0