An easy open source way to create nice-looking web pages for essays.
I have a new writing tool I'm working on and wanted it to be able to create beautiful essay pages like Medium. But Medium doesn't have an API. So I made an essay-viewer that does. ;-)
Now, I'm not a great CSS hacker. That's obvious. But all that's needed is a framework to get started. That's the idea.
I'm going to keep iterating. :-)
April 2015: There's a new project, MyWord Editor, that picks up where this one left off. It turns the MyWord renderer into a full blog editing system.
The Scripting News blog post announcing myword.io, a good place to post a comment.
-
The two main sections are both positioned absolute, so the text will always begin at the same vertical place no matter how much descriptive text there is.
-
There's a transparent dark rectangle around the byline-title-description section, which makes the text jump out a bit more over the picture.
-
There's a footer section at the bottom, but I haven't done any CSS for it yet, and there's no way to set it via the JSON.
-
Added dropshadows to the byline and description.
-
Added styles to make it look reasonable on a phone.
-
Made the description fixed height, so the body text always begins at the same vertical position.
-
Made the body text a little narrower and added to the line-height.
-
Show the version number in the upper-right corner of the page, in white.
Thanks to an excellent suggestion by Paulo Querido, myword.io now supports Markdown.
Here's a demo page, and the JSON source file is renders.
Here's how it works.
-
Markdown is off by default, you can turn it on by including "flMarkdown": "true".
-
Markdown only applies to the subs. The title, description, byline, etc are not processed.
-
When we generate the Markdown text from the JSON, we add two linefeeds at the end of every line. So every line is effectively a paragraph. Unless it has markup that makes Markdown think it's something else.
-
The CSS for Markdown needs work. I added one fix for <h4> but a lot more is probably needed to make it look great. Please, if you're good with Markdown, Bootstrap Toolkit (which is part of the environment) and CSS, take a look and see if you can improve.
A bunch of small changes, loose-end fixes.
-
If there's an error in the JSON, we put up a dialog saying so, along with a suggestion that you use the excellent JSONLINT site to find the error.
-
If it's been more than a day since an article was posted, instead of saying "By Mary Jones at Wednesday", we say "on Wednesday".
-
Before using any of the values in the JSON, be sure it exists.
-
You can change the title font and the body font. See the example JSON file for a clue.