more layout

backend/templates/app.html

@@ -17,6 +17,9 @@
                  node: document.getElementById("app")
              });
             </script>
+            <noscript>
+                You must enable JavaScript for this page to work.
+            </noscript>
             <script src="/static/install-sw.js"></script>
         </main>
     </body>

sina/src/Layout.elm

@@ -0,0 +1,29 @@
+module Layout exposing (template)
+
+import Browser exposing (Document)
+import Html exposing (Html, a, div, h1, main_, nav, text)
+import Html.Attributes exposing (class, href)
+
+
+template : String -> List (Html msg) -> Document msg
+template title body =
+    { title = title
+    , body =
+        [ main_
+            []
+            ([ nav
+                [ class "nav" ]
+                [ a [ href "/" ] [ text "Mi" ]
+                , text " - "
+                , a [ href "/posse" ] [ text "POSSE" ]
+                , text " - "
+                , a [ href "/switches" ] [ text "Switches" ]
+                , text " - "
+                , a [ href "/webmentions" ] [ text "WebMentions" ]
+                ]
+             , h1 [] [ text title ]
+             ]
+                ++ body
+            )
+        ]
+    }

sina/src/Main.elm

@@ -1,9 +1,10 @@
-module Main exposing (..)
+module Main exposing (main)
 
 import Browser
 import Html exposing (Html, div, h1, img, p, pre, text)
 import Html.Attributes exposing (src)
 import Http
+import Layout
 import Mi
 
 
@@ -39,28 +40,26 @@ update msg model =
                     ( Failure (Mi.errorToString why), Cmd.none )
 
 
-view : Model -> Html Msg
+view : Model -> Browser.Document msg
 view model =
     case model of
         Failure why ->
-            div []
+            Layout.template "Error"
-                [ h1 [] [ text "Error" ]
+                [ p [] [ text why ]
-                , p [] [ text why ]
                 ]
 
         Loading ->
-            div [] [ h1 [] [ text "Loading" ] ]
+            Layout.template "Loading" []
 
         Success msg ->
-            div []
+            Layout.template "Mi"
-                [ h1 [] [ text "Mi" ]
+                [ pre [] [ text msg ]
-                , pre [] [ text msg ]
                 ]
 
 
 main : Program () Model Msg
 main =
-    Browser.element
+    Browser.document
         { view = view
         , init = init
         , update = update