Improves styling and adds rss feed

master
Jonathan Hodgson 5 years ago
parent 7135f165e0
commit eea39d661d
  1. 64
      assets/css/main.less
  2. 43
      build.sh
  3. 6
      templates/blog.html

@ -67,12 +67,16 @@
html{ html{
background-color: @gb-dm-bg0; background-color: @gb-dm-bg0;
scrollbar-color: @gb-dm-fg3 transparent;
scrollbar-width: thin;
} }
body{ body{
background-color: @gb-dm-bg0; background-color: @gb-dm-bg0;
color: @gb-dm-fg0; color: @gb-dm-fg0;
margin: 0; margin: 0;
scrollbar-color: @gb-dm-fg3 transparent;
scrollbar-width: thin;
} }
.container{ .container{
@ -102,10 +106,28 @@ main{
} }
} }
pre{ h2{
overflow: auto; text-decoration: underline;
&:not(:first-child){
margin-top: 2em;
}
}
h3{
color: @gb-dm-fg3;
} }
p{
line-height: 1.3em;
}
li{
margin: 0.5em 0;
}
//pre{
// overflow: auto;
//}
article{ article{
background-color: @gb-dm-bg1; background-color: @gb-dm-bg1;
margin: 1em; margin: 1em;
@ -178,10 +200,16 @@ a:active, a:hover{
// margin-bottom: 0; // margin-bottom: 0;
//} //}
p code{ p code, li code{
display: inline-block; display: inline-block;
background-color: @gb-dm-bg2; background-color: @gb-dm-bg2;
padding: .2em; padding: 0 0.3em;
border-radius: 1em;
box-shadow: 0px 0px 1px 0px @gb-dm-dark-red;
transition: box-shadow .2s ease;
&:hover{
box-shadow: 0px 0px 1px 0px @gb-dm-dark-green;
}
} }
@ -198,11 +226,29 @@ pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; } pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; } code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; } div.sourceCode, article > pre {
pre.sourceCode { margin: 0; } margin: 1em 0;
@media screen { padding: 0;
div.sourceCode { overflow: auto; } background-color: @gb-dm-bg0-hard;
border-radius: 1em;
box-shadow: 0px 0px 1px 0px @gb-dm-dark-red;
transition: box-shadow .2s ease;
overflow: hidden;
&:hover{
box-shadow: 0px 0px 1px 0px @gb-dm-dark-green;
}
pre.sourceCode{
padding: 1em;
margin: 0;
overflow: auto;
scrollbar-width: thin;
}
} }
article>pre{
padding: 1em;
overflow: auto;
}
pre.sourceCode { margin: 0; }
@media print { @media print {
pre > code.sourceCode { white-space: pre-wrap; } pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; } pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
@ -240,7 +286,7 @@ code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */ code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */ code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */ code span.dt { color: @gb-dm-dark-red; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */ code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */ code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { color: @gb-dm-dark-blue; } /* Extension */ code span.ex { color: @gb-dm-dark-blue; } /* Extension */

@ -20,12 +20,15 @@ blog(){
makeIntro(){ makeIntro(){
local file="$1" local file="$1"
local output="tmp/intros/$file" local output="tmp/intros/$file"
local rssoutput="tmp/rss/$file"
# We delete tmp each time the build script runs, so if the file exists, we have already generated one this time # We delete tmp each time the build script runs, so if the file exists, we have already generated one this time
[ -f "$output" ] && return 1 [ -f "$output" ] && return 1
mkdir -p "${output%/*}" mkdir -p "${output%/*}"
mkdir -p "${rssoutput%/*}"
local info="$(sed -n '/---/,/---/p' "$file" | sed '/^$/,$d' | sed -n '1,/---/p' | sed '/^---$/d')" local info="$(sed -n '/---/,/---/p' "$file" | sed '/^$/,$d' | sed -n '1,/---/p' | sed '/^---$/d')"
local slug=$(getBlogSlug "$file") local slug=$(getBlogSlug "$file")
local date="$(echo "$info" | yq -r .date)" local date="$(echo "$info" | yq -r .date)"
local rfc822="$(date --utc -d "$date" "+%a, %d %b %Y %H:%M:%S") UT"
local tags="$(echo "$info" | yq -r 'if ( .tags | type ) == "array" then .tags else [ .tags ] end | join("\n")' | awk '{print "<li>" $0 "</li>"}' )" local tags="$(echo "$info" | yq -r 'if ( .tags | type ) == "array" then .tags else [ .tags ] end | join("\n")' | awk '{print "<li>" $0 "</li>"}' )"
local title="$(echo "$info" | yq -r .title)" local title="$(echo "$info" | yq -r .title)"
local description="$(echo "$info" | yq -r .description)" local description="$(echo "$info" | yq -r .description)"
@ -39,11 +42,23 @@ makeIntro(){
<p>$description</p> <p>$description</p>
<p><a href='$slug'>Read More</a></p> <p><a href='$slug'>Read More</a></p>
</article>" > "$output" </article>" > "$output"
echo "<item>
<title>
<![CDATA[$title]]></title>
<link>https://jonathanh.co.uk/$slug</link>
<guid isPermaLink=\"true\">https://jonathanh.co.uk/$slug</guid>
<pubDate>$rfc822</pubDate>
<description><![CDATA[$description]]></description>
</item>" > "$rssoutput"
} }
getIntro(){ getIntro(){
local file="$1" local file="$1"
local output="tmp/intros/$file" local output="tmp/intros/$file"
if [ "$2" = "rss" ]; then
local output="tmp/rss/$file"
fi
makeIntro "$file" makeIntro "$file"
cat "$output" cat "$output"
} }
@ -137,6 +152,31 @@ card(){
content/card.curl > public_html/card content/card.curl > public_html/card
} }
rss(){
echo "Generating RSS Feed"
lastUpdate="$(date --utc "+%a, %d %b %Y %H:%M:%S") UT"
# First loop makes all the intros needed and stores them in tmp/intros
find content/blog/ -type f -name '*.md' | grep -v 'xxx' | sort -r | head -n 20 | while read file; do
makeIntro "$file" &
done
wait
(
echo "<?xml version='1.0' encoding='UTF-8' ?>
<rss xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:content=\"http://purl.org/rss/1.0/modules/content/\" xmlns:atom=\"http://www.w3.org/2005/Atom\" version=\"2.0\">
<channel>
<title><![CDATA[Jonathan Hodgson]]></title>
<description><![CDATA[Jonathan Hodgson's Blog]]></description>
<link>https://jonathanh.co.uk</link>
<lastBuildDate>$lastUpdate</lastBuildDate>"
find content/blog/ -type f -name '*.md' | grep -v 'xxx' | sort -r | head -n 20 | while read file; do
grep -Eq '^draft: true' "$file" || getIntro "$file" rss
done
echo "</channel></rss>";
) > public_html/feed.rss
}
clean(){ clean(){
rm -rf tmp > /dev/null 2> /dev/null rm -rf tmp > /dev/null 2> /dev/null
@ -156,5 +196,6 @@ case "$1" in
blog) blog ;; blog) blog ;;
tags) tags ;; tags) tags ;;
card) card ;; card) card ;;
all) tags && blog && index && card ;; rss) rss ;;
all) tags && blog && index && rss && card ;;
esac esac

@ -16,7 +16,8 @@
<title>Jonathan Hodgson's Blog</title> <title>Jonathan Hodgson's Blog</title>
$endif$ $endif$
<link rel="stylesheet" href="/assets/css/main.min.css" type="text/css" charset="utf-8"> <link rel="stylesheet" href="/assets/css/main.min.css" type="text/css" charset="utf-8">
<link rel="alternate" href="/feed.rss" type="application/rss+xml">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
@ -67,7 +68,8 @@ $body$
</aside> </aside>
</div> </div>
<footer> <footer>
<a href="/help-me-out.html">Help me out</a> <a href="/help-me-out.html">Help Me Out</a>
<a href="/other-stuff-you-might-like.html">Other Stuff You Might Like</a>
<a href="https://git.jonathanh.co.uk/jab2870/Website">Website Source</a> <a href="https://git.jonathanh.co.uk/jab2870/Website">Website Source</a>
</footer> </footer>
</body> </body>

Loading…
Cancel
Save