📶 feed (#408)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bradgarropy.com",
-    "version": "7.3.2",
+    "version": "7.4.0",
     "description": "🏠 my home on the web",
     "type": "module",
     "keywords": [
@@ -58,6 +58,7 @@
         "@remix-run/react": "^2.2.0",
         "classnames": "^2.3.1",
         "date-fns": "^2.27.0",
+        "feed": "^4.2.2",
         "fuse.js": "^7.0.0",
         "gray-matter": "^4.0.3",
         "isbot": "latest",

src/components/Footer/Footer.test.tsx

@@ -3,7 +3,15 @@ import {expect, test} from "vitest"
 
 import Footer from "~/components/Footer"
 
-const labels = ["twitch", "github", "youtube", "x", "instagram", "discord"]
+const labels = [
+    "discord",
+    "feed",
+    "github",
+    "instagram",
+    "twitch",
+    "x",
+    "youtube",
+]
 
 test("shows social links", () => {
     render(<Footer />)

src/components/Footer/Footer.tsx

@@ -11,6 +11,7 @@ const Footer: FC = () => {
             <SocialLink platform="x" />
             <SocialLink platform="instagram" />
             <SocialLink platform="discord" />
+            <SocialLink platform="feed" />
         </footer>
     )
 }

src/components/Icon/Icon.test.tsx

@@ -2,9 +2,31 @@ import {render, screen} from "@testing-library/react"
 import {expect, test} from "vitest"
 
 import Icon from "~/components/Icon"
-import {technologies} from "~/utils/tech"
 
-const icons = [...technologies, "sun", "moon"]
+const icons = [
+    "close",
+    "discord",
+    "feed",
+    "gatsby",
+    "github",
+    "instagram",
+    "javascript",
+    "link",
+    "menu",
+    "moon",
+    "next",
+    "node",
+    "react",
+    "remix",
+    "sun",
+    "svelte",
+    "twitch",
+    "twitter",
+    "typescript",
+    "tailwind",
+    "x",
+    "youtube",
+]
 
 test("shows icons", () => {
     icons.forEach(icon => {

src/components/Icon/Icon.tsx

@@ -3,6 +3,7 @@ import type {FC, HTMLAttributes} from "react"
 import {
     CloseIcon,
     DiscordIcon,
+    FeedIcon,
     GatsbyIcon,
     GithubIcon,
     InstagramIcon,
@@ -34,6 +35,8 @@ const Icon: FC<IconProps> = ({name, ...props}) => {
             return <CloseIcon {...props} />
         case "discord":
             return <DiscordIcon {...props} />
+        case "feed":
+            return <FeedIcon {...props} />
         case "gatsby":
             return <GatsbyIcon {...props} />
         case "github":

src/components/Icons/FeedIcon.tsx

@@ -0,0 +1,21 @@
+import type {FC} from "react"
+
+const FeedIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="feed"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            {...props}
+        >
+            <path
+                fillRule="evenodd"
+                d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"
+                clipRule="evenodd"
+            />
+        </svg>
+    )
+}
+
+export default FeedIcon

src/components/Icons/index.ts

@@ -1,5 +1,6 @@
 export {default as CloseIcon} from "~/components/Icons/CloseIcon"
 export {default as DiscordIcon} from "~/components/Icons/DiscordIcon"
+export {default as FeedIcon} from "~/components/Icons/FeedIcon"
 export {default as GatsbyIcon} from "~/components/Icons/GatsbyIcon"
 export {default as GithubIcon} from "~/components/Icons/GithubIcon"
 export {default as InstagramIcon} from "~/components/Icons/InstagramIcon"

src/components/SocialLink/SocialLink.test.tsx

@@ -13,6 +13,11 @@ test("github", () => {
     expect(screen.getByLabelText("github")).toBeInTheDocument()
 })
 
+test("feed", () => {
+    render(<SocialLink platform="feed" />)
+    expect(screen.getByLabelText("feed")).toBeInTheDocument()
+})
+
 test("instagram", () => {
     render(<SocialLink platform="instagram" />)
     expect(screen.getByLabelText("instagram")).toBeInTheDocument()

src/components/SocialLink/SocialLink.tsx

@@ -8,6 +8,7 @@ type SocialLinkProps = {
         | "discord"
         | "github"
         | "instagram"
+        | "feed"
         | "twitch"
         | "twitter"
         | "x"
@@ -19,40 +20,45 @@ const SocialLink: FC<SocialLinkProps> = ({platform}) => {
     let name
 
     switch (platform) {
-        case "instagram":
-            url = "https://instagram.com/bradgarropy"
-            name = "instagram"
+        case "discord":
+            url = "https://bradgarropy.com/discord"
+            name = "discord"
             break
 
         case "github":
             url = "https://github.com/bradgarropy"
             name = "github"
             break
 
-        case "twitter":
-            url = "https://twitter.com/bradgarropy"
-            name = "twitter"
+        case "instagram":
+            url = "https://instagram.com/bradgarropy"
+            name = "instagram"
             break
 
-        case "youtube":
-            url = "https://youtube.com/bradgarropy"
-            name = "youtube"
+        case "feed":
+            url = "https://bradgarropy.com/feed.json"
+            name = "feed"
             break
 
         case "twitch":
             url = "https://twitch.tv/bradgarropy"
             name = "twitch"
             break
 
-        case "discord":
-            url = "https://bradgarropy.com/discord"
-            name = "discord"
+        case "twitter":
+            url = "https://twitter.com/bradgarropy"
+            name = "twitter"
             break
 
         case "x":
             url = "https://x.com/bradgarropy"
             name = "x"
             break
+
+        case "youtube":
+            url = "https://youtube.com/bradgarropy"
+            name = "youtube"
+            break
     }
 
     return (

src/root.tsx

@@ -44,6 +44,18 @@ export const links: LinksFunction = () => {
             rel: "icon",
             href: createImageUrl("/site/favicon.ico"),
         },
+        {
+            rel: "alternate",
+            type: "application/xml",
+            href: "/feed.xml",
+            title: "rss feed",
+        },
+        {
+            rel: "alternate",
+            type: "application/json",
+            href: "/feed.json",
+            title: "json feed",
+        },
     ]
 
     return links

src/routes/[feed.json].ts

@@ -0,0 +1,11 @@
+import {generateFeed} from "~/utils/feed"
+
+export const loader = () => {
+    const feed = generateFeed("json")
+
+    return new Response(feed, {
+        headers: {
+            "content-type": "application/json",
+        },
+    })
+}

src/routes/[feed.xml].ts

@@ -0,0 +1,11 @@
+import {generateFeed} from "~/utils/feed"
+
+export const loader = () => {
+    const feed = generateFeed("xml")
+
+    return new Response(feed, {
+        headers: {
+            "content-type": "application/xml",
+        },
+    })
+}