Add <pubDate> to RSS posts, add RSS subscribe button, minor changes

public/assets/css/blog.css

@@ -80,6 +80,20 @@
   text-decoration: underline;
 }
 
+.buttons {
+  margin: 10vh auto;
+  width: min-content;
+}
+.buttons button.secondary.icon-btn {
+  cursor: pointer;
+  width: 35px;
+  height: 35px;
+}
+
+footer {
+  margin-top: 160px;
+}
+
 @media screen and (max-width: 900px) {
   .blog-card {
     flex-flow: column;
@@ -92,10 +106,13 @@
     min-height: 250px;
     border-radius: 10px 10px 0 0;
   }
+  footer {
+    margin-top: 100px;
+  }
 }
 
 @media screen and (max-width: 450px) {
   .blog-card .cover {
     min-height: 200px;
   }
-}
+}

src/routers/blog.js

@@ -49,13 +49,16 @@ router.get('/', async (request, response) => {
 // RSS feed
 router.get('/feed.xml', async (request, response) => {
 
-	const pubDate = new Date(postList()[0].postInfo.date).toUTCString();
+	// Adds the pubDate to the post array
+	const posts = postList().map((post) => {
+		post.postInfo.pubDate = new Date(post.postInfo.date).toUTCString();
+		return post;
+	});
 
 	response.set('Content-Type', 'application/rss+xml');
 	response.render('blog-rss', {
 		layout: false,
-		postList,
-		pubDate
+		posts
 	});
 });
 

views/blog-rss.handlebars

@@ -6,7 +6,8 @@
     <link>https://pretendo.network/blog</link>
     <atom:link href="https://pretendo.network/blog/feed.xml" rel="self" type="application/rss+xml" />
     <description>The latest updates in condensed chunks.</description>
-    <pubDate>{{ this.pubDate }}</pubDate>
+    <pubDate>{{ posts.[0].postInfo.pubDate }}</pubDate>
+    <ttl>30</ttl>
     <category>Web development</category>
     <image>
         <url>https://pretendo.network/assets/images/opengraph/opengraph-image.png</url>
@@ -14,12 +15,13 @@
         <link>https://pretendo.network/blog</link>
     </image>
 
-    {{#each postList }}
+    {{#each posts }}
     <item>
-         <title>{{ this.postInfo.title }}</title>
-        <link>https://pretendo.network/blog/{{this.slug}}</link>
+        <title>{{ this.postInfo.title }}</title>
         <description>{{ this.postInfo.caption }}</description>
+        <link>https://pretendo.network/blog/{{this.slug}}</link>
         <guid>https://pretendo.network/blog/{{this.slug}}</guid>
+        <pubDate>{{ this.postInfo.pubDate }}</pubDate>
     </item>
     {{/each}}
 

views/blog.handlebars

@@ -33,6 +33,15 @@
 		</a>
 	{{/each}}
 
+	<div class="buttons">
+		<!-- TODO: implement pagination -->
+		<a href="/blog/feed.xml" target="_blank" title="RSS feed">
+			<button class="button secondary github icon-btn">
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>			</button>
+			</button>
+		</a>
+	</div>
+
 	{{> footer }}
 
 </div>