From 9f33d98db59d6c5c1997ce55eb7be219089bd8b0 Mon Sep 17 00:00:00 2001 From: Vincent Ambo Date: Sat, 21 Nov 2015 17:24:01 +0100 Subject: [PATCH] [blog] Implement new and simpler design --- res/blog.css | 35 +++++++++ res/blog.lucius | 187 ------------------------------------------------ src/Blog.hs | 152 +++++++++++++++------------------------ src/Locales.hs | 8 +-- src/Server.hs | 3 +- 5 files changed, 98 insertions(+), 287 deletions(-) create mode 100644 res/blog.css delete mode 100644 res/blog.lucius diff --git a/res/blog.css b/res/blog.css new file mode 100644 index 000000000..e6e4ae3c2 --- /dev/null +++ b/res/blog.css @@ -0,0 +1,35 @@ +body { + margin: 40px auto; + max-width: 650px; + line-height: 1.6; + font-size: 18px; + color: #383838; + padding: 0 10px +} +h1, h2, h3 { + line-height: 1.2 +} +.footer { + text-align: right; +} +.lod { + text-align: center; +} +.unstyled-link { + color: inherit; + text-decoration: none; +} +.uncoloured-link { + color: inherit; +} +.date { + text-align: right; + font-style: italic; + float: right; +} +.inline { + display: inline; +} +.navigation { + text-align: center; +} diff --git a/res/blog.lucius b/res/blog.lucius deleted file mode 100644 index 95df4eb79..000000000 --- a/res/blog.lucius +++ /dev/null @@ -1,187 +0,0 @@ -@charset "UTF-8"; -/* CSS Document */ -@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono); -@import url(http://fonts.googleapis.com/css?family=PT+Sans); - -body { - font-family: 'PT Sans', sans-serif; - min-height: 850px; - background: url(/static/bg.gif); -} - -html, body { - height: 100%; -} - -a { - color: black; -} - -article a, .entry a { - text-decoration: underline; -} - -#wrap { - min-height: 100%; - height: auto !important; - height: 100%; -} - -.readmore { - text-decoration: underline; -} - -.header { - color: #EEE; - background: url(/static/hbg.jpg); - z-index: 4; - padding-left: 20px; - padding-bottom: 30px; - padding-top: 30px; - position: relative; - box-shadow: 0 6px 5px 1px #343537; - margin-bottom: 25px; - padding-left: 0px; -} - -.footer { - background: url(/static/hbg.jpg); - height: 90; - z-index: 4; - position: relative; - background-color: #4A525A; - margin-top: 30px; - padding-top: 20px; - box-shadow: 0 -6px 5px 1px #343537; - color: #EEE; -} - - -.header a, .footer a { - color: #EEE; - text-decoration: none; -} - - -.boldify { - font-size:large; - font-weight:bold; -} - -.pusher { - padding-bottom: 20px; -} - -.cCaptcha { - padding: 5px; - border: 1px solid #555; - border-radius: 0.5em; - width: 606px; - background: #F9F9F9; -} - -.tt { - font-family: "courier new",courier,monospace; - font-size: 13px; -} - -.btitle { - text-decoration:none; - //color: #EEE; - font-size:x-large; - font-weight:bold; - margin-top: 15px; - padding-bottom: 25px; - padding-top: 20px; -} - -.contacts { - float: left; - font-weight: bolder; -} - -.righttext { - float:right; - padding-right: 20px; -} - -.notFoundFace { - height: 100px; - padding-top: 50px; - font-size:100px -} - -.notFoundText { - font-size:24px; - font-weight:bold -} - -/* HsColour style */ - -.code -{ - box-shadow: 3px 3px 5px 1px #888; - border-radius: 10px; - padding: 0.75em; - - font-size: 11pt; - width: 60em; - color: white; - line-height: 1.2em; - font-family: 'Droid Sans Mono', sans-serif; - background: black; - background-image:url('/static/cbg.jpg'); - background-repeat: no-repeat; - } - -.code pre -{ - - font-family: 'Droid Sans Mono', sans-serif; -} - -kbd -{ - font-family: 'Droid Sans Mono', sans-serif; - color: #333; - font-size: 0.8em; -} - -.wide -{ - width: 90em; -} - - -code -{ - line-height: 1.5em; - border: 1px; - } - -.source-code -{ - font-size: 0.75em; - color: #666; - } - -.warning -{ - color: red; - } - - -.hs-keyglyph { color: DarkGoldenrod; } -.hs-layout { color: white;} -.hs-keyword { color: skyblue; } -.hs-comment, .hs-comment a { color: cadetblue;} -.hs-str { color: Darkorange; } -.hs-chr { color: RosyBrown;} -.hs-conid { color: GreenYellow; } -.hs-varid { color: white; } -.hs-num { color: white; } -.hs-varop { color: DarkGoldenrod; } -.hs-conop { color: DarkGoldenrod; } -.hs-sel { color: FireBrick; } -.hs-cpp { color: yellow; } -.hs-definition { color: gold; } diff --git a/src/Blog.hs b/src/Blog.hs index 7d985c400..97c7fa9bc 100644 --- a/src/Blog.hs +++ b/src/Blog.hs @@ -28,61 +28,39 @@ show' = pack . show markdownCutoff :: UTCTime markdownCutoff = fromJust $ parseTimeM False defaultTimeLocale "%s" "1367149834" - --- blog CSS (admin is still static) -stylesheetSource = $(luciusFile "res/blog.lucius") -blogStyle = renderCssUrl undefined stylesheetSource - -- blog HTML blogTemplate :: BlogLang -> Text -> Html -> Html blogTemplate lang t_append body = [shamlet| $doctype 5 - #{blogTitle lang t_append} - <link rel="stylesheet" type="text/css" href="/static/bootstrap.css" media="all"> - <link rel="stylesheet" type="text/css" href="/static/blogv40.css" media="all"> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" type="text/css" href="/static/blog.css" media="all"> <link rel="alternate" type="application/rss+xml" title="RSS-Feed" href=#{rssUrl}> - <meta http-equiv="content-type" content="text/html;charset=UTF-8"> + <title>#{blogTitle lang t_append} <body> - <div #wrap> - <div .header> - <div .container > - <div .row> - <div .span12 .blogtitle> - <a class="btitle" href="/">#{blogTitle lang empty} - <div .row> - <br> - <div .span6> - <span .contacts #cosx>^{contactInfo} - <div .container> - ^{body} - <footer .footer> - ^{showFooter $ pack version} + <header> + <h1> + <a href="/" .unstyled-link>#{blogTitle lang empty} + <hr> + ^{body} + ^{showFooter} |] where rssUrl = T.concat ["/", show' lang, "/rss.xml"] - contactInfo = [shamlet| -#{contactText lang} -<a class="link" href=#{mailTo}>Mail -#{orText lang} -<a class="link" href=#{twitter} target="_blank">Twitter -|] -showFooter :: Text -> Html -showFooter v = [shamlet| -<div .container> - <div .row> - <div .span12 .righttext style="text-align: right;margin-right:-200px"> - Proudly made with # - <a class="link" href="http://haskell.org">Haskell - , # - <a class="link" href="https://hackage.haskell.org/package/acid-state">Acid-State - \ and without PHP, Java, Perl, MySQL and Python. - <p> - <a class="link" href=#{repoURL}>#{append "Version " v} - <div .row .text-center> - <div .span12> - <span style="font-size:13px;font-family:Helvetica;">ಠ_ಠ +showFooter :: Html +showFooter = [shamlet| +<footer> + <p .footer>Served without any dynamic languages. + <p .footer> + <a href=#{repoURL} .uncoloured-link>Version #{version} + | + <a href=#{twitter} .uncoloured-link>Twitter + | + <a href=#{mailTo} .uncoloured-link>Mail + <p .lod> + ಠ_ಠ |] isEntryMarkdown :: Entry -> Bool @@ -91,77 +69,63 @@ isEntryMarkdown e = edate e > markdownCutoff renderEntryMarkdown :: Text -> Html renderEntryMarkdown = markdown def {msXssProtect = False} . fromStrict -renderEntries :: Bool -> [Entry] -> Text -> Maybe Html -> Html -renderEntries showAll entries topText footerLinks = [shamlet| -<div .row> - <div .span12> - <p> - <span class="innerTitle"> - <b>#{topText} -$forall entry <- elist - <div .row> - <div .span2> - <a href=#{linkElems entry}> - <b>#{title entry} - <br> - <i>#{pack $ formatTime defaultTimeLocale "%Y-%m-%d" $ edate entry} - <div .span10 .entry> - $if (isEntryMarkdown entry) - ^{renderEntryMarkdown $ append " " $ btext entry} - $else - ^{preEscapedToHtml $ append " " $ btext entry} - $if ((/=) (mtext entry) empty) - <p> - <a .readmore href=#{linkElems entry}>#{readMore $ lang entry} - $else - <br>  -$maybe links <- footerLinks +renderEntries :: Bool -> [Entry] -> Maybe Html -> Html +renderEntries showAll entries pageLinks = [shamlet| +$forall entry <- toDisplay + <article> + <h2> + <a href=#{linkElems entry} .unstyled-link> + #{title entry} + <aside .date> + #{pack $ formatTime defaultTimeLocale "%Y-%m-%d" $ edate entry} + $if (isEntryMarkdown entry) + ^{renderEntryMarkdown $ btext entry} + $else + ^{preEscapedToHtml $ btext entry} + $if ((/=) (mtext entry) empty) + <a .uncoloured-link href=#{linkElems entry}> + #{readMore $ lang entry} + <hr> +$maybe links <- pageLinks ^{links} |] where - elist = if' showAll entries (take 6 entries) + toDisplay = if' showAll entries (take 6 entries) linkElems Entry{..} = concat $ intersperse' "/" [show lang, show entryId] showLinks :: Maybe Int -> BlogLang -> Html showLinks (Just i) lang = [shamlet| $if ((>) i 1) - <div .row .text-center> - <div .span12> - <a href=#{nLink $ succ i}>#{backText lang} - \ -- # - <a href=#{nLink $ pred i}>#{nextText lang} + <div .navigation> + <a href=#{nLink $ succ i} .uncoloured-link>#{backText lang} + | + <a href=#{nLink $ pred i} .uncoloured-link>#{nextText lang} $elseif ((<=) i 1) ^{showLinks Nothing lang} |] where nLink page = T.concat ["/", show' lang, "/?page=", show' page] showLinks Nothing lang = [shamlet| -<div .row .text-center> - <div .span12> - <a href=#{nLink}>#{backText lang} +<div .navigation> + <a href=#{nLink} .uncoloured-link>#{backText lang} |] where nLink = T.concat ["/", show' lang, "/?page=2"] renderEntry :: Entry -> Html renderEntry e@Entry{..} = [shamlet| -<div .row .pusher> - <div .span9> - <span .boldify>#{title} - <div .span3> - <span .righttext><i>#{woText}</i> -<div .row .innerContainer> - <div .span10> - <article> - $if (isEntryMarkdown e) - ^{renderEntryMarkdown btext} - <p>^{renderEntryMarkdown $ mtext} - $else - ^{preEscapedToHtml $ btext} - <p>^{preEscapedToHtml $ mtext} +<article> + <h2> + #{title} + <aside .date> + #{pack $ formatTime defaultTimeLocale "%Y-%m-%d" edate} + $if (isEntryMarkdown e) + ^{renderEntryMarkdown btext} + <p>^{renderEntryMarkdown $ mtext} + $else + ^{preEscapedToHtml $ btext} +<hr> |] - where - woText = flip T.append author $ T.pack $ formatTime defaultTimeLocale (eTimeFormat lang) edate {- Administration pages -} diff --git a/src/Locales.hs b/src/Locales.hs index 0ee5f0e53..00b2b871d 100644 --- a/src/Locales.hs +++ b/src/Locales.hs @@ -20,8 +20,8 @@ if' True x _ = x if' False _ y = y blogTitle :: BlogLang -> Text -> Text -blogTitle DE s = T.concat ["Tazjins Blog", s] -blogTitle EN s = T.concat ["Tazjin's Blog", s] +blogTitle DE s = T.concat ["Tazjins blog", s] +blogTitle EN s = T.concat ["Tazjin's blog", s] showLangText :: BlogLang -> Text showLangText EN = "en" @@ -77,8 +77,8 @@ nextText DE = "Später" nextText EN = "Later" readMore :: BlogLang -> Text -readMore DE = "Weiterlesen" -readMore EN = "Read more" +readMore DE = "[Weiterlesen]" +readMore EN = "[Read more]" eTimeFormat :: BlogLang -> String eTimeFormat DE = "Geschrieben am %Y-%m-%d von " diff --git a/src/Server.hs b/src/Server.hs index 30cf422a8..6996583f5 100644 --- a/src/Server.hs +++ b/src/Server.hs @@ -40,7 +40,6 @@ tazBlog acid resDir = do adminHandler acid -- this checks auth , method GET >> (ok $ toResponse adminLogin) , method POST >> processLogin acid ] - , dirs "static/blogv40.css" $ serveBlogStyle , dir "static" $ staticHandler resDir , blogHandler acid EN , notFound $ toResponse $ showError NotFound DE @@ -96,7 +95,7 @@ showIndex acid lang = do entries <- query' acid (LatestEntries lang) (page :: Maybe Int) <- optional $ lookRead "page" ok $ toResponse $ blogTemplate lang "" $ - renderEntries False (eDrop page entries) (topText lang) (Just $ showLinks page lang) + renderEntries False (eDrop page entries) (Just $ showLinks page lang) where eDrop :: Maybe Int -> [a] -> [a] eDrop (Just i) = drop ((i-1) * 6)