Let the user upgrade an ingredient quantity and adapt other quantities

27 files changed, 425 insertions, 80 deletions

diff --git a/.gitignore b/.gitignore
index 8430b45..c499586 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,7 @@ _cache
 public
 dist
 .stack-work
+output
+node_modules
+bower_components
+yarn.lock
diff --git a/.tmuxinator.yml b/.tmuxinator.yml
index f6e037e..c3a79fc 100644
--- a/.tmuxinator.yml
+++ b/.tmuxinator.yml
@@ -5,4 +5,4 @@ windows:
       layout: fff4,119x58,0,0{94x58,0,0,0,24x58,95,0,1}
       panes:
         - # Empty
-        - make clean install watch
+        - make install watch
diff --git a/Makefile b/Makefile
index 6b5d97f..aaedc92 100644
--- a/Makefile
+++ b/Makefile
@@ -7,10 +7,14 @@ stop:
 	@tmux kill-session -t cooking
 
 clean:
+	@rm -rf bower_components
+	@rm -rf node_modules
 	@stack exec cooking clean > /dev/null 2>&1 || true
 	@stack clean > /dev/null
 
 install:
+	@yarn install
+	@bower install
 	@stack setup
 
 .PHONY: build
diff --git a/README.md b/README.md
index 587fe68..527005b 100644
--- a/README.md
+++ b/README.md
@@ -23,3 +23,8 @@ Later, stop the environment with:
 ```sh
 make stop
 ```
+
+TODO
+----
+
+- group by (Plat / Dessert (High / Low carb))
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..b1fdd70
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,14 @@
+{
+  "name": "cooking",
+  "private": true,
+  "dependencies": {
+    "purescript-prelude": "*",
+    "purescript-console": "*",
+    "purescript-eff": "*",
+    "purescript-dom": "*",
+    "purescript-maybe": "*",
+    "purescript-parsing": "*",
+    "purescript-integers": "*",
+    "purescript-math": "*"
+  }
+}
diff --git a/cooking.cabal b/cooking.cabal
index f0bb109..dc5d360 100644
--- a/cooking.cabal
+++ b/cooking.cabal
@@ -11,3 +11,4 @@ executable cooking
   build-depends:    base
                     , hakyll
                     , clay
+                    , process
diff --git a/design/main.hs b/design/Main.hs
index ba7127c..3ef1e0a 100644
--- a/design/main.hs
+++ b/design/Main.hs
@@ -5,6 +5,7 @@ import Data.Monoid ((<>))
 
 color1 = rgb 113 68 30
 color2 = rgb 13 13 81
+color3 = rgb 230 230 230
 
 main :: IO ()
 main = putCss $ do
@@ -29,9 +30,15 @@ main = putCss $ do
     color color2
     hover & textDecoration underline
 
-  h1 ? color color1
-  h2 ? color color1
-  h3 ? color color1
+  (h1 <> h2 <> h3) ? color color1
+
+  ".number" ? do
+    backgroundColor color3
+    sym borderRadius (px 5)
+    sym padding (px 2)
+    borderStyle none
+    width (px 70)
+    textAlign (alignSide sideCenter)
 
   (ul <> ol) ? do
     listStyleType none
diff --git a/js/Dom.js b/js/Dom.js
new file mode 100644
index 0000000..6835c1f
--- /dev/null
+++ b/js/Dom.js
@@ -0,0 +1,12 @@
+"use strict";
+
+exports.onInput = function (elt) {
+  return function (f) {
+    return function () {
+      elt.oninput = function(e) {
+        f(e.target.value)()
+      }
+      return {};
+    };
+  };
+};
diff --git a/js/Dom.purs b/js/Dom.purs
new file mode 100644
index 0000000..a71cda7
--- /dev/null
+++ b/js/Dom.purs
@@ -0,0 +1,74 @@
+module Dom
+  ( onInput
+  , selectElement
+  , selectElementFrom
+  , selectElementsFrom
+  , replaceElement
+  , appendNodes
+  , setValue
+  ) where
+
+import Control.Monad.Eff (Eff)
+import Control.Monad.Except (runExcept) as Except
+import Data.Array (range, catMaybes) as Array
+import Data.Either (Either(Right))
+import Data.Foreign (toForeign) as Foreign
+import Data.Maybe (Maybe(Nothing, Just))
+import Data.Traversable (sequence) as Traversable
+import Prelude
+
+import DOM (DOM)
+import DOM.HTML (window) as DOM
+import DOM.HTML.HTMLInputElement (setValue) as HTMLInputElement
+import DOM.HTML.Types (htmlDocumentToParentNode, readHTMLInputElement) as DOM
+import DOM.HTML.Window (document) as DOM
+import DOM.Node.Node (replaceChild, parentNode, appendChild) as DOM
+import DOM.Node.NodeList (length, item) as DOM
+import DOM.Node.ParentNode (QuerySelector)
+import DOM.Node.ParentNode (querySelector, querySelectorAll) as DOM
+import DOM.Node.Types (Element, Node)
+import DOM.Node.Types (elementToParentNode) as DOM
+
+foreign import onInput :: forall e. Element -> (String -> Eff (dom :: DOM | e) Unit) -> Eff (dom :: DOM | e) Unit
+
+selectElement :: forall e. QuerySelector -> Eff (dom :: DOM | e) (Maybe Element)
+selectElement query = do
+  document <- DOM.window >>= DOM.document
+  DOM.querySelector query (DOM.htmlDocumentToParentNode document)
+
+selectElementFrom :: forall e. Element -> QuerySelector -> Eff (dom :: DOM | e) (Maybe Element)
+selectElementFrom elem query = DOM.querySelector query (DOM.elementToParentNode elem)
+
+selectElementsFrom :: forall e. Element -> QuerySelector -> Eff (dom :: DOM | e) (Array Node)
+selectElementsFrom elem query = do
+  nodeList <- DOM.querySelectorAll query (DOM.elementToParentNode elem)
+  length <- DOM.length nodeList
+  Array.range 0 length
+    # map (\i -> DOM.item i nodeList)
+    # Traversable.sequence
+    # map Array.catMaybes
+
+replaceElement :: forall e. Node -> Node -> Eff (dom :: DOM | e) Unit
+replaceElement before after = do
+  parent <- DOM.parentNode before
+  case parent of
+    Just n -> do
+      _ <- DOM.replaceChild after before n
+      pure unit
+    Nothing ->
+      pure unit
+
+appendNodes :: forall e. Node -> Array Node -> Eff (dom :: DOM | e) Unit
+appendNodes parent nodes =
+  nodes
+    # map (\n -> DOM.appendChild n parent)
+    # Traversable.sequence
+    # map (const unit)
+
+setValue :: forall e. String -> Element -> Eff (dom :: DOM | e) Unit
+setValue value elem =
+  case Except.runExcept $ DOM.readHTMLInputElement (Foreign.toForeign elem) of
+    Right inputElem -> do
+      HTMLInputElement.setValue value inputElem
+    _ ->
+      pure unit
diff --git a/js/EditableNumber.purs b/js/EditableNumber.purs
new file mode 100644
index 0000000..eb5ddb0
--- /dev/null
+++ b/js/EditableNumber.purs
@@ -0,0 +1,72 @@
+module EditableNumber
+  ( NumberElem
+  , set
+  , formatNumber
+  ) where
+
+import Control.Monad.Eff (Eff)
+import Data.Int (round, toNumber, pow) as Int
+import Data.Maybe (Maybe(..))
+import Data.String (Pattern(..), Replacement(..))
+import Data.String (replace) as String
+import DOM (DOM)
+import DOM.HTML (window) as DOM
+import DOM.HTML.Types (htmlDocumentToDocument) as DOM
+import DOM.HTML.Window (document) as DOM
+import DOM.Node.Document (createElement, createTextNode) as DOM
+import DOM.Node.Element (setClassName, setAttribute) as DOM
+import DOM.Node.Node (textContent) as DOM
+import DOM.Node.Types (Element, Node)
+import DOM.Node.Types (elementToNode, textToNode) as DOM
+import Math (round) as Math
+import Prelude
+
+import Dom (replaceElement, appendNodes) as Dom
+import Parser (TextWithNumber)
+import Parser (textWithNumber) as Parser
+
+type NumberElem =
+  { elem :: Element
+  , number :: Number
+  }
+
+set :: forall e. { tag :: String, node :: Node } -> Eff (dom :: DOM | e) (Maybe NumberElem)
+set { tag, node } = do
+  content <- DOM.textContent node
+  case Parser.textWithNumber content of
+    Just twn -> do
+      textWithNumber <- textWithNumberElem tag twn
+      Dom.replaceElement node (DOM.elementToNode textWithNumber)
+      pure (Just { elem: textWithNumber, number: twn.number })
+    Nothing ->
+      pure Nothing
+
+textWithNumberElem :: forall e. String -> TextWithNumber -> Eff (dom :: DOM | e) Element
+textWithNumberElem tag { begin, number, end } = do
+  document <- DOM.htmlDocumentToDocument <$> (DOM.window >>= DOM.document)
+  elem <- DOM.createElement tag document
+  beginNode <- DOM.textToNode <$> DOM.createTextNode begin document
+  numberNode <- numberElem number
+  endNode <- DOM.textToNode <$> DOM.createTextNode end document
+  Dom.appendNodes (DOM.elementToNode elem) [ beginNode, DOM.elementToNode numberNode, endNode ]
+  pure elem
+
+numberElem :: forall e. Number -> Eff (dom :: DOM | e) Element
+numberElem number = do
+  document <- DOM.htmlDocumentToDocument <$> (DOM.window >>= DOM.document)
+  container <- DOM.createElement "input" document
+  DOM.setClassName "number" container
+  DOM.setAttribute "value" (formatNumber number) container
+  pure container
+
+formatNumber :: Number -> String
+formatNumber number =
+  if Math.round number == number then
+    show (Int.round number)
+  else
+    String.replace (Pattern ".") (Replacement ",") (show (roundAt 1 number))
+
+roundAt :: Int -> Number -> Number
+roundAt at n =
+  let exp = Int.toNumber (Int.pow 10 at)
+  in  Math.round (n * exp) / exp
diff --git a/js/Main.purs b/js/Main.purs
new file mode 100644
index 0000000..062eb1d
--- /dev/null
+++ b/js/Main.purs
@@ -0,0 +1,56 @@
+module Main (main) where
+
+import Control.Monad.Eff (Eff)
+import Data.Array (catMaybes) as Array
+import Data.Maybe (Maybe(..))
+import Data.Traversable (sequence, sequence_) as Traversable
+import DOM (DOM)
+import DOM.Node.ParentNode (QuerySelector(..))
+import DOM.Node.Types (Node)
+import DOM.Node.Types (elementToNode) as DOM
+import Prelude
+
+import Dom (selectElement, selectElementsFrom, onInput, setValue, selectElementFrom) as Dom
+import EditableNumber (NumberElem)
+import EditableNumber (set, formatNumber) as EditableNumber
+import Parser (number) as Parser
+
+main :: forall e. Eff (dom :: DOM | e) Unit
+main = do
+  tagElems <- getNumberElements
+  numberElems <- Array.catMaybes <$> (Traversable.sequence $ map EditableNumber.set tagElems)
+  Traversable.sequence_ $ map (onInput numberElems) numberElems
+
+getNumberElements :: forall e. Eff (dom :: DOM | e) (Array { tag :: String, node :: Node })
+getNumberElements = do
+  h2 <- (map (\elem -> { tag: "h2", node: DOM.elementToNode elem})) <$> Dom.selectElement (QuerySelector "h2")
+  ul <- Dom.selectElement (QuerySelector "ul")
+  lis <- case ul of
+    Just elem -> do
+      myLis <- Dom.selectElementsFrom elem (QuerySelector "li")
+      pure $ map (\node -> { tag: "li", node: node }) myLis
+    _ -> do
+      pure []
+  pure $ (maybeToArray h2 <> lis)
+
+onInput :: forall e. Array NumberElem -> NumberElem -> Eff (dom :: DOM | e) Unit
+onInput numberElems { elem, number } = do
+  Dom.onInput elem (\value -> do
+    case Parser.number value of
+      Just newNumber ->
+        let mul = newNumber / number
+        in  numberElems
+              # map (\ne -> do
+                  inputNode <- Dom.selectElementFrom ne.elem (QuerySelector "input")
+                  case inputNode of
+                    Just node -> Dom.setValue (EditableNumber.formatNumber (ne.number * mul)) node
+                    _ -> pure unit
+                )
+              # Traversable.sequence_
+      _ ->
+        pure unit
+  )
+
+maybeToArray :: forall a. Maybe a -> Array a
+maybeToArray (Just x) = [ x ]
+maybeToArray _ = []
diff --git a/js/Parser.purs b/js/Parser.purs
new file mode 100644
index 0000000..cad9f1b
--- /dev/null
+++ b/js/Parser.purs
@@ -0,0 +1,76 @@
+module Parser
+  ( TextWithNumber
+  , textWithNumber
+  , number
+  ) where
+
+import Control.Alt ((<|>))
+import Data.Array as Array
+import Data.Char as Char
+import Data.Either (Either(Right))
+import Data.Int as Int
+import Data.Maybe (fromMaybe) as Maybe
+import Data.Maybe (Maybe(Just, Nothing))
+import Data.String as String
+import Prelude
+import Text.Parsing.Parser (Parser)
+import Text.Parsing.Parser (runParser) as Parser
+import Text.Parsing.Parser.Combinators (optionMaybe) as Parser
+import Text.Parsing.Parser.String (satisfy, anyChar, string, eof) as Parser
+
+type TextWithNumber =
+  { begin :: String
+  , number :: Number
+  , end :: String
+  }
+
+textWithNumber :: String -> Maybe TextWithNumber
+textWithNumber input =
+  case Parser.runParser input textWithNumberParser of
+    Right x -> Just x
+    _ -> Nothing
+
+number :: String -> Maybe Number
+number input =
+  case Parser.runParser input (numberParser <* Parser.eof) of
+    Right x -> Just x
+    _ -> Nothing
+
+textWithNumberParser :: Parser String TextWithNumber
+textWithNumberParser = do
+  begin <- String.fromCharArray <$> Array.many notDigit
+  num <- numberParser
+  end <- String.fromCharArray <$> Array.many Parser.anyChar
+  pure { begin: begin, number: num, end: end }
+
+numberFromIntArray :: Array Int -> Int
+numberFromIntArray xs =
+  Array.range 0 (Array.length xs - 1)
+    # map (Int.pow 10)
+    # Array.reverse
+    # Array.zipWith (*) xs
+    # Array.foldl (+) 0
+
+notDigit :: Parser String Char
+notDigit = Parser.satisfy (not <<< isDigit)
+
+numberParser :: Parser String Number
+numberParser = do
+  whole <- numberFromIntArray <$> Array.some digit
+  decimal <- Parser.optionMaybe $ do
+    _ <- Parser.string "," <|> Parser.string "."
+    digits <- Array.some digit
+    let decimals = numberFromIntArray digits
+    pure $ Int.toNumber decimals / Int.toNumber (Int.pow 10 (Array.length digits))
+  pure (Int.toNumber whole + Maybe.fromMaybe 0.0 decimal)
+
+digit :: Parser String Int
+digit = map (\c -> Char.toCharCode c - zeroCode) $ Parser.satisfy isDigit
+
+isDigit :: Char -> Boolean
+isDigit char =
+  let code = Char.toCharCode char
+  in  code >= zeroCode && code <= zeroCode + 9
+
+zeroCode :: Int
+zeroCode = 48
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7a740d4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "devDependencies": {
+    "pulp": "^11.0.0"
+  }
+}
diff --git a/recipes/brownie-aux-noix.md b/recipes/brownie-aux-noix.md
index 9ba3262..8b6d881 100644
--- a/recipes/brownie-aux-noix.md
+++ b/recipes/brownie-aux-noix.md
@@ -5,12 +5,12 @@ title: Brownie aux noix
 Ingrédients
 -----------
 
-- 225 g de chocolat noir.
-- 190 g de beurre.
-- 220 g de sucre + 1 sachet de sucre vanillé.
-- 3 CS de farine.
-- 2 grosses poignées de cerneaux de noix de pécan.
-- 6 œufs.
+- 225 g de chocolat noir
+- 190 g de beurre
+- 220 g de sucre + 1 sachet de sucre vanillé
+- 3 CS de farine
+- 2 grosses poignées de cerneaux de noix de pécan
+- 6 œufs
 
 Recette
 -------
diff --git a/recipes/cookies.md b/recipes/cookies.md
index 5168442..76545be 100644
--- a/recipes/cookies.md
+++ b/recipes/cookies.md
@@ -5,14 +5,14 @@ title: Cookies
 Ingrédients (45 cookies)
 ------------------------
 
-- 250 g de beurre.
-- 300 g de pépites de chocolat.
-- 2 œufs.
-- 350 g de farine.
-- 125 g de sucre semoule.
-- 125 g de sucre brun.
-- 1 cuillère à café de levure en poudre.
-- sel.
+- 250 g de beurre
+- 300 g de pépites de chocolat
+- 2 œufs
+- 350 g de farine
+- 125 g de sucre semoule
+- 125 g de sucre brun
+- 1 cuillère à café de levure en poudre
+- sel
 
 Recette
 -------
diff --git a/recipes/crème-aux-œufs.md b/recipes/crème-aux-œufs.md
index 6d72dce..e9890bf 100644
--- a/recipes/crème-aux-œufs.md
+++ b/recipes/crème-aux-œufs.md
@@ -7,7 +7,7 @@ Temps total (préparation, cuisson, nettoyage) : 1 heure.
 Ingrédients
 -----------
 
-- 6 oeufs
+- 6 œufs
 - 0,75 cL lait
 - 150 g sucre
 - 1 sachet de sucre vanillé (ou 1 gousse de vanille)
@@ -19,7 +19,7 @@ Recette
 #. Pendant ce temps, dans un grand saladier, battre les œufs entiers, puis
    ajouter le sucre et battre jusqu'à ce que le mélange devienne blanc et
    mousseux.
-#. Quand le lait est chaud, le verser sur la préparation aux oeufs et battre le
+#. Quand le lait est chaud, le verser sur la préparation aux œufs et battre le
    tout.
 #. Préchauffer le four à 180°C.
 #. Préparer le bain-marie : verser de l'eau chaude sur la plaque noire du four.
diff --git a/recipes/crème-chocolat.md b/recipes/crème-chocolat.md
index fdbe4e8..06b042c 100644
--- a/recipes/crème-chocolat.md
+++ b/recipes/crème-chocolat.md
@@ -5,11 +5,11 @@ title: Crème au chocolat
 Ingrédients
 -----------
 
-- 120 g de chocolat.
-- 750 cl de lait.
-- 65 g de sucre.
-- 4 CS de Maïzena.
-- 2 jaunes d’œufs.
+- 120 g de chocolat
+- 750 cl de lait
+- 65 g de sucre
+- 4 CS de Maïzena
+- 2 jaunes d’œufs
 
 Recette
 -------
diff --git a/recipes/crêpes.md b/recipes/crêpes.md
index b1ef3fd..b549528 100644
--- a/recipes/crêpes.md
+++ b/recipes/crêpes.md
@@ -5,13 +5,13 @@ title: Crêpes
 Ingrédients (25 crêpes)
 -----------------------
 
-- 500 g de farine.
-- 1 sachet de levure.
-- 1 pincée de sel.
-- 4 ou 5 œufs.
-- 1 L de lait.
-- 1 petit verre d’alcool.
-- 1 petit verre d’huile végétale (tournesol).
+- 500 g de farine
+- 1 sachet de levure
+- 1 pincée de sel
+- 4 ou 5 œufs
+- 1 L de lait
+- 1 petit verre d’alcool
+- 1 petit verre d’huile végétale (tournesol)
 
 Recette
 -------
diff --git a/recipes/financiers.md b/recipes/financiers.md
index 65cea5d..cdced3a 100644
--- a/recipes/financiers.md
+++ b/recipes/financiers.md
@@ -5,13 +5,13 @@ title: Financiers
 Ingrédients
 -----------
 
-- 90 g d'amande.
-- 100 g de sucre.
-- 50 g de farine.
-- 75 g de beurre noisette.
-- 10,5 cc de vanille.
-- 1 pincée de sel.
-- 4 blancs d'œufs.
+- 90 g d'amande
+- 100 g de sucre
+- 50 g de farine
+- 75 g de beurre noisette
+- 10,5 cc de vanille
+- 1 pincée de sel
+- 4 blancs d'œufs
 
 Recette
 -------
diff --git a/recipes/fondant-chocolat.md b/recipes/fondant-chocolat.md
index 31a6eb1..3be8ec5 100644
--- a/recipes/fondant-chocolat.md
+++ b/recipes/fondant-chocolat.md
@@ -5,12 +5,12 @@ title: Fondant au chocolat
 Ingrédients
 -----------
 
-- 125 g de chocolat noir.
-- 125 g de beurre.
-- 125 g de sucre semoule.
-- 3 œufs.
-- 1 cc de Maïzena.
-- sel.
+- 125 g de chocolat noir
+- 125 g de beurre
+- 125 g de sucre semoule
+- 3 œufs
+- 1 cc de Maïzena
+- sel
 
 Recette
 -------
diff --git a/recipes/fudge.md b/recipes/fudge.md
index 2ea45fc..7aa4517 100644
--- a/recipes/fudge.md
+++ b/recipes/fudge.md
@@ -5,11 +5,11 @@ title: Fudge
 Ingrédients (24 parts)
 ----------------------
 
-#. 480 ml de crème fleurette 30%
-#. 1 cuillère à café d’extrait de vanille
-#. 90 g de beurre
-#. 90 g de chocolat noir à 70% de cacao ou plus
-#. Arôme en option (noix de coco, cannelle, café, menthe…)
+- 480 mL de crème fleurette 30%
+- 1 cc d’extrait de vanille
+- 90 g de beurre
+- 90 g de chocolat noir à 70% de cacao ou plus
+- Arôme en option (noix de coco, cannelle, café, menthe…)
 
 Recette
 -------
diff --git a/recipes/riz-vinaigre-casserole.md b/recipes/riz-vinaigre-casserole.md
index 7f953fe..fb6c332 100644
--- a/recipes/riz-vinaigre-casserole.md
+++ b/recipes/riz-vinaigre-casserole.md
@@ -5,10 +5,10 @@ title: Riz vinaigré à la casserole
 Ingrédients (8 feuilles)
 ------------------------
 
-- 400 g de riz rond.
-- 50 ml de vinaigre de riz.
-- 1/2 cc de sel.
-- 2 CS de sucre.
+- 400 g de riz rond
+- 50 ml de vinaigre de riz
+- 0,5 cc de sel
+- 2 CS de sucre
 
 Recette
 -------
diff --git a/recipes/riz-vinaigre-vita-vapeur.md b/recipes/riz-vinaigre-vita-vapeur.md
index 1e1aa89..32f4ea3 100644
--- a/recipes/riz-vinaigre-vita-vapeur.md
+++ b/recipes/riz-vinaigre-vita-vapeur.md
@@ -5,10 +5,10 @@ title: Riz vinaigré au vita vapeur
 Ingrédients (2 chirachis)
 -------------------------
 
-- 300 g de riz rond.
-- 40 ml de vinaigre de riz.
-- 0.5 cc de sel.
-- 1.5 CS de sucre.
+- 300 g de riz rond
+- 40 ml de vinaigre de riz
+- 0,5 cc de sel
+- 1,5 CS de sucre
 
 Recette
 -------
diff --git a/recipes/shortbread.md b/recipes/shortbread.md
index e5bf2d6..65e74af 100644
--- a/recipes/shortbread.md
+++ b/recipes/shortbread.md
@@ -5,13 +5,13 @@ title: Shortbread
 Ingrédients
 -----------
 
-- 175 g de farine.
-- 175 g de beurre.
-- 60 g de cassonade.
-- 40 cl de lait concentré sucré.
-- 20 cl de lait concentré non sucré.
-- 150 g de chocolat noir.
-- 1 CS de Maïzena.
+- 175 g de farine
+- 175 g de beurre
+- 60 g de cassonade
+- 40 cl de lait concentré sucré
+- 20 cl de lait concentré non sucré
+- 150 g de chocolat noir
+- 1 CS de Maïzena
 
 Recette
 -------
diff --git a/shell.nix b/shell.nix
index 84a4e29..4d32712 100644
--- a/shell.nix
+++ b/shell.nix
@@ -2,10 +2,17 @@ with import <nixpkgs> {}; {
   env = stdenv.mkDerivation {
     name = "env";
     buildInputs = with pkgs; [
-      nodePackages.nodemon
       stack
+      purescript
+      nodePackages.nodemon
+      nodePackages.bower
+      yarn
       tmux
       tmuxinator
+      nodejs-7_x
     ];
+    shellHook = ''
+      export PATH=node_modules/.bin:$PATH;
+    '';
   };
 }
diff --git a/src/Main.hs b/src/Main.hs
index e5f92b9..c781cd4 100644
--- a/src/Main.hs
+++ b/src/Main.hs
@@ -6,6 +6,7 @@ import Data.Ord (comparing)
 
 import Hakyll
 import Hakyll.Core.Item (Item(itemIdentifier))
+import System.Process (readProcess)
 
 main :: IO ()
 main = hakyllWith configuration $ do
@@ -13,9 +14,18 @@ main = hakyllWith configuration $ do
     route   idRoute
     compile copyFileCompiler
 
-  match "design/*.hs" $ do
-    route   $ setExtension "css"
-    compile $ getResourceString >>= withItemBody (unixFilter "runghc" [])
+  match "design/*" $ do
+    route $ customRoute $ const "main.css"
+    compile $ do
+      filePath <- getResourceFilePath
+      unsafeCompiler (readProcess "runghc" [ filePath ] "")
+        >>= makeItem
+
+  match "js/*" $ do
+    route $ customRoute $ const "main.js"
+    compile $
+      unsafeCompiler (readProcess "pulp" [ "build", "--optimise", "--src-path", "js" ] "")
+        >>= makeItem
 
   match "recipes/*" $ do
     route $ setExtension "html"
diff --git a/templates/main.html b/templates/main.html
index be23249..23c37fe 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -4,19 +4,16 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>$title$</title>
-    <link rel="stylesheet" href="/design/main.css" />
+    <link rel="stylesheet" href="/main.css" />
     <link rel="icon" href="/images/icon.png">
   </head>
   <body>
-    <a href="/" class="header">
-      Recettes
-    </a>
-    <div id="content">
-      $if(hideTitle)$
-      $else$
-        <h1>$title$</h1>
-      $endif$
-      $body$
-    </div>
+    <a href="/" class="header">Recettes</a>
+    $if(hideTitle)$
+    $else$
+      <h1>$title$</h1>
+    $endif$
+    <div id="content">$body$</div>
+    <script src="/main.js"></script>
   </body>
 </html>