Skip to content

Add /write visual article portal - #4

Merged
HumbleBee14 merged 14 commits into
mainfrom
feature/write-portal
Jul 12, 2026
Merged

Add /write visual article portal#4
HumbleBee14 merged 14 commits into
mainfrom
feature/write-portal

Conversation

@HumbleBee14

Copy link
Copy Markdown
Member

What

A no-login, in-browser article editor at /write so contributors can write posts without touching MDX, Git, or the repo layout. They write visually; the portal generates the exact post folder the repo expects and hands them a ZIP to drop into src/content/posts/ (or attach to an issue for a maintainer).

How it works

  • EditorBlockNote (open-source, Notion-style, ProseMirror-based). Slash menu, drag-to-reorder, and custom blocks for every site MDX component: Figure, Gallery, Video, Note, Separator, Math (live KaTeX), Table (with variant picker), and a custom-component attach-code block for power users.
  • Serializersrc/write/serialize/toMdx.ts is a pure function turning the editor's block JSON into index.mdx, byte-matching the conventions in docs/writing-articles.md (heading levels, hoisted astro:assets imports, component syntax, escaping). Fully unit-tested (31 cases).
  • Export — jszip packages <slug>/index.mdx + images + any component .tsx + a HOW-TO-SUBMIT.md. A validation checklist (missing title/summary/topic, bad slug, images without alt, empty blocks) gates the download.
  • Drafts — autosaves to localStorage (content) + IndexedDB (images) with a restore banner.

Scope

  • All portal code is isolated under src/write/ so it can evolve as the blog gains new markdown features (new feature = one block file + one serializer case + one test). Nothing outside src/write/, src/pages/write.astro, the guest author, the sitemap skip, and deps changes.
  • Also enabled + documented KaTeX math ($...$ / $$...$$), which was already wired in the pipeline but marked "can be enabled" in the docs.
  • Authors: dropdown of existing handles with a guest default; full author onboarding stays out of scope.

Out of scope (future)

  • GitHub PR automation (the export payload is shaped so a serverless endpoint can consume it later)
  • Live in-browser rendering of writer-supplied component code (the code is PR-reviewed before publish anyway)

Verification

  • npm run verify — astro check (0 errors), ESLint (clean), Prettier (clean), 31 vitest tests pass
  • npm run build — produces /write; a synthetic all-blocks post was built through the real MDX pipeline and confirmed to render KaTeX, Figure, zebra Table, Video, and separator (throwaway post removed before commit)

Test locally with npm run devhttp://localhost:4321/write.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 12, 2026

Copy link
Copy Markdown

Deploying mlsystems with  Cloudflare Pages  Cloudflare Pages

Latest commit: 0a21ffd
Status: ✅  Deploy successful!
Preview URL: https://dca78311.mlsystems.pages.dev
Branch Preview URL: https://feature-write-portal.mlsystems.pages.dev

View logs

Serializer correctness:
- Wrap link destinations containing () or spaces in angle brackets
- Emit theme-aware var(--tc-*) for text colors (readable in dark mode)
- Escape leading list/blockquote/heading/HR markers in plain text
- Add --tc-* text-color custom properties (light + dark)

Rendering:
- Style article h3 (explicit size) and add h4 so editor's 3 heading
  levels stay visually distinct; map h4 in MDXComponents

Editor/UX:
- Parse YouTube v= anywhere in the query, not only watch?v= first
- Lock the editor while the restore-draft banner is up so typing is
  not silently discarded
- Keep a custom slug when editing the title after restore
- Validate image-by-URL input
- Surface packaging errors on download instead of swallowing them

Efficiency/cleanup:
- persistAssets writes only new/removed blobs instead of clearing all
- Memoize KaTeX render in MathBlock
- Single COMPONENT_NAME_RE source of truth in validate.ts
- Halve the desktop canvas breakout (48px to 24px) so body text sits
  close to the Post border instead of floating far inside; trim top pad
- Move the restore-draft banner from page top to directly above the
  Post box, where the writer is looking when a draft loads
@HumbleBee14
HumbleBee14 merged commit 83988c0 into main Jul 12, 2026
2 checks passed
@HumbleBee14
HumbleBee14 deleted the feature/write-portal branch July 12, 2026 14:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant