Skip to content
Kevin Chavez edited this page Mar 14, 2017 · 5 revisions

spur is a tool for creating tumblr themes using react.js. There's 3 things to learn.

1. The CLI

You can call spur with any of these three commands;

init        Initializes a new blank theme
run         Runs a test server to test a theme
ready       Generates bundle file to publish theme

Bam. Simple. You'll use all three if you're making a new theme. In fact, just switch to your terminal and do this,

spur init killer-theme
cd killer-theme
npm install
spur run

Visit localhost:4410 and you're good to go. Make a few edits. Or don't. Ready to see this running live on Tumblr? Do,

spur ready | pbcopy 

Head over to the tumblr appearance editor, hit that "Edit HTML" button and paste all this in there. The theme won't show on the preview because we're doing some next level hacking here, but if you save and visit as any normal user would it should all work.

2. The Structure

Open package.json and find main.

"main": "blog.jsx"

The exports of that file should be the react "app" that will render the blog. Now, open your web browser's console and type in

window.object

That's the JSON object for the page you're currently in, which get's fed into that blog component exported from the "main" file. That's all spur needs to get going.

Detailed specs for the object coming soon.

3. The extras

Spur also offers some pre-build components so you don't have to do the boring parts. But I'll document those later.

Clone this wiki locally