feat: add rss

.gitignore

@@ -39,4 +39,7 @@ sitemap.xml
 
 # cypress
 cypress/videos
-cypress/screenshots
+cypress/screenshots
+
+# rss
+rss.xml

src/components/Tooltip.tsx

@@ -8,7 +8,8 @@ type TooltipTextProps = {
   className?: string;
   spanClassName?: string;
   withUnderline?: boolean;
-} & TooltipProps;
+} & TooltipProps &
+  Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className'>;
 
 export default function Tooltip({
   content,

src/components/layout/Footer.tsx

@@ -2,13 +2,14 @@ import * as React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { FiMail } from 'react-icons/fi';
 import { SiGithub, SiLinkedin, SiTwitter } from 'react-icons/si';
-import { Tooltip } from 'react-tippy';
+import { Tooltip as TooltipTippy } from 'react-tippy';
 
 import { trackEvent } from '@/lib/analytics';
 
 import Accent from '@/components/Accent';
 import Spotify from '@/components/layout/Spotify';
 import UnstyledLink from '@/components/links/UnstyledLink';
+import Tooltip from '@/components/Tooltip';
 
 import { spotifyFlag } from '@/constants/env';
 
@@ -60,7 +61,7 @@ function SocialLinks() {
   return (
     <div className='flex mt-2 space-x-4'>
       <div className='flex justify-center items-center'>
-        <Tooltip
+        <TooltipTippy
           trigger='mouseenter'
           hideOnClick={false}
           interactive
@@ -87,19 +88,25 @@ function SocialLinks() {
               <FiMail className='w-7 h-7 text-gray-600 align-middle dark:hover:text-primary-300 dark:text-gray-300 hover:text-primary-300' />
             </button>
           </CopyToClipboard>
-        </Tooltip>
+        </TooltipTippy>
       </div>
       {socials.map((social) => (
-        <UnstyledLink
-          key={social.text}
-          className='inline-flex justify-center items-center rounded-sm focus:outline-none focus-visible:ring focus-visible:ring-primary-300'
-          href={social.href}
-          onClick={() => {
-            trackEvent(`Footer Link: ${social.text}`, 'link');
-          }}
+        <Tooltip
+          interactive={false}
+          key={social.href}
+          withUnderline
+          content={social.text}
         >
-          <social.icon className='my-auto w-6 h-6 text-gray-600 align-middle transition-colors dark:hover:text-primary-300 dark:text-gray-300 hover:text-primary-300' />
-        </UnstyledLink>
+          <UnstyledLink
+            className='inline-flex justify-center items-center rounded-sm focus:outline-none focus-visible:ring focus-visible:ring-primary-300'
+            href={social.href}
+            onClick={() => {
+              trackEvent(`Footer Link: ${social.text}`, 'link');
+            }}
+          >
+            <social.icon className='my-auto w-6 h-6 text-gray-600 align-middle transition-colors dark:hover:text-primary-300 dark:text-gray-300 hover:text-primary-300' />
+          </UnstyledLink>
+        </Tooltip>
       ))}
     </div>
   );
@@ -134,22 +141,39 @@ const footerLinks = [
     href: '/subscribe',
     text: 'Subscribe',
   },
+  {
+    href: 'https://theodorusclarence.com/rss.xml',
+    text: 'RSS',
+  },
 ];
 
 const socials = [
   {
     href: 'https://clarence.link/github',
     icon: SiGithub,
-    text: 'Github',
+    text: (
+      <>
+        See my projects on <Accent>Github</Accent>
+      </>
+    ),
   },
   {
     href: 'https://clarence.link/linkedin',
     icon: SiLinkedin,
-    text: 'Linkedin',
+    text: (
+      <>
+        Find me on <Accent>Linkedin</Accent>
+      </>
+    ),
   },
   {
     href: 'https://clarence.link/twt',
     icon: SiTwitter,
-    text: 'Twitter',
+    text: (
+      <>
+        I post updates, tips, insight, and sometimes do some talk. Follow me on{' '}
+        <Accent>Twitter</Accent>!
+      </>
+    ),
   },
 ];

src/lib/rss.ts

@@ -0,0 +1,49 @@
+import format from 'date-fns/format';
+import fs from 'fs';
+
+import { getAllFilesFrontmatter } from '@/lib/mdx';
+
+export async function getRssXml() {
+  const frontmatters = await getAllFilesFrontmatter('blog');
+
+  const blogUrl = 'https://theodorusclarence.com/blog';
+
+  const itemXml = frontmatters
+    .filter((fm) => !fm.slug.startsWith('id-'))
+    .map(({ slug, title, description, publishedAt, lastUpdated }) =>
+      `
+    <item>
+      <title>${cdata(title)}</title>
+      <description>${cdata(description)}</description>
+      <link>${blogUrl}/${slug}</link>
+      <guid>${blogUrl}/${slug}</guid>
+      <pubDate>${format(
+        new Date(lastUpdated ?? publishedAt),
+        'yyyy-MM-ii'
+      )}</pubDate>
+    </item>
+    `.trim()
+    );
+
+  return `
+    <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:blogChannel="${blogUrl}">
+      <channel>
+        <title>Theodorus Clarence Blog</title>
+        <link>${blogUrl}</link>
+        <description>The Theodorus Clarence Blog, thoughts, mental models, and tutorials about front-end development.</description>
+        <language>en</language>
+        <ttl>40</ttl>
+        ${itemXml.join('\n')}
+      </channel>
+    </rss>
+  `.trim();
+}
+
+function cdata(s: string) {
+  return `<![CDATA[${s}]]>`;
+}
+
+export async function generateRss() {
+  const xml = await getRssXml();
+  fs.writeFileSync('public/rss.xml', xml);
+}

src/pages/index.tsx

@@ -6,6 +6,7 @@ import { InView } from 'react-intersection-observer';
 
 import { trackEvent } from '@/lib/analytics';
 import { getAllFilesFrontmatter, getFeatured } from '@/lib/mdx';
+import { generateRss } from '@/lib/rss';
 import useInjectContentMeta from '@/hooks/useInjectContentMeta';
 import useLoaded from '@/hooks/useLoaded';
 
@@ -287,6 +288,8 @@ export default function IndexPage({
 }
 
 export async function getStaticProps() {
+  generateRss();
+
   const blogs = await getAllFilesFrontmatter('blog');
   const projects = await getAllFilesFrontmatter('projects');
   const library = await getAllFilesFrontmatter('library');