Add RSS and JSON feeds

_components/footer.tsx

@@ -28,6 +28,13 @@ export default function({ comp }) {
             style={iconStyle}
           />
         </a>
+        <a href="https://www.fosterhangdaan.com/blog/feed.rss" title="RSS Feed">
+          <img
+            src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/rss.svg"
+            className="icon"
+            style={iconStyle}
+          />
+        </a>
       </div>
       <p>Copyright &copy; 2023 Foster Hangdaan</p>
       <p>Made with <a href="https://lume.land/" target="_blank">Lume</a>, <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> and lots of <img src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/heart.svg" className="icon" style={{ filter: "var(--filter-red)" }} title="love"/>.</p>

_config.ts

@@ -2,8 +2,10 @@ import lume from "lume/mod.ts";
 import jsx from "lume/plugins/jsx.ts";
 import nav from "lume/plugins/nav.ts";
 import sass from "lume/plugins/sass.ts";
+import feed from "lume/plugins/feed.ts";
 
 const site = lume({
+  location: new URL("https://www.fosterhangdaan.com/"),
   server: {
     port: 8080,
   },
@@ -16,5 +18,22 @@ site.copy("static", ".");
 site.use(jsx());
 site.use(nav());
 site.use(sass());
+site.use(feed({
+  query: "type=post",
+  output: [
+    "/blog/feed.rss",
+    "/blog/feed.json",
+  ],
+  info: {
+    title: "Foster Hangdaan's Blog",
+    description: "My thoughts and ideas.",
+    date: new Date(),
+    language: "en",
+  },
+  items: {
+    title: "=title",
+    description: "=description",
+  }
+}));
 
 export default site;

blog/_data.yaml

@@ -0,0 +1,9 @@
+links:
+  - rel: alternate
+    href: /blog/feed.rss
+    type: application/atom+xml
+    title: Foster Hangdaan's Blog
+  - rel: alternate
+    href: /blog/feed.json
+    type: application/json
+    title: Foster Hangdaan's Blog

blog/posts/_data.yaml

@@ -1,4 +1,5 @@
 layout: layouts/post.tsx
+type: post
 author:
   name: Foster Hangdaan
   email: foster@hangdaan.email