feat(rss): add highlights feed; remove feeds popup

Author: karamanliev

src/client/styles/header.scss

@@ -51,51 +51,6 @@
     }
   }
 
-  .rssMenu {
-    position: relative;
-
-    summary {
-      display: block;
-      list-style: none;
-      cursor: pointer;
-    }
-
-    summary::-webkit-details-marker {
-      display: none;
-    }
-  }
-
-  .rssMenuPopover {
-    position: absolute;
-    top: calc(100% + var(--size-2));
-    right: 0;
-    z-index: 10;
-
-    display: grid;
-    min-width: 13rem;
-    padding: var(--size-2);
-    border: 1px solid var(--orange-200);
-    border-radius: var(--radius-lg);
-    background: var(--bg);
-    box-shadow: 0 10px 30px rgb(0 0 0 / 0.08);
-  }
-
-  .rssMenuLink,
-  .rssMenuIndex {
-    padding: var(--size-2);
-    border-radius: var(--radius-md);
-    transition: background-color 100ms;
-
-    &:hover {
-      background: var(--orange-100);
-    }
-  }
-
-  .rssMenuIndex {
-    margin-bottom: var(--size-1);
-    font-weight: 600;
-  }
-
   .iconSystem,
   .iconLight,
   .iconDark {
@@ -118,16 +73,6 @@
   .iconButton:hover {
     background: var(--neutral-800);
   }
-
-  .rssMenuPopover {
-    border-color: var(--neutral-800);
-    box-shadow: 0 10px 30px rgb(0 0 0 / 0.24);
-  }
-
-  .rssMenuLink:hover,
-  .rssMenuIndex:hover {
-    background: var(--neutral-800);
-  }
 }
 
 html[data-theme="system"] .header .iconSystem {

src/components/Header.tsx

@@ -1,5 +1,4 @@
 import { useSSRContext } from "~/lib/context";
-import { RSS_FEEDS, getRSSFeedPath } from "~/lib/rss";
 import { Link } from "./Link";
 import { MagnifyingGlassIcon } from "./icons/MagnifyingGlassIcon";
 import { MoonIcon } from "./icons/MoonIcon";
@@ -42,27 +41,9 @@ export const Header = () => {
       >
         <PaperAirplaneIcon />
       </button>
-      <details class="rssMenu">
-        <summary class="iconButton" title="RSS feeds" aria-label="RSS feeds">
-          <RssIcon />
-        </summary>
-
-        <div class="rssMenuPopover">
-          <Link className="rssMenuIndex" href="/rss" isActive={url.pathname === "/rss"}>
-            RSS index
-          </Link>
-
-          {RSS_FEEDS.map((feed) => {
-            const feedPath = getRSSFeedPath(feed.slug);
-
-            return (
-              <Link className="rssMenuLink" href={feedPath} key={feed.slug}>
-                {feed.title}
-              </Link>
-            );
-          })}
-        </div>
-      </details>
+      <Link className="iconButton" href="/rss" title="RSS feeds" aria-label="RSS feeds">
+        <RssIcon />
+      </Link>
       <a
         className="iconButton"
         title="Search Hacker News"

src/lib/hnrss.ts

@@ -142,7 +142,7 @@ export const parseRSSQuery = (
   const count = parsePositiveInt(query.count);
   const description = getSingleQueryValue(query.description);
   const link = getSingleQueryValue(query.link);
-  const isStoryFeed = feed.source !== "bestcomments";
+  const isStoryFeed = feed.source !== "comments";
   const linkTo = isStoryFeed && link === "comments" ? "comments" : "article";
   const minPoints = isStoryFeed ? parsePositiveInt(query.points) : undefined;
   const minComments = isStoryFeed ? parsePositiveInt(query.comments) : undefined;
@@ -205,15 +205,30 @@ const buildPaginatedHNUrl = (path: string, page: number) => {
   return `${HN_BASE_URL}${path}${separator}p=${page}`;
 };
 
-const scrapeItemIds = async (path: string, page: number) => {
+const parseScrapedPage = (html: string) => {
+  const document = parse(html);
+
+  return {
+    ids: document
+      .querySelectorAll("tr.athing")
+      .map((node) => node.getAttribute("id"))
+      .filter((id): id is string => Boolean(id)),
+    nextPath: document.querySelector("a.morelink")?.getAttribute("href") ?? undefined,
+  };
+};
+
+const scrapePagedItemIds = async (path: string, page: number) => {
   const url = buildPaginatedHNUrl(path, page);
   const html = await getCached(url, () => fetchText(url));
-  const document = parse(html);
 
-  return document
-    .querySelectorAll("tr.athing")
-    .map((node) => node.getAttribute("id"))
-    .filter((id): id is string => Boolean(id));
+  return parseScrapedPage(html).ids;
+};
+
+const scrapeCursorItemIds = async (path: string) => {
+  const url = new URL(path, HN_BASE_URL).toString();
+  const html = await getCached(url, () => fetchText(url));
+
+  return parseScrapedPage(html);
 };
 
 const buildNumericFilters = (
@@ -260,7 +275,7 @@ const buildSpecialFeedParams = (
 
   params.set("hitsPerPage", String(ids.length));
 
-  if (feed.source === "bestcomments") {
+  if (feed.source === "comments") {
     params.set(
       "filters",
       ids.map((id) => `objectID:"${id}"`).join(" OR "),
@@ -287,8 +302,33 @@ const fetchSpecialFeedHits = async (
 
   const hits: AlgoliaSearchHit[] = [];
 
+  if (feed.slug === "highlights") {
+    let nextPath = feed.scrapePath;
+
+    while (nextPath && hits.length < query.count) {
+      const scrapedPage = await scrapeCursorItemIds(nextPath);
+
+      if (scrapedPage.ids.length === 0) {
+        break;
+      }
+
+      const params = buildSpecialFeedParams(feed, query, scrapedPage.ids);
+      const pageHits = await fetchAlgolia(params);
+
+      hits.push(...orderHitsByIds(scrapedPage.ids, pageHits));
+
+      if (scrapedPage.ids.length < PAGE_SIZE) {
+        break;
+      }
+
+      nextPath = scrapedPage.nextPath;
+    }
+
+    return hits;
+  }
+
   for (let page = 1; hits.length < query.count; page += 1) {
-    const pageIds = await scrapeItemIds(feed.scrapePath, page);
+    const pageIds = await scrapePagedItemIds(feed.scrapePath, page);
 
     if (pageIds.length === 0) {
       break;
@@ -434,7 +474,7 @@ export const buildRSSFeedXML = async (
   const visibleHits = hits.slice(0, query.count);
   let items: RSSItem[];
 
-  if (feed.source === "bestcomments") {
+  if (feed.source === "comments") {
     items = visibleHits.map((hit) => buildCommentItem(hit, requestUrl.origin, query));
   } else {
     items = visibleHits.map((hit) => buildStoryItem(hit, requestUrl.origin, query));

src/lib/rss.ts

@@ -7,6 +7,7 @@ export type RSSFeedSlug =
   | "classic"
   | "best"
   | "active"
+  | "highlights"
   | "bestcomments";
 
 export type RSSFeedCategory =
@@ -21,7 +22,7 @@ export interface RSSFeedDefinition {
   summary: string;
   category: RSSFeedCategory;
   channelLink: string;
-  source: "algolia" | "special" | "bestcomments";
+  source: "algolia" | "special" | "comments";
   algoliaTags?: string;
   scrapePath?: string;
   topicName?: string;
@@ -104,13 +105,22 @@ export const RSS_FEEDS: RSSFeedDefinition[] = [
     source: "special",
     scrapePath: "/active",
   },
+  {
+    slug: "highlights",
+    title: "Highlights",
+    summary: "Hand-curated standout comments and subthreads from Hacker News.",
+    category: "Comments",
+    channelLink: "https://news.ycombinator.com/highlights",
+    source: "comments",
+    scrapePath: "/highlights",
+  },
   {
     slug: "bestcomments",
     title: "Best Comments",
     summary: "Recent highly voted comments from across Hacker News.",
     category: "Comments",
     channelLink: "https://news.ycombinator.com/bestcomments",
-    source: "bestcomments",
+    source: "comments",
     scrapePath: "/bestcomments",
   },
 ];