Add pages (#6)

* add layout

* add docs

* fix layout

* add layout

* add endpoints

* add pages

* fix loader

* add indexed

* add cross-app wallets

* fix RegExpExecArray

Author: julienbrg

src/app/api/docs/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const file = searchParams.get('file')
+
+    if (!file) {
+      // Return list of all docs
+      const docsPath = path.join(process.cwd(), '../w3pk/docs')
+      const files = fs.readdirSync(docsPath).filter(f => f.endsWith('.md'))
+
+      return NextResponse.json({ files })
+    }
+
+    // Return specific file content
+    const docsPath = path.join(process.cwd(), '../w3pk/docs', file)
+    const content = fs.readFileSync(docsPath, 'utf-8')
+
+    return NextResponse.json({ content, filename: file })
+  } catch (error) {
+    console.error('Error reading docs:', error)
+    return NextResponse.json(
+      { error: 'Failed to read documentation' },
+      { status: 500 }
+    )
+  }
+}

src/app/docs/error.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { Box, Heading, Text, VStack } from '@chakra-ui/react'
+import { Button } from '@/components/ui/button'
+import { useEffect } from 'react'
+import { brandColors } from '@/theme'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error('Documentation page error:', error)
+  }, [error])
+
+  return (
+    <Box py={20}>
+      <VStack gap={6} align="center" maxW="600px" mx="auto" p={6}>
+        <Heading as="h2" size="xl" color="red.400">
+          Something went wrong!
+        </Heading>
+        <Text fontSize="lg" color="gray.400" textAlign="center">
+          An error occurred while loading the documentation.
+        </Text>
+        {error.message && (
+          <Box
+            p={4}
+            bg="red.900"
+            borderRadius="md"
+            borderWidth="1px"
+            borderColor="red.700"
+            w="full"
+          >
+            <Text fontSize="sm" color="red.200" fontFamily="mono" wordBreak="break-word">
+              {error.message}
+            </Text>
+          </Box>
+        )}
+        <Button
+          bg={brandColors.accent}
+          color="white"
+          _hover={{ bg: '#3691e7' }}
+          onClick={reset}
+        >
+          Try again
+        </Button>
+      </VStack>
+    </Box>
+  )
+}

src/app/docs/layout.tsx

@@ -0,0 +1,38 @@
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Docs | w3pk',
+  description:
+    'Complete technical documentation for W3PK, the passwordless Web3 authentication SDK',
+
+  openGraph: {
+    title: 'Docs | w3pk',
+    description:
+      'Complete technical documentation for W3PK, the passwordless Web3 authentication SDK',
+    url: 'https://w3pk.w3hc.org/docs',
+    siteName: 'w3pk Playground',
+    images: [
+      {
+        url: '/huangshan.png',
+        width: 1200,
+        height: 630,
+        alt: 'W3PK Documentation',
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
+
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Docs | w3pk',
+    description:
+      'Complete technical documentation for W3PK, the passwordless Web3 authentication SDK',
+    images: ['/huangshan.png'],
+    creator: '@julienbrg',
+  },
+}
+
+export default function DocsLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}