Feature/update luxe edit (#14)

* Update luxe-edit dependency to version 0.2.0 and refactor related imports and usage in blog components

* Update deployment workflows to specify branch references and trigger deploy on sync

* Add project overview and branch architecture documentation to CLAUDE.md

Author: amide-init

.github/workflows/deploy.yml

@@ -25,6 +25,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          ref: web
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/sync-to-web.yml

@@ -33,6 +33,21 @@ jobs:
             git checkout HEAD -- data/ gitforge.config.json
             git diff --cached --quiet || git commit -m "Sync code from main"
             git push origin web
+            echo "pushed=true" >> "$GITHUB_OUTPUT"
           else
             echo "web branch not yet created — skipping sync"
+            echo "pushed=false" >> "$GITHUB_OUTPUT"
           fi
+        id: sync
+
+      - name: Trigger deploy
+        if: steps.sync.outputs.pushed == 'true'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            await github.rest.actions.createWorkflowDispatch({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              workflow_id: 'deploy.yml',
+              ref: 'web'
+            })

CLAUDE.md

@@ -0,0 +1,62 @@
+# Project: Gitfolio
+
+## Overview
+
+This repo is both:
+- A **Vite + React + TS** template for a GitHub profile site.
+- An **npm CLI package** named `gitforge` that generates static data from the GitHub API.
+
+## Branch Architecture
+
+Two-branch setup:
+
+| Branch | Purpose |
+|--------|---------|
+| `main` | Development — code only. `data/*.json` files are always empty `[]`. |
+| `web`  | Deployment — code + personal data. `data/` files hold real content. |
+
+- `validate-main.yml` enforces that `data/*.json` stay empty on `main`.
+- When a user forks the repo they get `main` with empty data, then create their own `web` branch for personal data.
+- `sync-to-web.yml` merges code from `main` → `web` on every push, but always restores `web`'s `data/` and `gitforge.config.json` so personal data is never overwritten.
+- `deploy.yml` always checks out the `web` branch (explicit `ref: web`) for all trigger types (push, schedule, workflow_dispatch).
+- Because `GITHUB_TOKEN` pushes don't trigger other workflows, `sync-to-web.yml` explicitly dispatches `deploy.yml` via the GitHub API after pushing to `web`.
+
+## CLI & Config
+
+- Config source of truth: `gitforge.config.json` (git-ignored). Only `gitforge.config.example.json` is tracked.
+- Generator script: `scripts/generate-github-data.js`, exposed as the `gitforge` binary via `package.json`.
+- Usage: `gitforge [owner] [--type user|org]` — or reads `gitforge.config.json` when no CLI args given.
+
+## Generated Files
+
+Do not hand-edit or rely on these for long-term docs — they are regenerated:
+- `src/generated/githubData.ts`
+- `src/siteContent.json`
+
+When editing site content, work against `src/siteContent.json` (keeping in mind it gets regenerated).
+
+## App Constraints
+
+- Functional React components, TypeScript, Tailwind CSS.
+- Single-page app (React Router for internal nav), clean/dark/minimal/developer-focused.
+- Deterministic and static — no runtime GitHub API calls from the browser.
+
+## Tech Stack
+
+- React + Vite + TypeScript
+- Tailwind CSS
+- pnpm
+- Rich text editor: `luxe-edit` (v0.2.0)
+  - Save content as JSON via `getEditorJSON(editorState)` in `onChange`
+  - Render saved JSON as HTML via `getDOMFromJSON(savedJson)`
+
+## Key Files
+
+- `scripts/generate-github-data.js` — CLI / data generator
+- `gitforge.config.example.json` — tracked config template
+- `src/generated/githubData.ts` — generated GitHub data (do not hand-edit)
+- `src/siteContent.json` — generated site content (do not hand-edit)
+- `src/admin/pages/AdminBlogsPage.tsx` — blog editor (uses LuxeEditor)
+- `src/pages/BlogPage.tsx` — blog display (renders JSON via `getDOMFromJSON`)
+- `src/types/contentTypes.ts` — shared content types (`Blog`, `Project`, `Post`, `Video`)
+- `.github/workflows/` — CI/CD workflows

package.json

@@ -13,7 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "luxe-edit": "^0.1.6",
+    "luxe-edit": "^0.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-markdown": "^9.0.1",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { LuxeEditor, getEditorJSON, getEditorFormattedText } from 'luxe-edit'
+import { LuxeEditor, getEditorJSON } from 'luxe-edit'
 import 'luxe-edit/index.css'
 import { useAdminAuthContext } from '../context/AdminAuthContext'
 import { useBlogsStore } from '../hooks/useBlogsStore'
@@ -170,10 +170,7 @@ function BlogCard({
             }}
             initialJSON={blog.contentJSON}
             onChange={(editorState) => {
-              onUpdate({
-                content: getEditorFormattedText(editorState),
-                contentJSON: getEditorJSON(editorState),
-              })
+              onUpdate({ contentJSON: getEditorJSON(editorState) })
             }}
             ignoreInitialChange
           />

src/admin/pages/AdminBlogsPage.tsx

@@ -1,6 +1,6 @@
 import { useParams, Link } from 'react-router-dom'
 import { useSiteData } from '../hooks/useSiteData'
-import { getHTMLFromJSON } from 'luxe-edit'
+import { getDOMFromJSON } from 'luxe-edit'
 import ReactMarkdown from 'react-markdown'
 
 export default function BlogPage() {
@@ -48,7 +48,7 @@ export default function BlogPage() {
       {blog.contentJSON ? (
         <div
           className="prose prose-slate dark:prose-invert max-w-none text-sm text-slate-700 dark:text-slate-300"
-          dangerouslySetInnerHTML={{ __html: getHTMLFromJSON(blog.contentJSON) }}
+          dangerouslySetInnerHTML={{ __html: getDOMFromJSON(blog.contentJSON) }}
         />
       ) : (
         <div className="prose prose-slate dark:prose-invert max-w-none text-sm text-slate-700 dark:text-slate-300">