feat(marketing): og:image meta tags and URL-synced hero tab

Ship a real OG/Twitter card image for executor.sh and persist the hero Cloud/Local toggle to `?try=`, so the choice is shareable and survives back/forward navigation.

Rhys Sullivan committed 6 months ago

Commit 42674bb1 parent 4cfa2994 files · +31 −0Browse files

Unified · Split

4 files

apps/marketing/astro.config.mjs +1 −0
apps/marketing/public/og-image.png +0 −0
apps/marketing/src/layouts/Layout.astro +14 −0
apps/marketing/src/pages/index.astro +17 −1

apps/marketing/astro.config.mjs+1−0

@@ -8,6 +8,7 @@ import cloudflare from "@astrojs/cloudflare"; · 7 unmodified lines
8		8
9	// https://astro.build/config	9	// https://astro.build/config
10	export default defineConfig({	10	export default defineConfig({
		11	site: "https://executor.sh",
11	output: "server",	12	output: "server",
12	integrations: [react()],	13	integrations: [react()],
13	vite: {	14	vite: {

apps/marketing/public/og-image.png+0−0

Binary file not shown.

apps/marketing/src/layouts/Layout.astro+14−0

   title = 'Executor — The gateway to connect your agent to everything',
   description = 'One place every agent plugs into every tool you already use. Wire it up once, bring the whole team.'
 } = Astro.props
+const ogImage = new URL('/og-image.png', Astro.site ?? Astro.url).toString()
+const canonical = new URL(Astro.url.pathname, Astro.site ?? Astro.url).toString()
 ---
 <html lang="en">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="light" />
     <meta name="description" content={description} />
+    <link rel="canonical" href={canonical} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonical} />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="3800" />
+    <meta property="og:image:height" content="2360" />
+    <meta property="og:image:alt" content={title} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={ogImage} />
     <title>{title}</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

apps/marketing/src/pages/index.astro+17−1

   // visitors still see the recommended path.
   const heroToggle = document.querySelector<HTMLElement>(".hero-toggle");
   const tabToggle = heroToggle?.querySelector<HTMLElement>(".tab-toggle");
-  const setActiveTab = (tab: "cloud" | "local") => {
+  const TAB_PARAM = "try";
+  const isHeroTab = (v: unknown): v is "cloud" | "local" =>
+    v === "cloud" || v === "local";
+  const syncTabToUrl = (tab: "cloud" | "local") => {
+    const url = new URL(window.location.href);
+    if (url.searchParams.get(TAB_PARAM) === tab) return;
+    url.searchParams.set(TAB_PARAM, tab);
+    window.history.replaceState(window.history.state, "", url);
+  };
+  const setActiveTab = (tab: "cloud" | "local", updateUrl = true) => {
     if (!heroToggle || !tabToggle) return;
     heroToggle.dataset.active = tab;
     tabToggle.dataset.active = tab;
         );
       },
     );
+    if (updateUrl) syncTabToUrl(tab);
   };
   if (heroToggle && tabToggle) {
+    const initial = new URLSearchParams(window.location.search).get(TAB_PARAM);
+    if (isHeroTab(initial)) setActiveTab(initial, false);
     tabToggle.querySelectorAll<HTMLButtonElement>("button[data-tab]").forEach(
       (btn) => {
         btn.addEventListener("click", () => {
         });
       },
     );
+    window.addEventListener("popstate", () => {
+      const next = new URLSearchParams(window.location.search).get(TAB_PARAM);
+      setActiveTab(isHeroTab(next) ? next : "cloud", false);
+    });
   }
   // Desktop card "Download →" CTA jumps to the hero, switches to Local,