Fulcro Cookbook

This book demonstrates how to use the tools Fulcro offers to solve various real-life problems, with realistic examples.

Read the Cookbook here and look at cookbook.adoc for the source.

Contributing

See CONTRIBUTING.adoc for details, and Writing tips below for practical advice.

Writing tips

Use VS Code with asciidoctor plugin with Kroki enabled (asciidoc.extensions.enableKroki: true, already enabled for this workspace).

Images and wireframes - use e.g. https://excalidraw.com/

Have a look at https://gist.github.com/dcode/0cfbf2699a1fe9b46ff04c41721dda74

If you want to include custom CSS, JS, or something else in the generated page - have a look at Asciidoc Docinfo files.

Excalidraw images

When including these, set the attributes ,100%opts=inline so that the image is not too broad and fonts show correctly (also check that you have :stylesheet: cookbook.css at the top of your document, see index.adoc for an example):

image::./recipes-ui.svg["UI wireframes",100%,opts=inline]

Tip	Asciidoctor’s docs recommend to remove width, height from the SVG, and only leave viewBox there.

Previewing

If VS Code preview is not enough, you can use asciidoctor to generate the HTML and open it in a browser. With Babashka:

bb render

then open e.g. cookbook/dynamic-recursion/dynamic-recursion.html in a browser.

Limitations: Source code highlighting seems currently not working.

Code

We use Fulcro workspaces to be able to run and thus test the code of examples:

1. Add the parent directory of your code example to the :paths in deps.edn

2. Run yarn install and shadow-cljs watch workspaces

3. Access http://localhost:9001, select the "card" you want to see (and perhaps, in its ⠇ menu, select "Solo" to see it in max size)

4. Use the card’s [Inspector] button to open Fulcro Inspect in its context

Problems and limitations

• VS Code preview of included SVG images requires Light Mode to work well, as they are almost invisible in the dark mode.