Vanilla WhiteWind Sucks

I'm leaving all the MyST syntax in here and yeah maybe eventually we don't have the frontmatter maybe we do. ANYWAY.

I have been working on my own MyST editor in react and I am going to clone WhiteWind and swap out my codemirror editor with myst previews into this site because otherwise I'm going to have to build most of the functionality of WhiteWind into my clone of mystmd.org.

I based all of my parsing work on mystmd.org's sandbox which uses this myst-demo package for the preview functionality and a raw html textarea for the input. I swapped it out for codemirror instead of the editor they're using here because I thought this editor had crap preview capabilities.

It's so funny because I'm loading it up and I'm like okay how does this work and like it's markdown in the very first react markdown editor I tried. The most vanilla, no options, shitty rendering editor there is. And first thing I notice firing up whitewind is that they're using it hahaha.

Another thing I'm going to have to fix pronto is Ctrl+S needs to do the same thing as clicking save. Some of us are paranoid and click Ctrl+S every like 4 seconds. Don't make me click a button.

Also whenever I was highlighting something and wanted to add brackets around it, the [ replaced all the text I highlighted. In other words this is not a codemirror editor.

---

So that being said here's the plan Claude and I have come up with:

---

title: MyST Integration Roadmap for WhiteWind Fork subtitle: Beautiful MyST Markdown Everywhere 🚀 authors:

• name: WhiteWind MyST Team date: 2024-12-19

---

MyST Integration TODO for WhiteWind Fork

:::{important} Priority Goal: Replace WhiteWind's unified/rehype rendering pipeline with MyST rendering while maintaining AT Protocol integration.

This is a complete fork - backward compatibility is not a concern! 🎉 :::

Phase 1: MyST Preview Integration 🎯

:::{note} Start with the preview system first, then tackle the editor. One thing at a time! :::

1.1 Core MyST Dependencies

• Install MyST packages in WhiteWind frontend

  npm install myst-to-react myst-parser myst-transforms 
  npm install myst-frontmatter @myst-theme/providers
  npm install myst-ext-card myst-ext-grid myst-ext-tabs
  npm install myst-ext-proof myst-ext-exercise
  

• Add MyST parsing function to DocProvider.tsx

• Create MyST preview component alongside existing BlogViewer

1.2 Preview Integration Points

graph TD
    A[BlogEditorV2] --> B[Current MDEditor]
    A --> C[Current BlogViewer]
    A --> D[New MyST Preview]
    
    B --> E[Markdown String]
    E --> F[MyST Parser]
    F --> G[MyST Component]
    
    C --> H[unified/rehype]
    H --> I[rehype-react JSX]
    
    style D fill:#e1f5fe
    style F fill:#e8f5e8
    style G fill:#e8f5e8

• Add MyST parsing to preview timer in BlogEditorV2.tsx
• Create toggle between old/new preview modes
• Handle frontmatter extraction from content

:::{warning} Critical: MyST frontmatter handling vs WhiteWind's separate title/theme fields needs careful mapping! :::

Phase 2: Content Model Adaptation 📝

2.1 Single File Adaptation

The MyST editor expects multi-file projects, but we need single-file blog posts:

$$ \text{MyST Project} = {index.md, myst.yml, assets...} $$

$$ \text{WhiteWind Post} = {content: string, metadata: object} $$

Mapping Strategy:

• Extract frontmatter from content string → MyST frontmatter object
• Inject WhiteWind metadata into frontmatter during editing
• Serialize back to single content string for AT Protocol

2.2 Frontmatter Mapping

WhiteWind Field	MyST Frontmatter	Notes
title	title	Direct mapping
theme	site.template	Theme system difference
ogp.url	Custom field	New: ogp.url
visibility	Custom field	New: publish.visibility

:::{note} MyST has much richer frontmatter support - we can enhance WhiteWind's metadata model! :::

Phase 3: MyST Component Integration 🔧

3.1 Replace BlogViewer Preview

• Create MySTViewer.tsx component
• Wrap with ArticleProvider and GridSystemProvider
• Handle MyST theme integration
• Replace ViewerCache in BlogEditorV2.tsx

// New MyST preview structure
const MySTPreview = ({ content, frontmatter }) => (
  <ArticleProvider references={references} frontmatter={frontmatter}>
    <GridSystemProvider>
      <MyST ast={mdast} />
    </GridSystemProvider>
  </ArticleProvider>
);

3.2 Theme System Integration

:::{important} MyST themes vs WhiteWind themes need careful consideration:

• WhiteWind: Simple github-light or (no theme)
• MyST: Rich theme system with book-theme, article-theme, etc. :::

Strategy:

• Map WhiteWind themes to MyST equivalents
• Default to article-theme for clean blog layout
• Allow MyST theme selection via frontmatter

Phase 4: CodeMirror Editor Integration ⌨️

:::{note} Only after MyST preview is working perfectly! :::

4.1 Editor Replacement

• Install CodeMirror dependencies
• Create MyST-aware CodeMirror component
• Add MyST syntax highlighting
• Replace MDEditor in BlogEditorV2.tsx

4.2 Enhanced Editing Features

MyST brings powerful editing capabilities:

::::{grid} 1 1 2 2

:::{card} Live Frontmatter Editing Real-time YAML frontmatter validation and editing :::

:::{card} Rich Directive Support Cards, grids, tabs, proofs, exercises, and more! :::

:::{card} Math & Figures LaTeX math rendering and sophisticated figure handling :::

:::{card} Cross-References Automatic numbering and cross-reference resolution :::

::::

Phase 5: Asset & Image Handling 🖼️

5.1 MyST Figure Integration

MyST has sophisticated figure handling:

:width: 400px
:align: center

MyST Logo - Beautiful figure captions with numbering!

• Map AT Protocol blobs to MyST figure references
• Handle MyST figure directive syntax
• Maintain drag-and-drop image upload

5.2 Advanced MyST Features

MyST supports beautiful mathematics: :::{math}

\begin{align} \nabla \times \vec{E} &= -\frac{\partial \vec{B}}{\partial t} \ \nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\epsilon_0\frac{\partial \vec{E}}{\partial t} \end{align} :::

Perfect for scientific blogging! 🧬

Testing Strategy 🧪

Test Documents

Create comprehensive test cases:

• Basic MyST with frontmatter
• Rich directives (cards, grids, admonitions)
• Math expressions and equations
• Figures and cross-references
• Code blocks with syntax highlighting
• Tables and complex layouts

:::{tip} Use this very TODO.md as the first test document! :::

Success Metrics 📊

• MyST preview renders perfectly in WhiteWind
• All MyST directives work (cards, grids, math, etc.)
• Frontmatter editing is seamless
• AT Protocol save/load preserves MyST content
• Performance is comparable to original editor
• Mobile responsiveness maintained

:::{important} End Goal: WhiteWind becomes the premier MyST blogging platform on AT Protocol! 🎉

Beautiful scientific documents, rich interactive content, and decentralized publishing - the perfect combination! :::

---

Let's build something amazing! 🚀

This TODO.md showcases MyST's rich directive system, math support, figures, grids, and more - perfect for testing the integration! It's also a real roadmap for the project.