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. :-)
The Scripting News blog post announcing myword.io, a good place to post a comment.
-
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.