Improves styling and adds rss feed

assets/css/main.less

@@ -67,12 +67,16 @@
 
 html{
 	background-color: @gb-dm-bg0;
+	scrollbar-color: @gb-dm-fg3 transparent;
+	scrollbar-width: thin;
 }
 
 body{
 	background-color: @gb-dm-bg0;
 	color: @gb-dm-fg0;
 	margin: 0;
+	scrollbar-color: @gb-dm-fg3 transparent;
+	scrollbar-width: thin;
 }
 
 .container{
@@ -102,9 +106,27 @@ 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{
 	background-color: @gb-dm-bg1;
@@ -178,10 +200,16 @@ a:active, a:hover{
 //	margin-bottom: 0;
 //}
 
-p code{
+p code, li code{
 	display: inline-block;
 	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:empty { height: 1.2em; }
 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 {
 pre > code.sourceCode { white-space: pre-wrap; }
 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.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
 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.er { color: #ff0000; font-weight: bold; } /* Error */
 code span.ex { color: @gb-dm-dark-blue; } /* Extension */

build.sh

@@ -20,12 +20,15 @@ blog(){
 makeIntro(){
 	local file="$1"
 	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
 	[ -f "$output" ] && return 1
 	mkdir -p "${output%/*}"
+	mkdir -p "${rssoutput%/*}"
 	local info="$(sed -n '/---/,/---/p' "$file" | sed '/^$/,$d' | sed -n '1,/---/p' | sed '/^---$/d')"
 	local slug=$(getBlogSlug "$file")
 	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 title="$(echo "$info" | yq -r .title)"
 	local description="$(echo "$info" | yq -r .description)"
@@ -39,11 +42,23 @@ makeIntro(){
 		<p>$description</p>
 		<p><a href='$slug'>Read More</a></p>
 	</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(){
 	local file="$1"
 	local output="tmp/intros/$file"
+
+	if [ "$2" = "rss" ]; then
+		local output="tmp/rss/$file"
+	fi
 	makeIntro "$file"
 	cat "$output"
 }
@@ -137,6 +152,31 @@ 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(){
 	rm -rf tmp > /dev/null 2> /dev/null
@@ -156,5 +196,6 @@ case "$1" in
 	blog) blog ;;
 	tags) tags ;;
 	card) card ;;
-	all) tags && blog && index && card ;;
+	rss) rss ;;
+	all) tags && blog && index && rss && card ;;
 esac

templates/blog.html

@@ -17,6 +17,7 @@
 		$endif$
 		<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="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">
@@ -67,7 +68,8 @@ $body$
 			</aside>
 		</div>
 		<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>
 		</footer>
 	</body>