Mini App Starter

Hono + React + Tailwind Starter Project on Val Town

,\n );\n}\n\nexport async function iconImage() {\n return await ogImage(\n

,\n {\n width: 512,\n height: 512,\n },\n );\n}\n\n//////////\n\nexport async function ogImage(body, options = {}) {\n const svg = await satori(\n body,\n {\n width: 945,\n height: 630,\n ...options,\n fonts: await loadFonts(),\n loadAdditionalAsset: async (code, segment) => {\n console.log(\"loadAdditionalAsset\", code, segment);\n if (code === \"emoji\") {\n const unicode = segment.codePointAt(0).toString(16).toUpperCase();\n return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode));\n }\n return \"\";\n },\n },\n );\n return await render(svg);\n}\n\nconst loadFonts = async () => {\n const fontsConfig = [\n { name: \"Inter\", weight: 400, fontFile: \"Inter-Regular.otf\" },\n // { name: \"Inter\", weight: 500, fontFile: \"Inter-Medium.otf\" },\n { name: \"Inter\", weight: 600, fontFile: \"Inter-SemiBold.otf\" },\n // { name: \"Inter\", weight: 700, fontFile: \"Inter-Bold.otf\" },\n ];\n const fontPromises = fontsConfig.map(async (font) => {\n const fontUrl = \"https://cdn.jsdelivr.net/npm/@tamagui/font-inter@1.108.3/otf/\" + font.fontFile;\n const fontArrayBuf = await fetch(fontUrl).then((res) => res.arrayBuffer());\n return { name: font.name, data: fontArrayBuf, weight: font.weight };\n });\n const fonts: any = await Promise.all(fontPromises);\n\n return fonts;\n};\n\nconst loadEmoji = (code) => {\n // const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`\n const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`;\n return fetch(api).then((r) => r.text());\n};\n\nconst base64Icon = (svg: any) => {\n if (!svg) return undefined;\n svg = svg.replace(\"stroke=\\\"currentColor\\\"\", \"stroke=\\\"white\\\"\");\n const base64 = Buffer.from(svg).toString(\"base64\");\n // console.log('getIconDataUrl', name, svg, base64)\n return `data:image/svg+xml;base64,${base64}`;\n};",[],[99,221],{"_103":228,"_95":229,"_155":230,"_157":182,"_158":137,"_159":142,"_160":161,"_105":231,"_100":32,"_163":232,"_165":233,"_166":22,"_167":-5,"_168":234,"_98":235},"f09726a8-3513-11f0-83f7-9e149126039e","index.tsx","203f0512-b09d-42e9-af72-92a45fcdbe77",["D",1747702020527],"http","/** @jsxImportSource npm:hono/jsx */\nimport { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nimport * as db from \"./db.ts\";\nimport { embedMetadata, handleFarcasterEndpoints, name } from \"./farcaster.ts\";\nimport { handleImageEndpoints } from \"./image.tsx\";\n\nconst app = new Hono();\n\nhandleImageEndpoints(app);\nhandleFarcasterEndpoints(app);\n\napp.get(\"/testing\", c =>\n c.json({\n hello: \"world\",\n baseUrl: c.req.url.replace(c.req.path, \"\"),\n \"import.meta.url\": import.meta.url,\n }));\n\napp.get(\"/api/counter/get\", async c => c.json(await db.get(\"counter\")));\napp.get(\"/api/counter/increment\", async c => c.json(await db.set(\"counter\", (await db.get(\"counter\") || 0) + 1)));\n\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/\", async c => {\n const url = new URL(c.req.url);\n const path = c.req.url?.replace(url.origin, \"\");\n return c.html(generateHtml(url.origin, path));\n});\napp.get(\"*\", async c => {\n const url = new URL(c.req.url);\n const path = c.req.url?.replace(url.origin, \"\");\n return c.html(generateHtml(url.origin, path));\n});\n\nfunction generateHtml(baseUrl: string, path: string = \"/\"): any {\n return (\n \n \n {name}\n \n \n \n \n \n \n \n

\n {/* */}\n \n \n \n );\n}\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[99,229],[99],{"_103":238,"_95":239,"_155":240,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":241,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":242,"_98":319},"f097494e-3513-11f0-83f7-9e149126039e","frontend","571e2870-447f-4dcd-89b0-613e5ce1bb60",["D",1747702020527],[243,274,289,304,312],{"_103":244,"_95":245,"_155":246,"_157":240,"_158":137,"_159":142,"_160":161,"_105":247,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":248,"_98":273},"f0973ad0-3513-11f0-83f7-9e149126039e","components","7977de33-1b8f-4c3a-8a2a-16b19efc7bca",["D",1747702020527],[249,257,265],{"_103":250,"_95":251,"_155":252,"_157":246,"_158":137,"_159":142,"_160":161,"_105":253,"_100":32,"_163":199,"_165":254,"_166":22,"_167":-5,"_168":255,"_98":256},"f0972b58-3513-11f0-83f7-9e149126039e","Example.tsx","7c554e7b-db18-41a3-8625-febd4857d9ec",["D",1747702020527],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nimport { ShareButton } from \"./ui.tsx\";\n\nexport function Example() {\n const [context, setContext] = useState();\n useEffect(() => {\n fcsdk.actions.ready();\n fcsdk.context.then(setContext);\n }, []);\n\n const onShare = () => {\n if (!context) return;\n const text = `Check out Spaces mini app by @moe!\\n`;\n fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] });\n };\n\n return (\n

Mini App Starter

\n {context && }\n

Farcaster Mini App Starter Project on Val Town

\n );\n}",[],[239,245,251],{"_103":258,"_95":259,"_155":260,"_157":246,"_158":137,"_159":142,"_160":161,"_105":261,"_100":32,"_163":199,"_165":262,"_166":22,"_167":-5,"_168":263,"_98":264},"f0972ed2-3513-11f0-83f7-9e149126039e","FarcasterMiniApp.tsx","60513fa5-d692-47d2-bca4-d1ea43ff3235",["D",1747702020527],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\nimport { formatAddress, formatJSON, MonoButtonWithStatus, Section } from \"./ui.tsx\";\n\nexport function FarcasterMiniApp() {\n const [context, setContext] = useState();\n const [walletAddresses, setWalletAddresses] = useState();\n const [contextExpanded, setContextExpanded] = useState(false);\n\n useEffect(() => {\n fcsdk.actions.ready();\n fcsdk.context.then(setContext);\n fcsdk.wallet?.ethProvider?.request({ method: \"eth_requestAccounts\" }).then(setWalletAddresses).catch(console.log);\n }, []);\n\n console.log(fcsdk, context);\n\n return (\n

\n {context && (\n <>\n {context?.user?.fid && (\n

User

{context?.user?.username}

{context?.user?.fid}

\n )}\n\n {walletAddresses?.length > 0 && (\n

Wallet

{formatAddress(walletAddresses[0])}

\n\n

\n \n fcsdk.wallet?.ethProvider?.request({\n method: \"eth_chainId\",\n })}\n >\n chainId\n \n \n fcsdk.wallet?.ethProvider?.request({\n method: \"wallet_switchEthereumChain\",\n params: [{ chainId: \"0x2105\" }],\n })}\n >\n switchChain (base)\n \n \n fcsdk.wallet?.ethProvider?.request({\n method: \"eth_sendTransaction\",\n params: [{\n from: walletAddresses[0],\n to: \"0x5F77DBc7686327D3BF6eC1887E5a3AdA0aE60841\",\n value: \"0x\" + (100000000000000).toString(16),\n }],\n })}\n >\n sendTransaction\n \n

\n )}\n\n

sdk.actions

\n fcsdk.actions.viewProfile({ fid: context.user.fid })}>\n viewProfile\n \n fcsdk.actions.composeCast({ text: \"Hello\" })}>\n composeCast\n \n fcsdk.actions.openUrl(\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\")}\n >\n openUrl\n \n fcsdk.actions.openUrl(\"https://warpcast.com/~/compose\")}>\n openUrl (warpcast)\n \n fcsdk.actions.setPrimaryButton({ text: \"Primary Button\" })}>\n setPrimaryButton\n \n fcsdk.actions.addFrame()}>addFrame\n fcsdk.actions.signIn({})}>signIn\n fcsdk.actions.close()}>close\n

sdk.experimental

\n \n fcsdk.experimental.swapToken({\n sellToken: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n buyToken: \"eip155:8453/native\",\n sellAmount: \"3000000\",\n })}\n >\n swapToken\n \n \n fcsdk.experimental.sendToken({\n token: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n amount: \"500000\",\n recipientFid: 2073,\n })}\n >\n sendToken\n \n \n fcsdk.experimental.viewToken({\n token: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n })}\n >\n viewToken\n \n

\n\n

sdk.context

setContextExpanded(!contextExpanded)}>\n {contextExpanded ? \"▲\" : \"▼\"}\n

\n\n {contextExpanded && (\n

\n {formatJSON(context)}\n

\n )}\n

\n \n )}\n\n {!context && (\n

Open this web app in Warpcast to see the Mini App.

\n )}\n

\n );\n}",[],[239,245,259],{"_103":266,"_95":267,"_155":268,"_157":246,"_158":137,"_159":142,"_160":161,"_105":269,"_100":32,"_163":199,"_165":270,"_166":22,"_167":-5,"_168":271,"_98":272},"f09735f8-3513-11f0-83f7-9e149126039e","ui.tsx","543731a3-e744-43ad-8807-fd794f9aaa1f",["D",1747702020527],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { ArrowLeft, Share } from \"https://esm.sh/lucide-react\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nexport function Section({ children, ...props }: any) {\n const sectionClass = `p-5 rounded-3xl bg-neutral-400/15 ${props.className || \"\"}`;\n return

{children}

;\n}\n\nexport const Input = ({ ...props }) => {\n let sizeStyles = \"text-md px-3 py-1\";\n if (props.sm || props.size == \"sm\") sizeStyles = \"text-sm px-2 py-1\";\n if (props.lg || props.size == \"lg\") sizeStyles = \"text-lg px-3 py-2\";\n const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm \n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\tplaceholder:text-neutral-500 placeholder:opacity-50 disabled:opacity-50 disabled:bg-neutral-200/70 dark:disabled:bg-neutral-800/70\n\t${sizeStyles}\n\t${props.className || \"\"}\n\t`;\n\n return ;\n};\n\nexport const TextArea = ({ ...props }) => {\n const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\tplaceholder:text-neutral-500 placeholder:opacity-50 \n\t${props.className || \"\"}\n\t`;\n\n return

;\n};\n\nexport const Select = ({ ...props }) => {\n  const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\t${props.className || \"\"}\n\t`;\n\n  return <select {...props} className={className} />;\n};\n\nexport const Checkbox = ({ label, ...props }) => {\n  const className = `\n\th-4 w-4 rounded-xl bg-inherit text-neutral-700\n\tborder border-neutral-400 dark:border-neutral-600  focus:ring-neutral-700 dark:focus:ring-neutral-300 \n\txfocus:ring-0 xfocus:outline-red-500 focus:ring-offset-transparent focus:ring-offset-0\n\t${props.className || \"\"}\n\t`;\n\n  return (\n    <div className=\"relative flex gap-x-2\">\n      <div className=\"flex  items-center\">\n        <input type=\"checkbox\" {...props} className={className} />\n      </div>\n      <div className=\"text-sm flex  items-center\">\n        <label htmlFor={props.id} className={props?.checked ? \"font-medium\" : \"opacity-50\"}>\n          {label}\n        </label>\n      </div>\n    </div>\n  );\n};\n\nexport const Button = ({ ...props }) => {\n  let sizeStyles = \"text-md px-3 py-1\";\n  if (props.sm || props.size == \"sm\") sizeStyles = \"text-sm px-2 py-1\";\n  if (props.lg || props.size == \"lg\") sizeStyles = \"text-lg px-4 py-2\";\n  let variantStyles =\n    \"bg-neutral-900 border border-transparent dark:bg-neutral-100 text-neutral-100 dark:text-neutral-900 \";\n  if (props.variant === \"outline\") {\n    variantStyles =\n      \"bg-transparent border border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100\";\n  }\n\n  const className = `\n\tflex flex-row justify-center items-center   rounded-xl font-semibold \n\t${variantStyles}\n\tshadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  \n\topacity-95 hover:opacity-100 disabled:opacity-50\n\t${sizeStyles}\n\t${props.className || \"\"}\n\t`;\n\n  if (props.href && !props.disabled) return <a {...props} className={className} />;\n  return <button {...props} className={className} />;\n};\n\n// export function Input(props: any) {\n//   const inputClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <input class={inputClass} {...props} />;\n// }\n\n// export function Button(props: any) {\n//   const buttonClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <button class={buttonClass} {...props} />;\n// }\n\nexport function MonoButton(props: any) {\n  return (\n    <Button {...props}>\n      <div class=\"font-mono text-sm font-normal\">{props.children}</div>\n    </Button>\n  );\n}\n\nexport function MonoButtonWithStatus(props: any) {\n  const [status, setStatus] = useState<any>();\n  const handleClick = async () => {\n    try {\n      setStatus(\"...\");\n      const result = await props.onClick?.();\n      setStatus(formatJSON(result));\n    } catch (err) {\n      console.error(err);\n      setStatus(\"Error: \" + err);\n    }\n  };\n\n  return (\n    <div>\n      <MonoButton {...props} onClick={handleClick} />\n      {status && <div class={\"mt-2 font-mono text-xs opacity-50 whitespace-pre-wrap break-all\"}>{status}</div>}\n    </div>\n  );\n}\n\nexport function formatJSON(json: any) {\n  return JSON.stringify(json, null, 2);\n}\n\nexport const shorten = (string, start, end) => {\n  return string.substring(0, start) + \"…\" + string.substring(string.length - end);\n};\n\nexport const formatAddress = (address) => {\n  if (!address) return \"\";\n  if (address.length < 20) return address;\n  return shorten(address, 6, 4);\n};\n\nexport function BackButton({}) {\n  return <ArrowLeft className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={() => window.location.href = \"/\"} />;\n}\n\nexport function ShareButton({ onClick }) {\n  return <Share className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={onClick} />;\n}",[],[239,245,267],[239,245],{"_103":275,"_95":276,"_155":277,"_157":240,"_158":137,"_159":142,"_160":161,"_105":278,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":279,"_98":288},"f0973e0e-3513-11f0-83f7-9e149126039e","screens","5f487fee-89f1-4aef-a309-af35dadb9462",["D",1747702020527],[280],{"_103":281,"_95":282,"_155":283,"_157":277,"_158":137,"_159":142,"_160":161,"_105":284,"_100":32,"_163":199,"_165":285,"_166":22,"_167":-5,"_168":286,"_98":287},"f0973c92-3513-11f0-83f7-9e149126039e","Home.tsx","9f9c6644-4756-42b3-9bec-8c0886aca6af",["D",1747702020527],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useQuery } from \"https://esm.sh/@tanstack/react-query@5\";\nimport { LoaderCircle, Mic, MicOff } from \"https://esm.sh/lucide-react\";\nimport { NavLink, Route, Routes, useNavigate, useParams } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@19\";\n\nimport { Button, Input, Section } from \"../components/ui.tsx\";\nimport { fetchUsersById } from \"../util/neynar.ts\";\n\nexport function Home() {\n  return (\n    <div class=\"p-5 mb-8\">\n    </div>\n  );\n}",[],[239,276,282],[239,276],{"_103":290,"_95":291,"_155":292,"_157":240,"_158":137,"_159":142,"_160":161,"_105":293,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":294,"_98":303},"f097432c-3513-11f0-83f7-9e149126039e","util","2258a432-fcbf-4cbb-bd78-536364a1aa67",["D",1747702020527],[295],{"_103":296,"_95":297,"_155":298,"_157":292,"_158":137,"_159":142,"_160":161,"_105":299,"_100":32,"_163":199,"_165":300,"_166":22,"_167":-5,"_168":301,"_98":302},"f097400c-3513-11f0-83f7-9e149126039e","neynar.ts","27779810-6e0e-4c5e-9044-5334a556db91",["D",1747702020527],"const baseUrl = \"https://api.neynar.com/v2/farcaster/\";\n\nexport async function fetchNeynarGet(path: string) {\n  const res = await fetch(baseUrl + path, {\n    method: \"GET\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n      \"x-neynar-experimental\": \"true\",\n      \"x-api-key\": \"NEYNAR_API_DOCS\",\n    },\n  });\n  const json = await res.json();\n  return json;\n}\n\nexport function fetchUser(username: string) {\n  return fetchNeynarGet(`user/by_username?username=${username}`).then(r => r.user);\n}\nexport function fetchUsersById(fids: string) {\n  return fetchNeynarGet(`user/bulk?fids=${fids}`).then(r => r.users);\n}\n\nexport function fetchUserFeed(fid: number) {\n  return fetchNeynarGet(\n    `feed?feed_type=filter&filter_type=fids&fids=${fid}&with_recasts=false&with_replies=false&limit=100&cursor=`,\n  ).then(r => r.casts);\n}\n\nexport function fetchChannel(channelId: string) {\n  return fetchNeynarGet(`channel?id=${channelId}`).then(r => r.channel);\n}\n\nexport function fetchChannelFeed(channelId: string) {\n  return fetchNeynarGet(\n    `feed/channels?channel_ids=${channelId}&with_recasts=false&limit=100`,\n  ).then(r => r.casts);\n}\n\nexport function fetchChannelsFeed(channelIds: array) {\n  return fetchNeynarGet(\n    `feed/channels?channel_ids=${channelIds.join(\",\")}&with_recasts=false&limit=100`,\n  ).then(r => r.casts);\n}",[],[239,291,297],[239,291],{"_103":305,"_95":306,"_155":307,"_157":240,"_158":137,"_159":142,"_160":161,"_105":308,"_100":32,"_163":199,"_165":309,"_166":22,"_167":-5,"_168":310,"_98":311},"f09744c6-3513-11f0-83f7-9e149126039e","App.tsx","d214b5ee-9992-4a78-822e-a357571f16b2",["D",1747702020527],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useQuery } from \"https://esm.sh/@tanstack/react-query@5\";\nimport { NavLink, Route, Routes } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nimport { Example } from \"./components/Example.tsx\";\nimport { FarcasterMiniApp } from \"./components/FarcasterMiniApp.tsx\";\nimport { Button, Section } from \"./components/ui.tsx\";\nimport { fetchNeynarGet } from \"./util/neynar.ts\";\n\nexport function App() {\n  const navLinks = [\n    { name: \"Farcaster SDK\", path: \"/\" },\n    { name: \"Database\", path: \"/db\" },\n    { name: \"About\", path: \"/about\" },\n  ];\n\n  return (\n    <div>\n      <Example />\n\n      <nav className=\"flex gap-4 m-5 my-6\">\n        {navLinks.map((link) => (\n          <NavLink\n            key={link.path}\n            to={link.path}\n            className={({ isActive }) => \"text-sm uppercase \" + (isActive ? \"border-b border-current\" : \"opacity-50\")}\n          >\n            {link.name}\n          </NavLink>\n        ))}\n      </nav>\n\n      <Routes>\n        <Route path=\"/\" element={<FarcasterMiniApp />} />\n        <Route path=\"/db\" element={<Database />} />\n        <Route path=\"/about\" element={<About />} />\n        <Route path=\"/neynar\" element={<Neynar />} />\n      </Routes>\n    </div>\n  );\n}\n\nfunction About() {\n  return (\n    <Section className=\"flex flex-col items-start gap-3 m-5\">\n      {/* <h2 className=\"\">Features:</h2> */}\n      <div className=\"opacity-50\">\n        <div className=\"\">✷ Hono + React + Tailwind</div>\n        <div className=\"\">✷ React Router + React Query</div>\n        <div className=\"\">✷ Built-in database (blob storage)</div>\n        <div className=\"\">✷ Farcaster mini app manifest + webhook + embed metadata</div>\n        <div className=\"\">✷ Farcaster notifications (storing tokens, sending recurring notifications, ...)</div>\n        <div className=\"\">✷ Neynar API integration for Farcaster data</div>\n        <div className=\"\">✷ Hosted on Val Town (instant deployments on save)</div>\n        <div className=\"\">\n          ✷ Source Code:{\" \"}\n          <a href=\"https://www.val.town/x/moe/MiniAppStarter\" target=\"_blank\" className=\"underline\">\n            val.town/x/moe/MiniAppStarter\n          </a>\n        </div>\n      </div>\n    </Section>\n  );\n}\n\nfunction Database() {\n  const queryFn = () => fetch(\"/api/counter/get\").then((r) => r.json());\n  const { data, refetch } = useQuery({ queryKey: [\"counter\"], queryFn });\n  return (\n    <Section className=\"flex flex-col items-start gap-3 m-5\">\n      {/* <h2 className=\"font-semibold\">Database Example</h2> */}\n      <div className=\"\">Counter value: {data}</div>\n      <Button variant=\"outline\" onClick={() => fetch(\"/api/counter/increment\").then(refetch)}>\n        Increment\n      </Button>\n    </Section>\n  );\n}\n\nfunction Neynar() {\n  useEffect(() => {\n    fetchNeynarGet(\"user/by_username?username=moe\").then(console.log).catch(console.error);\n  }, []);\n\n  return <h2 className=\"m-5\">Neynar page</h2>;\n}",[],[239,306],{"_103":313,"_95":229,"_155":314,"_157":240,"_158":137,"_159":142,"_160":161,"_105":315,"_100":32,"_163":199,"_165":316,"_166":22,"_167":-5,"_168":317,"_98":318},"f09747a0-3513-11f0-83f7-9e149126039e","11cb5b01-02fc-464c-9a5e-ffed934103da",["D",1747702020527],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { QueryClient, QueryClientProvider } from \"https://esm.sh/@tanstack/react-query@5\";\nimport { createRoot } from \"https://esm.sh/react-dom@19/client\";\nimport { BrowserRouter } from \"https://esm.sh/react-router@7\";\n\nimport { App } from \"./App.tsx\";\n\nconst queryClient = new QueryClient();\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(\n  <BrowserRouter>\n    <QueryClientProvider client={queryClient}>\n      <App />\n    </QueryClientProvider>\n  </BrowserRouter>,\n);",[],[239,229],[239],{"_103":321,"_95":322,"_155":323,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":324,"_100":32,"_163":175,"_165":325,"_166":22,"_167":-5,"_168":326,"_98":327},"f0974afc-3513-11f0-83f7-9e149126039e",".vtignore","d307ffc2-823b-4dce-9cc2-1598581ba013",["D",1747702020527],".git\n.DS_Store\nnode_modules\nvendor",[],[322],{"_103":329,"_95":330,"_155":331,"_157":-5,"_158":137,"_159":332,"_160":161,"_105":333,"_100":142,"_163":175,"_165":334,"_166":22,"_167":-5,"_168":335,"_98":336},"46526774-3514-11f0-acb7-9e149126039e","README.md","4e1546e4-57f0-44ba-8203-8a22f0f38f03",4,["D",1747702164383],"# Luma Events Calendar with Townie Authentication\n\nThis Val Town function creates a calendar-style page displaying upcoming Luma events with Farcaster authentication via Townie.\n\n## Features\n\n- **Farcaster Authentication**: Uses Townie to authenticate users via their Farcaster identity\n- **Event Calendar**: Displays upcoming events in a modern, responsive calendar layout\n- **RSVP Integration**: Provides direct links to RSVP on Luma, with user information pre-filled when available\n- **Responsive Design**: Looks great on both desktop and mobile devices\n\n## How It Works\n\n1. When a user visits the page, they are prompted to log in with their Farcaster account if not already authenticated\n2. After authentication, they see a calendar of upcoming Luma events\n3. Each event displays:\n   - Title\n   - Date and time\n   - Description\n   - RSVP button linking to the Luma event page\n4. The RSVP links are pre-filled with the user's name and email when available from their Farcaster profile\n\n## Technical Details\n\n- Built with vanilla TypeScript and HTML/CSS\n- Uses Townie for Farcaster authentication\n- Currently uses hardcoded event data (can be replaced with an API integration)\n- Responsive design that works on all device sizes\n\n## Future Improvements\n\n- Integrate with Luma API to fetch real events\n- Add filtering and search capabilities\n- Implement calendar view toggle (list/grid/month view)\n- Add notifications for upcoming events",[],[330],{"_103":338,"_95":339,"_155":340,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":341,"_100":32,"_163":175,"_165":342,"_166":22,"_167":-5,"_168":343,"_98":344},"f0975196-3513-11f0-83f7-9e149126039e","TODO.txt","02e56f18-511b-4e16-9d16-6d4004d08cba",["D",1747702020527],"minting",[],[339],{"_103":346,"_95":347,"_155":348,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":349,"_100":32,"_163":175,"_165":350,"_166":22,"_167":-5,"_168":351,"_98":352},"f097543e-3513-11f0-83f7-9e149126039e","deno.json","6815d157-e4a5-4f5e-8759-f80257e0fcf0",["D",1747702020527],"{\n  \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n  \"lock\": false,\n  \"compilerOptions\": {\n    \"noImplicitAny\": false,\n    \"strict\": false,\n    \"types\": [\n      \"https://www.val.town/types/valtown.d.ts\"\n    ],\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"dom.asynciterable\",\n      \"deno.ns\",\n      \"deno.unstable\"\n    ]\n  },\n  \"lint\": {\n    \"files\": {\n      \"include\": [\n        \"deno:/https/esm.town/**/*\"\n      ]\n    },\n    \"rules\": {\n      \"exclude\": [\n        \"no-explicit-any\"\n      ]\n    }\n  },\n  \"node_modules_dir\": false,\n  \"experimental\": {\n    \"unstable-node-globals\": true,\n    \"unstable-temporal\": true,\n    \"unstable-worker-options\": true,\n    \"unstable-sloppy-imports\": true\n  }\n}",[],[347],{"_103":354,"_95":355,"_155":356,"_157":-5,"_158":137,"_159":357,"_160":161,"_105":358,"_100":142,"_163":232,"_165":359,"_166":22,"_167":-5,"_168":360,"_98":361},"347d0f7c-3514-11f0-a7b9-9e149126039e","index.ts","2f2c6e82-3514-11f0-ac8c-9e149126039e",3,["D",1747702134466],"import { serve } from \"https://esm.sh/@hono/node-server@1.1.1\";\nimport { Townie } from \"https://esm.town/v/townie/townie\";\n\n// Initialize Townie for authentication\nconst townie = new Townie();\n\n// Hardcoded Luma events\nconst lumaEvents = [\n  {\n    id: \"event1\",\n    title: \"Web3 Developer Meetup\",\n    date: \"2023-12-15T18:00:00Z\",\n    description: \"Join us for an evening of discussions about the latest in web3 development.\",\n    lumaUrl: \"https://lu.ma/web3devmeetup\"\n  },\n  {\n    id: \"event2\",\n    title: \"Farcaster Community Hangout\",\n    date: \"2023-12-20T19:30:00Z\",\n    description: \"Monthly community hangout for Farcaster users and developers.\",\n    lumaUrl: \"https://lu.ma/farcasterhangout\"\n  },\n  {\n    id: \"event3\",\n    title: \"Crypto Art Exhibition\",\n    date: \"2023-12-28T17:00:00Z\",\n    description: \"Virtual exhibition showcasing the latest in crypto and NFT art.\",\n    lumaUrl: \"https://lu.ma/cryptoart\"\n  }\n];\n\n// Format date for display\nfunction formatDate(dateString: string): string {\n  const date = new Date(dateString);\n  return date.toLocaleDateString('en-US', { \n    weekday: 'long',\n    year: 'numeric', \n    month: 'long', \n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit'\n  });\n}\n\n// Generate HTML for an event\nfunction generateEventHTML(event: any, user: any = null): string {\n  const formattedDate = formatDate(event.date);\n  \n  // Create RSVP URL with user info if available\n  let rsvpUrl = event.lumaUrl;\n  if (user) {\n    const userParams = new URLSearchParams();\n    if (user.name) userParams.append('name', user.name);\n    if (user.email) userParams.append('email', user.email);\n    \n    // Append params to URL if we have user data\n    if (userParams.toString()) {\n      rsvpUrl += `?${userParams.toString()}`;\n    }\n  }\n\n  return `\n    <div class=\"event-card\">\n      <h3 class=\"event-title\">${event.title}</h3>\n      <div class=\"event-date\">${formattedDate}</div>\n      <p class=\"event-description\">${event.description}</p>\n      <a href=\"${rsvpUrl}\" target=\"_blank\" class=\"rsvp-button\">RSVP</a>\n    </div>\n  `;\n}\n\n// Generate HTML for the calendar page\nfunction generateCalendarHTML(user: any = null): string {\n  const eventsHTML = lumaEvents.map(event => generateEventHTML(event, user)).join('');\n  \n  const userInfo = user ? `\n    <div class=\"user-info\">\n      <img src=\"${user.pfp || ''}\" alt=\"Profile\" class=\"profile-pic\">\n      <div class=\"user-details\">\n        <p>Welcome, ${user.name || user.username || 'User'}</p>\n        <p class=\"fid\">FID: ${user.fid}</p>\n      </div>\n    </div>\n  ` : '';\n\n  return `\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\">\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n      <title>Luma Events Calendar</title>\n      <style>\n        :root {\n          --primary-color: #5d5fef;\n          --secondary-color: #f0f4f8;\n          --text-color: #333;\n          --light-text: #666;\n          --border-color: #ddd;\n          --hover-color: #4b4dcd;\n        }\n        \n        body {\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;\n          line-height: 1.6;\n          color: var(--text-color);\n          background-color: #f9fafb;\n          margin: 0;\n          padding: 0;\n        }\n        \n        .container {\n          max-width: 800px;\n          margin: 0 auto;\n          padding: 2rem;\n        }\n        \n        header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          margin-bottom: 2rem;\n          padding-bottom: 1rem;\n          border-bottom: 1px solid var(--border-color);\n        }\n        \n        h1 {\n          margin: 0;\n          color: var(--primary-color);\n        }\n        \n        .user-info {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n        }\n        \n        .profile-pic {\n          width: 40px;\n          height: 40px;\n          border-radius: 50%;\n          object-fit: cover;\n        }\n        \n        .user-details p {\n          margin: 0;\n        }\n        \n        .fid {\n          font-size: 0.8rem;\n          color: var(--light-text);\n        }\n        \n        .events-container {\n          display: grid;\n          grid-template-columns: 1fr;\n          gap: 1.5rem;\n        }\n        \n        .event-card {\n          background-color: white;\n          border-radius: 8px;\n          padding: 1.5rem;\n          box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n          border: 1px solid var(--border-color);\n          transition: transform 0.2s ease;\n        }\n        \n        .event-card:hover {\n          transform: translateY(-3px);\n          box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n        }\n        \n        .event-title {\n          margin-top: 0;\n          margin-bottom: 0.5rem;\n          color: var(--primary-color);\n        }\n        \n        .event-date {\n          font-weight: 500;\n          color: var(--light-text);\n          margin-bottom: 1rem;\n        }\n        \n        .event-description {\n          margin-bottom: 1.5rem;\n        }\n        \n        .rsvp-button {\n          display: inline-block;\n          background-color: var(--primary-color);\n          color: white;\n          padding: 0.5rem 1.5rem;\n          border-radius: 4px;\n          text-decoration: none;\n          font-weight: 500;\n          transition: background-color 0.2s ease;\n        }\n        \n        .rsvp-button:hover {\n          background-color: var(--hover-color);\n        }\n        \n        .login-container {\n          text-align: center;\n          padding: 3rem;\n          background-color: white;\n          border-radius: 8px;\n          box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n        }\n        \n        .login-button {\n          display: inline-block;\n          background-color: var(--primary-color);\n          color: white;\n          padding: 0.75rem 2rem;\n          border-radius: 4px;\n          text-decoration: none;\n          font-weight: 500;\n          margin-top: 1rem;\n          transition: background-color 0.2s ease;\n        }\n        \n        .login-button:hover {\n          background-color: var(--hover-color);\n        }\n        \n        @media (min-width: 768px) {\n          .events-container {\n            grid-template-columns: repeat(2, 1fr);\n          }\n        }\n      </style>\n    </head>\n    <body>\n      <div class=\"container\">\n        <header>\n          <h1>Luma Events Calendar</h1>\n          ${userInfo}\n        </header>\n        \n        <div class=\"events-container\">\n          ${eventsHTML}\n        </div>\n      </div>\n    </body>\n    </html>\n  `;\n}\n\n// Generate HTML for the login page\nfunction generateLoginHTML(): string {\n  return `\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\">\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n      <title>Login - Luma Events Calendar</title>\n      <style>\n        :root {\n          --primary-color: #5d5fef;\n          --secondary-color: #f0f4f8;\n          --text-color: #333;\n          --light-text: #666;\n          --border-color: #ddd;\n          --hover-color: #4b4dcd;\n        }\n        \n        body {\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;\n          line-height: 1.6;\n          color: var(--text-color);\n          background-color: #f9fafb;\n          margin: 0;\n          padding: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          min-height: 100vh;\n        }\n        \n        .container {\n          max-width: 500px;\n          width: 90%;\n          padding: 2rem;\n        }\n        \n        .login-container {\n          text-align: center;\n          padding: 3rem;\n          background-color: white;\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n        }\n        \n        h1 {\n          margin-top: 0;\n          color: var(--primary-color);\n        }\n        \n        p {\n          margin-bottom: 2rem;\n          color: var(--light-text);\n        }\n        \n        .login-button {\n          display: inline-block;\n          background-color: var(--primary-color);\n          color: white;\n          padding: 0.75rem 2rem;\n          border-radius: 4px;\n          text-decoration: none;\n          font-weight: 500;\n          transition: background-color 0.2s ease;\n        }\n        \n        .login-button:hover {\n          background-color: var(--hover-color);\n        }\n      </style>\n    </head>\n    <body>\n      <div class=\"container\">\n        <div class=\"login-container\">\n          <h1>Luma Events Calendar</h1>\n          <p>Please log in with your Farcaster account to view upcoming events and RSVP.</p>\n          <a href=\"/auth\" class=\"login-button\">Login with Farcaster</a>\n        </div>\n      </div>\n    </body>\n    </html>\n  `;\n}\n\n// Main handler function\nexport default async function(req: Request): Promise<Response> {\n  const url = new URL(req.url);\n  \n  // Handle authentication route\n  if (url.pathname === '/auth') {\n    return townie.handleRequest(req);\n  }\n  \n  // Check if user is authenticated\n  const user = await townie.getUser(req);\n  \n  if (!user) {\n    // User is not authenticated, show login page\n    return new Response(generateLoginHTML(), {\n      headers: {\n        'Content-Type': 'text/html'\n      }\n    });\n  }\n  \n  // User is authenticated, show calendar page\n  return new Response(generateCalendarHTML(user), {\n    headers: {\n      'Content-Type': 'text/html'\n    }\n  });\n}",[],[355],{"_103":363,"_95":364,"_155":365,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":366,"_100":32,"_163":175,"_165":367,"_166":22,"_167":-5,"_168":368,"_98":369},"76e25ca0-3514-11f0-be18-9e149126039e","luma-events-calendar.md","76e25d54-3514-11f0-be18-9e149126039e",["D",1747702245836],"# Luma Events Calendar with Townie Authentication\n\nThis Val Town function creates a calendar-style page displaying upcoming Luma events with Farcaster authentication via Townie.\n\n## Features\n\n- **Farcaster Authentication**: Uses Townie to authenticate users via their Farcaster identity\n- **Event Calendar**: Displays upcoming events in a modern, responsive calendar layout\n- **RSVP Integration**: Provides direct links to RSVP on Luma, with user information pre-filled when available\n- **Responsive Design**: Looks great on both desktop and mobile devices\n\n## How It Works\n\n1. When a user visits the page, they are prompted to log in with their Farcaster account if not already authenticated\n2. After authentication, they see a calendar of upcoming Luma events\n3. Each event displays:\n   - Title\n   - Date and time\n   - Description\n   - RSVP button linking to the Luma event page\n4. The RSVP links are pre-filled with the user's name and email when available from their Farcaster profile\n\n## Technical Details\n\n- Built with Hono and Townie\n- Uses vanilla TypeScript and HTML/CSS for the UI\n- Currently uses hardcoded event data (can be replaced with an API integration)\n- Responsive design that works on all device sizes\n\n## Implementation Notes\n\n- The function uses Townie for Farcaster authentication\n- Events are currently hardcoded but can be replaced with a Luma API integration\n- The RSVP links automatically include the user's name and email from their Farcaster profile when available\n- The calendar view is responsive and works well on both desktop and mobile devices\n\n## Future Improvements\n\n- Integrate with Luma API to fetch real events\n- Add filtering and search capabilities\n- Implement calendar view toggle (list/grid/month view)\n- Add notifications for upcoming events",[],[364],{"_103":371,"_95":372,"_155":373,"_157":-5,"_158":137,"_159":374,"_160":161,"_105":375,"_100":142,"_163":232,"_165":376,"_166":22,"_167":-5,"_168":377,"_98":378},"6fb1508a-3514-11f0-97cf-9e149126039e","luma-events-calendar.ts","6cde728e-3514-11f0-81f4-9e149126039e",6,["D",1747702233795],"import { Hono } from \"npm:hono\";\nimport { Townie } from \"https://esm.town/v/townie/townie\";\n\n// Initialize Townie for authentication\nconst townie = new Townie();\n\n// Initialize Hono app\nconst app = new Hono();\n\n// Hardcoded Luma events\nconst lumaEvents = [\n  {\n    id: \"event1\",\n    title: \"Web3 Developer Meetup\",\n    date: \"2023-12-15T18:00:00Z\",\n    description: \"Join us for an evening of discussions about the latest in web3 development.\",\n    lumaUrl: \"https://lu.ma/web3devmeetup\"\n  },\n  {\n    id: \"event2\",\n    title: \"Farcaster Community Hangout\",\n    date: \"2023-12-20T19:30:00Z\",\n    description: \"Monthly community hangout for Farcaster users and developers.\",\n    lumaUrl: \"https://lu.ma/farcasterhangout\"\n  },\n  {\n    id: \"event3\",\n    title: \"Crypto Art Exhibition\",\n    date: \"2023-12-28T17:00:00Z\",\n    description: \"Virtual exhibition showcasing the latest in crypto and NFT art.\",\n    lumaUrl: \"https://lu.ma/cryptoart\"\n  }\n];\n\n// Format date for display\nfunction formatDate(dateString: string): string {\n  const date = new Date(dateString);\n  return date.toLocaleDateString('en-US', { \n    weekday: 'long',\n    year: 'numeric', \n    month: 'long', \n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit'\n  });\n}\n\n// Generate HTML for an event\nfunction generateEventHTML(event: any, user: any = null): string {\n  const formattedDate = formatDate(event.date);\n  \n  // Create RSVP URL with user info if available\n  let rsvpUrl = event.lumaUrl;\n  if (user) {\n    const userParams = new URLSearchParams();\n    if (user.name) userParams.append('name', user.name);\n    if (user.email) userParams.append('email', user.email);\n    \n    // Append params to URL if we have user data\n    if (userParams.toString()) {\n      rsvpUrl += `?${userParams.toString()}`;\n    }\n  }\n\n  return `\n    <div class=\"event-card\">\n      <h3 class=\"event-title\">${event.title}</h3>\n      <div class=\"event-date\">${formattedDate}</div>\n      <p class=\"event-description\">${event.description}</p>\n      <a href=\"${rsvpUrl}\" target=\"_blank\" class=\"rsvp-button\">RSVP</a>\n    </div>\n  `;\n}\n\n// Generate HTML for the calendar page\nfunction generateCalendarHTML(user: any = null): string {\n  const eventsHTML = lumaEvents.map(event => generateEventHTML(event, user)).join('');\n  \n  const userInfo = user ? `\n    <div class=\"user-info\">\n      <img src=\"${user.pfp || ''}\" alt=\"Profile\" class=\"profile-pic\">\n      <div class=\"user-details\">\n        <p>Welcome, ${user.name || user.username || 'User'}</p>\n        <p class=\"fid\">FID: ${user.fid}</p>\n      </div>\n    </div>\n  ` : '';\n\n  return `\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\">\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n      <title>Luma Events Calendar</title>\n      <style>\n        :root {\n          --primary-color: #5d5fef;\n          --secondary-color: #f0f4f8;\n          --text-color: #333;\n          --light-text: #666;\n          --border-color: #ddd;\n          --hover-color: #4b4dcd;\n        }\n        \n        body {\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;\n          line-height: 1.6;\n          color: var(--text-color);\n          background-color: #f9fafb;\n          margin: 0;\n          padding: 0;\n        }\n        \n        .container {\n          max-width: 800px;\n          margin: 0 auto;\n          padding: 2rem;\n        }\n        \n        header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          margin-bottom: 2rem;\n          padding-bottom: 1rem;\n          border-bottom: 1px solid var(--border-color);\n        }\n        \n        h1 {\n          margin: 0;\n          color: var(--primary-color);\n        }\n        \n        .user-info {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n        }\n        \n        .profile-pic {\n          width: 40px;\n          height: 40px;\n          border-radius: 50%;\n          object-fit: cover;\n        }\n        \n        .user-details p {\n          margin: 0;\n        }\n        \n        .fid {\n          font-size: 0.8rem;\n          color: var(--light-text);\n        }\n        \n        .events-container {\n          display: grid;\n          grid-template-columns: 1fr;\n          gap: 1.5rem;\n        }\n        \n        .event-card {\n          background-color: white;\n          border-radius: 8px;\n          padding: 1.5rem;\n          box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n          border: 1px solid var(--border-color);\n          transition: transform 0.2s ease;\n        }\n        \n        .event-card:hover {\n          transform: translateY(-3px);\n          box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n        }\n        \n        .event-title {\n          margin-top: 0;\n          margin-bottom: 0.5rem;\n          color: var(--primary-color);\n        }\n        \n        .event-date {\n          font-weight: 500;\n          color: var(--light-text);\n          margin-bottom: 1rem;\n        }\n        \n        .event-description {\n          margin-bottom: 1.5rem;\n        }\n        \n        .rsvp-button {\n          display: inline-block;\n          background-color: var(--primary-color);\n          color: white;\n          padding: 0.5rem 1.5rem;\n          border-radius: 4px;\n          text-decoration: none;\n          font-weight: 500;\n          transition: background-color 0.2s ease;\n        }\n        \n        .rsvp-button:hover {\n          background-color: var(--hover-color);\n        }\n        \n        .login-container {\n          text-align: center;\n          padding: 3rem;\n          background-color: white;\n          border-radius: 8px;\n          box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n        }\n        \n        .login-button {\n          display: inline-block;\n          background-color: var(--primary-color);\n          color: white;\n          padding: 0.75rem 2rem;\n          border-radius: 4px;\n          text-decoration: none;\n          font-weight: 500;\n          margin-top: 1rem;\n          transition: background-color 0.2s ease;\n        }\n        \n        .login-button:hover {\n          background-color: var(--hover-color);\n        }\n        \n        @media (min-width: 768px) {\n          .events-container {\n            grid-template-columns: repeat(2, 1fr);\n          }\n        }\n      </style>\n    </head>\n    <body>\n      <div class=\"container\">\n        <header>\n          <h1>Luma Events Calendar</h1>\n          ${userInfo}\n        </header>\n        \n        <div class=\"events-container\">\n          ${eventsHTML}\n        </div>\n      </div>\n    </body>\n    </html>\n  `;\n}\n\n// Generate HTML for the login page\nfunction generateLoginHTML(): string {\n  return `\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n      <meta charset=\"UTF-8\">\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n      <title>Login - Luma Events Calendar</title>\n      <style>\n        :root {\n          --primary-color: #5d5fef;\n          --secondary-color: #f0f4f8;\n          --text-color: #333;\n          --light-text: #666;\n          --border-color: #ddd;\n          --hover-color: #4b4dcd;\n        }\n        \n        body {\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;\n          line-height: 1.6;\n          color: var(--text-color);\n          background-color: #f9fafb;\n          margin: 0;\n          padding: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          min-height: 100vh;\n        }\n        \n        .container {\n          max-width: 500px;\n          width: 90%;\n          padding: 2rem;\n        }\n        \n        .login-container {\n          text-align: center;\n          padding: 3rem;\n          background-color: white;\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n        }\n        \n        h1 {\n          margin-top: 0;\n          color: var(--primary-color);\n        }\n        \n        p {\n          margin-bottom: 2rem;\n          color: var(--light-text);\n        }\n        \n        .login-button {\n          display: inline-block;\n          background-color: var(--primary-color);\n          color: white;\n          padding: 0.75rem 2rem;\n          border-radius: 4px;\n          text-decoration: none;\n          font-weight: 500;\n          transition: background-color 0.2s ease;\n        }\n        \n        .login-button:hover {\n          background-color: var(--hover-color);\n        }\n      </style>\n    </head>\n    <body>\n      <div class=\"container\">\n        <div class=\"login-container\">\n          <h1>Luma Events Calendar</h1>\n          <p>Please log in with your Farcaster account to view upcoming events and RSVP.</p>\n          <a href=\"/auth\" class=\"login-button\">Login with Farcaster</a>\n        </div>\n      </div>\n    </body>\n    </html>\n  `;\n}\n\n// Handle authentication route\napp.get('/auth', async (c) => {\n  return townie.handleRequest(c.req);\n});\n\n// Main route\napp.get('*', async (c) => {\n  // Check if user is authenticated\n  const user = await townie.getUser(c.req);\n  \n  if (!user) {\n    // User is not authenticated, show login page\n    return c.html(generateLoginHTML());\n  }\n  \n  // User is authenticated, show calendar page\n  return c.html(generateCalendarHTML(user));\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err, c) => {\n  throw err;\n});\n\n// Export the fetch handler for HTTP val\nexport default app.fetch;",[],[372],"files",[152,170,180,185,194,203,211,219,227,237,243,249,257,265,274,280,289,295,304,312,320,328,337,345,353,362,370],"counts",{"_383":32,"_384":142,"_385":32,"_386":32},"pulls","branches","forks","envVars","contents",[389,392,395,398,401,404],{"_103":186,"_95":187,"_155":188,"_157":182,"_158":137,"_159":142,"_160":161,"_105":390,"_100":32,"_163":190,"_165":191,"_166":22,"_167":-5,"_98":391},["D",1747702020527],[99,187],{"_103":195,"_95":196,"_155":197,"_157":182,"_158":137,"_159":142,"_160":161,"_105":393,"_100":32,"_163":199,"_165":200,"_166":22,"_167":-5,"_98":394},["D",1747702020527],[99,196],{"_103":204,"_95":205,"_155":206,"_157":182,"_158":137,"_159":142,"_160":161,"_105":396,"_100":32,"_163":199,"_165":208,"_166":22,"_167":-5,"_98":397},["D",1747702020527],[99,205],{"_103":212,"_95":213,"_155":214,"_157":182,"_158":137,"_159":142,"_160":161,"_105":399,"_100":32,"_163":199,"_165":216,"_166":22,"_167":-5,"_98":400},["D",1747702020527],[99,213],{"_103":220,"_95":221,"_155":222,"_157":182,"_158":137,"_159":142,"_160":161,"_105":402,"_100":32,"_163":199,"_165":224,"_166":22,"_167":-5,"_98":403},["D",1747702020527],[99,221],{"_103":228,"_95":229,"_155":230,"_157":182,"_158":137,"_159":142,"_160":161,"_105":405,"_100":32,"_163":232,"_165":233,"_166":22,"_167":-5,"_98":406},["D",1747702020527],[99,229],{"_103":181,"_95":99,"_155":182,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":408,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":409},["D",1747702020527],[99],"upstreamProject",{"_103":145,"_95":412,"_111":-5,"_112":-5,"_109":110,"_23":413},"MiniAppStarter",{"_93":94,"_129":130},"upstreamBranch",{"_103":140,"_105":416,"_417":418,"_95":43,"_138":145,"_100":142,"_139":419,"_141":420,"_421":422,"_107":-5,"_149":22,"_109":110,"_148":94,"_16":118,"_147":412},["D",1747701993457],"updatedAt",["D",1747701993457],"3219c4d4-059c-11f0-aa46-569c3dd06744",590,"lockfileKey","1747701998477-esm.town_v_purplesquirrelmedia_MiniAppStarter@1-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":429,"_150":434,"_379":516,"_175":517,"_387":519,"_532":533,"_536":161,"_537":-5,"_538":374,"_539":32,"_540":541},{"_103":104,"_95":96,"_105":430,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":431,"_131":432,"_134":433,"_149":22},["D",1747702020527],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":118,"_147":96,"_148":94},[435,441,462,495,498,501,504,507,510,513],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":162,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":436,"_98":440},[437],{"_103":171,"_95":172,"_155":173,"_157":156,"_158":137,"_159":142,"_160":161,"_105":174,"_100":32,"_163":175,"_165":176,"_166":22,"_167":-5,"_168":438,"_98":439},[],[154,172],[154],{"_103":181,"_95":99,"_155":182,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":183,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":442,"_98":461},[443,446,449,452,455,458],{"_103":186,"_95":187,"_155":188,"_157":182,"_158":137,"_159":142,"_160":161,"_105":189,"_100":32,"_163":190,"_165":191,"_166":22,"_167":-5,"_168":444,"_98":445},[],[99,187],{"_103":195,"_95":196,"_155":197,"_157":182,"_158":137,"_159":142,"_160":161,"_105":198,"_100":32,"_163":199,"_165":200,"_166":22,"_167":-5,"_168":447,"_98":448},[],[99,196],{"_103":204,"_95":205,"_155":206,"_157":182,"_158":137,"_159":142,"_160":161,"_105":207,"_100":32,"_163":199,"_165":208,"_166":22,"_167":-5,"_168":450,"_98":451},[],[99,205],{"_103":212,"_95":213,"_155":214,"_157":182,"_158":137,"_159":142,"_160":161,"_105":215,"_100":32,"_163":199,"_165":216,"_166":22,"_167":-5,"_168":453,"_98":454},[],[99,213],{"_103":220,"_95":221,"_155":222,"_157":182,"_158":137,"_159":142,"_160":161,"_105":223,"_100":32,"_163":199,"_165":224,"_166":22,"_167":-5,"_168":456,"_98":457},[],[99,221],{"_103":228,"_95":229,"_155":230,"_157":182,"_158":137,"_159":142,"_160":161,"_105":231,"_100":32,"_163":232,"_165":233,"_166":22,"_167":-5,"_168":459,"_98":460},[],[99,229],[99],{"_103":238,"_95":239,"_155":240,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":241,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":463,"_98":494},[464,476,482,488,491],{"_103":244,"_95":245,"_155":246,"_157":240,"_158":137,"_159":142,"_160":161,"_105":247,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":465,"_98":475},[466,469,472],{"_103":250,"_95":251,"_155":252,"_157":246,"_158":137,"_159":142,"_160":161,"_105":253,"_100":32,"_163":199,"_165":254,"_166":22,"_167":-5,"_168":467,"_98":468},[],[239,245,251],{"_103":258,"_95":259,"_155":260,"_157":246,"_158":137,"_159":142,"_160":161,"_105":261,"_100":32,"_163":199,"_165":262,"_166":22,"_167":-5,"_168":470,"_98":471},[],[239,245,259],{"_103":266,"_95":267,"_155":268,"_157":246,"_158":137,"_159":142,"_160":161,"_105":269,"_100":32,"_163":199,"_165":270,"_166":22,"_167":-5,"_168":473,"_98":474},[],[239,245,267],[239,245],{"_103":275,"_95":276,"_155":277,"_157":240,"_158":137,"_159":142,"_160":161,"_105":278,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":477,"_98":481},[478],{"_103":281,"_95":282,"_155":283,"_157":277,"_158":137,"_159":142,"_160":161,"_105":284,"_100":32,"_163":199,"_165":285,"_166":22,"_167":-5,"_168":479,"_98":480},[],[239,276,282],[239,276],{"_103":290,"_95":291,"_155":292,"_157":240,"_158":137,"_159":142,"_160":161,"_105":293,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":483,"_98":487},[484],{"_103":296,"_95":297,"_155":298,"_157":292,"_158":137,"_159":142,"_160":161,"_105":299,"_100":32,"_163":199,"_165":300,"_166":22,"_167":-5,"_168":485,"_98":486},[],[239,291,297],[239,291],{"_103":305,"_95":306,"_155":307,"_157":240,"_158":137,"_159":142,"_160":161,"_105":308,"_100":32,"_163":199,"_165":309,"_166":22,"_167":-5,"_168":489,"_98":490},[],[239,306],{"_103":313,"_95":229,"_155":314,"_157":240,"_158":137,"_159":142,"_160":161,"_105":315,"_100":32,"_163":199,"_165":316,"_166":22,"_167":-5,"_168":492,"_98":493},[],[239,229],[239],{"_103":321,"_95":322,"_155":323,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":324,"_100":32,"_163":175,"_165":325,"_166":22,"_167":-5,"_168":496,"_98":497},[],[322],{"_103":329,"_95":330,"_155":331,"_157":-5,"_158":137,"_159":332,"_160":161,"_105":333,"_100":142,"_163":175,"_165":334,"_166":22,"_167":-5,"_168":499,"_98":500},[],[330],{"_103":338,"_95":339,"_155":340,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":341,"_100":32,"_163":175,"_165":342,"_166":22,"_167":-5,"_168":502,"_98":503},[],[339],{"_103":346,"_95":347,"_155":348,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":349,"_100":32,"_163":175,"_165":350,"_166":22,"_167":-5,"_168":505,"_98":506},[],[347],{"_103":354,"_95":355,"_155":356,"_157":-5,"_158":137,"_159":357,"_160":161,"_105":358,"_100":142,"_163":232,"_165":359,"_166":22,"_167":-5,"_168":508,"_98":509},[],[355],{"_103":363,"_95":364,"_155":365,"_157":-5,"_158":137,"_159":136,"_160":161,"_105":366,"_100":32,"_163":175,"_165":367,"_166":22,"_167":-5,"_168":511,"_98":512},[],[364],{"_103":371,"_95":372,"_155":373,"_157":-5,"_158":137,"_159":374,"_160":161,"_105":375,"_100":142,"_163":232,"_165":376,"_166":22,"_167":-5,"_168":514,"_98":515},[],[372],[435,437,441,443,446,449,452,455,458,462,464,466,469,472,476,478,482,484,488,491,495,498,501,504,507,510,513],{"_103":181,"_95":99,"_155":182,"_157":-5,"_158":137,"_159":142,"_160":161,"_105":408,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":518},[99],[520,522,524,526,528,530],{"_103":186,"_95":187,"_155":188,"_157":182,"_158":137,"_159":142,"_160":161,"_105":390,"_100":32,"_163":190,"_165":191,"_166":22,"_167":-5,"_98":521},[99,187],{"_103":195,"_95":196,"_155":197,"_157":182,"_158":137,"_159":142,"_160":161,"_105":393,"_100":32,"_163":199,"_165":200,"_166":22,"_167":-5,"_98":523},[99,196],{"_103":204,"_95":205,"_155":206,"_157":182,"_158":137,"_159":142,"_160":161,"_105":396,"_100":32,"_163":199,"_165":208,"_166":22,"_167":-5,"_98":525},[99,205],{"_103":212,"_95":213,"_155":214,"_157":182,"_158":137,"_159":142,"_160":161,"_105":399,"_100":32,"_163":199,"_165":216,"_166":22,"_167":-5,"_98":527},[99,213],{"_103":220,"_95":221,"_155":222,"_157":182,"_158":137,"_159":142,"_160":161,"_105":402,"_100":32,"_163":199,"_165":224,"_166":22,"_167":-5,"_98":529},[99,221],{"_103":228,"_95":229,"_155":230,"_157":182,"_158":137,"_159":142,"_160":161,"_105":405,"_100":32,"_163":232,"_165":233,"_166":22,"_167":-5,"_98":531},[99,229],"upstream",{"_103":140,"_105":534,"_417":535,"_95":43,"_138":145,"_100":142,"_139":419,"_141":420,"_421":422,"_107":-5,"_149":22,"_109":110,"_148":94,"_16":118,"_147":412},["D",1747701993457],["D",1747701993457],"showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]
</article></body></html>