build: replace elm reactor with watch script for using custom html template

feat: html template for website display
feat: initial elm-ui layout
2025-01-25 02:39:22 -05:00 · 2025-01-25 02:38:46 -05:00 · 2025-01-25 02:38:18 -05:00 · 2025-01-25 02:37:35 -05:00 · 2025-01-25 02:36:48 -05:00
6 changed files with 104 additions and 3 deletions
--- a/.gitignore
+++ b/.gitignore
@ -12,3 +12,7 @@ result-*

 # Ignore automatically generated direnv output
 .direnv
+
+# ---> Project
+# Ignore compiled elm files
+compiled
--- a/elm.json
+++ b/elm.json
@ -8,7 +8,8 @@
        "direct": {
            "elm/browser": "1.0.2",
            "elm/core": "1.0.5",
-            "elm/html": "1.0.0"
+            "elm/html": "1.0.0",
+            "mdgriffith/elm-ui": "1.1.8"
        },
        "indirect": {
            "elm/json": "1.1.3",
--- a/flake.nix
+++ b/flake.nix
@ -30,6 +30,7 @@
              elmPackages.elm
              elmPackages.elm-test
              elmPackages.elm-format
+              entr
            ];
          };

--- a/src/Main.elm
+++ b/src/Main.elm
@ -1,5 +1,82 @@
 module Main exposing (main)

-import Html exposing (text)
+import Browser
+import Browser.Events as Events
+import Element exposing (..)
+import Element.Background as Background
+import Element.Font as Font
+import Html exposing (Html)

-main = text "Hello, world!"
+
+main : Program Flags Model Msg
+main =
+    Browser.document { init = init, update = update, subscriptions = subscribe, view = view }
+
+
+type alias Model =
+    { w : Int, h : Int }
+
+
+type alias Flags =
+    ( Int, Int )
+
+
+init : Flags -> ( Model, Cmd Msg )
+init flags =
+    case flags of
+        ( width, height ) ->
+            ( { w = width, h = height }, Cmd.none )
+
+
+type Msg
+    = Resize Int Int
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        Resize width height ->
+            ( { model | w = width, h = height }, Cmd.none )
+
+
+subscribe : Model -> Sub Msg
+subscribe _ =
+    Events.onResize Resize
+
+
+htmlify : List (Element Msg) -> List (Html Msg)
+htmlify =
+    List.map (Element.layout [])
+
+
+vw : Model -> Float -> Float
+vw model percent =
+    Basics.toFloat model.w * percent / 100
+
+
+vh : Model -> Float -> Float
+vh model percent =
+    Basics.toFloat model.h * percent / 100
+
+
+view : Model -> Browser.Document Msg
+view model =
+    { title = "MacGregor House"
+    , body =
+        htmlify
+            [ el
+                [ width fill
+                , height fill
+                , Background.color (rgb255 0 0 0)
+                ]
+                (el
+                    [ alignLeft
+                    , alignTop
+                    , moveRight (vw model 10)
+                    , moveDown (vh model 50)
+                    , Font.color (rgb255 255 255 255)
+                    ]
+                    (text "MacGregor House")
+                )
+            ]
+    }
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>MacGregor House</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="../result/Main.js"></script>
+    <script>
+      var app = Elm.Main.init({
+        node: document.getElementById("app"),
+        flags: [window.innerWidth, window.innerHeight],
+      });
+    </script>
+  </body>
+</html>
--- a/watch.sh
+++ b/watch.sh
@ -0,0 +1 @@
+find src/ | entr -r elm make src/Main.elm --output compiled/Main.js
Author	SHA1	Message	Date
Ananth Venkatesh	b903f3755d	build: replace `elm reactor` with watch script for using custom html template	2025-01-25 02:39:22 -05:00
Ananth Venkatesh	5eb72eacb0	feat: html template for website display	2025-01-25 02:38:46 -05:00
Ananth Venkatesh	7dfab317a4	feat: initial elm-ui layout	2025-01-25 02:38:18 -05:00
Ananth Venkatesh	a86e7dadaf	chore(elm): add mdgriffith/elm-ui as project dep	2025-01-25 02:37:35 -05:00
Ananth Venkatesh	6fcb464dd2	chore(git): ignore compiled folder	2025-01-25 02:36:48 -05:00
				`@ -0,0 +1 @@`
				`find src/ \| entr -r elm make src/Main.elm --output compiled/Main.js`