MyST Integration TODO for WhiteWind Fork

By Thomas Wood (@advanced-eschatonics.com)
Published:

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:

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

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

1.2 Preview Integration Points

``{mermaid} 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 CODEBLOCK1typescript // New MyST preview structure const MySTPreview = ({ content, frontmatter }) => ( <ArticleProvider references={references} frontmatter={frontmatter}> <GridSystemProvider> <MyST ast={mdast} /> </GridSystemProvider> </ArticleProvider> ); CODEBLOCK2{figure} #myst-logo :width: 400px :align: center MyST Logo - Beautiful figure captions with numbering! ``

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} &= \mu0\vec{J} + \mu0\epsilon_0\frac{\partial \vec{E}}{\partial t} \end{align} :::

Perfect for scientific blogging! 🧬

Testing Strategy 🧪

Test Documents

Create comprehensive test cases:

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

Success Metrics 📊

:::{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.