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.
See CONTRIBUTING.adoc for details.
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/
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.
|
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.
We use Fulcro workspaces to be able to run and thus test the code of examples:
-
Add the parent directory of your code example to the
:paths
indeps.edn
-
Run
yarn install
andshadow-cljs watch workspaces
-
Access http://localhost:9001, select the "card" you want to see (and perhaps, in its ⠇ menu, select "Solo" to see it in max size)
-
Use the card’s [Inspector] button to open Fulcro Inspect in its context