A Reference to Fabricate's Page Templates

This page has an informal explanation of the parts that make up a Fabricate page, using inputs and outputs paired together for demonstration purposes.

A formal definition of the grammar is included in the documentation for the site.fabricate.prototype.read.grammar namespace.

Basic Expressions

An expression starts and ends with the asterisk and END emojis: ✳🔚. You can then use some optional control characters to change how that expression will be used by Fabricate. All expressions in those emoji will be evaluated after Fabricate reads the page template and parses it.

One thing that makes Fabricate different is the fact that templates can appear anywhere in the text. So if you wanted to write a sentence generated by a Clojure program in the middle of an ordinary paragraph, you can do that. If you want to define a variable naming all the sections and write a sentence like "this page has 3 sections," you can do that. Fabricate, by default, uses inline expressions instead of Markdown.

✳ - Run expressions

If you don't specify any additional characters, Fabricate evaluates the expression without putting the result in the page.

Useful for: namespace declarations, variable definitions, and other side effects - anything where you don't need to see the result of what you run.

Examples

✳(ns my-demo-ns
  (:require [site.fabricate.prototype.hiccup :as hiccup]))🔚

✳(def metadata {:title "My page"})🔚

✳= - Yield expressions

If you add the "=" character after the asterisk - ✳=, the expression's results get added into the page. Hiccup expressions, like [:code "example inline code"] are included in the document tree and will be transformed into HTML all at once after the document is evaluated.

Useful for: anything you'd use HTML for.

Examples

✳=[:code {:class "language-clojure"} "(map inc (range 40 29 -1))"]🔚

✳=[:figure
 [:blockquote
  "People are alive -- they behave and respond. Creations within the computer can also live, behave, and respond... if they are allowed to."]
 [:figcaption "Bret Victor, "
  [:a {:href "https://vimeo.com/64895205"} [:em "Stop Drawing Dead Fish"]]]]🔚

✳=[:img {:src "https://live.staticflickr.com/3770/11073365765_6dd38cce29_z.jpg"}]🔚

✳+Insert expressions

Use this for when you want to evaluate some code and insert the expression into the result, but not its output.

Useful for: when you want to demonstrate some code that contributes to the page but its output isn't important. You could show the code used to define a variable, but use the the contents of that variable later on in the page. It's also useful for instructive function definitions, where the return value of a function definition is just a var.

Examples

✳+(defn de-jong
  "Returns a Peter de Jong attractor function. Use with iterate."
  [a b c d]
  (fn [[x y]] [(- (Math/sin (* a y)) (Math/cos (* b x)))
               (- (Math/sin (* c x)) (Math/cos (* d y)))]))🔚

(defn de-jong
  "Returns a Peter de Jong attractor function. Use with iterate."
  [a b c d]
  (fn [[x y]] [(- (Math/sin (* a y)) (Math/cos (* b x)))
               (- (Math/sin (* c x)) (Math/cos (* d y)))]))

✳+(defn clifford
  "Returns a Clifford attractor function. Use with iterate."
  [a b c d]
  (fn [[x y]] [(- (Math/sin (* a y)) (* c (Math/cos (* a x))))
               (- (Math/sin (* b x)) (* d (Math/cos (* b y))))]))🔚

(defn clifford
  "Returns a Clifford attractor function. Use with iterate."
  [a b c d]
  (fn [[x y]] [(- (Math/sin (* a y)) (* c (Math/cos (* a x))))
               (- (Math/sin (* b x)) (* d (Math/cos (* b y))))]))

✳+(def de-jong-example (de-jong 1.517 -2.001 3.45 2.07))🔚

(def de-jong-example (de-jong 1.517 -2.001 3.45 2.07))

✳+(def clifford-example (clifford 1.24 1.14 1.23 1.89))🔚

(def clifford-example (clifford 1.24 1.14 1.23 1.89))

✳+=Composing control characters

You can use both the "+" and "=" characters together to display a form along with its output.

Useful for: showing off your art alongside the code that produced it.

Examples

✳+=(let [w 300
      h 400]
  (into [:svg {:width w :id "de-jong-fractal" :height h}]
        (map (fn [[x y]] [:circle
                          {:r     1.0
                           :style {:fill "#606456" :opacity 0.3}
                           :cx    (* w (+ 0.5 (/ x 4.0)))
                           :cy    (* h (+ 0.5 (/ y 5.0)))}])
             (take 15000 (iterate de-jong-example [1.4 3.9])))))🔚