Day 8 – HARC The Herald Angels Sing

Rudoph had long wanted wanted to write a website – he longed to share his hobbies and opinions with all the children, so that they wouldn’t just think of him as a first class pilot and navigator. He knew about Raku and he had skim read some information about Cro and Humming-Bird. But, being quite lazy, he wanted something very, very easy that he could use to whip up a site in a few lines.

He had overheard Dasher and Vixen talking behind the bike shed about a new Raku web authoring tool – HARC – and that sounded more in tune with his thinking.

HARC! the herald angels sing,
“Glory to the newborn King:
peace on earth, and mercy mild,
God and sinners reconciled!”

First Footing

He gave it a go, following the Getting Started info in the Raku Air::Examples module, for Air is the glue that puts the A in HARC.

zef install --/test cro Air
git clone https://github.com/librasteve/Air-Examples.git
cd Air-Examples/bin
raku 00-nano.raku

He pointed a browser at localhost:3000 and his nose lit up!

Pawing the Snow

He made a copy of 00-nano.raku and renamed it 20-rudolph.raku, then he added his name in the obvious place:

#!/usr/bin/env raku

use Air::Functional :BASE;
use Air::Base;

my $nano =
    site
        page
            main
                p "Yo rudi!";

$nano.serve;

His hooves typed raku 20-rudolph.raku and here’s what he saw in his browser

Oh my sweet Santa Claus, that’s a whole webpage (a whole website actually) in 5 lines of code. That going to save a lot of effort and bring back the -Ofun to web development.

Editors Note: Rudolph feels that HTML template systems such as Cro template or Template::Mustache or Template6 (there are many more on raku.land) are a very good idea when there is a big project with many unskilled young elves who can update web templates with little knowledge of real coding languages. However, this does not apply to an experienced reindeer like him who wants all the power of a fully featured programming language and to avoid faffing around with all those angle brackets.

Walking On

His hooves began to clack away on the keyboard:

#!/usr/bin/env raku

use Air::Functional :BASE;
use Air::Base;

my $rudi = site page main [
    section [
        h2 'About Me';
        p 'Hello! I\'m Rudolph, a curious builder who loves working on small tools, playful experiments, and simple things that make life easier. I enjoy long walks, warm drinks, and the feeling of figuring something out after staring at it way too long.';
    ];
    section [
        h2 'Projects';
        ul [
            li [ strong 'ChimeBox:'; ' a tiny notification app that whispers instead of buzzes.' ];
            li [ strong 'TrailMapper:'; ' a map tool for discovering quiet paths around my city.' ];
            li [ strong 'CookieCrunch:'; ' a deliberately pointless game about collecting virtual cookies.' ];
        ];
    ];
    section [
        h2 'Contact';
        p 'If you\'d like to say hello, send a message via ', em 'rudolph@example.com';
    ];
];

$rudi.serve;

Hmmm – a neat way to set out the contact right there in functional style Raku source (using Air::Functional).

All the content is done, but the style is a bit so-so…

A Rising Trot

Let’s change those section to article tags (for our Rudi has checked the PicoCSS preset semantic tags) and add a splash of colour in the footer:

#!/usr/bin/env raku

use Air::Functional :BASE;
use Air::Base;

my $rudi = site page [
    header [
        h1 'Rudolph';
        p 'Developer • Tinkerer • Occasional Cookie Enthusiast';
    ];
    main [
        article [
            h2 'About Me';
            p 'Hello! I\'m Rudolph, a curious builder who loves working on small tools, playful experiments, and simple things that make life easier. I enjoy long walks, warm drinks, and the feeling of figuring something out after staring at it way too long.';
        ];
        article [
            h2 'Projects';
            ul [
                li [ strong 'ChimeBox:'; ' a tiny notification app that whispers instead of buzzes.' ];
                li [ strong 'TrailMapper:'; ' a map tool for discovering quiet paths around my city.' ];
                li [ strong 'CookieCrunch:'; ' a deliberately pointless game about collecting virtual cookies.' ];
            ];
        ];
        article [
            h2 'Contact';
            p 'If you\'d like to say hello, send a message via ', b 'rudolph@example.com';
        ];
    ];
    footer
        p [safe '© 2025'; b 'Rudolph.'; 'All rights reserved.' ];
];

$rudi.serve;

Very dashing splash of red:

Editor’s Note: Pico CSS already defines a coherent set of styles for all the tags used so far … so no need to decorate our content code with e.g. Tailwind (unless you want to).

But his new header was pretty so-so…

At a Gallop

It was a short job to curry the Air::Base header routine with one of his own:

my &rude-header = &header.assuming(
    :style( q:to/END/;
        background: #b30000;
        color: white;
        padding: 2rem;
        text-align: center;
    END
    ),
);

And voila:

Stable End

Rudolph looked on with quiet satisfaction at his work and fired up his holly-wood churchwarden pipe.

Rudolph, bright and cozy,
amid the tinsel light,
puffs upon a churchwarden pipe
that glows like Yuletide night.

oh, but what about the Christmas decorations???!!!

Find out if things can get better next time…

~librasteve