git.iko.soy/elk
on master help sign in
* updated the elm-yesod example

Added a slightly more sophisticated elm-page to the elm-yesod example.

commit3bd18e19c772408dd44351ce42602282e46954ba authorVincent Ambo <v.ambo@me.com> dateTue 29 May 2012, 00:39 (14 years ago) parentaafc77e
3 files changed+78−3
compare with master
unifiedsplit
Examples/elm-yesod/Main.hs+30−3 Examples/elm-yesod/elm_source/clock.elm+12 Examples/elm-yesod/elm_source/index.elm+36
Examples/elm-yesod/Main.hs+30−3
@@ -13,15 +13,29 @@ data ElmTest = ElmTest
1313-- embedding an external elm file (note: no spaces!)
1414mousePage = [elmFile|elm_source/mouse.elm|]
1515
16−-- embedding elm code in our Haskell file
17−rootPage = [elm|
18−main = plainText "Welcome!"
16+rootPage = [elmFile|elm_source/index.elm|]
17+
18+clockPage = [elmFile|elm_source/clock.elm|]
19+
20+-- embedding elm code inside Haskell using the QuasiQuoter:
21+shapesPage = [elm|
22+square = rect 200 200 (150,150)
23+circle = oval 140 140 (150,150)
24+pentagon = ngon 5 60 (150,150)
25+
26+main = collage 300 300
27+ [ outlined black square
28+ , filled green pentagon
29+ , customOutline [8,4] blue circle
30+ ]
1931|]
2032
2133-- our Yesod App
2234mkYesod "ElmTest" [parseRoutes|
2335/ RootR GET
2436/mouse MouseR GET
37+/clock ClockR GET
38+/shapes ShapesR GET
2539|]
2640
2741-- generateWidget is called with the result of an Elm QuasiQuoter (which is just a
@@ -31,11 +45,24 @@ getMouseR = defaultLayout $ do
3145 setTitle "Mouse position demo"
3246 generateWidget mousePage
3347
48+getClockR :: Handler RepHtml
49+getClockR = defaultLayout $ do
50+ setTitle "A clock"
51+ generateWidget clockPage
52+
53+getShapesR :: Handler RepHtml
54+getShapesR = defaultLayout $ do
55+ setTitle "Simple shapes"
56+ generateWidget shapesPage
57+
3458getRootR :: Handler RepHtml
3559getRootR = defaultLayout $ do
3660 setTitle "Welcome!"
3761 generateWidget rootPage
3862
63+
64+-- Our Yesod instance contains the default layout, which inserts the elm-min.js
65+-- file in the site's <head> tag.
3966instance Yesod ElmTest where
4067 jsLoader _ = BottomOfHeadBlocking
4168 defaultLayout widget = do
Examples/elm-yesod/elm_source/clock.elmnew file+12
@@ -0,0 +1,12 @@
1+clockColor = rgb (6/16) (11/16) (14/16)
2+
3+hand clr len time =
4+ let t = Math.PI * time / 30 - Math.PI / 2 in
5+ solid clr $ line [(200,200), (200 + len * cos t, 200 + len * sin t)]
6+
7+clock t = collage 400 400 [ filled clockColor $ ngon 12 110 (200, 200)
8+ , hand red 100 t
9+ , hand black 100 (t/60)
10+ , hand black 60 (t/720) ]
11+
12+main = lift clock $ Time.every 1
Examples/elm-yesod/elm_source/index.elmnew file+36
@@ -0,0 +1,36 @@
1+title w = size w 60 . box 4 . text . header . toText $ "Elm-Yesod"
2+
3+lightGrey = rgb (240/255) (241/255) (244/255)
4+mediumGrey = rgb (216/255) (221/255) (225/255)
5+heading outer inner =
6+ color mediumGrey . size outer 61 . box 1 .
7+ color lightGrey . size outer 60 . box 5 .
8+ size inner 60 . box 5 $ title inner
9+
10+skeleton body outer =
11+ let inner = if outer < 820 then outer - 20 else 800 in
12+ flow down [ heading outer inner
13+ , body outer inner
14+ ]
15+
16+----------------------
17+
18+section = text . bold . Text.height (5/4) . toText
19+
20+info w = List.map (\f -> f ()) . List.intersperse (\x -> plainText "&nbsp;") . List.map ((\e x -> e) . width w) $
21+ [ section "Written in Elm, served with Yesod"
22+ , text $ toText "This page is written in " ++ link "http://elm-lang.org/" (toText "Elm") ++
23+ toText " and served using the " ++
24+ link "http://yesodweb.com/" (toText "Yesod Web Framework") ++
25+ toText ". Since you are looking at this page it is safe to assume that you already have the example code. "
26+ , text $ toText "Rendering Yesod's type-safe URLs is not yet possible, but will be implemented as the currently " ++
27+ toText "very simple QuasiQuoter is extended."
28+ , section "More examples:"
29+ , text $ toText "- " ++ link "/mouse" (toText "A simple mouse input example")
30+ , text $ toText "- " ++ link "/clock" (toText "An animated analog clock")
31+ , text $ toText "- " ++ link "/shapes" (toText "Some simple rendered shapes")
32+ ]
33+
34+body outer inner = width outer . box 2 . flow down . (:) (plainText "&nbsp;") $ info inner
35+
36+main = lift (skeleton body) Window.width