Refactor testing setup and improve component structure; update test commands in package.json for consistency. Introduce Footer component for better layout management and replace BlogFooter references across routes. Enhance caching headers for blog and RSS routes, and streamline Navigation component styles.

Author: mawburn

.claude/settings.local.json

@@ -19,4 +19,4 @@
     "deny": []
   },
   "enableAllProjectMcpServers": false
-}
+}

app/__tests__/components/BlogFooter.test.tsx renamed to app/__tests__/components/Footer.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
-import { BlogFooter } from '~/components/BlogFooter'
+import { Footer } from '~/components/Footer'
 
-describe('BlogFooter Component', () => {
+describe('Footer Component', () => {
   beforeEach(() => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2022-01-01'))
@@ -13,7 +13,7 @@ describe('BlogFooter Component', () => {
   })
 
   it('should render with correct structure and default max-width', () => {
-    render(<BlogFooter />)
+    render(<Footer />)
 
     // Check copyright text
     expect(screen.getByText(/© \d{4} mawburn\.com All rights reserved\./)).toBeInTheDocument()
@@ -30,7 +30,7 @@ describe('BlogFooter Component', () => {
   })
 
   it('should use custom max-width when provided', () => {
-    render(<BlogFooter maxWidth="max-w-3xl" />)
+    render(<Footer maxWidth="max-w-3xl" />)
 
     const container = document.querySelector('.container')
     expect(container).toHaveClass('max-w-3xl')

app/__tests__/routes/blog.post.test.tsx

@@ -28,8 +28,8 @@ vi.mock('~/utils/cache', () => ({
   },
 }))
 
-vi.mock('~/components/BlogFooter', () => ({
-  BlogFooter: ({ maxWidth }: { maxWidth?: string }) => (
+vi.mock('~/components/Footer', () => ({
+  Footer: ({ maxWidth }: { maxWidth?: string }) => (
     <footer data-testid="blog-footer" data-max-width={maxWidth}>
       Blog Footer
     </footer>
@@ -96,9 +96,11 @@ describe('BlogPost Route', () => {
   })
 
   describe('loader function', () => {
-    it('should return post data for existing post', () => {
+    it('should return post data for existing post', async () => {
       const result = loader({ params: { slug: 'test-post' } } as any)
-      expect(result).toEqual({ post: mockPost })
+      expect(result).toBeInstanceOf(Response)
+      const data = await result.json()
+      expect(data).toEqual({ post: mockPost })
     })
 
     it('should throw 404 for non-existing post', () => {

app/__tests__/routes/blog.test.tsx

@@ -35,8 +35,8 @@ vi.mock('~/utils/cache', () => ({
   },
 }))
 
-vi.mock('~/components/BlogFooter', () => ({
-  BlogFooter: () => <footer data-testid="blog-footer">Blog Footer</footer>,
+vi.mock('~/components/Footer', () => ({
+  Footer: () => <footer data-testid="blog-footer">Blog Footer</footer>,
 }))
 
 vi.mock('react-router', () => ({
@@ -103,9 +103,11 @@ describe('Blog Route', () => {
   })
 
   describe('loader function', () => {
-    it('should return posts data with cache config', () => {
+    it('should return posts data with cache config', async () => {
       const result = loader()
-      expect(result).toEqual({
+      expect(result).toBeInstanceOf(Response)
+      const data = await result.json()
+      expect(data).toEqual({
         posts: [
           {
             slug: 'test-post-1',

app/__tests__/routes/rss.xml.test.tsx

@@ -40,7 +40,9 @@ describe('RSS Feed Route', () => {
 
     // Headers
     expect(response.headers.get('Content-Type')).toBe('application/rss+xml; charset=utf-8')
-    expect(response.headers.get('Cache-Control')).toBe('public, max-age=3600')
+    expect(response.headers.get('Cache-Control')).toBe(
+      'public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400'
+    )
 
     // XML structure
     expect(text).toContain('<?xml version="1.0" encoding="UTF-8"?>')

app/__tests__/routes/sitemap.xml.test.ts

@@ -77,7 +77,9 @@ describe('Sitemap XML Route', () => {
     const response = await loader()
 
     expect(response.headers.get('Content-Type')).toBe('application/xml')
-    expect(response.headers.get('Cache-Control')).toBe('public, max-age=3600')
+    expect(response.headers.get('Cache-Control')).toBe(
+      'public, max-age=86400, s-maxage=604800, stale-while-revalidate=86400'
+    )
   })
 
   it('should use current date for static pages lastmod', async () => {

app/components/BlogFooter.tsx renamed to app/components/Footer.tsx

@@ -1,10 +1,10 @@
-type BlogFooterProps = {
+type FooterProps = {
   maxWidth?: 'max-w-3xl' | 'max-w-4xl'
 }
 
-export function BlogFooter({ maxWidth = 'max-w-4xl' }: BlogFooterProps) {
+export function Footer({ maxWidth = 'max-w-4xl' }: FooterProps) {
   return (
-    <footer className="mt-auto">
+    <footer className="mt-auto py-8">
       <div className={`container mx-auto ${maxWidth} px-4 py-6`}>
         <div className="text-center text-sm">
           <p className="text-black dark:text-white">

app/components/Navigation.tsx

@@ -7,18 +7,7 @@ export function Navigation() {
   const isHomePage = location.pathname === '/'
 
   return (
-    <nav
-      className="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-80 border-b border-cyan-500 border-opacity-30"
-      style={{
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        borderBottom: '1px solid rgba(6, 182, 212, 0.3)',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: 50,
-      }}
-    >
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-80 backdrop-blur-md border-b border-cyan-500 border-opacity-30">
       <div className="container mx-auto px-4 py-3">
         <div className="flex items-center justify-between">
           <Link

app/root.tsx

@@ -12,7 +12,23 @@ import type { Route } from './+types/root'
 import { Navigation } from './components/Navigation'
 import './app.css'
 
-export const links: Route.LinksFunction = () => []
+export const links: Route.LinksFunction = () => [
+  {
+    rel: 'dns-prefetch',
+    href: 'https://static.cloudflareinsights.com',
+  },
+]
+
+export function headers() {
+  return {
+    Link: [
+      '</fonts/Lexend-Regular.woff2>; rel=preload; as=font; type=font/woff2; crossorigin=anonymous',
+      '</fonts/Lexend-Bold.woff2>; rel=preload; as=font; type=font/woff2; crossorigin=anonymous',
+    ].join(', '),
+    'X-Content-Type-Options': 'nosniff',
+    'X-Frame-Options': 'DENY',
+  }
+}
 
 const fontPreloadLinks: Array<React.ComponentProps<'link'>> = [
   {
@@ -81,19 +97,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
             `,
           }}
         />
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-              /* Critical CSS for initial render */
-              body { margin: 0; font-family: sans-serif; }
-              .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
-              .dark { color-scheme: dark; }
-              .dark body { background-color: #0f172a; color: #fdfdfd; }
-              nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background-color: rgba(0, 0, 0, 0.8); }
-              .pt-16 { padding-top: 4rem; }
-            `,
-          }}
-        />
         {fontsToLoad.map(link => (
           <link key={link.href} {...link} />
         ))}

app/routes/blog.post.tsx

@@ -2,7 +2,7 @@ import type { Route } from './+types/blog.post'
 import { getPostBySlug } from '~/utils/blog'
 import type { BlogPost } from '~/utils/blogTypes'
 import { Link } from 'react-router'
-import { BlogFooter } from '~/components/BlogFooter'
+import { Footer } from '~/components/Footer'
 import { MarkdownContent } from '~/components/MarkdownContent'
 import { ShareButtons } from '~/components/ShareButtons'
 import { RSSIcon } from '~/components/icons'
@@ -80,8 +80,8 @@ export function loader({ params }: Route.LoaderArgs) {
       'Cache-Control': 'public, max-age=7200, s-maxage=604800, stale-while-revalidate=86400',
       'CDN-Cache-Control': 'max-age=604800',
       'Cloudflare-CDN-Cache-Control': 'max-age=604800',
-      'ETag': `"blog-post-${params.slug}-${post.date}"`,
-      'Vary': 'Accept-Encoding',
+      ETag: `"blog-post-${params.slug}-${post.date}"`,
+      Vary: 'Accept-Encoding',
     },
   })
 }
@@ -142,7 +142,10 @@ export default function BlogPost({ loaderData }: Route.ComponentProps) {
               ))}
             </div>
 
-            <ShareButtons title={post.title} url={`https://mawburn.com/blog/${post.slug}`} />
+            <div className="flex items-center gap-3">
+              <span className="text-gray-600 dark:text-gray-400 font-medium">Share:</span>
+              <ShareButtons title={post.title} url={`https://mawburn.com/blog/${post.slug}`} />
+            </div>
           </header>
 
           <MarkdownContent html={post.content} />
@@ -152,7 +155,7 @@ export default function BlogPost({ loaderData }: Route.ComponentProps) {
           All posts are written by me, though AI helps with proofreading and editing.
         </p>
       </div>
-      <BlogFooter maxWidth="max-w-3xl" />
+      <Footer maxWidth="max-w-3xl" />
     </div>
   )
 }