@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/performance/isr.md

@@ -1,266 +0,0 @@
-# Incremental Static Regeneration Patterns
-
-Patterns for ISR with Next.js.
-
-## Basic ISR
-
-```typescript
-// app/posts/[slug]/page.tsx
-
-// Generate static pages at build time
-export async function generateStaticParams() {
-  const posts = await getPosts()
-  return posts.map(post => ({ slug: post.slug }))
-}
-
-// Revalidate every hour
-export const revalidate = 3600
-
-export default async function PostPage({
-  params
-}: {
-  params: { slug: string }
-}) {
-  const post = await getPost(params.slug)
-
-  return (
-    <article>
-      <h1>{post.title}</h1>
-      <div>{post.content}</div>
-    </article>
-  )
-}
-```
-
-## On-Demand Revalidation
-
-```typescript
-// app/api/revalidate/route.ts
-import { revalidatePath, revalidateTag } from 'next/cache'
-import { NextRequest } from 'next/server'
-
-export async function POST(request: NextRequest) {
-  const { secret, path, tag } = await request.json()
-
-  // Verify secret
-  if (secret !== process.env.REVALIDATE_SECRET) {
-    return Response.json({ error: 'Invalid secret' }, { status: 401 })
-  }
-
-  try {
-    if (tag) {
-      revalidateTag(tag)
-      return Response.json({ revalidated: true, tag })
-    }
-
-    if (path) {
-      revalidatePath(path)
-      return Response.json({ revalidated: true, path })
-    }
-
-    return Response.json({ error: 'Missing path or tag' }, { status: 400 })
-  } catch (error) {
-    return Response.json({ error: 'Revalidation failed' }, { status: 500 })
-  }
-}
-
-// Trigger from CMS webhook or after content update
-async function revalidatePost(slug: string) {
-  await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/revalidate`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      secret: process.env.REVALIDATE_SECRET,
-      path: `/posts/${slug}`
-    })
-  })
-}
-```
-
-## Tag-Based Revalidation
-
-```typescript
-// lib/posts.ts
-import { unstable_cache } from 'next/cache'
-
-export const getPosts = unstable_cache(
-  async () => {
-    return prisma.post.findMany({
-      where: { published: true },
-      orderBy: { createdAt: 'desc' }
-    })
-  },
-  ['posts'],
-  { tags: ['posts'], revalidate: 3600 }
-)
-
-export const getPost = unstable_cache(
-  async (slug: string) => {
-    return prisma.post.findUnique({
-      where: { slug },
-      include: { author: true }
-    })
-  },
-  ['post'],
-  { tags: ['posts'], revalidate: 3600 }
-)
-
-// When a post is updated
-export async function updatePost(id: string, data: PostData) {
-  await prisma.post.update({ where: { id }, data })
-
-  // Revalidate all post-related pages
-  revalidateTag('posts')
-}
-```
-
-## Time-Based vs On-Demand
-
-```typescript
-// Time-based: Good for frequently changing data
-// app/news/page.tsx
-export const revalidate = 60 // Every minute
-
-// On-demand: Good for user-triggered updates
-// After user creates/edits content
-async function saveContent(data: ContentData) {
-  const content = await prisma.content.create({ data })
-
-  // Immediately revalidate
-  revalidatePath(`/content/${content.slug}`)
-
-  return content
-}
-
-// Hybrid: Time-based with on-demand override
-// app/products/page.tsx
-export const revalidate = 3600 // Hourly background refresh
-
-// But also revalidate immediately when inventory changes
-async function updateInventory(productId: string, quantity: number) {
-  await prisma.product.update({
-    where: { id: productId },
-    data: { quantity }
-  })
-
-  revalidatePath('/products')
-  revalidatePath(`/products/${productId}`)
-}
-```
-
-## Dynamic Routes with Fallback
-
-```typescript
-// app/products/[id]/page.tsx
-
-export async function generateStaticParams() {
-  // Only pre-render popular products
-  const popular = await prisma.product.findMany({
-    where: { featured: true },
-    select: { id: true }
-  })
-
-  return popular.map(p => ({ id: p.id }))
-}
-
-// New products render on first request, then cached
-export const dynamicParams = true
-
-// Or block until generated
-// export const dynamicParams = 'blocking'
-
-export default async function ProductPage({
-  params
-}: {
-  params: { id: string }
-}) {
-  const product = await getProduct(params.id)
-
-  if (!product) {
-    notFound()
-  }
-
-  return <ProductDetails product={product} />
-}
-```
-
-## Streaming with ISR
-
-```tsx
-// app/dashboard/page.tsx
-import { Suspense } from 'react'
-
-export const revalidate = 60
-
-export default async function DashboardPage() {
-  // This data is cached and revalidated
-  const user = await getUser()
-
-  return (
-    <div>
-      <h1>Welcome, {user.name}</h1>
-
-      {/* Stream in slower data */}
-      <Suspense fallback={<StatsSkeleton />}>
-        <Stats userId={user.id} />
-      </Suspense>
-
-      <Suspense fallback={<ActivitySkeleton />}>
-        <RecentActivity userId={user.id} />
-      </Suspense>
-    </div>
-  )
-}
-
-// Each component can have its own cache settings
-async function Stats({ userId }: { userId: string }) {
-  const stats = await getCachedStats(userId)
-  return <StatsDisplay stats={stats} />
-}
-```
-
-## CMS Integration
-
-```typescript
-// app/api/cms-webhook/route.ts
-// Webhook handler for headless CMS
-
-import { revalidatePath, revalidateTag } from 'next/cache'
-
-export async function POST(request: Request) {
-  const payload = await request.json()
-
-  // Verify webhook signature
-  const signature = request.headers.get('x-webhook-signature')
-  if (!verifySignature(payload, signature)) {
-    return Response.json({ error: 'Invalid signature' }, { status: 401 })
-  }
-
-  // Handle different content types
-  switch (payload.type) {
-    case 'post.published':
-    case 'post.updated':
-      revalidatePath(`/blog/${payload.data.slug}`)
-      revalidateTag('posts')
-      break
-
-    case 'page.updated':
-      revalidatePath(`/${payload.data.slug}`)
-      break
-
-    case 'settings.updated':
-      // Revalidate entire site
-      revalidatePath('/', 'layout')
-      break
-  }
-
-  return Response.json({ success: true })
-}
-```
-
-## When to Use
-
-- Blog posts
-- Product pages
-- Marketing pages
-- Documentation

package/skills/patterns/performance/lazy-loading.md

@@ -1,281 +0,0 @@
-# Lazy Loading Patterns
-
-Patterns for lazy loading components and data.
-
-## Dynamic Imports
-
-```tsx
-// app/page.tsx
-import dynamic from 'next/dynamic'
-
-// Basic dynamic import
-const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
-  loading: () => <div className="h-64 animate-pulse bg-gray-200" />
-})
-
-// With SSR disabled (client-only component)
-const MapComponent = dynamic(
-  () => import('@/components/Map'),
-  { ssr: false }
-)
-
-// Named exports
-const Modal = dynamic(
-  () => import('@/components/Modals').then(mod => mod.Modal)
-)
-
-export default function Page() {
-  return (
-    <div>
-      <HeavyChart data={chartData} />
-      <MapComponent location={location} />
-    </div>
-  )
-}
-```
-
-## React.lazy with Suspense
-
-```tsx
-// components/Dashboard.tsx
-import { Suspense, lazy } from 'react'
-
-const Analytics = lazy(() => import('./Analytics'))
-const Reports = lazy(() => import('./Reports'))
-const Settings = lazy(() => import('./Settings'))
-
-export function Dashboard({ tab }: { tab: string }) {
-  return (
-    <div>
-      <Suspense fallback={<TabSkeleton />}>
-        {tab === 'analytics' && <Analytics />}
-        {tab === 'reports' && <Reports />}
-        {tab === 'settings' && <Settings />}
-      </Suspense>
-    </div>
-  )
-}
-
-function TabSkeleton() {
-  return (
-    <div className="space-y-4 p-4">
-      <div className="h-8 w-1/3 animate-pulse rounded bg-gray-200" />
-      <div className="h-64 animate-pulse rounded bg-gray-200" />
-    </div>
-  )
-}
-```
-
-## Intersection Observer
-
-```tsx
-// components/LazySection.tsx
-'use client'
-
-import { useRef, useEffect, useState, ReactNode } from 'react'
-
-interface Props {
-  children: ReactNode
-  fallback?: ReactNode
-  rootMargin?: string
-}
-
-export function LazySection({
-  children,
-  fallback = <div className="h-64" />,
-  rootMargin = '100px'
-}: Props) {
-  const ref = useRef<HTMLDivElement>(null)
-  const [isVisible, setIsVisible] = useState(false)
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true)
-          observer.disconnect()
-        }
-      },
-      { rootMargin }
-    )
-
-    if (ref.current) {
-      observer.observe(ref.current)
-    }
-
-    return () => observer.disconnect()
-  }, [rootMargin])
-
-  return (
-    <div ref={ref}>
-      {isVisible ? children : fallback}
-    </div>
-  )
-}
-
-// Usage
-<LazySection>
-  <HeavyComponent />
-</LazySection>
-```
-
-## Lazy Image Loading
-
-```tsx
-// components/LazyImage.tsx
-'use client'
-
-import Image from 'next/image'
-import { useState } from 'react'
-
-interface Props {
-  src: string
-  alt: string
-  width: number
-  height: number
-  className?: string
-}
-
-export function LazyImage({ src, alt, width, height, className }: Props) {
-  const [isLoaded, setIsLoaded] = useState(false)
-
-  return (
-    <div className={`relative ${className}`}>
-      {/* Blur placeholder */}
-      {!isLoaded && (
-        <div
-          className="absolute inset-0 animate-pulse bg-gray-200"
-          style={{ aspectRatio: `${width}/${height}` }}
-        />
-      )}
-
-      <Image
-        src={src}
-        alt={alt}
-        width={width}
-        height={height}
-        loading="lazy"
-        onLoad={() => setIsLoaded(true)}
-        className={`transition-opacity duration-300 ${
-          isLoaded ? 'opacity-100' : 'opacity-0'
-        }`}
-      />
-    </div>
-  )
-}
-
-// With blur placeholder
-export function BlurImage({ src, alt, ...props }: Props & { blurDataUrl: string }) {
-  return (
-    <Image
-      src={src}
-      alt={alt}
-      {...props}
-      loading="lazy"
-      placeholder="blur"
-      blurDataURL={props.blurDataUrl}
-    />
-  )
-}
-```
-
-## Virtual List
-
-```tsx
-// components/VirtualList.tsx
-'use client'
-
-import { useVirtualizer } from '@tanstack/react-virtual'
-import { useRef } from 'react'
-
-interface Props<T> {
-  items: T[]
-  itemHeight: number
-  renderItem: (item: T, index: number) => React.ReactNode
-}
-
-export function VirtualList<T>({ items, itemHeight, renderItem }: Props<T>) {
-  const parentRef = useRef<HTMLDivElement>(null)
-
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => itemHeight,
-    overscan: 5
-  })
-
-  return (
-    <div
-      ref={parentRef}
-      className="h-[500px] overflow-auto"
-    >
-      <div
-        style={{
-          height: `${virtualizer.getTotalSize()}px`,
-          position: 'relative'
-        }}
-      >
-        {virtualizer.getVirtualItems().map(virtualItem => (
-          <div
-            key={virtualItem.key}
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: `${virtualItem.size}px`,
-              transform: `translateY(${virtualItem.start}px)`
-            }}
-          >
-            {renderItem(items[virtualItem.index], virtualItem.index)}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// Usage
-<VirtualList
-  items={largeDataset}
-  itemHeight={60}
-  renderItem={(item) => <ListItem item={item} />}
-/>
-```
-
-## Conditional Feature Loading
-
-```tsx
-// components/FeatureLoader.tsx
-'use client'
-
-import dynamic from 'next/dynamic'
-
-const features = {
-  analytics: dynamic(() => import('@/features/Analytics')),
-  collaboration: dynamic(() => import('@/features/Collaboration')),
-  aiAssistant: dynamic(() => import('@/features/AIAssistant'))
-}
-
-interface Props {
-  enabledFeatures: (keyof typeof features)[]
-}
-
-export function FeatureLoader({ enabledFeatures }: Props) {
-  return (
-    <>
-      {enabledFeatures.map(feature => {
-        const Component = features[feature]
-        return <Component key={feature} />
-      })}
-    </>
-  )
-}
-```
-
-## When to Use
-
-- Heavy components
-- Below-the-fold content
-- Feature flags
-- Large lists