Kanding page changes, added an About page

cmd/server/main.go

···
 	}
 
 	pages := []string{
-		"atproto_login", "documents", "document_view", "document_edit",
+		"about", "atproto_login", "documents", "document_view", "document_edit",
 		"landing", "login", "new_document", "register",
 	}
 	tmpls := make(map[string]*template.Template, len(pages))
···
 	mux.HandleFunc("GET /auth/atproto", h.ATProtoLoginPage)
 	mux.HandleFunc("POST /auth/atproto", h.ATProtoLoginSubmit)
 	mux.HandleFunc("GET /auth/atproto/callback", h.ATProtoCallback)
+
+	// Page routes
+	mux.HandleFunc("GET /about", h.AboutPage)
 
 	// Dashboard
 	mux.HandleFunc("GET /", h.Dashboard)

internal/handler/handler.go

···
 	http.Redirect(w, r, "/", http.StatusSeeOther)
 }
 
+// --- Page handlers ---
+
+func (h *Handler) AboutPage(w http.ResponseWriter, r *http.Request) {
+	user := h.currentUser(r)
+	h.render(w, "about.html", PageData{
+		Title: "About",
+		User:  user,
+	})
+}
+
 // --- Dashboard ---
 
 func (h *Handler) Dashboard(w http.ResponseWriter, r *http.Request) {

static/css/style.css

···
 h1, h2, h3, h4, h5 {
     font-family: var(--heading-font);
     font-weight: 500;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
 }
+
+ul {
+    list-style: disc;
+    margin-left: 1.5rem;
+}
+
+li {
+    margin-bottom: 0.25rem;
+    margin-left: 1rem;
+}
+
 
 /* Navbar */
 .navbar {
···
     padding: 4rem 0;
 }
 
-.landing h1 { font-size: 2.5rem; margin-bottom: 1rem; }
-.landing p { font-size: 1.1rem; font-weight: 400; margin-bottom: 2rem; }
+.landing h1, .about-page h1 { font-size: 2.5rem; margin-bottom: 1.25rem; }
+.landing p, .about-page p { font-size: 1.1rem; font-weight: 400; margin-bottom: 1.25rem; }
 .landing-actions { display: flex; gap: 1rem; justify-content: center; }
 
-.landing-header {
+.landing-header, .about-header {
     text-align: center;
 }
 
-.landing-content {
+.landing-header p, .about-header p {
+    text-align: left;
+    font-size: 1.1rem;
+    font-weight: 400;
+    margin-bottom: 1.25rem;
+}
+
+.landing-content, .about-content{
     color: var(--text-secondary);
     display: grid;
     grid-template-columns: 1fr 1fr;
···
     margin-bottom: 2rem;
 }
 
-.landing-hr {
+.landing-hr, .about-hr {
     margin: 2rem 0;
 }
 
 @media (max-width: 640px) {
-    .landing-content {
+    .landing-content, .about-content {
         grid-template-columns: 1fr;
-    }
+    }ß
 }
 
 /* Dashboard */

templates/about.html

···
+{{template "base" .}}
+{{define "content"}}
+<div class="about-page">
+    <section class="about-header">
+        <h1>About Diffdown</h1>
+    </section>
+    <section class="about-content">
+        <div class="about-col">
+        <h2>What is Diffdown?</h2>
+        <p>Diffdown is a real-time collaborative Markdown editor/previewer built on the <a href="https://atproto.com/">AT Protocol</a> (the tech that powers <a href="https://bsky.app">Bluesky</a>).
+        
+        <p>Diffdown is decentralized; it stores documents as AT Protocol records on the document creator's PDS, not on the Diffdown server or some cloud provider.</p>
+
+        <p>I built Diffdown to learn <a href="https://atproto.com/">AT Protocol</a>, <a href="https://atproto.com/guides/lexicon">lexicons</a>, and <a href="https://www.ibm.com/think/topics/agentic-engineering">agentic engineering</a>. Consider it a "pre-alpha" prototype. Because AT Proto does not support private records (<a href="https://atproto.wiki/en/working-groups/private-data">yet</a>), <strong>any documents you create will be visible to anyone with the URL</strong> (<a href="https://atproto.at/viewer?uri=did:plc:za4vlvbizdstoym7lpymc5q5/com.diffdown.document/3mgzsp6m5hs24">example</a>).</p>
+
+        <h2>About Me</h2>
+        <p>I've worked in tech for a long time as a product manager and executive. These days, I'm a co-founder of <a href="https://limeleaf.coop">Limeleaf Worker Collective</a>, and an advisor to a few startups. Read about my journey building Diffdown <a href="https://www.jluther.net/tags/nonfiction/">on my Leaflet</a>.</p>
+        
+        </div>
+        <div class="about-col">
+            <h2>Technology</h2>
+        <ul>
+            <li><strong>Backend:</strong> Go, SQLite</li>
+            <li><strong>Frontend:</strong> Vanilla HTML, CSS, JavaScript</li>
+            <li><strong>Editor:</strong> <a href="https://prosemirror.net/">ProseMirror</a> with <a href="https://github.com/ProseMirror/prosemirror-collab">prosemirror-collab</a> for real-time collaboration; <a href="https://milkdown.dev/">Milkdown</a> for Markdown</li>
+            <li><strong>Authentication:</strong> ATProto OAuth (any PDS)</li>
+            <li><strong>Deployment and hosting:</strong> Fly.io</li>
+        </ul>
+        <h2>Status</h2>
+        <p>This is a prototype. I wouldn't even call it an Alpha.</p>
+        <p><strong>Important:</strong> Because AT Proto does not support private data <a href="https://atproto.wiki/en/working-groups/private-data">(yet)</a>, any documents you create will be visible to anyone with the URL.</p>
+        <p>Expect bugs, breaking changes, and limited features.</p>
+        <p>However, any documents you create will be stored in your AT Proto account, so even if Diffdown goes away, you will still have your documents.</p>
+
+        <h2>Contact</h2>
+        <p>Feedback, bug reports, and feature requests are welcome. Reach out via Bluesky or check the <a href="https://github.com/limeleaf/diffdown">GitHub repository</a>.</p>
+        </div>
+    </section>
+</div>
+{{end}}

templates/base.html

···
         <div class="nav-right">
             {{if .User}}
                 <a href="/">Documents</a>
+                <a href="/about">About</a>
                 <span class="nav-user">{{.User.Name}}</span>
                 <form method="post" action="/auth/logout" style="display:inline">
                     <button type="submit" class="btn-link">Log out</button>
···
             {{else}}
                 <a href="/auth/login">Log in</a>
                 <a href="/auth/register" class="btn btn-sm">Sign up</a>
+                <a href="/about">About</a>
             {{end}}
             <button id="theme-toggle" class="btn-link" aria-label="Toggle dark mode" onclick="toggleTheme()" style="font-size:1.1rem;padding:0.25rem">☀</button>
         </div>

templates/landing.html

···
 <div class="landing">
     <section class="landing-header">
         <h1>Collaborative Markdown Editing</h1>
-        <p>Write, review, and collaborate on Markdown documents with your team in <a href="https://www.bskyinfo.com/glossary/atmosphere/">the ATmosphere</a>.</p>
+        <p>Write, review, and collaborate on Markdown documents with your team in <a href="https://www.bskyinfo.com/glossary/atmosphere/">the ATmosphere</a>. It uses your Bluesky or <a href="https://atproto.com/">AT Protocol</a> account, so no need to create an account, just log in.</p>
     </section>
     <div class="landing-actions">
-        <a href="/auth/register" class="btn btn-lg">Get Started</a>
-        <a href="/auth/login" class="btn btn-lg btn-outline">Log In</a>
+        <a href="/auth/login" class="btn btn-lg">Log In</a>
     </div>
     <hr class="landing-hr">
-    <section class="landing-content">
-        <div class="landing-col">
-            <h2>About This Project</h2>
-            <p>This app is a toy I built to learn <a href="https://atproto.com/">AT Protocol</a>, <a href="https://atproto.com/guides/lexicon">lexicons</a>, and <a href="https://www.ibm.com/think/topics/agentic-engineering">agentic engineering</a>. It is not meant for actual use. Because AT Proto does not support private records (<a href="https://atproto.wiki/en/working-groups/private-data">yet</a>), any documents you create will be visible to anyone with the URL (<a href="https://atproto.at/viewer?uri=did:plc:za4vlvbizdstoym7lpymc5q5/com.diffdown.document/3mgzsp6m5hs24">example</a>).</p>
-        </div>
-        <div class="landing-col">
-            <h2>About Me</h2>
-            <p>I've worked in tech for a long time as a product manager and executive. These days, I'm a co-founder of <a href="https://limeleaf.coop">Limeleaf Worker Collective</a>, and an advisor to a few tech projects. <a href="https://jluther.net">I like to write.</a></p>
-        </div>
+    <section>
+        <p>This is barely Alpha-quality software. Don't use it for anything important. <a href="/about">Learn more about Diffdown</a>.</p>
     </section>
 
 </div>