\n \n

clone an app from our library

\n \n $\"Example$ \n \n \n $\"Example$ \n \n \n $\"Example$ \n \n \n $\"Example$ \n \n

\n\n`;\n\n// Storage keys\nconst getAppKey = () => `${APP_NAMESPACE}_app`;\nconst getVersionKey = (version: number) => `${APP_NAMESPACE}_app_version_${version}`;\nconst getVersionCountKey = () => `${APP_NAMESPACE}_app_version_count`;\nconst getTokenKey = (token: string) => `${APP_NAMESPACE}_auth_token_${token}`;\nconst getSessionKey = (sessionId: string) => `${APP_NAMESPACE}_session_${sessionId}`;\n\n// Auth utilities\nconst generateToken = (): string => crypto.randomUUID();\n\nconst storeAuthToken = async (token: string, email: string): Promise => {\n const expiry = Date.now() + (15 * 60 * 1000); // 15 minutes\n debugLog('Storing auth token', { token: token.substring(0, 8) + '...', email, expiry: new Date(expiry) });\n await blob.setJSON(getTokenKey(token), { email, expiry });\n};\n\nconst verifyAuthToken = async (token: string): Promise => {\n try {\n debugLog('Verifying auth token', { token: token.substring(0, 8) + '...' });\n const data = await blob.getJSON(getTokenKey(token));\n debugLog('Auth token data retrieved', { hasData: !!data, email: data?.email, expiry: data?.expiry ? new Date(data.expiry) : null });\n \n if (!data || !data.email || !data.expiry) {\n debugLog('Auth token invalid - missing data');\n return null;\n }\n \n if (Date.now() > data.expiry) {\n debugLog('Auth token expired', { expiry: new Date(data.expiry), now: new Date() });\n await blob.delete(getTokenKey(token));\n return null;\n }\n \n // Token is valid, delete it (one-time use)\n debugLog('Auth token valid, consuming token', { email: data.email });\n await blob.delete(getTokenKey(token));\n return data.email;\n } catch (error) {\n debugLog('Error verifying auth token', { error: error.message });\n return null;\n }\n};\n\nconst createSession = async (email: string): Promise => {\n const sessionId = crypto.randomUUID();\n const expiry = Date.now() + (30 * 24 * 60 * 60 * 1000); // 30 days\n debugLog('Creating session', { sessionId: sessionId.substring(0, 8) + '...', email, expiry: new Date(expiry) });\n await blob.setJSON(getSessionKey(sessionId), { email, expiry });\n return sessionId;\n};\n\nconst verifySession = async (sessionId: string): Promise => {\n try {\n debugLog('Verifying session', { sessionId: sessionId.substring(0, 8) + '...' });\n const data = await blob.getJSON(getSessionKey(sessionId));\n debugLog('Session data retrieved', { hasData: !!data, email: data?.email, expiry: data?.expiry ? new Date(data.expiry) : null });\n \n if (!data || !data.email || !data.expiry) {\n debugLog('Session invalid - missing data');\n return null;\n }\n \n if (Date.now() > data.expiry) {\n debugLog('Session expired', { expiry: new Date(data.expiry), now: new Date() });\n await blob.delete(getSessionKey(sessionId));\n return null;\n }\n \n // Extend session\n const newExpiry = Date.now() + (30 * 24 * 60 * 60 * 1000);\n debugLog('Extending session', { email: data.email, newExpiry: new Date(newExpiry) });\n await blob.setJSON(getSessionKey(sessionId), { email: data.email, expiry: newExpiry });\n \n return data.email;\n } catch (error) {\n debugLog('Error verifying session', { error: error.message });\n return null;\n }\n};\n\nconst sendMagicLink = async (userEmail: string, token: string, baseUrl: string): Promise => {\n const magicLink = `${baseUrl}/auth/verify?token=${token}`;\n \n await email({\n to: userEmail,\n subject: \"Sign in to your Hyperclay app\",\n html: `\n

Sign in to your app

Click the link below to sign in:

Or copy and paste this link: ${magicLink}

This link will expire in 15 minutes.

\n `\n });\n};\n\n// HTML utilities\nconst getCurrentHTML = async (): Promise => {\n try {\n const html = await blob.get(getAppKey());\n \n // If we got a non-string (corrupted data), clear it and use default\n if (typeof html !== 'string') {\n debugLog('Corrupted data detected, clearing and using default');\n await blob.delete(getAppKey());\n return DEFAULT_HTML;\n }\n \n return html || DEFAULT_HTML;\n } catch (error) {\n console.error('Error loading HTML:', error);\n return DEFAULT_HTML;\n }\n};\n\nconst saveHTML = async (html: string): Promise => {\n try {\n // Save current version\n await blob.set(getAppKey(), html);\n \n // Save versioned copy\n const versionCountKey = getVersionCountKey();\n let versionCount = 0;\n try {\n const countStr = await blob.get(versionCountKey);\n versionCount = countStr ? parseInt(countStr, 10) : 0;\n } catch {\n // First version\n }\n \n const newVersion = versionCount + 1;\n await blob.set(getVersionKey(newVersion), html);\n await blob.set(versionCountKey, newVersion.toString());\n } catch (error) {\n console.error('Error saving HTML:', error);\n throw new Error('Failed to save document');\n }\n};\n\nconst getVersionHistory = async (): Promise> => {\n try {\n const versionCountKey = getVersionCountKey();\n const countStr = await blob.get(versionCountKey);\n const versionCount = countStr ? parseInt(countStr, 10) : 0;\n \n const versions: Array<{ version: number; html: string }> = [];\n \n for (let i = 1; i <= versionCount; i++) {\n try {\n const html = await blob.get(getVersionKey(i));\n if (html) {\n versions.push({ version: i, html });\n }\n } catch {\n // Skip missing versions\n }\n }\n \n return versions.reverse(); // Most recent first\n } catch (error) {\n console.error('Error loading version history:', error);\n return [];\n }\n};\n\n// Create Hono app\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Request logging middleware\napp.use('*', async (c, next) => {\n debugLog('Incoming request', { \n method: c.req.method, \n path: c.req.path, \n hasAuth: !!getCookie(c, 'session'),\n userAgent: c.req.header('User-Agent')\n });\n \n await next();\n});\n\n// Middleware to check admin status\nconst requireAdmin = async (c, next) => {\n const sessionId = getCookie(c, 'session');\n debugLog('Admin middleware check', { sessionId: sessionId ? sessionId.substring(0, 8) + '...' : null });\n \n if (!sessionId) {\n debugLog('No session ID found in cookies');\n return c.json({ msg: 'Unauthorized - admin access required', msgType: 'error' }, 401);\n }\n \n const email = await verifySession(sessionId);\n const isUserAdmin = email === ADMIN_EMAIL;\n debugLog('Admin check result', { email, adminEmail: ADMIN_EMAIL, isAdmin: isUserAdmin });\n \n if (!isUserAdmin) {\n debugLog('User is not admin');\n return c.json({ msg: 'Unauthorized - admin access required', msgType: 'error' }, 401);\n }\n \n c.set('adminEmail', email);\n await next();\n};\n\n// Routes\n\n// Serve main HTML document\napp.get('/', async (c) => {\n debugLog('Serving main HTML document');\n const html = await getCurrentHTML();\n \n // Check if user is admin and set Hyperclay cookies accordingly\n const sessionId = getCookie(c, 'session');\n let isUserAdmin = false;\n \n if (sessionId) {\n const email = await verifySession(sessionId);\n isUserAdmin = email === ADMIN_EMAIL;\n }\n \n debugLog('User admin status for main page', { isUserAdmin });\n \n if (isUserAdmin) {\n // Set Hyperclay cookies for admin users server-side\n const thirtyDaysFromNow = new Date();\n thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);\n \n debugLog('Setting Hyperclay admin cookies server-side', { expires: thirtyDaysFromNow });\n \n setCookie(c, 'currentResource', 'app', {\n path: '/',\n expires: thirtyDaysFromNow,\n secure: true,\n sameSite: 'Lax'\n });\n \n setCookie(c, 'isAdminOfCurrentResource', 'true', {\n path: '/',\n expires: thirtyDaysFromNow,\n secure: true,\n sameSite: 'Lax'\n });\n } else {\n debugLog('User is not admin, not setting Hyperclay cookies');\n }\n \n return c.html(html);\n});\n\n// Auth flow - show email form\napp.get('/auth/edit', (c) => {\n const html = `\n\n\n \n \n Sign In\n \n\n\n

Sign In

\n \n

← Back to app

\n\n`;\n \n return c.html(html);\n});\n\n// Auth flow - handle email submission\napp.post('/auth/edit', async (c) => {\n const formData = await c.req.formData();\n const userEmail = formData.get('email')?.toString();\n debugLog('Auth email submission', { userEmail, adminEmail: ADMIN_EMAIL });\n \n if (!userEmail || userEmail !== ADMIN_EMAIL) {\n debugLog('Invalid email for auth', { userEmail, adminEmail: ADMIN_EMAIL });\n const html = `\n\n\n \n \n Sign In\n \n\n\n

Sign In

Invalid email address. Only the admin email can sign in.

\n \n

← Back to app

\n\n`;\n \n return c.html(html);\n }\n \n // Generate and send magic link\n const token = generateToken();\n debugLog('Generated magic link token', { token: token.substring(0, 8) + '...', userEmail });\n await storeAuthToken(token, userEmail);\n await sendMagicLink(userEmail, token, c.req.url.split('/auth')[0]);\n debugLog('Magic link sent', { userEmail });\n \n const html = `\n\n\n \n \n Check Your Email\n \n\n\n

Check Your Email

\n A magic link has been sent to ${userEmail}. Click the link in your email to sign in.\n

The link will expire in 15 minutes.

← Back to app

\n\n`;\n \n return c.html(html);\n});\n\n// Verify magic link token\napp.get('/auth/verify', async (c) => {\n const token = c.req.query('token');\n debugLog('Magic link verification attempt', { token: token ? token.substring(0, 8) + '...' : null });\n \n if (!token) {\n debugLog('No token provided in magic link');\n return c.text('Invalid token', 400);\n }\n \n const email = await verifyAuthToken(token);\n debugLog('Magic link token verification result', { email, adminEmail: ADMIN_EMAIL });\n \n if (!email || email !== ADMIN_EMAIL) {\n const html = `\n\n\n \n \n Invalid Link\n \n\n\n

Invalid or Expired Link

\n This magic link is invalid or has expired. Please try signing in again.\n

← Back to app

\n\n`;\n \n return c.html(html);\n }\n \n // Create session and redirect\n const sessionId = await createSession(email);\n const thirtyDaysFromNow = new Date();\n thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);\n \n debugLog('Creating session and redirecting', { \n sessionId: sessionId.substring(0, 8) + '...', \n email, \n expires: thirtyDaysFromNow \n });\n \n setCookie(c, 'session', sessionId, {\n path: '/',\n httpOnly: true,\n secure: true,\n sameSite: 'Lax',\n expires: thirtyDaysFromNow\n });\n \n return c.redirect('/');\n});\n\n// View mode - clear session and admin cookies\napp.get('/auth/view', (c) => {\n deleteCookie(c, 'session', { path: '/', httpOnly: true, secure: true, sameSite: 'Lax' });\n deleteCookie(c, 'currentResource', { path: '/', secure: true, sameSite: 'Lax' });\n deleteCookie(c, 'isAdminOfCurrentResource', { path: '/', secure: true, sameSite: 'Lax' });\n \n return c.redirect('/');\n});\n\n// Save endpoint - requires admin session\napp.post('/save/app', requireAdmin, async (c) => {\n debugLog('Save endpoint accessed');\n \n const html = await c.req.text();\n debugLog('Save request details', { htmlLength: html.length, hasContent: !!html.trim() });\n \n if (!html.trim()) {\n debugLog('Empty HTML content rejected');\n return c.json({ msg: 'Empty HTML content not allowed', msgType: 'error' }, 400);\n }\n \n await saveHTML(html);\n debugLog('HTML saved successfully');\n return c.json({ msg: 'Saved' });\n});\n\n// Version history endpoint - requires admin session\napp.get('/versions', requireAdmin, async (c) => {\n const versions = await getVersionHistory();\n \n let html = `\n\n\n \n \n Version History\n \n\n\n ← Back to App\n

Version History

`;\n \n if (versions.length === 0) {\n html += '

No versions found.

';\n } else {\n for (const { version, html: versionHtml } of versions) {\n html += `\n

Version ${version}

${versionHtml.replace(//g, '>')}

`;\n }\n }\n \n html += `\n\n`;\n \n return c.html(html);\n});\n\n// Reset endpoint - DANGEROUS - requires admin session\napp.post('/reset-dangerous', requireAdmin, async (c) => {\n debugLog('Reset endpoint accessed');\n \n try {\n // Clear the main HTML document by resetting to default\n await blob.set(getAppKey(), DEFAULT_HTML);\n \n // Clear all version history\n const versionCountKey = getVersionCountKey();\n let versionCount = 0;\n try {\n const countStr = await blob.get(versionCountKey);\n versionCount = countStr ? parseInt(countStr, 10) : 0;\n } catch {\n // No versions to clear\n }\n \n // Delete all version entries\n for (let i = 1; i <= versionCount; i++) {\n try {\n await blob.delete(getVersionKey(i));\n } catch {\n // Skip if version doesn't exist\n }\n }\n \n // Reset version counter\n await blob.delete(versionCountKey);\n \n debugLog('HTML state reset successfully', { clearedVersions: versionCount });\n \n return c.json({ \n msg: `HTML state reset successfully. Cleared ${versionCount} versions.`,\n msgType: 'success'\n });\n \n } catch (error) {\n console.error('Error resetting HTML state:', error);\n debugLog('Error during reset', { error: error.message });\n \n return c.json({ \n msg: 'Failed to reset HTML state', \n msgType: 'error' \n }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[192],"files",[150,171,181,190],"counts",{"_205":32,"_206":161,"_207":161,"_208":209},"pulls","branches","forks","envVars",3,"contents",[212,215,218,221],{"_103":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":22,"_105":213,"_99":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_98":214},["D",1757019429951],[152],{"_103":172,"_95":173,"_153":174,"_155":-5,"_156":138,"_157":175,"_159":176,"_105":216,"_99":32,"_162":163,"_164":178,"_166":22,"_167":-5,"_98":217},["D",1757010196867],[173],{"_103":182,"_95":183,"_153":184,"_155":-5,"_156":138,"_157":100,"_159":22,"_105":219,"_99":186,"_162":163,"_164":187,"_166":22,"_167":-5,"_98":220},["D",1757019563467],[183],{"_103":191,"_95":192,"_153":193,"_155":-5,"_156":138,"_157":194,"_159":22,"_105":222,"_99":196,"_162":197,"_164":198,"_166":22,"_167":96,"_98":223},["D",1757019482296],[192],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_99":100,"_98":72,"_101":232,"_148":237,"_201":250,"_163":-7,"_210":251,"_260":-5,"_261":22,"_262":-5,"_263":-5,"_264":-5,"_265":266},{"_103":104,"_95":96,"_105":233,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":234,"_132":235,"_135":236,"_147":22},["D",1756989916174],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_103":138,"_139":104,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[238,241,244,247],{"_103":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":22,"_105":160,"_99":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_168":239,"_98":240},[],[152],{"_103":172,"_95":173,"_153":174,"_155":-5,"_156":138,"_157":175,"_159":176,"_105":177,"_99":32,"_162":163,"_164":178,"_166":22,"_167":-5,"_168":242,"_98":243},[],[173],{"_103":182,"_95":183,"_153":184,"_155":-5,"_156":138,"_157":100,"_159":22,"_105":185,"_99":186,"_162":163,"_164":187,"_166":22,"_167":-5,"_168":245,"_98":246},[],[183],{"_103":191,"_95":192,"_153":193,"_155":-5,"_156":138,"_157":194,"_159":22,"_105":195,"_99":196,"_162":197,"_164":198,"_166":22,"_167":96,"_168":248,"_98":249},[],[192],[238,241,244,247],[252,254,256,258],{"_103":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":22,"_105":213,"_99":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_98":253},[152],{"_103":172,"_95":173,"_153":174,"_155":-5,"_156":138,"_157":175,"_159":176,"_105":216,"_99":32,"_162":163,"_164":178,"_166":22,"_167":-5,"_98":255},[173],{"_103":182,"_95":183,"_153":184,"_155":-5,"_156":138,"_157":100,"_159":22,"_105":219,"_99":186,"_162":163,"_164":187,"_166":22,"_167":-5,"_98":257},[183],{"_103":191,"_95":192,"_153":193,"_155":-5,"_156":138,"_157":194,"_159":22,"_105":222,"_99":196,"_162":197,"_164":198,"_166":22,"_167":96,"_98":259},[192],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

panphora

hyperclay