docs: changeset

.changeset/new-timers-complain.md

@@ -0,0 +1,24 @@
+---
+"blog": patch
+---
+
+chore: upgrade to react 19
+
+## Summary by CodeRabbit
+
+- **New Features**
+
+  - Updated VSCode extensions documentation with new entries and enhanced descriptions.
+  - Introduced a linting script for Next.js in the project.
+
+- **Bug Fixes**
+
+  - Removed unnecessary file extensions from import statements across various components.
+
+- **Documentation**
+
+  - Updated the "Todo" section and runtime software versions in the README file.
+
+- **Chores**
+  - Upgraded core dependencies including `next`, `react`, and `react-dom` to their latest versions.
+  - Updated TypeScript and ESLint configurations to improve code quality and maintainability.

src/LearnContent/LearnContent.tsx

@@ -4,7 +4,7 @@ import { Typography } from "hazel-ui/Typography";
 
 import type { LearnPost } from "../lib/learn";
 import { Layout } from "../wrappers/Layout";
-import { Date } from "../ui/Atoms/Date";
+import { DateDisplay } from "../ui/Atoms/DateDisplay";
 
 import type { JSX } from "react";
 
@@ -31,7 +31,7 @@ export function LearnContent({ frontMatter, mdxSource }: LearnPost): JSX.Element
         </article>
 
         <Typography variant="label" sx={{ marginTop: "3rem" }}>
-          Last Updated - <Date dateString={frontMatter.date} />
+          Last Updated - <DateDisplay dateString={frontMatter.date} />
         </Typography>
       </Layout>
     </>

src/PostContent/PostContent.tsx

@@ -3,7 +3,7 @@ import { MDXRemote } from "next-mdx-remote";
 import Head from "next/head";
 
 import type { Post } from "../lib/posts";
-import { Date } from "../ui/Atoms/Date";
+import { DateDisplay } from "../ui/Atoms/DateDisplay";
 import { Layout } from "../wrappers/Layout";
 import { config } from "../config";
 
@@ -49,7 +49,7 @@ export function PostContent({ frontMatter, mdxSource }: Post) {
         </article>
 
         <Typography variant="label" sx={{ marginTop: "3rem" }}>
-          Last Updated - <Date dateString={frontMatter.date} />
+          Last Updated - <DateDisplay dateString={frontMatter.date} />
         </Typography>
       </Layout>
     </>

src/Posts/components/PostListItem.tsx

@@ -2,7 +2,7 @@ import { Color } from "hazel-ui/Color";
 import { Typography } from "hazel-ui/Typography";
 import Link from "next/link";
 
-import { Date } from "../../ui";
+import { DateDisplay } from "../../ui";
 
 import type { Post } from "../../lib";
 
@@ -14,10 +14,7 @@ export function PostListItem({ postData }: PostListItemProps) {
   const { id, frontMatter } = postData;
   return (
     <article className="mt-8 rounded-2xl border border-slate-6 bg-slate-1 transition-transform hover:scale-[1.01] hover:bg-blue-1">
-      <Link
-        href={`/posts/${id}`}
-        className="inline-block w-full p-7 hover:no-underline"
-      >
+      <Link href={`/posts/${id}`} className="inline-block w-full p-7 hover:no-underline">
         <Typography color={Color.green11} variant="title">
           {frontMatter.title}
         </Typography>
@@ -27,7 +24,7 @@ export function PostListItem({ postData }: PostListItemProps) {
         as a <time> element which has different props. Ideally the classNames
         for Typography should be provided separately. */}
         <Typography sx={{ marginTop: "0.375rem" }}>
-          <Date dateString={frontMatter.date} />
+          <DateDisplay dateString={frontMatter.date} />
         </Typography>
       </Link>
     </article>

src/ui/Atoms/Date.tsx → src/ui/Atoms/DateDisplay.tsx

@@ -4,7 +4,7 @@ interface DateProps {
   dateString: string;
 }
 
-export function Date({ dateString }: DateProps) {
+export function DateDisplay({ dateString }: DateProps) {
   const date = parseISO(dateString);
   return (
     <time className="text-slate-11" dateTime={dateString}>

src/ui/index.ts

@@ -1,3 +1,3 @@
-export { Date } from "./Atoms/Date";
+export { DateDisplay } from "./Atoms/DateDisplay";
 
 export { Navbar } from "./Molecules/Navbar";