Add shuffle button

attestate · Aug 1, 2024 · a6cd5e0 · a6cd5e0
1 parent 332a2f6
commit a6cd5e0
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 2 deletions.
diff --git a/src/cache.mjs b/src/cache.mjs
@@ -89,6 +89,17 @@ function initialize() {
     `);
 }
 
+export function getRandomIndex() {
+  const row = db
+    .prepare(`SELECT id FROM submissions ORDER BY RANDOM() LIMIT 1`)
+    .get();
+  if (!row) {
+    throw new Error("Nothing found in db");
+  }
+  const [, index] = row.id.split("kiwi:");
+  return index;
+}
+
 export function getLeaders() {
   const oneWeekAgo = Math.floor(Date.now() / 1000) - 7 * 24 * 60 * 60;
   const query = `

diff --git a/src/http.mjs b/src/http.mjs
@@ -69,7 +69,12 @@ import * as frame from "./frame.mjs";
 import * as subscriptions from "./subscriptions.mjs";
 import * as telegram from "./telegram.mjs";
 import * as price from "./price.mjs";
-import { getSubmission, trackOutbound, getLeaders } from "./cache.mjs";
+import {
+  getRandomIndex,
+  getSubmission,
+  trackOutbound,
+  getLeaders,
+} from "./cache.mjs";
 
 const fetch = fetchBuilder.withCache(
   new FileSystemCache({
@@ -163,6 +168,16 @@ export async function launch(trie, libp2p) {
   } catch (err) {
     fingerprint = await import("./fingerprint_example.mjs");
   }
+  app.get("/random", async (request, reply) => {
+    reply.header("Cache-Control", "no-cache");
+    let index;
+    try {
+      index = getRandomIndex();
+    } catch (err) {
+      return reply.status(404).send("Not Found");
+    }
+    return reply.redirect(`/stories?index=${index}`);
+  });
   app.get("/outbound", async (request, reply) => {
     reply.header("Cache-Control", "no-cache");
     const { url } = request.query;

diff --git a/src/views/components/row.mjs b/src/views/components/row.mjs
@@ -12,6 +12,54 @@ import theme from "../../theme.mjs";
 
 const html = htm.bind(vhtml);
 
+const ShuffleSVG = html`<svg
+  style="width: 24px; color: black;"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 256 256"
+>
+  <rect width="256" height="256" fill="none" />
+  <path
+    d="M32,72H55.06a64,64,0,0,1,52.08,26.8l41.72,58.4A64,64,0,0,0,200.94,184H232"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="16"
+  />
+  <polyline
+    points="208 48 232 72 208 96"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="16"
+  />
+  <polyline
+    points="208 160 232 184 208 208"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="16"
+  />
+  <path
+    d="M147.66,100.47l1.2-1.67A64,64,0,0,1,200.94,72H232"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="16"
+  />
+  <path
+    d="M32,184H55.06a64,64,0,0,0,52.08-26.8l1.2-1.67"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="16"
+  />
+</svg>`;
+
 export function extractDomain(link) {
   const parsedUrl = new URL(link);
   const parts = parsedUrl.hostname.split(".");
@@ -296,6 +344,20 @@ const row = (
                     </a>
                   </div>`
                 : ""}
+              ${path === "/stories"
+                ? html`<div
+                    title="Go to random article"
+                    style="display: flex; align-self: stretch;"
+                  >
+                    <a
+                      class="chat-bubble interaction-element"
+                      href="/random"
+                      style="margin: 5px; background-color: #e6e6df; border-radius: 2px; display: flex; justify-content: center; min-width: 40px; align-items: center; flex-direction: column;"
+                    >
+                      ${ShuffleSVG}
+                    </a>
+                  </div>`
+                : ""}
             </div>
             ${path !== "/stories"
               ? html`<div

diff --git a/src/views/story.mjs b/src/views/story.mjs
@@ -190,7 +190,7 @@ export default async function (trie, theme, index, value) {
   story.displayName = ensData.displayName;
 
   const start = 0;
-  const style = "padding: 1rem 5px 0 10px;";
+  const style = "padding: 1rem 10px 0 10px;";
 
   let ogImage = `https://news.kiwistand.com/previews/${index}.jpg`;
   const ogDescription =