From 0d84ad0c1812e1e977db50c7b708beee0946cd77 Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Sat, 16 Jan 2021 06:57:16 -0500 Subject: Freshen up frontpage design Part of a larger effort, but doing this iteratively in smaller chunks. --- Biz/Bild/Deps/Haskell.nix | 1 + Biz/Devalloc.hs | 113 ++++++++++++++++++++++++++++------------------ 2 files changed, 70 insertions(+), 44 deletions(-) diff --git a/Biz/Bild/Deps/Haskell.nix b/Biz/Bild/Deps/Haskell.nix index c08e353..eb34f3a 100644 --- a/Biz/Bild/Deps/Haskell.nix +++ b/Biz/Bild/Deps/Haskell.nix @@ -10,6 +10,7 @@ with hpkgs; bytestring clay cmark + cmark-lucid config-ini containers directory diff --git a/Biz/Devalloc.hs b/Biz/Devalloc.hs index 59e2240..aa61975 100644 --- a/Biz/Devalloc.hs +++ b/Biz/Devalloc.hs @@ -19,6 +19,9 @@ -- : out devalloc -- : dep acid-state -- : dep clay +-- : dep cmark +-- : sys cmark +-- : dep cmark-lucid -- : dep docopt -- : dep envy -- : dep github @@ -43,12 +46,15 @@ module Biz.Devalloc ) where -import Alpha hiding ((<.>)) +import Alpha hiding (rem, (<.>)) import Biz.App (CSS (..), HtmlApp (..)) import qualified Biz.Cli as Cli import qualified Biz.Look import Biz.Test ((@=?)) import qualified Biz.Test as Test +import qualified CMark as Cmark +import qualified CMark.Lucid as Cmark +import Clay (em, px, rem) import qualified Clay import qualified Control.Exception as Exception import Crypto.JOSE.JWK (JWK) @@ -455,18 +461,27 @@ htmlApp cooks kp cfg jwk oAuthArgs = Clay.listStyleType <| Clay.none Clay.margin (Clay.px 0) 0 0 0 "nav > ul > li" Clay.? do - Clay.padding 0 (Clay.px 5) 0 (Clay.px 5) - {- - - nav > ul { - display: flex; - justify-content: flex-end; - list-style: none; - } - - nav > ul > li { - padding: 0 5px; - } - - -} + Clay.padding 0 (px 5) 0 (px 5) + "#home" Clay.? do + "h1" Clay.? do + Clay.fontSize (Clay.rem 3) + "h1, h2" Clay.? do + Clay.textAlign Clay.center + "section" Clay.? do + Clay.padding (rem 3) 0 (rem 3) 0 + "#try-button" Clay.? do + Clay.padding (em 0.5) (em 1) (em 0.5) (em 1) + Clay.display Clay.flex + Clay.flexDirection Clay.column + Clay.margin (em 3) Clay.auto 0 Clay.auto + Clay.width (px 250) + Clay.backgroundColor "#ffe000" + Clay.textDecoration Clay.none + Clay.justifyContent Clay.center + Clay.alignItems Clay.center + Clay.fontWeight Clay.bold + "small" Clay.? do + Clay.fontSize (px 10) } -- | The front page pitch. Eventually I'd like to load the content from markdown @@ -476,33 +491,41 @@ newtype Home = Home OAuthArgs instance Lucid.ToHtml Home where toHtmlRaw = Lucid.toHtml toHtml (Home oAuthArgs) = do - Lucid.toHtml <| nav Nothing - Lucid.p_ - "Devalloc analyzes your codebase trends, finds patterns \ - \ in how your developers work, and protects against tech debt." - Lucid.p_ "Just hook it up to your CI system - it will warn you when it finds a problem." - Lucid.toHtml <| loginButton oAuthArgs - Lucid.h2_ "Identify blackholes in your codebase" - Lucid.p_ - "What if none of your active employees have touched some part of the codebase? \ - \ This happens too often with legacy code, and then it turns into a huge source of tech debt. \ - \ Devalloc finds these \"blackholes\" and warns you about them so you can be proactive in eliminating tech debt." - Lucid.toHtml <| loginButton oAuthArgs - Lucid.h2_ "Protect against lost knowledge" - Lucid.p_ "Not everyone can know every part of a codebase. By finding pieces of code that only 1 or 2 people have touched, devalloc identifes siloed knowledge. This allows you to protect against the risk of this knowledge leaving the company if an employee leaves." - Lucid.toHtml <| loginButton oAuthArgs - Lucid.h2_ "Don't just measure code coverage - also know your dev coverage" - Lucid.p_ "No matter how smart your employees are, if you are under- or over-utilizing your developers then you will never get optimal performance from your team." - Lucid.ul_ <| do - Lucid.li_ "Find developer hot spots in your code: which pieces of code get continually rewritten, taking up valuable dev time?" - Lucid.li_ "Know how your devs work best: which ones have depth of knowledge, and which ones have breadth?" - - Lucid.p_ "(Paid only)" - Lucid.toHtml <| loginButton oAuthArgs - Lucid.h2_ "See how your teams *actually* organize themselves with cluster analysis" - Lucid.p_ "Does your team feel splintered or not cohesive? Which developers work best together? Devalloc analyzes the collaboration patterns between devs and helps you form optimal pairings and teams based on shared code and mindspace." - Lucid.p_ "(Paid only)" - Lucid.toHtml <| loginButton oAuthArgs + Lucid.header_ <| Lucid.toHtml <| nav Nothing + Lucid.main_ [Lucid.id_ "home"] <| do + section <| do + h1 "Know your codebase." + h1 "Know your team." + p "Devalloc analyzes your codebase trends, finds patterns in how your developers work, and protects against tech debt." + p "Just hook it up to your CI system - it will warn you when it finds a problem." + Lucid.toHtml <| tryButton oAuthArgs + section <| do + h2 "Identify blackholes in your codebase" + p + "What if none of your active employees have touched some part of the codebase? \ + \ This happens too often with legacy code, and then it turns into a huge source of tech debt. \ + \ Devalloc finds these \"blackholes\" and warns you about them so you can be proactive in eliminating tech debt." + section <| do + h2 "Protect against lost knowledge" + p "Not everyone can know every part of a codebase. By finding pieces of code that only 1 or 2 people have touched, devalloc identifes siloed knowledge. This allows you to protect against the risk of this knowledge leaving the company if an employee leaves." + section <| do + h2 "Don't just measure code coverage - also know your dev coverage" + p "No matter how smart your employees are, if you are under- or over-utilizing your developers then you will never get optimal performance from your team." + Lucid.ul_ <| do + Lucid.li_ "Find developer hot spots in your code: which pieces of code get continually rewritten, taking up valuable dev time?" + Lucid.li_ "Know how your devs work best: which ones have depth of knowledge, and which ones have breadth?" + section <| do + h2 "See how your teams *actually* organize themselves with cluster analysis" + p "Does your team feel splintered or not cohesive? Which developers work best together? Devalloc analyzes the collaboration patterns between devs and helps you form optimal pairings and teams based on shared code and mindspace." + section <| do + h1 <| "Ready to get going?" + Lucid.toHtml <| tryButton oAuthArgs + where + section = Lucid.section_ + markdown = Cmark.renderNode [] <. Cmark.commonmarkToNode [] + p = Lucid.p_ <. markdown + h1 = Lucid.h1_ + h2 = Lucid.h2_ <. markdown newtype UserHome = UserHome User @@ -616,11 +639,13 @@ encodeParams = <. Web.FormUrlEncoded.urlEncodeParams -- | Login button for GitHub. -loginButton :: OAuthArgs -> Lucid.Html () -loginButton oAuthArgs = +tryButton :: OAuthArgs -> Lucid.Html () +tryButton oAuthArgs = Lucid.a_ - [Lucid.href_ <| githubLoginUrl oAuthArgs] - "Get Started with GitHub" + [Lucid.id_ "try-button", Lucid.href_ <| githubLoginUrl oAuthArgs] + <| do + "Give it a try with GitHub" + Lucid.small_ "Free for a limited time" -- | Universal top navbar -- nav :: (Applicative m, Monad m) => Maybe User -> Lucid.HtmlT m () -- cgit v1.2.3