[blog] Implement new and simpler design
This commit is contained in:
Vincent Ambo
parent
cfea17dc0d
commit
9f33d98db5
5 changed files with 98 additions and 287 deletions
35
res/blog.css
Normal file
35
res/blog.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
187
res/blog.lucius
187
res/blog.lucius
|
|
@ -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; }
|
||||
152
src/Blog.hs
152
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
|
||||
<head>
|
||||
<title>#{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 -}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 "
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue