Redesign pre-login pages, add blog and contribute routes

README.md

@@ -5,6 +5,8 @@
 2. Setup nix to use [flakes](https://nixos.wiki/wiki/Flakes)
 3. Install direnv
 4. (optional) install [nix-direvn](https://github.com/nix-community/nix-direnv)
+5. In root project folder, run direnv allow
+6. In the `frontend` folder, run direnv allow
 
 ## Stertup each time
 

backend/backend.cabal

@@ -102,6 +102,8 @@ library
     Api.Htmx.Signup,
     Api.Htmx.PasswordReset,
     Api.Htmx.Home,
+    Api.Htmx.BlogArticleHistoryOfOutlining,
+    Api.Htmx.Contribute,
     Api.Htmx.NotFound,
     Api.Htmx.NotAuthorized,
     Api.Htmx.Ginger,

backend/lib/Api/Htmx/BlogArticleHistoryOfOutlining.hs

@@ -0,0 +1,21 @@
+module Api.Htmx.BlogArticleHistoryOfOutlining where
+
+import Prelude hiding ((**))
+import Api.Htmx.Ginger (basicTemplate)
+import Web.Scotty.Trans hiding (scottyT)
+import Api.Htmx.AuthHelper (getUser)
+import DbHelper (MonadDb)
+
+
+
+getBlogArticleHistoryOfOutlining
+  :: (MonadDb env m, MonadLogger m)
+  => ActionT m ()
+getBlogArticleHistoryOfOutlining = do
+  user <- getUser
+  logInfoSH user
+  basicTemplate
+    "blogArticleHistoryOfOutlining.html"
+    identity
+
+

backend/lib/Api/Htmx/Contribute.hs

@@ -0,0 +1,21 @@
+module Api.Htmx.Contribute where
+
+import Prelude hiding ((**))
+import Api.Htmx.Ginger (basicTemplate)
+import Web.Scotty.Trans hiding (scottyT)
+import Api.Htmx.AuthHelper (getUser)
+import DbHelper (MonadDb)
+
+
+
+getContribute
+  :: (MonadDb env m, MonadLogger m)
+  => ActionT m ()
+getContribute = do
+  user <- getUser
+  logInfoSH user
+  basicTemplate
+    "contribute.html"
+    identity
+
+

backend/lib/Api/Htmx/Server.hs

@@ -6,6 +6,8 @@ import Api.Htmx.AuthHelper (getUser, getUserWithRedirect)
 import Api.Htmx.Ginger (baseUrl)
 import Api.Htmx.GroupStudy qualified as GroupStudy
 import Api.Htmx.Home qualified as Home
+import Api.Htmx.BlogArticleHistoryOfOutlining qualified as BlogArticleHistoryOfOutlining
+import Api.Htmx.Contribute qualified as Contribute
 import Api.Htmx.Login qualified as Login
 import Api.Htmx.NotFound qualified as NotFound
 import Api.Htmx.PasswordReset qualified as PasswordReset
@@ -217,6 +219,12 @@ scottyServer = do
         Nothing -> Home.getHome
         Just user -> Studies.getStudies user
 
+    Scotty.get "/blog/the-rise-of-outline-method" $ do
+      BlogArticleHistoryOfOutlining.getBlogArticleHistoryOfOutlining
+
+    Scotty.get "/contribute" $ do
+      Contribute.getContribute
+
     Scotty.get "/api/bible/esv" $ do
       user <- getUserWithRedirect
       q <- Scotty.queryParam "q"

backend/static/scripts/studyGroup.js

@@ -84,7 +84,6 @@ document.addEventListener("htmx:afterSettle", function(evt) {
     emailInput.addEventListener("keydown", function(e) {
       if (e.key === "Enter") {
         e.preventDefault();
-        e.stopPropagation();
         htmx.trigger(emailInput.closest("form"), "submit");
       }
     });

backend/static/styles/header.css

@@ -12,6 +12,7 @@
   top: 0px;
   .logo {
     max-height: 40px;
+    display: block;
   }
 
   .menu {
@@ -26,6 +27,13 @@
         color: #000;
         text-decoration: none;
         margin: auto;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+      .share-icon {
+        max-height: 12px;
+        opacity: 0.5;
       }
     }
   }

backend/static/styles/pages/home.css

@@ -1,49 +1 @@
-@import url("../utils/base.css");
-
-#homeContent {
-  margin-top: 30px;
-  .section1 {
-    grid-gap: 20px;
-    grid-template-columns: 4fr 3fr;
-    max-width: 1300px;
-    margin: 0 auto;
-    padding: 0 50px;
-    display: grid;
-    @media screen and (max-width: 1350px) {
-      grid-template-columns: 1fr;
-      max-width: 800px;
-      padding: 0 25px;
-    }
-
-    .leftText {
-      h1 {
-        margin-bottom: 0;
-        font-weight: 600;
-      }
-      .description {
-        font-size: 1.35em;
-      }
-      .blueRoundedContainer {
-        color: #fff;
-        background: linear-gradient(40deg, #0057d1 0% 56%, #7ca8e7 100%);
-        border-bottom-right-radius: 25px;
-        border-bottom-left-radius: 25px;
-        justify-content: space-between;
-        align-items: center;
-        padding: 10px 30px;
-        display: flex;
-      }
-    }
-
-    .rightImage {
-      align-self: center;
-      @media screen and (max-width: 1350px) {
-        display: none;
-      }
-      img {
-        max-width: 100%;
-      }
-    }
-
-  }
-}
+@import url("./pre-login.css");