Donate and Discord Blogpost

packages/web/client/blog/2024/donations-discord/README.draft.md

@@ -0,0 +1,39 @@
+---
+layout: article
+title: "💸 Donations & Discord"
+serif: false
+publishDate: "2024-12-14T22:39:53.124Z"
+authorName: "Bret Comnes"
+authorUrl: "https://bret.io"
+authorImgUrl: "/static/bret-ava.png"
+description: "Breadcrum added a Discord server and is accepting Donations"
+image: "./img/discord.png"
+---
+
+Breadcrum now has two new community resources: Discord and Donations.
+These new resources offer a modern and convenient way to connect and discuss ideas and issues related to the project.
+
+## Discord
+
+With some regret, Breadcrum now offers a Discord server. As a longtime fan of community-owned communication and organizing infrastructure, Breadcrum initially had an [IRC](https://en.wikipedia.org/wiki/IRC) room. However, after years of mostly inactivity, Breadcrum has transitioned to Discord.
+
+- 💬 [Join the Breadcrum Discord]({{ vars.discordUrl }})
+
+<figure class="borderless">
+  <img src="./img/discord.png" alt="Discord server">
+  <figcaption>Join the Discord to chat about 🥖 Breadcrum!</figcaption>
+</figure>
+
+If you rely on the service and are interested in discussing ideas, design, or other development topics, feel free to join the Discord.
+At the time of writing, it’s literally just me in the server, so please adjust your expectations as the room grows.
+
+## Donations
+
+Breadcrum will eventually offer paid subscriptions with additional features and services.
+These paid accounts will ensure the long-term economic viability of the service. However, as paid accounts are not yet available, some users have expressed a desire to financially support the project in the meantime.
+
+We now have a donations page:
+
+- 💸 [Donate to Breadcrum](/docs/donate)
+
+You’ll find details on ways to support the project on that page!

packages/web/client/components/footer/index.js

@@ -2,10 +2,16 @@ import { Component, html } from 'uland-isomorphic'
 
 /**
  * Footer component. STATIC. NOT CURRENTLTY CLIENT RENDERED
+ * @type {{
+  *   version: string,
+  *   mastodonUrl: string,
+  *   discordUrl: string
+ }}
  */
 export const footer = Component(({
   version,
   mastodonUrl,
+  discordUrl
 }) => {
   return html`
   <footer class="bc-footer">
@@ -34,9 +40,18 @@ export const footer = Component(({
         v${version}
       </a>
     </div>
-    <a class="flex-center preserve-icon" href="/feed.xml"><img height="16" width="16" src="/static/atom.svg"></a>
-    <a class="flex-center preserve-icon" href="/feed.json"><img class="rounded-icon" height="16" width="16" src="/static/jsonfeed.svg"></a>
-    <a class="flex-center preserve-icon" href="${mastodonUrl}" rel="me"><img height="16" width="16" src="/static/mastodon.svg"></a>
+    <a class="flex-center preserve-icon" href="${discordUrl}" aria-label="Join us on Discord" title="Join us on Discord">
+      <img height="16" width="16" src="/static/discord.svg" alt="Discord icon">
+    </a>
+    <a class="flex-center preserve-icon" href="/feed.xml" aria-label="Subscribe to the RSS feed" title="Subscribe to the RSS feed">
+      <img height="16" width="16" src="/static/atom.svg" alt="Atom feed icon">
+    </a>
+    <a class="flex-center preserve-icon" href="/feed.json" aria-label="Subscribe to the JSON feed" title="Subscribe to the JSON feed">
+      <img class="rounded-icon" height="16" width="16" src="/static/jsonfeed.svg" alt="JSON feed icon">
+    </a>
+    <a class="flex-center preserve-icon" href="${mastodonUrl}" rel="me" aria-label="Follow us on Mastodon" title="Follow us on Mastodon">
+      <img height="16" width="16" src="/static/mastodon.svg" alt="Mastodon icon">
+    </a>
   </footer>
   `
 })

packages/web/client/docs/README.md

@@ -13,6 +13,7 @@ Learn about more about Breadcrum:
 - 🙊 [Social Media](./social/)
 - 🚦 [Status](https://status.breadcrum.net/)
 - ⌨️ [API](/openapi)
+- 💸 [Donate](./donate)
 
 ## All Pages
 

packages/web/client/docs/donate/README.md

@@ -0,0 +1,12 @@
+---
+title: '💸 Donate to Breadcrum'
+---
+
+# 💸 Donate to Breadcrum
+
+If you'd like to support Breadcrum's ongoing development, either before or in addition to a paid subscription (coming soon), you can donate using the following payment providers:
+
+- [GitHub Sponsors](https://github.com/sponsors/bcomnes?frequency=one-time&sponsor=bcomnes)
+- [PayPal](https://paypal.me/bretcomnes)
+
+If your preferred payment method isn't listed above, please email us at [[email protected]](mailto:[email protected]) and let me know what you need.

packages/web/client/docs/social/README.md

@@ -8,11 +8,9 @@ Connect with Breadcum on social media, feeds, irc and email:
 
 - 📧 Email: [[email protected]](mailto:[email protected])
 - 📡 Feeds: [RSS](/feed.xml), [JSONFeed](/feed.json)
+- ![Discord Logo](/static/discord.svg){width=18 height=18} Discord: [HifiWi.fi]({{ vars.discordUrl }})
 - 💬 Libera IRC: [#breadcrum](ircs://irc.libera.chat/breadcrum)
 - 🐈 GitHub: [@hifiwi-fi](https://github.com/hifiwi-fi/breadcrum.net)
-- 🐘 Mastodon: [@breadcrum](https://fosstodon.org/@breadcrum)
+- 🐘 Mastodon: [@breadcrum]({{ vars.mastodonUrl }})
 - 🌦️ BlueSky: [@breadcrum.net](https://bsky.app/profile/breadcrum.net)
 - 🐦 Twitter: [@breadcrum_](https://twitter.com/breadcrum_)
-
-
-

packages/web/client/globals/global.vars.js

@@ -27,6 +27,7 @@ export default async () => {
     // image: '/static/preview.png',
     siteTwitter: '@breadcrum_',
     mastodonUrl: 'https://fosstodon.org/@breadcrum',
+    discordUrl: 'https://discord.gg/pYJdTvNdZN',
     version,
     authorName: 'Breadcrum',
     authorUrl: baseUrl,

packages/web/client/layouts/root.layout.js

@@ -1,3 +1,5 @@
+/** @import { LayoutFunction } from 'top-bun' */
+
 import { html, render } from 'uland-isomorphic'
 import { header } from '../components/header/index.js'
 import { footer } from '../components/footer/index.js'
@@ -9,11 +11,6 @@ If you need to render components inside, you need attatch them in the global cli
 
 */
 
-/**
- * @template T
- * @typedef {import('top-bun').LayoutFunction<T>} LayoutFunction
- */
-
 /**
  * @typedef {{
  *  title: string,
@@ -31,6 +28,7 @@ export default function defaultRootLayout ({
     siteName,
     baseUrl,
     mastodonUrl,
+    discordUrl,
     version,
     noindex,
     siteDescription,
@@ -113,7 +111,7 @@ export default function defaultRootLayout ({
         <main class="bc-main">
           ${typeof children === 'string' ? html([children]) : children /* Support both uhtml and string children. Optional. */}
         </main>
-        ${footer({ version, mastodonUrl })}
+        ${footer({ version, mastodonUrl, discordUrl })}
       </div>
     </body>
     </html>