I’ve quit my job recently so lots of time freed up for me to learn something and work on personal projects that I’ve been thinking of doing since last year. And so the past couple of weeks I’ve been busy working on a personal project and learning more on tooling to improve my productivity as a developer.
Enough about my life story. This blog post is about the project that I was working on recently, and that is Octo-wysiwyg. The first project that I finally got started among the many others that have been buried in the todo list for ages.
Octo-wysiwyg is an app for easily creating posts in Octopress. Yes Octopress is pretty much complete and you can easily create posts by opening up a terminal and using the
rake new_post['title of your blog post'] command. But after that you usually have to search for the newly created file in the
octopress/source/_posts folder and open it up on a text-editor before you can begin writing. That’s ok but you have to go through those steps every time you want to write something. And also you don’t get a live HTML preview of the things that you’re writing since you are on a text-editor. You can probably use sites like markable.in or dillinger.io if you only want a live preview but after that you would need to paste what you have written into the original markdown file that was generated by Octopress.
Enter Octo-wysiwyg, this app allows you to easily create posts by adding keyboard shortcuts to generate common markdown syntax like headings, images, blockquotes, and code blocks.
Copy it anywhere on your file system. Then update the
config.rb to include the proper file paths.
This app depends on the following ruby gems so you also have to install it before you can start using the app:
Using the App
Execute the following command from the terminal:
Or if you want to use shotgun:
Then access it from the browser when using Sinatra:
Creating a New Post
You can create a new post by accessing
http://localhost:9393/new from your browser. The port number assumes that you’re using the shotgun ruby gem. If you’re using sinatra use
4567 as the port. This will give you the following UI:
All you have to do is input the title of your post and click the ‘create post’ button or press enter.
Updating Existing Posts
There are two ways to update existing posts. You can either do it from the edit page (http://localhost:9393/edit) or from the list page (http://localhost:9393/list). If you do it from the edit page you will have to browse for a markdown file from the
octopress/source/_posts folder and click on ‘upload’.
If you do it from the list page, you can simply select from the list of posts by clicking on the link:
Once you’ve selected a post you will be redirected to the edit page which looks something like this:
Note that the posts are arranged based on the date that the post was first published.
You cannot delete existing posts. However, you can set the post to
publish: false. This will prevent the post from getting published on your blog the next time you deploy using
You can use the following keyboard shortcuts to easily generate markdown syntax:
ctrl + s– save post
ctrl + 1to
ctrl + 6– headings 1 to 6
f1– code block
f2– read more link
ctrl + b– bold
ctrl + i– italic
ctrl + q– blockquote
ctrl + g– insert markdown image tag
ctrl + u– upload image – this will prompt you to upload an image, the uploaded image will be automatically added on the current document and the uploaded image will be copied over to the octopress image directory that you selected
A demo of the app is available here though I’ve disabled the upload feature to prevent usage abuse.
As people usually say, start with something simple and then iterate afterwards. I’m pretty much satisfied with the current features of this app now. The proof is that I’m currently using it to write this blog post. However I want to make use of my remaining free time to work on another project so I’m going to suspend the development of this project for now. Here are some of the features that I plan to add in the future:
- emmet-like syntax for generating html and css code
- creating pages
- line numbers for markdown
If you want to contribute to this project, or you noticed some issues, or you want to throw in some ideas for the next version please visit the octo-wysiwyg github page I’d really appreciate i