Slugify titles in story links

attestate · Oct 6, 2024 · 7124f8b · 7124f8b
1 parent de50174
commit 7124f8b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -97,6 +97,7 @@
     "rss-parser": "3.13.0",
     "satori": "0.10.9",
     "sharp": "0.32.6",
+    "slugify": "1.6.6",
     "svg-line-chart": "0.4.1",
     "vhtml": "2.2.0",
     "web-push": "3.6.7",

diff --git a/src/http.mjs b/src/http.mjs
@@ -573,7 +573,12 @@ export async function launch(trie, libp2p) {
     );
     return reply.status(200).type("text/html").send(content);
   });
-  app.get("/stories", async (request, reply) => {
+  app.get("/stories/:slug?", async (request, reply) => {
+    if (request.params.slug) {
+      const queryParams = new URLSearchParams(request.query).toString();
+      return reply.redirect(`/stories?${queryParams}`);
+    }
+
     let referral;
     try {
       referral = utils.getAddress(request.query.referral);

diff --git a/src/views/components/row.mjs b/src/views/components/row.mjs
@@ -4,6 +4,7 @@ import { formatDistanceToNowStrict as originalFormatDistance } from "date-fns";
 import { URL } from "url";
 import DOMPurify from "isomorphic-dompurify";
 import ethers from "ethers";
+import slugify from "slugify";
 
 import { commentCounts } from "../../store.mjs";
 import ShareIcon from "./shareicon.mjs";
@@ -273,7 +274,9 @@ const row = (
                                 ),
                               )}`
                         }"
-                        data-story-link="/stories?index=0x${story.index}"
+                        data-story-link="/stories/${slugify(
+                          DOMPurify.sanitize(story.title),
+                        )}?index=0x${story.index}"
                         target="${
                           path === "/submit" || path === "/demonstration"
                             ? "_self"
@@ -343,7 +346,9 @@ const row = (
                           ? html`
                               <a
                                 class="meta-link"
-                                href="/stories?index=0x${story.index}"
+                                href="/stories/${slugify(
+                                  DOMPurify.sanitize(story.title),
+                                )}?index=0x${story.index}"
                               >
                                 ${formatDistanceToNowStrict(
                                   new Date(story.timestamp * 1000),
@@ -448,7 +453,9 @@ const row = (
                                     class="caster-link share-link"
                                     title="Share"
                                     style="white-space: nowrap;"
-                                    onclick="event.preventDefault(); navigator.share({url: 'https://news.kiwistand.com/stories?index=0x${story.index}' });"
+                                    onclick="event.preventDefault(); navigator.share({url: 'https://news.kiwistand.com/stories/${slugify(
+                                      DOMPurify.sanitize(story.title),
+                                    )}?index=0x${story.index}' });"
                                   >
                                     ${ShareIcon(
                                       "padding: 0 3px 1px 0; vertical-align: bottom; height: 13px; width: 13px;",
@@ -472,7 +479,9 @@ const row = (
                                     class="meta-link share-link"
                                     title="Share"
                                     style="white-space: nowrap;"
-                                    onclick="event.preventDefault(); navigator.clipboard.writeText('https://news.kiwistand.com/stories?index=0x${story.index}'); window.toast.success('Link copied!');"
+                                    onclick="event.preventDefault(); navigator.clipboard.writeText('https://news.kiwistand.com/stories/${slugify(
+                                      DOMPurify.sanitize(story.title),
+                                    )}?index=0x${story.index}'); window.toast.success('Link copied!');"
                                   >
                                     ${CopyIcon(
                                       "padding: 0 3px 1px 0; vertical-align: bottom; height: 13px; width: 13px;",
@@ -502,7 +511,9 @@ const row = (
                       <a
                         class="chat-bubble interaction-element"
                         id="chat-bubble-${story.index}"
-                        href="/stories?index=0x${story.index}"
+                        href="/stories/${slugify(
+                          DOMPurify.sanitize(story.title),
+                        )}?index=0x${story.index}"
                         style="margin: 5px; background-color: #e6e6df; border-radius: 2px; display: ${path ===
                         "/stories"
                           ? "none"