Add /words daily writing space (#12)

* Add /words daily writing space

A new section for daily writing entries with a 100-word goal. Posts
commit as MDX files via the GitHub API on submit. Public posts render
on the listing and detail page; private posts show metadata only
(date, time, word count) until signed in.

- /words listing with stats (total words, entries, days written, avg)
- /words/[slug] for individual posts (404s for private without cookie)
- /words/new with a textarea editor + markdown formatting toolbar,
  live word count, and localStorage draft autosave
- /words/login: password gate; 90-day signed cookie via jose
- /api/words/publish: cookie-gated, commits to fredrivett.com via
  octokit
- New env vars: WORDS_PASSWORD, WORDS_SESSION_SECRET, WORDS_GITHUB_TOKEN

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* Tidy /words header: use FredHead and drop sign-in link

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* Validate `next` redirect on /words/login

Reject anything that isn't a same-origin path so a crafted
?next=//evil.com can't redirect after sign-in.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* Drop ensureDir from /words read paths

The serverless filesystem is read-only outside /tmp, so calling
mkdirSync during SSR would 500 the page on a fresh deploy. Read
paths now just return empty when _words/ is missing, and a
.gitkeep ensures the directory ships in builds.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* Date /words slugs in London time

Building the slug from UTC meant a 23:30 BST entry was already
dated to tomorrow. Use Intl.DateTimeFormat with Europe/London so
the slug matches local wall-clock, midnight to midnight.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

Author: fredrivett

.env.example

@@ -7,3 +7,11 @@ CONVERTKIT_FORM_ID= # your_form_id_here
 
 # HereNowFyi Widget Configuration
 NEXT_PUBLIC_HERENOW_BASE_URL=https://www.herenow.fyi
+
+# /words — daily writing space
+# Password used to sign in at /words/login
+WORDS_PASSWORD=
+# Random string, 32+ chars (e.g. `openssl rand -hex 32`)
+WORDS_SESSION_SECRET=
+# Fine-grained PAT with Contents: Read/Write on fredrivett/fredrivett.com
+WORDS_GITHUB_TOKEN=

_words/.gitkeep

@@ -37,10 +37,12 @@
     "clsx": "^2.1.1",
     "date-fns": "^2.28.0",
     "gray-matter": "^4.0.3",
+    "jose": "^6.2.3",
     "lucide-react": "^0.543.0",
     "next": "13.4.19",
     "next-mdx-remote": "^6.0.0",
     "next-seo": "^5.1.0",
+    "octokit": "^5.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-tweet": "^3.2.2",

package.json

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { buildSessionCookie, createSessionToken } from "lib/words-auth";
+
+export async function POST(request: NextRequest) {
+  const expected = process.env.WORDS_PASSWORD;
+  if (!expected) {
+    return NextResponse.json(
+      { error: "WORDS_PASSWORD is not configured" },
+      { status: 500 },
+    );
+  }
+
+  let password = "";
+  try {
+    const body = await request.json();
+    password = String(body?.password ?? "");
+  } catch {
+    return NextResponse.json({ error: "Bad request" }, { status: 400 });
+  }
+
+  if (password !== expected) {
+    return NextResponse.json({ error: "Wrong password" }, { status: 401 });
+  }
+
+  const token = await createSessionToken();
+  const res = NextResponse.json({ ok: true });
+  res.headers.append("Set-Cookie", buildSessionCookie(token));
+  return res;
+}

src/app/api/words/login/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+
+import { buildClearCookie } from "lib/words-auth";
+
+export async function POST() {
+  const res = NextResponse.json({ ok: true });
+  res.headers.append("Set-Cookie", buildClearCookie());
+  return res;
+}

src/app/api/words/logout/route.ts

@@ -0,0 +1,97 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Octokit } from "octokit";
+
+import { isAuthedFromCookieHeader } from "lib/words-auth";
+
+import {
+  buildFrontmatter,
+  buildWordSlug,
+  countWords,
+  WORDS_GOAL,
+  WordVisibility,
+} from "utils/words-shared";
+
+const REPO_OWNER = "fredrivett";
+const REPO_NAME = "fredrivett.com";
+const REPO_BRANCH = "main";
+
+export async function POST(request: NextRequest) {
+  const cookieHeader = request.headers.get("cookie");
+  const authed = await isAuthedFromCookieHeader(cookieHeader);
+  if (!authed) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const token = process.env.WORDS_GITHUB_TOKEN;
+  if (!token) {
+    return NextResponse.json(
+      { error: "WORDS_GITHUB_TOKEN is not configured" },
+      { status: 500 },
+    );
+  }
+
+  let body: { body?: string; visibility?: string; title?: string } = {};
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Bad request" }, { status: 400 });
+  }
+
+  const text = String(body.body ?? "").trim();
+  if (!text) {
+    return NextResponse.json({ error: "Body is required" }, { status: 400 });
+  }
+
+  const wordCount = countWords(text);
+  if (wordCount < WORDS_GOAL) {
+    return NextResponse.json(
+      { error: `Need at least ${WORDS_GOAL} words (got ${wordCount})` },
+      { status: 400 },
+    );
+  }
+
+  const visibility: WordVisibility =
+    body.visibility === "private" ? "private" : "public";
+  const title = body.title ? String(body.title).trim() || null : null;
+
+  const now = new Date();
+  const slug = buildWordSlug(now);
+  const date = slug.slice(0, 10);
+  const time = `${slug.slice(11, 13)}:${slug.slice(13, 15)}`;
+  const path = `_words/${slug}.mdx`;
+
+  const frontmatter = buildFrontmatter({
+    date,
+    time,
+    wordCount,
+    visibility,
+    title,
+  });
+  const fileContents = `${frontmatter}${text}\n`;
+
+  const octokit = new Octokit({ auth: token });
+  const message = `words: ${date} ${time}${title ? ` — ${title}` : ""}`;
+
+  try {
+    const { data } = await octokit.rest.repos.createOrUpdateFileContents({
+      owner: REPO_OWNER,
+      repo: REPO_NAME,
+      path,
+      message,
+      content: Buffer.from(fileContents, "utf8").toString("base64"),
+      branch: REPO_BRANCH,
+    });
+
+    return NextResponse.json({
+      ok: true,
+      slug,
+      commitUrl: data.commit.html_url,
+    });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : "Unknown error";
+    return NextResponse.json(
+      { error: `GitHub commit failed: ${msg}` },
+      { status: 500 },
+    );
+  }
+}

src/app/api/words/publish/route.ts

@@ -0,0 +1,86 @@
+import { jwtVerify, SignJWT } from "jose";
+
+const COOKIE_NAME = "words_session";
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 90;
+
+function getSecret(): Uint8Array {
+  const secret = process.env.WORDS_SESSION_SECRET;
+  if (!secret) {
+    throw new Error("WORDS_SESSION_SECRET is not set");
+  }
+  if (secret.length < 32) {
+    throw new Error("WORDS_SESSION_SECRET must be at least 32 chars");
+  }
+  return new TextEncoder().encode(secret);
+}
+
+export async function createSessionToken(): Promise<string> {
+  return new SignJWT({ sub: "owner" })
+    .setProtectedHeader({ alg: "HS256" })
+    .setIssuedAt()
+    .setExpirationTime(`${COOKIE_MAX_AGE_SECONDS}s`)
+    .sign(getSecret());
+}
+
+export async function verifySessionToken(token: string): Promise<boolean> {
+  try {
+    await jwtVerify(token, getSecret(), { algorithms: ["HS256"] });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function buildSessionCookie(token: string): string {
+  const parts = [
+    `${COOKIE_NAME}=${token}`,
+    "Path=/",
+    "HttpOnly",
+    "SameSite=Lax",
+    `Max-Age=${COOKIE_MAX_AGE_SECONDS}`,
+  ];
+  if (process.env.NODE_ENV === "production") {
+    parts.push("Secure");
+  }
+  return parts.join("; ");
+}
+
+export function buildClearCookie(): string {
+  const parts = [
+    `${COOKIE_NAME}=`,
+    "Path=/",
+    "HttpOnly",
+    "SameSite=Lax",
+    "Max-Age=0",
+  ];
+  if (process.env.NODE_ENV === "production") {
+    parts.push("Secure");
+  }
+  return parts.join("; ");
+}
+
+export function readSessionCookieFromHeader(
+  cookieHeader: string | undefined | null,
+): string | null {
+  if (!cookieHeader) return null;
+  const match = cookieHeader
+    .split(/;\s*/)
+    .map((c) => {
+      const eq = c.indexOf("=");
+      return eq === -1
+        ? null
+        : { name: c.slice(0, eq), value: c.slice(eq + 1) };
+    })
+    .find((c) => c?.name === COOKIE_NAME);
+  return match ? match.value : null;
+}
+
+export async function isAuthedFromCookieHeader(
+  cookieHeader: string | undefined | null,
+): Promise<boolean> {
+  const token = readSessionCookieFromHeader(cookieHeader);
+  if (!token) return false;
+  return verifySessionToken(token);
+}
+
+export const WORDS_COOKIE_NAME = COOKIE_NAME;

src/lib/words-auth.ts

@@ -37,6 +37,9 @@ const Nav = () => (
       <NavLink href="/now" className="text-sm sm:text-base">
         /now
       </NavLink>
+      <NavLink href="/words" className="text-sm sm:text-base">
+        /words
+      </NavLink>
       <NavLink href="/shelf" className="text-sm sm:text-base">
         /shelf
       </NavLink>

src/navigation/Nav.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+
+import { format } from "date-fns";
+import { GetServerSideProps } from "next";
+import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
+import { serialize } from "next-mdx-remote/serialize";
+import Link from "next/link";
+import remarkGfm from "remark-gfm";
+
+import { Meta } from "layout/Meta";
+import { isAuthedFromCookieHeader } from "lib/words-auth";
+import { Main } from "templates/Main";
+
+import Container from "components/Container";
+import { ExternalLink } from "components/ExternalLink";
+
+import { getWordBySlug } from "utils/Words";
+import { WordVisibility } from "utils/words-shared";
+
+type Props = {
+  slug: string;
+  date: string;
+  time: string;
+  wordCount: number;
+  visibility: WordVisibility;
+  title: string | null;
+  mdxSource: MDXRemoteSerializeResult;
+};
+
+const WordPage = (props: Props) => {
+  const dateLabel = props.date
+    ? format(new Date(`${props.date}T00:00:00Z`), "EEEE d MMMM yyyy")
+    : "";
+  const headingTitle = props.title || dateLabel;
+  const metaTitle = props.title
+    ? `${props.title} · /words`
+    : `/words/${props.slug}`;
+
+  return (
+    <Main
+      className="text-lg py-4 md:py-8 lg:py-16"
+      meta={<Meta title={metaTitle} description="A daily writing entry" />}
+    >
+      <Container maxWidth="prose">
+        <p className="mb-2">
+          <Link href="/words">← Words</Link>
+        </p>
+        <div className="text-sm opacity-60 mb-1">
+          {dateLabel} · {props.time} · {props.wordCount} words
+          {props.visibility === "private" && (
+            <span className="ml-2 uppercase tracking-wide">private</span>
+          )}
+        </div>
+        <h1 className="mb-6">{headingTitle}</h1>
+        <div className="blog-post c_blog-content">
+          <MDXRemote {...props.mdxSource} components={{ a: ExternalLink }} />
+        </div>
+      </Container>
+    </Main>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps<Props> = async ({
+  params,
+  req,
+  res,
+}) => {
+  const slug = String(params?.slug ?? "");
+  const entry = getWordBySlug(slug);
+  if (!entry) {
+    return { notFound: true };
+  }
+
+  if (entry.visibility === "private") {
+    const authed = await isAuthedFromCookieHeader(req.headers.cookie);
+    if (!authed) {
+      return { notFound: true };
+    }
+    res.setHeader("Cache-Control", "no-store");
+  }
+
+  const mdxSource = await serialize(entry.content, {
+    mdxOptions: { remarkPlugins: [remarkGfm] },
+  });
+
+  return {
+    props: {
+      slug: entry.slug,
+      date: entry.date,
+      time: entry.time,
+      wordCount: entry.wordCount,
+      visibility: entry.visibility,
+      title: entry.title,
+      mdxSource,
+    },
+  };
+};
+
+export default WordPage;