feat(blog): add visible RSS feed

components/Blog/BlogHeader/__tests__/index.test.mjs

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+
+import BlogHeader from '@/components/Blog/BlogHeader';
+
+describe('BlogHeader', () => {
+  it('should have correct href when category is all', () => {
+    render(<BlogHeader category="all" />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/feed/blog.xml');
+  });
+
+  it('should have correct href when category is release', () => {
+    render(<BlogHeader category="release" />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/feed/releases.xml');
+  });
+
+  it('should have correct href when category is vulnerability', () => {
+    render(<BlogHeader category="vulnerability" />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/feed/vulnerability.xml');
+  });
+
+  it('should have correct href when category is random', () => {
+    render(<BlogHeader category="random" />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/feed/blog.xml');
+  });
+});

components/Blog/BlogHeader/index.module.css

@@ -0,0 +1,34 @@
+.blogHeader {
+  h1 {
+    @apply inline-flex
+      w-full
+      items-center
+      justify-between;
+
+    a {
+      @apply inline-flex
+        size-9
+        items-center
+        justify-center
+        rounded-md
+        p-2;
+
+      &:hover {
+        @apply bg-neutral-100
+          dark:bg-neutral-900;
+      }
+    }
+
+    svg {
+      @apply size-6
+        text-neutral-500;
+    }
+  }
+
+  p {
+    @apply text-lg
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
+  }
+}

components/Blog/BlogHeader/index.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import BlogHeader from '@/components/Blog/BlogHeader';
+
+type Story = StoryObj<typeof BlogHeader>;
+type Meta = MetaObj<typeof BlogHeader>;
+
+export const Default: Story = {
+  args: {
+    // See `@/site.json` for the `rssFeeds` object
+    category: 'all',
+  },
+  decorators: [
+    // We need to wrap to allow global styles to be applied (markdown styles)
+    Story => (
+      <main>
+        <Story />
+      </main>
+    ),
+  ],
+};
+
+export default { component: BlogHeader } as Meta;

components/Blog/BlogHeader/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { RssIcon } from '@heroicons/react/24/solid';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import Link from '@/components/Link';
+import { siteConfig } from '@/next.json.mjs';
+
+import styles from './index.module.css';
+
+type BlogHeaderProps = {
+  category: string;
+};
+
+const BlogHeader: FC<BlogHeaderProps> = ({ category }) => {
+  const t = useTranslations();
+  const currentFile =
+    siteConfig.rssFeeds.find(item => item.category === category)?.file ??
+    'blog.xml';
+
+  return (
+    <header className={styles.blogHeader}>
+      <h1>
+        {t('layouts.blog.title')}
+        <Link href={`/feed/${currentFile}`}>
+          <RssIcon />
+        </Link>
+      </h1>
+      <p>{t('layouts.blog.subtitle')}</p>
+    </header>
+  );
+};
+
+export default BlogHeader;

layouts/New/Blog.tsx

@@ -2,6 +2,7 @@ import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
 import { getClientContext } from '@/client-context';
+import BlogHeader from '@/components/Blog/BlogHeader';
 import WithBlogCategories from '@/components/withBlogCategories';
 import WithFooter from '@/components/withFooter';
 import WithNavBar from '@/components/withNavBar';
@@ -41,9 +42,7 @@ const BlogLayout: FC = async () => {
 
       <div className={styles.blogLayout}>
         <main>
-          <h1>{t('layouts.blog.title')}</h1>
-
-          <p>{t('layouts.blog.subtitle')}</p>
+          <BlogHeader category={blogData.category} />
 
           <WithBlogCategories
             blogData={blogData}

layouts/New/layouts.module.css

@@ -154,13 +154,6 @@
       py-12
       md:px-14
       lg:px-28;
-
-    p {
-      @apply text-lg
-        font-medium
-        text-neutral-800
-        dark:text-neutral-200;
-    }
   }
 }
 

types/features.ts

@@ -1,7 +1,7 @@
 export interface RSSFeed {
   file: string;
   title: string;
-  blogCategory: string;
+  category: string;
   description?: string;
 }