masukomi / mobtvse

Working towards being the worlds best Markdown blogging app...

MObtvse

MObtvse is an easy to use blogging platform for people who love Markdown and want a clean web based interface for creating those posts without sacrificing functionality.

It is my firm belief that lovers of Markdown should no longer have to live as second class citizens. We deserve awesome features, and easy to use blogging tools without having to use crudely implemented Markdown add-ons to other people's bloatware.

Inspired by Svbtle and bootstrapped by Obtvse. MObtvse has come a long way, allowing for easy image uploads to Amazon's S3, or simply managing images uploaded elsewhere, but used in your posts. MObtvse has support for static pages (like an "About" page), taggable posts, comments via Disqus (excellent spam prevention), and Svbtle-style Kudos, and a dynamic Archives page that integrates favorite posts (via Kudos), breaks your posts down by month and allows for easy filtering via tags.

Geeks will be happy to know about its Haml based markup (partially implemented) and MongoDB

Everyone will be happy to know that there are screenshots available at the bottom of this document, and a demo server is set up for you to kick the tires on before you try your own installation. Just scroll down to the "Test Drive" section below.

Before you download...

WordPress has had years to make its installation process almost completely painless. Being a relatively new platform MObtvse still requires a little bit of geekness, and familiarity with installing Rails apps to get installed. But, the basics are all documented and a step-by-step installation walk-through is in the works.

Planned

The goal is to add support for:

• Generation of static html files for fast serving, or tools for making that easily implementable.
• Mixpanel
• The MetaWeblog API
• Great features that HTML based blogging platforms like Wordpress have had for years.

See the major ToDo items here.

The New Hotness

Want the latest tweaks, the bleeding edge functionality? Check out the "experimental" branch. New changes are pushed to experimental where they are allowed to percolate for a little while to increase stability, and catch any wayward bugs before they're pushed to the "master" branch. This also helps to minimize the churn in the "master" branch.

Take it for a test drive!

You can try out the recent changes from the "experimental" branch on our demo box, but Please Note: The demo is running on a free Heroku instance and may take a few seconds to boot up. For real-world performance you can see the author's blog.

The home page is here and the admin page is here

• username: username
• password: password

Free MongoDB hosts

If you want to run this on Heroku you're going to need somewhere to put your MongoDB install. Fortunately MongoLab and MongoHQ both have free plans. We'd recommend going with MongoHQ simply because they offer fifteen times more free storage than MongoLab (240Mb vs 16Mb). MObtvse can, of course, point to your own MongoDB install if you have one.

Installation

Requirements

• Ruby 1.9.x (it's time to upgrade folks)
• Ruby Gems and Bundler
• A MongoDB install to point it at (install locally or use one of the free/paid hosting options).

If you are new to Rails development, check out guides for getting your development environment set up for Mac and Windows.

git clone git://github.com/masukomi/mobtvse.git
cd mobtvse
bundle install

Edit config/config.yml to set up your site information. To set up your admin username and password you will need to set your environment variables (see below) or store them in the config.yml.

Edit config/mongoid.yml to point to your mongodb installation (more details below).

Start the local server:

bundle exec rails server thin

Go to 0.0.0.0:3000, to administrate you go to /admin

For production, you will want to set your password in config.yml or with environment variables (preferred). If you are deploying to Heroku you can edit and run script/heroku_env.sh shell script to set up your environment variables and push them to Heroku. Do this after deploying the app to Heroku the first time. Heroku is a "production" environment, and for your security MObtvse only uses environment variables to configure the database and the admin login.

Or in your shell (~/.bashrc or ~/.zshrc for example)

export MOBTVSE_LOGIN=<LOGIN>
export MOBTVSE_PASSWORD=<PASSWORD>

MongoDB configuration

When getting things set up in development it is configured by default ( in mongoid.yml) to run against a db named mobtvse_development on localhost

In production you will want to set the following environment variables:

• MONGOID_HOST
• MONGOID_PORT
• MONGOID_USERNAME
• MONGOID_PASSWORD
• MONGOID_DATABASE

You can set these up in your .bashrc file or just copy, and edit, the relevant section of script/heroku_env.sh

Importing from Octopress or Jekyll

MObtvse can import your posts from Octopress and Jekyll. If you've configured S3 support it can also upload all of your images to it, and rewrite the image urls in your posts when appropriate. See the migration doc for details.

Support:

• Twitter: MObtvse
• File an issue on Github.

SCREENSHOTS

Admin Screen

Creating and Editing a Post

Viewing a Single Post

Credit:

MObtvse was written by Kay Rhodes. It's origin lies in Nate Wienert's excellent Obtvse.

mobtvse's Issues

Have it send you a notice on twitter / app.net when you get a kudo

Obviously you'd want to be able to easily disable this should you be fortunate enough to get a really popular post.

Notice should include

• note that you got a kudo,
• what you got it on
• total # on that post.

Twitter may not have enough characters for that. App.net definitely should, but it'd be limiting audience severely.

NOTE:

• add ability to disable them at the site level.
• add ability to disable them at a post level. That way if one post is getting crazy popular, you can stop getting spammed by it and still receive notices of other things that people like.

use Select 2.0 for the addition of tags

Select 2.0 has really nice looking UI for handling tags. Let's add that to the edit page.

Uploading files to local disk space.

Many users won't have massive storage requirements and having an image upload to your webserver's disk space would be a nice thing to have rather than having to send it to Amazon S3.

create Jekyll / Octopress import script

I'm thinking this should be a rake script that you pass the path to your source/_posts directory to. It will then iterate over each post in there, parse the YAML frontmatter and use it for the metadata on the new post in MObtvse. The post body would, obviously, become the post.

because MObtvse doesn't support categories any category should be converted to a tag by default.

Timezone publishing bug

There's a time zone related bug when saving a post.

I believe the epoch time stored in the db for posted_at is correct, however the logic that reads it back is interpreting and displaying it without the GMT-4 offset one expects in EST. As a result something that should go live at 1PM ends up going live at 5PM. The easiest way to see the symptom is to click the date link in the editing screen after having set the post to be published and saving. It will display the time it will go live (different offset based on your time zone) instead of the time you hit save at, which is what the published_at date should be.

tags page ignores published state

Create a post, publish it. Then UNpublish it. It will still show up on the tags page for any of its tags.

Add Mixpanel Support

Not only track visits via Mixpanel but add tools to ease tracking of various promotional avenues.

allow users to add their mixpanel info to the config.yml

Implementation

UI

Add a popover to the admin page for each post. When clicking on it users would be presented with pre-generated tracking urls for the post in question for: twitter, facebook, google+, email, etc Twitter, Facebook, and G+ would all get "share on" icon buttons which did whatever was appropriate to share that url on that social network. Email could create an email with their default email client.

Configuration

Users should be able to create a list of sites to track sharing on via the config.yml Something like this:

mixpanel_id: 
mixpanel_sharing_sources:
- twitter
- facebook
- google_plus
- email 

Javascript

There should be a javascript on every public-facing page that looks for our sharing parameters in the query string and creates a data structure to pass to Mixpanel with the appropriate parameters required to track how the visitor came to be at this post.

re-enable pagination

Pagination was disabled when switching to MongoDB. Re-enable it.

Code Blocks with Syntax Highlighting

I possible it would be great to have Syntax Highlighting for code blocks such as github accomplishes with ```

example:

var = what
$what = "2"

switch to multimarkdown

Overview

Markdown is lacking useful things like footnotes. Switch to Multimarkdown.

Notes

rpeg-multimarkdown is probably the way to go. Judging by a quick googling it should work on Heroku.

If we implement Preview from Obtvse 2 it should NOT be handled by Showdown because none of the Showdown implementations appear to support MultiMarkdown...

Deploying to Heroku

I seem to be having problems when it comes to deploying MObtvse to Heroku. Anybody know how I can do this?

/admin 500 errors when run in production

If run in production mode with Nginx and Passenger /admin barfs out a 500 error:

Started GET "/admin" for xxx.xxx.xxx.xxx at 2012-11-10 23:02:34 -0600
Processing by PostsController#admin as HTML
  Rendered posts/_li.html.haml (0.0ms)
  Rendered posts/_li.html.haml (0.0ms)
  Rendered posts/admin.html.haml within layouts/admin (2.3ms)
Completed 500 Internal Server Error in 50ms

ActionView::Template::Error (File to import not found or unreadable: bourbon.
Load path: /home/user/app/mobtvse
  (in /home/user/app/mobtvse/app/assets/stylesheets/posts.css.scss)):
    14:             =stylesheet_link_tag 'kudos' 
    15:         /= stylesheet_link_tag 'normalize' 
    16:         = stylesheet_link_tag 'embed' 
    17:         = stylesheet_link_tag 'posts' 
    18:         = stylesheet_link_tag 'fonts/font-awesome' 
    19:         = stylesheet_link_tag 'admin'
    20:         = stylesheet_link_tag 'flexgraph'
  app/assets/stylesheets/posts.css.scss:1
  app/views/layouts/admin.html.haml:17:in `_app_views_layouts_admin_html_haml___446462920088281360_32510360'
  app/controllers/posts_controller.rb:117:in `admin'

Forcing Mobtvse to run in Development mode produces no such error.

Port autosave functionality from Obtvse

Overview

Obtvse 2.0 (refresh branch) has auto-save built in.
Port It!

Notes

Add a save button to the edit post page. If the post hasn't auto-saved yet it will be clickable. Otherwise it will be disabled.

Port new admin UI from Obtvse

Overview

Obtvse 2.0 (refresh branch) has a very sweet new admin UI.
Port it!

Notes

Let's NOT take the styling from the main admin page. The edit page is very nice, but the admin page is ... bleh. However, there's a lot of nice functionality in the admin page (like keyboard navigation) which we'll definitely want.

There will be some problems when converting the edit ui to the Responsive CSS and supporting Mobile devices

The sidebar should never go away completely because mobile users don't have the ability to hover. Sliding it mostly out of sight and tapping to slide it back out may be an option but I don't think it's worth the effort. Just never hide it.

Make sure nothing else requires mouseover to function correctly

[experimental] preview link is broken for drafts in admin interface

The preview link is broken for draft posts in the experimental branch

nav items get pushed off page when you add multiple pages

the nobr class on the main_nav_right div causes everything to get pushed off to the right when combined with 1140 grid.

When you remove the nobr they wrap correctly but the colored top section is too short. Top section should expand to handle height of content.

add flickr support for loading images

integrate the "images" system so that people can register their flickr account (and eventually other systems) and pull the markdown for inserting images from them.

edit page isn't mobile friendly

button bar doesn't work on small screens.

I'm thinking we should rework it with the buttons horizontally across the top. I'm not sure how best to handle the sub-menus (visually)

[experimental] comments show error when previewing drafts

when an admin is previewing a draft post there is an error from the disqus integration.

I the case of a draft the Disqus code shouldn't even be attempting to load.

Integrate MarkdownEditor

There's a nice markdown editor with live preview here

I've created a new repo / fork here that we can customize to work in MObtvse.

1. get a FilePicker.io key
2. have saving save to the current post.
3. have it pre-populated with the text from a given post.
4. opening files should replace the current content with the content of those files

The preview pane should float right.

Tags will have to be moved somewhere else.

expandable textarea has issues with very short windows

the main text editing area will bounce vertically as you are typing if you have a very short window. This could be a problem on mobile devices. It may also be a problem when there are very long posts. I haven't tested the latter yet.

support date style urls

pages should be (optionally) displayed with date style urls
e.g. example.com/2012/05/02/post-slug-here

integration tests aren't passing

this is primarily due to the switchover to mongodb. Especially the integration tests.

Everything is currently working. Update the tests so that they all pass.

Support Image Uploading to S3

Overview

Because we want users to be able to install this on Heroku without paying crazy amounts for disc space we need a 3rd party service like Amazon's S3 to upload media to.

S3 would be configured via the config.yml file
Users without an S3 account configured would see a small notice in the image upload section indicating that they could do image uploads if they configure S3

Implementation

A File Upload button would allow users ( not iOS users ) to choose a file on their system and upload it. There would also be fields to set the title and alt of the image.
When they click the button to upload it an Ajax action (preferably with a progress bar) would handle the upload without reloading the page.

When the upload is complete:

• a reference-style link would be added to the bottom of the post
• the name of the image would appear in a list somewhere. Clicking the name would either reveal the markdown required to use the image.

Reference style image links:

![Alt text][id]
[id]: url/to/image  "Optional title attribute"

display amount of space used on files listing page

we should indicate the total amount of space used by each file (and the total bucket size) on the file listing page

allow users to disable comments on an individual post

the code supports the ability to disable comments on a post via the comments_enabled flag, however, there's nowhere on the edit page to toggle commenting.

add an archives page

Overview

A page where people can go to easily find past posts

Implementation

2 column page

• left column: reverse chronological listing of posts broken down by month and year
• right column: tag cloud

support historical & future posted_on dates

Issue #2 introduces a post_on date but won't support customization of it.
Users should be able to specify the posted_on date in the UI and set it to any point in time.

The date they choose must be valid (some UI mechanism should guarantee this).

When deciding if a post should be displayed the public UI we would simply add a check to see if the posted_on was in the future or not to the check for if it is a draft or not.

add support for non-post "Pages"

Same concept as "Pages" in Wordpress.

You want the ability to create things like an "About" page that are not part of the dated flow of posts.

Pages must be handled separately in the admin UI, but editing them should be identical to editing a post. posted_on is largely irrelevant on Pages but it doesn't hurt.

Pages should have non-dated urls (slug only).
They should not have previous / next links (not that posts do right now anyway).

Break UI down into more partials

The Header, for example, should be a partial that can be easily edited without having to muck with the main layout file.

Basically, make it really easy for users to customize the UI. Preferably in such a way that upstream updates from git won't override their changes.

replace the draft checkbox with something better looking

Maybe just make it a block like all the others but with a color that toggles based on if it is a draft or not? Something...

add support for MetaWeblog API

We should support the MetaWeblog API so that people can blog with the many great desktop and iPad blogging apps. We can probably just grab the code for this from typo with very few changes.

live preview doesn't support images within links

Showdown.js (which is rendering it) supports it, but for some reason it doesn't work within the current UI

example markdown that fails

[](http://flic.kr/p/cPAabL "Self Portrait by masukomi, on Flickr")

These are rendered correctly in the actual posts.

slug doesn't update with title change before publish

if you start a post with one title, save (or create via the wee input on admin page), then edit it and change the title the slug doesn't change.

it should change when you change the title and it is either still a draft, or being published during the same save

if (posted_at) 
   don't change slug 
   UNLESS someone has manually changed it
end

Disqus integration

Support Disqus comments.

Disqus short name would be (optionally ) added to the config.yml
If present comments would be shown.

Posts should have a comment_enabled attribute so that comments can be disabled on specific posts if necessary. They should be enabled by default.

Support easy generation of static sites from MObtvse

One of the greatest things about systems like Octopress is that the resulting sites are static, and serve lightning fast.

One of the downsides is that they take forever because they have to regenerate every page. Typical solutions for creating static sites from rails apps involve pointing wget at the entire site. This is worse than generating every page because it also involves http requests.

I think a good solution would be to have an API that remote cron scripts could check to see what files have changed since the last check and then download the updated versions of just those.

Implement Svbtle style Kudos

See this gist for some implementation details.

Track the kudos via Mixpanel

Depends on issue #5

improve theme of public facing pages

they're still kind-of lame looking

Integrate the Aviare WebWidget

Aviary has a web based image editor that is free to use.

Integrate it into MObtvse's Images page such that it can open any of the images listed on the page, and that when it saves the new image is saved to S3.

auto-generate multiple sizes of uploaded images.

When a user uploads an image run it through imagemagick to generate multiple sizes. At the very least we should probably create a 500px wide image in addition to the original. Optimally we'll should add a thumbnail size as well because we'll soon be adding post-image (a la WordPress) support.