Skip to content

SVG/diagram block + homepage Featured/Recent split - #12

Merged
HumbleBee14 merged 1 commit into
mainfrom
feature/svg-block
Jul 13, 2026
Merged

SVG/diagram block + homepage Featured/Recent split#12
HumbleBee14 merged 1 commit into
mainfrom
feature/svg-block

Conversation

@HumbleBee14

Copy link
Copy Markdown
Member

SVG / diagram block (editor)

Closes the gap that hand-authored, theme-aware inline SVGs couldn't be reproduced in the writer.

  • New slash item SVG / Diagram — paste raw SVG markup.
  • Preview ⇄ Code segmented toggle on every block.
  • Strict validation via the browser's DOMParser (XML mode) — mirrors what MDX/JSX needs to build, so a passing preview won't break the page. Malformed SVG shows an inline error with the parser message + "Fix the code" instead of a broken render. <script> stripped from the preview.
  • Serializes as inline <svg> inside <Figure caption>currentColor preserved (adapts to light/dark), fully round-trippable through the edit feature.
  • Size stays author-controlled via the SVG markup; the site gives a responsive default <Figure> box, plus a new .inline-figure svg { max-width:100% } safety net.

Homepage: Featured + Recent

  • Renamed the pinned section to Featured ("Editors' picks") — shown only when posts have featured: true.
  • Added a Recent section below that auto-lists the newest posts from anyone (excluding the featured ones to avoid duplicates).

Files

  • New: src/write/editor/blocks/SvgBlock.tsx
  • Editor: schema.ts, slashMenu.tsx, serialize/toMdx.ts, serialize/validate.ts, editor-theme.css (+ test)
  • Site: src/pages/index.astro, src/styles/global.css

Not merging — for local review first.

SVG block: paste raw SVG, live Preview⇄Code segmented toggle, strict
DOMParser validation with inline error, serializes as inline SVG inside
<Figure> (theme-aware via currentColor, fully round-trippable). Author
controls size via the markup; site gives a responsive default box.

Homepage: rename the pinned section to Featured (shown only when posts
are pinned) and add a Recent section below that auto-lists newest posts.
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying mlsystems with  Cloudflare Pages  Cloudflare Pages

Latest commit: 1c38a9f
Status: ✅  Deploy successful!
Preview URL: https://03ac9b0a.mlsystems.pages.dev
Branch Preview URL: https://feature-svg-block.mlsystems.pages.dev

View logs

@HumbleBee14
HumbleBee14 merged commit c83c7ce into main Jul 13, 2026
2 checks passed
@HumbleBee14
HumbleBee14 deleted the feature/svg-block branch July 13, 2026 11:19
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