add fluxwidget

fluxwidget/index.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="style.css">
+<script src="script.js"></script>
+<title>Miniflux Feed Status</title>

fluxwidget/script.js

@@ -0,0 +1,31 @@
+async function api(url, key, endpoint) {
+  const response = await fetch(`${url}/v1/${endpoint}`, {
+    headers: { "X-Auth-Token": key },
+  })
+  return response.json()
+}
+
+window.onload = async function run() {
+  const params = new URLSearchParams(window.location.search)
+  const url = `https://${params.get("url")}`
+  const key = params.get("key")
+
+  const link = document.createElement("a")
+  link.href = url
+  document.body.appendChild(link)
+
+  const counters = await api(url, key, 'feeds/counters')
+  const unreads = Object.entries(counters.unreads).sort(([,a],[,b]) => b-a)
+
+  for (const [id, count] of unreads) {
+    const icon = await api(url, key, `feeds/${id}/icon`)
+    const container = document.createElement("div")
+    const img = document.createElement("img")
+    const num = document.createElement("b")
+    img.src = `data:${icon.data}`
+    num.textContent = count
+    container.appendChild(img)
+    container.appendChild(num)
+    link.appendChild(container)
+  }
+}

fluxwidget/style.css

@@ -0,0 +1,28 @@
+div {
+    border-radius: 1.5em;
+    border: mediumpurple solid;
+    display: inline-flex;
+    margin: .2em;
+    margin-bottom: 1em;
+    margin-right: .8em;
+}
+div * {
+    font-size: 4em;
+    height: 1em;
+    padding: .3em;
+}
+a, html, body {
+    background-color: black;
+    color: white;
+    font-family: monospace;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+a {
+    display: block;
+    padding: 1em;
+    padding-top: 2em;
+    text-decoration: inherit;
+}