feat: showcase-mode homepage (docs, downloads, curated reel)

compute-js/src/index.js

@@ -25,6 +25,7 @@ import {
 import { transformVideoApiResponse } from './videoMetadata.js';
 import { renderEmbedPage } from './embedPage.js';
 import { resolveFeedInjectedHtml } from './feedInjection.js';
+import { isShowcaseMode } from './webMode.js';
 
 const publisherServer = PublisherServer.fromStaticPublishRc(rc);
 const DEFAULT_OG_IMAGE = 'https://divine.video/og.png';
@@ -305,10 +306,17 @@ async function handleRequest(event) {
   const isApexDomain = APEX_DOMAINS.includes(hostnameToUse);
   const isApexLanding = isApexDomain && (url.pathname === '/' || url.pathname === '/index.html');
   const discoveryFeedType = isApexDomain ? getDiscoveryFeedType(url.pathname) : null;
-  const shouldInjectFeed = isApexLanding || discoveryFeedType;
+  // In showcase mode the homepage renders a hand-curated, all-ages set and the
+  // /discovery routes do not exist. Injecting the trending feed here would put
+  // uncurated content on the one page that exists to guarantee curation, so the
+  // LCP optimization is switched off rather than pointed somewhere else.
+  const shouldInjectFeed = !isShowcaseMode() && (isApexLanding || discoveryFeedType);
 
   if (isApexLanding && isSocialMediaCrawler(request)) {
-    const ogResponse = await handleApexOgTags();
+    // Same reasoning: handleApexOgTags() seeds the social preview image from the
+    // top trending video, which is not curated. Fall through to the static
+    // shell's own OG tags in showcase mode.
+    const ogResponse = isShowcaseMode() ? null : await handleApexOgTags();
     if (ogResponse) return ogResponse;
   }
 

compute-js/src/webMode.js

@@ -0,0 +1,20 @@
+// ABOUTME: Edge-side mirror of the frontend VITE_WEB_MODE flag
+// ABOUTME: Decides whether the worker may inject uncurated feed data into pages
+
+/**
+ * Which experience the site serves. MUST stay in sync with `VITE_WEB_MODE`
+ * in `src/config/webMode.ts`.
+ *
+ * The worker has no access to Vite's env, and both are deployed together from
+ * this repo (`npm run fastly:deploy && npm run fastly:publish`), so a checked-in
+ * constant is the sync mechanism. If you flip one, flip the other in the same
+ * commit — a mismatch means the edge injects trending videos into a page whose
+ * whole purpose is that its content is curated.
+ *
+ * @type {'showcase' | 'full'}
+ */
+export const WEB_MODE = 'showcase';
+
+export function isShowcaseMode() {
+  return WEB_MODE === 'showcase';
+}

index.html

@@ -15,8 +15,13 @@
          with self-referencing canonicals at build time. -->
 
     <!-- PWA Meta Tags -->
-    <title>Divine Web - Short-form Looping Videos on Nostr</title>
-    <meta name="description" content="Watch and share 6-second looping videos on the decentralized Nostr network." />
+    <!-- These are the shell defaults, and on the apex they are also what social
+         crawlers actually read: / is not prerendered, and in showcase mode the
+         edge worker no longer injects OG tags for the homepage. Crawlers do not
+         run JS, so ShowcasePage's useSeoMeta never reaches them. Keep these in
+         sync with the useSeoMeta call in src/pages/ShowcasePage.tsx. -->
+    <title>Divine — short video on an open protocol</title>
+    <meta name="description" content="Six-second loops, no algorithm feeding you slop. Get Divine on iOS, Android, Zapstore, or build it yourself." />
     <meta name="theme-color" content="#27C58B" />
     <!-- X-Frame-Options must be set by server headers; remove meta to avoid console error -->
 
@@ -30,18 +35,18 @@
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://divine.video/" />
-    <meta property="og:title" content="Divine Web - Short-form Looping Videos on Nostr" />
-    <meta property="og:description" content="Watch and share 6-second looping videos on the decentralized Nostr network." />
+    <meta property="og:title" content="Divine — short video on an open protocol" />
+    <meta property="og:description" content="Six-second loops, no algorithm feeding you slop. Get Divine on iOS, Android, Zapstore, or build it yourself." />
     <meta property="og:image" content="https://divine.video/og.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
-    <meta property="og:image:alt" content="Divine Web - Short-form looping videos on the Nostr network" />
+    <meta property="og:image:alt" content="Divine — six-second looping videos from real humans" />
     <meta property="og:image:type" content="image/png" />
 
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Divine Web - Short-form Looping Videos on Nostr" />
-    <meta name="twitter:description" content="Watch and share 6-second looping videos on the decentralized Nostr network." />
+    <meta name="twitter:title" content="Divine — short video on an open protocol" />
+    <meta name="twitter:description" content="Six-second loops, no algorithm feeding you slop. Get Divine on iOS, Android, Zapstore, or build it yourself." />
     <meta name="twitter:image" content="https://divine.video/og.png" />
 
     <!-- Icons -->

package.json

@@ -13,11 +13,12 @@
     "deploy": "npm run build && npx -y nostr-deploy-cli deploy --skip-setup",
     "deploy:cloudflare": "npm run build && wrangler pages deploy dist",
     "deploy:cloudflare:preview": "npm run build && wrangler pages deploy dist --branch preview",
-    "fastly:local": "npm run build && npm i && npm run -w divine-web-edge dev:publish && npm run -w divine-web-edge dev:start",
-    "fastly:deploy": "npm run build && npm i && npm run -w divine-web-edge fastly:deploy",
-    "fastly:publish": "npm run build && npm i && npm run -w divine-web-edge fastly:publish",
+    "fastly:local": "npm run verify:web-mode-sync && npm run build && npm i && npm run -w divine-web-edge dev:publish && npm run -w divine-web-edge dev:start",
+    "fastly:deploy": "npm run verify:web-mode-sync && npm run build && npm i && npm run -w divine-web-edge fastly:deploy",
+    "fastly:publish": "npm run verify:web-mode-sync && npm run build && npm i && npm run -w divine-web-edge fastly:publish",
     "fastly:release": "npm run fastly:deploy && npm run fastly:publish",
     "verify:well-known": "node scripts/verify-well-known.mjs",
+    "verify:web-mode-sync": "node scripts/verify-web-mode-sync.mjs",
     "precalculate-thumbnails": "tsx scripts/precalculate-hashtag-thumbnails.ts",
     "generate-icons": "node scripts/generate-icons.js",
     "test:visual": "playwright test",

playwright.config.ts

@@ -3,6 +3,8 @@ import { defineConfig, devices } from '@playwright/test';
 // Use a dedicated port so parallel worktrees on 8080 don't collide.
 const PORT = Number(process.env.PLAYWRIGHT_PORT ?? 8088);
 const BASE_URL = `http://localhost:${PORT}`;
+const FULL_MODE_PORT = Number(process.env.PLAYWRIGHT_FULL_MODE_PORT ?? 8089);
+const FULL_MODE_BASE_URL = `http://localhost:${FULL_MODE_PORT}`;
 
 export default defineConfig({
   testDir: './tests/visual',
@@ -14,11 +16,26 @@ export default defineConfig({
     baseURL: BASE_URL,
     trace: 'on-first-retry',
   },
-  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
-  webServer: {
-    command: `npx vite --port ${PORT} --strictPort`,
-    url: BASE_URL,
-    reuseExistingServer: !process.env.CI,
-    timeout: 120_000,
-  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    {
+      name: 'full-mode-a11y',
+      testMatch: /a11y\.spec\.ts/,
+      use: { ...devices['Desktop Chrome'], baseURL: FULL_MODE_BASE_URL },
+    },
+  ],
+  webServer: [
+    {
+      command: `npx vite --port ${PORT} --strictPort`,
+      url: BASE_URL,
+      reuseExistingServer: !process.env.CI,
+      timeout: 120_000,
+    },
+    {
+      command: `VITE_WEB_MODE=full npx vite --port ${FULL_MODE_PORT} --strictPort`,
+      url: FULL_MODE_BASE_URL,
+      reuseExistingServer: !process.env.CI,
+      timeout: 120_000,
+    },
+  ],
 });