Initial commit

2024-02-27 22:29:41 +01:00
commit bd4fe8fc62
34 changed files with 1644 additions and 0 deletions
--- a/Web/View/Layout.hs
+++ b/Web/View/Layout.hs
@ -0,0 +1,74 @@
+module Web.View.Layout (defaultLayout, Html) where
+
+import IHP.ViewPrelude
+import IHP.Environment
+import Generated.Types
+import IHP.Controller.RequestContext
+import Web.Types
+import Web.Routes
+import Application.Helper.View
+
+defaultLayout :: Html -> Html
+defaultLayout inner = [hsx|
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        {metaTags}
+
+        {stylesheets}
+        {scripts}
+
+        <title>{pageTitleOrDefault "App"}</title>
+    </head>
+    <body>
+        <div class="container mt-4">
+            {renderFlashMessages}
+            {inner}
+        </div>
+    </body>
+</html>
+|]
+
+-- The 'assetPath' function used below appends a `?v=SOME_VERSION` to the static assets in production
+-- This is useful to avoid users having old CSS and JS files in their browser cache once a new version is deployed
+-- See https://ihp.digitallyinduced.com/Guide/assets.html for more details
+
+stylesheets :: Html
+stylesheets = [hsx|
+        <link rel="stylesheet" href={assetPath "/vendor/bootstrap-5.2.1/bootstrap.min.css"}/>
+        <link rel="stylesheet" href={assetPath "/vendor/flatpickr.min.css"}/>
+        <link rel="stylesheet" href={assetPath "/app.css"}/>
+    |]
+
+scripts :: Html
+scripts = [hsx|
+        {when isDevelopment devScripts}
+        <script src={assetPath "/vendor/jquery-3.6.0.slim.min.js"}></script>
+        <script src={assetPath "/vendor/timeago.js"}></script>
+        <script src={assetPath "/vendor/popper-2.11.6.min.js"}></script>
+        <script src={assetPath "/vendor/bootstrap-5.2.1/bootstrap.min.js"}></script>
+        <script src={assetPath "/vendor/flatpickr.js"}></script>
+        <script src={assetPath "/vendor/morphdom-umd.min.js"}></script>
+        <script src={assetPath "/vendor/turbolinks.js"}></script>
+        <script src={assetPath "/vendor/turbolinksInstantClick.js"}></script>
+        <script src={assetPath "/vendor/turbolinksMorphdom.js"}></script>
+        <script src={assetPath "/helpers.js"}></script>
+        <script src={assetPath "/ihp-auto-refresh.js"}></script>
+        <script src={assetPath "/app.js"}></script>
+    |]
+
+devScripts :: Html
+devScripts = [hsx|
+        <script id="livereload-script" src={assetPath "/livereload.js"} data-ws={liveReloadWebsocketUrl}></script>
+    |]
+
+metaTags :: Html
+metaTags = [hsx|
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+    <meta property="og:title" content="App"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="TODO"/>
+    <meta property="og:description" content="TODO"/>
+    {autoRefreshMeta}
+|]
--- a/Web/View/Prelude.hs
+++ b/Web/View/Prelude.hs
@ -0,0 +1,14 @@
+module Web.View.Prelude
+( module IHP.ViewPrelude
+, module Web.View.Layout
+, module Generated.Types
+, module Web.Types
+, module Application.Helper.View
+) where
+
+import IHP.ViewPrelude
+import Web.View.Layout
+import Generated.Types
+import Web.Types
+import Web.Routes ()
+import Application.Helper.View
--- a/Web/View/Static/Welcome.hs
+++ b/Web/View/Static/Welcome.hs
@ -0,0 +1,42 @@
+module Web.View.Static.Welcome where
+import Web.View.Prelude
+
+data WelcomeView = WelcomeView
+
+instance View WelcomeView where
+    html WelcomeView = [hsx|
+         <div style="background-color: #657b83; padding: 2rem; color:hsla(196, 13%, 96%, 1); border-radius: 4px">
+              <div style="max-width: 800px; margin-left: auto; margin-right: auto">
+                  <h1 style="margin-bottom: 2rem; font-size: 2rem; font-weight: 300; border-bottom: 1px solid white; padding-bottom: 0.25rem; border-color: hsla(196, 13%, 60%, 1)">
+                      IHP
+                  </h1>
+
+                  <h2 style="margin-top: 0; margin-bottom: 0rem; font-weight: 900; font-size: 3rem">
+                      It's working!
+                  </h2>
+
+                  <p style="margin-top: 1rem; font-size: 1.75rem; font-weight: 600; color:hsla(196, 13%, 80%, 1)">
+                     Your new application is up and running.
+                  </p>
+
+                  <p>
+                      <a
+                          href="https://ihp.digitallyinduced.com/Slack"
+                          style="margin-top: 2rem; background-color: #268bd2; padding: 1rem; border-radius: 3px; color: hsla(205, 69%, 98%, 1); text-decoration: none; font-weight: bold; display: inline-block; box-shadow: 0 4px 6px hsla(205, 69%, 0%, 0.08); transition: box-shadow 0.2s; transition: transform 0.2s;"
+                          target="_blank"
+                      >Join our community on Slack!</a>
+                  </p>
+
+                  <a href="https://ihp.digitallyinduced.com/Guide/your-first-project.html" style="margin-top: 2rem; background-color: #268bd2; padding: 1rem; border-radius: 3px; color: hsla(205, 69%, 98%, 1); text-decoration: none; font-weight: bold; display: inline-block; box-shadow: 0 4px 6px hsla(205, 69%, 0%, 0.08);  transition: box-shadow 0.2s; transition: transform 0.2s;" target="_blank">
+                     Learn the Next Steps in the Documentation
+                  </a>
+              </div>
+         </div>
+
+         <div style="max-width: 800px; margin-left: auto; margin-right: auto; margin-top: 4rem">
+              <img src="/ihp-welcome-icon.svg" alt="/ihp-welcome-icon" style="width:100%;">
+              <p style="color: hsla(196, 13%, 50%, 1); margin-top: 4rem">
+                 You can modify this start page by making changes to "./Web/View/Static/Welcome.hs".
+              </p>
+         </div> 
+|]