The make of Respo’s home page

Last week I finished writing the docs for Respo, hope you like it:

I used some skills that was used in work previous work to finish the job. The special part of the site is that it’s a simple page app with front-end router, but it’s also isomorphic since the pages are actually compiled into lots of pages. So you will see that, you can open the site front any router, after that, all following pages are rendered in front end.

To confirm that, just open the page and you will see it. You may also try various pages. What’s more, the links works too if you check “Disable JavaScript” in the DevTools. You should see all links work, except for the full page refreshing. The main purpose of the behavior is to make pages recognisable for spiders. They should read page when JavaScript is not available, and user just have partial render without whole page refreshing.

This task is achieved via React and my own router called router-as-view. router-as-view is special since each parts of the router is decoupled from each other. There’s an url parser/stringifier and an “address-bar” component. The parser can be used alone, so I can parse the address with Gulp and render pages with content that’s corresponding to that address. It’s quite simple. And to generate all the pages for all the paths, just prepare the paths and render with Gulp.

Actually this can be achieved with Respo too since Respo is based on virtual DOM just like React. But the difference is, with CoffeeScript, Webpack can bundle Markdown files and ClojureScript examples in a very flexible way. I can hardly do that with Boot, as far as I know. And during pre-rendering, it’s not hard to overwrite “require.extension[‘.md’]” to load Markdown files as strings. And this is finished too.

With these two major problems solve, it became much easier. Yes there are small problems too, but it’s easier. Here’s the whole code in CoffeeScript. If you are interested in making docs like Respo, supporting client rendering and spider rendering in one copy of code, you can try it:

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.