WYSIWYG website

I don’t like the experience of writing in one format (markdown in a text editor) and consuming in another (a website). The writing and reading experiences should be as similiar to each other as possible.

Posts are public by default

I have a tendency to keep rewriting things ad nauseam, and a neat trick has been to just treat my blog as a constantly work in progress area for ideas. I update older articles whenever I feel like it, and sometimes just publish a stub that’s a couple lines long so I can come back and flesh it out later.

Version control

Going to edit mode allows the editor to make changes that are autosaved in the draft mode, but they don’t become public till you ‘commit’ them. The version history shows past commits and editor can revert to any of those versions.

Dense linking

Posts should be densely linked to other posts on the website (think Wikipedia). To facilitate this, it should be trivial to insert a link to another post. Typing @ should show a dropdown of other posts and the user can start searching inline. Selecting a post inserts a link to that post.

Links pasted on the canvas should automatically convert from a URL to the title of the HTML page.

Media drag-and-drop

Dragging and dropping an image or video on the canvas uploads the image into the blog. Optionally resize any images over a pixel threshold to a max width and run lossless compression.

Intelligent quotes & dashes

I prefer smart quotes (like ‘this’ or “this”) over dumb quotes (‘this’ or “this”). Most text editors designed for code will use dumb quotes and hyphen instead of em-dash (- vs —). A good writing experience should automatically adjust quotes and dashes.

Markdown support

Import/Export markdown files, write using markdown syntax. As soon as a valid markdown command is recognised, it is converted into the result to avoid * and # all over the article.

Dynamic themes

A toggle somewhere on the page allows dark/light mode toggles as well as a theme color. There can also be a few different font and line spacing options like the Kindle interface.

HTML blocks

Useful when you want to do something unusual in terms of formatting without messing with the universal theme.

-

P.S. If you are looking at this page and find this interesting, reach out to me @gyanl on Twitter and I’ll share a code demo where I’ve started working on this.