fix(website): make homepage self-contained

Author: PatrickJS

website/pages/index.html

@@ -475,7 +475,20 @@ <h2>Docs</h2>
           </ul>
 
           <h2>Runnable Examples</h2>
-          <!-- @example-explorer -->
+          <div class="example-teaser">
+            <div>
+              <p class="eyebrow">runnable example</p>
+              <h3>Data-first JSON</h3>
+              <p>
+                Start with plain JSON users, posts, and settings, then let @async/db infer the first schema and runtime
+                state. This is the smallest useful project shape before adding explicit schema.
+              </p>
+            </div>
+            <div class="button-row">
+              <a class="primary-link" href="../../examples/data-first/README.md">Open example</a>
+              <a href="https://github.com/async-framework/async-db/tree/main/examples/data-first" rel="noopener">View on GitHub</a>
+            </div>
+          </div>
 
           <p class="footer">
             Built from <a href="../db.schema.js">website/db.schema.js</a> content collections and published from

website/src/landing.js

@@ -1,8 +1,8 @@
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { loadAllExamples, loadTeaserExample } from './examples-loader.js';
-import { renderExamplesPage, renderExamplesTeaser, renderLandingWithTeaser } from './render-examples-page.js';
+import { loadAllExamples } from './examples-loader.js';
+import { renderExamplesPage, renderLandingPage } from './render-examples-page.js';
 
 const websiteRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const repoRoot = path.resolve(websiteRoot, '..');
@@ -15,7 +15,5 @@ export async function buildExamplesPage() {
 export async function buildLandingPageHtml() {
   const landingPath = path.join(websiteRoot, 'pages', 'index.html');
   const landingHtml = await readFile(landingPath, 'utf8');
-  const teaserExample = await loadTeaserExample(repoRoot);
-  const teaserHtml = renderExamplesTeaser(teaserExample);
-  return renderLandingWithTeaser(landingHtml, teaserHtml);
+  return renderLandingPage(landingHtml);
 }

website/src/render-examples-page.js

@@ -74,36 +74,8 @@ export function renderExamplesPage(examples) {
   });
 }
 
-/**
- * @param {Awaited<ReturnType<import('./examples-loader.js').loadTeaserExample>>} example
- */
-export function renderExamplesTeaser(example) {
-  return `
-    <div class="example-teaser">
-      <div>
-        <p class="eyebrow">runnable example</p>
-        <h3>${escapeHtml(example.title)}</h3>
-        <p>${escapeHtml(example.intro || 'Open a complete example project with the data files, config, and commands together.')}</p>
-      </div>
-      <div class="button-row">
-        <a class="primary-link" href="./docs/examples.html">Browse examples</a>
-        <a href="${escapeHtml(example.githubUrl)}" rel="noopener">Open on GitHub</a>
-      </div>
-    </div>
-  `;
-}
-
-const TEASER_PLACEHOLDER = '<!-- @example-explorer -->';
-
-export function renderLandingWithTeaser(landingHtml, teaserHtml) {
-  if (!landingHtml.includes(TEASER_PLACEHOLDER)) {
-    throw new Error(`Landing page is missing the ${TEASER_PLACEHOLDER} placeholder.`);
-  }
-  // Function replacements avoid String.replace's special "$" substitution
-  // patterns, which could corrupt injected example file contents.
-  const withTeaser = landingHtml.replace(TEASER_PLACEHOLDER, () => teaserHtml);
-  const withPagesLinks = withTeaser.replace(/href="([^"]+)"/gu, (match, href) => (
+export function renderLandingPage(landingHtml) {
+  return landingHtml.replace(/href="([^"]+)"/gu, (match, href) => (
     `href="${escapeHtml(rewriteLandingSourceLink(href))}"`
   ));
-  return withPagesLinks;
 }