Automated deployment: Tue Oct 31 14:59:39 UTC 2023 9e2a30e7e17302d462…

…e9549efed4bf30db2cf549

feed.rss

@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?>
-<rss version="2.0"><channel><title>Kane Data</title><link>https://kanedata.co.uk/</link><description></description><lastBuildDate>Tue, 31 Oct 2023 10:11:23 -0000</lastBuildDate></channel></rss>
+<rss version="2.0"><channel><title>Kane Data</title><link>https://kanedata.co.uk/</link><description></description><lastBuildDate>Tue, 31 Oct 2023 14:59:37 -0000</lastBuildDate></channel></rss>

feeds/all.atom.xml

@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom"><title>Kane Data</title><link href="https://kanedata.co.uk/" rel="alternate"></link><link href="/feeds/all.atom.xml" rel="self"></link><id>https://kanedata.co.uk/</id><updated>2023-10-31T10:11:23Z</updated></feed>
+<feed xmlns="http://www.w3.org/2005/Atom"><title>Kane Data</title><link href="https://kanedata.co.uk/" rel="alternate"></link><link href="/feeds/all.atom.xml" rel="self"></link><id>https://kanedata.co.uk/</id><updated>2023-10-31T14:59:37Z</updated></feed>

index.html

@@ -203,7 +203,7 @@ <h3 class="f2-l f3 near-black header-font b wb-word mv0">Airtable to SQLite</h3>
     <h2 class="f1-ns f3 header-font">
         <a href="https://dkane.net/" class="link near-black logo">David Kane's blog</a>
     </h2>
-    <div class="flex-ns flex-wrap mh-3 mw-100">
+    <div class="flex-ns flex-wrap mh-3 mw-100" id="blog-feed-posts">
         <article class="w-100 mv3 mh3 mh0-ns ph3-ns flex">
     <a href="https://dkane.net/" target="_blank"         class="near-black link no-underline bg-yellow flex-auto bg-animate hover-bg-gold shadow-4">
             <div class="flex flex-column flex-row-ns">
@@ -249,6 +249,36 @@ <h3 class="f2-l f3 near-black header-font b wb-word mv0">Read the latest blog po
                 class="link yellow">company number 14015213</a>)
         </div>
     </footer><!-- /#contentinfo -->
+
+<template id="feed-item-first">
+    <article class="w-100 mv3 mh3 mh0-ns ph3-ns flex">
+        <a href=""
+            class="near-black link no-underline bg-yellow flex-auto blog-post-link">
+            <div class="flex flex-column flex-row-ns">
+                <div class="pl3 pl4-ns pv3 pv4-ns w-50-ns w-100">
+                    <h4 class="f5 gray normal"><span class="blog-post-author">David Kane</span> - <time datetime="" class="blog-post-date"></time></h4>
+                    <h3 class="f2-l f3 near-black header-font b wb-word mv0 blog-post-title"></h3>
+                </div>
+                <!--<div class="w-50-ns w-100">
+                    <img src="/images/boundaries/geolookup.png" class="db h5 fr">
+                </div>-->
+            </div>
+        </a>
+    </article>
+</template>
+<template id="feed-item">
+    <article class="w-100-ns w-100 mv3 mh3 mh0-ns ph3-ns flex">
+        <div class="flex-auto bl bw4 b--yellow">
+            <a href="" class="near-black link no-underline blog-post-link">
+                <div class="pv1 pv2-ns pl2 pl3-ns">
+                    <h4 class="f5 gray normal ma0"><span class="blog-post-author"></span> - <time datetime="" class="blog-post-date"></time></h4>
+                    <h3 class="f3-l f4 near-black header-font b wb-word mv0 blog-post-title"></h3>
+                </div>
+            </a>
+        </div>
+    </article>
+</template>
+<script defer src="https://kanedata.co.uk/theme/js/main.js"></script>
 <script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
 <noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript></body>
 

theme/js/main.js

@@ -0,0 +1,67 @@
+const RSS_FEED_URL = "https://dkane.net/feeds/all.atom.xml";
+const ITEM_TEMPLATE_FIRST = document.getElementById("feed-item-first");
+const ITEM_TEMPLATE = document.getElementById("feed-item");
+const ITEM_LIST = document.getElementById("blog-feed-posts");
+
+const getFeed = async () => {
+    const response = await fetch(RSS_FEED_URL);
+    const text = await response.text();
+    const parser = new DOMParser();
+    const xml = parser.parseFromString(text, "text/xml");
+    const items = xml.querySelectorAll("entry");
+    const feed = [];
+    for (const item of items) {
+        feed.push({
+            title: item.querySelector("title").textContent,
+            link: item.querySelector("link").getAttribute("href"),
+            date: new Date(item.querySelector("updated").textContent),
+            category: item.querySelector("category").getAttribute("term"),
+            author: item.querySelector("author").textContent,
+        });
+    }
+    return feed;
+};
+
+const createItem = (item, template) => {
+    let itemElement = template.content.cloneNode(true);
+    let itemTitle = itemElement.querySelector(".blog-post-title");
+    let itemDate = itemElement.querySelector(".blog-post-date");
+    let itemLink = itemElement.querySelector(".blog-post-link");
+    let itemAuthor = itemElement.querySelector(".blog-post-author");
+    if (itemTitle) {
+        itemTitle.textContent = item.title;
+    }
+    if (itemDate) {
+        itemDate.textContent = item.date.toLocaleDateString();
+        itemDate.datetime = item.date;
+    }
+    if (itemLink) {
+        itemLink.href = item.link;
+    }
+    if (itemAuthor) {
+        itemAuthor.textContent = item.author;
+    }
+    return itemElement;
+};
+
+getFeed().then((feed) => {
+    // remove any existing content
+    while (ITEM_LIST.firstChild) {
+        ITEM_LIST.removeChild(ITEM_LIST.firstChild);
+    }
+
+    feed = feed.filter((item) => item.category === "Blog").slice(0, 7);
+
+    const firstItem = feed.shift();
+    ITEM_LIST.appendChild(createItem(
+        firstItem,
+        ITEM_TEMPLATE_FIRST
+    ));
+
+    feed.forEach((item) => {
+        ITEM_LIST.appendChild(createItem(
+            item,
+            ITEM_TEMPLATE
+        ));
+    });
+});