compareware/Web/View/Layout.hs

74 lines
2.6 KiB
Haskell

module Web.View.Layout (defaultLayout, Html) where
import IHP.ViewPrelude
import IHP.Environment
import qualified Text.Blaze.Html5 as H
import qualified Text.Blaze.Html5.Attributes as A
import Generated.Types
import IHP.Controller.RequestContext
import Web.Types
import Web.Routes
import Application.Helper.View
defaultLayout :: Html -> Html
defaultLayout inner = H.docTypeHtml ! A.lang "en" $ [hsx|
<head>
{metaTags}
{stylesheets}
{scripts}
<title>{pageTitleOrDefault "App"}</title>
</head>
<body>
<div class="container mt-4">
{renderFlashMessages}
{inner}
</div>
</body>
|]
-- 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.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}
|]