[codex] Improve homepage markdown share flow

README.md

@@ -4,6 +4,8 @@ with.md gives markdown-heavy teams a GitHub-backed collaboration workspace for l
 
 Filesystem-first markdown collaboration for humans and agents. Edit markdown files stored in GitHub repositories with real-time collaboration, live cursors, anchored comments, and instant synchronization, no proprietary formats, no lock-in.
 
+Try it without connecting GitHub: [open a live editable README demo](https://with.md/demo/readme). It creates a safe sample markdown share, not a repository connection.
+
 ## Table of Contents
 
 - [Architecture Overview](#architecture-overview)

web/src/app/(main)/demo/readme/page.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+
+const README_DEMO_MARKDOWN = `# with.md README demo
+
+This is a safe sample README for trying editable markdown collaboration.
+
+## What to try
+
+- Change this checklist into your own launch notes.
+- Add a comment for the next person.
+- Copy the edit link and send it to someone else.
+
+## Why this stays safe
+
+This demo creates a standalone markdown share. It does not connect to your GitHub account, request repository access, or touch a real README.
+
+## Source stays clean
+
+The content remains markdown. You can switch to source mode, edit the raw text, and copy the updated markdown back out when you are done.
+`;
+
+type DemoResponse = {
+  editUrl?: string;
+  error?: string;
+};
+
+export default function ReadmeDemoPage() {
+  const startedRef = useRef(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(true);
+
+  const startDemo = useCallback(async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/anon-share/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          fileName: 'with-md-readme-demo.md',
+          content: README_DEMO_MARKDOWN,
+        }),
+      });
+      const data = (await response.json().catch(() => null)) as DemoResponse | null;
+      if (!response.ok || !data?.editUrl) {
+        setError(data?.error ?? 'Could not create the demo share.');
+        return;
+      }
+      window.location.href = data.editUrl;
+    } catch (createError) {
+      setError(createError instanceof Error ? createError.message : 'Could not create the demo share.');
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (startedRef.current) return;
+    startedRef.current = true;
+    void startDemo();
+  }, [startDemo]);
+
+  return (
+    <main className="withmd-bg withmd-page withmd-landing">
+      <section className="withmd-doc-shell">
+        <div className="withmd-panel withmd-doc-panel withmd-column withmd-fill">
+          <div className="withmd-doc-scroll">
+            <div className="withmd-landing-inner">
+              <h1 className="withmd-landing-title">Opening an editable README demo</h1>
+              <p className="withmd-landing-tagline">
+                This creates a safe sample markdown share. It does not connect to GitHub or touch a real repository.
+              </p>
+
+              <hr className="withmd-landing-rule withmd-landing-anon-divider" />
+
+              <div className="withmd-landing-section withmd-landing-anon-section">
+                <h2 className="withmd-landing-h2">{busy ? 'Creating the demo link...' : 'Demo link did not open'}</h2>
+                <p className="withmd-landing-body withmd-landing-anon-copy">
+                  {error
+                    ? error
+                    : 'You will land in an editable markdown document with sample README content.'}
+                </p>
+                {error ? (
+                  <button type="button" className="withmd-btn withmd-btn-landing" onClick={() => void startDemo()}>
+                    Try again
+                  </button>
+                ) : null}
+              </div>
+
+              <hr className="withmd-landing-rule" />
+
+              <div className="withmd-landing-section">
+                <p className="withmd-landing-body">
+                  <Link href="/" className="withmd-landing-landscape-inline">
+                    Back to with.md
+                  </Link>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

web/src/app/(main)/page.tsx

@@ -280,25 +280,64 @@ export default function Home() {
           <div className="withmd-panel withmd-doc-panel withmd-column withmd-fill">
             <div className="withmd-doc-scroll">
               <div className="withmd-landing-inner">
-                <h1 className="withmd-landing-title">Collaborate with.md files</h1>
+                <h1 className="withmd-landing-title">Shareable markdown links</h1>
                 <p className="withmd-landing-tagline">
-                  Share and edit markdown files. With live cursors,{' '}
+                  Turn one `.md` file into a read link for reviewers and an edit link for collaborators. The source stays clean while live cursors,{' '}
                   <span className="withmd-landing-animated-word">{animatedSyncWord}</span>
                   <span className="withmd-landing-cursor-inline withmd-landing-tagline-cursor" style={{ color: LANDING_ANIMATED_CURSOR_COLOR }}>
                     <span className="collaboration-cursor__caret" aria-hidden="true">
                       <span className="collaboration-cursor__label">{LANDING_ANIMATED_CURSOR_NAME}</span>
                     </span>
                   </span>{' '}
-                  sync, and comments.
+                  sync, and comments handle collaboration.
                 </p>
 
                 <hr className="withmd-landing-rule withmd-landing-anon-divider" />
 
+                <div className="withmd-landing-section withmd-landing-try-section">
+                  <h2 className="withmd-landing-h2">Try it with a markdown file</h2>
+                  <p className="withmd-landing-body withmd-landing-anon-copy">
+                    Start with the README demo, a blank file, or your own `.md` file. Send the read
+                    link when someone only needs to review. Send the edit link when they should make
+                    changes. Source mode keeps the raw markdown available, so the file can move back
+                    to your repo, notes app, or agent without becoming a proprietary doc.
+                  </p>
+                  <div className="withmd-landing-try-list" aria-label="Share link types">
+                    <div>
+                      <p className="withmd-landing-try-label">Read link</p>
+                      <p className="withmd-landing-try-copy">A clean browser page for review and sharing.</p>
+                    </div>
+                    <div>
+                      <p className="withmd-landing-try-label">Edit link</p>
+                      <p className="withmd-landing-try-copy">A private edit URL for comments and changes.</p>
+                    </div>
+                    <div>
+                      <p className="withmd-landing-try-label">Source preserved</p>
+                      <p className="withmd-landing-try-copy">Raw markdown stays available in source mode.</p>
+                    </div>
+                  </div>
+                  <div className="withmd-landing-try-actions">
+                    <Link href="/demo/readme" className="withmd-btn withmd-btn-landing">
+                      Try the README demo
+                    </Link>
+                    <button
+                      type="button"
+                      className="withmd-landing-create-blank"
+                      disabled={anonBusy}
+                      onClick={createBlankMarkdown}
+                    >
+                      Start with a blank markdown file
+                    </button>
+                  </div>
+                </div>
+
+                <hr className="withmd-landing-rule" />
+
                 <div className="withmd-landing-section withmd-landing-anon-section">
-                  <h2 className="withmd-landing-h2">Share markdown instantly </h2>
+                  <h2 className="withmd-landing-h2">Create a clean markdown share</h2>
                   <p className="withmd-landing-body withmd-landing-anon-copy">
                     Drag one `.md` file here, or upload manually. You get a read link and an edit
-                    link. ... or{' '}
+                    link without moving the source into another doc tool. ... or{' '}
                     <button
                       type="button"
                       className="withmd-landing-create-blank"

web/src/styles/with-md.css

@@ -1539,6 +1539,41 @@
   margin-top: 0;
 }
 
+.withmd-landing-try-section {
+  margin-top: 0;
+}
+
+.withmd-landing-try-list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 18px;
+}
+
+.withmd-landing-try-label {
+  margin: 0;
+  color: var(--withmd-text);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+.withmd-landing-try-copy {
+  margin: 5px 0 0;
+  color: var(--withmd-body);
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.45;
+}
+
+.withmd-landing-try-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 18px;
+  margin-top: 22px;
+}
+
 .withmd-landing-anon-divider {
   margin-top: 26px;
   margin-bottom: 22px;
@@ -1864,6 +1899,17 @@
     height: 28px;
   }
 
+  .withmd-landing-try-list {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .withmd-landing-try-actions {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+  }
+
   .withmd-landing-landscape-inline {
     font-size: 13px;
     padding: 7px 0 7px 10px;