rss feeds

assets/js/friends.js

@@ -0,0 +1,57 @@
+const dom = document.getElementById('friends')
+
+const topk = '{{.Site.Params.friends.topk}}'
+const raw = '{{.Site.Params.friends.feeds}}'
+
+const feeds = raw.replace(/^\[|\]$/g, '').split(' ')
+
+feeds.forEach(v => fetch(v).then(r => r.text()).then(r => rss(r)))
+
+/**
+ * @param {string} xml 
+ */
+function rss(xml) {
+  xml = xml.trim().replace(/\n/g, '')
+  const g = xml.matchAll(/<(item|entry)>.*?<\/(item|entry)>/g)
+  let n = +topk || 2;
+  while (n) {
+    const next = g.next()
+    if (next.done) {
+      break
+    }
+
+    // title
+    const title = next.value[0].match(/(?<=<title>).*(?=<\/title>)/)[0]
+
+    // link
+    const link = next.value[0].match(/(?<=<(link|id)>).*(?=<\/(link|id)>)/)[0]
+
+    // date
+    const date = next.value[0].match(/(?<=<(pubDate|updated)>).*(?=<\/(pubDate|updated)>)/)[0]
+
+    // innsert dom
+    const div = document.createElement('div')
+    div.className = 'flex justify-between sm:flex-col-reverse my-4 sm:mb-6 sm:mt-3'
+    div.innerHTML = template(link, title, date)
+    dom.appendChild(div)
+
+    n--;
+  }
+}
+
+/**
+ * @param {string} date 
+ */
+function format(date) {
+  const d = new Date(date)
+  return d.toDateString()
+}
+
+
+function template() {
+  const a = arguments
+  return `
+    <a href=${a[0]}>${a[1]}</a>
+    <div class="sm:mb-2 sm:text-xs">${format(a[2])}</div>
+  `.trim()
+}

assets/js/main.js

@@ -1,3 +1,4 @@
 import "./theme";
 import "./style";
 import "./selectable";
+import "./friends";

assets/sass/main.scss

@@ -74,6 +74,7 @@ p code {
 }
 
 a {
+  line-height: 1.5;
   text-decoration: none;
   color: inherit;
 }

exampleSite/config.toml

@@ -97,6 +97,16 @@ name = "rss"
 url = "/index.xml"
 svg = ""
 
+# If set, titles and links of the topk newest posts extracted from 
+# the feeds will be displayed in the home page. Note that the feeds
+# providers have to make their 'Access-Control-Allow-Origin' contain
+# your domain, otherwise the feeds cannot be fetched.
+[params.friends]
+feeds = ["https://is.boxmoe.cn/atom.xml", "https://xiabor.com/atom.xml"]
+topk = 3
+title = "Friends' Posts"
+
+
 
 # Menu.main is an array that's used to decide what entries can be shown
 # on the navigator of yur blog. You can use a weight to make them ordered.

layouts/index.html

@@ -15,5 +15,7 @@
 			{{ end }}
 			{{ partial "paginator.html" . }}
 		</div>
+		<h3 class="my-6">{{ .Site.Params.friends.title }}</h3>
+		<div id="friends"></div>
 	</main>
 {{ end }}

layouts/partials/list.html

@@ -1,10 +1,10 @@
-<div class="flex justify-between sm:flex-col-reverse my-4 sm:mb-6 sm:mt-3">
+<div class="flex justify-between sm:flex-col-reverse my-3 sm:mb-6 sm:mt-3">
 {{ if .Page.Params.link }}
 <a class="" href="{{ .Page.Params.link }}">{{ .Title }}</a>
 {{ else }}
 <a class="" href="{{ .RelPermalink }}">{{ .Title }}</a>
 {{ end }}
 {{ if .Site.Params.displayDate }}
-  <div class="sm:mb-2 sm:text-sm">{{ dateFormat .Site.Params.timeformat .Date }}</div>
+  <div class="sm:mb-1 sm:text-xs">{{ dateFormat .Site.Params.timeformat .Date }}</div>
 {{ end }}
 </div>