feat: add feed and apply format

pragmaticivan · Jul 10, 2024 · 9e4baff · 9e4baff
1 parent 38fbce0
commit 9e4baff
Show file tree

Hide file tree

Showing 13 changed files with 167 additions and 43 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -13,6 +13,6 @@ const AboutPage = () => (
     </header>
     <GeneralDescription />
   </>
-)
+);
 
 export default AboutPage;
diff --git a/app/api/health/route.ts b/app/api/health/route.ts
@@ -1,3 +1,3 @@
 export async function GET() {
-  return Response.json({ status: "ok" })
-}
+  return Response.json({ status: 'ok' });
+}
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -21,14 +21,16 @@ export async function generateStaticParams() {
     'slug',
     'title',
   ]);
-  const data =  articles?.map((article) => {
+  const data = articles?.map((article) => {
     return { slug: article.slug };
   });
 
   return data;
 }
 
-export default async function ArticleView({ params }: Readonly<{ params: { slug: string } }>) {
+export default async function ArticleView({
+  params,
+}: Readonly<{ params: { slug: string } }>) {
   const article = getArticleBySlug(params.slug, [
     'canonical_url',
     'content',

diff --git a/app/feed.xml/route.ts b/app/feed.xml/route.ts
@@ -0,0 +1,50 @@
+import RSS from 'rss';
+import { parse } from 'date-fns';
+import { getAllArticles } from '../../lib/article';
+
+export async function GET() {
+  const articles = getAllArticles([
+    'date',
+    'draft',
+    'slug',
+    'title',
+    'image',
+    'content',
+    'language',
+    'description',
+  ]).filter((article) => !article.draft);
+
+  const feed = new RSS({
+    title: 'Ivan Santos',
+    description: "Ivan Santos's Blog",
+    generator: 'RSS for Node and Next.js',
+    feed_url: 'https://ivansantos.me/feed.xml',
+    site_url: 'https://ivansantos.me/',
+    copyright: `Copyright ${new Date().getFullYear().toString()}, Ivan Santos`,
+    language: 'en-US',
+    pubDate: new Date().toUTCString(),
+    ttl: 60,
+  });
+
+  if (articles) {
+    for (const article of articles) {
+      feed.item({
+        title: article.title ?? '',
+        description: article.description ?? '',
+        url: `https://ivansantos.me/blog/${article.slug}/`,
+        author: 'Ivan Santos',
+        date: parse(
+          article.date ?? new Date().toDateString(),
+          'yyyy-MM-dd',
+          new Date()
+        ),
+      });
+    }
+  }
+
+  return new Response(feed.xml({ indent: true }), {
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+    },
+  });
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -16,9 +16,13 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>
-        {children}
-      </body>
+      <link
+        rel="alternate"
+        type="application/rss+xml"
+        title="RSS 2.0"
+        href="/feed.xml"
+      ></link>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -3,15 +3,17 @@ import Link from 'next/link';
 const Custom404 = () => (
   <div className="flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6">
     <div className="space-x-2 pb-8 pt-6 md:space-y-5">
-      <h1 className="text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14">
+      <h1 className="md:leading-14 text-6xl font-extrabold leading-9 tracking-tight text-gray-900 md:border-r-2 md:px-6 md:text-8xl dark:text-gray-100">
         404
       </h1>
     </div>
     <div className="max-w-md">
       <p className="mb-4 text-xl font-bold leading-normal md:text-2xl">
         Sorry we couldn't find this page.
       </p>
-      <p className="mb-8">But dont worry, you can find plenty of other things on my homepage.</p>
+      <p className="mb-8">
+        But dont worry, you can find plenty of other things on my homepage.
+      </p>
       <Link
         href="/"
         className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-cyan-700 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-cyan-600 focus:outline-none dark:hover:bg-cyan-500"

diff --git a/app/page.tsx b/app/page.tsx
@@ -8,7 +8,8 @@ import styles from '../styles/home.module.scss';
 
 export const metadata: Metadata = {
   title: `Hello, I'm Ivan 👋`,
-  description: 'Hello, I&#x27;m Ivan 👋 - I&#x27;m a software engineer, currently living in Austin, TX.',
+  description:
+    'Hello, I&#x27;m Ivan 👋 - I&#x27;m a software engineer, currently living in Austin, TX.',
   twitter: {
     card: 'summary_large_image',
   },
@@ -27,17 +28,29 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <header className={clsx('w-full', 'relative', 'border-b-4', 'border-b-gray-100', styles.header)} >
+      <header
+        className={clsx(
+          'w-full',
+          'relative',
+          'border-b-4',
+          'border-b-gray-100',
+          styles.header
+        )}
+      >
         <NavigationBar />
         <Greeting />
       </header>
-      <section className={'container max-w-screen-lg mx-auto font-bold text-2xl leading-10 text-center p-4'}>
-        Hi, my name is Ivan! A Brazilian/American software engineer specializing in
-        fault-tolerant applications and Distributed Systems. Currently
+      <section
+        className={
+          'container mx-auto max-w-screen-lg p-4 text-center text-2xl font-bold leading-10'
+        }
+      >
+        Hi, my name is Ivan! A Brazilian/American software engineer specializing
+        in fault-tolerant applications and Distributed Systems. Currently
         adventuring with Node.js, Go, Typescript, Terraform, Kubernetes, and
         AWS.
       </section>
       <CallToContact />
     </>
   );
-}
+}
diff --git a/components/Greeting/index.tsx b/components/Greeting/index.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 
 const Greeting = () => (
   <div className="flex justify-center pt-28">
-    <div className="text-cyan-700 text-7xl border-4 border-cyan-700 rounded-xl py-6 px-14">HOWDY!</div>
+    <div className="rounded-xl border-4 border-cyan-700 px-14 py-6 text-7xl text-cyan-700">
+      HOWDY!
+    </div>
   </div>
 );
 

diff --git a/components/NavigationBar/index.tsx b/components/NavigationBar/index.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 const NavigationBar = (props: Props = { dark: false }) => {
   return (
-    <div className="flex sm:justify-between justify-center px-10 pt-10 flex-wrap">
+    <div className="flex flex-wrap justify-center px-10 pt-10 sm:justify-between">
       <h1>
         <Link href="/" passHref={true}>
           <Image

diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts
@@ -14,5 +14,7 @@ test('get started link', async ({ page }) => {
   await page.getByRole('link', { name: 'Get started' }).click();
 
   // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+  await expect(
+    page.getByRole('heading', { name: 'Installation' })
+  ).toBeVisible();
 });
diff --git a/lib/article.ts b/lib/article.ts
@@ -1,15 +1,14 @@
 import fs from 'fs';
 import { join } from 'path';
 import matter from 'gray-matter';
-import {unified} from 'unified';
-import rehypeDocument from 'rehype-document'
-import rehypeFormat from 'rehype-format'
-import rehypeStringify from 'rehype-stringify'
-import remarkParse from 'remark-parse'
-import remarkRehype from 'remark-rehype'
+import { unified } from 'unified';
+import rehypeDocument from 'rehype-document';
+import rehypeFormat from 'rehype-format';
+import rehypeStringify from 'rehype-stringify';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
 import rehypeHighlight from 'rehype-highlight';
 
-
 import { remark } from 'remark';
 import html from 'remark-html';
 // import prism from 'remark-prism';
@@ -49,31 +48,26 @@ export function getArticleBySlug(slug: string, fields: string[] = []) {
 }
 
 export function getAllArticles(fields: string[] = []): Partial<Article>[] {
-  const data = (
-    getArticleFiles()
-      .map((slug) => getArticleBySlug(slug, fields))
-      // @ts-ignore
-      .sort((post1, post2) => (post1.date > post2.date ? '-1' : '1'))
-  );
+  const data = getArticleFiles()
+    .map((slug) => getArticleBySlug(slug, fields))
+    // @ts-ignore
+    .sort((post1, post2) => (post1.date > post2.date ? '-1' : '1'));
   return data;
 }
 
 export async function convertMarkdownToHtml(markdown: string) {
-
-
   const file = await unified()
-  .use(remarkParse)
-  .use(remarkRehype)
-  .use(rehypeDocument)
-  .use(rehypeFormat)
-  .use(rehypeStringify)
-  .use(rehypeHighlight)
-  .process(markdown)
-
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeDocument)
+    .use(rehypeFormat)
+    .use(rehypeStringify)
+    .use(rehypeHighlight)
+    .process(markdown);
 
   // const result = await remark()
   //   .use(html, { sanitize: false })
   //   // .use(prism)
   //   .process(markdown);
-  return String(file)
+  return String(file);
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "remark-html": "^16.0.1",
     "remark-prism": "^1.3.6",
     "remixicon": "^4.3.0",
+    "rss": "^1.2.2",
     "sass": "^1.77.7",
     "tailwind-merge": "^2.4.0",
     "trim": ">=1.0.1"
@@ -33,8 +34,10 @@
     "@types/node": "20.14.10",
     "@types/react": "18.3.3",
     "@types/remark-prism": "^1.3.7",
+    "@types/rss": "^0.0.32",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",