Skip to content

p3r7/norns-gallery

Repository files navigation

norns-index

Implentation Notes

Setup: ClojureScript / Javascript

This code is written in ClojureScript that gets transpiled into Javascript.

For tooling, it uses shadow-cljs + leiningen.

To run it:

  • install node.js (preferably through nvm)
  • install a JDK (Java 11 recommanded)
  • install Clojure (latest version)
  • install leiningen (instructions)

Grab js dependencies:

$ npm install

(this is supposed to be automaticly done by shadow-cljs but for some reason is buggy)

And finally launch the app to grab the last dependencies:

$ lein dev

This will retrieve all dependencies and launch an HTML server serving the page.

Open a web browser at the advertised URL.

Changes to the code are automatically detected and hot-swapped in the running browser session.

Setup: CSS

The project relies on Bootstrap.

In addition, custom styles are defined under sass/main.sass.

To be compiled, it needs a SASS compiler.

After changes, Sass must be compiled:

$ sass sass/main.sass:resources/public/css/main.css

Alternatively, to auto-compile on source change:

$ npm run watch:css

All the HTML is generated from (functional) react components in norns-index.views written using the hiccup syntax (akin to JSX for Clojure(Script)).

Deploying

Re compile everything w/ PROD target:

$ sass sass/main.sass:resources/public/css/main.css
$ lein prod

Copy content of resources/public/ folder to a local clone of norns-gallery-render.

Commit and push.

The published website is available at: https://p3r7.github.io/norns-gallery-render/

Static Site generator

Just run:

$ lein cljsbuild once prerender
$ node target/cljsbuild/prerender/main.js --mode dir --dest-dir target/cljsbuild/prod-static/public/

The way it works is by running the script prerender.cljs which converts the selected norns-index.views into static HTML pages, using react/reagent server-side rendering (doc) through a node.js runtime.

This approach is inspired by the reagent prerender example.

An alternative approach would have been to convert the views into cljc and do the rendering using a clj script w/ hiccup instead of reagent (article).

A final alternative would be to keep the script in cljs and have it run under clj w/ GraalVM & Polyglot (article).