Air::Play

Playing with the HARC stack (HTMX, Air, Raku, Cro) Examples with Pico CSS

path is

1. get to the point where I can build a website on Cro the right way
2. build a static site example that could be a new design for raku.org and then offer it to the team,
3. add htmx based edit / preview to certain pages for admin (like the current rakudoc site), with raku syntax highlighting with Rainbow and
4. do something similar for markdown

Pitch

https://chatgpt.com/share/67646547-ee48-8009-8354-0e4ced492f96

• maximally decomposed apps

TODOs

• integrate htmoo concepts
• new name, consolidate
• cro run
• push pico/func up the stack
  • head
  • header, main, footer
  • nav (sections) ... then site02
  • nav (pages)... then site03
  • nav (external)
• hamburger menu
• site color ...
• semantic pagen
  • site (theme) / page (nav) / section / ... tags / assumes
    • all site examples
    • aside, article, section (see semantic2.html)
• gnat css
• picocss.com left nav
• language switcher
• docs maker from Red
• sitemap & robots.txt
• do all pico examples https://picocss.com/docs/
• do all htmx examples
• redden all models
• pico/gnat css settings to Theme module
• Air tests (from bins)

Local

GETTING STARTED

Install raku - eg. from rakubrew, then:

Install Air, Cro & Red

• zef install --/test cro
• zef install Cro::WebApp
• zef install Red --exclude="pq:ver<5>"
• `zef install https://github.com/librasteve/Air.git"

Install this repo

• git clone https://github.com/librasteve/Air-Play.git
• cd Air-Play && zef install .

Run and view it

• export WEBSITE_HOST="0.0.0.0" && export WEBSITE_PORT="3000"
• raku -Ilib service.raku
• Open a browser and go to http://localhost:3000

You will note that cro has many other options as documented at Cro if you want to deploy to a production server.

TIPS & EXTRAS

• In development set CRO_DEV=1 in the environment
• You can use note to log info to the cro log window

Server

Development

Pico CSS (IntelliJ)

install sass (in the static/css dir)

• follow this guide
  • install IJ sass & file watcher plugins
  • cd static/css
  • brew install npm
  • npm install -g sass
  • npm install @picocss/pico
  • in styles.css, @use "node_modules/@picocss/pico/scss";
  • sass styles.scss styles.css [target is then styles.scss/styles]
  • --load-path=node_modules/@picocss/pico/scss/ from https://picocss.org
• some tweaks to root styles (mainly to reduce scale) from here

Deployment

• zef install https://github.com/this.git --deps-only --/test
• git clone https://github.com/this.git && cd Air-Play
• zef install . --force-install --/test
• adjust .cro.yml for your needs (e.g. HTTPS) -or-
• export WEBSITE_HOST="0.0.0.0" && export WEBSITE_PORT="3000"
• raku -Ilib service.raku -or-
• nohup raku service.raku >> server.log 2>&1 <=== detach from terminal [note PID]
• tail -f server.log and finally kill -9 PID [ps -ef | grep raku]

Build

this site runs on a linux server preloaded with git, raku, zef (& docker-compose)

• sudo apt-get install build-essentials (for Digest::SHA1::Native)
• viz. https://chatgpt.com/share/6748a185-c690-8009-96ff-80bf8018dd7d
  • sudo apt-get install nginx
  • sudo systemctl start nginx
  • sudo systemctl enable nginx
  • etc
  • vi simple.raku <= port to 8888
  • raku simple.raku
• using librasteve for certbot

COPYRIGHT AND LICENSE

copyright(c) 2025 Contributors

This library is free software; you can redistribute it and/or modify it under the Artistic License 2.0.

TODOS

NB. this will evolve as more work is done (e.g. docker)...

You can also build and run a docker image while in the app root using:

docker build -t this .
docker run --rm -p 8888:8888 this