Reorganize folders for clarity and maintainability

.claude/CLAUDE.md

@@ -0,0 +1,44 @@
+# michaeluloth.com - Claude Code Rules
+
+## TypeScript Type Safety
+
+### Never use `any`
+
+**Rule:** Never use `any`, `as any`, or `@typescript-eslint/no-explicit-any` to bypass type errors.
+
+**Why:** Type errors indicate a mismatch between what TypeScript expects and what you're providing. The solution is always to communicate the real type properly, not to suppress the error.
+
+**How to fix type errors properly:**
+
+1. **Understand what TypeScript expects** - Read the error message carefully to understand the expected type
+2. **Provide the correct type** - Use proper type annotations, interfaces, or type assertions with the actual type
+3. **Use the right syntax** - If a library expects JSX/ReactNode, use JSX syntax (`.tsx` files) instead of plain objects
+4. **Import necessary types** - Ensure you have the correct imports (e.g., `React` for JSX)
+
+**Example: Satori type error**
+
+```typescript
+// ❌ WRONG - bypassing the type error
+const svg = await satori(
+  {
+    type: 'div',
+    props: { /* ... */ }
+  } as any,  // Never do this!
+  options
+)
+
+// ✅ CORRECT - using proper JSX syntax that TypeScript understands
+// 1. Rename file from .ts to .tsx
+// 2. Import React
+import React from 'react'
+
+// 3. Use JSX syntax instead of plain objects
+const svg = await satori(
+  <div>
+    {/* ... */}
+  </div>,
+  options
+)
+```
+
+This rule ensures the codebase maintains full type safety and prevents runtime errors that `any` would hide.

.gitignore

@@ -1,20 +1,19 @@
 # Theirs
-node_modules/
 .netlify/
 .next/
 .playwright-mcp/
 .vercel/
 build/
+node_modules/
 out/
 .DS_Store
 *.log
 *.tsbuildinfo
 next-env.d.ts
-.lighthouseci/
-ci/lighthouse/urls.json
 
 # Mine
-**/cloudinary/*.json
 .env
 .env.local
+.lighthouseci/
 .local-cache/
+ci/lighthouse/urls.json

app/(prose)/page.test.tsx → app/(home)/page.test.tsx

@@ -11,14 +11,14 @@ import { Ok } from '@/utils/errors/result'
 
 // Mock dependencies
 vi.mock('@/io/notion/getPosts')
-vi.mock('@/ui/image', () => ({
+vi.mock('@/ui/elements/image', () => ({
   // eslint-disable-next-line @next/next/no-img-element -- Using img in test mock is acceptable
   default: ({ url }: { url: string }) => <img src={url} alt="Michael Uloth" />,
 }))
 
 // Mock PostList to avoid async server component complexity in tests
-// The actual PostList behavior is tested in ui/post-list.test.tsx
-vi.mock('@/ui/post-list', () => ({
+// The actual PostList behavior is tested in ui/sections/blog-post-list.test.tsx
+vi.mock('@/ui/sections/blog-post-list', () => ({
   default: ({ limit }: { limit?: number }) => {
     // Call getPosts to verify it's called with correct params
     // This ensures the mock is called during render which we verify in tests
@@ -29,6 +29,15 @@ vi.mock('@/ui/post-list', () => ({
   },
 }))
 
+// Mock PageLayout to avoid Next.js usePathname() in Header component
+vi.mock('@/ui/layout/page-layout', () => ({
+  default: ({ children }: { children: React.ReactNode }) => (
+    <main id="main" className="flex-auto flex flex-col">
+      {children}
+    </main>
+  ),
+}))
+
 describe('Home page', () => {
   beforeEach(() => {
     vi.clearAllMocks()

app/(home)/page.tsx

@@ -0,0 +1,15 @@
+import { type ReactElement } from 'react'
+import PageLayout from '@/ui/layout/page-layout'
+import Summary from '@/ui/sections/home-summary'
+import RecentWriting from '@/ui/sections/home-recent-writing'
+import JsonLdScript from '@/seo/json-ld/script'
+
+export default async function Home(): Promise<ReactElement> {
+  return (
+    <PageLayout>
+      <Summary />
+      <RecentWriting />
+      <JsonLdScript type="person" />
+    </PageLayout>
+  )
+}