@natjswenson/devlog 0.1.0

package/examples/react/DevLogPage.css

@@ -0,0 +1,372 @@
+/* DevLogPage — entry feed styles
+ *
+ * Self-contained: defines its own CSS variables in a default :root scope.
+ * Override any of the --devlog-* vars in your own stylesheet to match
+ * your site's theme.
+ */
+
+.devlog-page {
+  --devlog-fg: #1a1a1a;
+  --devlog-fg-secondary: #4a4a4a;
+  --devlog-fg-tertiary: #888;
+  --devlog-bg-surface: #f7f7f7;
+  --devlog-bg-elevated: #f0f0f0;
+  --devlog-border: #e5e5e5;
+  --devlog-border-hover: #cccccc;
+  --devlog-transition-fast: 0.15s ease;
+  --devlog-transition-normal: 0.3s ease;
+
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 24px;
+  color: var(--devlog-fg);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  .devlog-page {
+    --devlog-fg: #e8e8e8;
+    --devlog-fg-secondary: #b0b0b0;
+    --devlog-fg-tertiary: #777;
+    --devlog-bg-surface: #1a1a1a;
+    --devlog-bg-elevated: #222;
+    --devlog-border: #2a2a2a;
+    --devlog-border-hover: #3a3a3a;
+  }
+}
+
+/* ─── Project tabs ──────────────────────────────────────────────────── */
+
+.devlog-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--devlog-border);
+}
+
+.devlog-tab {
+  background: none;
+  border: none;
+  padding: 12px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--devlog-fg-tertiary);
+  cursor: pointer;
+  letter-spacing: -0.01em;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color var(--devlog-transition-fast), border-color var(--devlog-transition-fast);
+}
+
+.devlog-tab:hover {
+  color: var(--devlog-fg);
+}
+
+.devlog-tab--active {
+  color: var(--devlog-fg);
+  border-bottom-color: var(--devlog-fg);
+}
+
+/* ─── Entry list ────────────────────────────────────────────────────── */
+
+.devlog-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.devlog-entry {
+  padding: 28px 0;
+  border-bottom: 1px solid var(--devlog-border);
+  cursor: pointer;
+  transition: background var(--devlog-transition-fast);
+}
+
+.devlog-entry:first-child {
+  border-top: 1px solid var(--devlog-border);
+}
+
+.devlog-entry:hover {
+  background: var(--devlog-bg-surface);
+}
+
+.devlog-entry--expanded,
+.devlog-entry--expanded:hover {
+  cursor: default;
+  background: none;
+}
+
+/* ─── Entry header ──────────────────────────────────────────────────── */
+
+.devlog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+.devlog-header__left {
+  flex: 1;
+  min-width: 0;
+}
+
+.devlog-date {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--devlog-fg-tertiary);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin: 0 0 8px;
+}
+
+.devlog-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--devlog-fg);
+  letter-spacing: -0.02em;
+  margin: 0 0 6px;
+  line-height: 1.3;
+}
+
+.devlog-summary {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--devlog-fg-secondary);
+  letter-spacing: -0.01em;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.devlog-chevron {
+  flex-shrink: 0;
+  color: var(--devlog-fg-tertiary);
+  transition: transform var(--devlog-transition-fast);
+  margin-top: 4px;
+}
+
+.devlog-entry--expanded .devlog-chevron {
+  transform: rotate(180deg);
+}
+
+/* ─── Entry content (expanded) ──────────────────────────────────────── */
+
+.devlog-content-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--devlog-transition-normal);
+}
+
+.devlog-entry--expanded .devlog-content-wrapper {
+  grid-template-rows: 1fr;
+}
+
+.devlog-content-inner {
+  overflow: hidden;
+}
+
+.devlog-content {
+  padding-top: 24px;
+}
+
+.devlog-content h2 {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--devlog-fg-tertiary);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 28px 0 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--devlog-border);
+}
+
+.devlog-content h2:first-child {
+  margin-top: 0;
+}
+
+.devlog-content p {
+  font-size: 15px;
+  font-weight: 400;
+  color: var(--devlog-fg-secondary);
+  line-height: 1.7;
+  letter-spacing: -0.01em;
+  margin: 0 0 12px;
+}
+
+.devlog-content ul {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.devlog-content li {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--devlog-fg-secondary);
+  line-height: 1.6;
+  letter-spacing: -0.01em;
+  padding-left: 16px;
+  position: relative;
+}
+
+.devlog-content li::before {
+  content: '\2013';
+  position: absolute;
+  left: 0;
+  color: var(--devlog-fg-tertiary);
+}
+
+.devlog-content a {
+  color: var(--devlog-fg);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: var(--devlog-fg-tertiary);
+  transition: text-decoration-color var(--devlog-transition-fast);
+}
+
+.devlog-content a:hover {
+  text-decoration-color: var(--devlog-fg);
+}
+
+.devlog-content code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  background: var(--devlog-bg-elevated);
+  border: 1px solid var(--devlog-border);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+.devlog-content pre {
+  background: var(--devlog-bg-elevated);
+  border: 1px solid var(--devlog-border);
+  border-radius: 6px;
+  padding: 16px;
+  margin: 0 0 12px;
+  overflow-x: auto;
+}
+
+.devlog-content pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.devlog-content blockquote {
+  margin: 0 0 12px;
+  padding: 0 0 0 16px;
+  border-left: 2px solid var(--devlog-border-hover);
+  color: var(--devlog-fg-secondary);
+  font-style: normal;
+}
+
+/* ─── Loading skeleton ──────────────────────────────────────────────── */
+
+.devlog-skeleton {
+  padding: 28px 0;
+  border-bottom: 1px solid var(--devlog-border);
+}
+
+.devlog-skeleton:first-child {
+  border-top: 1px solid var(--devlog-border);
+}
+
+.devlog-skeleton__line {
+  height: 12px;
+  background: var(--devlog-bg-elevated);
+  border-radius: 4px;
+  animation: devlog-pulse 1.5s ease-in-out infinite;
+}
+
+.devlog-skeleton__line--date {
+  width: 80px;
+  margin-bottom: 10px;
+}
+
+.devlog-skeleton__line--title {
+  width: 60%;
+  height: 16px;
+  margin-bottom: 8px;
+}
+
+.devlog-skeleton__line--summary {
+  width: 85%;
+}
+
+@keyframes devlog-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.8; }
+}
+
+/* ─── Empty & error states ──────────────────────────────────────────── */
+
+.devlog-empty,
+.devlog-error {
+  text-align: center;
+  padding: 80px 0;
+}
+
+.devlog-empty__text,
+.devlog-error__text {
+  font-size: 14px;
+  color: var(--devlog-fg-tertiary);
+  letter-spacing: -0.01em;
+  margin: 0 0 16px;
+}
+
+/* ─── Buttons ───────────────────────────────────────────────────────── */
+
+.devlog-btn {
+  background: none;
+  border: 1px solid var(--devlog-border);
+  border-radius: 6px;
+  padding: 10px 20px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--devlog-fg);
+  cursor: pointer;
+  letter-spacing: -0.01em;
+  transition: border-color var(--devlog-transition-fast), background var(--devlog-transition-fast);
+}
+
+.devlog-btn:hover {
+  border-color: var(--devlog-border-hover);
+  background: var(--devlog-bg-surface);
+}
+
+/* ─── Load more ─────────────────────────────────────────────────────── */
+
+.devlog-load-more {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+/* ─── Responsive ────────────────────────────────────────────────────── */
+
+@media (max-width: 640px) {
+  .devlog-header {
+    flex-direction: column;
+    gap: 0;
+  }
+  .devlog-chevron {
+    display: none;
+  }
+  .devlog-title {
+    font-size: 15px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .devlog-content-wrapper,
+  .devlog-chevron {
+    transition: none;
+  }
+  .devlog-skeleton__line {
+    animation: none;
+    opacity: 0.6;
+  }
+}

package/examples/react/DevLogPage.jsx

@@ -0,0 +1,170 @@
+import { useState, useCallback, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { useDevLogEntries } from './useDevLogEntries.js';
+import { DEVLOG_PROJECTS } from './devlog-config.js';
+import './DevLogPage.css';
+
+const ENTRIES_PER_PAGE = 10;
+
+function formatDate(dateStr) {
+  const [year, month, day] = dateStr.split('-');
+  const date = new Date(year, month - 1, day);
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).toUpperCase();
+}
+
+function ChevronDown() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+/**
+ * DevLogPage renders the entries from a single project of your daily-dev-log repo.
+ *
+ * Props:
+ *   project          (string)   active project key (must match a folder in your dev-log repo)
+ *   projects         (Project[]) optional — list of projects to render as tabs.
+ *                                Defaults to DEVLOG_PROJECTS from devlog-config.js.
+ *                                Hidden if length <= 1.
+ *   onProjectChange  (function) called with key when a tab is clicked.
+ *                                Wire this to your router (e.g. navigate(`/devlog/${key}`)).
+ *   config           (object)   optional config override { repoOwner, repoName, branch }.
+ *                                Used by the preview app; adopters should set values in
+ *                                devlog-config.js instead.
+ */
+export default function DevLogPage({
+  project,
+  projects = DEVLOG_PROJECTS,
+  onProjectChange,
+  config,
+}) {
+  const activeProject = project || projects[0]?.key;
+  const { entries, loadedContent, loading, error, fetchEntryContent, retry } = useDevLogEntries(activeProject, config);
+  const [expandedEntry, setExpandedEntry] = useState(null);
+  const [visibleCount, setVisibleCount] = useState(ENTRIES_PER_PAGE);
+
+  useEffect(() => {
+    setExpandedEntry(null);
+    setVisibleCount(ENTRIES_PER_PAGE);
+  }, [activeProject]);
+
+  const handleToggle = useCallback((filename) => {
+    if (expandedEntry === filename) {
+      setExpandedEntry(null);
+    } else {
+      setExpandedEntry(filename);
+      if (!loadedContent.has(filename)) {
+        fetchEntryContent(filename);
+      }
+    }
+  }, [expandedEntry, loadedContent, fetchEntryContent]);
+
+  const visibleEntries = entries.slice(0, visibleCount);
+  const hasMore = visibleCount < entries.length;
+  const showTabs = projects && projects.length > 1;
+
+  return (
+    <div className="devlog-page">
+      {showTabs && (
+        <div className="devlog-tabs">
+          {projects.map((p) => (
+            <button
+              key={p.key}
+              className={`devlog-tab${p.key === activeProject ? ' devlog-tab--active' : ''}`}
+              onClick={() => onProjectChange?.(p.key)}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {loading && (
+        <div className="devlog-list" aria-busy="true" aria-label="Loading entries">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="devlog-skeleton">
+              <div className="devlog-skeleton__line devlog-skeleton__line--date" />
+              <div className="devlog-skeleton__line devlog-skeleton__line--title" />
+              <div className="devlog-skeleton__line devlog-skeleton__line--summary" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {error && (
+        <div className="devlog-error">
+          <p className="devlog-error__text">Failed to load entries: {error}</p>
+          <button className="devlog-btn" onClick={retry}>Retry</button>
+        </div>
+      )}
+
+      {!loading && !error && entries.length === 0 && (
+        <div className="devlog-empty">
+          <p className="devlog-empty__text">No entries yet.</p>
+        </div>
+      )}
+
+      {!loading && !error && entries.length > 0 && (
+        <>
+          <div className="devlog-list">
+            {visibleEntries.map((entry) => {
+              const isExpanded = expandedEntry === entry.file;
+              const content = loadedContent.get(entry.file);
+
+              return (
+                <article
+                  key={entry.file}
+                  className={`devlog-entry${isExpanded ? ' devlog-entry--expanded' : ''}`}
+                  onClick={() => handleToggle(entry.file)}
+                >
+                  <div className="devlog-header">
+                    <div className="devlog-header__left">
+                      <p className="devlog-date">{formatDate(entry.date)}</p>
+                      <h2 className="devlog-title">{entry.title}</h2>
+                      <p className="devlog-summary">{entry.summary}</p>
+                    </div>
+                    <div className="devlog-chevron" aria-hidden="true">
+                      <ChevronDown />
+                    </div>
+                  </div>
+
+                  <div className="devlog-content-wrapper">
+                    <div className="devlog-content-inner">
+                      {isExpanded && content && (
+                        <div className="devlog-content" onClick={(e) => e.stopPropagation()}>
+                          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                            {content}
+                          </ReactMarkdown>
+                        </div>
+                      )}
+                      {isExpanded && !content && (
+                        <div className="devlog-content">
+                          <p className="devlog-empty__text">Loading...</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+
+          {hasMore && (
+            <div className="devlog-load-more">
+              <button className="devlog-btn" onClick={() => setVisibleCount((c) => c + ENTRIES_PER_PAGE)}>
+                Load More
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/examples/react/README.md

@@ -0,0 +1,74 @@
+# React example — devlog
+
+Drop-in React components for rendering your daily dev log on any React-based site.
+
+## What's here
+
+| File | What to do with it |
+|---|---|
+| `devlog-config.js` | **Edit this.** Set `repoOwner` and `repoName` to your dev-log repo. |
+| `useDevLogEntries.js` | Hook that fetches the manifest + entry markdown. No edits needed. |
+| `DevLogPage.jsx` | The page component. No edits needed. |
+| `DevLogPage.css` | Self-contained styles with CSS variables you can override. |
+
+## Install
+
+1. Copy these four files into your React project (e.g. `src/devlog/`).
+2. Install peer deps:
+   ```sh
+   npm install react-markdown remark-gfm
+   ```
+3. Edit `devlog-config.js` to point at your repo.
+4. Mount the page somewhere in your app:
+
+   ```jsx
+   import DevLogPage from './devlog/DevLogPage.jsx';
+
+   function MyDevLogRoute() {
+     return <DevLogPage project="myproject" />;
+   }
+   ```
+
+## With multiple projects + routing
+
+```jsx
+import { useNavigate, useParams } from 'react-router-dom';
+import DevLogPage from './devlog/DevLogPage.jsx';
+
+const PROJECTS = [
+  { key: 'project-a', label: 'Project A' },
+  { key: 'project-b', label: 'Project B' },
+];
+
+function DevLogRoute() {
+  const { project = 'project-a' } = useParams();
+  const navigate = useNavigate();
+  return (
+    <DevLogPage
+      project={project}
+      projects={PROJECTS}
+      onProjectChange={(key) => navigate(`/devlog/${key}`)}
+    />
+  );
+}
+```
+
+## Theming
+
+Override the `--devlog-*` variables on `.devlog-page` (or any ancestor) in your own stylesheet:
+
+```css
+.devlog-page {
+  --devlog-fg: #000;
+  --devlog-bg-surface: #fafafa;
+  /* ...etc */
+}
+```
+
+Variables: `--devlog-fg`, `--devlog-fg-secondary`, `--devlog-fg-tertiary`, `--devlog-bg-surface`, `--devlog-bg-elevated`, `--devlog-border`, `--devlog-border-hover`.
+
+A reasonable dark mode fires automatically via `prefers-color-scheme`.
+
+## Want to use a non-React stack?
+
+The hook and page are React-specific, but the underlying data is just static JSON + Markdown on GitHub. See the **Data contract** section of the top-level README.

package/examples/react/devlog-config.js

@@ -0,0 +1,24 @@
+/**
+ * Hi! 👋 You're looking at the demo config.
+ *
+ * Step 1: replace `repoOwner` and `repoName` with YOUR daily-dev-log repo.
+ * Step 2: replace the placeholder projects with your actual ones.
+ * Step 3: feel a small wave of accomplishment, then ship something.
+ *
+ * (If you skip these steps, the page will silently render nothing,
+ *  and you will be left to wonder why. Don't do that to yourself.)
+ */
+
+export const DEVLOG_CONFIG = {
+  repoOwner: 'yourusername',
+  repoName: 'daily-dev-log',
+  branch: 'main',
+  get baseUrl() {
+    return `https://raw.githubusercontent.com/${this.repoOwner}/${this.repoName}/${this.branch}`;
+  },
+};
+
+export const DEVLOG_PROJECTS = [
+  { key: 'midnight-side-quest', label: 'Midnight Side Quest' },
+  { key: 'todays-existential-crisis', label: "Today's Existential Crisis" },
+];