@natjswenson/devlog 0.1.0

package/examples/react/useDevLogEntries.js

@@ -0,0 +1,95 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { DEVLOG_CONFIG as DEFAULT_CONFIG } from './devlog-config.js';
+
+/**
+ * Parse YAML-ish frontmatter from a markdown string.
+ * Returns { metadata: { title, date, project, summary }, body: string }
+ */
+function parseFrontmatter(raw) {
+  const match = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/);
+  if (!match) return { metadata: {}, body: raw };
+
+  const frontmatter = match[1];
+  const body = match[2];
+  const metadata = {};
+
+  for (const line of frontmatter.split('\n')) {
+    const m = line.match(/^(\w+)\s*:\s*"?([^"]*)"?\s*$/);
+    if (m) metadata[m[1]] = m[2].trim();
+  }
+
+  return { metadata, body };
+}
+
+/**
+ * Hook for fetching dev log entries from a daily-dev-log repo on GitHub.
+ *
+ * Defaults to DEVLOG_CONFIG from ./devlog-config.js — pass `configOverride`
+ * to inject runtime values (used by the preview app, generally not needed).
+ *
+ * @param {string} project - Project folder name (e.g. "myproject")
+ * @param {object} [configOverride] - { repoOwner, repoName, branch, baseUrl? }
+ * @returns {{ entries, loadedContent, loading, error, fetchEntryContent, retry }}
+ */
+export function useDevLogEntries(project, configOverride) {
+  const config = useMemo(() => {
+    const merged = { ...DEFAULT_CONFIG, ...(configOverride || {}) };
+    if (!configOverride?.baseUrl) {
+      merged.baseUrl = `https://raw.githubusercontent.com/${merged.repoOwner}/${merged.repoName}/${merged.branch}`;
+    }
+    return merged;
+  }, [configOverride]);
+
+  const [entries, setEntries] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const contentCache = useRef(new Map());
+  const [loadedContent, setLoadedContent] = useState(new Map());
+
+  const fetchManifest = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const url = `${config.baseUrl}/${project}/manifest.json`;
+      const res = await fetch(url);
+      if (!res.ok) {
+        if (res.status === 404) {
+          setEntries([]);
+          return;
+        }
+        throw new Error(`Failed to fetch manifest (${res.status})`);
+      }
+      const data = await res.json();
+      setEntries(data.entries || []);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [project, config]);
+
+  useEffect(() => {
+    fetchManifest();
+  }, [fetchManifest]);
+
+  const fetchEntryContent = useCallback(async (filename) => {
+    if (contentCache.current.has(filename)) return;
+
+    try {
+      const url = `${config.baseUrl}/${project}/${filename}`;
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`Failed to fetch entry (${res.status})`);
+      const raw = await res.text();
+      const { body } = parseFrontmatter(raw);
+
+      contentCache.current.set(filename, body);
+      setLoadedContent(new Map(contentCache.current));
+    } catch (err) {
+      contentCache.current.set(filename, `*Error loading entry: ${err.message}*`);
+      setLoadedContent(new Map(contentCache.current));
+    }
+  }, [project, config]);
+
+  return { entries, loadedContent, loading, error, fetchEntryContent, retry: fetchManifest };
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@natjswenson/devlog",
+  "version": "0.1.0",
+  "description": "Daily dev log generator — Claude Code skill + preview app for publishing git-based dev logs to your site",
+  "license": "MIT",
+  "author": "Nate Swenson",
+  "homepage": "https://github.com/natejswenson/devlog",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/natejswenson/devlog.git"
+  },
+  "bugs": {
+    "url": "https://github.com/natejswenson/devlog/issues"
+  },
+  "keywords": [
+    "devlog",
+    "claude-code",
+    "claude-skill",
+    "build-in-public",
+    "git",
+    "blog"
+  ],
+  "type": "module",
+  "bin": {
+    "devlog": "bin/devlog.js"
+  },
+  "files": [
+    "bin/",
+    "preview/",
+    "examples/",
+    "SKILL.md",
+    "config.example.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.0",
+    "kleur": "^4.1.5",
+    "prompts": "^2.4.2",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-markdown": "^9.0.0",
+    "remark-gfm": "^4.0.0",
+    "vite": "^5.4.0"
+  }
+}

package/preview/App.jsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import DevLogPage from '../examples/react/DevLogPage.jsx';
+import { DEMO_BASE, DEMO_PROJECTS, DEMO_PROJECT_KEY } from './demo.js';
+
+const owner = import.meta.env.VITE_DEVLOG_OWNER;
+const repo = import.meta.env.VITE_DEVLOG_REPO;
+const branch = import.meta.env.VITE_DEVLOG_BRANCH || 'main';
+const projectsRaw = import.meta.env.VITE_DEVLOG_PROJECTS;
+
+const isDemo = !owner || !repo;
+
+let realProjects = [];
+try {
+  realProjects = projectsRaw ? JSON.parse(projectsRaw) : [];
+} catch {
+  realProjects = [];
+}
+
+const config = isDemo
+  ? { repoOwner: 'demo', repoName: 'demo', branch: 'main', baseUrl: DEMO_BASE }
+  : { repoOwner: owner, repoName: repo, branch };
+
+const projects = isDemo
+  ? DEMO_PROJECTS
+  : (realProjects.length > 0 ? realProjects : null);
+
+function DemoBanner() {
+  return (
+    <div className="demo-banner" role="alert">
+      <div className="demo-banner__row">
+        <strong>👋 demo mode</strong>
+        <span>
+          You're looking at fake entries. Wipe this and point at your real dev log:
+        </span>
+      </div>
+      <pre className="demo-banner__code">npx @natjswenson/devlog init</pre>
+      <div className="demo-banner__small">
+        Or set <code>VITE_DEVLOG_OWNER</code>, <code>VITE_DEVLOG_REPO</code>, <code>VITE_DEVLOG_PROJECTS</code> in <code>preview/.env.local</code> and restart vite.
+      </div>
+    </div>
+  );
+}
+
+function NoProjectsScreen() {
+  return (
+    <div className="empty-screen">
+      <h1>You found the preview, congratulations.</h1>
+      <p>
+        Env vars say you have a repo (<code>{owner}/{repo}</code>) but no projects.
+        That's like buying a stage and forgetting to invite a band.
+      </p>
+      <p>Add at least one project to your config:</p>
+      <pre>{`{
+  "projects": [
+    { "key": "myproject", "path": "...", "remote": "${owner}/myproject" }
+  ]
+}`}</pre>
+      <p>
+        Then run <code>npx @natjswenson/devlog preview</code> again, or set
+        <code> VITE_DEVLOG_PROJECTS</code> directly in <code>preview/.env.local</code>.
+      </p>
+    </div>
+  );
+}
+
+export default function App() {
+  const [activeKey, setActiveKey] = useState((projects && projects[0]?.key) || DEMO_PROJECT_KEY);
+
+  if (!isDemo && !projects) {
+    return <NoProjectsScreen />;
+  }
+
+  return (
+    <>
+      {isDemo && <DemoBanner />}
+      <DevLogPage
+        project={activeKey}
+        projects={projects}
+        config={config}
+        onProjectChange={setActiveKey}
+      />
+    </>
+  );
+}

package/preview/README.md

@@ -0,0 +1,25 @@
+# preview/
+
+Standalone Vite app that renders your published dev log locally.
+
+## Run via CLI (recommended)
+
+```sh
+npx @natjswenson/devlog preview
+```
+
+The CLI reads `~/.claude/skills/devlog/config.json` and passes the values to Vite via env vars.
+
+## Deploy as a standalone site
+
+If you don't have a personal site yet, this directory is a complete React/Vite app you can deploy as your dev log site.
+
+1. Set env vars (Vercel/Netlify/Cloudflare Pages — wherever):
+   - `VITE_DEVLOG_OWNER` = your GitHub username
+   - `VITE_DEVLOG_REPO` = your dev-log repo name (e.g. `daily-dev-log`)
+   - `VITE_DEVLOG_BRANCH` = `main` (or `master`)
+   - `VITE_DEVLOG_PROJECTS` = JSON array, e.g. `[{"key":"myproject","label":"My Project"}]`
+2. Build command: `vite build` (root: this directory)
+3. Output: `dist/`
+
+For local-only dev (without the CLI), set the same env vars in a `.env.local` next to this `vite.config.js` and run `vite`.

package/preview/demo.js

@@ -0,0 +1,181 @@
+/**
+ * Demo mode for the preview app.
+ *
+ * When the user runs the preview without env vars (or without going through
+ * `npx @natjswenson/devlog init`), we render fake entries against a
+ * pretend GitHub URL. The real DevLogPage component does its normal thing;
+ * a tiny fetch override intercepts requests to the demo URL and serves
+ * canned data.
+ *
+ * Goal: show the user what their dev log will look like, while loudly
+ * encouraging them to wipe this out and point it at their real repo.
+ */
+
+export const DEMO_BASE = 'https://demo-mode.local';
+export const DEMO_PROJECT_KEY = 'placeholder-empire';
+export const DEMO_PROJECTS = [
+  { key: DEMO_PROJECT_KEY, label: 'The Placeholder Empire' },
+];
+
+function offsetDate(daysAgo) {
+  const d = new Date();
+  d.setDate(d.getDate() - daysAgo);
+  return d.toISOString().slice(0, 10);
+}
+
+const ENTRIES = [
+  {
+    date: offsetDate(0),
+    title: 'You are looking at fake data',
+    summary: "Hi. These aren't your entries. Your entries are 30 seconds away.",
+    body: `## What I Built
+
+Nothing. I'm a placeholder. A handsome one, but still a placeholder.
+
+You're seeing this screen because the preview app couldn't find env vars
+pointing at your dev-log repo. Once that's fixed, this entire feed gets
+replaced with real entries, generated by the \`/devlog\` skill from your
+actual git commits.
+
+## What's Next
+
+You. Setting things up. Probably while half-watching a YouTube tutorial
+about something unrelated. We believe in you.
+
+## Public Commits
+
+- [demo] make placeholder more passive-aggressive ([abcd123](#))
+- [demo] add a tiny bit of charm ([def4567](#))
+`,
+  },
+  {
+    date: offsetDate(1),
+    title: 'How to make this screen go away',
+    summary: 'Two paths: the lazy one (recommended) and the manual one (also fine).',
+    body: `## The lazy path
+
+\`\`\`sh
+npx @natjswenson/devlog init
+\`\`\`
+
+Answer four prompts. The CLI creates your dev-log repo on GitHub, installs
+the Claude Code skill, and writes your config. Run \`npx @natjswenson/devlog preview\`
+again. This entry vanishes. You feel powerful.
+
+## The manual path
+
+Set these in \`preview/.env.local\` (or your shell), then restart vite:
+
+\`\`\`
+VITE_DEVLOG_OWNER=your-github-username
+VITE_DEVLOG_REPO=daily-dev-log
+VITE_DEVLOG_BRANCH=main
+VITE_DEVLOG_PROJECTS=[{"key":"myproject","label":"My Project"}]
+\`\`\`
+
+## What's Next
+
+The real preview, with your real entries. Try it.
+`,
+  },
+  {
+    date: offsetDate(3),
+    title: "Why you'd actually want this",
+    summary: 'Build in public, but with style. And without remembering to write blog posts.',
+    body: `## What I Built
+
+The whole point: you commit code as usual. You run \`/devlog\` in Claude Code.
+The skill reads today's commits and writes a *narrative* entry — not "fix typo,
+fix typo again, ok actually fix it" but real prose about what you built and why.
+
+That entry gets pushed to your dev-log repo. Your site (or this preview app,
+deployed to Vercel/Netlify/Cloudflare) renders it.
+
+The result: you ship in public without ever opening a blog post editor.
+
+## What's Next
+
+You'll set this up. You'll ship something on day one. You'll feel slightly
+smug about it on the train tomorrow. We're rooting for you.
+
+## Public Commits
+
+- [demo] write hopeful pep talk ([eeee101](#))
+`,
+  },
+  {
+    date: offsetDate(7),
+    title: "Things this is not",
+    summary: 'A short list, for the avoidance of disappointment.',
+    body: `## Not features
+
+- A blog CMS. There are sixty of those. Use one if you want one.
+- A social network. Please don't.
+- An AI ghostwriter for marketing copy. The narratives come from *your*
+  commits. Garbage in, garbage out.
+- A way to make your past coding choices look better in retrospect. Sorry.
+
+## Is features
+
+- A way to ship dev log entries without context-switching out of Claude Code.
+- A static, no-backend pipeline (manifest.json + markdown on GitHub).
+- Components you can drop into your own React site, or the preview app you
+  can deploy as a standalone dev log.
+
+## What's Next
+
+Replace this fake entry with a real one. It's right there. Just go.
+`,
+  },
+];
+
+const MANIFEST = {
+  entries: ENTRIES.map((e) => ({
+    date: e.date,
+    file: `${e.date}.md`,
+    title: e.title,
+    summary: e.summary,
+  })),
+};
+
+function entryMarkdown(entry) {
+  return `---
+title: "${entry.title.replace(/"/g, '\\"')}"
+date: ${entry.date}
+project: ${DEMO_PROJECT_KEY}
+summary: "${entry.summary.replace(/"/g, '\\"')}"
+---
+
+${entry.body}`;
+}
+
+function demoResponse(url) {
+  if (url.endsWith('manifest.json')) {
+    return new Response(JSON.stringify(MANIFEST), {
+      status: 200,
+      headers: { 'content-type': 'application/json' },
+    });
+  }
+  const m = url.match(/(\d{4}-\d{2}-\d{2})\.md$/);
+  if (m) {
+    const entry = ENTRIES.find((e) => e.date === m[1]);
+    if (entry) {
+      return new Response(entryMarkdown(entry), {
+        status: 200,
+        headers: { 'content-type': 'text/plain' },
+      });
+    }
+  }
+  return new Response('demo: not found', { status: 404 });
+}
+
+export function installDemoFetch() {
+  const original = window.fetch.bind(window);
+  window.fetch = async (input, init) => {
+    const url = typeof input === 'string' ? input : input?.url || String(input);
+    if (url.startsWith(DEMO_BASE)) {
+      return demoResponse(url);
+    }
+    return original(input, init);
+  };
+}

package/preview/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>devlog preview</title>
+    <style>
+      :root {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      }
+      body { margin: 0; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.jsx"></script>
+  </body>
+</html>

package/preview/main.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import { installDemoFetch } from './demo.js';
+import './preview.css';
+
+if (!import.meta.env.VITE_DEVLOG_OWNER || !import.meta.env.VITE_DEVLOG_REPO) {
+  installDemoFetch();
+}
+
+createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/preview/preview.css

@@ -0,0 +1,132 @@
+/* preview-app chrome — demo banner + empty states. The DevLogPage
+ * component brings its own styles. Keep this file tiny.
+ */
+
+.demo-banner {
+  margin: 16px auto 0;
+  max-width: 720px;
+  padding: 16px 20px;
+  border: 1px dashed #d97706;
+  background: #fffbeb;
+  color: #78350f;
+  border-radius: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+@media (prefers-color-scheme: dark) {
+  .demo-banner {
+    background: rgba(217, 119, 6, 0.08);
+    color: #fcd34d;
+    border-color: #b45309;
+  }
+}
+
+.demo-banner__row {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.demo-banner__row strong {
+  font-size: 13px;
+  letter-spacing: -0.01em;
+}
+
+.demo-banner__code {
+  margin: 0 0 8px;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  color: inherit;
+}
+
+@media (prefers-color-scheme: dark) {
+  .demo-banner__code {
+    background: rgba(255, 255, 255, 0.06);
+  }
+}
+
+.demo-banner__small {
+  font-size: 12px;
+  opacity: 0.85;
+}
+
+.demo-banner code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  padding: 1px 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .demo-banner code {
+    background: rgba(255, 255, 255, 0.08);
+  }
+}
+
+.empty-screen {
+  max-width: 640px;
+  margin: 80px auto;
+  padding: 24px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: #1a1a1a;
+}
+
+@media (prefers-color-scheme: dark) {
+  .empty-screen {
+    color: #e8e8e8;
+  }
+}
+
+.empty-screen h1 {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  margin: 0 0 16px;
+}
+
+.empty-screen p {
+  font-size: 15px;
+  line-height: 1.6;
+  margin: 0 0 12px;
+}
+
+.empty-screen code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .empty-screen code {
+    background: rgba(255, 255, 255, 0.08);
+  }
+}
+
+.empty-screen pre {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+  padding: 14px 16px;
+  overflow-x: auto;
+  margin: 0 0 12px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .empty-screen pre {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+}

package/preview/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    open: true,
+  },
+});