Render Demo 2021_05_05

Thanks to Martin's kind instruction, I think I now know how to render a few things from cells, such as text, markdown, HTML, hiccup, and reagent components.

{:deps {org.clojure/clojure {:mvn/version "1.10.1"}
        ;; complient is used for autocompletion
        ;; add your libs here (and restart the runtime to pick up changes)
        compliment/compliment {:mvn/version "0.3.9"}}}
deps.edn
Extensible Data Notation
{:hello (clojure-version)}
0.1s
Clojure
→

Render HTML from an HTML cell

<div style="background: lightblue">I am in a div</div>
HTML

Render hiccup from ClojureScript cell to display HTML

The viewer meta here instructs this cell to render its hiccup output to HTML.

^{:nextjournal/viewer :hiccup} 
[:h3 {:class "text-blue-500"} "Hello " [:code "Clojure"]]
ClojureScript

And alternatively, the `v/view-as` function can also render hiccup to HTML.

;; programmatically rendered hiccup
(v/view-as :hiccup [:h3 {:class "text-green-500"} "Hello Hiccup 👋"])
ClojureScript

Render hiccup from Clojure cell as plain text

[:h3 {:class "text-blue-500"} "Hello " [:code "Clojure"]]
0.2s
Clojure
→

Programmatically render markdown from ClojureScript cell

The `v/view-as` function is necessary here to render markdown text to markdown.

;; programmatically rendered markdown
(v/view-as :markdown "#### Hello Markdown\n\n- a bullet point\n- [ ] a to-do list item")
ClojureScript

Render a live counter & clickable button with reagent

(def state (atom 0))
ClojureScript
(v/view-as :reagent
  (fn []
    [:<>
     [:h3 {:class "text-blue-500"} "Count: " @state]
     [:button.rounded.bg-blue-500.text-white.py-2.px-4.font-bold.mr-2 {:on-click #(swap! state inc)} "increment"]
     [:button.rounded.bg-blue-500.text-white.py-2.px-4.font-bold {:on-click #(swap! state dec)} "decrement"]]))
ClojureScript

Rendering a turtle emoji with reagent

(def turtles (atom [120]))
ClojureScript
^{:nextjournal/viewer :reagent}
#(into [:div] (map (fn [s] [:span {:style {:font-size s}} "🐢"])) @turtles)
ClojureScript

Render another turtle, this time a bunch of times, where each turtle is smaller than the one prior, by using two different cells of code to re-render the turtle 🐢

(def turtles2 (atom [120]))
ClojureScript
;; firstly, just one turtle is rendered below...
^{:nextjournal/viewer :reagent}
#(into [:div] (map (fn [s] [:span {:style {:font-size s}} "🐢"])) @turtles2)
ClojureScript
;; ... secondly, the turtle above will be repeatedly rendered above
(dotimes [_ 10]
  (swap! turtles2 conj (/ (or (last @turtles2) 130) 1.2)))
ClojureScript

I don't know just yet about rendering / enabling:

  • [ ] animations

  • [ ] mermaid diagrams

    • [ ] statically rendered diagrams

    • [ ] programmatically rendered diagrams

  • [ ] shell interaction (ala interactive terminal to take in user input), for example, to take the user's name as input:

> What is your name? John
> Hi, John!
Shell
Runtimes (3)