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!

Creating a Theme for Nikola From Scratch (almost)

There is some doc­u­men­ta­tion about cre­at­ing themes for Niko­la, but maybe a tu­to­ri­al is al­so a use­ful way to ex­plain it. So, here it is. I'll ex­plain how to cre­ate a theme (al­most) from scratch. Al­ter­na­tive­ly, you can take an ex­ist­ing theme and mod­i­fy on­ly parts of it via in­her­i­tance, but that's for an­oth­er doc­u­men­t.

I will try to cre­ate a theme that looks like Vini­cius Mas­suchet­to's Monospace Theme.

Read more…

Nikola Feature-by-request: tag cloud!

I asked for fea­ture re­quests for Niko­la my stat­ic site gen­er­a­tor. I got some. One was from long-­time us­er Kay Hayen, so I just could­n't say no.

He asked for tag cloud­s. Look:

Any­thing in here will be re­placed on browsers that sup­port the can­vas el­e­ment

Cute, is­n't it? And it's re­al, ac­tu­al tag da­ta from this very site. With links!

How it's done:

Niko­la gen­er­ates a JSON file that has the cloud da­ta (tag name, size, link), and that's pro­cessed by JQuery and tag­Can­vas and ... well, it work­s.

You have to add jquery.tagcanvas.min.js somewhere and embed a whole pile of raw HTML (see here for details) but hey, it works.

Hope you are hap­py, Kay, you made me code javascript, dude ;-)

It's prob­a­bly rather "easy" to make it use any of these in­stead of tag­Can­vas if any­one is so in­clined.


Contents © 2000-2020 Roberto Alsina