Convert blog to TypeScript with minimal types (#864)

* Convert blog to TypeScript with minimal types

- Rename all .js files in app/ to .ts/.tsx
- Add minimal type annotations using 'any' where needed
- Add Post interface for basic type safety
- Fix date arithmetic and CSS custom property types
- Cast complex plugin configurations to avoid type conflicts
- Build passes successfully with no type errors

Focuses on catching obvious bugs and improving autocomplete
without heavy type definitions as requested.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[e-mail]>

* Improve TypeScript types by removing unnecessary any types

- Replace any with proper React component prop types
- Add proper MouseEvent typing for Link component
- Export and use Post interface throughout the app
- Use proper Promise<{slug: string}> for Next.js params
- Add LinkProps interface with proper typing
- Keep any only where genuinely needed (complex configs)

Better type safety while maintaining simplicity.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[e-mail]>

* Clean up Link component types

- Remove separate LinkProps interface, define inline instead
- Remove [key: string]: any index signature
- Use React.ComponentProps<typeof NextLink> for proper rest props typing
- Cleaner, more explicit typing without escape hatches

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[e-mail]>

---------

Co-authored-by: Claude <[e-mail]>

app/HomeLink.js app/HomeLink.tsx

···
           WebkitBackgroundClip: "text",
           color: "transparent",
           transition: "--myColor1 0.2s ease-out, --myColor2 0.2s ease-in-out",
-        }}
+        } as any}
       >
         overreacted
       </span>

app/Link.js app/Link.tsx

···
 import { useTransition } from "react";
 import NextLink from "next/link";
 import { useRouter } from "next/navigation";
+import { MouseEvent } from "react";
 
-function isModifiedEvent(event) {
+function isModifiedEvent(event: MouseEvent<HTMLAnchorElement>) {
   const eventTarget = event.currentTarget;
   const target = eventTarget.getAttribute("target");
   return (
···
   href,
   target,
   ...rest
-}) {
+}: {
+  className?: string;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+  href: string;
+  target?: string;
+} & React.ComponentProps<typeof NextLink>) {
   const router = useRouter();
   const [isNavigating, trackNavigation] = useTransition();
   if (!target && !href.startsWith("/") && !href.startsWith("#")) {

app/[slug]/layout.js app/[slug]/layout.tsx

···
 import HomeLink from "../HomeLink";
 
-export default function Layout({ children }) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       {children}

app/[slug]/mdx.js app/[slug]/mdx.ts

···
 import { Parser } from "acorn";
 import { visit } from "unist-util-visit";
 
-const parser = Parser.extend(jsx());
+const parser = Parser.extend(jsx.default());
 
 const lang = new Set(["js", "jsx", "javascript"]);
 
 export function remarkMdxEvalCodeBlock() {
-  return (tree) => {
-    visit(tree, "code", (node, index, parent) => {
+  return (tree: any) => {
+    visit(tree, "code", (node: any, index: number, parent: any) => {
       if (lang.has(node.lang) && node.meta === "eval") {
-        const program = parser.parse(node.value, {
+        const program: any = parser.parse(node.value, {
           ecmaVersion: 2020,
           sourceType: "module",
         });

app/[slug]/page.js app/[slug]/page.tsx

···
 import rehypePrettyCode from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import { remarkMdxEvalCodeBlock } from "./mdx.js";
+import { remarkMdxEvalCodeBlock } from "./mdx";
 import overnight from "overnight/themes/Overnight-Slumber.json";
 import "./markdown.css";
 import remarkGfm from "remark-gfm";
 
 overnight.colors["editor.background"] = "var(--code-bg)";
 
-export default async function PostPage({ params }) {
+export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params;
   const filename = "./public/" + slug + "/index.md";
   const file = await readFile(filename, "utf8");
-  let postComponents = {};
+  let postComponents: any = {};
   try {
     postComponents = await import("../../public/" + slug + "/components.js");
-  } catch (e) {
+  } catch (e: any) {
     if (!e || e.code !== "MODULE_NOT_FOUND") {
       throw e;
     }
···
                     remarkSmartpants,
                     remarkGfm,
                     [remarkMdxEvalCodeBlock, filename],
-                  ],
+                  ] as any,
                   rehypePlugins: [
                     [
                       rehypePrettyCode,
···
                         },
                       },
                     ],
-                  ],
-                },
+                  ] as any,
+                } as any,
               }}
             />
           </Wrapper>
···
   return dirs.map((dir) => ({ slug: dir }));
 }
 
-export async function generateMetadata({ params }) {
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params;
   const file = await readFile("./public/" + slug + "/index.md", "utf8");
   let { data } = matter(file);

app/layout.js app/layout.tsx

···
   metadataBase: new URL("https://overreacted.io"),
 };
 
-const Activity = Symbol.for("react.activity");
+const Activity: any = Symbol.for("react.activity");
 
-export default function RootLayout({ children }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={serif.className}>
       <body className="mx-auto max-w-2xl bg-[--bg] px-5 py-12 text-[--text]">

app/page.js app/page.tsx

···
 import Link from "./Link";
 import Color from "colorjs.io";
-import { metadata, getPosts } from "./posts";
+import { metadata, getPosts, Post } from "./posts";
 import { sans } from "./fonts";
 
 export { metadata };
···
   );
 }
 
-function PostTitle({ post }) {
+function PostTitle({ post }: { post: Post }) {
   let lightStart = new Color("lab(63 59.32 -1.47)");
   let lightEnd = new Color("lab(33 42.09 -43.19)");
   let lightRange = lightStart.range(lightEnd);
···
   let darkEnd = new Color("lab(78 19.97 -36.75)");
   let darkRange = darkStart.range(darkEnd);
   let today = new Date();
-  let timeSinceFirstPost = (today - new Date(2018, 10, 30)).valueOf();
-  let timeSinceThisPost = (today - new Date(post.date)).valueOf();
+  let timeSinceFirstPost = (today.getTime() - new Date(2018, 10, 30).getTime());
+  let timeSinceThisPost = (today.getTime() - new Date(post.date).getTime());
   let staleness = timeSinceThisPost / timeSinceFirstPost;
 
   return (
···
       style={{
         "--lightLink": lightRange(staleness).toString(),
         "--darkLink": darkRange(staleness).toString(),
-      }}
+      } as any}
     >
       {post.title}
     </h2>
   );
 }
 
-function PostMeta({ post }) {
+function PostMeta({ post }: { post: Post }) {
   return (
     <p className="text-[13px] text-gray-700 dark:text-gray-300">
       {new Date(post.date).toLocaleDateString("en", {
···
   );
 }
 
-function PostSubtitle({ post }) {
+function PostSubtitle({ post }: { post: Post }) {
   return <p className="mt-1">{post.spoiler}</p>;
 }

app/posts.js app/posts.ts

···
 import matter from "gray-matter";
 import { Feed } from "feed";
 
+export interface Post {
+  slug: string;
+  title: string;
+  date: string;
+  spoiler: string;
+  youtube?: string;
+  bluesky?: string;
+}
+
 export const metadata = {
   title: "overreacted — A blog by Dan Abramov",
   description: "A blog by Dan Abramov",
···
   },
 };
 
-export async function getPosts() {
+export async function getPosts(): Promise<Post[]> {
   const entries = await readdir("./public/", { withFileTypes: true });
   const dirs = entries
     .filter((entry) => entry.isDirectory())
···
     const { data } = matter(fileContent);
     return { slug, ...data };
   });
-  posts.sort((a, b) => {
+  posts.sort((a: any, b: any) => {
     return Date.parse(a.date) < Date.parse(b.date) ? 1 : -1;
   });
-  return posts;
+  return posts as Post[];
 }
 
 export async function generateFeed() {
···
     title: metadata.title,
   };
 
-  const feed = new Feed(feedOptions);
+  const feed = new Feed(feedOptions as any);
 
   for (const post of posts) {
     feed.addItem({