about summary refs log tree commit diff
path: root/boilerplate
diff options
context:
space:
mode:
authorWilliam Carroll <wpcarro@gmail.com>2020-05-17T19·42+0100
committerWilliam Carroll <wpcarro@gmail.com>2020-05-17T19·48+0100
commit05a2ea6bb7af37d8d5afdc28efddb3e6d2f9e746 (patch)
tree816489e0c2d381695b7cd7087cc40c8aca91a69d /boilerplate
parent066b1441b29df2d9616eabc8680e912e912cbb07 (diff)
Support boilerplate for Elm clients
Lately I was toiling while writing a ClojureScript client. This made me crave
Elm. I'm going to rewrite the ClojureScript client using Elm, but along the way,
I'm stopping off here and recording my starter boilerplate.
Diffstat (limited to 'boilerplate')
-rw-r--r--boilerplate/elm/.gitignore3
-rw-r--r--boilerplate/elm/README.md17
-rw-r--r--boilerplate/elm/dir-locals.nix3
-rw-r--r--boilerplate/elm/elm.json30
-rw-r--r--boilerplate/elm/index.css3
-rw-r--r--boilerplate/elm/index.html15
-rw-r--r--boilerplate/elm/shell.nix9
-rw-r--r--boilerplate/elm/src/Landing.elm13
-rw-r--r--boilerplate/elm/src/Login.elm13
-rw-r--r--boilerplate/elm/src/Main.elm31
-rw-r--r--boilerplate/elm/src/State.elm43
11 files changed, 180 insertions, 0 deletions
diff --git a/boilerplate/elm/.gitignore b/boilerplate/elm/.gitignore
new file mode 100644
index 000000000000..1cb4f3034cc3
--- /dev/null
+++ b/boilerplate/elm/.gitignore
@@ -0,0 +1,3 @@
+/elm-stuff
+/Main.min.js
+/output.css
diff --git a/boilerplate/elm/README.md b/boilerplate/elm/README.md
new file mode 100644
index 000000000000..425d5163ea35
--- /dev/null
+++ b/boilerplate/elm/README.md
@@ -0,0 +1,17 @@
+# Elm
+
+Elm has one of the best developer experiences that I'm aware of. The error
+messages are helpful and the entire experience is optimized to improve the ease
+of writing web applications.
+
+## Developing
+
+If you're interested in contributing, the following will create an environment
+in which you can develop:
+
+```shell
+$ nix-shell
+$ elm-live -- src/Main.elm --output=Main.min.js
+```
+
+You can now view your web client at `http://localhost:8000`!
diff --git a/boilerplate/elm/dir-locals.nix b/boilerplate/elm/dir-locals.nix
new file mode 100644
index 000000000000..498f4b5055f8
--- /dev/null
+++ b/boilerplate/elm/dir-locals.nix
@@ -0,0 +1,3 @@
+let
+  briefcase = import <briefcase> {};
+in briefcase.utils.nixBufferFromShell ./shell.nix
diff --git a/boilerplate/elm/elm.json b/boilerplate/elm/elm.json
new file mode 100644
index 000000000000..a95f80408ec4
--- /dev/null
+++ b/boilerplate/elm/elm.json
@@ -0,0 +1,30 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.2",
+            "elm/core": "1.0.5",
+            "elm/html": "1.0.0",
+            "elm/random": "1.0.0",
+            "elm/svg": "1.0.1",
+            "elm/time": "1.0.0",
+            "elm-community/list-extra": "8.2.3",
+            "elm-community/maybe-extra": "5.2.0",
+            "elm-community/random-extra": "3.1.0"
+        },
+        "indirect": {
+            "elm/json": "1.1.3",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.2",
+            "owanturist/elm-union-find": "1.0.0"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}
diff --git a/boilerplate/elm/index.css b/boilerplate/elm/index.css
new file mode 100644
index 000000000000..b5c61c956711
--- /dev/null
+++ b/boilerplate/elm/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/boilerplate/elm/index.html b/boilerplate/elm/index.html
new file mode 100644
index 000000000000..ce8f727b6f3b
--- /dev/null
+++ b/boilerplate/elm/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Elm SPA</title>
+    <link rel="stylesheet" href="./output.css" />
+    <script src="./Main.min.js"></script>
+  </head>
+  <body class="font-serif">
+    <div id="mount"></div>
+    <script>
+     Elm.Main.init({node: document.getElementById("mount")});
+    </script>
+  </body>
+</html>
diff --git a/boilerplate/elm/shell.nix b/boilerplate/elm/shell.nix
new file mode 100644
index 000000000000..6f1c8ee23b30
--- /dev/null
+++ b/boilerplate/elm/shell.nix
@@ -0,0 +1,9 @@
+let
+  pkgs = import <nixpkgs> {};
+in pkgs.mkShell {
+  buildInputs = with pkgs; [
+    elmPackages.elm
+    elmPackages.elm-format
+    elmPackages.elm-live
+  ];
+}
diff --git a/boilerplate/elm/src/Landing.elm b/boilerplate/elm/src/Landing.elm
new file mode 100644
index 000000000000..00bb9e281af4
--- /dev/null
+++ b/boilerplate/elm/src/Landing.elm
@@ -0,0 +1,13 @@
+module Landing exposing (render)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import State
+
+
+render : State.Model -> Html State.Msg
+render model =
+    div [ class "pt-10 pb-20 px-10" ]
+        [ p [] [ text "Welcome to the landing page!" ]
+        ]
diff --git a/boilerplate/elm/src/Login.elm b/boilerplate/elm/src/Login.elm
new file mode 100644
index 000000000000..27f1d811a89a
--- /dev/null
+++ b/boilerplate/elm/src/Login.elm
@@ -0,0 +1,13 @@
+module Login exposing (render)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import State
+
+
+render : State.Model -> Html State.Msg
+render model =
+    div [ class "pt-10 pb-20 px-10" ]
+        [ p [] [ text "Please authenticate" ]
+        ]
diff --git a/boilerplate/elm/src/Main.elm b/boilerplate/elm/src/Main.elm
new file mode 100644
index 000000000000..30006460cde9
--- /dev/null
+++ b/boilerplate/elm/src/Main.elm
@@ -0,0 +1,31 @@
+module Main exposing (main)
+
+import Browser
+import Html exposing (..)
+import Landing
+import Login
+import State
+
+
+subscriptions : State.Model -> Sub State.Msg
+subscriptions model =
+    Sub.none
+
+
+view : State.Model -> Html State.Msg
+view model =
+    case model.view of
+        State.Landing ->
+            Landing.render model
+
+        State.Login ->
+            Login.render model
+
+
+main =
+    Browser.element
+        { init = \() -> ( State.init, Cmd.none )
+        , subscriptions = subscriptions
+        , update = State.update
+        , view = view
+        }
diff --git a/boilerplate/elm/src/State.elm b/boilerplate/elm/src/State.elm
new file mode 100644
index 000000000000..c1edae8bb638
--- /dev/null
+++ b/boilerplate/elm/src/State.elm
@@ -0,0 +1,43 @@
+module State exposing (..)
+
+
+type Msg
+    = DoNothing
+    | SetView View
+
+
+type View
+    = Landing
+    | Login
+
+
+type alias Model =
+    { isLoading : Bool
+    , view : View
+    }
+
+
+{-| The initial state for the application.
+-}
+init : Model
+init =
+    { isLoading = False
+    , view = Landing
+    }
+
+
+{-| Now that we have state, we need a function to change the state.
+-}
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        DoNothing ->
+            ( model, Cmd.none )
+
+        SetView x ->
+            ( { model
+                | view = x
+                , isLoading = True
+              }
+            , Cmd.none
+            )