Add Elm boilerplate to project
Create a top-level client directory to store my Elm boilerplate.
This commit is contained in:
William Carroll
parent
cf6c8799ab
commit
289cae2528
11 changed files with 180 additions and 0 deletions
3
client/.gitignore
vendored
Normal file
3
client/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/elm-stuff
|
||||
/Main.min.js
|
||||
/output.css
|
||||
17
client/README.md
Normal file
17
client/README.md
Normal file
|
|
@ -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`!
|
||||
3
client/dir-locals.nix
Normal file
3
client/dir-locals.nix
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
let
|
||||
briefcase = import <briefcase> {};
|
||||
in briefcase.utils.nixBufferFromShell ./shell.nix
|
||||
30
client/elm.json
Normal file
30
client/elm.json
Normal file
|
|
@ -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": {}
|
||||
}
|
||||
}
|
||||
3
client/index.css
Normal file
3
client/index.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
15
client/index.html
Normal file
15
client/index.html
Normal file
|
|
@ -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>
|
||||
9
client/shell.nix
Normal file
9
client/shell.nix
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
let
|
||||
pkgs = import <nixpkgs> {};
|
||||
in pkgs.mkShell {
|
||||
buildInputs = with pkgs; [
|
||||
elmPackages.elm
|
||||
elmPackages.elm-format
|
||||
elmPackages.elm-live
|
||||
];
|
||||
}
|
||||
13
client/src/Landing.elm
Normal file
13
client/src/Landing.elm
Normal file
|
|
@ -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!" ]
|
||||
]
|
||||
13
client/src/Login.elm
Normal file
13
client/src/Login.elm
Normal file
|
|
@ -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" ]
|
||||
]
|
||||
31
client/src/Main.elm
Normal file
31
client/src/Main.elm
Normal file
|
|
@ -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
|
||||
}
|
||||
43
client/src/State.elm
Normal file
43
client/src/State.elm
Normal file
|
|
@ -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
|
||||
)
|
||||
Loading…
Reference in a new issue