Ir al contenido principal

Ralsina.Me — El sitio web de Roberto Alsina

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

My va­ca­tions end to­mo­rro­w. So, the ti­me to spend ha­cking fun, per­so­na­l, free stu­ff is going to be li­mited be­cau­se of the ti­me spent co­ding fun, free stu­ff for mo­ney. So, I de­ci­ded to fi­nish wi­th a bit of whi­ms­y.

I im­ple­men­ted a com­ple­te­ly clien­t-­ren­de­re­d, one-UR­L, dy­na­mic blo­g. Whi­ch is ac­tua­lly to­ta­lly sta­ti­c.

In fac­t, that blog is this blo­g, just wi­th a twis­t. If you go to this URL you wi­ll see wha­t's ba­si­ca­lly this ve­ry si­te, wi­th co­m­men­ts and eve­r­y­thing as usua­l. But if you cli­ck on "Pre­vious Pos­t" ... we­ll, it sta­ys in the sa­me pa­ge, even thou­gh it dis­pla­ys a di­ffe­rent post :-)

The ma­gic is the new, ex­pe­ri­men­ta­l, dy­na­mic ta­sk_­mus­ta­che plu­gin for my sta­tic si­te ge­ne­ra­to­r, Niko­la. whi­ch does the fo­llo­win­g:

  1. Ren­­ders post da­­ta as JSON fi­­les in­s­­tead of HT­­ML

  2. Crea­­tes a HT­­ML fi­­le that is rea­­lly a mus­­ta­­che.­­js te­m­­pla­­te

  3. Crea­­tes a HT­­ML fi­­le wi­­th so­­­me bi­­ts of Ja­­va­s­­cript that loads the te­m­­pla­­te and the newest po­s­­t's da­­ta.

  4. If you ac­­ce­ss that mus­­ta­­che.h­t­­ml wi­­th a fra­g­­men­­t, it uses that to fe­­tch JSON da­­ta and rew­­ri­­te itse­l­­f.

And tha­t's it. It ac­tua­lly loads fas­t, and re­ge­ne­ra­tes ve­ry fas­t, sin­ce it does mu­ch le­ss than the real si­te. The­re are a bun­ch of things that wi­ll dump you out of the "d­y­na­mi­c" si­te, like tag li­nks, and whate­ve­r, but it wo­rks sur­pri­sin­gly we­ll (and if you want to the­me it, it's just one tem­pla­te).

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.


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: or — 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 ( ):

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 ;-)

Contents © 2000-2020 Roberto Alsina