Skip to main content

Ralsina.Me — Roberto Alsina's website

Client-rendered, one-URL, dynamic, static site.

My va­ca­tions end to­mor­row. So, the time to spend hack­ing fun, per­son­al, free stuff is go­ing to be lim­it­ed be­cause of the time spent cod­ing fun, free stuff for mon­ey. So, I de­cid­ed to fin­ish with a bit of whim­sy.

I im­ple­ment­ed a com­plete­ly clien­t-ren­dered, one-URL, dy­nam­ic blog. Which is ac­tu­al­ly to­tal­ly stat­ic.

In fac­t, that blog is this blog, just with a twist. If you go to this URL you will see what's ba­si­cal­ly this very site, with com­ments and ev­ery­thing as usu­al. But if you click on "Pre­vi­ous Post" ... well, it stays in the same page, even though it dis­plays a dif­fer­ent post :-)

The mag­ic is the new, ex­per­i­men­tal, dy­nam­ic task_­mus­tache plug­in for my stat­ic site gen­er­a­tor, Niko­la. which does the fol­low­ing:

  1. Ren­ders post da­­ta as JSON files in­­stead of HTML

  2. Cre­ates a HTML file that is re­al­­ly a mus­­tache.js tem­­plate

  3. Cre­ates a HTML file with some bits of Javascript that loads the tem­­plate and the new­est post's da­­ta.

  4. If you ac­cess that mus­­tache.html with a frag­­men­t, it us­es that to fetch JSON da­­ta and re­write it­­self.

And that's it. It ac­tu­al­ly loads fast, and re­gen­er­ates very fast, since it does much less than the re­al site. There are a bunch of things that will dump you out of the "dy­nam­ic" site, like tag links, and what­ev­er, but it works sur­pris­ing­ly well (and if you want to theme it, it's just one tem­plate).

This is the first of a new kind of thing for Nikola, the "extra plugins". Basically, stuff that is too weird, specific or useless for the general distro, will go there, and to use those plugins, you have to create a plugins/ folder in your site and add it there manually.

En­joy!

Chris Warrick / 2013-01-02 16:48:

This is not good. First of, you should use hashbang to get Google to index it (eg. mustache.html#!posts/…). Second of, those URLs are not pretty nor useful. I don’t have anything against using JS and Ajax this way: http://kwpolska.tk/projects/ or https://github.com/Kwpolska... — try clicking the top links (the links in the middle box lead to the pages without Ajax and the whole thing breaks up horribly there) on the not-updated-since-EVER project page or going through the repository structure and observe how it changes.

Roberto Alsina / 2013-01-02 17:04:

Thanks for the tip about #! (had no idea)

The only difference I see between these URLs and yours is the "#" in the middle, why are they not pretty and/or not useful?

Chris Warrick / 2013-01-02 17:17:

My implementation works just fine without JS. Yours doesn’t.

Roberto Alsina / 2013-01-02 17:21:

Good point. Does it require any server-side configuration?

Chris Warrick / 2013-01-02 17:31:

Well, quite a bit, maybe, I don’t know. Here is how it works for me (http://kwcdn.tk/js/projects.js ):

1. There are two directories: /projects/ and /projects/projects-nil. /projects/ contains nice, full HTML pages with layout and such, while -nil contains just the HTML of the project itself. Names to display in the top bar and the title bar in the JS, for some weird reason.

2. When the link is clicked, it is supposed to get you to the /projects/ directories and not /projects/projects-nil/. But, if you have JS enabled, it doesn’t. When you click on a link, JS does all its Ajax magic, changes the title and does something else. What does it do, may you ask? Find out yourself. Hint: click the Back button next time you will be playing around on my Projects page (or the GitHub tree).

Roberto Alsina / 2013-01-02 17:39:

I'll check it out in my next vacation ;-)