What if, Mat had a different look (#144)

.dockerignore

@@ -3,3 +3,4 @@ Dockerfile
 docker-compose.yml
 flake.nix
 flake.lock
+static/style.css

.gitignore

@@ -15,6 +15,7 @@ cabal.sandbox.config
 *.dump-hi
 .direnv/
 .envrc
+static/style.css
 dist-newstyle/
 result/
 logs/

Dockerfile

@@ -1,18 +1,25 @@
-FROM haskell:9.6.6 as BIN
-WORKDIR /app/user
-COPY *.cabal ./
+from haskell:9.6.6 as bin
+workdir /app/user
+copy *.cabal ./
 
-RUN cabal v2-update && \
+run cabal v2-update && \
     cabal v2-build --dependencies-only
 
-COPY . .
-RUN cabal v2-install --install-method copy --installdir . --overwrite-policy=always
+copy . .
 
-FROM debian:12.5-slim
-RUN apt-get update && apt-get install --no-install-recommends -y ca-certificates \
- && apt-get clean \
- && rm -rf /var/lib/apt/lists/*
-COPY --from=BIN /app/user/mat-chalmers /bin/mat-chalmers
-ENV LANG C.UTF-8
-CMD /bin/mat-chalmers
-EXPOSE 5007
+run curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 && \
+    mv tailwindcss-linux-x64 tailwindcss && \
+    chmod +x tailwindcss && \
+    ./tailwindcss --content src/View.hs --output static/style.css --minify
+
+run cabal v2-install --install-method copy --installdir . --overwrite-policy=always
+
+
+from debian:12.5-slim
+run apt-get update && apt-get install --no-install-recommends -y ca-certificates \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+copy --from=bin /app/user/mat-chalmers /bin/mat-chalmers
+env LANG C.UTF-8
+cmd /bin/mat-chalmers
+expose 5007

README.md

@@ -34,6 +34,13 @@ cachix use jassob   # Only needed once
 cachix use pingu    # Probably more up to date as of 5/6-24
 ```
 
+### Updating the view?
+Currently, the css framework used is [TailwindCSS](https://tailwindcss.com).
+To generate css, you can use the [Tailwinds cli](https://tailwindcss.com/blog/standalone-cli) program to generate the new css by running `tailwindcss --content src/View.hs --output static/style.css --minify`.
+
+Worth noting is that the css is embedded in the binary, and changes to it aren't well captured by cabal, so `cabal clean && cabal run` or `just up` that fixes the css file and then runs the program.
+When running `docker compose up --build`, the css file will be generated by it self.
+
 ## Credits
 
 Favicon made by Freepik from <a href="http://www.flaticon.com"

flake.nix

@@ -52,9 +52,11 @@
               packages = p: [ self.packages.${system}.mat ];
               withHoogle = true;
               buildInputs =
-                [
-                  pkgs.zlib
-                ] ++
+                (with pkgs; [
+                  zlib
+                  tailwindcss
+                  just
+                ]) ++
                 (with haskellPackages; [
                   haskell-language-server
                   cabal-install

justfile

@@ -0,0 +1,6 @@
+default: up
+
+up:
+	tailwindcss --content src/View.hs --output static/style.css --minify
+	cabal clean
+	cabal run

mat-chalmers.cabal

@@ -11,11 +11,6 @@ Tested-With: GHC ==9.6.6
 data-files:
            static/style.css
            static/icon.png
-           static/fonts/AnonymousPro-Bold.ttf
-           static/fonts/AnonymousPro-BoldItalic.ttf
-           static/fonts/AnonymousPro-Italic.ttf
-           static/fonts/AnonymousPro-Regular.ttf
-           static/fonts/OFL.txt
 
 library
   default-language: GHC2021

src/View.hs

@@ -1,23 +1,15 @@
-{-# LANGUAGE OverloadedStrings, TemplateHaskell, RecordWildCards #-}
+{-# LANGUAGE OverloadedStrings, RecordWildCards #-}
 
 module View
   ( View(..)
   , render
   )
 where
 
-import           Data.FileEmbed
 import qualified Data.Text.Lazy                as T
-import qualified Data.Text.Lazy.Builder        as T
 import           Data.Thyme                               ( defaultTimeLocale
                                                           , formatTime )
-import           Lens.Micro.Platform                      ( (&)
-                                                          , (%~)
-                                                          , both
-                                                          )
 import           Lucid
-import qualified Text.CSS.Parse                as CSS
-import qualified Text.CSS.Render               as CSS
 
 import           Model
 import           Model.Types                              ( NoMenu(..) )
@@ -28,67 +20,54 @@ render v = renderText (renderView v)
 renderView :: View -> Html ()
 renderView View {..} = doctypehtml_ $ do
   sitehead
-  body_ $ div_ [class_ "container-fluid main"] $ do
-    h1_ $ do
+  body_ [class_ "bg-[#e9e7e7] font-sans"] $ div_ [class_ "px-4 py-4 mx-auto"] $ do
+    h1_ [class_ "text-4xl"] $ do
       toHtml day
       " / "
       toHtml (formatTime defaultTimeLocale "%F" date)
     if null restaurants
       then div_ . box_ . h3_ $ ("No lunches " >> toHtml day)
-      else div_ $ uncurry
-        mappend
-        (  splitAt 4 (map renderRest restaurants)
-        &  both
-        %~ (div_ [class_ "row"] . mconcat)
-        )
-
+      else div_ [class_ "grid grid-cols-1 lg:grid-cols-4 gap-5 justify-evenly"] $ foldMap renderRest restaurants
     sitefooter
 
 renderRest :: Restaurant -> Html ()
 renderRest Restaurant {..} = box_ $ do
-  h2_ (toHtml name >> " " >> a_ [href_ (T.toStrict url)] "☛")
+  h2_ [class_ "text-2xl text-orange-500"] (toHtml name >> " " >> a_ [href_ (T.toStrict url)] "☛")
   ul_ [class_ "food-menu"] $ case menu of
     Left NoLunch -> li_ "No lunch this day!"
     Left _       -> li_ "Something went wrong, " <> a_
-      [href_ $ T.toStrict "https://github.com/dtekcth/mat-chalmers/issues/new"]
+      [href_ "https://github.com/dtekcth/mat-chalmers/issues/new", class_ "text-orange-500 visited:text-orange-800"]
       "please file an issue."
-    Right menus -> mconcat (map renderMenu menus)
+    Right menus -> foldMap renderMenu menus
 
 renderMenu :: Menu -> Html ()
-renderMenu (Menu lunch spec) = li_
+renderMenu (Menu lunch spec) = li_ [class_ "text-lg"]
   (do
-    h3_ (toHtml lunch)
-    span_ [class_ "invisible-space"] " "
-    toHtml spec
+    h3_ [class_ "inline font-bold text-orange-500 me-2"] (toHtml lunch)
+    span_ (toHtml spec)
   )
 
 box_ :: Html () -> Html ()
-box_ = div_ [class_ "col-xs-12 col-sm-6 col-md-3 food"]
+box_ = div_ [class_ "relative mt-5"]
 
 sitehead :: Html ()
 sitehead = head_
   (do
     meta_ [charset_ "utf-8"]
     meta_ [name_ "viewport", content_ "width=device-width, initial-scale=1"]
     link_ [rel_ "icon", type_ "image/png", href_ "icon.png"]
-    style_ [] css
+    link_ [rel_ "stylesheet", href_ "style.css"]
     title_ "Lunch at Chalmers"
   )
 
 sitefooter :: Html ()
 sitefooter = footer_
-  [class_ "col-xs-12 col-sm-12 col-md-12"]
+  [class_ "py-6 relative justify-self-end"]
   (do
     "Eat at your own risk :) // "
     "Problems? "
-    a_ [href_ "https://github.com/dtekcth/mat-chalmers/issues/new"]
+    a_ [href_ "https://github.com/dtekcth/mat-chalmers/issues/new", class_ "text-orange-500 visited:text-orange-800"]
        "File an issue!"
     " // "
-    a_ [href_ "https://kortladdning3.chalmerskonferens.se/"] "Top-up your card"
+    a_ [href_ "https://kortladdning3.chalmerskonferens.se/", class_ "text-orange-500 visited:text-orange-800"] "Top-up your card"
   )
-
--- brittany-disable-next-binding
-css :: T.Text
-css =
-  (either error (T.toLazyText . CSS.renderNestedBlocks) . CSS.parseNestedBlocks)
-    $(embedStringFile "static/style.css")