RSS feed

static/css/post-self.css

@@ -175,7 +175,31 @@ main.story .author, main.story .character, main.story h3 {
     content: "❓ Canon Note";
     font-weight: bold;
 }
-    
+
+#feed article h2 {
+    text-align: left;
+    opacity: 0.9;
+    margin: 0;
+}
+
+#feed article:after {
+    display: block;
+    width: 100%;
+    text-align: center;
+    content: '§';
+}
+
+#feed article .pub-date {
+    font-size: 90%;
+    opacity: 0.9;
+}
+
+#feed article li {
+    text-align: left;
+    list-style-type: disc;
+    margin-left: 1.5rem;
+}
+
 @media only screen and (max-width: 960px) {
     .carousel nav {
             display: none;

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);
+  });
+
+

static/rss.js

@@ -1,27 +0,0 @@
-
-
-const RSS_URL = `https://cohost.org/post-self/rss/public.atom`;
-
-fetch(RSS_URL)
-  .then(response => response.text())
-  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
-  .then(data => {
-    console.log(data);
-    const items = data.querySelectorAll("item");
-    let html = ``;
-    items.forEach(el => {
-      html += `
-        <article>
-          <img src="${el.querySelector("link").innerHTML}/image/large.png" alt="">
-          <h2>
-            <a href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener">
-              ${el.querySelector("title").innerHTML}
-            </a>
-          </h2>
-        </article>
-      `;
-    });
-    document.querySelector('#feed').html = html;
-  });
-
-