kidgodzilla/hack-the-hackpad

Make a blog rendering for hackpad

Hack the Hackpad

http://wentin.github.io/Hack-the-Hackpad/

How to use guide (wriiten with hackpad, rendered by Hack the Hackpad):

http://wentin.github.io/Hack-the-Hackpad/#JVgfJHOyu6O

http://wentin.github.io/Hack-the-Hackpad/# + padId

What is "Hack the Hackpad"?

"Hack the Hackpad" is a hack to transform hackpad to a blog CMS, and enable hackpad users to use hackpad to write and publish blog articles and provide its readers a better reading experience.

The project is crafted by a type nerd who cares profoundly about web typography. Every design detail is brought to you with extra love and care. My goal is to make this project grow to be a competitor of blog platforms like medium. Currently it is a proof of concept hack that I put together over Christmas long holiday. More to come!

Hackpad is an awesome collaborative writing platform that has many advantages like markdown syntax support: type # and a space to make a h1 instantly, ## to h2, ### to h3; type space four times to enter code snippet; type // to enter comment.

How to use it?

If you don’t have hackpad account, I highly encourage you to sign up. Hackpad provides an effortless way to write. Want to check it out without a hackpad account? You can click on the gear button on homepage with empty input field to see an example page containing all elements like list, quote, code blocks, table, h1, h2, h3, p.

If you are a hackpad user, you now can use hackpad to write and publish blog articles with great reading experience!

1. Go to your pad on hackpad and copy your padId (the 11 character at the end of the pad URL).
2. Click the "Hack the Hackpad" logo and go to the homepage, paste the padId in the input field in the homepage.
3. Click the gear button to generate the blog article page.
4. Enjoy your article in much better reading experience!
5. If you want to edit the article, click the pen icon on your top right and edit the article on hackpad. The changes go live the moment you make it on hackpad.

#####For example, the "how to use" article’s hackpad’s url is http://hackpad.com/How-to-use-HackBlog-JVgfJHOyu6O, the padId is JVgfJHOyu6

Tricky part: sometimes you need to hit the refresh button again if browser back button or changing the url in address bar doesn’t immediately load the correct content. Also currently it only supports the articles written in the default hackpad workspace.

Example URL:

http://wentin.github.io/Hack-the-Hackpad/#dK2se3bCFHo

http://wentin.github.io/Hack-the-Hackpad/#idz7GOaiks2

Feedback

Hack the Hackpad is a passion project. It thrives on your feedback and support. If you like Hack the Hackpad, please star my project on Github; if you have feedback, please contact me.

Contact

• Follow @DesignJokes on Twitter
• Email [email protected]
• Visit wentin.co