RSS feed

static/js/carousel.js

@@ -0,0 +1,41 @@
+function switchTab(e) {
+  e.preventDefault();
+  const tab = window.location.hash.substring(1);
+
+  // Unselect currently selected item.
+  try {
+    document
+      .querySelector('.carousel-entry.on').classList.remove('on');
+    document
+      .querySelector('.carousel-item.on').classList.remove('on');
+  } catch(e) {
+    // pass
+  }
+
+  // Select the new item.
+  document
+    .querySelector(`.carousel-entry.${tab}`)
+    .classList.add('on');
+  document
+    .querySelector(`.carousel-item.${tab}`)
+    .classList.add('on');
+}
+
+function load() {
+  // Add a listener for the location changing if window width supports it.
+  if (window.innerWidth >= 960) {
+    window.addEventListener('popstate', switchTab);
+  } else {
+    window.removeEventListener('popstate', switchTab);
+  }
+}
+
+// If we enter the page with no hash, select home.
+if (!window.location.hash) {
+  history.pushState({}, '', '#home');
+}
+
+// If we enter the page with a hash, select the current item.
+switchTab({preventDefault: () => {}});
+load();
+window.addEventListener('resize', load);

static/js/rss.js

@@ -0,0 +1,31 @@
+const RSS_URL = `https://read.post-self.ink/post-self/feed/`;
+
+fetch(RSS_URL)
+  .then(response => response.text())
+  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
+  .then(data => {
+    const items = data.querySelectorAll("item");
+    let html = ``;
+    items.forEach(el => {
+      const link    = el.querySelector("link").innerHTML,
+            title   = el.querySelector("title").innerHTML,
+            pubDate = new Date(el.querySelector("pubDate").innerHTML),
+            content = el.querySelector("encoded").childNodes[0].nodeValue; // Get the CDATA value
+      html += `
+        <article>
+          <h2>
+            <a href="${link}" target="_blank">
+              ${title}
+            </a>
+          </h2>
+          <p class="pub-date">${pubDate.toLocaleString()}</p>
+          <section class="item-content">
+            ${content}
+          </section>
+        </article>
+      `;
+    });
+    document.querySelector('#feed').insertAdjacentHTML('beforeend', html);
+  });
+
+