make purty and add component

examples/elm-ui/src/Components/LinkPage.elm

@@ -0,0 +1,27 @@
+module Components.LinkPage exposing (view)
+
+import Element exposing (..)
+import Element.Font as Font
+import Route exposing (Route)
+
+
+view :
+    { title : String
+    , link : { label : String, route : Route }
+    }
+    -> Element msg
+view options =
+    column [ centerX, centerY, Font.center, spacing 24 ]
+        [ el [ Font.bold, Font.size 48, centerX ] (text options.title)
+        , link
+            [ Font.underline
+            , Font.color (rgb 0 0.5 0.85)
+            , centerX
+            , mouseOver
+                [ alpha 0.75
+                ]
+            ]
+            { url = Route.toPath options.link.route
+            , label = text options.link.label
+            }
+        ]

examples/elm-ui/src/Main.elm

@@ -2,10 +2,9 @@ module Main exposing (main)
 
 import Application
 import Components.Layout as Layout
-import Element exposing (Element)
+import Element
 import Flags exposing (Flags)
 import Global
-import Html exposing (Html)
 import Pages
 import Route
 
@@ -13,7 +12,15 @@ import Route
 main : Application.Program Flags Global.Model Global.Msg Pages.Model Pages.Msg
 main =
     Application.createWith
-        layout
+        { toLayout =
+            Element.layout
+                [ Element.height Element.fill
+                , Element.width Element.fill
+                ]
+        , fromAttribute = Element.htmlAttribute
+        , map = Element.map
+        , node = Element.column
+        }
         { routing =
             { transition = 200
             , fromUrl = Route.fromUrl
@@ -32,20 +39,3 @@ main =
             }
         }
         |> Application.start
-
-
-layout : Adapters a b
-layout =
-    { toLayout = Element.layout [ Element.height Element.fill, Element.width Element.fill ]
-    , fromAttribute = Element.htmlAttribute
-    , map = Element.map
-    , node = Element.column
-    }
-
-
-type alias Adapters a b =
-    { toLayout : Element b -> Html b
-    , fromAttribute : Html.Attribute b -> Element.Attribute b
-    , map : (a -> b) -> Element a -> Element b
-    , node : List (Element.Attribute b) -> List (Element b) -> Element b
-    }

examples/elm-ui/src/Pages.elm

@@ -12,6 +12,7 @@ import Element exposing (Element)
 import Flags exposing (Flags)
 import Global
 import Pages.Homepage
+import Pages.NotFound
 import Route exposing (Route)
 
 
@@ -36,12 +37,7 @@ pages =
     , notFound =
         Application.Page.static
             { title = "Page not found"
-            , view =
-                Element.el
-                    [ Element.centerX
-                    , Element.centerY
-                    ]
-                    (Element.text "Page not found...")
+            , view = Pages.NotFound.view
             , toModel = NotFoundModel
             , fromNever = Element.map never
             }

examples/elm-ui/src/Pages/Homepage.elm

@@ -1,9 +1,16 @@
 module Pages.Homepage exposing (view)
 
+import Components.LinkPage
 import Element exposing (..)
+import Route
 
 
 view : Element Never
 view =
-    el [ centerX, centerY ]
-        (text "Homepage!")
+    Components.LinkPage.view
+        { title = "a homepage!"
+        , link =
+            { label = "Go somewhere cool"
+            , route = Route.NotFound
+            }
+        }

examples/elm-ui/src/Pages/NotFound.elm

@@ -0,0 +1,16 @@
+module Pages.NotFound exposing (view)
+
+import Components.LinkPage
+import Element exposing (..)
+import Route
+
+
+view : Element Never
+view =
+    Components.LinkPage.view
+        { title = "yea, sorry that's it."
+        , link =
+            { label = "back to homepage"
+            , route = Route.Homepage
+            }
+        }