Add top-bun blog features

package.json

@@ -8,12 +8,14 @@
     "url": "https://github.com/gumcast/gumcast-client/issues"
   },
   "devDependencies": {
-    "top-bun": "^7.0.0",
+    "@voxpelli/tsconfig": "^10.0.0",
     "auto-changelog": "^2.3.0",
     "gh-release": "^7.0.0",
     "npm-run-all": "^4.1.5",
     "standard": "^17.0.0",
-    "tap": "^16.0.0"
+    "tap": "^16.0.0",
+    "top-bun": "^7.0.0",
+    "typescript": "~5.3.2"
   },
   "homepage": "https://github.com/gumcast/gumcast-client",
   "keywords": [],
@@ -42,9 +44,12 @@
   },
   "dependencies": {
     "@datadog/browser-rum": "^4.0.0",
+    "classnames": "^2.3.2",
     "fetch-undici": "^3.0.0",
+    "jsonfeed-to-atom": "^1.2.4",
     "local-storage-proxy": "^4.0.2",
     "mine.css": "^9.0.1",
+    "p-map": "^6.0.0",
     "uhtml-isomorphic": "^2.0.0"
   }
 }

src/blog/2021/08-09/README.md

@@ -0,0 +1,7 @@
+---
+publishDate: 2022-08-09
+layout: article
+title: 'Update on modified Gumroad Subscriptions'
+---
+
+If you change cancel or change your subscription, you need to resubscribe to any feeds based on the old subscription.

src/blog/2021/10-06/README.md

@@ -0,0 +1,9 @@
+---
+publishDate: 2022-10-06
+layout: article
+title: 'Update on Rate Limiting'
+---
+
+Due to increasing service use, rate limiting is increasingly a problem. Also, logins are apparently not working. Looking into solutions.
+
+If you encounter errors, please try again later and the issue maybe resolved.

src/blog/2021/10-07/README.md

@@ -0,0 +1,7 @@
+---
+publishDate: 2022-10-07
+layout: article
+title: 'Logins restored'
+---
+
+The ability to login restored. Rate limiting my still be in effect. Existing access tokens continue to work.

src/blog/2021/12-27/README.md

@@ -0,0 +1,13 @@
+---
+publishDate: 2021-12-27
+layout: article
+title: 'Login issues (resolved)'
+---
+
+Due to upstream API changes, logins and feeds are not currently working.
+Gumcast is assessing options to address this.
+Keep existing feeds in your Podcast apps and they will resume working when a fix is figured out.
+
+
+*UPDATE*: Gumcast acquired an IP address flagged for malware from the free IP pool on Heroku which led to API request rejection from cloudflare.
+After redeploying and acquiring a new IP address, requests began to work again. All issues appear resolved for now.

src/blog/2021/page.js

@@ -0,0 +1,19 @@
+/**
+ * @template T
+ * @typedef {import('top-bun').PageFunction<T>} PageFunction
+ */
+
+export const vars = {
+  title: '2021 Blog Posts',
+  layout: 'blog-auto-index'
+}
+
+/**
+ * @type {PageFunction<{
+ *       title: string
+ *       publishDate: string
+ * }>}
+ */
+export default async function blogIndex2023 () {
+  return ''
+}

src/blog/2022/04-08/README.md

@@ -0,0 +1,8 @@
+---
+publishDate: 2022-04-08
+layout: article
+title: 'Improved operations'
+---
+
+Gumcast remains fully operational.
+Since our December 2021 incident, Gumcast added extensive backend monitoring to more quickly detect and fix service interuptions.

src/blog/2022/11-19/README.md

@@ -0,0 +1,11 @@
+---
+publishDate: 2022-11-19
+layout: article
+title: 'New Host'
+---
+
+Gumcast has migrated hosting companies which means that podcast feed subscriptions URLs will change.
+Podcast apps should update automatically feeds from <code>gumcast-api.herokuapp.com</code> to <code>api.gumcast.com</code>, however sometimes this process fails due to bad podcast client behavior.
+
+If you experience issues with your feed no longer updating, you may need to log into gumcast and generate a new feed URL, unsubscribe from your old subscription in your podcast app and re-add the new URL.
+Apologies for the inconvenience. Old podcast feed URLs will work until November 28, 2022.

src/blog/2022/11-27/README.md

@@ -0,0 +1,11 @@
+---
+publishDate: 2022-11-27
+layout: article
+title: 'A note on token sharing'
+---
+Gumcast has identified a number of access tokens that appear to have been shared to a large number of users and will begin the process of disabling feeds that meet this criteria.
+If your podcast subscription suddenly stops working, or you see a warning message in your podcast feed, log back into Gumcast.com and grab a new RSS feed URL and re-subscribe to the new URL and unsubscribe from the disabled feed.
+You will lose playback state most likely. Please ensure that these feeds are not shared or added to globally available podcast directories.
+If you are not the subscription owner, please support your favorite creators and create your own Gumroad subscription and then create your personal
+RSS feed URL on gumcast.com.
+Questions issues or comments can be directed to `support@hifiwi.fi`.

src/blog/2022/12-08/README.md

@@ -0,0 +1,7 @@
+---
+publishDate: 2022-12-08
+layout: article
+title: 'Improved stream support'
+---
+Gumcast shipped improved stream support today. Most podcast clients don't know what to do with hls stream playlists, but some sort of support it (Like apple podcasts).
+Ideally gumroad products support media content downloads for the best experience with gumcast. For those that don't however, gumcast will at least get you to the stream URL.

src/blog/2022/page.js

@@ -0,0 +1,19 @@
+/**
+ * @template T
+ * @typedef {import('top-bun').PageFunction<T>} PageFunction
+ */
+
+export const vars = {
+  title: '2022 Blog Posts',
+  layout: 'blog-auto-index'
+}
+
+/**
+ * @type {PageFunction<{
+ *       title: string
+ *       publishDate: string
+ * }>}
+ */
+export default async function blogIndex2023 () {
+  return ''
+}

src/blog/2023/05-15/README.md

@@ -0,0 +1,8 @@
+---
+publishDate: "2023-05-15"
+layout: article
+title: 'More disabled tokens'
+---
+
+A new batch of tokens were disabled today due to high usage indicating feed sharing. This was prompted by an increased issue with global rate limiting from upstream Gumroad servers.
+If your feed stops working, please log in again and create a new feed, and as a reminder please support your creators do not share the feed URLs.

src/blog/2023/12-02/README.md

@@ -0,0 +1,21 @@
+---
+publishDate: "2023-12-02T20:47:29.184Z"
+layout: article
+title: 'Gumcast Has a Blog'
+---
+
+Gumcast updates are now published as a [blog](/blog).
+
+You can subscribe to the RSS and JSONFeeds in your favorite RSS for service and feature updates if you are interested:
+
+- [RSS](/feed.xml)
+- [JSONFeed](/feed.json)
+
+Additionally, the FAQ has been moved to its own page:
+
+- [FAQ](/FAQ/)
+
+These features were made possible by the [recent additions](https://bret.io/blog/2023/reintroducing-top-bun/) to the 🥐 [`top-bun`](https://top-bun.org) web framework. If you are interested in a fun and simple bread themed way of making website, please check it out.
+
+If you are interested in watching more content from around the web in your podcast apps, please check out 🥖 [breadcrum.net](https://breadcrum.net), a bookmarking service with media archiving and podcasting superpowers.
+Seriously, it pipes [yt-dlp](https://github.com/yt-dlp/yt-dlp) into any podcast app in your laptop/phone/tv/watch/car.

src/blog/2023/page.js

@@ -0,0 +1,19 @@
+/**
+ * @template T
+ * @typedef {import('top-bun').PageFunction<T>} PageFunction
+ */
+
+export const vars = {
+  title: '2023 Blog Posts',
+  layout: 'blog-auto-index'
+}
+
+/**
+ * @type {PageFunction<{
+ *       title: string
+ *       publishDate: string
+ * }>}
+ */
+export default async function blogIndex2023 () {
+  return ''
+}

src/blog/page.js

@@ -0,0 +1,71 @@
+import { html } from 'uhtml-isomorphic'
+import { dirname, basename } from 'node:path'
+
+/**
+ * @template T
+ * @typedef {import('top-bun').PageFunction<T>} PageFunction
+ */
+
+export const vars = {
+  title: 'Recent Blog Posts',
+  layout: 'blog-index'
+}
+
+/**
+ * @type {PageFunction<{
+ *  siteName: string,
+ *  siteDescription: string,
+ *  siteUrl: string,
+ *  authorName: string,
+ *  authorUrl: string,
+ *  authorImgUrl: string
+ *  layout: string,
+ *  publishDate: string
+ *  title: string
+ * }>}
+ */
+export default async function blogIndex2023 ({
+  pages,
+  page
+}) {
+  const blogPosts = pages
+    .filter(page => page.vars.layout === 'article')
+    // @ts-ignore
+    .sort((a, b) => new Date(b.vars.publishDate) - new Date(a.vars.publishDate))
+    .slice(0, 50)
+
+  const folderPages = pages.filter(folderPage => {
+    const dir = dirname(folderPage.pageInfo.path)
+    const path = page.path
+    return dir === path
+  })
+
+  return html`
+    <ul class="blog-index-list">
+      ${blogPosts.map(p => {
+        const publishDate = p.vars.publishDate ? new Date(p.vars.publishDate) : null
+        return html`
+          <li class="blog-entry h-entry">
+            <a class="blog-entry-link u-url u-uid p-name" href="/${p.pageInfo.path}/">${p.vars.title}</a>
+            ${
+              publishDate
+                ? html`<time class="blog-entry-date dt-published" datetime="${publishDate.toISOString()}">
+                    ${publishDate.toISOString().split('T')[0]}
+                  </time>`
+                : null
+            }
+          </li>`
+        })}
+    </ul>
+    <footer class="blog-index-footer">
+      <h4>Archive</h4>
+      <ul class="archive-list">
+        ${folderPages.map(p => {
+          return html`<li>
+            <a href="/${p.pageInfo.path}/">${basename(p.pageInfo.path)}</a>
+          </li>`
+        })}
+      <ul>
+    </footer>
+    `
+}

src/blog/style.css

@@ -0,0 +1,8 @@
+.blog-index-footer {
+  & .archive-list {
+    display: inline-flex;
+    gap: 1em;
+    list-style-type: none;
+    padding-left: 0px;
+  }
+}

src/components/blog-entries/index.css

@@ -0,0 +1,15 @@
+.blog-index-list {
+  padding-left: 0px;
+
+  & .blog-entry {
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+  }
+  & .blog-entry-link {}
+  & .blog-entry-date {
+    color: var(--accent-foreground);
+    font-family: var(--font-code);
+    flex-shrink: 0;
+  }
+}

src/components/breadcrumb/index.css

@@ -0,0 +1,23 @@
+.breadcrumb-nav {
+  margin-top: 1em;
+
+  & .list {
+    list-style-type: none; /* Removes default bullet points */
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: nowrap; /* Prevents wrapping items to next line */
+  }
+
+  & .item {}
+
+  & .item + .item::before {
+    content: "/"; /* Adds a slash before each item except the first */
+    margin: 0 8px; /* Adjusts spacing around the slash */
+    color: var(--accent-midground); /* Adjusts the color of the slash */
+  }
+
+  & .item.active {
+    font-weight: bold; /* Highlights the active/current page */
+  }
+}

src/components/breadcrumb/index.js

@@ -0,0 +1,34 @@
+import { html } from 'uhtml-isomorphic'
+import cn from 'classnames'
+
+export const breadcrumb = ({
+  pathSegments
+}) => {
+  return html`
+  <nav class="breadcrumb-nav" aria-label="breadcrumb">
+        <ol class="list">
+            <li class="item">
+              <a href="/">gumcast</a>
+            </li>
+            ${pathSegments.map((segment, i, segments) =>
+              html`
+                <li class="${cn({ item: true, active: segments.length - 1 === i })}">
+                  <a href="${generateRelativePathSegment(segment, i, segments.length)}">${segment}</a>
+                </li>`
+            )}
+        </ol>
+    </nav>
+  `
+}
+
+const relativePathSegment = '../'
+function generateRelativePathSegment (segment, index, segmentLength) {
+  const segmentCount = segmentLength - index
+  if (index === segmentLength - 1) return './'
+  const segments = []
+  for (let i = 0; i < segmentCount; i++) {
+    segments.push(relativePathSegment)
+  }
+  segments.push(segment)
+  return segments.join('')
+}