skrypt-ai 0.1.0

package/dist/template/src/app/api/rate-limit/route.ts

@@ -0,0 +1,84 @@
+import { NextResponse } from 'next/server'
+
+/**
+ * Rate Limit Info Endpoint
+ * Returns current rate limit status in headers
+ *
+ * This is a demo endpoint - in production, connect to your actual rate limiter
+ */
+
+// Simulated rate limit state (in production, use Redis/database)
+const rateLimitState = new Map<string, { used: number; resetAt: number }>()
+
+const LIMIT = 1000
+const WINDOW_MS = 60 * 60 * 1000 // 1 hour
+
+function getRateLimitInfo(clientId: string) {
+  const now = Date.now()
+  let state = rateLimitState.get(clientId)
+
+  // Reset if window expired
+  if (!state || state.resetAt < now) {
+    state = {
+      used: 0,
+      resetAt: now + WINDOW_MS,
+    }
+    rateLimitState.set(clientId, state)
+  }
+
+  return {
+    limit: LIMIT,
+    remaining: Math.max(0, LIMIT - state.used),
+    reset: Math.floor(state.resetAt / 1000),
+    used: state.used,
+  }
+}
+
+export async function GET(request: Request) {
+  // Use IP or auth token as client identifier
+  const clientId = request.headers.get('x-forwarded-for') ||
+                   request.headers.get('authorization') ||
+                   'anonymous'
+
+  const info = getRateLimitInfo(clientId)
+
+  return NextResponse.json(
+    {
+      message: 'Rate limit info',
+      ...info,
+    },
+    {
+      headers: {
+        'X-RateLimit-Limit': String(info.limit),
+        'X-RateLimit-Remaining': String(info.remaining),
+        'X-RateLimit-Reset': String(info.reset),
+        'X-RateLimit-Used': String(info.used),
+        // Standard Rate Limit headers (draft spec)
+        'RateLimit-Limit': String(info.limit),
+        'RateLimit-Remaining': String(info.remaining),
+        'RateLimit-Reset': String(info.reset),
+      },
+    }
+  )
+}
+
+export async function HEAD(request: Request) {
+  const clientId = request.headers.get('x-forwarded-for') ||
+                   request.headers.get('authorization') ||
+                   'anonymous'
+
+  const info = getRateLimitInfo(clientId)
+
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      'X-RateLimit-Limit': String(info.limit),
+      'X-RateLimit-Remaining': String(info.remaining),
+      'X-RateLimit-Reset': String(info.reset),
+      'X-RateLimit-Used': String(info.used),
+      'RateLimit-Limit': String(info.limit),
+      'RateLimit-Remaining': String(info.remaining),
+      'RateLimit-Reset': String(info.reset),
+    },
+  })
+}

package/dist/template/src/app/docs/[...slug]/page.tsx

@@ -0,0 +1,81 @@
+import { notFound } from 'next/navigation'
+import { readFile, readdir, stat } from 'fs/promises'
+import { join } from 'path'
+import { compileMDX } from 'next-mdx-remote/rsc'
+import * as components from '@/components/mdx'
+
+interface PageProps {
+  params: Promise<{ slug: string[] }>
+}
+
+async function getContent(slug: string[]) {
+  const contentDir = join(process.cwd(), 'content', 'docs')
+  const filePath = join(contentDir, ...slug)
+
+  // Try .mdx first, then .md
+  for (const ext of ['.mdx', '.md', '/index.mdx', '/index.md']) {
+    try {
+      const fullPath = filePath + ext
+      const content = await readFile(fullPath, 'utf-8')
+      return { content, path: fullPath }
+    } catch {
+      continue
+    }
+  }
+
+  return null
+}
+
+export default async function DocPage({ params }: PageProps) {
+  const { slug } = await params
+  const result = await getContent(slug)
+
+  if (!result) {
+    notFound()
+  }
+
+  const { content } = await compileMDX({
+    source: result.content,
+    components: components as any,
+    options: {
+      parseFrontmatter: true,
+    },
+  })
+
+  return (
+    <div className="prose max-w-none">
+      {content}
+    </div>
+  )
+}
+
+export async function generateStaticParams() {
+  const contentDir = join(process.cwd(), 'content', 'docs')
+  const slugs: { slug: string[] }[] = []
+
+  async function walkDir(dir: string, prefix: string[] = []) {
+    try {
+      const entries = await readdir(dir, { withFileTypes: true })
+
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          await walkDir(join(dir, entry.name), [...prefix, entry.name])
+        } else if (entry.name.endsWith('.md') || entry.name.endsWith('.mdx')) {
+          const name = entry.name.replace(/\.(mdx?|md)$/, '')
+          if (name === 'index') {
+            if (prefix.length > 0) {
+              slugs.push({ slug: prefix })
+            }
+          } else {
+            slugs.push({ slug: [...prefix, name] })
+          }
+        }
+      }
+    } catch {
+      // Directory doesn't exist yet
+    }
+  }
+
+  await walkDir(contentDir)
+  return slugs
+}

package/dist/template/src/app/docs/layout.tsx

@@ -0,0 +1,9 @@
+import { DocsLayout } from '@/components/docs-layout'
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <DocsLayout>{children}</DocsLayout>
+}

package/dist/template/src/app/docs/page.mdx

@@ -0,0 +1,67 @@
+# Introduction
+
+Welcome to the API documentation. This guide will help you get started with integrating our API into your applications.
+
+<CardGroup cols={2}>
+  <Card title="Quick Start" icon="Zap" href="/docs/quickstart">
+    Get up and running in under 5 minutes
+  </Card>
+  <Card title="API Reference" icon="Code" href="/docs/api">
+    Explore all available endpoints
+  </Card>
+</CardGroup>
+
+## Features
+
+<Info title="Full API Access">
+  Our API provides complete access to all platform features with comprehensive documentation.
+</Info>
+
+<Steps>
+  <Step title="Install the SDK">
+    Install our SDK using your preferred package manager.
+  </Step>
+  <Step title="Configure authentication">
+    Set up your API keys and configure authentication.
+  </Step>
+  <Step title="Make your first request">
+    Start making API calls to our endpoints.
+  </Step>
+</Steps>
+
+## Code Examples
+
+<CodeGroup>
+
+```typescript
+// TypeScript
+import { Client } from 'your-sdk'
+
+const client = new Client({
+  apiKey: process.env.API_KEY
+})
+
+const result = await client.getData()
+```
+
+```python
+# Python
+from your_sdk import Client
+
+client = Client(api_key=os.environ["API_KEY"])
+
+result = client.get_data()
+```
+
+</CodeGroup>
+
+## FAQ
+
+<AccordionGroup>
+  <Accordion title="How do I get an API key?">
+    You can generate an API key from your dashboard. Navigate to Settings → API Keys and click "Create New Key".
+  </Accordion>
+  <Accordion title="What are the rate limits?">
+    Free tier: 100 requests/minute. Pro tier: 1000 requests/minute. Enterprise: Unlimited.
+  </Accordion>
+</AccordionGroup>

package/dist/template/src/app/error.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { useEffect } from 'react'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="max-w-md w-full text-center">
+        <div className="mb-6">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 mb-4">
+            <svg
+              className="w-8 h-8 text-red-600 dark:text-red-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              />
+            </svg>
+          </div>
+          <h1 className="text-2xl font-bold text-[var(--color-text)] mb-2">
+            Something went wrong
+          </h1>
+          <p className="text-[var(--color-text-secondary)] mb-4">
+            An unexpected error occurred. Please try again.
+          </p>
+          {error.digest && (
+            <p className="text-xs text-[var(--color-text-tertiary)] mb-4">
+              Error ID: {error.digest}
+            </p>
+          )}
+        </div>
+        <div className="flex gap-3 justify-center">
+          <button
+            onClick={reset}
+            className="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] transition-colors"
+          >
+            Try again
+          </button>
+          <a
+            href="/"
+            className="px-4 py-2 border border-[var(--color-border)] text-[var(--color-text)] rounded-lg hover:bg-[var(--color-bg-secondary)] transition-colors"
+          >
+            Go home
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/template/src/app/layout.tsx

@@ -0,0 +1,71 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import '@/styles/globals.css'
+import { SyntaxThemeProvider } from '@/contexts/syntax-theme'
+
+const inter = Inter({ subsets: ['latin'] })
+
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://docs.example.com'
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'API Documentation'
+
+export const metadata: Metadata = {
+  title: {
+    default: siteName,
+    template: `%s | ${siteName}`,
+  },
+  description: 'API documentation with interactive examples',
+  metadataBase: new URL(siteUrl),
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: siteUrl,
+    siteName,
+    title: siteName,
+    description: 'API documentation with interactive examples',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: siteName,
+    description: 'API documentation with interactive examples',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+}
+
+// JSON-LD structured data
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'WebSite',
+  name: siteName,
+  url: siteUrl,
+  description: 'API documentation with interactive examples',
+  potentialAction: {
+    '@type': 'SearchAction',
+    target: `${siteUrl}/docs?q={search_term_string}`,
+    'query-input': 'required name=search_term_string',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </head>
+      <body className={inter.className}>
+        <SyntaxThemeProvider>
+          {children}
+        </SyntaxThemeProvider>
+      </body>
+    </html>
+  )
+}

package/dist/template/src/app/page.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <main className="min-h-screen flex flex-col items-center justify-center p-8">
+      <h1 className="text-4xl font-bold mb-4">API Documentation</h1>
+      <p className="text-[var(--color-text-secondary)] mb-8 text-center max-w-xl">
+        Welcome to the API documentation. Browse the docs to learn how to integrate with our API.
+      </p>
+      <Link
+        href="/docs"
+        className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg font-medium hover:bg-[var(--color-primary-dark)] transition-colors"
+      >
+        Get Started
+      </Link>
+    </main>
+  )
+}

package/dist/template/src/app/reference/route.ts

@@ -0,0 +1,36 @@
+import { ApiReference } from '@scalar/nextjs-api-reference'
+
+const MOCK_SERVER_ENABLED = process.env.NEXT_PUBLIC_MOCK_SERVER === 'true'
+
+// Build servers list
+const servers = [
+  ...(MOCK_SERVER_ENABLED ? [{
+    url: '/api/mock',
+    description: 'Mock Server (returns example responses)',
+  }] : []),
+  {
+    url: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000',
+    description: 'Default',
+  },
+  ...(process.env.NEXT_PUBLIC_API_STAGING_URL ? [{
+    url: process.env.NEXT_PUBLIC_API_STAGING_URL,
+    description: 'Staging',
+  }] : []),
+]
+
+export const GET = ApiReference({
+  spec: {
+    url: '/api/openapi',
+  },
+  // Scalar configuration options
+  theme: 'default',
+  hideModels: false,
+  darkMode: true,
+  servers,
+  // Enable request sharing (#76)
+  showSidebar: true,
+  searchHotKey: 'k',
+  metaData: {
+    title: 'API Reference',
+  },
+})

package/dist/template/src/app/robots.ts

@@ -0,0 +1,14 @@
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://docs.example.com'
+
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/api/', '/_next/'],
+    },
+    sitemap: `${baseUrl}/sitemap.xml`,
+  }
+}

package/dist/template/src/app/sitemap.ts

@@ -0,0 +1,64 @@
+import { MetadataRoute } from 'next'
+import { readdir } from 'fs/promises'
+import { join } from 'path'
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://docs.example.com'
+
+  const routes: MetadataRoute.Sitemap = [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 1,
+    },
+    {
+      url: `${baseUrl}/docs`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.9,
+    },
+  ]
+
+  // Scan content/docs for all MDX files
+  try {
+    const docsDir = join(process.cwd(), 'content', 'docs')
+    const files = await scanDir(docsDir, '')
+
+    for (const file of files) {
+      const slug = file.replace(/\.mdx?$/, '').replace(/\/index$/, '')
+      routes.push({
+        url: `${baseUrl}/docs/${slug}`,
+        lastModified: new Date(),
+        changeFrequency: 'weekly',
+        priority: 0.8,
+      })
+    }
+  } catch {
+    // No docs directory yet
+  }
+
+  return routes
+}
+
+async function scanDir(dir: string, prefix: string): Promise<string[]> {
+  const files: string[] = []
+
+  try {
+    const entries = await readdir(dir, { withFileTypes: true })
+
+    for (const entry of entries) {
+      const path = prefix ? `${prefix}/${entry.name}` : entry.name
+
+      if (entry.isDirectory()) {
+        files.push(...await scanDir(join(dir, entry.name), path))
+      } else if (entry.name.endsWith('.mdx') || entry.name.endsWith('.md')) {
+        files.push(path)
+      }
+    }
+  } catch {
+    // Directory doesn't exist
+  }
+
+  return files
+}

package/dist/template/src/components/breadcrumbs.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ChevronRight, Home } from 'lucide-react'
+
+export function Breadcrumbs() {
+  const pathname = usePathname()
+  const segments = pathname.split('/').filter(Boolean)
+
+  if (segments.length <= 1) return null
+
+  const crumbs = segments.map((segment, index) => {
+    const href = '/' + segments.slice(0, index + 1).join('/')
+    const label = segment
+      .replace(/-/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase())
+
+    return { href, label }
+  })
+
+  return (
+    <nav className="flex items-center gap-1.5 text-[13px] text-[var(--color-text-tertiary)] mb-4">
+      <Link href="/" className="hover:text-[var(--color-text)]">
+        <Home size={14} />
+      </Link>
+      {crumbs.map((crumb, i) => (
+        <span key={crumb.href} className="flex items-center gap-1.5">
+          <ChevronRight size={14} />
+          {i === crumbs.length - 1 ? (
+            <span className="text-[var(--color-text)]">{crumb.label}</span>
+          ) : (
+            <Link href={crumb.href} className="hover:text-[var(--color-text)]">
+              {crumb.label}
+            </Link>
+          )}
+        </span>
+      ))}
+    </nav>
+  )
+}

package/dist/template/src/components/copy-button.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useState } from 'react'
+import { Copy, Check } from 'lucide-react'
+
+interface CopyButtonProps {
+  text: string
+  className?: string
+}
+
+export function CopyButton({ text, className = '' }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      className={`p-1.5 rounded text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-tertiary)] transition-colors ${className}`}
+      title={copied ? 'Copied!' : 'Copy to clipboard'}
+    >
+      {copied ? <Check size={14} /> : <Copy size={14} />}
+    </button>
+  )
+}

package/dist/template/src/components/docs-layout.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useState } from 'react'
+import { Sidebar } from './sidebar'
+import { Header } from './header'
+import { TableOfContents } from './table-of-contents'
+import { Breadcrumbs } from './breadcrumbs'
+
+export function DocsLayout({ children }: { children: React.ReactNode }) {
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  return (
+    <div className="min-h-screen">
+      <Header
+        onMenuToggle={() => setMenuOpen(!menuOpen)}
+        menuOpen={menuOpen}
+      />
+      <div className="flex">
+        <Sidebar
+          open={menuOpen}
+          onClose={() => setMenuOpen(false)}
+        />
+        <main className="flex-1 min-w-0 px-4 md:px-8 py-6 md:ml-[var(--sidebar-width)] xl:mr-[var(--toc-width)]">
+          <div className="max-w-3xl mx-auto">
+            <Breadcrumbs />
+            <article className="prose">
+              {children}
+            </article>
+          </div>
+        </main>
+        <TableOfContents />
+      </div>
+    </div>
+  )
+}

package/dist/template/src/components/edit-link.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import { Pencil } from 'lucide-react'
+
+interface EditLinkProps {
+  repoUrl?: string
+  branch?: string
+  docsPath?: string
+}
+
+export function EditLink({
+  repoUrl = '',
+  branch = 'main',
+  docsPath = 'content'
+}: EditLinkProps) {
+  const pathname = usePathname()
+
+  if (!repoUrl) return null
+
+  // Convert pathname to file path
+  const filePath = pathname === '/docs'
+    ? `${docsPath}/docs/index.mdx`
+    : `${docsPath}${pathname}.mdx`
+
+  const editUrl = `${repoUrl}/edit/${branch}/${filePath}`
+
+  return (
+    <a
+      href={editUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-1.5 text-[13px] text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] transition-colors"
+    >
+      <Pencil size={14} />
+      Edit this page
+    </a>
+  )
+}