Permalink
Browse files

Update docs and examples for version 0.4

  • Loading branch information...
1 parent 3e07a6c commit 117dcc7ff74e95e71a3efd2bd2342363cecb10a8 Evan Czaplicki committed Sep 16, 2012
Showing with 698 additions and 434 deletions.
  1. +27 −24 Documentation.elm
  2. +21 −16 Download.elm
  3. +53 −45 Elm.elm
  4. +37 −25 Examples.elm
  5. +14 −12 Website/Docs.elm
  6. +18 −17 Website/Skeleton.elm
  7. +4 −4 Website/Tiles.elm
  8. +226 −0 blog/announcement/version-0.4.0.elm
  9. +0 −14 docs/Color.elm
  10. +0 −48 docs/Element.elm
  11. +14 −0 docs/Graphics/Color.elm
  12. +95 −0 docs/Graphics/Element.elm
  13. +3 −2 docs/{ → Graphics}/Text.elm
  14. +0 −27 docs/Line.elm
  15. +0 −29 docs/Shape.elm
  16. +23 −10 examples/Basic.elm
  17. +2 −2 examples/Elements/FlowDown2.elm
  18. +1 −1 examples/Elements/Image.elm
  19. +4 −3 examples/Elements/Layers.elm
  20. +3 −3 examples/Elements/Lines.elm
  21. +1 −1 examples/Elements/Opacity.elm
  22. +1 −1 examples/Elements/Size.elm
  23. +11 −8 examples/Elements/Text.elm
  24. +3 −3 examples/Elements/Transforms.elm
  25. +1 −1 examples/Elements/Video.elm
  26. +21 −15 examples/ElmHaskell.elm
  27. +19 −18 examples/ElmJS.elm
  28. +1 −1 examples/Functional/Tree.elm
  29. +14 −10 examples/Intermediate.elm
  30. +1 −1 examples/Intermediate/FibonacciTiles.elm
  31. +16 −16 examples/Intermediate/Form.elm
  32. +10 −12 examples/Intermediate/LightBox.elm
  33. +3 −3 examples/Intermediate/PascalsTriangle.elm
  34. +1 −1 examples/Intermediate/SlideShow.elm
  35. +5 −7 examples/Intermediate/Stamps.elm
  36. +4 −4 examples/Intermediate/Web.elm
  37. +3 −2 examples/JavaScript/Modify.elm
  38. +1 −18 examples/Reactive/Centering.elm
  39. +1 −1 examples/Reactive/CheckBox.elm
  40. +1 −0 examples/Reactive/DropDown.elm
  41. +1 −1 examples/Reactive/Password.elm
  42. +2 −2 examples/Reactive/ResizePaint.elm
  43. +5 −2 examples/Reactive/ResizeYogi.elm
  44. +1 −1 examples/Reactive/TextField.elm
  45. +3 −2 examples/Reactive/Transforms.elm
  46. +1 −1 examples/Reactive/ZipCodes.elm
  47. +22 −20 examples/ThisWebsite.elm
View
@@ -2,8 +2,7 @@
import Website.Skeleton (addSpaces, skeleton)
import Website.Tiles (tile)
import Data.List
-
-section = text . bold . Text.height (5/4) . toText
+import Graphics.Text as Text
standard = ("General Purpose",
[ ("Data.Char", "docs/Data/Char.elm")
@@ -12,12 +11,10 @@ standard = ("General Purpose",
, ("Prelude", "docs/Prelude.elm")
])
-elements = ("Display",
- [ ("Element", "docs/Element.elm")
- , ("Text", "docs/Text.elm")
- , ("Color", "docs/Color.elm")
- , ("Shape", "docs/Shape.elm")
- , ("Line", "docs/Line.elm")
+elements = ("Graphics",
+ [ ("Graphics.Element", "docs/Graphics/Element.elm")
+ , ("Graphics.Color" , "docs/Graphics/Color.elm")
+ , ("Graphics.Text", "docs/Graphics/Text.elm")
])
reaction = ("Signals",
@@ -37,26 +34,32 @@ ffi = ("JavaScript Interface",
, ("Foreign.JavaScript.JSON", "docs/Foreign/JavaScript/JSON.elm")
])
-intro = [ section "Library Documentation"
- , text $ toText "This section provides type-signatures and explanations of Elm's current " ++
- toText "standard libraries."
- , text $ link "http://www.testblogpleaseignore.com" (toText "This blog") ++
- toText " is the source of some discussion and announcements. It also has more detailed information on the " ++
- link "http://www.testblogpleaseignore.com/2012/06/19/announcing-elm-0-3-modules/" (toText "module system") ++
- toText " and " ++
- link "http://www.testblogpleaseignore.com/2012/06/29/announcing-elm-0-3-5-javascript-integration-signal-filters-and-more/" (toText "JavaScript integration") ++
- toText "."
- , text $ toText "My " ++
- link "http://www.testblogpleaseignore.com/wp-content/uploads/2012/04/thesis.pdf" (toText "thesis") ++
- toText " gives a more formal specification of Elm."
- ]
-
-linkify (name, src) = toText " " ++ link src (toText name)
+intro = [markdown|
+
+### Library Documentation
+
+This section provides type-signatures and explanations of Elm's current
+standard libraries.
+
+[This blog][1] is the source of some discussion and
+announcements. It also has more detailed information on the [module system][2]
+and [JavaScript integration][3].
+
+My [thesis][4] gives a more formal specification of Elm.
+
+ [1]: http://www.testblogpleaseignore.com "Elm blog"
+ [2]: http://www.testblogpleaseignore.com/2012/06/19/announcing-elm-0-3-modules/ "module system"
+ [3]: http://www.testblogpleaseignore.com/2012/06/29/announcing-elm-0-3-5-javascript-integration-signal-filters-and-more/ "JavaScript integration"
+ [4]: http://www.testblogpleaseignore.com/wp-content/uploads/2012/04/thesis.pdf "Elm Thesis"
+
+|]
+
+linkify (name, src) = toText " " ++ Text.link src (toText name)
linkList (name, pairs) =
flow down . map text $ bold (toText name) : map linkify pairs
links = map linkList [ standard, elements, reaction, ffi ]
categories w =
- flow down . map (width w) . addSpaces $ intro ++ links
+ flow down . map (width w) . intersperse (plainText " ") $ intro : links
main = lift (skeleton categories) Window.width
View
@@ -1,21 +1,26 @@
import Website.Skeleton
+import Signal.Window as Window
-section = text . bold . Text.height (7/6) . toText
-
-info w = flow down . map (width w) . addSpaces $
- [ section "Installation"
- , text $ toText "See these " ++ link "https://github.com/evancz/Elm/blob/master/README.md" (toText "install instructions") ++
- toText " to get Elm running on your machine. If you run into problems, you should email the " ++
- link "https://groups.google.com/forum/?fromgroups#!forum/elm-discuss" (toText "mailing list") ++
- toText " or report an issue to Elm's " ++
- link "https://github.com/evancz/Elm" (toText "source repository") ++ toText "."
- , rectangle 1 1
- , section "Thesis on Elm"
- , text $ toText "My " ++
- link "http://www.testblogpleaseignore.com/wp-content/uploads/2012/04/thesis.pdf" (toText "thesis on Elm") ++
- toText " is available though. It provides a more formal definition of Elm and a discription of Concurrent FRP, a new " ++
- toText "approach to efficient Functional Reactive Programming."
- ]
+info w = width w [markdown|
+
+### Installation
+
+See these [install instructions][1] to get Elm running on your machine.
+If you run into problems, you should email the [mailing list][2]
+or report an issue to Elm's [source repository][3]
+
+### Thesis on Elm
+
+My [thesis on Elm][4] is available too. It provides a more formal
+definition of Elm and a discription of Concurrent FRP, a new approach
+to efficient Functional Reactive Programming.
+
+ [1]: https://github.com/evancz/Elm/blob/master/README.md "install instructions"
+ [2]: https://groups.google.com/forum/?fromgroups#!forum/elm-discuss "email list"
+ [3]: https://github.com/evancz/Elm "source repository"
+ [4]: http://www.testblogpleaseignore.com/wp-content/uploads/2012/04/thesis.pdf "thesis on Elm"
+
+|]
main = lift (skeleton info) Window.width
View
98 Elm.elm
@@ -2,58 +2,66 @@
import Website.Skeleton
import Website.Tiles
-section = text . bold . Text.height (5/4) . toText
+intro = [markdown|
-examples =
+### The Elm Programming Language
+
+The Elm programming language aims to make web development
+more pleasant. Elm is a type-safe, functional reactive language
+that compiles to HTML, CSS, and JavaScript. You can start coding
+in Elm without any install or setup with Elm's [interactive editor][1],
+so start learning Elm by [example][2]:
+
+ [1]: /edit/examples/Reactive/Transforms.elm "interactive editor"
+ [2]: /Examples.elm "example"
+
+|]
+
+exampleData =
[ ("Layout" , "FlowDown2" , "Elements/")
, ("Shapes" , "Shapes" , "Elements/")
, ("Analog Clock" , "Clock" , "Intermediate/")
, ("Slide Show" , "SlideShow" , "Intermediate/")
, ("Form Validation", "Form" , "Intermediate/")
]
+examples w = let tiles = tile w $ map toTile exampleData in
+ container w (heightOf tiles) middle tiles
+
+rest = [markdown|
+
+Elm's major distinguishing features are support for [reactive programming][1]
+and its focus on graphical user interfaces. Elm is also [call-by-value][2] and
+[strongly][3] / [statically][4] typed with [type-inference]5], so those of you
+already familiar with languages like Haskell or ML should be quite comfortable.
+
+The language features mentioned above help catch errors in your code at
+compile time, but there are some errors that are external to your code,
+such as browser incompatabilities. By using HTML, CSS, and JavaScript as
+an assembly language, Elm can avoid some of these problems.
+
+ [1]: http://en.wikipedia.org/wiki/Reactive_programming "reactive programming"
+ [2]: http://en.wikipedia.org/wiki/Evaluation_strategy "call-by-value"
+ [3]: http://en.wikipedia.org/wiki/Strong_typing "strongly"
+ [4]: http://en.wikipedia.org/wiki/Type_system#Static_typing "statically"
+ [5]: http://en.wikipedia.org/wiki/Type_inference "type inference"
+
+<br/>
+
+#### News
+
+Version 0.3.6 of the compiler is available: JSON support, improved errors messages, and a bunch of bug fixes. Details [here][6].
+
+ [6]: http://www.testblogpleaseignore.com/2012/08/16/elm-0-3-6json-support-and-better-error-messages/ "announcement"
+
+#### Contact
+
+See the Elm [mailing list][7] for questions, announcements, and discussion. You can contact me directly at info (at) elm-lang (dot) org.
+
+ [7]: https://groups.google.com/forum/?fromgroups#!forum/elm-discuss "mailing list"
+
+|]
+
+info w = flow down $ map (width w) [ intro, examples w, rest ]
-info w = flow down . map (width w) . addSpaces $
- [ section "The Elm Programming Language"
- , text $ toText "The Elm programming language aims to make web development " ++
- toText "more pleasant. Elm is a type-safe, functional reactive language " ++
- toText "that compiles to HTML, CSS, and JavaScript. You can start coding " ++
- toText "in Elm without any install or setup with Elm's " ++
- link "/edit/examples/Reactive/Transforms.elm" (toText "interactive editor") ++
- toText ", so start learning Elm by " ++
- link "/Examples.elm" (toText "example") ++ toText ":"
- , width w . box 2 . tile w $ map toTile examples
- , text $ toText "Elm's major distinguishing features are support for " ++
- link "http://en.wikipedia.org/wiki/Reactive_programming" (toText "reactive programming") ++
- toText " and its focus on graphical user interfaces. Elm is also " ++
- link "http://en.wikipedia.org/wiki/Evaluation_strategy" (toText "call-by-value") ++ toText " and " ++
- link "http://en.wikipedia.org/wiki/Strong_typing" (toText "strongly") ++ toText " / " ++
- link "http://en.wikipedia.org/wiki/Type_system#Static_typing" (toText "statically") ++ toText " typed with " ++
- link "http://en.wikipedia.org/wiki/Type_inference" (toText "type inference") ++
- toText ", so those of you already familiar with languages like Haskell or ML should be quite comfortable."
- , plainText $ "The language features mentioned above help catch errors in your code at compile time, but there are " ++
- "some errors that are external to your code, such as browser incompatabilities. By using HTML, CSS, and " ++
- "JavaScript as an assembly language, Elm can avoid some of these problems."
- , rectangle 1 5
- , section "Status Update"
- , text $ toText "Version 0.3.6 of the compiler is now available: JSON support, improved errors messages, and a bunch of bug fixes. Details " ++
- link "http://www.testblogpleaseignore.com/" (toText "here") ++ toText "."
- , text $ toText "Version 0.3.5 of the compiler is now available: JavaScript integration, signal filters, and more! Details " ++
- link "http://www.testblogpleaseignore.com/2012/06/29/announcing-elm-0-3-5-javascript-integration-signal-filters-and-more/" (toText "here") ++ toText "."
- , text $ toText "Version 0.3 of the compiler is now available: Modules and improved errors. Details " ++
- link "http://www.testblogpleaseignore.com/2012/06/19/announcing-elm-0-3-modules/" (toText "here") ++ toText "."
- , text $ toText "Version 0.2 of the compiler was recently released. Error messages have been significantly improved, " ++
- toText "basic optimizations are performed, noscript tags are generated, " ++
- toText "there is Haskell integration (to serve code with Yesod, Snap, HAppStack, etc.), " ++
- toText "pattern matching has been improved, and some minor bugs have been fixed. " ++
- toText "Upgrade with the command " ++ monospace (toText "cabal install elm-server") ++
- toText " or see the " ++ link "/Download.elm" (toText "downloads page") ++ toText " to get started from scratch."
- , text $ toText "New examples are available " ++
- link "/examples/Intermediate.elm" (toText "here") ++
- toText ". These larger and more complex examples show how Elm can create mid-size components."
- , text $ toText "See the Elm " ++
- link "https://groups.google.com/forum/?fromgroups#!forum/elm-discuss" (toText "mailing list") ++
- toText " for questions, announcements, and discussion. You can contact me directly at info (at) elm-lang (dot) org."
- ]
-
main = lift (skeleton info) Window.width
View
@@ -2,7 +2,40 @@
import Website.Skeleton
import Website.Tiles
-section = text . bold . Text.height (5/4) . toText
+words = [markdown|
+
+### Learn by Example
+
+Elm's interactive editor allows you to learn Elm by seeing and modifying
+actual code. There are a couple categories of examples for designed to build
+certain skills:
+
+[Basic][1] &#8212; the basic building blocks of Elm
+
+[Intermediate][2] &#8212; building components with Elm
+
+[Elm + JavaScript][3] &#8212; use existing JavaScript libraries, features, etc.
+
+[Elm + Haskell][4] &#8212; serve Elm code without leaving Haskell
+
+[This Website][5] &#8212; the Elm source code for this site
+
+[Elm for Games][6] &#8212; how to make games in Elm
+
+<br/>
+
+ [1]: /examples/Basic.elm "Basic"
+ [2]: /examples/Intermediate.elm "Intermediate"
+ [3]: /examples/ElmJS.elm "Elm + JavaScript"
+ [4]: /examples/ElmHaskell.elm "Elm + Haskell"
+ [5]: /examples/ThisWebsite.elm "This Website"
+ [6]: /blog/games-in-elm/part-0/Making-Pong.html "Elm for Games"
+
+### Quick Overview of Elm
+
+If you just want a brief overview, check out the following examples:
+
+|]
examples =
[ ("Layout" , "FlowDown2" , "Elements/")
@@ -16,28 +49,7 @@ examples =
, ("This Page" , "Examples" , "../")
]
-content w =
- [ section "Learn by Example"
- , plainText $ "Elm's interactive editor allows you to learn Elm by seeing and modifying actual code. " ++
- "There are a couple categories of examples for designed to build certain skills:"
- , text $ link "/examples/Basic.elm" (toText "Basic") ++
- toText " &#8212; the basic building blocks of Elm"
- , text $ link "/examples/Intermediate.elm" (toText "Intermediate") ++
- toText " &#8212; building components with Elm"
- , text $ link "/examples/ElmJS.elm" (toText "Elm + JavaScript") ++
- toText " &#8212; use existing JavaScript libraries, features, etc."
- , text $ link "/examples/ElmHaskell.elm" (toText "Elm + Haskell") ++
- toText " &#8212; serve Elm code without leaving Haskell"
- , text $ link "/examples/ThisWebsite.elm" (toText "This Website") ++
- toText " &#8212; the Elm source code for this site"
- , text $ link "/blog/games-in-elm/part-0/Making-Pong.html" (toText "Elm for Games") ++
- toText " &#8212; how to make games in Elm"
- , rectangle 1 5
- , section "Quick Overview of Elm"
- , plainText "If you just want a brief overview, check out the following examples:"
- , width w . box 2 . tile w $ map toTile examples
- ]
-
-exampleSets w = flow down . map (width w) . addSpaces $ content w
+content w = let tiles = tile w $ map toTile examples in
+ width w words `above` container w (heightOf tiles) middle tiles
-main = lift (skeleton exampleSets) Window.width
+main = lift (skeleton content) Window.width
View
@@ -7,31 +7,33 @@ lightGrey = rgb 245 245 245
mediumGrey = rgb 216 221 225
skeleton body outer =
- flow down [ space 15 , width outer . box 2 . body $ outer - 80
- , size outer 50 . box 8 . text . Text.color mediumGrey $
+ let content = body (outer - 80) in
+ flow down [ spacer outer 15
+ , container outer (heightOf content) midTop content
+ , container outer 50 midBottom . text . Text.color mediumGrey $
toText "&copy; 2011-2012 Evan Czaplicki"
]
-space px = rectangle 1 px
-addSpaces px = map (\f -> f ()) . intersperse (\x -> space px) . map (\e x -> e)
+addSpaces px = intersperse (spacer 1 px)
section s = bold . Text.height s . toText
entry w (name, typ, desc) =
let tipe = if length typ > 0 then " :: " ++ typ else "" in
flow down
- [ color mediumGrey $ rectangle w 1
+ [ color mediumGrey $ spacer w 1
, width w . color lightGrey . text . monospace $ bold (toText name) ++ toText tipe
- , space 10
- , flow right [ rectangle 50 10, width (w-50) . text . toText $ desc ]
- , space 20
+ , spacer 1 10
+ , flow right [ spacer 50 10, width (w-50) $ plainText desc ]
+ , spacer 1 20
]
group w (name, fs) =
- flow down $ text (section (5/4) name) : space 20 : map (entry w) fs
+ flow down $ text (section (5/4) name) : spacer 1 20 : map (entry w) fs
createDocs name cats =
- let f w = flow down $ [ text $ link "/Documentation.elm" (toText "Back")
+ let f w = flow down $ [ text $ Text.link "/Documentation.elm" (toText "Back")
, width w . centeredText $ section 2 name
- , space 30 ] ++ (addSpaces 50 $ map (group w) cats) in
- lift (skeleton f) Window.width
+ , spacer 1 30
+ ] ++ (addSpaces 50 $ map (group w) cats)
+ in lift (skeleton f) Window.width
View
@@ -1,28 +1,29 @@
-module Website.Skeleton (skeleton, addSpaces) where
+module Website.Skeleton (skeleton) where
-import Data.List (intersperse)
-
-button (name, href) = size 100 60 . Element.link href . size 100 60 . box 5 $ plainText name
-buttons = size 400 60 . flow right . map button $
- [ ("Home","/"), ("Examples","/Examples.elm"), ("Docs","/Documentation.elm"), ("Download","/Download.elm") ]
-
-title w = size w 60 . box 4 . text . bold . Text.height 2 . toText $ "Elm"
+button (name, href) = link href . container 100 60 middle $ plainText name
+buttons = flow right . map button $
+ [ ("Home" , "/" )
+ , ("Examples", "/Examples.elm" )
+ , ("Docs" , "/Documentation.elm")
+ , ("Download", "/Download.elm" ) ]
lightGrey = rgb 245 245 245
mediumGrey = rgb 216 221 225
+title w = container w 60 midLeft . text . Text.height 2 . bold $ toText "Elm"
+
heading outer inner =
- color mediumGrey . size outer 61 . box 1 .
- color lightGrey . size outer 60 . box 5 .
- size inner 60 . box 5 $ title (inner-400) `beside` buttons
+ color mediumGrey . container outer 61 midTop .
+ color lightGrey . container outer 60 middle .
+ container inner 60 middle $ title (inner - widthOf buttons) `beside` buttons
-skeleton body outer =
+skeleton bodyFunc outer =
let inner = if outer < 820 then outer - 20 else 800 in
+ let body = bodyFunc inner in
flow down [ heading outer inner
- , width outer . box 2 $ rectangle 1 30 `above` body inner
- , size outer 50 . box 8 . text . Text.color mediumGrey $
+ , spacer outer 10
+ , container outer (heightOf body) middle body
+ , container outer 50 midBottom . text . Text.color mediumGrey $
toText "&copy; 2011-2012 Evan Czaplicki"
- ]
-
-addSpaces = map (\f -> f ()) . intersperse (\x -> rectangle 1 14) . map (\e x -> e)
+ ]
Oops, something went wrong.

0 comments on commit 117dcc7

Please sign in to comment.