feat: blog post

README.md

@@ -8,11 +8,12 @@
 - [x] Early access page.
 - [x] Terms and conditions page.
 - [x] Privacy policy page.
-- [ ] Blog page.
-- [ ] Write a blog post about Noodle's resurrection.
-- [ ] Responsiveness.
+- [x] Blog page.
+- [x] Write a blog post about Noodle's resurrection.
+- [x] Responsiveness.
 - [ ] README.md.
 - [ ] CONTRIBUTING.md.
 - [ ] Posthog.
 - [ ] Sentry.
 - [ ] Update GitHub repo about & tags.
+- [ ] Update privacy, terms and blog post dates.

cspell.config.yaml

@@ -44,6 +44,7 @@ words:
   - superjson
   - tailwindcss
   - tanstack
+  - Todos
   - trpc
   - tsbuildinfo
   - tseslint

src/app/(site)/_components/custom-mdx.tsx

@@ -35,6 +35,10 @@ export const MDXComponents = {
     2,
     'text-xl md:text-2xl mb-3 md:mb-4 mt-3 md:mt-4 inline-block',
   ),
+  h3: createHeading(
+    3,
+    'text-lg md:text-xl mb-2 md:mb-3 mt-2 md:mt-3 inline-block font-normal',
+  ),
   ul: ({ children, className, ...props }) => (
     <ul
       {...props}
@@ -81,7 +85,7 @@ export const MDXComponents = {
       {...props}
       className={cn(
         className,
-        'mb-3 text-sm leading-relaxed text-foreground-muted md:mb-4 md:text-base',
+        'mb-3 text-sm !leading-6 text-foreground-muted md:mb-4 md:text-base md:!leading-7',
       )}
     >
       {children}

src/app/(site)/blog/[slug]/page.tsx

@@ -1,6 +1,9 @@
 import { getBlogPosts } from '@/lib/mdx';
 import { notFound } from 'next/navigation';
 import { CustomMDX, MDXComponents } from '../../_components/custom-mdx';
+import type { Metadata } from 'next';
+import { constructMetadata, getBaseUrl } from '@/lib/utils';
+import { constants } from '@/constants';
 
 export const dynamic = 'force-static';
 
@@ -10,6 +13,33 @@ interface Props {
   };
 }
 
+export async function generateMetadata({
+  params,
+}: Props): Promise<Metadata | undefined> {
+  const posts = await getBlogPosts();
+  const post = posts.find((p) => p.slug === params.slug);
+
+  if (!post) {
+    return;
+  }
+
+  const {
+    title,
+    publishedAt: publishedTime,
+    summary: description,
+    image,
+  } = post.metadata;
+
+  return constructMetadata({
+    title: `${title} - ${constants.shortName}`,
+    description,
+    image: image ? `${getBaseUrl()}/${image}` : `${getBaseUrl()}/thumbnail.jpg`,
+    publishedTime,
+    type: 'article',
+    url: `${getBaseUrl()}/blog/${params.slug}`,
+  });
+}
+
 export default async function Home({ params }: Props) {
   const posts = await getBlogPosts();
   const post = posts.find((p) => p.slug === params.slug);
@@ -19,9 +49,14 @@ export default async function Home({ params }: Props) {
   }
 
   return (
-    <main className="mx-auto max-w-prose py-12">
+    <main className="mx-auto max-w-prose py-8 md:py-12">
       <MDXComponents.h1>{post.metadata.title}</MDXComponents.h1>
-      <p>{post.metadata.summary}</p>
+      <MDXComponents.p className="my-4 text-foreground-muted">
+        {post.metadata.publishedAt}
+      </MDXComponents.p>
+      <MDXComponents.p className="my-4 text-foreground-muted">
+        {post.metadata.summary}
+      </MDXComponents.p>
       <CustomMDX source={post.content} />
     </main>
   );

src/content/blog/noodle-resurgence.md

@@ -5,8 +5,50 @@ summary: After a brief period of absence, Noodle is back again in the works. Lea
 image: /_static/blog/noodle-resurrection.jpg
 ---
 
-This is a blog post content.
+## The Noodle Story
 
-```ts
-console.log('Hello World');
-```
+Noodle is a project that has been in the works for a long time now. It has gone through many ups and downs, but it has always been a project that I have been passionate about. I have always believed in the idea behind Noodle and I have always wanted to see it come to life.
+
+### Early Beginnings
+
+Noodle as a concept was born during my university years. I had noticed myself using multiple apps just to try and stay on track with my studies. I was using [Fantastical](https://flexibits.com/fantastical) for my calendar, [Things 3](https://culturedcode.com/things/) for my todos, [Notion](https://notion.so) for note taking, sometimes as well handwritten on my iPad using [Notability](https://notability.com/), and many others like a grade calculator to know where I'm standing with my grades.
+
+It was all just a bit much, there is no way I needed all of that to manage my studies, and why is there no singular app that can do everything a student needs to stay on track with their studies? Like a GitHub but for students.
+
+### The First Attempt
+
+Straight out of graduation, I knew I wanted to work on Noodle and try to make it happen. I teamed up with a friend of mine, [Sinclair](https://x.com/F1VEBORDIER) and we started working on it. I would handle the development of the app and he would handle the business side of things.
+
+The initial launch of the idea of Noodle on GitHub gained massive amounts of traction. We had over 10,000 GitHub stars in no time, without ever being on Product Hunt, Hacker News, or any other platform. It was pure insanity, just from a few tweets.
+
+### The First Failure
+
+With this amount of traction, we had all the eyes on us. The pressure was on, we had to deliver. Unfortunately, working a full time job and trying to build a startup on the side is not an easy task, added with the hype and pressure, it was a recipe for disaster.
+
+Eventually, I had to make a tough decision to put Noodle on hold, I was burning out quickly and I didn't want to ruin the project by releasing something that wasn't up to the standards that I had set for myself.
+
+## The Resurrection
+
+After a brief period of absence, lasting for 6 months, I am happy to announce that Noodle is back in the works. I have taken the time to reflect on what went wrong the first time around and I have learned so much from that experience.
+
+### The Plan Going Forward
+
+First of all, I would like to thank Sinclair for his work towards Noodle. He has decided to step down from the project and I will be the only person working on Noodle for the time being.
+
+I have decided to take a different approach this time around, instead of obsessing over every detail and trying to make everything perfect, I will focus on getting a minimum viable product out there as quickly as possible, one that delivers an improvement to the student productivity life, but not one that has everything just yet.
+
+The plan is to deliver an MVP with Note taking and Flashcards. Note taking is the core principle that revolves around every other feature in Noodle, and that will be the first thing I will be working on.
+
+### The Future of Noodle
+
+I am excited to see where this new journey with Noodle will take me. I have learned so much from the first attempt and I am confident that I will be able to deliver something that I can be proud of this time around.
+
+I will be documenting the progress of Noodle on this blog, so make sure to check back regularly for updates on the project. I am excited to have you all along for the ride and I can't wait to see where this new journey with Noodle will take me.
+
+### Thank You ❤️
+
+I would like to take this opportunity to thank everyone who has supported me and Noodle throughout this journey. Your support means the world to me and I am so grateful for all of the encouragement and kind words that I have received, it has truly been the driving force behind my decision to bring Noodle back to life.
+
+Thank you to everyone on the early access list, which we have over 4000 people signed up for currently, I can't wait to show you what I have been working on very soon!
+
+Make sure you join our [Discord server](https://discord.gg/ewKmQd8kYm) if you want to get the latest updates on Noodle and be part of the community.

src/lib/utils.ts

@@ -45,6 +45,9 @@ export function getBaseUrl() {
  * @param params.image The image of the page.
  * @param params.icons The icons of the page.
  * @param params.noIndex Whether to no-index the page.
+ * @param params.url The URL of the page.
+ * @param params.type The type of the page, either 'website' or 'article'.
+ * @param params.publishedTime The published time of the article.
  * @returns The metadata for the page.
  */
 export function constructMetadata({
@@ -71,19 +74,28 @@ export function constructMetadata({
     },
   ],
   noIndex = false,
+  url = getBaseUrl(),
+  type = 'website',
+  publishedTime,
 }: {
   title?: string;
   description?: string;
   image?: string | null;
   icons?: Metadata['icons'];
   noIndex?: boolean;
+  url?: string;
+  type?: 'website' | 'article';
+  publishedTime?: string;
 } = {}): Metadata {
   return {
     title,
     description,
     openGraph: {
       title,
       description,
+      url,
+      type,
+      publishedTime,
       ...(image && {
         images: [
           {