Browse Source

Getting posts and blog index looking better

image-sizing
Logan McGrath 11 months ago
parent
commit
682d542270
  1. 23
      site/_layouts/post.html
  2. 20
      site/_partials/teaser-list.html
  3. 32
      site/blog/index.html
  4. 1
      site/css/_theme.scss
  5. 1
      site/css/_variables.scss
  6. 21
      site/css/elements/_teaser-list.scss
  7. 37
      site/css/layout/_post.scss
  8. 2
      src/Green/Context/DateFields.hs
  9. 29
      src/Green/Rule/Blog.hs

23
site/_layouts/post.html

@ -1,15 +1,22 @@
---
layout: default
body-class: post-page
---
<article class="post">
<header>
<h1 class="page-title post-title">$title$</h1>
<p class="published">
Posted on $date$
$if(author)$
by $author$
$endif$
</p>
<header class="post-header">
<h1 class="post-title page-title"><a href="$url$">$title$</a></h1>
<div class="post-published">
<p>
$if(published)$
Posted on $published(shortDate)$
$else$
Drafted on $date(shortDate)$
$endif$
$if(author)$
by $author$
$endif$
</p>
</div>
</header>
$body$
</article>

20
site/_partials/teaser-list.html

@ -1,15 +1,21 @@
<section class="teaser-list">
<h1>Recently Mowed Lawns</h1>
<h1>Latest Blog Posts</h1>
$for(recentPosts)$
<section class="teaser-item post">
<header class="post-header">
<h2 class="post-title"><a href="$url$">$title$</a></h2>
<p class="post-published">
Posted on $published$
$if(author)$
by $author$
$endif$
</p>
<div class="post-published">
<p>
$if(published)$
Posted on $published(shortDate)$
$else$
Drafted on $date(shortDate)$
$endif$
$if(author)$
by $author$
$endif$
</p>
</div>
</header>
$if(teaser)$$teaser$$endif$
<p class="read-more"><a href="$url$">Read more...</a></p>

32
site/blog/index.html

@ -1,6 +1,32 @@
---
layout: page
updated: 2021-05-24T20:07:11-05:00
layout: default
title: "Blogging About Life and Tech"
updated: $latestPostDate$
body-class: blog
---
$latestPost$
<header>
<h1 class="page-title">$title$ -- Latest Posts</h1>
</header>
<article class="post latest-post">
<header class="post-header">
<h1 class="post-title"><a href="$latestPostUrl$">$latestPostTitle$</a></h1>
<div class="post-published">
<p>
This latest post
$if(latestPostPublished)$
published on $latestPostPublished$
$else$
drafted on $latestPostDate$
$endif$
$if(latestPostAuthor)$
by $latestPostAuthor$
$endif$
</p>
</div>
</header>
$latestPostBody$
</article>
$partial("_partials/teaser-list.html")$

1
site/css/_theme.scss

@ -6,7 +6,6 @@
@import "elements/headers";
@import "elements/asides";
@import "elements/code";
@import "elements/teaser-list";
@import "layout/header";
@import "layout/main";
@import "layout/footer";

1
site/css/_variables.scss

@ -9,6 +9,7 @@ $code-font-size: 80%; // because JetBrains Mono runs a bit big
$color-green: darkgreen;
$color-green-light: lighten($color-green, 78%);
$color-text: darkslategray;
$color-text-light: slategray;
$color-text-em: $color-green;
$color-highlight: yellow;
$color-hover: lemonchiffon;

21
site/css/elements/_teaser-list.scss

@ -1,21 +0,0 @@
.teaser-list {
.post-title {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.teaser-item {
> *:nth-last-child(2) {
margin-bottom: 0.5rem;
}
}
.teaser-item + .teaser-item {
border-top: $border-thin;
}
header + * {
margin-top: 0.5rem;
}
.read-more {
margin-top: 0;
margin-bottom: 1rem;
}
}

37
site/css/layout/_post.scss

@ -1,19 +1,50 @@
.post {
.blog {
.page-title {
color: $color-text-light;
font-style: italic;
font-weight: normal;
margin-bottom: 0;
}
}
.post {
.post-header {
.post-title {
margin: 0.5rem 0 0;
padding: 0;
&.page-title {
margin-bottom: 0.5rem;
}
}
.post-published {
div.post-published p {
margin: 0 0 0.5rem;
font-size: 0.9rem;
font-style: italic;
color: slategrey;
color: $color-text-light;
}
}
}
.teaser-list {
.post-title {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.teaser-item {
> *:nth-last-child(2) {
margin-bottom: 0.5rem;
}
}
.teaser-item + .teaser-item {
border-top: $border-thin;
}
header + * {
margin-top: 0.5rem;
}
.read-more {
margin-top: 0;
margin-bottom: 1rem;
}
}

2
src/Green/Context/DateFields.hs

@ -16,7 +16,7 @@ dateFields config =
displayFormat = config ^. siteDisplayFormat
longDateFormat = displayFormat ^. displayDateLongFormat
shortDateFormatField = constField "shortDate" $ displayFormat ^. displayDateShortFormat
timeFormatField = constField "timeFormat" $ displayFormat ^. displayTimeFormat
timeFormatField = constField "timeOnly" $ displayFormat ^. displayTimeFormat
fields = uncurry mkFields <$> fieldKeys
mkFields f k = f longDateFormat timeLocale k
fieldKeys =

29
src/Green/Rule/Blog.hs

@ -148,14 +148,29 @@ draftArchivesCompiler config = do
buildBlogContext :: Item String -> [Item String] -> Context String -> Compiler (Context String)
buildBlogContext latestPost recentPosts siteContext' = do
latestPostTitle <- unContextString siteContext' "title" [] latestPost
return $
mconcat
[ constField "title" ("Most Recently Mowed: " ++ latestPostTitle),
constField "latestPost" (itemBody latestPost),
recentPostsField,
siteContext'
-- TODO find a less sucky way to get this info
let f k = unContextString siteContext' k [] latestPost
[published, date, title, author, url] <-
mapM
f
[ "published",
"date",
"title",
"author",
"url"
]
let latestPostFields =
uncurry constField
<$> [ ("latestPostPublished", published),
("latestPostDate", date),
("latestPostTitle", title),
("latestPostAuthor", author),
("latestPostUrl", url),
("latestPostBody", itemBody latestPost)
]
return $ mconcat latestPostFields <> recentPostsField <> siteContext'
where
recentPostsField =
listField

Loading…
Cancel
Save