Fix Docker build error; add multi-year view, PDF export, ntfy notifier

Fix: remove unused 'accessibleMonths' variable (tsc exit code 2)

Features:
- AllYearsLetter view: all years in chronological order, reachable
  from "All Years" at the top of the sidebar
- PDF export: window.print() with @media print CSS — sidebar, toolbar,
  and chrome hidden; each year starts on a new page via page-break
- "Download all" exports a plain-text file of every year's letter
- ntfy notifier: standalone Node.js service (notifier/) that fires a
  push notification via ntfy on the 1st of each month; configurable
  via NTFY_TOPIC, NTFY_URL, CRON_SCHEDULE, APP_URL env vars
- docker-compose: adds `notifier` service alongside `app`; reads from
  .env (example in .env.example); NTFY_TEST_ON_START=true sends a
  test ping on container start

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.env.example

@@ -0,0 +1,17 @@
+# Copy to .env and fill in your values
+
+# ntfy topic — make it unguessable (anyone who knows it can receive/send)
+# Subscribe at https://ntfy.sh/YOUR_TOPIC or in the ntfy app
+NTFY_TOPIC=your-unguessable-topic-here
+
+# Optional: self-hosted ntfy server
+# NTFY_URL=https://ntfy.sh
+
+# Optional: URL the notification links back to (your deployed app)
+# APP_URL=http://localhost:8080
+
+# Optional: cron schedule (default: 9 AM on the 1st of every month)
+# CRON_SCHEDULE=0 9 1 * *
+
+# Set to "true" to get a test ping the moment the notifier starts
+# NTFY_TEST_ON_START=false

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*

docker-compose.yml

@@ -6,6 +6,21 @@ services:
       - "8080:80"
     restart: unless-stopped
 
+  notifier:
+    build: ./notifier
+    restart: unless-stopped
+    environment:
+      # Required: set your ntfy topic (keep it unguessable, e.g. "nate-letter-k7x2")
+      NTFY_TOPIC: ${NTFY_TOPIC}
+      # Optional overrides
+      NTFY_URL: ${NTFY_URL:-https://ntfy.sh}
+      APP_URL: ${APP_URL:-http://localhost:8080}
+      CRON_SCHEDULE: ${CRON_SCHEDULE:-0 9 1 * *}   # 9 AM on the 1st of every month
+      # Set to "true" to get a test ping immediately on container start
+      NTFY_TEST_ON_START: ${NTFY_TEST_ON_START:-false}
+    depends_on:
+      - app
+
   dev:
     image: node:20-alpine
     working_dir: /app

notifier/Dockerfile

@@ -0,0 +1,6 @@
+FROM node:20-alpine
+WORKDIR /app
+COPY package.json ./
+RUN npm install --omit=dev
+COPY index.mjs ./
+CMD ["node", "index.mjs"]

notifier/index.mjs

@@ -0,0 +1,63 @@
+import cron from "node-cron";
+
+const NTFY_URL = process.env.NTFY_URL || "https://ntfy.sh";
+const NTFY_TOPIC = process.env.NTFY_TOPIC;
+const CRON_SCHEDULE = process.env.CRON_SCHEDULE || "0 9 1 * *"; // 9 AM on the 1st of each month
+const APP_URL = process.env.APP_URL || "http://localhost:8080";
+
+if (!NTFY_TOPIC) {
+  console.error("NTFY_TOPIC is required. Set it in your environment or docker-compose.");
+  process.exit(1);
+}
+
+const MONTH_NAMES = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December",
+];
+
+async function sendReminder() {
+  const now = new Date();
+  // We fire on the 1st — remind for the month that just ended
+  const prevMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+  const monthName = MONTH_NAMES[prevMonth.getMonth()];
+  const year = prevMonth.getFullYear();
+
+  const title = `Time to write your ${monthName} letter`;
+  const message = `${monthName} ${year} is done. Take 10 minutes to capture the month before it fades. Open your letter app to answer this month's 6 prompts.`;
+
+  try {
+    const res = await fetch(`${NTFY_URL}/${NTFY_TOPIC}`, {
+      method: "POST",
+      headers: {
+        Title: title,
+        Priority: "default",
+        Tags: "pencil,calendar",
+        Click: APP_URL,
+        "Content-Type": "text/plain",
+      },
+      body: message,
+    });
+
+    if (res.ok) {
+      console.log(`[${new Date().toISOString()}] Reminder sent for ${monthName} ${year}`);
+    } else {
+      console.error(`[${new Date().toISOString()}] ntfy returned ${res.status}: ${await res.text()}`);
+    }
+  } catch (err) {
+    console.error(`[${new Date().toISOString()}] Failed to send reminder:`, err.message);
+  }
+}
+
+console.log(`[${new Date().toISOString()}] Notifier started`);
+console.log(`  Topic:    ${NTFY_URL}/${NTFY_TOPIC}`);
+console.log(`  Schedule: ${CRON_SCHEDULE}`);
+console.log(`  App URL:  ${APP_URL}`);
+
+// Run on schedule
+cron.schedule(CRON_SCHEDULE, sendReminder, { timezone: "America/Chicago" });
+
+// Send a startup test ping in dev mode
+if (process.env.NTFY_TEST_ON_START === "true") {
+  console.log("Sending test notification on startup...");
+  sendReminder();
+}

notifier/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "letter-notifier",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.mjs",
+  "dependencies": {
+    "node-cron": "^3.0.3"
+  }
+}

src/App.tsx

@@ -6,6 +6,7 @@ import { LetterView } from "./components/LetterView";
 import { Welcome } from "./components/Welcome";
 import { PodcastYearEndForm } from "./components/PodcastYearEnd";
 import { Home } from "./components/Home";
+import { AllYearsLetter } from "./components/AllYearsLetter";
 import {
   load,
   save,
@@ -100,6 +101,9 @@ export default function App() {
         {view.kind === "letter" && (
           <LetterView data={data} year={view.year} />
         )}
+        {view.kind === "allYears" && (
+          <AllYearsLetter data={data} />
+        )}
         {view.kind === "podcast" && (
           <PodcastYearEndForm
             key={view.year}

src/components/AllYearsLetter.tsx

@@ -0,0 +1,97 @@
+import { useRef } from "react";
+import { generateLetter } from "../utils/letterTemplate";
+import type { AppData } from "../types";
+
+interface AllYearsLetterProps {
+  data: AppData;
+}
+
+export function AllYearsLetter({ data }: AllYearsLetterProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const years = Array.from(
+    new Set([
+      ...data.monthlyEntries.map((e) => e.year),
+      ...data.yearEndEntries.map((e) => e.year),
+    ])
+  ).sort((a, b) => b - a); // newest first
+
+  if (years.length === 0) {
+    return (
+      <div className="letter-view">
+        <h2>All Years</h2>
+        <p style={{ color: "var(--text-muted)", marginTop: 16, fontStyle: "italic" }}>
+          No entries yet. Fill in some months to see your letters here.
+        </p>
+      </div>
+    );
+  }
+
+  function handlePrint() {
+    window.print();
+  }
+
+  function handleDownload() {
+    const lines: string[] = [];
+    for (const year of [...years].reverse()) {
+      lines.push(generateLetter(data, year));
+      lines.push("\n\n" + "─".repeat(60) + "\n\n");
+    }
+    const blob = new Blob([lines.join("")], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${data.name || "my"}-letters-all-years.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <div className="letter-view">
+      <div className="letter-toolbar">
+        <h2>All Years</h2>
+        <div className="toolbar-actions">
+          <button className="btn-secondary" onClick={handleDownload}>
+            Download all
+          </button>
+          <button className="btn-secondary" onClick={handlePrint}>
+            Export PDF
+          </button>
+        </div>
+      </div>
+
+      <div ref={contentRef} className="all-years-content">
+        {[...years].reverse().map((year, i) => {
+          const letter = generateLetter(data, year);
+          const rendered = renderMarkdown(letter);
+          return (
+            <div key={year} className="year-letter-block print-page-break">
+              {i > 0 && <div className="year-divider" />}
+              <div
+                className="letter-content"
+                dangerouslySetInnerHTML={{ __html: rendered }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function renderMarkdown(text: string): string {
+  return text
+    .split(/\n\n+/)
+    .map((para) => {
+      const inner = para
+        .split("\n")
+        .map((line) => {
+          line = line.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+          line = line.replace(/\*(.+?)\*/g, "<em>$1</em>");
+          return line;
+        })
+        .join("<br/>");
+      return `<p>${inner}</p>`;
+    })
+    .join("");
+}

src/components/Home.tsx

@@ -14,7 +14,6 @@ export function Home({ data, currentYear, currentMonth, onNavigate }: HomeProps)
   const yearEnd = data.yearEndEntries.find((e) => e.year === currentYear);
   const podcast = data.podcastEntries?.find((e) => e.year === currentYear);
 
-  const accessibleMonths = currentMonth + 1; // 0-indexed, months up to today
   const completedMonths = monthEntries.length;
   const pct = Math.round((completedMonths / 12) * 100);
 

src/components/Sidebar.tsx

@@ -6,7 +6,8 @@ export type View =
   | { kind: "month"; year: number; month: number }
   | { kind: "yearEnd"; year: number }
   | { kind: "letter"; year: number }
-  | { kind: "podcast"; year: number };
+  | { kind: "podcast"; year: number }
+  | { kind: "allYears" };
 
 interface SidebarProps {
   data: AppData;
@@ -36,6 +37,17 @@ export function Sidebar({
         <span className="brand-name">Annual Letter</span>
       </button>
 
+      <ul className="sidebar-months" style={{ marginBottom: 8 }}>
+        <li>
+          <button
+            className={`sidebar-item sidebar-letter ${view.kind === "allYears" ? "active" : ""}`}
+            onClick={() => onViewChange({ kind: "allYears" })}
+          >
+            <span className="sidebar-item-name">📚 All Years</span>
+          </button>
+        </li>
+      </ul>
+
       {years.map((year) => {
         const monthEntries = data.monthlyEntries.filter((e) => e.year === year);
         const yearEndEntry = data.yearEndEntries.find((e) => e.year === year);

src/index.css

@@ -377,6 +377,56 @@ body { font-family: "Georgia", serif; background: var(--bg); color: var(--text);
   padding: 12px 0;
 }
 
+/* ─── All-years view ─────────────────────────────────────────────────────── */
+.all-years-content { display: flex; flex-direction: column; gap: 0; }
+.year-letter-block { }
+.year-divider { border: none; border-top: 2px dashed var(--border); margin: 48px 0; }
+
+/* ─── Print / PDF export ─────────────────────────────────────────────────── */
+@media print {
+  /* Hide everything except the letter content */
+  .sidebar,
+  .letter-toolbar,
+  .toolbar-actions,
+  .home-header button,
+  .tab-bar {
+    display: none !important;
+  }
+
+  .layout {
+    display: block;
+  }
+
+  .main {
+    padding: 0;
+    max-width: 100%;
+  }
+
+  .letter-content,
+  .all-years-content .letter-content {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    max-width: 100%;
+    font-size: 11pt;
+    line-height: 1.7;
+  }
+
+  .year-divider {
+    border-top: 1px solid #999;
+    margin: 32pt 0;
+  }
+
+  /* Each year starts on a new page */
+  .print-page-break + .print-page-break {
+    page-break-before: always;
+  }
+
+  @page {
+    margin: 1.2in 1in;
+  }
+}
+
 /* ─── Tabs ───────────────────────────────────────────────────────────────── */
 .tab-bar {
   display: flex;