10 |
11 | I shall be telling this with a sigh
12 | Somewhere ages and ages hence:
13 | Two roads diverged in a wood, and I—
14 | I took the one less traveled by,
15 | And that has made all the difference.
16 |
17 |
Robert Frost
18 |
19 | """
20 |
--------------------------------------------------------------------------------
/src/examples/lines.elm:
--------------------------------------------------------------------------------
1 | import Color exposing (..)
2 | import Graphics.Collage exposing (..)
3 | import Graphics.Element exposing (..)
4 |
5 |
6 | main : Element
7 | main =
8 | collage 200 420
9 | [ move (0,-55) blueSquare
10 | , move (0, 55) redSquare
11 | ]
12 |
13 |
14 | blueSquare : Form
15 | blueSquare =
16 | traced (dashed blue) square
17 |
18 |
19 | redSquare : Form
20 | redSquare =
21 | traced (solid red) square
22 |
23 |
24 | square : Path
25 | square =
26 | path [ (50,50), (50,-50), (-50,-50), (-50,50), (50,50) ]
--------------------------------------------------------------------------------
/src/pages/try-message.elm:
--------------------------------------------------------------------------------
1 |
2 | import Message exposing (report)
3 |
4 |
5 | main = report """
6 |
7 | # Online Editor
8 |
9 | Write and compile code online!
10 |
11 | * Hello World!
12 | * Mouse
13 | * Clock
14 |
15 | For more guidance check out:
16 |
17 | * Examples
18 | * Documentation / Guide
19 |
20 | """
21 |
--------------------------------------------------------------------------------
/src/examples/resize-paint.elm:
--------------------------------------------------------------------------------
1 |
2 | -- Show an image that resizes to fit the window
3 | -- while maintaining its aspect ratio.
4 |
5 | import Graphics.Element exposing (..)
6 | import Window
7 |
8 |
9 | main : Signal Element
10 | main =
11 | Signal.map resizeablePaint Window.dimensions
12 |
13 |
14 | resizeablePaint : (Int,Int) -> Element
15 | resizeablePaint (w,h) =
16 | fittedImage w h "/imgs/paint.jpg"
17 |
18 |
19 |
20 | -- Try resizing the demo pane. For best results, compile this in a 'New Tab' or
21 | -- in 'Full-Screen' mode and try playing with the dimensions of your browser.
--------------------------------------------------------------------------------
/src/examples/clock.elm:
--------------------------------------------------------------------------------
1 | import Color exposing (..)
2 | import Graphics.Collage exposing (..)
3 | import Graphics.Element exposing (..)
4 | import Time exposing (..)
5 |
6 |
7 | main =
8 | Signal.map clock (every second)
9 |
10 |
11 | clock t =
12 | collage 400 400
13 | [ filled lightGrey (ngon 12 110)
14 | , outlined (solid grey) (ngon 12 110)
15 | , hand orange 100 t
16 | , hand charcoal 100 (t/60)
17 | , hand charcoal 60 (t/720)
18 | ]
19 |
20 |
21 | hand clr len time =
22 | let
23 | angle = degrees (90 - 6 * inSeconds time)
24 | in
25 | segment (0,0) (fromPolar (len,angle))
26 | |> traced (solid clr)
27 |
--------------------------------------------------------------------------------
/src/examples/markdown.elm:
--------------------------------------------------------------------------------
1 | import Markdown
2 |
3 | main =
4 | Markdown.toHtml markdown
5 |
6 |
7 | markdown = """
8 |
9 | # This is Markdown
10 |
11 | [Markdown](http://daringfireball.net/projects/markdown/) lets you
12 | write content in a really natural way.
13 |
14 | * You can have lists, like this one
15 | * Make things **bold** or *italic*
16 | * Embed snippets of `code`
17 | * Create [links](/)
18 | * ...
19 |
20 | The [elm-markdown][] package parses all this content, allowing you
21 | to easily generate blocks of `Element` or `Html`.
22 |
23 | [elm-markdown]: http://package.elm-lang.org/packages/evancz/elm-markdown/latest
24 |
25 | """
--------------------------------------------------------------------------------
/src/examples/mouse-tracker.elm:
--------------------------------------------------------------------------------
1 | import Color exposing (..)
2 | import Graphics.Collage exposing (..)
3 | import Graphics.Element exposing (..)
4 | import Mouse
5 | import Window
6 |
7 |
8 | main : Signal Element
9 | main =
10 | Signal.map2 scene Mouse.position Window.dimensions
11 |
12 |
13 | scene : (Int,Int) -> (Int,Int) -> Element
14 | scene (x,y) (w,h) =
15 | let
16 | (dx,dy) =
17 | (toFloat x - toFloat w / 2, toFloat h / 2 - toFloat y)
18 | in
19 | collage w h
20 | [ ngon 3 100
21 | |> filled blue
22 | |> rotate (atan2 dy dx)
23 | , ngon 6 30
24 | |> filled orange
25 | |> move (dx, dy)
26 | ]
--------------------------------------------------------------------------------
/src/shared/Message.elm:
--------------------------------------------------------------------------------
1 | module Message (report) where
2 |
3 | import Graphics.Element exposing (..)
4 | import ColorScheme as C
5 | import Markdown
6 | import Window
7 |
8 |
9 | scene msg (w,h) =
10 | container w h middle (box <| width 300 (Markdown.toElement msg))
11 | |> color C.mediumGrey
12 |
13 |
14 | box e =
15 | let w = widthOf e
16 | h = heightOf e
17 | in
18 | flow down
19 | [ color C.accent1 (spacer (w+40) 5)
20 | , container (w+38) (h+10) midTop e
21 | |> color C.lightGrey
22 | |> container (w+40) (h+11) midTop
23 | |> color C.mediumGrey
24 | ]
25 |
26 |
27 | report msg =
28 | Signal.map (scene msg) Window.dimensions
--------------------------------------------------------------------------------
/src/shared/TopBar.elm:
--------------------------------------------------------------------------------
1 | module TopBar (topBar) where
2 |
3 | import Html exposing (..)
4 | import Html.Attributes exposing (..)
5 |
6 |
7 | (=>) = (,)
8 |
9 |
10 | topBar name =
11 | div [ id "tabs" ]
12 | [ a [ href "/", style [ "position" => "absolute", "left" => "1em", "top" => "1em" ] ]
13 | [ img [ src "/assets/logo.svg", style [ "width" => "24px" ] ] []
14 | ]
15 | , ul [] (List.map (tab name) [ "examples", "docs", "community", "blog" ])
16 | ]
17 |
18 |
19 | tab currentName name =
20 | li []
21 | [ a [ classList [ "tab" => True, "current" => (currentName == name) ]
22 | , href ("/" ++ name)
23 | ]
24 | [ text name ]
25 | ]
26 |
27 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/neat.css:
--------------------------------------------------------------------------------
1 | .cm-s-neat span.cm-comment { color: #a86; }
2 | .cm-s-neat span.cm-keyword { line-height: 1em; font-weight: bold; color: blue; }
3 | .cm-s-neat span.cm-string { color: #a22; }
4 | .cm-s-neat span.cm-builtin { line-height: 1em; font-weight: bold; color: #077; }
5 | .cm-s-neat span.cm-special { line-height: 1em; font-weight: bold; color: #0aa; }
6 | .cm-s-neat span.cm-variable { color: black; }
7 | .cm-s-neat span.cm-number, .cm-s-neat span.cm-atom { color: #3a3; }
8 | .cm-s-neat span.cm-meta {color: #555;}
9 | .cm-s-neat span.cm-link { color: #3a3; }
10 |
11 | .cm-s-neat .CodeMirror-activeline-background {background: #e8f2ff !important;}
12 | .cm-s-neat .CodeMirror-matchingbracket {outline:1px solid grey; color:black !important;}
13 |
--------------------------------------------------------------------------------
/src/examples/layout-simple.elm:
--------------------------------------------------------------------------------
1 |
2 | {-------------------------------------------------------------
3 | Elements can be combined into more complex layouts using
4 | the flow function:
5 |
6 | flow : Direction -> [Element] -> Element
7 |
8 | It is easy to change the direction of flow. Just use a
9 | different value for the direction!
10 |
11 | down, up, left, right, inward, outward : Direction
12 |
13 | Try switching "down" in the code below with "up".
14 | -------------------------------------------------------------}
15 |
16 | import Graphics.Element exposing (..)
17 |
18 |
19 | main : Element
20 | main =
21 | flow down
22 | [ show "By using the 'flow' function,"
23 | , show "we can stack elements"
24 | , show "on top of other elements."
25 | ]
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/elegant.css:
--------------------------------------------------------------------------------
1 | .cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom {color: #762;}
2 | .cm-s-elegant span.cm-comment {color: #262; font-style: italic; line-height: 1em;}
3 | .cm-s-elegant span.cm-meta {color: #555; font-style: italic; line-height: 1em;}
4 | .cm-s-elegant span.cm-variable {color: black;}
5 | .cm-s-elegant span.cm-variable-2 {color: #b11;}
6 | .cm-s-elegant span.cm-qualifier {color: #555;}
7 | .cm-s-elegant span.cm-keyword {color: #730;}
8 | .cm-s-elegant span.cm-builtin {color: #30a;}
9 | .cm-s-elegant span.cm-link {color: #762;}
10 | .cm-s-elegant span.cm-error {background-color: #fdd;}
11 |
12 | .cm-s-elegant .CodeMirror-activeline-background {background: #e8f2ff !important;}
13 | .cm-s-elegant .CodeMirror-matchingbracket {outline:1px solid grey; color:black !important;}
14 |
--------------------------------------------------------------------------------
/elm-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "1.0.0",
3 | "summary": "Sandbox for building code that depends on third party libs",
4 | "repository": "https://github.com/elm-lang/elm-lang.org.git",
5 | "license": "BSD3",
6 | "source-directories": [
7 | "src/shared",
8 | "gen/guide/elm"
9 | ],
10 | "exposed-modules": [],
11 | "native-modules": true,
12 | "dependencies": {
13 | "elm-lang/core": "3.0.0 <= v < 4.0.0",
14 | "evancz/elm-effects": "2.0.1 <= v < 3.0.0",
15 | "evancz/elm-html": "4.0.2 <= v < 5.0.0",
16 | "evancz/elm-http": "3.0.0 <= v < 4.0.0",
17 | "evancz/elm-markdown": "2.0.0 <= v < 3.0.0",
18 | "evancz/elm-svg": "2.0.1 <= v < 3.0.0",
19 | "evancz/start-app": "2.0.2 <= v < 3.0.0"
20 | },
21 | "elm-version": "0.16.0 <= v < 0.17.0"
22 | }
--------------------------------------------------------------------------------
/src/examples/buttons.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (div, button, text)
2 | import Html.Events exposing (onClick)
3 | import StartApp.Simple as StartApp
4 |
5 |
6 | {-| Read more about StartApp and how this works at:
7 |
8 | https://github.com/evancz/start-app
9 |
10 | The rough idea is that we just specify a model, a way to view it,
11 | and a way to update it. That's all there is to it!
12 | -}
13 | main =
14 | StartApp.start { model = 0, view = view, update = update }
15 |
16 |
17 | view address model =
18 | div []
19 | [ button [ onClick address Decrement ] [ text "-" ]
20 | , div [] [ text (toString model) ]
21 | , button [ onClick address Increment ] [ text "+" ]
22 | ]
23 |
24 |
25 | type Action = Increment | Decrement
26 |
27 |
28 | update action model =
29 | case action of
30 | Increment -> model + 1
31 | Decrement -> model - 1
32 |
--------------------------------------------------------------------------------
/src/examples/unordered-list.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (li, text, ul)
2 | import Html.Attributes exposing (class)
3 |
4 |
5 | {-| This snippet uses the
and
tags to create an unorderd
6 | list of French grocery items. Notice that all occurrences of 'ul'
7 | and 'li' are followed by two lists. The first list is for any HTML
8 | attributes, and the second list is all the HTML nodes inside the
9 | tag.
10 |
11 | Et maintenant le voyage a la supermarche!
12 | -}
13 | main =
14 | ul [class "grocery-list"]
15 | [ li [] [text "Pamplemousse"]
16 | , li [] [text "Ananas"]
17 | , li [] [text "Jus d'orange"]
18 | , li [] [text "Boeuf"]
19 | , li [] [text "Soup du jour"]
20 | , li [] [text "Camembert"]
21 | , li [] [text "Jacque Cousteau"]
22 | , li [] [text "Baguette"]
23 | ]
24 |
25 |
26 | -- Thanks to "Flight of the Conchords" for creating "Foux Du Fafa"
--------------------------------------------------------------------------------
/src/examples/functions.elm:
--------------------------------------------------------------------------------
1 | import Graphics.Element exposing (show)
2 |
3 |
4 | -- The 'sqrt' function takes one argument. It figures out
5 | -- the square root of a number.
6 | four =
7 | sqrt 16
8 |
9 |
10 | -- The 'max' function takes two arguments. It tells you which
11 | -- of the two arguments is bigger.
12 | eleven =
13 | max 2 11
14 |
15 |
16 | -- If the arguments are more complex, we put them in parentheses
17 | -- to make the grouping more clear. When the following expression
18 | -- gets evaluated, it goes like this:
19 | --
20 | -- max (sqrt 100) (4 * 5)
21 | -- max 10 (4 * 5)
22 | -- max 10 20
23 | -- 20
24 | --
25 | twenty =
26 | max (sqrt 100) (4 * 5)
27 |
28 |
29 | -- The 'show' function takes one argument. It turns any value into
30 | -- something we can show on screen. In this case, we are giving a
31 | -- list of numbers.
32 | main =
33 | show [four, eleven, twenty]
--------------------------------------------------------------------------------
/src/examples/stamps.elm:
--------------------------------------------------------------------------------
1 | import Color exposing (..)
2 | import Graphics.Collage exposing (..)
3 | import Graphics.Element exposing (..)
4 | import Mouse
5 | import Window
6 |
7 |
8 | main : Signal Element
9 | main =
10 | Signal.map2 scene Window.dimensions clickLocations
11 |
12 |
13 | -- for a good time, remove "sampleOn Mouse.clicks" ;)
14 | clickLocations : Signal (List (Int,Int))
15 | clickLocations =
16 | Signal.foldp (::) [] (Signal.sampleOn Mouse.clicks Mouse.position)
17 |
18 |
19 | scene : (Int,Int) -> List (Int,Int) -> Element
20 | scene (w,h) locs =
21 | let drawPentagon (x,y) =
22 | ngon 5 20
23 | |> filled (hsla (toFloat x) 0.9 0.6 0.7)
24 | |> move (toFloat x - toFloat w / 2, toFloat h / 2 - toFloat y)
25 | |> rotate (toFloat x)
26 | in
27 | layers
28 | [ collage w h (List.map drawPentagon locs)
29 | , show "Click to stamp a pentagon."
30 | ]
31 |
--------------------------------------------------------------------------------
/src/examples/define-functions.elm:
--------------------------------------------------------------------------------
1 | import Graphics.Element exposing (show)
2 |
3 |
4 | -- To define a function, provide a name and then list all the
5 | -- arguments separated by spaces. The 'add' function takes in
6 | -- two arguments 'x' and 'y' and adds them together.
7 | add x y =
8 | x + y
9 |
10 |
11 | -- The 'factorial' function takes in a number 'n' and computes
12 | -- the factorial by multiplying (1 * 2 * 3 * ... * n)
13 | factorial n =
14 | List.product [1..n]
15 |
16 |
17 | -- The 'main' value needs to evaluate all of our functions to
18 | -- know what to show on screen. It will step through things like
19 | -- this:
20 | --
21 | -- add 1 (factorial 4)
22 | -- add 1 (List.product [1..4])
23 | -- add 1 24
24 | -- 1 + 24
25 | -- 25
26 | --
27 | -- Notice that a function is like find-and-replace. Whenever we
28 | -- see 'factorial' we replace it with the definition.
29 | main =
30 | show (add 1 (factorial 4))
31 |
--------------------------------------------------------------------------------
/src/examples/password.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (Html, Attribute, text, toElement, div, input)
2 | import Html.Attributes exposing (..)
3 | import Html.Events exposing (on, targetValue)
4 | import Signal exposing (Address)
5 | import StartApp.Simple as StartApp
6 |
7 |
8 | main =
9 | StartApp.start { model = "", view = view, update = update }
10 |
11 |
12 | update newStr oldStr =
13 | newStr
14 |
15 |
16 | view : Address String -> String -> Html
17 | view address string =
18 | div []
19 | [ input
20 | [ type' "password"
21 | , placeholder "Password"
22 | , value string
23 | , on "input" targetValue (Signal.message address)
24 | , myStyle
25 | ]
26 | []
27 | , div [myStyle] [text string]
28 | ]
29 |
30 |
31 | myStyle : Attribute
32 | myStyle =
33 | style
34 | [ ("width", "100%")
35 | , ("height", "40px")
36 | , ("padding", "10px 0")
37 | , ("font-size", "2em")
38 | , ("text-align", "center")
39 | ]
40 |
--------------------------------------------------------------------------------
/src/examples/zip.elm:
--------------------------------------------------------------------------------
1 | import Graphics.Element exposing (show)
2 |
3 |
4 | -- Zip two lists together. In this case, we are pairing up
5 | -- names and ages.
6 | main =
7 | show (zip ["Tom", "Sue", "Bob"] [45, 31, 26])
8 |
9 |
10 | {-| The zip function takes in two lists and returns a combined
11 | list. It combines the elements of each list pairwise until one
12 | of the lists runs out of elements.
13 |
14 | zip [1,2,3] ['a','b','c'] == [(1,'a'), (2,'b'), (3,'c')]
15 |
16 | -}
17 | zip : List a -> List b -> List (a,b)
18 | zip xs ys =
19 | case (xs, ys) of
20 | ( x :: xs', y :: ys' ) ->
21 | (x,y) :: zip xs' ys'
22 |
23 | (_, _) ->
24 | []
25 |
26 |
27 | -- There is a function in the List library called map2 that
28 | -- applies a function pairwise to two lits. You can use it
29 | -- to define 'zip' much more easily:
30 | --
31 | -- zip = List.map2 (,)
32 | --
33 | -- The (,) expression is a shortcut to create 2-tuples, so
34 | -- evaluating ((,) 3 4) results in (3,4)
--------------------------------------------------------------------------------
/src/examples/field.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (Html, Attribute, text, toElement, div, input)
2 | import Html.Attributes exposing (..)
3 | import Html.Events exposing (on, targetValue)
4 | import Signal exposing (Address)
5 | import StartApp.Simple as StartApp
6 | import String
7 |
8 |
9 | main =
10 | StartApp.start { model = "", view = view, update = update }
11 |
12 |
13 | update newStr oldStr =
14 | newStr
15 |
16 |
17 | view : Address String -> String -> Html
18 | view address string =
19 | div []
20 | [ input
21 | [ placeholder "Text to reverse"
22 | , value string
23 | , on "input" targetValue (Signal.message address)
24 | , myStyle
25 | ]
26 | []
27 | , div [ myStyle ] [ text (String.reverse string) ]
28 | ]
29 |
30 |
31 | myStyle : Attribute
32 | myStyle =
33 | style
34 | [ ("width", "100%")
35 | , ("height", "40px")
36 | , ("padding", "10px 0")
37 | , ("font-size", "2em")
38 | , ("text-align", "center")
39 | ]
40 |
--------------------------------------------------------------------------------
/elm-website.cabal:
--------------------------------------------------------------------------------
1 | name: elm-website
2 | version: 0.1.0.2
3 |
4 | synopsis:
5 | elm-lang.org web site
6 | description:
7 | Server and content for the Elm Language web site.
8 |
9 | homepage: http://elm-lang.org/
10 |
11 | license: BSD3
12 | license-file: LICENSE
13 |
14 | author: Evan Czaplicki
15 | maintainer: info@elm-lang.org
16 | copyright: (c) 2012-2014 Evan Czaplicki
17 |
18 | build-type: Simple
19 |
20 | cabal-version: >=1.10
21 |
22 | executable run-elm-website
23 | hs-source-dirs:
24 | src/backend
25 |
26 | main-is:
27 | Main.hs
28 |
29 | ghc-options:
30 | -W -threaded -O2 -rtsopts "-with-rtsopts=-N -I4"
31 |
32 | build-depends:
33 | aeson,
34 | base,
35 | binary,
36 | blaze-html,
37 | blaze-markup,
38 | bytestring,
39 | containers,
40 | cmdargs,
41 | directory,
42 | elm-compiler >= 0.16 && < 0.17,
43 | elm-package,
44 | filepath,
45 | mtl >= 2.2.1 && < 3,
46 | snap-core,
47 | snap-server,
48 | text,
49 | utf8-string
50 |
--------------------------------------------------------------------------------
/src/backend/Main.hs:
--------------------------------------------------------------------------------
1 | {-# LANGUAGE DeriveDataTypeable #-}
2 | module Main where
3 |
4 | import GHC.Conc
5 | import Snap.Http.Server (defaultConfig, httpServe, setPort)
6 | import System.Console.CmdArgs
7 |
8 | import qualified Init.Compiler as Compiler
9 | import qualified Init.Examples as Examples
10 | import qualified Init.FileTree as FileTree
11 | import qualified Init.Guide as Guide
12 | import qualified Init.Pages as Pages
13 | import qualified Router
14 |
15 |
16 | data Flags = Flags
17 | { port :: Int
18 | }
19 | deriving (Data,Typeable,Show,Eq)
20 |
21 |
22 | flags :: Flags
23 | flags =
24 | Flags
25 | { port = 8000 &= help "set the port of the server"
26 | }
27 |
28 |
29 | main :: IO ()
30 | main =
31 | do setNumCapabilities =<< getNumProcessors
32 |
33 | args <- cmdArgs flags
34 |
35 | FileTree.init
36 | Examples.init
37 | Guide.init
38 | pages <- Pages.init
39 | compiler <- Compiler.init
40 |
41 | httpServe
42 | (setPort (port args) defaultConfig)
43 | (Router.router compiler pages)
44 |
45 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/neo.css:
--------------------------------------------------------------------------------
1 | /* neo theme for codemirror */
2 |
3 | /* Color scheme */
4 |
5 | .cm-s-neo.CodeMirror {
6 | background-color:#ffffff;
7 | color:#2e383c;
8 | line-height:1.4375;
9 | }
10 | .cm-s-neo .cm-comment {color:#75787b}
11 | .cm-s-neo .cm-keyword, .cm-s-neo .cm-property {color:#1d75b3}
12 | .cm-s-neo .cm-atom,.cm-s-neo .cm-number {color:#75438a}
13 | .cm-s-neo .cm-node,.cm-s-neo .cm-tag {color:#9c3328}
14 | .cm-s-neo .cm-string {color:#b35e14}
15 | .cm-s-neo .cm-variable,.cm-s-neo .cm-qualifier {color:#047d65}
16 |
17 |
18 | /* Editor styling */
19 |
20 | .cm-s-neo pre {
21 | padding:0;
22 | }
23 |
24 | .cm-s-neo .CodeMirror-gutters {
25 | border:none;
26 | border-right:10px solid transparent;
27 | background-color:transparent;
28 | }
29 |
30 | .cm-s-neo .CodeMirror-linenumber {
31 | padding:0;
32 | color:#e0e2e5;
33 | }
34 |
35 | .cm-s-neo .CodeMirror-guttermarker { color: #1d75b3; }
36 | .cm-s-neo .CodeMirror-guttermarker-subtle { color: #e0e2e5; }
37 |
38 | .cm-s-neo div.CodeMirror-cursor {
39 | width: auto;
40 | border: 0;
41 | background: rgba(155,157,162,0.37);
42 | z-index: 1;
43 | }
44 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/mode/elm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CodeMirror: Elm mode
6 |
7 |
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
27 |
28 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/src/examples/radial-gradient.elm:
--------------------------------------------------------------------------------
1 | import Color exposing (..)
2 | import Graphics.Collage exposing (..)
3 | import Graphics.Element exposing (..)
4 |
5 |
6 | grad1 : Gradient
7 | grad1 =
8 | radial (0,0) 50 (0,10) 90
9 | [ ( 0, rgb 244 242 1)
10 | , (0.8, rgb 228 199 0)
11 | , ( 1, rgba 228 199 0 0)
12 | ]
13 |
14 | grad2 : Gradient
15 | grad2 =
16 | radial (0,0) 15 (7,-5) 40
17 | [ ( 0, rgb 0 201 255)
18 | , (0.8, rgb 0 181 226)
19 | , ( 1, rgba 0 181 226 0)
20 | ]
21 |
22 | grad3 : Gradient
23 | grad3 =
24 | radial (0,0) 20 (7,-15) 50
25 | [ ( 0, rgb 255 95 152)
26 | , (0.75, rgb 255 1 136)
27 | , ( 1, rgba 255 1 136 0)
28 | ]
29 |
30 | grad4 : Gradient
31 | grad4 =
32 | radial (0,0) 10 (7,-5) 30
33 | [ ( 0, rgb 167 211 12)
34 | , (0.9, rgb 1 159 98)
35 | , ( 1, rgba 1 159 98 0)
36 | ]
37 |
38 | main : Element
39 | main =
40 | collage 300 300
41 | [ move (-55,-55) (gradient grad1 (circle 100))
42 | , move ( 40, 85) (gradient grad2 (circle 100))
43 | , move ( 50,-10) (gradient grad3 (circle 100))
44 | , move (-10, 50) (gradient grad4 (circle 100))
45 | ]
46 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (C) 2014 by Marijn Haverbeke and others
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
20 |
--------------------------------------------------------------------------------
/src/examples/either.elm:
--------------------------------------------------------------------------------
1 | import Graphics.Element exposing (show)
2 |
3 |
4 | {-| This is a union type that lets you put together two types.
5 | If you tag a value with 'Left' it can have type 'a' and if you
6 | tag a value with 'Right' it can have type 'b'.
7 | -}
8 | type Either a b
9 | = Left a
10 | | Right b
11 |
12 |
13 | {-| Maybe you have a list of user IDs and those IDs are either
14 | an integer or a string depending on when the user joined.
15 | -}
16 | userIDs : List (Either Int String)
17 | userIDs =
18 | [Left 42, Right "12A3BC", Left 1337, Right "ZA7T9G"]
19 |
20 |
21 | {-| Starting with a list of eithers, partition them into a list
22 | of left values and a list of right values.
23 | -}
24 | partition : List (Either a b) -> (List a, List b)
25 | partition eithers =
26 | case eithers of
27 | [] ->
28 | ([], [])
29 |
30 | Left a :: rest ->
31 | let
32 | (lefts, rights) = partition rest
33 | in
34 | (a :: lefts, rights)
35 |
36 | Right b :: rest ->
37 | let
38 | (lefts, rights) = partition rest
39 | in
40 | (lefts, b :: rights)
41 |
42 |
43 | main =
44 | show (partition userIDs)
--------------------------------------------------------------------------------
/src/examples/centering.elm:
--------------------------------------------------------------------------------
1 |
2 | {----------------------------------------------------------------------
3 |
4 | Using `container` puts a box around an element, allowing you to
5 | clarify where it should be positioned.
6 |
7 | container : Int -> Int -> Position -> Element -> Element
8 |
9 | The first two arguments specify the size of the container.
10 | The third argument is the position of the contained element.
11 | The simplest options for Position are:
12 |
13 | topLeft, topRight, bottomLeft, bottomRight : Position
14 | middle, midLeft, midRight, midTop, midBottom : Position
15 |
16 | If you need to set an absolute or relative position you can use:
17 |
18 | middleAt : Pos -> Pos -> Position
19 | topLeftAt, bottomLeftAt : Pos -> Pos -> Position
20 | topRightAt, bottomRightAt : Pos -> Pos -> Position
21 |
22 | A Pos can be created with:
23 |
24 | absolute : Int -> Pos
25 | relative : Float -> Pos
26 |
27 | ----------------------------------------------------------------------}
28 |
29 | import Color exposing (lightPurple)
30 | import Graphics.Element exposing (..)
31 |
32 |
33 | main : Element
34 | main =
35 | color lightPurple (container 300 300 middle (show "Try this with html."))
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/eclipse.css:
--------------------------------------------------------------------------------
1 | .cm-s-eclipse span.cm-meta {color: #FF1717;}
2 | .cm-s-eclipse span.cm-keyword { line-height: 1em; font-weight: bold; color: #7F0055; }
3 | .cm-s-eclipse span.cm-atom {color: #219;}
4 | .cm-s-eclipse span.cm-number {color: #164;}
5 | .cm-s-eclipse span.cm-def {color: #00f;}
6 | .cm-s-eclipse span.cm-variable {color: black;}
7 | .cm-s-eclipse span.cm-variable-2 {color: #0000C0;}
8 | .cm-s-eclipse span.cm-variable-3 {color: #0000C0;}
9 | .cm-s-eclipse span.cm-property {color: black;}
10 | .cm-s-eclipse span.cm-operator {color: black;}
11 | .cm-s-eclipse span.cm-comment {color: #3F7F5F;}
12 | .cm-s-eclipse span.cm-string {color: #2A00FF;}
13 | .cm-s-eclipse span.cm-string-2 {color: #f50;}
14 | .cm-s-eclipse span.cm-qualifier {color: #555;}
15 | .cm-s-eclipse span.cm-builtin {color: #30a;}
16 | .cm-s-eclipse span.cm-bracket {color: #cc7;}
17 | .cm-s-eclipse span.cm-tag {color: #170;}
18 | .cm-s-eclipse span.cm-attribute {color: #00c;}
19 | .cm-s-eclipse span.cm-link {color: #219;}
20 | .cm-s-eclipse span.cm-error {color: #f00;}
21 |
22 | .cm-s-eclipse .CodeMirror-activeline-background {background: #e8f2ff !important;}
23 | .cm-s-eclipse .CodeMirror-matchingbracket {outline:1px solid grey; color:black !important;}
24 |
--------------------------------------------------------------------------------
/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
40 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Elm Home Page
2 |
3 | All of [elm-lang.org](http://elm-lang.org) is written in Elm. This repo
4 | contains all that source code, both for the frontend and for the backend.
5 |
6 | You can also use this to run [elm-lang.org/try](http://elm-lang.org/try)
7 | locally.
8 |
9 | ## Set up
10 |
11 | First get the Elm developer workflow setup by reading the [build from source instructions][bfs-readme], then running [this script][bfs] with `runhaskell BuildFromSource.hs master`. Be aware that this is all the actively developed branches, so things may be in an intermediate state.
12 |
13 | [bfs-readme]: https://github.com/elm-lang/elm-platform/blob/master/README.md
14 | [bfs]: https://github.com/elm-lang/elm-platform/blob/master/installers/BuildFromSource.hs
15 |
16 | Then in the `Elm-Platform/master/` directory, run these commands:
17 |
18 | ```bash
19 | git clone https://github.com/elm-lang/elm-lang.org.git
20 | cd elm-lang.org
21 | git checkout master
22 | cabal sandbox init --sandbox ../.cabal-sandbox
23 | cabal install --only-dependencies
24 | cabal configure
25 | cabal build
26 | ./dist/build/run-elm-website/run-elm-website
27 | ```
28 |
29 | Great! You should be set up with [elm-lang.org](http://elm-lang.org/) running at
30 | [localhost:8000/](http://localhost:8000/).
31 |
32 | You can run `cabal clean` to clear out all cached build information and start fresh.
33 |
--------------------------------------------------------------------------------
/src/examples/quick-sort.elm:
--------------------------------------------------------------------------------
1 | import Graphics.Element exposing (show)
2 | import List exposing (filter)
3 |
4 |
5 | main =
6 | show (quicksort [5,3,8,1,9,4,7])
7 |
8 |
9 | quicksort : List comparable -> List comparable
10 | quicksort list =
11 | case list of
12 | [] ->
13 | []
14 |
15 | pivot :: rest ->
16 | let
17 | lower = filter (\n -> n <= pivot) rest
18 | higher = filter (\n -> n > pivot) rest
19 | in
20 | quicksort lower ++ [pivot] ++ quicksort higher
21 |
22 |
23 | {---------------------
24 |
25 | QuickSort works as follows:
26 |
27 | - Choose a pivot element to put in the "middle" of the sorted list.
28 | - Gather all of the elements less than the pivot in `lower`.
29 | - Gather all of the elements greater than the pivot in `higher`.
30 | - Run `quicksort` on the `lower` and `higher` lists, sorting them.
31 | - Put the sorted lists together.
32 |
33 |
34 | Note that choosing a bad pivot can have bad effects. Take a sorted
35 | list with N elements. The pivot will always be the lowest member,
36 | meaning that it does not divide the list very evenly. The list of
37 | lessers has 0 elements and the list of greaters has N-1 elemens.
38 | This means quicksort will be called N times, each call looking
39 | through the entire list. This means, in the worst case, QuickSort
40 | will make N^2 comparisons.
41 |
42 | ----------------------}
43 |
--------------------------------------------------------------------------------
/src/examples/infix.elm:
--------------------------------------------------------------------------------
1 | import Graphics.Element exposing (show)
2 |
3 |
4 | -- You can use infix operators just like in normal math, so
5 | -- when you want to know 2 + 2 you can write it just like that!
6 | four =
7 | 2 + 2
8 |
9 |
10 | -- Multiplication is similar.
11 | sixteen =
12 | 8 * 2
13 |
14 |
15 | -- When you start putting these together, it is good to add
16 | -- parentheses sometimes.
17 | eleven =
18 | (4 * 3) - 1
19 |
20 |
21 | -- The infix operators follow the normal rules of math though
22 | -- so you can leave off the parens if you want.
23 | thirteen =
24 | 4 * 3 + 1
25 |
26 |
27 | -- There are some infix operators for boolean values. Say you
28 | -- have two boolean values and you want to know if both of them
29 | -- are true. You can use the AND operator, written &&
30 | --
31 | -- The following function takes a number called 'age' and checks
32 | -- if it is greater than 12 and less than 20, all the numbers that
33 | -- end in "teen"
34 | isTeenage age =
35 | (age > 12) && (age < 20)
36 |
37 |
38 | -- Again, infix operators are set up so they can be used together
39 | -- in reasonable ways without parentheses, so 'isTeenage' can be
40 | -- written like this:
41 | isTeenage' age =
42 | age > 12 && age < 20
43 |
44 |
45 | -- When in doubt, add some parentheses!
46 |
47 |
48 | main =
49 | show
50 | [ isTeenage four
51 | , isTeenage sixteen
52 | , isTeenage eleven
53 | , isTeenage thirteen
54 | ]
--------------------------------------------------------------------------------
/src/examples/forward-apply.elm:
--------------------------------------------------------------------------------
1 | import Color exposing (green, purple)
2 | import Graphics.Collage exposing (collage, filled, move, ngon)
3 |
4 |
5 | main =
6 | collage 200 200 [purplePentagon, greenPentagon]
7 |
8 |
9 | {-| We use three different functions to define our purple pentagon.
10 |
11 | 1. 'move' takes a pair of coordinates and a textured shape
12 | 2. 'filled' takes a color and a shape
13 | 3. 'ngon' takes a number of corners and a radius
14 |
15 | We need to put all of these together, so we end up with a decent
16 | number of parentheses.
17 | -}
18 | purplePentagon =
19 | move (20,20) (filled purple (ngon 5 50))
20 |
21 |
22 | {-| We are going to use the same three functions to define a green
23 | pentagon, but this time we will use the |> operator to use fewer
24 | parentheses. It is defined like this:
25 |
26 | x |> f = f x
27 |
28 | So as soon as we evaluate 'x' we hand it to the function 'f' and
29 | keep going. So in the following code, we create an ngon, fill it
30 | in, and move it around.
31 |
32 | This is pretty much the same as the purplePentagon code, we just
33 | traded parentheses for the "forward application" operator. It also
34 | means the code reads left-to-right, often making it easier to read!
35 | -}
36 | greenPentagon =
37 | ngon 5 50
38 | |> filled green
39 | |> move (-20,-20)
40 |
41 |
42 | -- EXERCISE: try switching greenPentagon to only use parentheses, and
43 | -- try switching purplePentagon to only use the |> operator.
--------------------------------------------------------------------------------
/src/examples/radio-buttons.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (..)
2 | import Html.Attributes exposing (..)
3 | import Html.Events exposing (on, targetChecked)
4 | import Signal exposing (Address)
5 | import StartApp.Simple as StartApp
6 |
7 |
8 | main =
9 | StartApp.start { model = initialModel, view = view, update = update }
10 |
11 |
12 | -- MODEL
13 |
14 | type alias Model =
15 | { style : Style
16 | }
17 |
18 |
19 | type Style
20 | = Red
21 | | Underline
22 | | Bold
23 |
24 |
25 | initialModel =
26 | { style = Bold }
27 |
28 |
29 | -- UPDATE
30 |
31 | update newStyle model =
32 | { model | style = newStyle }
33 |
34 |
35 | -- VIEW
36 |
37 | view address model =
38 | div [] <|
39 | span [toStyle model] [text "Hello, how are you?!"]
40 | :: br [] []
41 | :: radio address model Red "red"
42 | ++ radio address model Underline "underline"
43 | ++ radio address model Bold "bold"
44 |
45 |
46 | toStyle model =
47 | style <|
48 | case model.style of
49 | Red ->
50 | [ ("color", "red") ]
51 |
52 | Underline ->
53 | [ ("text-decoration", "underline") ]
54 |
55 | Bold ->
56 | [ ("font-weight", "bold") ]
57 |
58 |
59 | radio : Address Style -> Model -> Style -> String -> List Html
60 | radio address model style name =
61 | [ input
62 | [ type' "radio"
63 | , checked (model.style == style)
64 | , on "change" targetChecked (\_ -> Signal.message address style)
65 | ]
66 | []
67 | , text name
68 | , br [] []
69 | ]
70 |
--------------------------------------------------------------------------------
/src/examples/merge-sort.elm:
--------------------------------------------------------------------------------
1 | import Graphics.Element exposing (..)
2 |
3 |
4 | main =
5 | show (mergesort [5,3,8,1,9,4,7])
6 |
7 |
8 | {-| Sorts a list of values by:
9 |
10 | 1. If the list has zero or one element, it is sorted!
11 | 2. If it is longer, split it into two sublists
12 | 3. Sort those sublists
13 | 4. Merge these sorted sublists together
14 |
15 | -}
16 | mergesort : List comparable -> List comparable
17 | mergesort list =
18 | case list of
19 | [] ->
20 | list
21 |
22 | [_] ->
23 | list
24 |
25 | _ ->
26 | let
27 | (xs, ys) = split list
28 | in
29 | merge (mergesort xs) (mergesort ys)
30 |
31 |
32 | {-| Split a list into two sublists of nearly equal length.
33 |
34 | split [1,2,3,4,5,6] == ([2,4,6], [1,3,5])
35 |
36 | -}
37 | split : List a -> (List a, List a)
38 | split list =
39 | case list of
40 | [] ->
41 | ([], [])
42 |
43 | x :: rest ->
44 | let
45 | (xs, ys) = split rest
46 | in
47 | (ys, x :: xs)
48 |
49 |
50 | {-| Given two sorted lists, merge them together into a single
51 | sorted list.
52 |
53 | merge [1,4,9] [2,3,5] == [1,2,3,4,5,9]
54 |
55 | -}
56 | merge : List comparable -> List comparable -> List comparable
57 | merge xs ys =
58 | case (xs, ys) of
59 | (x :: xs', y :: ys') ->
60 | if x < y
61 | then x :: merge xs' ys
62 | else y :: merge xs ys'
63 |
64 | ([], rest) ->
65 | rest
66 |
67 | (rest, []) ->
68 | rest
69 |
70 |
--------------------------------------------------------------------------------
/resources/highlight/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2006, Ivan Sagalaev
2 | All rights reserved.
3 | Redistribution and use in source and binary forms, with or without
4 | modification, are permitted provided that the following conditions are met:
5 |
6 | * Redistributions of source code must retain the above copyright
7 | notice, this list of conditions and the following disclaimer.
8 | * Redistributions in binary form must reproduce the above copyright
9 | notice, this list of conditions and the following disclaimer in the
10 | documentation and/or other materials provided with the distribution.
11 | * Neither the name of highlight.js nor the names of its contributors
12 | may be used to endorse or promote products derived from this software
13 | without specific prior written permission.
14 |
15 | THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
16 | EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
18 | DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
25 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/cobalt.css:
--------------------------------------------------------------------------------
1 | .cm-s-cobalt.CodeMirror { background: #002240; color: white; }
2 | .cm-s-cobalt div.CodeMirror-selected { background: #b36539 !important; }
3 | .cm-s-cobalt.CodeMirror ::selection { background: rgba(179, 101, 57, .99); }
4 | .cm-s-cobalt.CodeMirror ::-moz-selection { background: rgba(179, 101, 57, .99); }
5 | .cm-s-cobalt .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
6 | .cm-s-cobalt .CodeMirror-guttermarker { color: #ffee80; }
7 | .cm-s-cobalt .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
8 | .cm-s-cobalt .CodeMirror-linenumber { color: #d0d0d0; }
9 | .cm-s-cobalt .CodeMirror-cursor { border-left: 1px solid white !important; }
10 |
11 | .cm-s-cobalt span.cm-comment { color: #08f; }
12 | .cm-s-cobalt span.cm-atom { color: #845dc4; }
13 | .cm-s-cobalt span.cm-number, .cm-s-cobalt span.cm-attribute { color: #ff80e1; }
14 | .cm-s-cobalt span.cm-keyword { color: #ffee80; }
15 | .cm-s-cobalt span.cm-string { color: #3ad900; }
16 | .cm-s-cobalt span.cm-meta { color: #ff9d00; }
17 | .cm-s-cobalt span.cm-variable-2, .cm-s-cobalt span.cm-tag { color: #9effff; }
18 | .cm-s-cobalt span.cm-variable-3, .cm-s-cobalt span.cm-def { color: white; }
19 | .cm-s-cobalt span.cm-bracket { color: #d8d8d8; }
20 | .cm-s-cobalt span.cm-builtin, .cm-s-cobalt span.cm-special { color: #ff9e59; }
21 | .cm-s-cobalt span.cm-link { color: #845dc4; }
22 | .cm-s-cobalt span.cm-error { color: #9d1e15; }
23 |
24 | .cm-s-cobalt .CodeMirror-activeline-background {background: #002D57 !important;}
25 | .cm-s-cobalt .CodeMirror-matchingbracket {outline:1px solid grey;color:white !important}
26 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2012-2015 Evan Czaplicki
2 |
3 | All rights reserved.
4 |
5 | Redistribution and use in source and binary forms, with or without
6 | modification, are permitted provided that the following conditions are met:
7 |
8 | * Redistributions of source code must retain the above copyright
9 | notice, this list of conditions and the following disclaimer.
10 |
11 | * Redistributions in binary form must reproduce the above
12 | copyright notice, this list of conditions and the following
13 | disclaimer in the documentation and/or other materials provided
14 | with the distribution.
15 |
16 | * Neither the name of Evan Czaplicki nor the names of other
17 | contributors may be used to endorse or promote products derived
18 | from this software without specific prior written permission.
19 |
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
21 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
22 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
23 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
24 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
25 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
26 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
27 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
28 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
29 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
30 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
31 |
--------------------------------------------------------------------------------
/src/examples/length.elm:
--------------------------------------------------------------------------------
1 |
2 | import Graphics.Element exposing (show)
3 |
4 |
5 | main =
6 | show (length [1..9])
7 |
8 |
9 | {-| Figure out the length of any list. To find the length of
10 | list [6,6,6] we need to know that that is pretty syntax for
11 | the expression (6 :: (6 :: (6 :: []))) where the :: operator
12 | is putting an element on the front of a list. Evaluation
13 | looks like this:
14 |
15 | length (6 :: (6 :: (6 :: [])))
16 | 1 + (length (6 :: (6 :: [])))
17 | 1 + (1 + (length (6 :: [])))
18 | 1 + (1 + (1 + length []))
19 | 1 + (1 + (1 + 0))
20 | 1 + (1 + 1)
21 | 1 + 2
22 | 3
23 |
24 | Stepping through evaluation like this can be really helpful
25 | for building intuition about recursive functions.
26 | -}
27 | length : List a -> Int
28 | length list =
29 | case list of
30 | [] ->
31 | 0
32 |
33 | first :: rest ->
34 | 1 + length rest
35 |
36 |
37 | {- EXPLANATION
38 |
39 | The 'length' function figures out the length of any list. We
40 | use the 'case' keyword to "pattern match" on the structure of
41 | the list.
42 |
43 | Lists can either be empty [] or a pair of an element and a
44 | sublist like (1 :: []) or (1 :: (2 :: []))
45 |
46 | To write 'length' we have two cases to think about:
47 |
48 | 1. If the list is empty, the length is zero.
49 | 2. If the list is not empty, the length is 1 more than
50 | however long the rest of the list is.
51 |
52 | When you write a function like 'length', always pretend that
53 | you already succeeded. So when we need to know how long the
54 | rest of the list is, we can pretend 'length' is already done
55 | and use it!
56 | -}
57 |
--------------------------------------------------------------------------------
/src/examples/triangle.elm:
--------------------------------------------------------------------------------
1 | x = 32
2 | {--
3 | import Graphics.Element exposing (..)
4 | import Math.Vector3 exposing (..)
5 | import Math.Matrix4 exposing (..)
6 | import Time exposing (..)
7 | import WebGL exposing (..)
8 |
9 |
10 | -- Create a mesh with two triangles
11 |
12 | type alias Vertex = { position : Vec3, color : Vec3 }
13 |
14 |
15 | mesh : List (Triangle Vertex)
16 | mesh =
17 | [ ( Vertex (vec3 0 0 0) (vec3 1 0 0)
18 | , Vertex (vec3 1 1 0) (vec3 0 1 0)
19 | , Vertex (vec3 1 -1 0) (vec3 0 0 1)
20 | )
21 | ]
22 |
23 |
24 | -- Create the scene
25 |
26 | main : Signal Element
27 | main =
28 | Signal.map view (Signal.foldp (+) 0 (fps 30))
29 |
30 |
31 | view : Float -> Element
32 | view t =
33 | webgl (400,400)
34 | [ entity vertexShader fragmentShader mesh { perspective = perspective (t / 1000) } ]
35 |
36 |
37 | perspective : Float -> Mat4
38 | perspective t =
39 | mul (makePerspective 45 1 0.01 100)
40 | (makeLookAt (vec3 (4 * cos t) 0 (4 * sin t)) (vec3 0 0 0) (vec3 0 1 0))
41 |
42 |
43 | -- Shaders
44 |
45 | vertexShader : Shader { attr | position:Vec3, color:Vec3 } { unif | perspective:Mat4 } { vcolor:Vec3 }
46 | vertexShader = [glsl|
47 |
48 | attribute vec3 position;
49 | attribute vec3 color;
50 | uniform mat4 perspective;
51 | varying vec3 vcolor;
52 |
53 | void main () {
54 | gl_Position = perspective * vec4(position, 1.0);
55 | vcolor = color;
56 | }
57 |
58 | |]
59 |
60 |
61 | fragmentShader : Shader {} u { vcolor:Vec3 }
62 | fragmentShader = [glsl|
63 |
64 | precision mediump float;
65 | varying vec3 vcolor;
66 |
67 | void main () {
68 | gl_FragColor = vec4(vcolor, 1.0);
69 | }
70 |
71 | |]
72 | --}
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/monokai.css:
--------------------------------------------------------------------------------
1 | /* Based on Sublime Text's Monokai theme */
2 |
3 | .cm-s-monokai.CodeMirror {background: #272822; color: #f8f8f2;}
4 | .cm-s-monokai div.CodeMirror-selected {background: #49483E !important;}
5 | .cm-s-monokai.CodeMirror ::selection { background: rgba(73, 72, 62, .99); }
6 | .cm-s-monokai.CodeMirror ::-moz-selection { background: rgba(73, 72, 62, .99); }
7 | .cm-s-monokai .CodeMirror-gutters {background: #272822; border-right: 0px;}
8 | .cm-s-monokai .CodeMirror-guttermarker { color: white; }
9 | .cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
10 | .cm-s-monokai .CodeMirror-linenumber {color: #d0d0d0;}
11 | .cm-s-monokai .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}
12 |
13 | .cm-s-monokai span.cm-comment {color: #75715e;}
14 | .cm-s-monokai span.cm-atom {color: #ae81ff;}
15 | .cm-s-monokai span.cm-number {color: #ae81ff;}
16 |
17 | .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {color: #a6e22e;}
18 | .cm-s-monokai span.cm-keyword {color: #f92672;}
19 | .cm-s-monokai span.cm-string {color: #e6db74;}
20 |
21 | .cm-s-monokai span.cm-variable {color: #a6e22e;}
22 | .cm-s-monokai span.cm-variable-2 {color: #9effff;}
23 | .cm-s-monokai span.cm-def {color: #fd971f;}
24 | .cm-s-monokai span.cm-bracket {color: #f8f8f2;}
25 | .cm-s-monokai span.cm-tag {color: #f92672;}
26 | .cm-s-monokai span.cm-link {color: #ae81ff;}
27 | .cm-s-monokai span.cm-error {background: #f92672; color: #f8f8f0;}
28 |
29 | .cm-s-monokai .CodeMirror-activeline-background {background: #373831 !important;}
30 | .cm-s-monokai .CodeMirror-matchingbracket {
31 | text-decoration: underline;
32 | color: white !important;
33 | }
34 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/rubyblue.css:
--------------------------------------------------------------------------------
1 | .cm-s-rubyblue.CodeMirror { background: #112435; color: white; }
2 | .cm-s-rubyblue div.CodeMirror-selected { background: #38566F !important; }
3 | .cm-s-rubyblue.CodeMirror ::selection { background: rgba(56, 86, 111, 0.99); }
4 | .cm-s-rubyblue.CodeMirror ::-moz-selection { background: rgba(56, 86, 111, 0.99); }
5 | .cm-s-rubyblue .CodeMirror-gutters { background: #1F4661; border-right: 7px solid #3E7087; }
6 | .cm-s-rubyblue .CodeMirror-guttermarker { color: white; }
7 | .cm-s-rubyblue .CodeMirror-guttermarker-subtle { color: #3E7087; }
8 | .cm-s-rubyblue .CodeMirror-linenumber { color: white; }
9 | .cm-s-rubyblue .CodeMirror-cursor { border-left: 1px solid white !important; }
10 |
11 | .cm-s-rubyblue span.cm-comment { color: #999; font-style:italic; line-height: 1em; }
12 | .cm-s-rubyblue span.cm-atom { color: #F4C20B; }
13 | .cm-s-rubyblue span.cm-number, .cm-s-rubyblue span.cm-attribute { color: #82C6E0; }
14 | .cm-s-rubyblue span.cm-keyword { color: #F0F; }
15 | .cm-s-rubyblue span.cm-string { color: #F08047; }
16 | .cm-s-rubyblue span.cm-meta { color: #F0F; }
17 | .cm-s-rubyblue span.cm-variable-2, .cm-s-rubyblue span.cm-tag { color: #7BD827; }
18 | .cm-s-rubyblue span.cm-variable-3, .cm-s-rubyblue span.cm-def { color: white; }
19 | .cm-s-rubyblue span.cm-bracket { color: #F0F; }
20 | .cm-s-rubyblue span.cm-link { color: #F4C20B; }
21 | .cm-s-rubyblue span.CodeMirror-matchingbracket { color:#F0F !important; }
22 | .cm-s-rubyblue span.cm-builtin, .cm-s-rubyblue span.cm-special { color: #FF9D00; }
23 | .cm-s-rubyblue span.cm-error { color: #AF2018; }
24 |
25 | .cm-s-rubyblue .CodeMirror-activeline-background {background: #173047 !important;}
26 |
--------------------------------------------------------------------------------
/src/examples/boolean-expressions.elm:
--------------------------------------------------------------------------------
1 | {- OVERVIEW ------------------------------------------------------
2 |
3 | This code demonstrates a more advanced use of union types. Here we
4 | are creating an abstract representation of Boolean expressions and
5 | defining an evaluation strategy. These tasks are the first steps
6 | towards writing an interpreter for a programming language. We will
7 | see the following functions:
8 |
9 | Expr - an algebraic data type that represents
10 | simple boolean expressions.
11 |
12 | eval - recursively computes the value of a given
13 | boolean expression (Expr).
14 |
15 | Finally, we will see these functions in action with some examples.
16 |
17 | -----------------------------------------------------------------}
18 |
19 | import Graphics.Element exposing (..)
20 | import Text
21 |
22 |
23 | type Expr
24 | = T
25 | | F
26 | | Not Expr
27 | | And Expr Expr
28 | | Or Expr Expr
29 |
30 |
31 | eval : Expr -> Bool
32 | eval expression =
33 | case expression of
34 | T ->
35 | True
36 |
37 | F ->
38 | False
39 |
40 | Not expr ->
41 | not (eval expr)
42 |
43 | And leftExpr rightExpr ->
44 | eval leftExpr && eval rightExpr
45 |
46 | Or leftExpr rightExpr ->
47 | eval leftExpr || eval rightExpr
48 |
49 |
50 | e1 = T
51 | e2 = And T F
52 | e3 = Or e1 e2
53 | e4 = And (Not e2) e1
54 |
55 |
56 | main : Element
57 | main =
58 | flow down (List.map display [ e1, e2, e3, e4 ])
59 |
60 |
61 | display : Expr -> Element
62 | display expr =
63 | toString (eval expr) ++ " ⇐ " ++ toString expr
64 | |> Text.fromString
65 | |> Text.monospace
66 | |> leftAligned
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/night.css:
--------------------------------------------------------------------------------
1 | /* Loosely based on the Midnight Textmate theme */
2 |
3 | .cm-s-night.CodeMirror { background: #0a001f; color: #f8f8f8; }
4 | .cm-s-night div.CodeMirror-selected { background: #447 !important; }
5 | .cm-s-night.CodeMirror ::selection { background: rgba(68, 68, 119, .99); }
6 | .cm-s-night.CodeMirror ::-moz-selection { background: rgba(68, 68, 119, .99); }
7 | .cm-s-night .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
8 | .cm-s-night .CodeMirror-guttermarker { color: white; }
9 | .cm-s-night .CodeMirror-guttermarker-subtle { color: #bbb; }
10 | .cm-s-night .CodeMirror-linenumber { color: #f8f8f8; }
11 | .cm-s-night .CodeMirror-cursor { border-left: 1px solid white !important; }
12 |
13 | .cm-s-night span.cm-comment { color: #6900a1; }
14 | .cm-s-night span.cm-atom { color: #845dc4; }
15 | .cm-s-night span.cm-number, .cm-s-night span.cm-attribute { color: #ffd500; }
16 | .cm-s-night span.cm-keyword { color: #599eff; }
17 | .cm-s-night span.cm-string { color: #37f14a; }
18 | .cm-s-night span.cm-meta { color: #7678e2; }
19 | .cm-s-night span.cm-variable-2, .cm-s-night span.cm-tag { color: #99b2ff; }
20 | .cm-s-night span.cm-variable-3, .cm-s-night span.cm-def { color: white; }
21 | .cm-s-night span.cm-bracket { color: #8da6ce; }
22 | .cm-s-night span.cm-comment { color: #6900a1; }
23 | .cm-s-night span.cm-builtin, .cm-s-night span.cm-special { color: #ff9e59; }
24 | .cm-s-night span.cm-link { color: #845dc4; }
25 | .cm-s-night span.cm-error { color: #9d1e15; }
26 |
27 | .cm-s-night .CodeMirror-activeline-background {background: #1C005A !important;}
28 | .cm-s-night .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
29 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/the-matrix.css:
--------------------------------------------------------------------------------
1 | .cm-s-the-matrix.CodeMirror { background: #000000; color: #00FF00; }
2 | .cm-s-the-matrix div.CodeMirror-selected { background: #2D2D2D !important; }
3 | .cm-s-the-matrix.CodeMirror ::selection { background: rgba(45, 45, 45, 0.99); }
4 | .cm-s-the-matrix.CodeMirror ::-moz-selection { background: rgba(45, 45, 45, 0.99); }
5 | .cm-s-the-matrix .CodeMirror-gutters { background: #060; border-right: 2px solid #00FF00; }
6 | .cm-s-the-matrix .CodeMirror-guttermarker { color: #0f0; }
7 | .cm-s-the-matrix .CodeMirror-guttermarker-subtle { color: white; }
8 | .cm-s-the-matrix .CodeMirror-linenumber { color: #FFFFFF; }
9 | .cm-s-the-matrix .CodeMirror-cursor { border-left: 1px solid #00FF00 !important; }
10 |
11 | .cm-s-the-matrix span.cm-keyword {color: #008803; font-weight: bold;}
12 | .cm-s-the-matrix span.cm-atom {color: #3FF;}
13 | .cm-s-the-matrix span.cm-number {color: #FFB94F;}
14 | .cm-s-the-matrix span.cm-def {color: #99C;}
15 | .cm-s-the-matrix span.cm-variable {color: #F6C;}
16 | .cm-s-the-matrix span.cm-variable-2 {color: #C6F;}
17 | .cm-s-the-matrix span.cm-variable-3 {color: #96F;}
18 | .cm-s-the-matrix span.cm-property {color: #62FFA0;}
19 | .cm-s-the-matrix span.cm-operator {color: #999}
20 | .cm-s-the-matrix span.cm-comment {color: #CCCCCC;}
21 | .cm-s-the-matrix span.cm-string {color: #39C;}
22 | .cm-s-the-matrix span.cm-meta {color: #C9F;}
23 | .cm-s-the-matrix span.cm-qualifier {color: #FFF700;}
24 | .cm-s-the-matrix span.cm-builtin {color: #30a;}
25 | .cm-s-the-matrix span.cm-bracket {color: #cc7;}
26 | .cm-s-the-matrix span.cm-tag {color: #FFBD40;}
27 | .cm-s-the-matrix span.cm-attribute {color: #FFF700;}
28 | .cm-s-the-matrix span.cm-error {color: #FF0000;}
29 |
30 | .cm-s-the-matrix .CodeMirror-activeline-background {background: #040;}
31 |
--------------------------------------------------------------------------------
/src/examples/checkboxes.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (..)
2 | import Html.Attributes exposing (..)
3 | import Html.Events exposing (on, targetChecked)
4 | import Signal exposing (Address)
5 | import StartApp.Simple as StartApp
6 |
7 |
8 | main =
9 | StartApp.start { model = initialModel, view = view, update = update }
10 |
11 |
12 | -- MODEL
13 |
14 | type alias Model =
15 | { red : Bool
16 | , underline : Bool
17 | , bold : Bool
18 | }
19 |
20 |
21 | initialModel =
22 | Model False False True
23 |
24 |
25 | -- UPDATE
26 |
27 | type Action
28 | = Red Bool
29 | | Underline Bool
30 | | Bold Bool
31 |
32 |
33 | update action model =
34 | case action of
35 | Red bool ->
36 | { model | red = bool }
37 |
38 | Underline bool ->
39 | { model | underline = bool }
40 |
41 | Bold bool ->
42 | { model | bold = bool }
43 |
44 |
45 | -- VIEW
46 |
47 | view address model =
48 | div [] <|
49 | span [toStyle model] [text "Hello, how are you?!"]
50 | :: br [] []
51 | :: checkbox address model.red Red "red"
52 | ++ checkbox address model.underline Underline "underline"
53 | ++ checkbox address model.bold Bold "bold"
54 |
55 |
56 | toStyle model =
57 | style
58 | [ ("color", if model.red then "red" else "black")
59 | , ("text-decoration", if model.underline then "underline" else "none")
60 | , ("font-weight", if model.bold then "bold" else "normal")
61 | ]
62 |
63 |
64 | checkbox : Address Action -> Bool -> (Bool -> Action) -> String -> List Html
65 | checkbox address isChecked tag name =
66 | [ input
67 | [ type' "checkbox"
68 | , checked isChecked
69 | , on "change" targetChecked (Signal.message address << tag)
70 | ]
71 | []
72 | , text name
73 | , br [] []
74 | ]
75 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/colorforth.css:
--------------------------------------------------------------------------------
1 | .cm-s-colorforth.CodeMirror { background: #000000; color: #f8f8f8; }
2 | .cm-s-colorforth .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
3 | .cm-s-colorforth .CodeMirror-guttermarker { color: #FFBD40; }
4 | .cm-s-colorforth .CodeMirror-guttermarker-subtle { color: #78846f; }
5 | .cm-s-colorforth .CodeMirror-linenumber { color: #bababa; }
6 | .cm-s-colorforth .CodeMirror-cursor { border-left: 1px solid white !important; }
7 |
8 | .cm-s-colorforth span.cm-comment { color: #ededed; }
9 | .cm-s-colorforth span.cm-def { color: #ff1c1c; font-weight:bold; }
10 | .cm-s-colorforth span.cm-keyword { color: #ffd900; }
11 | .cm-s-colorforth span.cm-builtin { color: #00d95a; }
12 | .cm-s-colorforth span.cm-variable { color: #73ff00; }
13 | .cm-s-colorforth span.cm-string { color: #007bff; }
14 | .cm-s-colorforth span.cm-number { color: #00c4ff; }
15 | .cm-s-colorforth span.cm-atom { color: #606060; }
16 |
17 | .cm-s-colorforth span.cm-variable-2 { color: #EEE; }
18 | .cm-s-colorforth span.cm-variable-3 { color: #DDD; }
19 | .cm-s-colorforth span.cm-property {}
20 | .cm-s-colorforth span.cm-operator {}
21 |
22 | .cm-s-colorforth span.cm-meta { color: yellow; }
23 | .cm-s-colorforth span.cm-qualifier { color: #FFF700; }
24 | .cm-s-colorforth span.cm-bracket { color: #cc7; }
25 | .cm-s-colorforth span.cm-tag { color: #FFBD40; }
26 | .cm-s-colorforth span.cm-attribute { color: #FFF700; }
27 | .cm-s-colorforth span.cm-error { color: #f00; }
28 |
29 | .cm-s-colorforth .CodeMirror-selected { background: #333d53 !important; }
30 |
31 | .cm-s-colorforth span.cm-compilation { background: rgba(255, 255, 255, 0.12); }
32 |
33 | .cm-s-colorforth .CodeMirror-activeline-background {background: #253540 !important;}
34 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/blackboard.css:
--------------------------------------------------------------------------------
1 | /* Port of TextMate's Blackboard theme */
2 |
3 | .cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; }
4 | .cm-s-blackboard .CodeMirror-selected { background: #253B76 !important; }
5 | .cm-s-blackboard.CodeMirror ::selection { background: rgba(37, 59, 118, .99); }
6 | .cm-s-blackboard.CodeMirror ::-moz-selection { background: rgba(37, 59, 118, .99); }
7 | .cm-s-blackboard .CodeMirror-gutters { background: #0C1021; border-right: 0; }
8 | .cm-s-blackboard .CodeMirror-guttermarker { color: #FBDE2D; }
9 | .cm-s-blackboard .CodeMirror-guttermarker-subtle { color: #888; }
10 | .cm-s-blackboard .CodeMirror-linenumber { color: #888; }
11 | .cm-s-blackboard .CodeMirror-cursor { border-left: 1px solid #A7A7A7 !important; }
12 |
13 | .cm-s-blackboard .cm-keyword { color: #FBDE2D; }
14 | .cm-s-blackboard .cm-atom { color: #D8FA3C; }
15 | .cm-s-blackboard .cm-number { color: #D8FA3C; }
16 | .cm-s-blackboard .cm-def { color: #8DA6CE; }
17 | .cm-s-blackboard .cm-variable { color: #FF6400; }
18 | .cm-s-blackboard .cm-operator { color: #FBDE2D;}
19 | .cm-s-blackboard .cm-comment { color: #AEAEAE; }
20 | .cm-s-blackboard .cm-string { color: #61CE3C; }
21 | .cm-s-blackboard .cm-string-2 { color: #61CE3C; }
22 | .cm-s-blackboard .cm-meta { color: #D8FA3C; }
23 | .cm-s-blackboard .cm-builtin { color: #8DA6CE; }
24 | .cm-s-blackboard .cm-tag { color: #8DA6CE; }
25 | .cm-s-blackboard .cm-attribute { color: #8DA6CE; }
26 | .cm-s-blackboard .cm-header { color: #FF6400; }
27 | .cm-s-blackboard .cm-hr { color: #AEAEAE; }
28 | .cm-s-blackboard .cm-link { color: #8DA6CE; }
29 | .cm-s-blackboard .cm-error { background: #9D1E15; color: #F8F8F8; }
30 |
31 | .cm-s-blackboard .CodeMirror-activeline-background {background: #3C3636 !important;}
32 | .cm-s-blackboard .CodeMirror-matchingbracket {outline:1px solid grey;color:white !important}
--------------------------------------------------------------------------------
/src/backend/Init/Pages.hs:
--------------------------------------------------------------------------------
1 | module Init.Pages (init) where
2 |
3 | import Elm.Utils ((|>))
4 | import Prelude hiding (init)
5 | import System.Directory (getDirectoryContents)
6 | import System.FilePath ((), (<.>), dropExtension, hasExtension, joinPath, takeExtension)
7 |
8 | import qualified Init.FileTree as FT
9 | import Init.Helpers (makeWithStyle, write)
10 |
11 |
12 | init :: IO [(FilePath, FilePath)]
13 | init =
14 | do files <- getFiles ("src" "pages") ".elm"
15 |
16 | let numFiles = length files
17 | result <- mapM (initFile numFiles) (zip [1..] files)
18 |
19 | putStrLn "done\n"
20 | return result
21 |
22 |
23 | initFile :: Int -> (Int, String) -> IO (String, FilePath)
24 | initFile numFiles (index, name) =
25 | do write $ "\rSetting up pages (" ++ show index ++ " of " ++ show numFiles ++ ") "
26 |
27 | let input = "src" "pages" name <.> "elm"
28 | let output = FT.file ["pages"] name "html"
29 |
30 | makeWithStyle input output
31 |
32 | return (name, output)
33 |
34 |
35 | -- COLLECT FILES
36 |
37 | getFiles :: FilePath -> String -> IO [FilePath]
38 | getFiles root ext =
39 | getFilesHelp root ext []
40 |
41 |
42 | getFilesHelp :: FilePath -> String -> [FilePath] -> IO [FilePath]
43 | getFilesHelp root ext dirs =
44 | do let directory = root joinPath dirs
45 | contents <- getDirectoryContents directory
46 |
47 | let files =
48 | contents
49 | |> filter (\name -> ext == takeExtension name)
50 | |> map (joinPath . rightCons dirs . dropExtension)
51 |
52 | let subDirs =
53 | filter (not . hasExtension) contents
54 |
55 | subFiles <- mapM (getFilesHelp root ext . rightCons dirs) subDirs
56 |
57 | return (files ++ concat subFiles)
58 | where
59 | rightCons xs x =
60 | xs ++ [x]
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/3024-day.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Name: 3024 day
4 | Author: Jan T. Sott (http://github.com/idleberg)
5 |
6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
8 |
9 | */
10 |
11 | .cm-s-3024-day.CodeMirror {background: #f7f7f7; color: #3a3432;}
12 | .cm-s-3024-day div.CodeMirror-selected {background: #d6d5d4 !important;}
13 | .cm-s-3024-day.CodeMirror ::selection { background: #d6d5d4; }
14 | .cm-s-3024-day.CodeMirror ::-moz-selection { background: #d9d9d9; }
15 |
16 | .cm-s-3024-day .CodeMirror-gutters {background: #f7f7f7; border-right: 0px;}
17 | .cm-s-3024-day .CodeMirror-guttermarker { color: #db2d20; }
18 | .cm-s-3024-day .CodeMirror-guttermarker-subtle { color: #807d7c; }
19 | .cm-s-3024-day .CodeMirror-linenumber {color: #807d7c;}
20 |
21 | .cm-s-3024-day .CodeMirror-cursor {border-left: 1px solid #5c5855 !important;}
22 |
23 | .cm-s-3024-day span.cm-comment {color: #cdab53;}
24 | .cm-s-3024-day span.cm-atom {color: #a16a94;}
25 | .cm-s-3024-day span.cm-number {color: #a16a94;}
26 |
27 | .cm-s-3024-day span.cm-property, .cm-s-3024-day span.cm-attribute {color: #01a252;}
28 | .cm-s-3024-day span.cm-keyword {color: #db2d20;}
29 | .cm-s-3024-day span.cm-string {color: #fded02;}
30 |
31 | .cm-s-3024-day span.cm-variable {color: #01a252;}
32 | .cm-s-3024-day span.cm-variable-2 {color: #01a0e4;}
33 | .cm-s-3024-day span.cm-def {color: #e8bbd0;}
34 | .cm-s-3024-day span.cm-bracket {color: #3a3432;}
35 | .cm-s-3024-day span.cm-tag {color: #db2d20;}
36 | .cm-s-3024-day span.cm-link {color: #a16a94;}
37 | .cm-s-3024-day span.cm-error {background: #db2d20; color: #5c5855;}
38 |
39 | .cm-s-3024-day .CodeMirror-activeline-background {background: #e8f2ff !important;}
40 | .cm-s-3024-day .CodeMirror-matchingbracket { text-decoration: underline; color: #a16a94 !important;}
41 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/tomorrow-night-bright.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Name: Tomorrow Night - Bright
4 | Author: Chris Kempson
5 |
6 | Port done by Gerard Braad
7 |
8 | */
9 |
10 | .cm-s-tomorrow-night-bright.CodeMirror {background: #000000; color: #eaeaea;}
11 | .cm-s-tomorrow-night-bright div.CodeMirror-selected {background: #424242 !important;}
12 | .cm-s-tomorrow-night-bright .CodeMirror-gutters {background: #000000; border-right: 0px;}
13 | .cm-s-tomorrow-night-bright .CodeMirror-guttermarker { color: #e78c45; }
14 | .cm-s-tomorrow-night-bright .CodeMirror-guttermarker-subtle { color: #777; }
15 | .cm-s-tomorrow-night-bright .CodeMirror-linenumber {color: #424242;}
16 | .cm-s-tomorrow-night-bright .CodeMirror-cursor {border-left: 1px solid #6A6A6A !important;}
17 |
18 | .cm-s-tomorrow-night-bright span.cm-comment {color: #d27b53;}
19 | .cm-s-tomorrow-night-bright span.cm-atom {color: #a16a94;}
20 | .cm-s-tomorrow-night-bright span.cm-number {color: #a16a94;}
21 |
22 | .cm-s-tomorrow-night-bright span.cm-property, .cm-s-tomorrow-night-bright span.cm-attribute {color: #99cc99;}
23 | .cm-s-tomorrow-night-bright span.cm-keyword {color: #d54e53;}
24 | .cm-s-tomorrow-night-bright span.cm-string {color: #e7c547;}
25 |
26 | .cm-s-tomorrow-night-bright span.cm-variable {color: #b9ca4a;}
27 | .cm-s-tomorrow-night-bright span.cm-variable-2 {color: #7aa6da;}
28 | .cm-s-tomorrow-night-bright span.cm-def {color: #e78c45;}
29 | .cm-s-tomorrow-night-bright span.cm-bracket {color: #eaeaea;}
30 | .cm-s-tomorrow-night-bright span.cm-tag {color: #d54e53;}
31 | .cm-s-tomorrow-night-bright span.cm-link {color: #a16a94;}
32 | .cm-s-tomorrow-night-bright span.cm-error {background: #d54e53; color: #6A6A6A;}
33 |
34 | .cm-s-tomorrow-night-bright .CodeMirror-activeline-background {background: #2a2a2a !important;}
35 | .cm-s-tomorrow-night-bright .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
36 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/paraiso-dark.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Name: Paraíso (Dark)
4 | Author: Jan T. Sott
5 |
6 | Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror)
7 | Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
8 |
9 | */
10 |
11 | .cm-s-paraiso-dark.CodeMirror {background: #2f1e2e; color: #b9b6b0;}
12 | .cm-s-paraiso-dark div.CodeMirror-selected {background: #41323f !important;}
13 | .cm-s-paraiso-dark.CodeMirror ::selection { background: rgba(65, 50, 63, .99); }
14 | .cm-s-paraiso-dark.CodeMirror ::-moz-selection { background: rgba(65, 50, 63, .99); }
15 | .cm-s-paraiso-dark .CodeMirror-gutters {background: #2f1e2e; border-right: 0px;}
16 | .cm-s-paraiso-dark .CodeMirror-guttermarker { color: #ef6155; }
17 | .cm-s-paraiso-dark .CodeMirror-guttermarker-subtle { color: #776e71; }
18 | .cm-s-paraiso-dark .CodeMirror-linenumber {color: #776e71;}
19 | .cm-s-paraiso-dark .CodeMirror-cursor {border-left: 1px solid #8d8687 !important;}
20 |
21 | .cm-s-paraiso-dark span.cm-comment {color: #e96ba8;}
22 | .cm-s-paraiso-dark span.cm-atom {color: #815ba4;}
23 | .cm-s-paraiso-dark span.cm-number {color: #815ba4;}
24 |
25 | .cm-s-paraiso-dark span.cm-property, .cm-s-paraiso-dark span.cm-attribute {color: #48b685;}
26 | .cm-s-paraiso-dark span.cm-keyword {color: #ef6155;}
27 | .cm-s-paraiso-dark span.cm-string {color: #fec418;}
28 |
29 | .cm-s-paraiso-dark span.cm-variable {color: #48b685;}
30 | .cm-s-paraiso-dark span.cm-variable-2 {color: #06b6ef;}
31 | .cm-s-paraiso-dark span.cm-def {color: #f99b15;}
32 | .cm-s-paraiso-dark span.cm-bracket {color: #b9b6b0;}
33 | .cm-s-paraiso-dark span.cm-tag {color: #ef6155;}
34 | .cm-s-paraiso-dark span.cm-link {color: #815ba4;}
35 | .cm-s-paraiso-dark span.cm-error {background: #ef6155; color: #8d8687;}
36 |
37 | .cm-s-paraiso-dark .CodeMirror-activeline-background {background: #4D344A !important;}
38 | .cm-s-paraiso-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
39 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/paraiso-light.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Name: Paraíso (Light)
4 | Author: Jan T. Sott
5 |
6 | Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror)
7 | Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
8 |
9 | */
10 |
11 | .cm-s-paraiso-light.CodeMirror {background: #e7e9db; color: #41323f;}
12 | .cm-s-paraiso-light div.CodeMirror-selected {background: #b9b6b0 !important;}
13 | .cm-s-paraiso-light.CodeMirror ::selection { background: #b9b6b0; }
14 | .cm-s-paraiso-light.CodeMirror ::-moz-selection { background: #b9b6b0; }
15 | .cm-s-paraiso-light .CodeMirror-gutters {background: #e7e9db; border-right: 0px;}
16 | .cm-s-paraiso-light .CodeMirror-guttermarker { color: black; }
17 | .cm-s-paraiso-light .CodeMirror-guttermarker-subtle { color: #8d8687; }
18 | .cm-s-paraiso-light .CodeMirror-linenumber {color: #8d8687;}
19 | .cm-s-paraiso-light .CodeMirror-cursor {border-left: 1px solid #776e71 !important;}
20 |
21 | .cm-s-paraiso-light span.cm-comment {color: #e96ba8;}
22 | .cm-s-paraiso-light span.cm-atom {color: #815ba4;}
23 | .cm-s-paraiso-light span.cm-number {color: #815ba4;}
24 |
25 | .cm-s-paraiso-light span.cm-property, .cm-s-paraiso-light span.cm-attribute {color: #48b685;}
26 | .cm-s-paraiso-light span.cm-keyword {color: #ef6155;}
27 | .cm-s-paraiso-light span.cm-string {color: #fec418;}
28 |
29 | .cm-s-paraiso-light span.cm-variable {color: #48b685;}
30 | .cm-s-paraiso-light span.cm-variable-2 {color: #06b6ef;}
31 | .cm-s-paraiso-light span.cm-def {color: #f99b15;}
32 | .cm-s-paraiso-light span.cm-bracket {color: #41323f;}
33 | .cm-s-paraiso-light span.cm-tag {color: #ef6155;}
34 | .cm-s-paraiso-light span.cm-link {color: #815ba4;}
35 | .cm-s-paraiso-light span.cm-error {background: #ef6155; color: #776e71;}
36 |
37 | .cm-s-paraiso-light .CodeMirror-activeline-background {background: #CFD1C4 !important;}
38 | .cm-s-paraiso-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
39 |
--------------------------------------------------------------------------------
/src/pages/install.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (..)
2 | import Html.Attributes exposing (..)
3 | import Markdown
4 |
5 | import Center
6 | import TopBar
7 |
8 |
9 | port title : String
10 | port title =
11 | "Install Elm"
12 |
13 |
14 | main =
15 | div []
16 | [ TopBar.topBar "install"
17 | , Center.markdown "600px" install
18 | ]
19 |
20 |
21 |
22 | install = """
23 |
24 | # Install
25 |
26 | * Mac — [installer](http://install.elm-lang.org/Elm-Platform-0.15.1.pkg)
27 | * Windows — [installer](http://install.elm-lang.org/Elm-Platform-0.15.1.exe)
28 | * Anywhere — [build from source][build]
29 |
30 | [npm]: https://www.npmjs.com/package/elm
31 | [build]: https://github.com/elm-lang/elm-platform
32 |
33 | ## Syntax Highlighting
34 |
35 | * [Sublime Text](https://github.com/deadfoxygrandpa/Elm.tmLanguage)
36 | * [Atom](https://atom.io/packages/language-elm)
37 | * [Emacs](https://github.com/jcollard/elm-mode)
38 | * [Vim](https://github.com/lambdatoast/elm.vim)
39 |
40 |
41 | ## Help
42 |
43 | If you are stuck, check to see if anyone has had [a similar issue][elm-platform].
44 | If not, open a new issue or email [the list][group] or ask a question in the
45 | [#elm IRC channel][irc].
46 |
47 | [elm-platform]: https://github.com/elm-lang/elm-platform/issues
48 | [group]: https://groups.google.com/forum/?fromgroups#!forum/elm-discuss
49 | [irc]: http://webchat.freenode.net/?channels=elm
50 |
51 | ## Upgrade / Uninstall
52 |
53 | To upgrade to a newer version of Elm, run the installer again. They safely
54 | overwrite old executables so your machine is in a consistent state.
55 |
56 | The Windows installer comes bundled with an uninstall option. To uninstall on
57 | Mac, run [this script][uninstall]. If you built from source, delete everything
58 | and change your PATH so that it no longer refers to those executables.
59 |
60 | [uninstall]: https://github.com/elm-lang/elm-platform/blob/master/installers/mac/helper-scripts/uninstall.sh
61 |
62 | """
63 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/3024-night.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Name: 3024 night
4 | Author: Jan T. Sott (http://github.com/idleberg)
5 |
6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
8 |
9 | */
10 |
11 | .cm-s-3024-night.CodeMirror {background: #090300; color: #d6d5d4;}
12 | .cm-s-3024-night div.CodeMirror-selected {background: #3a3432 !important;}
13 | .cm-s-3024-night.CodeMirror ::selection { background: rgba(58, 52, 50, .99); }
14 | .cm-s-3024-night.CodeMirror ::-moz-selection { background: rgba(58, 52, 50, .99); }
15 | .cm-s-3024-night .CodeMirror-gutters {background: #090300; border-right: 0px;}
16 | .cm-s-3024-night .CodeMirror-guttermarker { color: #db2d20; }
17 | .cm-s-3024-night .CodeMirror-guttermarker-subtle { color: #5c5855; }
18 | .cm-s-3024-night .CodeMirror-linenumber {color: #5c5855;}
19 |
20 | .cm-s-3024-night .CodeMirror-cursor {border-left: 1px solid #807d7c !important;}
21 |
22 | .cm-s-3024-night span.cm-comment {color: #cdab53;}
23 | .cm-s-3024-night span.cm-atom {color: #a16a94;}
24 | .cm-s-3024-night span.cm-number {color: #a16a94;}
25 |
26 | .cm-s-3024-night span.cm-property, .cm-s-3024-night span.cm-attribute {color: #01a252;}
27 | .cm-s-3024-night span.cm-keyword {color: #db2d20;}
28 | .cm-s-3024-night span.cm-string {color: #fded02;}
29 |
30 | .cm-s-3024-night span.cm-variable {color: #01a252;}
31 | .cm-s-3024-night span.cm-variable-2 {color: #01a0e4;}
32 | .cm-s-3024-night span.cm-def {color: #e8bbd0;}
33 | .cm-s-3024-night span.cm-bracket {color: #d6d5d4;}
34 | .cm-s-3024-night span.cm-tag {color: #db2d20;}
35 | .cm-s-3024-night span.cm-link {color: #a16a94;}
36 | .cm-s-3024-night span.cm-error {background: #db2d20; color: #807d7c;}
37 |
38 | .cm-s-3024-night .CodeMirror-activeline-background {background: #2F2F2F !important;}
39 | .cm-s-3024-night .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
40 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/base16-dark.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Name: Base16 Default Dark
4 | Author: Chris Kempson (http://chriskempson.com)
5 |
6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-chrome-devtools)
7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
8 |
9 | */
10 |
11 | .cm-s-base16-dark.CodeMirror {background: #151515; color: #e0e0e0;}
12 | .cm-s-base16-dark div.CodeMirror-selected {background: #303030 !important;}
13 | .cm-s-base16-dark.CodeMirror ::selection { background: rgba(48, 48, 48, .99); }
14 | .cm-s-base16-dark.CodeMirror ::-moz-selection { background: rgba(48, 48, 48, .99); }
15 | .cm-s-base16-dark .CodeMirror-gutters {background: #151515; border-right: 0px;}
16 | .cm-s-base16-dark .CodeMirror-guttermarker { color: #ac4142; }
17 | .cm-s-base16-dark .CodeMirror-guttermarker-subtle { color: #505050; }
18 | .cm-s-base16-dark .CodeMirror-linenumber {color: #505050;}
19 | .cm-s-base16-dark .CodeMirror-cursor {border-left: 1px solid #b0b0b0 !important;}
20 |
21 | .cm-s-base16-dark span.cm-comment {color: #8f5536;}
22 | .cm-s-base16-dark span.cm-atom {color: #aa759f;}
23 | .cm-s-base16-dark span.cm-number {color: #aa759f;}
24 |
25 | .cm-s-base16-dark span.cm-property, .cm-s-base16-dark span.cm-attribute {color: #90a959;}
26 | .cm-s-base16-dark span.cm-keyword {color: #ac4142;}
27 | .cm-s-base16-dark span.cm-string {color: #f4bf75;}
28 |
29 | .cm-s-base16-dark span.cm-variable {color: #90a959;}
30 | .cm-s-base16-dark span.cm-variable-2 {color: #6a9fb5;}
31 | .cm-s-base16-dark span.cm-def {color: #d28445;}
32 | .cm-s-base16-dark span.cm-bracket {color: #e0e0e0;}
33 | .cm-s-base16-dark span.cm-tag {color: #ac4142;}
34 | .cm-s-base16-dark span.cm-link {color: #aa759f;}
35 | .cm-s-base16-dark span.cm-error {background: #ac4142; color: #b0b0b0;}
36 |
37 | .cm-s-base16-dark .CodeMirror-activeline-background {background: #202020 !important;}
38 | .cm-s-base16-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
39 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/base16-light.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Name: Base16 Default Light
4 | Author: Chris Kempson (http://chriskempson.com)
5 |
6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-chrome-devtools)
7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
8 |
9 | */
10 |
11 | .cm-s-base16-light.CodeMirror {background: #f5f5f5; color: #202020;}
12 | .cm-s-base16-light div.CodeMirror-selected {background: #e0e0e0 !important;}
13 | .cm-s-base16-light.CodeMirror ::selection { background: #e0e0e0; }
14 | .cm-s-base16-light.CodeMirror ::-moz-selection { background: #e0e0e0; }
15 | .cm-s-base16-light .CodeMirror-gutters {background: #f5f5f5; border-right: 0px;}
16 | .cm-s-base16-light .CodeMirror-guttermarker { color: #ac4142; }
17 | .cm-s-base16-light .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
18 | .cm-s-base16-light .CodeMirror-linenumber {color: #b0b0b0;}
19 | .cm-s-base16-light .CodeMirror-cursor {border-left: 1px solid #505050 !important;}
20 |
21 | .cm-s-base16-light span.cm-comment {color: #8f5536;}
22 | .cm-s-base16-light span.cm-atom {color: #aa759f;}
23 | .cm-s-base16-light span.cm-number {color: #aa759f;}
24 |
25 | .cm-s-base16-light span.cm-property, .cm-s-base16-light span.cm-attribute {color: #90a959;}
26 | .cm-s-base16-light span.cm-keyword {color: #ac4142;}
27 | .cm-s-base16-light span.cm-string {color: #f4bf75;}
28 |
29 | .cm-s-base16-light span.cm-variable {color: #90a959;}
30 | .cm-s-base16-light span.cm-variable-2 {color: #6a9fb5;}
31 | .cm-s-base16-light span.cm-def {color: #d28445;}
32 | .cm-s-base16-light span.cm-bracket {color: #202020;}
33 | .cm-s-base16-light span.cm-tag {color: #ac4142;}
34 | .cm-s-base16-light span.cm-link {color: #aa759f;}
35 | .cm-s-base16-light span.cm-error {background: #ac4142; color: #505050;}
36 |
37 | .cm-s-base16-light .CodeMirror-activeline-background {background: #DDDCDC !important;}
38 | .cm-s-base16-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
39 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/vibrant-ink.css:
--------------------------------------------------------------------------------
1 | /* Taken from the popular Visual Studio Vibrant Ink Schema */
2 |
3 | .cm-s-vibrant-ink.CodeMirror { background: black; color: white; }
4 | .cm-s-vibrant-ink .CodeMirror-selected { background: #35493c !important; }
5 | .cm-s-vibrant-ink.CodeMirror ::selection { background: rgba(53, 73, 60, 0.99); }
6 | .cm-s-vibrant-ink.CodeMirror ::-moz-selection { background: rgba(53, 73, 60, 0.99); }
7 |
8 | .cm-s-vibrant-ink .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
9 | .cm-s-vibrant-ink .CodeMirror-guttermarker { color: white; }
10 | .cm-s-vibrant-ink .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
11 | .cm-s-vibrant-ink .CodeMirror-linenumber { color: #d0d0d0; }
12 | .cm-s-vibrant-ink .CodeMirror-cursor { border-left: 1px solid white !important; }
13 |
14 | .cm-s-vibrant-ink .cm-keyword { color: #CC7832; }
15 | .cm-s-vibrant-ink .cm-atom { color: #FC0; }
16 | .cm-s-vibrant-ink .cm-number { color: #FFEE98; }
17 | .cm-s-vibrant-ink .cm-def { color: #8DA6CE; }
18 | .cm-s-vibrant-ink span.cm-variable-2, .cm-s-vibrant span.cm-tag { color: #FFC66D }
19 | .cm-s-vibrant-ink span.cm-variable-3, .cm-s-vibrant span.cm-def { color: #FFC66D }
20 | .cm-s-vibrant-ink .cm-operator { color: #888; }
21 | .cm-s-vibrant-ink .cm-comment { color: gray; font-weight: bold; }
22 | .cm-s-vibrant-ink .cm-string { color: #A5C25C }
23 | .cm-s-vibrant-ink .cm-string-2 { color: red }
24 | .cm-s-vibrant-ink .cm-meta { color: #D8FA3C; }
25 | .cm-s-vibrant-ink .cm-builtin { color: #8DA6CE; }
26 | .cm-s-vibrant-ink .cm-tag { color: #8DA6CE; }
27 | .cm-s-vibrant-ink .cm-attribute { color: #8DA6CE; }
28 | .cm-s-vibrant-ink .cm-header { color: #FF6400; }
29 | .cm-s-vibrant-ink .cm-hr { color: #AEAEAE; }
30 | .cm-s-vibrant-ink .cm-link { color: blue; }
31 | .cm-s-vibrant-ink .cm-error { border-bottom: 1px solid red; }
32 |
33 | .cm-s-vibrant-ink .CodeMirror-activeline-background {background: #27282E !important;}
34 | .cm-s-vibrant-ink .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
35 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/mbo.css:
--------------------------------------------------------------------------------
1 | /****************************************************************/
2 | /* Based on mbonaci's Brackets mbo theme */
3 | /* https://github.com/mbonaci/global/blob/master/Mbo.tmTheme */
4 | /* Create your own: http://tmtheme-editor.herokuapp.com */
5 | /****************************************************************/
6 |
7 | .cm-s-mbo.CodeMirror {background: #2c2c2c; color: #ffffec;}
8 | .cm-s-mbo div.CodeMirror-selected {background: #716C62 !important;}
9 | .cm-s-mbo.CodeMirror ::selection { background: rgba(113, 108, 98, .99); }
10 | .cm-s-mbo.CodeMirror ::-moz-selection { background: rgba(113, 108, 98, .99); }
11 | .cm-s-mbo .CodeMirror-gutters {background: #4e4e4e; border-right: 0px;}
12 | .cm-s-mbo .CodeMirror-guttermarker { color: white; }
13 | .cm-s-mbo .CodeMirror-guttermarker-subtle { color: grey; }
14 | .cm-s-mbo .CodeMirror-linenumber {color: #dadada;}
15 | .cm-s-mbo .CodeMirror-cursor {border-left: 1px solid #ffffec !important;}
16 |
17 | .cm-s-mbo span.cm-comment {color: #95958a;}
18 | .cm-s-mbo span.cm-atom {color: #00a8c6;}
19 | .cm-s-mbo span.cm-number {color: #00a8c6;}
20 |
21 | .cm-s-mbo span.cm-property, .cm-s-mbo span.cm-attribute {color: #9ddfe9;}
22 | .cm-s-mbo span.cm-keyword {color: #ffb928;}
23 | .cm-s-mbo span.cm-string {color: #ffcf6c;}
24 | .cm-s-mbo span.cm-string.cm-property {color: #ffffec;}
25 |
26 | .cm-s-mbo span.cm-variable {color: #ffffec;}
27 | .cm-s-mbo span.cm-variable-2 {color: #00a8c6;}
28 | .cm-s-mbo span.cm-def {color: #ffffec;}
29 | .cm-s-mbo span.cm-bracket {color: #fffffc; font-weight: bold;}
30 | .cm-s-mbo span.cm-tag {color: #9ddfe9;}
31 | .cm-s-mbo span.cm-link {color: #f54b07;}
32 | .cm-s-mbo span.cm-error {border-bottom: #636363; color: #ffffec;}
33 | .cm-s-mbo span.cm-qualifier {color: #ffffec;}
34 |
35 | .cm-s-mbo .CodeMirror-activeline-background {background: #494b41 !important;}
36 | .cm-s-mbo .CodeMirror-matchingbracket {color: #222 !important;}
37 | .cm-s-mbo .CodeMirror-matchingtag {background: rgba(255, 255, 255, .37);}
38 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/twilight.css:
--------------------------------------------------------------------------------
1 | .cm-s-twilight.CodeMirror { background: #141414; color: #f7f7f7; } /**/
2 | .cm-s-twilight .CodeMirror-selected { background: #323232 !important; } /**/
3 | .cm-s-twilight.CodeMirror ::selection { background: rgba(50, 50, 50, 0.99); }
4 | .cm-s-twilight.CodeMirror ::-moz-selection { background: rgba(50, 50, 50, 0.99); }
5 |
6 | .cm-s-twilight .CodeMirror-gutters { background: #222; border-right: 1px solid #aaa; }
7 | .cm-s-twilight .CodeMirror-guttermarker { color: white; }
8 | .cm-s-twilight .CodeMirror-guttermarker-subtle { color: #aaa; }
9 | .cm-s-twilight .CodeMirror-linenumber { color: #aaa; }
10 | .cm-s-twilight .CodeMirror-cursor { border-left: 1px solid white !important; }
11 |
12 | .cm-s-twilight .cm-keyword { color: #f9ee98; } /**/
13 | .cm-s-twilight .cm-atom { color: #FC0; }
14 | .cm-s-twilight .cm-number { color: #ca7841; } /**/
15 | .cm-s-twilight .cm-def { color: #8DA6CE; }
16 | .cm-s-twilight span.cm-variable-2, .cm-s-twilight span.cm-tag { color: #607392; } /**/
17 | .cm-s-twilight span.cm-variable-3, .cm-s-twilight span.cm-def { color: #607392; } /**/
18 | .cm-s-twilight .cm-operator { color: #cda869; } /**/
19 | .cm-s-twilight .cm-comment { color:#777; font-style:italic; font-weight:normal; } /**/
20 | .cm-s-twilight .cm-string { color:#8f9d6a; font-style:italic; } /**/
21 | .cm-s-twilight .cm-string-2 { color:#bd6b18 } /*?*/
22 | .cm-s-twilight .cm-meta { background-color:#141414; color:#f7f7f7; } /*?*/
23 | .cm-s-twilight .cm-builtin { color: #cda869; } /*?*/
24 | .cm-s-twilight .cm-tag { color: #997643; } /**/
25 | .cm-s-twilight .cm-attribute { color: #d6bb6d; } /*?*/
26 | .cm-s-twilight .cm-header { color: #FF6400; }
27 | .cm-s-twilight .cm-hr { color: #AEAEAE; }
28 | .cm-s-twilight .cm-link { color:#ad9361; font-style:italic; text-decoration:none; } /**/
29 | .cm-s-twilight .cm-error { border-bottom: 1px solid red; }
30 |
31 | .cm-s-twilight .CodeMirror-activeline-background {background: #27282E !important;}
32 | .cm-s-twilight .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
33 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/midnight.css:
--------------------------------------------------------------------------------
1 | /* Based on the theme at http://bonsaiden.github.com/JavaScript-Garden */
2 |
3 | /**/
4 | .cm-s-midnight span.CodeMirror-matchhighlight { background: #494949; }
5 | .cm-s-midnight.CodeMirror-focused span.CodeMirror-matchhighlight { background: #314D67 !important; }
6 |
7 | /**/
8 | .cm-s-midnight .CodeMirror-activeline-background {background: #253540 !important;}
9 |
10 | .cm-s-midnight.CodeMirror {
11 | background: #0F192A;
12 | color: #D1EDFF;
13 | }
14 |
15 | .cm-s-midnight.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
16 |
17 | .cm-s-midnight div.CodeMirror-selected {background: #314D67 !important;}
18 | .cm-s-midnight.CodeMirror ::selection { background: rgba(49, 77, 103, .99); }
19 | .cm-s-midnight.CodeMirror ::-moz-selection { background: rgba(49, 77, 103, .99); }
20 | .cm-s-midnight .CodeMirror-gutters {background: #0F192A; border-right: 1px solid;}
21 | .cm-s-midnight .CodeMirror-guttermarker { color: white; }
22 | .cm-s-midnight .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
23 | .cm-s-midnight .CodeMirror-linenumber {color: #D0D0D0;}
24 | .cm-s-midnight .CodeMirror-cursor {
25 | border-left: 1px solid #F8F8F0 !important;
26 | }
27 |
28 | .cm-s-midnight span.cm-comment {color: #428BDD;}
29 | .cm-s-midnight span.cm-atom {color: #AE81FF;}
30 | .cm-s-midnight span.cm-number {color: #D1EDFF;}
31 |
32 | .cm-s-midnight span.cm-property, .cm-s-midnight span.cm-attribute {color: #A6E22E;}
33 | .cm-s-midnight span.cm-keyword {color: #E83737;}
34 | .cm-s-midnight span.cm-string {color: #1DC116;}
35 |
36 | .cm-s-midnight span.cm-variable {color: #FFAA3E;}
37 | .cm-s-midnight span.cm-variable-2 {color: #FFAA3E;}
38 | .cm-s-midnight span.cm-def {color: #4DD;}
39 | .cm-s-midnight span.cm-bracket {color: #D1EDFF;}
40 | .cm-s-midnight span.cm-tag {color: #449;}
41 | .cm-s-midnight span.cm-link {color: #AE81FF;}
42 | .cm-s-midnight span.cm-error {background: #F92672; color: #F8F8F0;}
43 |
44 | .cm-s-midnight .CodeMirror-matchingbracket {
45 | text-decoration: underline;
46 | color: white !important;
47 | }
48 |
--------------------------------------------------------------------------------
/resources/highlight/styles/default.css:
--------------------------------------------------------------------------------
1 | /* Tomorrow Night Eighties Theme */
2 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */
3 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
4 |
5 | /* Tomorrow Comment */
6 | .hljs-comment {
7 | color: #999999;
8 | }
9 |
10 | /* Tomorrow Red */
11 | .hljs-variable,
12 | .hljs-attribute,
13 | .hljs-tag,
14 | .hljs-regexp,
15 | .ruby .hljs-constant,
16 | .xml .hljs-tag .hljs-title,
17 | .xml .hljs-pi,
18 | .xml .hljs-doctype,
19 | .html .hljs-doctype,
20 | .css .hljs-id,
21 | .css .hljs-class,
22 | .css .hljs-pseudo {
23 | color: #f2777a;
24 | }
25 |
26 | /* Tomorrow Orange */
27 | .hljs-number,
28 | .hljs-preprocessor,
29 | .hljs-pragma,
30 | .hljs-built_in,
31 | .hljs-literal,
32 | .hljs-params,
33 | .hljs-constant {
34 | color: #f99157;
35 | }
36 |
37 | /* Tomorrow Yellow */
38 | .ruby .hljs-class .hljs-title,
39 | .css .hljs-rule .hljs-attribute {
40 | color: #ffcc66;
41 | }
42 |
43 | /* Tomorrow Green */
44 | .hljs-string,
45 | .hljs-value,
46 | .hljs-inheritance,
47 | .hljs-header,
48 | .hljs-name,
49 | .ruby .hljs-symbol,
50 | .xml .hljs-cdata {
51 | color: #99cc99;
52 | }
53 |
54 | /* Tomorrow Aqua */
55 | .hljs-title,
56 | .css .hljs-hexcolor {
57 | color: #66cccc;
58 | }
59 |
60 | /* Tomorrow Blue */
61 | .hljs-function,
62 | .python .hljs-decorator,
63 | .python .hljs-title,
64 | .ruby .hljs-function .hljs-title,
65 | .ruby .hljs-title .hljs-keyword,
66 | .perl .hljs-sub,
67 | .javascript .hljs-title,
68 | .coffeescript .hljs-title {
69 | color: #6699cc;
70 | }
71 |
72 | /* Tomorrow Purple */
73 | .hljs-keyword,
74 | .javascript .hljs-function {
75 | color: #cc99cc;
76 | }
77 |
78 | .hljs, .lang-elm, .lang-javascript, .lang-bash, .lang-json {
79 | display: block;
80 | overflow-x: auto;
81 | background: #2d2d2d;
82 | color: #cccccc;
83 | padding: 1em;
84 | border-radius: 6px;
85 | -webkit-text-size-adjust: none;
86 | }
87 |
88 | .coffeescript .javascript,
89 | .javascript .xml,
90 | .tex .hljs-formula,
91 | .xml .javascript,
92 | .xml .vbscript,
93 | .xml .css,
94 | .xml .hljs-cdata {
95 | opacity: 0.5;
96 | }
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/zenburn.css:
--------------------------------------------------------------------------------
1 | /**
2 | * "
3 | * Using Zenburn color palette from the Emacs Zenburn Theme
4 | * https://github.com/bbatsov/zenburn-emacs/blob/master/zenburn-theme.el
5 | *
6 | * Also using parts of https://github.com/xavi/coderay-lighttable-theme
7 | * "
8 | * From: https://github.com/wisenomad/zenburn-lighttable-theme/blob/master/zenburn.css
9 | */
10 |
11 | .cm-s-zenburn .CodeMirror-gutters { background: #3f3f3f !important; }
12 | .cm-s-zenburn .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { color: #999; }
13 | .cm-s-zenburn .CodeMirror-cursor { border-left: 1px solid white !important; }
14 | .cm-s-zenburn { background-color: #3f3f3f; color: #dcdccc; }
15 | .cm-s-zenburn span.cm-builtin { color: #dcdccc; font-weight: bold; }
16 | .cm-s-zenburn span.cm-comment { color: #7f9f7f; }
17 | .cm-s-zenburn span.cm-keyword { color: #f0dfaf; font-weight: bold; }
18 | .cm-s-zenburn span.cm-atom { color: #bfebbf; }
19 | .cm-s-zenburn span.cm-def { color: #dcdccc; }
20 | .cm-s-zenburn span.cm-variable { color: #dfaf8f; }
21 | .cm-s-zenburn span.cm-variable-2 { color: #dcdccc; }
22 | .cm-s-zenburn span.cm-string { color: #cc9393; }
23 | .cm-s-zenburn span.cm-string-2 { color: #cc9393; }
24 | .cm-s-zenburn span.cm-number { color: #dcdccc; }
25 | .cm-s-zenburn span.cm-tag { color: #93e0e3; }
26 | .cm-s-zenburn span.cm-property { color: #dfaf8f; }
27 | .cm-s-zenburn span.cm-attribute { color: #dfaf8f; }
28 | .cm-s-zenburn span.cm-qualifier { color: #7cb8bb; }
29 | .cm-s-zenburn span.cm-meta { color: #f0dfaf; }
30 | .cm-s-zenburn span.cm-header { color: #f0efd0; }
31 | .cm-s-zenburn span.cm-operator { color: #f0efd0; }
32 | .cm-s-zenburn span.CodeMirror-matchingbracket { box-sizing: border-box; background: transparent; border-bottom: 1px solid; }
33 | .cm-s-zenburn span.CodeMirror-nonmatchingbracket { border-bottom: 1px solid; background: none; }
34 | .cm-s-zenburn .CodeMirror-activeline { background: #000000; }
35 | .cm-s-zenburn .CodeMirror-activeline-background { background: #000000; }
36 | .cm-s-zenburn .CodeMirror-selected { background: #545454; }
37 | .cm-s-zenburn .CodeMirror-focused .CodeMirror-selected { background: #4f4f4f; }
38 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/erlang-dark.css:
--------------------------------------------------------------------------------
1 | .cm-s-erlang-dark.CodeMirror { background: #002240; color: white; }
2 | .cm-s-erlang-dark div.CodeMirror-selected { background: #b36539 !important; }
3 | .cm-s-erlang-dark.CodeMirror ::selection { background: rgba(179, 101, 57, .99); }
4 | .cm-s-erlang-dark.CodeMirror ::-moz-selection { background: rgba(179, 101, 57, .99); }
5 | .cm-s-erlang-dark .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; }
6 | .cm-s-erlang-dark .CodeMirror-guttermarker { color: white; }
7 | .cm-s-erlang-dark .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
8 | .cm-s-erlang-dark .CodeMirror-linenumber { color: #d0d0d0; }
9 | .cm-s-erlang-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
10 |
11 | .cm-s-erlang-dark span.cm-atom { color: #f133f1; }
12 | .cm-s-erlang-dark span.cm-attribute { color: #ff80e1; }
13 | .cm-s-erlang-dark span.cm-bracket { color: #ff9d00; }
14 | .cm-s-erlang-dark span.cm-builtin { color: #eaa; }
15 | .cm-s-erlang-dark span.cm-comment { color: #77f; }
16 | .cm-s-erlang-dark span.cm-def { color: #e7a; }
17 | .cm-s-erlang-dark span.cm-keyword { color: #ffee80; }
18 | .cm-s-erlang-dark span.cm-meta { color: #50fefe; }
19 | .cm-s-erlang-dark span.cm-number { color: #ffd0d0; }
20 | .cm-s-erlang-dark span.cm-operator { color: #d55; }
21 | .cm-s-erlang-dark span.cm-property { color: #ccc; }
22 | .cm-s-erlang-dark span.cm-qualifier { color: #ccc; }
23 | .cm-s-erlang-dark span.cm-quote { color: #ccc; }
24 | .cm-s-erlang-dark span.cm-special { color: #ffbbbb; }
25 | .cm-s-erlang-dark span.cm-string { color: #3ad900; }
26 | .cm-s-erlang-dark span.cm-string-2 { color: #ccc; }
27 | .cm-s-erlang-dark span.cm-tag { color: #9effff; }
28 | .cm-s-erlang-dark span.cm-variable { color: #50fe50; }
29 | .cm-s-erlang-dark span.cm-variable-2 { color: #e0e; }
30 | .cm-s-erlang-dark span.cm-variable-3 { color: #ccc; }
31 | .cm-s-erlang-dark span.cm-error { color: #9d1e15; }
32 |
33 | .cm-s-erlang-dark .CodeMirror-activeline-background {background: #013461 !important;}
34 | .cm-s-erlang-dark .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
35 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/tomorrow-night-eighties.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Name: Tomorrow Night - Eighties
4 | Author: Chris Kempson
5 |
6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
8 |
9 | */
10 |
11 | .cm-s-tomorrow-night-eighties.CodeMirror {background: #000000; color: #CCCCCC;}
12 | .cm-s-tomorrow-night-eighties div.CodeMirror-selected {background: #2D2D2D !important;}
13 | .cm-s-tomorrow-night-eighties.CodeMirror ::selection { background: rgba(45, 45, 45, 0.99); }
14 | .cm-s-tomorrow-night-eighties.CodeMirror ::-moz-selection { background: rgba(45, 45, 45, 0.99); }
15 | .cm-s-tomorrow-night-eighties .CodeMirror-gutters {background: #000000; border-right: 0px;}
16 | .cm-s-tomorrow-night-eighties .CodeMirror-guttermarker { color: #f2777a; }
17 | .cm-s-tomorrow-night-eighties .CodeMirror-guttermarker-subtle { color: #777; }
18 | .cm-s-tomorrow-night-eighties .CodeMirror-linenumber {color: #515151;}
19 | .cm-s-tomorrow-night-eighties .CodeMirror-cursor {border-left: 1px solid #6A6A6A !important;}
20 |
21 | .cm-s-tomorrow-night-eighties span.cm-comment {color: #d27b53;}
22 | .cm-s-tomorrow-night-eighties span.cm-atom {color: #a16a94;}
23 | .cm-s-tomorrow-night-eighties span.cm-number {color: #a16a94;}
24 |
25 | .cm-s-tomorrow-night-eighties span.cm-property, .cm-s-tomorrow-night-eighties span.cm-attribute {color: #99cc99;}
26 | .cm-s-tomorrow-night-eighties span.cm-keyword {color: #f2777a;}
27 | .cm-s-tomorrow-night-eighties span.cm-string {color: #ffcc66;}
28 |
29 | .cm-s-tomorrow-night-eighties span.cm-variable {color: #99cc99;}
30 | .cm-s-tomorrow-night-eighties span.cm-variable-2 {color: #6699cc;}
31 | .cm-s-tomorrow-night-eighties span.cm-def {color: #f99157;}
32 | .cm-s-tomorrow-night-eighties span.cm-bracket {color: #CCCCCC;}
33 | .cm-s-tomorrow-night-eighties span.cm-tag {color: #f2777a;}
34 | .cm-s-tomorrow-night-eighties span.cm-link {color: #a16a94;}
35 | .cm-s-tomorrow-night-eighties span.cm-error {background: #f2777a; color: #6A6A6A;}
36 |
37 | .cm-s-tomorrow-night-eighties .CodeMirror-activeline-background {background: #343600 !important;}
38 | .cm-s-tomorrow-night-eighties .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
39 |
--------------------------------------------------------------------------------
/src/examples/zip-codes.elm:
--------------------------------------------------------------------------------
1 | import Char
2 | import Html exposing (..)
3 | import Html.Attributes as Attr exposing (..)
4 | import Html.Events exposing (..)
5 | import Http
6 | import Json.Decode as Json exposing ((:=))
7 | import String
8 | import Task exposing (..)
9 |
10 |
11 | -- VIEW
12 |
13 | view : String -> Result String (List String) -> Html
14 | view string result =
15 | let field =
16 | input
17 | [ placeholder "Zip Code"
18 | , value string
19 | , on "input" targetValue (Signal.message query.address)
20 | , myStyle
21 | ]
22 | []
23 |
24 | messages =
25 | case result of
26 | Err msg ->
27 | [ div [ myStyle ] [ text msg ] ]
28 |
29 | Ok cities ->
30 | List.map (\city -> div [ myStyle ] [ text city ]) cities
31 | in
32 | div [] (field :: messages)
33 |
34 |
35 | myStyle : Attribute
36 | myStyle =
37 | style
38 | [ ("width", "100%")
39 | , ("height", "40px")
40 | , ("padding", "10px 0")
41 | , ("font-size", "2em")
42 | , ("text-align", "center")
43 | ]
44 |
45 |
46 | -- WIRING
47 |
48 | main =
49 | Signal.map2 view query.signal results.signal
50 |
51 |
52 | query : Signal.Mailbox String
53 | query =
54 | Signal.mailbox ""
55 |
56 |
57 | results : Signal.Mailbox (Result String (List String))
58 | results =
59 | Signal.mailbox (Err "A valid US zip code is 5 numbers.")
60 |
61 |
62 | port requests : Signal (Task x ())
63 | port requests =
64 | Signal.map lookupZipCode query.signal
65 | |> Signal.map (\task -> Task.toResult task `andThen` Signal.send results.address)
66 |
67 |
68 | lookupZipCode : String -> Task String (List String)
69 | lookupZipCode query =
70 | let toUrl =
71 | if String.length query == 5 && String.all Char.isDigit query
72 | then succeed ("http://api.zippopotam.us/us/" ++ query)
73 | else fail "Give me a valid US zip code!"
74 | in
75 | toUrl `andThen` (mapError (always "Not found :(") << Http.get places)
76 |
77 |
78 | places : Json.Decoder (List String)
79 | places =
80 | let place =
81 | Json.object2 (\city state -> city ++ ", " ++ state)
82 | ("place name" := Json.string)
83 | ("state" := Json.string)
84 | in
85 | "places" := Json.list place
--------------------------------------------------------------------------------
/src/backend/Init/Helpers.hs:
--------------------------------------------------------------------------------
1 | module Init.Helpers (isOutdated, make, makeWithStyle, write) where
2 |
3 | import Control.Monad.Except (runExceptT, when)
4 | import System.Directory (doesFileExist, getModificationTime, removeFile)
5 | import System.FilePath (splitExtension)
6 | import System.Exit (exitFailure)
7 | import System.IO (hFlush, hPutStr, hPutStrLn, stderr, stdout)
8 | import qualified Text.Blaze.Html.Renderer.String as Blaze
9 |
10 | import qualified Elm.Utils as Utils
11 | import qualified Generate
12 |
13 |
14 | write :: String -> IO ()
15 | write str =
16 | hPutStr stdout str >> hFlush stdout
17 |
18 |
19 | make :: FilePath -> FilePath -> IO Bool
20 | make input output =
21 | do outdated <- isOutdated input output
22 | when outdated (makeForReal input output)
23 | return outdated
24 |
25 |
26 | makeWithStyle :: FilePath -> FilePath -> IO Bool
27 | makeWithStyle input output =
28 | do outdated <- isOutdated input output
29 |
30 | when outdated $
31 | do let (name, ext) = splitExtension output
32 | let jsOutput = name ++ ".js"
33 |
34 | makeForReal input jsOutput
35 | case ext of
36 | ".js" -> return ()
37 | ".html" ->
38 | do jsSource <- readFile jsOutput
39 | writeFile output
40 | (Blaze.renderHtml (Generate.serverHtml name jsSource))
41 | removeFile jsOutput
42 |
43 | return outdated
44 |
45 |
46 | makeForReal :: FilePath -> FilePath -> IO ()
47 | makeForReal input output =
48 | do compilerResult <-
49 | runExceptT $
50 | Utils.run "elm-make" [ "--yes", input, "--output=" ++ output ]
51 |
52 | case compilerResult of
53 | Left msg ->
54 | do putStrLn (" problem compiling " ++ input ++ "\n")
55 | hPutStrLn stderr msg
56 | exitFailure
57 |
58 | Right _ ->
59 | do return ()
60 |
61 |
62 | isOutdated :: FilePath -> FilePath -> IO Bool
63 | isOutdated input output =
64 | do exists <- doesFileExist output
65 |
66 | if not exists
67 | then return True
68 | else
69 | do inputTime <- getModificationTime input
70 | outputTime <- getModificationTime output
71 | return (inputTime > outputTime)
--------------------------------------------------------------------------------
/src/examples/sign-up.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (Html, Attribute, div, input, span, text, toElement)
2 | import Html.Attributes exposing (..)
3 | import Html.Events exposing (on, targetValue)
4 | import Signal exposing (Address)
5 | import StartApp.Simple as StartApp
6 | import String
7 |
8 |
9 | main =
10 | StartApp.start { model = empty, view = view, update = update }
11 |
12 |
13 | -- MODEL
14 |
15 | type alias Model =
16 | { name : String
17 | , password : String
18 | , passwordAgain : String
19 | }
20 |
21 |
22 | empty : Model
23 | empty =
24 | Model "" "" ""
25 |
26 |
27 | -- UPDATE
28 |
29 | type Action
30 | = Name String
31 | | Password String
32 | | PasswordAgain String
33 |
34 |
35 | update : Action -> Model -> Model
36 | update action model =
37 | case action of
38 | Name name ->
39 | { model | name = name }
40 |
41 | Password password ->
42 | { model | password = password }
43 |
44 | PasswordAgain password ->
45 | { model | passwordAgain = password }
46 |
47 |
48 | -- VIEW
49 |
50 | view : Address Action -> Model -> Html
51 | view address model =
52 | let
53 | validationMessage =
54 | if model.password == model.passwordAgain then
55 | span [style [("color", "green")]] [text "Passwords Match!"]
56 | else
57 | span [style [("color", "red")]] [text "Passwords do not match :("]
58 | in
59 | div []
60 | [ field "text" address Name "User Name" model.name
61 | , field "password" address Password "Password" model.password
62 | , field "password" address PasswordAgain "Re-enter Password" model.passwordAgain
63 | , div [fieldNameStyle "300px"] [validationMessage]
64 | ]
65 |
66 |
67 | field : String -> Address Action -> (String -> Action) -> String -> String -> Html
68 | field fieldType address toAction name content =
69 | div []
70 | [ div [fieldNameStyle "160px"] [text name]
71 | , input
72 | [ type' fieldType
73 | , placeholder name
74 | , value content
75 | , on "input" targetValue (\string -> Signal.message address (toAction string))
76 | ]
77 | []
78 | ]
79 |
80 |
81 | fieldNameStyle : String -> Attribute
82 | fieldNameStyle px =
83 | style
84 | [ ("width", px)
85 | , ("padding", "10px")
86 | , ("text-align", "right")
87 | , ("display", "inline-block")
88 | ]
89 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/xq-light.css:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright (C) 2011 by MarkLogic Corporation
3 | Author: Mike Brevoort
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | */
23 | .cm-s-xq-light span.cm-keyword {line-height: 1em; font-weight: bold; color: #5A5CAD; }
24 | .cm-s-xq-light span.cm-atom {color: #6C8CD5;}
25 | .cm-s-xq-light span.cm-number {color: #164;}
26 | .cm-s-xq-light span.cm-def {text-decoration:underline;}
27 | .cm-s-xq-light span.cm-variable {color: black; }
28 | .cm-s-xq-light span.cm-variable-2 {color:black;}
29 | .cm-s-xq-light span.cm-variable-3 {color: black; }
30 | .cm-s-xq-light span.cm-property {}
31 | .cm-s-xq-light span.cm-operator {}
32 | .cm-s-xq-light span.cm-comment {color: #0080FF; font-style: italic;}
33 | .cm-s-xq-light span.cm-string {color: red;}
34 | .cm-s-xq-light span.cm-meta {color: yellow;}
35 | .cm-s-xq-light span.cm-qualifier {color: grey}
36 | .cm-s-xq-light span.cm-builtin {color: #7EA656;}
37 | .cm-s-xq-light span.cm-bracket {color: #cc7;}
38 | .cm-s-xq-light span.cm-tag {color: #3F7F7F;}
39 | .cm-s-xq-light span.cm-attribute {color: #7F007F;}
40 | .cm-s-xq-light span.cm-error {color: #f00;}
41 |
42 | .cm-s-xq-light .CodeMirror-activeline-background {background: #e8f2ff !important;}
43 | .cm-s-xq-light .CodeMirror-matchingbracket {outline:1px solid grey;color:black !important;background:yellow;}
--------------------------------------------------------------------------------
/src/backend/Init/FileTree.hs:
--------------------------------------------------------------------------------
1 | {-# LANGUAGE OverloadedStrings #-}
2 | module Init.FileTree (file, init) where
3 |
4 | import Control.Monad (when)
5 | import qualified Data.ByteString as BS
6 | import qualified Data.List as List
7 | import Prelude hiding (init)
8 | import qualified System.Directory as D
9 | import System.FilePath ((), (<.>))
10 |
11 |
12 | -- FILE TREE
13 |
14 | data FileTree
15 | = Dir String [FileTree]
16 | | File String
17 |
18 |
19 | fileTree :: [FileTree]
20 | fileTree =
21 | [ Dir "log"
22 | [ File "access.log"
23 | , File "error.log"
24 | ]
25 | , Dir "gen"
26 | [ Dir "guide"
27 | [ Dir "elm" []
28 | , Dir "html" []
29 | ]
30 | , Dir "examples"
31 | [ Dir "code" []
32 | , Dir "result" []
33 | , Dir "editor" []
34 | ]
35 | , Dir "editor" []
36 | , Dir "pages" []
37 | ]
38 | ]
39 |
40 |
41 | -- PATH LOOKUP
42 |
43 | file :: [String] -> String -> String -> FilePath
44 | file dirs fileName extension =
45 | dir dirs fileName <.> extension
46 |
47 |
48 | dir :: [String] -> FilePath
49 | dir dirs =
50 | case dirHelp fileTree ("gen" : dirs) of
51 | Nothing ->
52 | error ("could not find directory " ++ List.intercalate "/" dirs)
53 |
54 | Just path ->
55 | path
56 |
57 |
58 | dirHelp :: [FileTree] -> [String] -> Maybe FilePath
59 | dirHelp trees dirs =
60 | case dirs of
61 | [] -> Just ""
62 |
63 | name : otherNames ->
64 | case trees of
65 | [] ->
66 | Nothing
67 |
68 | Dir dirName subTrees : _
69 | | name == dirName ->
70 | (name ) `fmap` dirHelp subTrees otherNames
71 |
72 | _ : otherTrees ->
73 | dirHelp otherTrees dirs
74 |
75 |
76 | -- INITIALIZE
77 |
78 | init :: IO ()
79 | init =
80 | mapM_ (initFileTree ".") fileTree
81 |
82 |
83 | initFileTree :: FilePath -> FileTree -> IO ()
84 | initFileTree dir tree =
85 | case tree of
86 | Dir name subTrees ->
87 | do let newDir = dir name
88 | D.createDirectoryIfMissing True newDir
89 | mapM_ (initFileTree newDir) subTrees
90 |
91 | File name ->
92 | do let path = dir name
93 | exists <- D.doesFileExist path
94 | when (not exists) $ BS.writeFile path ""
95 |
--------------------------------------------------------------------------------
/src/shared/Blog.elm:
--------------------------------------------------------------------------------
1 | module Blog (blog, docs, evan, michael, Date) where
2 |
3 | import Debug
4 | import Dict
5 | import Html exposing (..)
6 | import Html.Attributes as Attr exposing (..)
7 |
8 | import Center
9 | import TopBar
10 |
11 |
12 | (=>) = (,)
13 |
14 |
15 | blog : String -> String -> Author -> Date -> List Html -> Html
16 | blog title subtitle author date body =
17 | div []
18 | [ TopBar.topBar "blog"
19 | , div [ style [ "padding" => "4em 0 1em", "text-align" => "center" ] ]
20 | [ div [ style [ "font-size" => "4em" ] ] [text title]
21 | , div [ style [ "font-size" => "1.5em" ] ] [text subtitle]
22 | , div [ class "author" ]
23 | [ text "by "
24 | , a [href author.url] [text author.name]
25 | , text (" / " ++ dateToString date)
26 | ]
27 | ]
28 | , div [] body
29 | ]
30 |
31 |
32 | docs : String -> List Html -> Html
33 | docs title body =
34 | div []
35 | [ TopBar.topBar "docs"
36 | , div [ style [ "padding" => "4em 0 1em", "text-align" => "center" ] ]
37 | [ div [ style [ "font-size" => "4em" ] ] [text title]
38 | ]
39 | , div [] body
40 | ]
41 |
42 |
43 | -- AUTHORS
44 |
45 | type alias Author =
46 | { name : String
47 | , url : String
48 | }
49 |
50 |
51 | evan : Author
52 | evan =
53 | { name = "Evan Czaplicki"
54 | , url = "https://twitter.com/czaplic"
55 | }
56 |
57 |
58 | michael : Author
59 | michael =
60 | { name = "Michael James"
61 | , url = "http://github.com/michaelbjames"
62 | }
63 |
64 |
65 | -- DATES
66 |
67 | type alias Date =
68 | { year : Int
69 | , month : Int
70 | , day : Int
71 | }
72 |
73 |
74 | dateToString : Date -> String
75 | dateToString date =
76 | case Dict.get date.month months of
77 | Nothing ->
78 | Debug.crash "invalid date"
79 |
80 | Just month ->
81 | toString date.day ++ " " ++ month ++ " " ++ toString date.year
82 |
83 |
84 |
85 | months : Dict.Dict Int String
86 | months =
87 | Dict.fromList
88 | [ 1 => "Jan"
89 | , 2 => "Feb"
90 | , 3 => "Mar"
91 | , 4 => "Apr"
92 | , 5 => "May"
93 | , 6 => "June"
94 | , 7 => "July"
95 | , 8 => "Aug"
96 | , 9 => "Sep"
97 | , 10 => "Oct"
98 | , 11 => "Nov"
99 | , 12 => "Dec"
100 | ]
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/pastel-on-dark.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Pastel On Dark theme ported from ACE editor
3 | * @license MIT
4 | * @copyright AtomicPages LLC 2014
5 | * @author Dennis Thompson, AtomicPages LLC
6 | * @version 1.1
7 | * @source https://github.com/atomicpages/codemirror-pastel-on-dark-theme
8 | */
9 |
10 | .cm-s-pastel-on-dark.CodeMirror {
11 | background: #2c2827;
12 | color: #8F938F;
13 | line-height: 1.5;
14 | font-size: 14px;
15 | }
16 | .cm-s-pastel-on-dark div.CodeMirror-selected { background: rgba(221,240,255,0.2) !important; }
17 | .cm-s-pastel-on-dark.CodeMirror ::selection { background: rgba(221,240,255,0.2); }
18 | .cm-s-pastel-on-dark.CodeMirror ::-moz-selection { background: rgba(221,240,255,0.2); }
19 |
20 | .cm-s-pastel-on-dark .CodeMirror-gutters {
21 | background: #34302f;
22 | border-right: 0px;
23 | padding: 0 3px;
24 | }
25 | .cm-s-pastel-on-dark .CodeMirror-guttermarker { color: white; }
26 | .cm-s-pastel-on-dark .CodeMirror-guttermarker-subtle { color: #8F938F; }
27 | .cm-s-pastel-on-dark .CodeMirror-linenumber { color: #8F938F; }
28 | .cm-s-pastel-on-dark .CodeMirror-cursor { border-left: 1px solid #A7A7A7 !important; }
29 | .cm-s-pastel-on-dark span.cm-comment { color: #A6C6FF; }
30 | .cm-s-pastel-on-dark span.cm-atom { color: #DE8E30; }
31 | .cm-s-pastel-on-dark span.cm-number { color: #CCCCCC; }
32 | .cm-s-pastel-on-dark span.cm-property { color: #8F938F; }
33 | .cm-s-pastel-on-dark span.cm-attribute { color: #a6e22e; }
34 | .cm-s-pastel-on-dark span.cm-keyword { color: #AEB2F8; }
35 | .cm-s-pastel-on-dark span.cm-string { color: #66A968; }
36 | .cm-s-pastel-on-dark span.cm-variable { color: #AEB2F8; }
37 | .cm-s-pastel-on-dark span.cm-variable-2 { color: #BEBF55; }
38 | .cm-s-pastel-on-dark span.cm-variable-3 { color: #DE8E30; }
39 | .cm-s-pastel-on-dark span.cm-def { color: #757aD8; }
40 | .cm-s-pastel-on-dark span.cm-bracket { color: #f8f8f2; }
41 | .cm-s-pastel-on-dark span.cm-tag { color: #C1C144; }
42 | .cm-s-pastel-on-dark span.cm-link { color: #ae81ff; }
43 | .cm-s-pastel-on-dark span.cm-qualifier,.cm-s-pastel-on-dark span.cm-builtin { color: #C1C144; }
44 | .cm-s-pastel-on-dark span.cm-error {
45 | background: #757aD8;
46 | color: #f8f8f0;
47 | }
48 | .cm-s-pastel-on-dark .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.031) !important; }
49 | .cm-s-pastel-on-dark .CodeMirror-matchingbracket {
50 | border: 1px solid rgba(255,255,255,0.25);
51 | color: #8F938F !important;
52 | margin: -1px -1px 0 -1px;
53 | }
54 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/lesser-dark.css:
--------------------------------------------------------------------------------
1 | /*
2 | http://lesscss.org/ dark theme
3 | Ported to CodeMirror by Peter Kroon
4 | */
5 | .cm-s-lesser-dark {
6 | line-height: 1.3em;
7 | }
8 | .cm-s-lesser-dark.CodeMirror { background: #262626; color: #EBEFE7; text-shadow: 0 -1px 1px #262626; }
9 | .cm-s-lesser-dark div.CodeMirror-selected {background: #45443B !important;} /* 33322B*/
10 | .cm-s-lesser-dark.CodeMirror ::selection { background: rgba(69, 68, 59, .99); }
11 | .cm-s-lesser-dark.CodeMirror ::-moz-selection { background: rgba(69, 68, 59, .99); }
12 | .cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
13 | .cm-s-lesser-dark pre { padding: 0 8px; }/*editable code holder*/
14 |
15 | .cm-s-lesser-dark.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/
16 |
17 | .cm-s-lesser-dark .CodeMirror-gutters { background: #262626; border-right:1px solid #aaa; }
18 | .cm-s-lesser-dark .CodeMirror-guttermarker { color: #599eff; }
19 | .cm-s-lesser-dark .CodeMirror-guttermarker-subtle { color: #777; }
20 | .cm-s-lesser-dark .CodeMirror-linenumber { color: #777; }
21 |
22 | .cm-s-lesser-dark span.cm-keyword { color: #599eff; }
23 | .cm-s-lesser-dark span.cm-atom { color: #C2B470; }
24 | .cm-s-lesser-dark span.cm-number { color: #B35E4D; }
25 | .cm-s-lesser-dark span.cm-def {color: white;}
26 | .cm-s-lesser-dark span.cm-variable { color:#D9BF8C; }
27 | .cm-s-lesser-dark span.cm-variable-2 { color: #669199; }
28 | .cm-s-lesser-dark span.cm-variable-3 { color: white; }
29 | .cm-s-lesser-dark span.cm-property {color: #92A75C;}
30 | .cm-s-lesser-dark span.cm-operator {color: #92A75C;}
31 | .cm-s-lesser-dark span.cm-comment { color: #666; }
32 | .cm-s-lesser-dark span.cm-string { color: #BCD279; }
33 | .cm-s-lesser-dark span.cm-string-2 {color: #f50;}
34 | .cm-s-lesser-dark span.cm-meta { color: #738C73; }
35 | .cm-s-lesser-dark span.cm-qualifier {color: #555;}
36 | .cm-s-lesser-dark span.cm-builtin { color: #ff9e59; }
37 | .cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
38 | .cm-s-lesser-dark span.cm-tag { color: #669199; }
39 | .cm-s-lesser-dark span.cm-attribute {color: #00c;}
40 | .cm-s-lesser-dark span.cm-header {color: #a0a;}
41 | .cm-s-lesser-dark span.cm-quote {color: #090;}
42 | .cm-s-lesser-dark span.cm-hr {color: #999;}
43 | .cm-s-lesser-dark span.cm-link {color: #00c;}
44 | .cm-s-lesser-dark span.cm-error { color: #9d1e15; }
45 |
46 | .cm-s-lesser-dark .CodeMirror-activeline-background {background: #3C3A3A !important;}
47 | .cm-s-lesser-dark .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
48 |
--------------------------------------------------------------------------------
/src/backend/Init/Guide.hs:
--------------------------------------------------------------------------------
1 | module Init.Guide (init, chapters) where
2 |
3 | import Control.Monad (when)
4 | import qualified Data.Maybe as Maybe
5 | import Prelude hiding (init)
6 | import System.Exit (exitFailure)
7 | import System.FilePath ((), (<.>))
8 |
9 | import qualified Init.FileTree as FT
10 | import Init.Helpers (makeWithStyle, write, isOutdated)
11 |
12 |
13 | -- CHAPTERS
14 |
15 | chapters :: [String]
16 | chapters =
17 | [ "core-language"
18 | , "model-the-problem"
19 | , "reactivity"
20 | , "interop"
21 | ]
22 |
23 |
24 | -- INITIALIZE
25 |
26 | init :: IO ()
27 | init =
28 | do write "Setting up guide ."
29 | mapM_ initChapter chapters
30 | mapM_ generateHtml chapters
31 | putStrLn " done\n"
32 |
33 |
34 | initChapter :: String -> IO ()
35 | initChapter name =
36 | let
37 | input =
38 | "src" "guide" "chapters" name <.> "md"
39 |
40 | output =
41 | FT.file ["guide","elm"] name "elm"
42 | in
43 | do outdated <- isOutdated input output
44 | when outdated $ do
45 | markdown <- readFile input
46 | let mdLines = lines markdown
47 | case Maybe.mapMaybe toTitle mdLines of
48 | [] ->
49 | do putStrLn $ " no title found for '" ++ name ++ "'!\n"
50 | exitFailure
51 |
52 | [title] ->
53 | do let content = unlines (filter notTitle mdLines)
54 | writeFile output (toElm title content)
55 |
56 | _ ->
57 | do putStrLn $ " fould multiple titles for '" ++ name ++ "'!\n"
58 | exitFailure
59 |
60 |
61 | generateHtml :: String -> IO Bool
62 | generateHtml name =
63 | do write "."
64 | makeWithStyle
65 | (FT.file ["guide", "elm"] name "elm")
66 | (FT.file ["guide", "html"] name "html")
67 |
68 |
69 | -- CONVERSIONS
70 |
71 | toTitle :: String -> Maybe String
72 | toTitle line =
73 | case line of
74 | '#' : ' ' : title ->
75 | Just title
76 | _ ->
77 | Nothing
78 |
79 |
80 | notTitle :: String -> Bool
81 | notTitle line =
82 | Maybe.isNothing (toTitle line)
83 |
84 |
85 | toElm :: String -> String -> String
86 | toElm title markdown =
87 | unlines
88 | [ "import Html exposing (..)"
89 | , "import Html.Attributes exposing (..)"
90 | , "import Blog"
91 | , "import Center"
92 | , "import TopBar"
93 | , ""
94 | , "port title : String"
95 | , "port title ="
96 | , " " ++ show title
97 | , ""
98 | , "main ="
99 | , " Blog.docs " ++ show title ++ " [ Center.markdown \"600px\" info ]"
100 | , ""
101 | , "info = \"\"\"\n" ++ markdown ++ "\n\"\"\""
102 | ]
103 |
--------------------------------------------------------------------------------
/src/pages/blog/announce/elm-and-prezi.elm:
--------------------------------------------------------------------------------
1 | import Blog
2 | import Center
3 |
4 |
5 | port title : String
6 | port title = "Elm and Prezi"
7 |
8 |
9 | main =
10 | Blog.blog
11 | "Working on Elm full-time"
12 | "Elm ♥ Prezi"
13 | Blog.evan
14 | (Blog.Date 2013 5 21)
15 | [ Center.markdown "600px" content ]
16 |
17 |
18 | content = """
19 |
20 | I am now working on Elm full-time at [Prezi](http://prezi.com/)!
21 |
22 | I have tried to anticipate the questions people might have,
23 | [as has Péter Halácsy][prezi], but the
24 | short version is that this is really amazing news for Elm!
25 |
26 | [prezi]: http://engineering.prezi.com/blog/2013/05/21/elm-at-prezi/
27 |
28 | #### Q: Is Elm still free and open source?
29 | Yes, of course! Elm is still totally open source under the BSD3 license
30 | and all my work while at Prezi will be available forever under that license.
31 | This is actually a stronger guarantee than before.
32 |
33 | #### Q: Is this why [0.8][0.8] took so long?
34 | Yes! I have been talking with Prezi for the past couple months.
35 | I should be able to move a lot quicker now.
36 |
37 | [0.8]: /blog/announce/0.8
38 |
39 | #### Q: What might change because of this?
40 | I am still making the design decisions, so the goals are the same.
41 | The biggest changes are that I will:
42 |
43 | * Have time to really focus on Elm.
44 | * Have the bandwidth to work more closely with contributors and set
45 | up [reasonable projects][projects] for people. Email [the list][list]
46 | if you are interested!
47 | * Talk to Prezi designers and front-end developers to better
48 | understand their problems.
49 |
50 | [projects]: https://docs.google.com/spreadsheet/ccc?key=0AtAn2jvQYh8EdEZTSWtWWU9nSWkzYWlUajJjV0N0aHc#gid=0
51 | [list]: https://groups.google.com/forum/?fromgroups#!forum/elm-discuss
52 |
53 | #### Q: Prezi is based in Budapest, so is Evan moving out there?
54 | I will split my time 60/40 between San Francisco and Budapest.
55 | Most Prezi engineers are in Budapest, but they have offices in both locations.
56 |
57 | #### Q: What is in it for Prezi?
58 | Prezi engineers love functional programming, but the tools for functional web
59 | development are not very mature right now. Prezi hired me to make Elm ready
60 | for production sooner rather than later, and allow them to use FRP to more
61 | easily implement complex behavior.
62 |
63 | #### Q: Is Prezi secretly trying to take control and make Elm all about zooming?
64 | No :) Although I am a full-time employee of Prezi, I still have full control of the
65 | direction of Elm, and my primary goal is the success of Elm as an independent project.
66 |
67 | #### Q: How many people are working on Elm full-time?
68 | Just me for now. Prezi is hiring for other roles though, so let me know
69 | if you are interested. I know this probably wasn't a question you had, but
70 | it is a lovely place to work nonetheless :P
71 |
72 | """
73 |
--------------------------------------------------------------------------------
/src/examples/adventure.elm:
--------------------------------------------------------------------------------
1 | import Color exposing (..)
2 | import Graphics.Collage exposing (..)
3 | import Graphics.Element exposing (..)
4 | import Keyboard
5 | import Markdown
6 | import Time exposing (..)
7 | import Window
8 |
9 |
10 | -- MODEL
11 |
12 | areaW = 407
13 | areaH = 301
14 |
15 |
16 | type alias Model =
17 | { x : Float
18 | , y : Float
19 | , vx : Float
20 | , vy : Float
21 | , dir : String
22 | }
23 |
24 |
25 | hero : Model
26 | hero =
27 | Model 0 0 0 0 "south"
28 |
29 |
30 | -- UPDATE
31 |
32 | update : (Time, { x:Int, y:Int }, Bool) -> Model -> Model
33 | update (timeDelta, direction, isRunning) model =
34 | model
35 | |> newVelocity isRunning direction
36 | |> setDirection direction
37 | |> updatePosition timeDelta
38 |
39 |
40 | newVelocity : Bool -> { x:Int, y:Int } -> Model -> Model
41 | newVelocity isRunning {x,y} model =
42 | let
43 | scale =
44 | if isRunning then 2 else 1
45 |
46 | newVel n =
47 | if x == 0 || y == 0 then
48 | scale * toFloat n
49 | else
50 | scale * toFloat n / sqrt 2
51 | in
52 | { model |
53 | vx = newVel x,
54 | vy = newVel y
55 | }
56 |
57 |
58 | setDirection : { x:Int, y:Int } -> Model -> Model
59 | setDirection {x,y} model =
60 | { model |
61 | dir =
62 | if x > 0 then
63 | "east"
64 |
65 | else if x < 0 then
66 | "west"
67 |
68 | else if y < 0 then
69 | "south"
70 |
71 | else if y > 0 then
72 | "north"
73 |
74 | else
75 | model.dir
76 | }
77 |
78 |
79 | updatePosition : Time -> Model -> Model
80 | updatePosition dt ({x,y,vx,vy} as model) =
81 | { model |
82 | x = clamp (-areaW/2) (areaW/2) (x + dt * vx),
83 | y = clamp (-areaH/2) (areaH/2) (y + dt * vy)
84 | }
85 |
86 |
87 | -- VIEW
88 |
89 | view : (Int,Int) -> Model -> Element
90 | view (w,h) {x,y,vx,vy,dir} =
91 | let
92 | verb = if vx == 0 && vy == 0 then "stand" else "walk"
93 | src = "/imgs/hero/" ++ verb ++ "/" ++ dir ++ ".gif"
94 | in
95 | container w h middle <|
96 | collage areaW areaH
97 | [ toForm (image areaW areaH "/imgs/desert.png")
98 | , toForm (image 22 28 src)
99 | |> move (x,y)
100 | , toForm (Markdown.toElement "Arrows to move Shift to run")
101 | |> move (70-areaW/2, 30-areaH/2)
102 | ]
103 |
104 |
105 | -- SIGNALS
106 |
107 | main : Signal Element
108 | main =
109 | Signal.map2 view Window.dimensions (Signal.foldp update hero input)
110 |
111 |
112 | input : Signal (Time, { x:Int, y:Int }, Bool)
113 | input =
114 | Signal.sampleOn delta (Signal.map3 (,,) delta Keyboard.arrows Keyboard.shift)
115 |
116 |
117 | delta : Signal Time
118 | delta =
119 | Signal.map (\t -> t / 20) (fps 25)
120 |
--------------------------------------------------------------------------------
/assets/codemirror-5.0/theme/xq-dark.css:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright (C) 2011 by MarkLogic Corporation
3 | Author: Mike Brevoort
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | */
23 | .cm-s-xq-dark.CodeMirror { background: #0a001f; color: #f8f8f8; }
24 | .cm-s-xq-dark .CodeMirror-selected { background: #27007A !important; }
25 | .cm-s-xq-dark.CodeMirror ::selection { background: rgba(39, 0, 122, 0.99); }
26 | .cm-s-xq-dark.CodeMirror ::-moz-selection { background: rgba(39, 0, 122, 0.99); }
27 | .cm-s-xq-dark .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
28 | .cm-s-xq-dark .CodeMirror-guttermarker { color: #FFBD40; }
29 | .cm-s-xq-dark .CodeMirror-guttermarker-subtle { color: #f8f8f8; }
30 | .cm-s-xq-dark .CodeMirror-linenumber { color: #f8f8f8; }
31 | .cm-s-xq-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
32 |
33 | .cm-s-xq-dark span.cm-keyword {color: #FFBD40;}
34 | .cm-s-xq-dark span.cm-atom {color: #6C8CD5;}
35 | .cm-s-xq-dark span.cm-number {color: #164;}
36 | .cm-s-xq-dark span.cm-def {color: #FFF; text-decoration:underline;}
37 | .cm-s-xq-dark span.cm-variable {color: #FFF;}
38 | .cm-s-xq-dark span.cm-variable-2 {color: #EEE;}
39 | .cm-s-xq-dark span.cm-variable-3 {color: #DDD;}
40 | .cm-s-xq-dark span.cm-property {}
41 | .cm-s-xq-dark span.cm-operator {}
42 | .cm-s-xq-dark span.cm-comment {color: gray;}
43 | .cm-s-xq-dark span.cm-string {color: #9FEE00;}
44 | .cm-s-xq-dark span.cm-meta {color: yellow;}
45 | .cm-s-xq-dark span.cm-qualifier {color: #FFF700;}
46 | .cm-s-xq-dark span.cm-builtin {color: #30a;}
47 | .cm-s-xq-dark span.cm-bracket {color: #cc7;}
48 | .cm-s-xq-dark span.cm-tag {color: #FFBD40;}
49 | .cm-s-xq-dark span.cm-attribute {color: #FFF700;}
50 | .cm-s-xq-dark span.cm-error {color: #f00;}
51 |
52 | .cm-s-xq-dark .CodeMirror-activeline-background {background: #27282E !important;}
53 | .cm-s-xq-dark .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
--------------------------------------------------------------------------------
/resources/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
88 |
--------------------------------------------------------------------------------
/src/examples/mario.elm:
--------------------------------------------------------------------------------
1 | import Color exposing (..)
2 | import Graphics.Collage exposing (..)
3 | import Graphics.Element exposing (..)
4 | import Keyboard
5 | import Time exposing (..)
6 | import Window
7 |
8 |
9 | -- MODEL
10 |
11 | type alias Model =
12 | { x : Float
13 | , y : Float
14 | , vx : Float
15 | , vy : Float
16 | , dir : Direction
17 | }
18 |
19 |
20 | type Direction = Left | Right
21 |
22 |
23 | type alias Keys = { x:Int, y:Int }
24 |
25 |
26 | mario : Model
27 | mario =
28 | { x = 0
29 | , y = 0
30 | , vx = 0
31 | , vy = 0
32 | , dir = Right
33 | }
34 |
35 |
36 | -- UPDATE
37 |
38 | update : (Float, Keys) -> Model -> Model
39 | update (dt, keys) mario =
40 | mario
41 | |> gravity dt
42 | |> jump keys
43 | |> walk keys
44 | |> physics dt
45 |
46 |
47 | jump : Keys -> Model -> Model
48 | jump keys mario =
49 | if keys.y > 0 && mario.vy == 0 then
50 | { mario | vy = 6.0 }
51 |
52 | else
53 | mario
54 |
55 |
56 | gravity : Float -> Model -> Model
57 | gravity dt mario =
58 | { mario |
59 | vy = if mario.y > 0 then mario.vy - dt/4 else 0
60 | }
61 |
62 |
63 | physics : Float -> Model -> Model
64 | physics dt mario =
65 | { mario |
66 | x = mario.x + dt * mario.vx,
67 | y = max 0 (mario.y + dt * mario.vy)
68 | }
69 |
70 |
71 | walk : Keys -> Model -> Model
72 | walk keys mario =
73 | { mario |
74 | vx = toFloat keys.x,
75 | dir =
76 | if keys.x < 0 then
77 | Left
78 |
79 | else if keys.x > 0 then
80 | Right
81 |
82 | else
83 | mario.dir
84 | }
85 |
86 |
87 | -- VIEW
88 |
89 | view : (Int, Int) -> Model -> Element
90 | view (w',h') mario =
91 | let
92 | (w,h) = (toFloat w', toFloat h')
93 |
94 | verb =
95 | if mario.y > 0 then
96 | "jump"
97 |
98 | else if mario.vx /= 0 then
99 | "walk"
100 |
101 | else
102 | "stand"
103 |
104 | dir =
105 | case mario.dir of
106 | Left -> "left"
107 | Right -> "right"
108 |
109 | src =
110 | "/imgs/mario/"++ verb ++ "/" ++ dir ++ ".gif"
111 |
112 | marioImage =
113 | image 35 35 src
114 |
115 | groundY = 62 - h/2
116 |
117 | position =
118 | (mario.x, mario.y + groundY)
119 | in
120 | collage w' h'
121 | [ rect w h
122 | |> filled (rgb 174 238 238)
123 | , rect w 50
124 | |> filled (rgb 74 167 43)
125 | |> move (0, 24 - h/2)
126 | , marioImage
127 | |> toForm
128 | |> move position
129 | ]
130 |
131 |
132 | -- SIGNALS
133 |
134 | main : Signal Element
135 | main =
136 | Signal.map2 view Window.dimensions (Signal.foldp update mario input)
137 |
138 |
139 | input : Signal (Float, Keys)
140 | input =
141 | let
142 | delta = Signal.map (\t -> t/20) (fps 30)
143 | in
144 | Signal.sampleOn delta (Signal.map2 (,) delta Keyboard.arrows)
--------------------------------------------------------------------------------
/src/examples/cube.elm:
--------------------------------------------------------------------------------
1 | x = 32
2 | {--
3 | import Color exposing (..)
4 | import Graphics.Element exposing (..)
5 | import Math.Vector3 exposing (..)
6 | import Math.Matrix4 exposing (..)
7 | import Time exposing (..)
8 | import WebGL exposing (..)
9 |
10 |
11 | -- SIGNALS
12 |
13 | main : Signal Element
14 | main =
15 | Signal.map (webgl (400,400)) (Signal.map scene angle)
16 |
17 |
18 | angle : Signal Float
19 | angle =
20 | Signal.foldp (\dt theta -> theta + dt / 5000) 0 (fps 25)
21 |
22 |
23 | -- MESHES - create a cube in which each vertex has a position and color
24 |
25 | type alias Vertex =
26 | { color : Vec3
27 | , position : Vec3
28 | }
29 |
30 |
31 | cube : List (Triangle Vertex)
32 | cube =
33 | let
34 | rft = vec3 1 1 1 -- right, front, top
35 | lft = vec3 -1 1 1 -- left, front, top
36 | lbt = vec3 -1 -1 1
37 | rbt = vec3 1 -1 1
38 | rbb = vec3 1 -1 -1
39 | rfb = vec3 1 1 -1
40 | lfb = vec3 -1 1 -1
41 | lbb = vec3 -1 -1 -1
42 | in
43 | List.concat
44 | [ face green rft rfb rbb rbt -- right
45 | , face blue rft rfb lfb lft -- front
46 | , face yellow rft lft lbt rbt -- top
47 | , face red rfb lfb lbb rbb -- bottom
48 | , face purple lft lfb lbb lbt -- left
49 | , face orange rbt rbb lbb lbt -- back
50 | ]
51 |
52 |
53 | face : Color -> Vec3 -> Vec3 -> Vec3 -> Vec3 -> List (Triangle Vertex)
54 | face rawColor a b c d =
55 | let
56 | color =
57 | let c = toRgb rawColor in
58 | vec3
59 | (toFloat c.red / 255)
60 | (toFloat c.green / 255)
61 | (toFloat c.blue / 255)
62 |
63 | vertex position =
64 | Vertex color position
65 | in
66 | [ (vertex a, vertex b, vertex c)
67 | , (vertex c, vertex d, vertex a)
68 | ]
69 |
70 |
71 | -- VIEW
72 |
73 | scene : Float -> List Entity
74 | scene angle =
75 | [ entity vertexShader fragmentShader cube (uniforms angle) ]
76 |
77 |
78 | uniforms : Float -> { rotation:Mat4, perspective:Mat4, camera:Mat4, shade:Float }
79 | uniforms t =
80 | { rotation = mul (makeRotate (3*t) (vec3 0 1 0)) (makeRotate (2*t) (vec3 1 0 0))
81 | , perspective = makePerspective 45 1 0.01 100
82 | , camera = makeLookAt (vec3 0 0 5) (vec3 0 0 0) (vec3 0 1 0)
83 | , shade = 0.8
84 | }
85 |
86 |
87 | -- SHADERS
88 |
89 | vertexShader : Shader { attr | position:Vec3, color:Vec3 }
90 | { unif | rotation:Mat4, perspective:Mat4, camera:Mat4 }
91 | { vcolor:Vec3 }
92 | vertexShader = [glsl|
93 |
94 | attribute vec3 position;
95 | attribute vec3 color;
96 | uniform mat4 perspective;
97 | uniform mat4 camera;
98 | uniform mat4 rotation;
99 | varying vec3 vcolor;
100 | void main () {
101 | gl_Position = perspective * camera * rotation * vec4(position, 1.0);
102 | vcolor = color;
103 | }
104 |
105 | |]
106 |
107 |
108 | fragmentShader : Shader {} { u | shade:Float } { vcolor:Vec3 }
109 | fragmentShader = [glsl|
110 |
111 | precision mediump float;
112 | uniform float shade;
113 | varying vec3 vcolor;
114 | void main () {
115 | gl_FragColor = shade * vec4(vcolor, 1.0);
116 | }
117 |
118 | |]
119 | --}
--------------------------------------------------------------------------------
/src/pages/docs/from-javascript.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (..)
2 | import Html.Attributes exposing (..)
3 |
4 | import Blog
5 | import Center
6 |
7 |
8 | port title : String
9 | port title =
10 | "Elm From JavaScript"
11 |
12 |
13 | main =
14 | Blog.docs
15 | "From JavaScript?"
16 | [ Center.markdown "800px" content
17 | , syntaxTable "Literals" literals
18 | , syntaxTable "Objects / Records" records
19 | , syntaxTable "Functions" functions
20 | , syntaxTable "Control Flow" controlFlow
21 | , syntaxTable "Strings" strings
22 | ]
23 |
24 |
25 | content = """
26 |
27 | The following tables show side-by-side mappings between JavaScript and Elm. A
28 | lot of things are very similar, especially once you get used to the relatively
29 | minor syntactic difference.
30 |
31 | """
32 |
33 |
34 | -- TABLE
35 |
36 | syntaxTable subtitle comparisions =
37 | div [Center.style "800px"]
38 | [ h2 [] [text subtitle]
39 | , div [class "comparison"]
40 | [ table []
41 | [ tbody [] (header :: List.map row comparisions)
42 | ]
43 | ]
44 | , br [] []
45 | ]
46 |
47 |
48 | header =
49 | tr []
50 | [ th [cellStyle] [text "JavaScript"]
51 | , th [cellStyle] [text "Elm"]
52 | ]
53 |
54 |
55 | row (js, elm) =
56 | tr []
57 | [ td [cellStyle] [value js]
58 | , td [cellStyle] [value elm]
59 | ]
60 |
61 |
62 | cellStyle =
63 | style [ ("width", "400px"), ("padding", "6px") ]
64 |
65 |
66 | type Value = Code String | Message String
67 |
68 |
69 | vs js elm =
70 | (Code js, Code elm)
71 |
72 |
73 | value v =
74 | case v of
75 | Code str ->
76 | code [] [text str]
77 |
78 | Message str ->
79 | span [style [("color", "#CBCBCB")]] [text str]
80 |
81 |
82 | -- COMPARISONS
83 |
84 | literals =
85 | [ "3" `vs` "3"
86 | , "3.1415" `vs` "3.1415"
87 | , "\"Hello world!\"" `vs` "\"Hello world!\""
88 | , (Message "Multiline strings not widely supported", Code "\"\"\"multiline string\"\"\"")
89 | , (Code "'Hello world!'", Message "Cannot use single quotes for strings")
90 | , (Message "No distinction between characters and strings", Code "'a'")
91 | , "true" `vs` "True"
92 | , "[1,2,3]" `vs` "[1,2,3]"
93 | ]
94 |
95 |
96 | records =
97 | [ "{ x: 3, y: 4 }" `vs` "{ x = 3, y = 4 }"
98 | , "point.x" `vs` "point.x"
99 | , "point.x = 42" `vs` "{ point | x = 42 }"
100 | ]
101 |
102 |
103 | functions =
104 | [ "function(x,y) { return x + y; }" `vs` "\\x y -> x + y"
105 | , "Math.max(3, 4)" `vs` "max 3 4"
106 | , "Math.min(1, Math.pow(2, 4))" `vs` "min 1 (2^4)"
107 | , "numbers.map(Math.sqrt)" `vs` "List.map sqrt numbers"
108 | , "points.map(function(p) { return p.x })" `vs` "List.map .x points"
109 | ]
110 |
111 |
112 | controlFlow =
113 | [ "3 > 2 ? 'cat' : 'dog'" `vs` "if 3 > 2 then \"cat\" else \"dog\""
114 | , "var x = 42; ..." `vs` "let x = 42 in ..."
115 | , (Code "return 42", Message "Everything is an expression, no need for return")
116 | ]
117 |
118 |
119 | strings =
120 | [ "'abc' + '123'" `vs` "\"abc\" ++ \"123\""
121 | , "'abc'.length" `vs` "String.length \"abc\""
122 | , "'abc'.toUpperCase()" `vs` "String.toUpper \"abc\""
123 | , "'abc' + 123" `vs` "\"abc\" ++ toString 123"
124 | ]
125 |
126 |
--------------------------------------------------------------------------------
/src/editor/editor.css:
--------------------------------------------------------------------------------
1 | @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
2 |
3 | html, head, body {
4 | padding: 0;
5 | margin: 0;
6 | }
7 |
8 | /* CODE MIRROR */
9 |
10 | .CodeMirror {
11 | height: 100%
12 | }
13 |
14 | .zoom-80 { font-size: 80%; }
15 | .zoom-100 { font-size: 100%; }
16 | .zoom-150 { font-size: 150%; }
17 | .zoom-200 { font-size: 200%; }
18 |
19 | #editor_box {
20 | position: absolute;
21 | left: 0;
22 | right: 0;
23 | top: 40px;
24 | bottom: 0;
25 | }
26 |
27 |
28 | /* CONTROLS */
29 |
30 | .options {
31 | font-family: 'Source Code Pro', monospace;
32 | font-size: 14px;
33 | background-color: #333;
34 | height: 36px;
35 | border-bottom: 4px solid #555;
36 | vertical-align: middle;
37 | line-height: 36px;
38 | }
39 |
40 | .button {
41 | width: 100px;
42 | display: block;
43 | float: right;
44 | cursor: pointer;
45 | color: white;
46 | text-align: center;
47 | }
48 |
49 | .blue {
50 | border-bottom: 4px solid #60B5CC;
51 | }
52 |
53 | .blue:hover {
54 | background-color: #60B5CC;
55 | }
56 |
57 | .green {
58 | border-bottom: 4px solid #7FD13B;
59 | }
60 |
61 | .green:hover {
62 | background-color: #7FD13B;
63 | }
64 |
65 | .yellow {
66 | border-bottom: 4px solid #F0AD00;
67 | }
68 |
69 | .yellow:hover {
70 | background-color: #F0AD00;
71 | }
72 |
73 | .hint {
74 | display: block;
75 | float: left;
76 | overflow: hidden;
77 | text-overflow: ellipsis;
78 | white-space: nowrap;
79 | color: #888;
80 | margin: 0 20px;
81 | height: 36px;
82 | }
83 |
84 | .hint > a {
85 | color: #888;
86 | }
87 |
88 | .hint > a:hover {
89 | color: #aaa;
90 | }
91 |
92 | .hint > a:active {
93 | color: #ccc;
94 | }
95 |
96 |
97 | /* MARKDOWN */
98 |
99 | .doc {
100 | margin: 4px;
101 | }
102 |
103 | .doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
104 | font-weight: bold;
105 | }
106 |
107 | .doc h1 {
108 | color: #000000;
109 | font-size: 28pt;
110 | }
111 |
112 | .doc h2 {
113 | border-bottom: 1px solid #CCCCCC;
114 | color: #000000;
115 | font-size: 24px;
116 | }
117 |
118 | .doc h3 {
119 | font-size: 18px;
120 | }
121 |
122 | .doc h4 {
123 | font-size: 16px;
124 | }
125 |
126 | .doc h5 {
127 | font-size: 14px;
128 | }
129 |
130 | .doc h6 {
131 | color: #777777;
132 | background-color: inherit;
133 | font-size: 14px;
134 | }
135 |
136 | .doc hr {
137 | height: 0.2em;
138 | border: 0;
139 | color: #CCCCCC;
140 | background-color: #CCCCCC;
141 | }
142 |
143 | .doc p, .doc blockquote, .doc ul, .doc ol, .doc dl, .doc li, .doc table, .doc pre {
144 | margin: 8px;
145 | }
146 |
147 | .doc a, .doc a:visited {
148 | color: #4183C4;
149 | background-color: inherit;
150 | text-decoration: none;
151 | }
152 |
153 | .doc code, .doc pre {
154 | font-family: 'Source Code Pro', monospace;
155 | font-size: 10pt;
156 | border-radius: 3px;
157 | background-color: #F5F5F5;
158 | color: inherit;
159 | }
160 |
161 | .doc code {
162 | border: 1px solid #EAEAEA;
163 | margin: 0 2px;
164 | padding: 0 5px;
165 | }
166 |
167 | .doc pre {
168 | border: 1px solid #CCCCCC;
169 | overflow: auto;
170 | padding: 4px 8px;
171 | }
172 |
173 | .doc pre > code {
174 | border: 0;
175 | margin: 0;
176 | padding: 0;
177 | }
178 |
--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
1 | @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic|Source+Code+Pro);
2 |
3 | html, head, body {
4 | margin: 0;
5 | height: 100%;
6 | }
7 |
8 | body {
9 | font-family: 'Source Sans Pro', 'Trebuchet MS', 'Lucida Grande', 'Bitstream Vera Sans', 'Helvetica Neue', sans-serif;
10 | color: #293c4b;
11 | }
12 |
13 | h1, h2, h3, h4 {
14 | margin-top: 1.2em;
15 | margin-bottom: 0.8em;
16 | font-weight: normal;
17 | }
18 |
19 | p {
20 | line-height: 1.5em;
21 | }
22 |
23 | a {
24 | color: #60B5CC;
25 | text-decoration: none;
26 | }
27 | a:hover {
28 | text-decoration: underline;
29 | color: rgb(234,21,122);
30 | }
31 |
32 |
33 | /* content */
34 |
35 | .content li {
36 | margin-bottom: 6px;
37 | }
38 |
39 |
40 | /* guide */
41 |
42 | .guide li ul {
43 | margin: 16px 0;
44 | padding-left: 24px;
45 | }
46 |
47 | .guide li li {
48 | list-style-type: none;
49 | }
50 |
51 | .guide li li a {
52 | color: #34495E;
53 | text-decoration: none;
54 | }
55 |
56 |
57 | /* examples */
58 |
59 | .examples li {
60 | margin-bottom: 4px;
61 | }
62 |
63 | .examples li ul {
64 | margin-top: 6px;
65 | margin-bottom: 20px;
66 | padding-left: 1em;
67 | }
68 |
69 | .examples li li {
70 | list-style-type: none;
71 | }
72 |
73 |
74 | /* top bar */
75 |
76 | #tabs {
77 | padding: 1em;
78 | background-color: #60B5CC;
79 | }
80 |
81 | #tabs ul {
82 | margin: 0;
83 | padding: 0;
84 | list-style-type: none;
85 | text-align: center;
86 | }
87 |
88 | #tabs li {
89 | display: inline-block;
90 | }
91 |
92 | .tab {
93 | text-decoration: none;
94 | color: #34495E;
95 | padding-bottom: 13px;
96 | margin: 0 1.5em;
97 | font-size: 20px;
98 | }
99 |
100 | .tab:hover,
101 | .tab.current {
102 | text-decoration: none;
103 | color: #34495E;
104 | border-bottom: 3px solid #34495E;
105 | }
106 |
107 |
108 | /* splash */
109 |
110 | #splash {
111 | padding: 1em;
112 | background-color: #60B5CC;
113 | color: white;
114 | text-align: center;
115 | }
116 |
117 | #splash a {
118 | text-decoration: none;
119 | border-bottom: 3px solid white;
120 | color: white;
121 | }
122 |
123 |
124 | /* code */
125 |
126 | code {
127 | font-family: 'Source Code Mono', monospace;
128 | }
129 |
130 | /* blogs */
131 |
132 | .author {
133 | padding-top: 1em;
134 | color: #ddd;
135 | display: block;
136 | width: 600px;
137 | margin: 0 auto;
138 | text-align: right;
139 | }
140 |
141 | .author a {
142 | color: #ddd;
143 | text-decoration: underline;
144 | }
145 |
146 | /* Notes */
147 |
148 | blockquote {
149 | display: block;
150 | overflow-x: auto;
151 | padding: 0 1em;
152 | border-radius: 6px;
153 | background-color: #ebebeb;
154 | color: #6C7E8F;
155 | }
156 |
157 | blockquote p {
158 | font-size: 14px;
159 | }
160 |
161 |
162 | /* comparison table */
163 |
164 | .comparison table {
165 | border-collapse: collapse;
166 | text-align: left;
167 | width: 100%;
168 | }
169 | .comparison {
170 | background: #fff;
171 | overflow: hidden;
172 | border: 1px solid #8C8C8C;
173 | border-radius: 3px;
174 | }
175 | .comparison table td, .comparison table th {
176 | padding: 3px 10px;
177 | }
178 | .comparison th {
179 | background: #dddddd;
180 | }
181 | .comparison tr:nth-child(even) {
182 | background: #fbfbfb;
183 | }
--------------------------------------------------------------------------------
/src/examples/crate.elm:
--------------------------------------------------------------------------------
1 | x = 32
2 | {--
3 | import Graphics.Element exposing (..)
4 | import Http exposing (..)
5 | import Math.Vector2 exposing (Vec2)
6 | import Math.Vector3 exposing (..)
7 | import Math.Matrix4 exposing (..)
8 | import Task exposing (Task)
9 | import Time exposing (..)
10 | import WebGL exposing (..)
11 |
12 |
13 | -- SIGNALS
14 |
15 | main : Signal Element
16 | main =
17 | Signal.map perspective angle
18 | |> Signal.map2 view texture.signal
19 | |> Signal.map (webgl (400,400))
20 |
21 |
22 | angle : Signal Float
23 | angle =
24 | Signal.foldp (\dt theta -> theta + dt / 10000) 0 (fps 25)
25 |
26 |
27 | texture : Signal.Mailbox (Maybe Texture)
28 | texture =
29 | Signal.mailbox Nothing
30 |
31 |
32 | port textureFetcher : Task WebGL.Error ()
33 | port textureFetcher =
34 | loadTexture "/texture/woodCrate.jpg"
35 | `Task.andThen` \tex -> Signal.send texture.address (Just tex)
36 |
37 |
38 | -- MESHES
39 |
40 | crate : List (Triangle { pos:Vec3, coord:Vec3 })
41 | crate =
42 | List.concatMap rotatedFace [ (0,0), (90,0), (180,0), (270,0), (0,90), (0,-90) ]
43 |
44 |
45 | rotatedFace : (Float,Float) -> List (Triangle { pos:Vec3, coord:Vec3 })
46 | rotatedFace (angleX,angleY) =
47 | let
48 | x = makeRotate (degrees angleX) (vec3 1 0 0)
49 | y = makeRotate (degrees angleY) (vec3 0 1 0)
50 | t = x `mul` y `mul` makeTranslate (vec3 0 0 1)
51 | in
52 | List.map (WebGL.map (\x -> {x | pos <- transform t x.pos })) face
53 |
54 |
55 | face : List (Triangle { pos:Vec3, coord:Vec3 })
56 | face =
57 | let
58 | topLeft = { pos = vec3 -1 1 0, coord = vec3 0 1 0 }
59 | topRight = { pos = vec3 1 1 0, coord = vec3 1 1 0 }
60 | bottomLeft = { pos = vec3 -1 -1 0, coord = vec3 0 0 0 }
61 | bottomRight = { pos = vec3 1 -1 0, coord = vec3 1 0 0 }
62 | in
63 | [ (topLeft,topRight,bottomLeft)
64 | , (bottomLeft,topRight,bottomRight)
65 | ]
66 |
67 |
68 | -- VIEW
69 |
70 | perspective : Float -> Mat4
71 | perspective angle =
72 | List.foldr mul Math.Matrix4.identity
73 | [ perspectiveMatrix
74 | , camera
75 | , makeRotate (3*angle) (vec3 0 1 0)
76 | , makeRotate (2*angle) (vec3 1 0 0)
77 | ]
78 |
79 |
80 | perspectiveMatrix : Mat4
81 | perspectiveMatrix =
82 | makePerspective 45 1 0.01 100
83 |
84 |
85 | camera : Mat4
86 | camera =
87 | makeLookAt (vec3 0 0 5) (vec3 0 0 0) (vec3 0 1 0)
88 |
89 |
90 | view : Maybe Texture -> Mat4 -> List Entity
91 | view maybeTexture perspective =
92 | case maybeTexture of
93 | Nothing ->
94 | []
95 |
96 | Just tex ->
97 | [entity vertexShader fragmentShader crate { crate = tex, perspective = perspective }]
98 |
99 |
100 | -- SHADERS
101 |
102 | vertexShader : Shader { pos:Vec3, coord:Vec3 } { u | perspective:Mat4 } { vcoord:Vec2 }
103 | vertexShader = [glsl|
104 |
105 | attribute vec3 pos;
106 | attribute vec3 coord;
107 | uniform mat4 perspective;
108 | varying vec2 vcoord;
109 |
110 | void main () {
111 | gl_Position = perspective * vec4(pos, 1.0);
112 | vcoord = coord.xy;
113 | }
114 |
115 | |]
116 |
117 |
118 | fragmentShader : Shader {} { u | crate:Texture } { vcoord:Vec2 }
119 | fragmentShader = [glsl|
120 |
121 | precision mediump float;
122 | uniform sampler2D crate;
123 | varying vec2 vcoord;
124 |
125 | void main () {
126 | gl_FragColor = texture2D(crate, vcoord);
127 | }
128 |
129 | |]
130 | --}
131 |
--------------------------------------------------------------------------------
/src/examples/binary-tree.elm:
--------------------------------------------------------------------------------
1 | {-----------------------------------------------------------------
2 |
3 | A "Tree" represents a binary tree. A "Node" in a binary tree
4 | always has two children. A tree can also be "Empty". Below I have
5 | defined "Tree" and a number of useful functions.
6 |
7 | This example also includes some challenge problems :)
8 |
9 | -----------------------------------------------------------------}
10 |
11 | import Graphics.Element exposing (..)
12 | import Text
13 |
14 |
15 | type Tree a
16 | = Empty
17 | | Node a (Tree a) (Tree a)
18 |
19 |
20 | empty : Tree a
21 | empty =
22 | Empty
23 |
24 |
25 | singleton : a -> Tree a
26 | singleton v =
27 | Node v Empty Empty
28 |
29 |
30 | insert : comparable -> Tree comparable -> Tree comparable
31 | insert x tree =
32 | case tree of
33 | Empty ->
34 | singleton x
35 |
36 | Node y left right ->
37 | if x > y then
38 | Node y left (insert x right)
39 |
40 | else if x < y then
41 | Node y (insert x left) right
42 |
43 | else
44 | tree
45 |
46 |
47 | fromList : List comparable -> Tree comparable
48 | fromList xs =
49 | List.foldl insert empty xs
50 |
51 |
52 | depth : Tree a -> Int
53 | depth tree =
54 | case tree of
55 | Empty -> 0
56 | Node v left right ->
57 | 1 + max (depth left) (depth right)
58 |
59 |
60 | map : (a -> b) -> Tree a -> Tree b
61 | map f tree =
62 | case tree of
63 | Empty -> Empty
64 | Node v left right ->
65 | Node (f v) (map f left) (map f right)
66 |
67 |
68 | t1 = fromList [1,2,3]
69 | t2 = fromList [2,1,3]
70 |
71 |
72 | main : Element
73 | main =
74 | flow down
75 | [ display "depth" depth t1
76 | , display "depth" depth t2
77 | , display "map ((+)1)" (map ((+)1)) t2
78 | ]
79 |
80 |
81 | display : String -> (Tree a -> b) -> Tree a -> Element
82 | display name f value =
83 | name ++ " (" ++ toString value ++ ") ⇒\n " ++ toString (f value) ++ "\n "
84 | |> Text.fromString
85 | |> Text.monospace
86 | |> leftAligned
87 |
88 |
89 | {-----------------------------------------------------------------
90 |
91 | Exercises:
92 |
93 | (1) Sum all of the elements of a tree.
94 |
95 | sum : Tree Number -> Number
96 |
97 | (2) Flatten a tree into a list.
98 |
99 | flatten : Tree a -> List a
100 |
101 | (3) Check to see if an element is in a given tree.
102 |
103 | isElement : a -> Tree a -> Bool
104 |
105 | (4) Write a general fold function that acts on trees. The fold
106 | function does not need to guarantee a particular order of
107 | traversal.
108 |
109 | fold : (a -> b -> b) -> b -> Tree a -> b
110 |
111 | (5) Use "fold" to do exercises 1-3 in one line each. The best
112 | readable versions I have come up have the following length
113 | in characters including spaces and function name:
114 | sum: 16
115 | flatten: 21
116 | isElement: 46
117 | See if you can match or beat me! Don't forget about currying
118 | and partial application!
119 |
120 | (6) Can "fold" be used to implement "map" or "depth"?
121 |
122 | (7) Try experimenting with different ways to traverse a
123 | tree: pre-order, in-order, post-order, depth-first, etc.
124 | More info at: http://en.wikipedia.org/wiki/Tree_traversal
125 |
126 | -----------------------------------------------------------------}
127 |
128 |
129 |
130 |
131 |
--------------------------------------------------------------------------------
/src/backend/Generate.hs:
--------------------------------------------------------------------------------
1 | {-# LANGUAGE OverloadedStrings #-}
2 | module Generate (serverHtml, userHtml, js) where
3 |
4 | import Control.Monad (when)
5 | import Data.Aeson ((.=))
6 | import qualified Data.Aeson as Json
7 | import qualified Data.ByteString.Lazy.Char8 as LBS
8 | import qualified Text.Blaze as Blaze
9 | import Text.Blaze.Html5 ((!))
10 | import qualified Text.Blaze.Html5 as H
11 | import qualified Text.Blaze.Html5.Attributes as A
12 |
13 |
14 | -- JS
15 |
16 | js :: Either Json.Value (String,String) -> Json.Value
17 | js result =
18 | Json.object $
19 | case result of
20 | Left msg ->
21 | [ "error" .= msg ]
22 |
23 | Right (moduleName, jsSource) ->
24 | [ "name" .= moduleName
25 | , "success" .= jsSource
26 | ]
27 |
28 |
29 | -- HTML
30 |
31 | serverHtml :: String -> String -> H.Html
32 | serverHtml name jsSource =
33 | htmlSkeleton False name $
34 | do H.script $ Blaze.preEscapedToMarkup jsSource
35 | H.script "var runningElmModule = Elm.fullscreen(Elm.Main);"
36 |
37 |
38 | userHtml :: Either Json.Value (String, String) -> H.Html
39 | userHtml compilerResult =
40 | case compilerResult of
41 | Right (moduleName, jsSource) ->
42 | htmlSkeleton True moduleName (scripts moduleName jsSource)
43 |
44 | Left err ->
45 | htmlSkeleton True "Oops!" $
46 | do H.script ! A.src "/editor/errors.js" $ ""
47 | H.script $ Blaze.toMarkup (errorJs err)
48 |
49 |
50 | errorJs :: Json.Value -> String
51 | errorJs err =
52 | "var textarea = self.parent.input.document.getElementById('input');\n\
53 | \var errors = Elm.fullscreen(Elm.Errors, {\n\
54 | \ sourceCode: textarea.value,\n\
55 | \ errors: " ++ LBS.unpack (Json.encode err) ++ "\n\
56 | \});\n\
57 | \var editor = self.parent.input.editor;\n\
58 | \errors.ports.jumpTo.subscribe(function(region) {\n\
59 | \ editor.setSelection(position(region.start), position(region.end));\n\
60 | \ editor.focus();\n\
61 | \});\n\
62 | \function position(pos) {\n\
63 | \ return { line: pos.line - 1, ch: pos.column - 1 };\n\
64 | \}"
65 |
66 |
67 | scripts :: H.ToMarkup a => String -> a -> H.Html
68 | scripts moduleName jsSource =
69 | do H.script ! A.src "/editor/everything.js" $ ""
70 | H.script $ Blaze.preEscapedToMarkup jsSource
71 | H.script $ Blaze.preEscapedToMarkup $
72 | "var runningElmModule = Elm.fullscreen(Elm." ++ moduleName ++ ");"
73 |
74 |
75 | -- CREATE HTML DOCUMENTS
76 |
77 | htmlSkeleton :: Bool -> String -> H.Html -> H.Html
78 | htmlSkeleton userGenerated title scripts =
79 | H.docTypeHtml $ do
80 | H.head $ do
81 | H.meta ! A.charset "UTF-8"
82 | H.title (H.toHtml title)
83 | favicon
84 | H.link ! A.rel "stylesheet" ! A.href "/assets/style.css"
85 | when (not userGenerated) $
86 | do googleAnalytics
87 | H.link ! A.rel "stylesheet" ! A.href "/highlight/styles/default.css"
88 | H.script ! A.src "/highlight/highlight.pack.js" $ ""
89 |
90 | H.body scripts
91 |
92 |
93 | favicon :: H.Html
94 | favicon =
95 | H.link
96 | ! A.rel "shortcut icon"
97 | ! A.size "16x16, 32x32, 48x48, 64x64, 128x128, 256x256"
98 | ! A.href "/favicon.ico"
99 |
100 |
101 | googleAnalytics :: H.Html
102 | googleAnalytics =
103 | H.script ! A.type_ "text/javascript" $
104 | "(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n\
105 | \(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n\
106 | \m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n\
107 | \})(window,document,'script','//www.google-analytics.com/analytics.js','ga');\n\
108 | \\n\
109 | \ga('create', 'UA-25827182-1', 'auto');\n\
110 | \ga('send', 'pageview');\n"
111 |
--------------------------------------------------------------------------------
/src/examples/thwomp.elm:
--------------------------------------------------------------------------------
1 | x = 32
2 | {--
3 | -- Thanks to The PaperNES Guy for the texture:
4 | -- http://the-papernes-guy.deviantart.com/art/Thwomps-Thwomps-Thwomps-186879685
5 |
6 | import Graphics.Element exposing (..)
7 | import Http exposing (..)
8 | import Math.Vector2 exposing (Vec2)
9 | import Math.Vector3 as V3 exposing (..)
10 | import Math.Matrix4 exposing (..)
11 | import Mouse
12 | import Task exposing (Task)
13 | import WebGL exposing (..)
14 | import Window
15 |
16 |
17 | -- SIGNALS
18 |
19 | main : Signal Element
20 | main =
21 | let
22 | perspectiveMatrix =
23 | Signal.map2 perspective Window.dimensions Mouse.position
24 | in
25 | Signal.map3 (view face sides) Window.dimensions textures.signal perspectiveMatrix
26 |
27 |
28 | textures : Signal.Mailbox (Maybe Texture, Maybe Texture)
29 | textures =
30 | Signal.mailbox (Nothing, Nothing)
31 |
32 |
33 | port fetchTextures : Task WebGL.Error ()
34 | port fetchTextures =
35 | loadTexture "/texture/thwomp_face.jpg" `Task.andThen` \faceTexture ->
36 | loadTexture "/texture/thwomp_side.jpg" `Task.andThen` \sideTexture ->
37 | Signal.send textures.address (Just faceTexture, Just sideTexture)
38 |
39 |
40 | -- MESHES - define the mesh for a Thwomp's face
41 |
42 | type alias Vertex =
43 | { position : Vec3, coord : Vec3 }
44 |
45 |
46 | face : List (Triangle Vertex)
47 | face =
48 | rotatedSquare (0,0)
49 |
50 |
51 | sides : List (Triangle Vertex)
52 | sides =
53 | List.concatMap rotatedSquare [ (90,0), (180,0), (270,0), (0,90), (0,-90) ]
54 |
55 |
56 | rotatedSquare : (Float,Float) -> List (Triangle Vertex)
57 | rotatedSquare (angleXZ,angleYZ) =
58 | let x = makeRotate (degrees angleXZ) j
59 | y = makeRotate (degrees angleYZ) i
60 | t = x `mul` y
61 | in
62 | List.map (WebGL.map (\v -> {v | position <- transform t v.position })) square
63 |
64 |
65 | square : List (Triangle Vertex)
66 | square =
67 | let topLeft = Vertex (vec3 -1 1 1) (vec3 0 1 0)
68 | topRight = Vertex (vec3 1 1 1) (vec3 1 1 0)
69 | bottomLeft = Vertex (vec3 -1 -1 1) (vec3 0 0 0)
70 | bottomRight = Vertex (vec3 1 -1 1) (vec3 1 0 0)
71 | in
72 | [ (topLeft,topRight,bottomLeft)
73 | , (bottomLeft,topRight,bottomRight)
74 | ]
75 |
76 |
77 | -- VIEW
78 |
79 | perspective : (Int,Int) -> (Int,Int) -> Mat4
80 | perspective (w',h') (x',y') =
81 | let w = toFloat w'
82 | h = toFloat h'
83 | x = toFloat x'
84 | y = toFloat y'
85 |
86 | distance = 6
87 |
88 | eyeX = distance * (w/2 - x) / w
89 | eyeY = distance * (y - h/2) / h
90 | eye = V3.scale distance (V3.normalize (vec3 eyeX eyeY distance))
91 | in
92 | mul (makePerspective 45 (w/h) 0.01 100)
93 | (makeLookAt eye (vec3 0 0 0) j)
94 |
95 |
96 | view : List (Triangle Vertex)
97 | -> List (Triangle Vertex)
98 | -> (Int,Int)
99 | -> (Maybe Texture, Maybe Texture)
100 | -> Mat4
101 | -> Element
102 | view mesh1 mesh2 dimensions (texture1, texture2) perspective =
103 | webgl dimensions
104 | (toEntity mesh1 texture1 perspective ++ toEntity mesh2 texture2 perspective)
105 |
106 |
107 | toEntity : List (Triangle Vertex) -> Maybe Texture -> Mat4 -> List Entity
108 | toEntity mesh response perspective =
109 | response
110 | |> Maybe.map (\texture ->
111 | [ entity vertexShader fragmentShader mesh { texture=texture, perspective=perspective } ])
112 | |> Maybe.withDefault []
113 |
114 |
115 | -- SHADERS
116 |
117 | vertexShader : Shader { position:Vec3, coord:Vec3 } { u | perspective:Mat4 } { vcoord:Vec2 }
118 | vertexShader = [glsl|
119 |
120 | attribute vec3 position;
121 | attribute vec3 coord;
122 | uniform mat4 perspective;
123 | varying vec2 vcoord;
124 |
125 | void main () {
126 | gl_Position = perspective * vec4(position, 1.0);
127 | vcoord = coord.xy;
128 | }
129 |
130 | |]
131 |
132 |
133 | fragmentShader : Shader {} { u | texture:Texture } { vcoord:Vec2 }
134 | fragmentShader = [glsl|
135 |
136 | precision mediump float;
137 | uniform sampler2D texture;
138 | varying vec2 vcoord;
139 |
140 | void main () {
141 | gl_FragColor = texture2D(texture, vcoord);
142 | }
143 |
144 | |]
145 | --}
--------------------------------------------------------------------------------
/src/pages/community.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (..)
2 |
3 | import Center
4 | import TopBar
5 |
6 |
7 | port title : String
8 | port title =
9 | "Elm Community"
10 |
11 |
12 | main =
13 | div []
14 | [ TopBar.topBar "community"
15 | , Center.markdown "600px" community
16 | ]
17 |
18 |
19 |
20 | community = """
21 |
22 | # Community
23 |
24 | * [Community Packages](http://package.elm-lang.org/)
25 | * [Mailing list][list]
26 | * [Reddit][reddit]
27 | * [IRC][irc]
28 | * [Twitter][twitter]
29 | * [Real Life](http://www.meetup.com/Elm-user-group-SF/)
30 | * [Potential projects](https://github.com/elm-lang/projects)
31 | * [Contribution guidelines](https://github.com/elm-lang/elm-compiler/blob/master/CONTRIBUTING.md)
32 |
33 |
34 |
35 | ## Mailing list
36 |
37 | [list]: https://groups.google.com/forum/?fromgroups#!forum/elm-discuss "mailing list"
38 |
39 | There are two main mailing lists. [elm-discuss][list] is a great place for
40 | friendly discussion! Common activities include helping folks use Elm,
41 | discussing API design, reviewing blog posts and libraries, and finding projects
42 | to collaborate on.
43 |
44 | This list is all about learning and improvement, so even if you know a lot
45 | about Elm or functional programming, be humble and open to learning new things
46 | from anyone! Try to read some old emails to get a feel for the culture and who
47 | everyone is.
48 |
49 | The other list, [elm-dev](https://groups.google.com/forum/#!forum/elm-dev), is
50 | for coordinating work on any [elm-lang](https://github.com/elm-lang/) repos.
51 | Check this out if you are looking to contribute to projects like the compiler
52 | or [elm-package](https://github.com/elm-lang/elm-package).
53 |
54 | ## Reddit
55 |
56 | [reddit]: http://www.reddit.com/r/elm
57 |
58 | Check out [/r/elm][reddit] to find out about new libraries and read blog posts.
59 | Or even better, use it to announce libraries and post your own blog posts!
60 |
61 | ## IRC
62 |
63 | [irc]: http://webchat.freenode.net/?channels=elm
64 |
65 | Got a quick question, but do not feel comfortable asking on the mailing list?
66 | Chatting on [#elm][irc] is a great way to learn from a real person. Share code
67 | snippets with [share-elm.com](http://www.share-elm.com).
68 |
69 | As for culture, prefer to ask rather than tell. You may be talking to someone
70 | with no programming background or a PhD in programming languages, so to answer
71 | a question well, you should start by asking some questions yourself! This way
72 | we can avoid XY problems, and better yet, have a culture that is kind and
73 | respectful to everyone.
74 |
75 | ## Twitter
76 |
77 | [twitter]: https://twitter.com/elmlang
78 |
79 | Both [@elmlang][twitter] and [@czaplic](https://twitter.com/czaplic) tweet about
80 | Elm a lot. The #elmlang hashtag is commonly used. Using #elm is okay, but people
81 | tweet about weird stuff with that one sometimes.
82 |
83 | ## Real Life
84 |
85 | [Evan Czaplicki](http://github.com/evancz) will periodically organize [Elm user
86 | group](http://www.meetup.com/Elm-user-group-SF/) meetups in SF to learn and
87 | work on projects together. The format is great for supporting new users and
88 | encouraging interesting projects!
89 |
90 | Think about organizing meetings in your city, it is fun!
91 |
92 | There are a ton of Elm folks on the East coast, so Boston and New York would
93 | both be great places for meetups. The European community is also quite strong,
94 | London in particular it seems. We had [Elm Workshop][workshop] in 2013
95 | with speakers and attendees from all over Europe, so I think it is worth a
96 | shot!
97 |
98 | [workshop]: https://www.youtube.com/channel/UCzbnVYNyCwES9u3dqYZ-0WQ
99 |
100 |
101 | ## Contribute
102 |
103 | There are a bunch of projects in [the elm-lang
104 | organization](http://github.com/elm-lang), including the compiler, REPL, server,
105 | package manager, debugger, public library, and this website.
106 |
107 | We have found that a good way to make contributions is to hang out on the
108 | [mailing list][list] to learn about the ongoing challenges. Becoming a part of
109 | this discussion will make it much clearer how you can effectively help the
110 | community or a specific project based on your skills and interests.
111 |
112 | """
113 |
--------------------------------------------------------------------------------
/src/pages/docs/style-guide.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (..)
2 |
3 | import Blog
4 | import Center
5 |
6 |
7 | port title : String
8 | port title =
9 | "Style Guide"
10 |
11 |
12 | main =
13 | Blog.docs
14 | "Style Guide"
15 | [ Center.markdown "600px" content
16 | ]
17 |
18 |
19 | content = """
20 |
21 | **Goal:** a consistent style that is easy to read and produces clean diffs.
22 | This means trading aggressively compact code for regularity and ease of
23 | modification.
24 |
25 | ## Line Length
26 |
27 | Keep it under 80 characters. Going over is not the end of the world, but
28 | consider refactoring before you decide a line really must be longer. Long lines
29 | can be a good sign that it is time to break things up and refactor.
30 |
31 |
32 | ## Variables
33 |
34 | **Be Descriptive.** One character abbreviations are rarely acceptable,
35 | especially not as arguments for top-level function declarations where you have
36 | no real context about what they are.
37 |
38 | **Qualify variables.** Always prefer qualified names. `Set.union` is always
39 | preferable to `union`. In large files and in large projects, it becomes very
40 | very difficult to figure out where variables came from without this.
41 |
42 |
43 | ## Declarations
44 |
45 | Always have type annotations on top-level definitions.
46 |
47 | Always have 2 empty lines between top-level declarations.
48 |
49 | Always bring the body of the declaration down one line.
50 |
51 | ### Good
52 |
53 | ```elm
54 | homeDirectory : String
55 | homeDirectory =
56 | "/root/files"
57 |
58 |
59 | evaluate : Boolean -> Bool
60 | evaluate boolean =
61 | case boolean of
62 | Literal bool ->
63 | bool
64 |
65 | Not b ->
66 | not (evaluate b)
67 |
68 | And b b' ->
69 | evaluate b && evaluate b'
70 |
71 | Or b b' ->
72 | evaluate b || evaluate b'
73 | ```
74 |
75 | Now imagine one of the cases in `evaluate` becomes drastically more
76 | complicated. Nothing needs to be reformatted so the diff will be minimal and
77 | the result will still look quite nice.
78 |
79 |
80 | ### Bad
81 |
82 | ```elm
83 | homeDirectory = "/root/files"
84 |
85 | eval boolean = case boolean of
86 | Literal bool -> bool
87 | Not b -> not (eval b)
88 | And b b' -> eval b && eval b'
89 | Or b b' -> eval b || eval b'
90 | ```
91 |
92 | We saved vertical lines here, but at the cost of regularity and ease of
93 | modification. If `Literal` ever becomes longer, all arrows must move. If any
94 | branch gets to long, everything needs to come down a line anyway.
95 |
96 | Having `case` appear *later* than the actual cases is strongly discouraged. It
97 | should serve as a context clue that makes glancing through code easy, but when
98 | indented in crazy ways, it becomes more difficult to glance through.
99 |
100 |
101 | ## Types
102 |
103 | Do not be a maniac with indentation. Simplicity will be better in the long run.
104 |
105 |
106 | ### Good
107 |
108 | ```elm
109 | type Boolean
110 | = Literal Bool
111 | | Not Boolean
112 | | And Boolean Boolean
113 | | Or Boolean Boolean
114 |
115 |
116 | type alias Circle =
117 | { x : Float
118 | , y : Float
119 | , radius : Float
120 | }
121 |
122 |
123 | type alias Graph =
124 | List (Int, List Int)
125 | ```
126 |
127 | ### Bad
128 |
129 | ```elm
130 | type Boolean = Literal Bool
131 | | Not Boolean
132 | | And Boolean Boolean
133 | | Or Boolean Boolean
134 |
135 | type alias Circle = {
136 | x : Float,
137 | y : Float,
138 | radius : Float
139 | }
140 |
141 | type alias Graph = List (Int, List Int)
142 | ```
143 |
144 | Changing the name `Boolean` ever will change the indentation on all subsequent
145 | lines. This leads to messy diffs and provides no concrete value.
146 |
147 | If we ever add a new field to `Circle` that is longer than `radius` we have to
148 | change the indentation of all lines, leading to a bad diff. Furthermore, ending
149 | lines with a comma makes diffs messier because adding a field must change two
150 | lines instead of one.
151 |
152 | If we change the name of the type alias `Graph` it'll be less clear if
153 | everything is on the same line. Did we change the name or the meaning?
154 | Furthermore, if the type being aliased ever becomes too long, it will need to
155 | move down a line anyway.
156 |
157 | """
158 |
--------------------------------------------------------------------------------
/src/examples/flickr.elm:
--------------------------------------------------------------------------------
1 | import Html exposing (..)
2 | import Html.Attributes as Attr exposing (..)
3 | import Html.Events exposing (..)
4 | import Http
5 | import Json.Decode as Json exposing ((:=))
6 | import String
7 | import Task exposing (..)
8 | import Window
9 |
10 |
11 | -- VIEW
12 |
13 | view : Int -> String -> String -> Html
14 | view h string imgUrl =
15 | div [ style (imgStyle h imgUrl) ]
16 | [ input
17 | [ placeholder "Flickr Query"
18 | , Attr.value string
19 | , on "input" targetValue (Signal.message query.address)
20 | , style myStyle
21 | ]
22 | []
23 | ]
24 |
25 |
26 | myStyle : List (String, String)
27 | myStyle =
28 | [ ("width", "100%")
29 | , ("height", "40px")
30 | , ("padding", "10px 0")
31 | , ("font-size", "2em")
32 | , ("text-align", "center")
33 | ]
34 |
35 |
36 | imgStyle : Int -> String -> List (String, String)
37 | imgStyle h src =
38 | [ ("background-image", "url('" ++ src ++ "')")
39 | , ("background-repeat", "no-repeat")
40 | , ("background-attachment", "fixed")
41 | , ("background-position", "center")
42 | , ("width", "100%")
43 | , ("height", toString h ++ "px")
44 | ]
45 |
46 |
47 | -- WIRING
48 |
49 | main : Signal Html
50 | main =
51 | Signal.map3 view Window.height query.signal results.signal
52 |
53 |
54 | results : Signal.Mailbox String
55 | results =
56 | Signal.mailbox "waiting.gif"
57 |
58 |
59 | port requestImgs : Signal (Task Http.Error ())
60 | port requestImgs =
61 | query.signal
62 | |> sample getImage Window.dimensions
63 | |> Signal.map (\task -> task `andThen` Signal.send results.address)
64 |
65 |
66 | sample f sampled events =
67 | Signal.sampleOn events (Signal.map2 f sampled events)
68 |
69 |
70 | query : Signal.Mailbox String
71 | query =
72 | Signal.mailbox ""
73 |
74 |
75 | getImage : (Int,Int) -> String -> Task Http.Error String
76 | getImage dimensions tag =
77 | let searchArgs =
78 | [ ("sort", "random"), ("per_page", "10"), ("tags", tag) ]
79 | in
80 | Http.get photoList (flickr "search" searchArgs)
81 | `andThen`
82 | selectPhoto
83 | `andThen` \photo ->
84 | Http.get sizeList (flickr "getSizes" [ ("photo_id", photo.id) ])
85 | `andThen`
86 | pickSize dimensions
87 |
88 |
89 | -- JSON DECODERS
90 |
91 | type alias Photo =
92 | { id : String
93 | , title : String
94 | }
95 |
96 |
97 | type alias Size =
98 | { source : String
99 | , width : Int
100 | , height : Int
101 | }
102 |
103 |
104 | photoList : Json.Decoder (List Photo)
105 | photoList =
106 | Json.at ["photos","photo"] <| Json.list <|
107 | Json.object2 Photo
108 | ("id" := Json.string)
109 | ("title" := Json.string)
110 |
111 |
112 | sizeList : Json.Decoder (List Size)
113 | sizeList =
114 | let number =
115 | Json.oneOf [ Json.int, Json.customDecoder Json.string String.toInt ]
116 | in
117 | Json.at ["sizes","size"] <| Json.list <|
118 | Json.object3 Size
119 | ("source" := Json.string)
120 | ("width" := number)
121 | ("height" := number)
122 |
123 |
124 | -- FLICKR URLS
125 |
126 | flickr : String -> List (String, String) -> String
127 | flickr method args =
128 | Http.url "https://api.flickr.com/services/rest/" <|
129 | [ ("format", "json")
130 | , ("nojsoncallback", "1")
131 | , ("api_key", "9be5b08cd8168fa82d136aa55f1fdb3c")
132 | , ("method", "flickr.photos." ++ method)
133 | ] ++ args
134 |
135 |
136 | -- HANDLE RESPONSES
137 |
138 | selectPhoto : List Photo -> Task Http.Error Photo
139 | selectPhoto photos =
140 | case photos of
141 | photo :: _ -> succeed photo
142 | [] ->
143 | fail (Http.UnexpectedPayload "expecting 1 or more photos from Flickr")
144 |
145 |
146 | pickSize : (Int,Int) -> List Size -> Task Http.Error String
147 | pickSize (width,height) sizes =
148 | let sizeRating size =
149 | let penalty =
150 | if size.width > width || size.height > height then 400 else 0
151 | in
152 | abs (width - size.width) + abs (height - size.height) + penalty
153 | in
154 | case List.sortBy sizeRating sizes of
155 | size :: _ -> succeed size.source
156 | [] ->
157 | fail (Http.UnexpectedPayload "expecting 1 or more image sizes to choose from")
158 |
--------------------------------------------------------------------------------