fix: add TypeScript types and improve git hooks

- Export Kit and Tool types from lib/content
- Add explicit type annotations to all map/filter/find callbacks
- Remove commitlint job from CI (already in pre-commit hook)
- Add typecheck to pre-commit hook to catch type errors earlier
- Fixes implicit 'any' TypeScript errors

Author: prosdev

.github/workflows/ci.yml

@@ -12,70 +12,74 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      
+
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 9
-      
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
-      
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      
-      - name: Run Biome lint
+
+      - name: Run lint
         run: pnpm lint
 
-  typecheck:
-    name: Typecheck
+  build:
+    name: Build
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      
+
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 9
-      
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
-      
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      
-      - name: Run TypeScript typecheck
-        run: pnpm typecheck
 
-  build:
-    name: Build
+      - name: Build
+        run: pnpm build
+
+  typecheck:
+    name: Typecheck
     runs-on: ubuntu-latest
+    needs: build
     steps:
       - uses: actions/checkout@v4
-      
+
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 9
-      
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
-      
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      
-      - name: Build project
+
+      - name: Build (to generate .velite)
         run: pnpm build
 
+      - name: Run typecheck
+        run: pnpm typecheck
+
   commitlint:
     name: Commitlint
     runs-on: ubuntu-latest
@@ -84,21 +88,20 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      
+
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 9
-      
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
-      
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      
-      - name: Validate PR commits
-        run: pnpm commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.sha }} --verbose
 
+      - name: Validate commits
+        run: npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose

.husky/pre-commit

@@ -1,3 +1,4 @@
 #!/bin/sh
 pnpm lint-staged
+pnpm typecheck
 

app/globals.css

@@ -48,7 +48,7 @@
   * {
     border-color: hsl(var(--border));
   }
-  
+
   body {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));

app/kits/[slug]/page.tsx

@@ -10,7 +10,7 @@ import { MDXContent } from "@/components/mdx-content";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { kits } from "@/lib/content";
+import { type Kit, kits } from "@/lib/content";
 
 interface KitPageProps {
   params: Promise<{
@@ -19,14 +19,14 @@ interface KitPageProps {
 }
 
 export async function generateStaticParams() {
-  return kits.map((kit) => ({
+  return kits.map((kit: Kit) => ({
     slug: kit.slug,
   }));
 }
 
 export async function generateMetadata(props: KitPageProps) {
   const params = await props.params;
-  const kit = kits.find((k) => k.slug === params.slug);
+  const kit = kits.find((k: Kit) => k.slug === params.slug);
 
   if (!kit) {
     return {
@@ -42,7 +42,7 @@ export async function generateMetadata(props: KitPageProps) {
 
 export default async function KitPage(props: KitPageProps) {
   const params = await props.params;
-  const kit = kits.find((k) => k.slug === params.slug);
+  const kit = kits.find((k: Kit) => k.slug === params.slug);
 
   if (!kit) {
     notFound();

app/kits/page.tsx

@@ -3,28 +3,28 @@
 import { useState } from "react";
 import { KitCard } from "@/components/kit-card";
 import { Button } from "@/components/ui/button";
-import { kits } from "@/lib/content";
+import { type Kit, kits } from "@/lib/content";
 
 type StatusFilter = "all" | "stable" | "experimental" | "deprecated";
 
 export default function KitsPage() {
   const [filter, setFilter] = useState<StatusFilter>("all");
 
-  const sortedKits = kits.sort((a, b) => {
+  const sortedKits = kits.sort((a: Kit, b: Kit) => {
     if (a.order !== b.order) return a.order - b.order;
     return a.title.localeCompare(b.title);
   });
 
   const filteredKits =
     filter === "all"
       ? sortedKits
-      : sortedKits.filter((kit) => kit.status === filter);
+      : sortedKits.filter((kit: Kit) => kit.status === filter);
 
   const counts = {
     all: kits.length,
-    stable: kits.filter((k) => k.status === "stable").length,
-    experimental: kits.filter((k) => k.status === "experimental").length,
-    deprecated: kits.filter((k) => k.status === "deprecated").length,
+    stable: kits.filter((k: Kit) => k.status === "stable").length,
+    experimental: kits.filter((k: Kit) => k.status === "experimental").length,
+    deprecated: kits.filter((k: Kit) => k.status === "deprecated").length,
   };
 
   return (
@@ -80,7 +80,7 @@ export default function KitsPage() {
         </div>
 
         <div className="grid gap-3 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 min-w-0">
-          {filteredKits.map((kit) => (
+          {filteredKits.map((kit: Kit) => (
             <KitCard key={kit.slug} kit={kit} />
           ))}
         </div>

app/page.tsx

@@ -4,26 +4,26 @@ import { KitCard } from "@/components/kit-card";
 import { ToolCard } from "@/components/tool-card";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { kits, tools } from "@/lib/content";
+import { type Kit, kits, type Tool, tools } from "@/lib/content";
 
 export default function Home() {
-  const sortedKits = kits.sort((a, b) => {
+  const sortedKits = kits.sort((a: Kit, b: Kit) => {
     if (a.order !== b.order) return a.order - b.order;
     return a.title.localeCompare(b.title);
   });
 
-  const sortedTools = tools.sort((a, b) => {
+  const sortedTools = tools.sort((a: Tool, b: Tool) => {
     if (a.order !== b.order) return a.order - b.order;
     return a.title.localeCompare(b.title);
   });
 
-  const featuredKits = sortedKits.filter((kit) => kit.featured);
-  const featuredTools = sortedTools.filter((tool) => tool.featured);
+  const featuredKits = sortedKits.filter((kit: Kit) => kit.featured);
+  const featuredTools = sortedTools.filter((tool: Tool) => tool.featured);
   const hasFeatured = featuredKits.length > 0 || featuredTools.length > 0;
 
   // Filter out featured items from regular sections
-  const regularKits = sortedKits.filter((kit) => !kit.featured);
-  const regularTools = sortedTools.filter((tool) => !tool.featured);
+  const regularKits = sortedKits.filter((kit: Kit) => !kit.featured);
+  const regularTools = sortedTools.filter((tool: Tool) => !tool.featured);
 
   return (
     <div className="container px-4 sm:px-6 py-8 md:py-12 lg:py-16 max-w-full">
@@ -56,10 +56,10 @@ export default function Home() {
                 </div>
               </div>
               <div className="grid gap-3 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 min-w-0">
-                {featuredKits.map((kit) => (
+                {featuredKits.map((kit: Kit) => (
                   <KitCard key={kit.slug} kit={kit} />
                 ))}
-                {featuredTools.map((tool) => (
+                {featuredTools.map((tool: Tool) => (
                   <ToolCard key={tool.slug} tool={tool} />
                 ))}
               </div>
@@ -90,7 +90,7 @@ export default function Home() {
             )}
           </div>
           <div className="grid gap-3 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 min-w-0">
-            {regularKits.slice(0, 6).map((kit) => (
+            {regularKits.slice(0, 6).map((kit: Kit) => (
               <KitCard key={kit.slug} kit={kit} />
             ))}
           </div>
@@ -119,7 +119,7 @@ export default function Home() {
             )}
           </div>
           <div className="grid gap-3 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 min-w-0">
-            {regularTools.slice(0, 6).map((tool) => (
+            {regularTools.slice(0, 6).map((tool: Tool) => (
               <ToolCard key={tool.slug} tool={tool} />
             ))}
           </div>

app/tools/[slug]/page.tsx

@@ -11,7 +11,7 @@ import { MDXContent } from "@/components/mdx-content";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { kits, tools } from "@/lib/content";
+import { type Kit, kits, type Tool, tools } from "@/lib/content";
 
 interface ToolPageProps {
   params: Promise<{
@@ -20,14 +20,14 @@ interface ToolPageProps {
 }
 
 export async function generateStaticParams() {
-  return tools.map((tool) => ({
+  return tools.map((tool: Tool) => ({
     slug: tool.slug,
   }));
 }
 
 export async function generateMetadata(props: ToolPageProps) {
   const params = await props.params;
-  const tool = tools.find((t) => t.slug === params.slug);
+  const tool = tools.find((t: Tool) => t.slug === params.slug);
 
   if (!tool) {
     return {
@@ -43,7 +43,7 @@ export async function generateMetadata(props: ToolPageProps) {
 
 export default async function ToolPage(props: ToolPageProps) {
   const params = await props.params;
-  const tool = tools.find((t) => t.slug === params.slug);
+  const tool = tools.find((t: Tool) => t.slug === params.slug);
 
   if (!tool) {
     notFound();
@@ -58,7 +58,7 @@ export default async function ToolPage(props: ToolPageProps) {
 
   // Get kit details for builtOn
   const builtOnKits = tool.builtOn
-    .map((slug: string) => kits.find((k) => k.slug === slug))
+    .map((slug: string) => kits.find((k: Kit) => k.slug === slug))
     .filter(Boolean);
 
   return (
@@ -171,7 +171,7 @@ export default async function ToolPage(props: ToolPageProps) {
                 <span>Built on</span>
               </div>
               <div className="flex flex-wrap gap-2">
-                {builtOnKits.map((kit: any) =>
+                {builtOnKits.map((kit: Kit | undefined) =>
                   kit ? (
                     <Button key={kit.slug} asChild variant="outline" size="sm">
                       <Link href={kit.url} className="text-xs sm:text-sm">

app/tools/page.tsx

@@ -3,28 +3,28 @@
 import { useState } from "react";
 import { ToolCard } from "@/components/tool-card";
 import { Button } from "@/components/ui/button";
-import { tools } from "@/lib/content";
+import { type Tool, tools } from "@/lib/content";
 
 type StatusFilter = "all" | "stable" | "experimental" | "deprecated";
 
 export default function ToolsPage() {
   const [filter, setFilter] = useState<StatusFilter>("all");
 
-  const sortedTools = tools.sort((a, b) => {
+  const sortedTools = tools.sort((a: Tool, b: Tool) => {
     if (a.order !== b.order) return a.order - b.order;
     return a.title.localeCompare(b.title);
   });
 
   const filteredTools =
     filter === "all"
       ? sortedTools
-      : sortedTools.filter((tool) => tool.status === filter);
+      : sortedTools.filter((tool: Tool) => tool.status === filter);
 
   const counts = {
     all: tools.length,
-    stable: tools.filter((t) => t.status === "stable").length,
-    experimental: tools.filter((t) => t.status === "experimental").length,
-    deprecated: tools.filter((t) => t.status === "deprecated").length,
+    stable: tools.filter((t: Tool) => t.status === "stable").length,
+    experimental: tools.filter((t: Tool) => t.status === "experimental").length,
+    deprecated: tools.filter((t: Tool) => t.status === "deprecated").length,
   };
 
   return (
@@ -80,7 +80,7 @@ export default function ToolsPage() {
         </div>
 
         <div className="grid gap-3 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 min-w-0">
-          {filteredTools.map((tool) => (
+          {filteredTools.map((tool: Tool) => (
             <ToolCard key={tool.slug} tool={tool} />
           ))}
         </div>

components/code-block.tsx

@@ -61,8 +61,14 @@ function extractTextContent(node: React.ReactNode): string {
   if (typeof node === "string") return node;
   if (typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map(extractTextContent).join("");
-  if (node && typeof node === "object" && "props" in node) {
-    return extractTextContent((node as any).props.children);
+  if (
+    node &&
+    typeof node === "object" &&
+    "props" in node &&
+    typeof (node as { props?: unknown }).props === "object"
+  ) {
+    const element = node as { props: { children?: React.ReactNode } };
+    return extractTextContent(element.props.children);
   }
   return "";
 }