\n \n\n",[],[216,218],"44f6b78e-13c4-11f0-a419-569c3dd06744","favicon.svg","44f6b860-13c4-11f0-a419-569c3dd06744",["D",1744039413996],"",[],[216,226],"5c2f0578-13c4-11f0-b944-569c3dd06744","NotFound.tsx","5c2f0622-13c4-11f0-b944-569c3dd06744","03b7444d-30e6-482b-8b3e-dd6be0702b1b",10,["D",1744039452949],"// @jsxImportSource https://esm.sh/react@18.2.0\nimport { Link } from \"https://esm.sh/react-router-dom@7.0.0-rc.0?deps=react@18.2.0,react-dom@18.2.0\";\n\nexport function NotFound() {\n return (\n

Link Not Found

\n The short link you're looking for doesn't exist or has been removed.\n

\n \n Go to Homepage\n \n

\n );\n}",[],[216,241,233],"components","57b8d442-13c4-11f0-856e-569c3dd06744","LinkList.tsx","57b8d532-13c4-11f0-856e-569c3dd06744",9,["D",1744039445464],"// @jsxImportSource https://esm.sh/react@18.2.0\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Link } from \"../../shared/types.ts\";\n\ninterface LinkListProps {\n links: Link[];\n}\n\nexport function LinkList({ links }: LinkListProps) {\n const [copiedId, setCopiedId] = useState(null);\n \n if (links.length === 0) {\n return (\n

No links created yet. Create your first link above!

\n );\n }\n\n const copyToClipboard = async (shortId: string) => {\n const shortUrl = `${window.location.origin}/${shortId}`;\n \n try {\n await navigator.clipboard.writeText(shortUrl);\n setCopiedId(shortId);\n \n // Reset the copied state after 2 seconds\n setTimeout(() => {\n setCopiedId(null);\n }, 2000);\n } catch (err) {\n console.error(\"Failed to copy:\", err);\n }\n };\n\n const formatDate = (timestamp: number) => {\n return new Date(timestamp).toLocaleString();\n };\n\n return (\n

Your Links

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n {links.map((link) => (\n \n \n \n \n \n \n \n ))}\n \n

\n Short URL\n	\n Original URL\n	\n Created\n	\n Clicks\n	\n Actions\n
\n \n {window.location.origin}/{link.shortId}\n \n	\n \n \n {link.originalUrl}\n \n \n	\n {formatDate(link.createdAt)}\n	\n {link.clickCount}\n	\n copyToClipboard(link.shortId)}\n className=\"text-blue-600 hover:text-blue-800\"\n >\n {copiedId === link.shortId ? \"Copied!\" : \"Copy\"}\n \n

\n );\n}",[],[216,241,243],"4ed57a6a-13c4-11f0-b944-569c3dd06744","CreateLink.tsx","4ed57b50-13c4-11f0-b944-569c3dd06744",8,["D",1744039430553],"// @jsxImportSource https://esm.sh/react@18.2.0\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Link } from \"../../shared/types.ts\";\n\ninterface CreateLinkProps {\n onLinkCreated: (link: Link) => void;\n}\n\nexport function CreateLink({ onLinkCreated }: CreateLinkProps) {\n const [url, setUrl] = useState(\"\");\n const [customShortId, setCustomShortId] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [showAdvanced, setShowAdvanced] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n \n if (!url) {\n setError(\"Please enter a URL\");\n return;\n }\n \n setIsLoading(true);\n \n try {\n const response = await fetch(\"/api/links\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n originalUrl: url,\n customShortId: customShortId || undefined,\n }),\n });\n \n const data = await response.json();\n \n if (!response.ok) {\n throw new Error(data.error || \"Failed to create short link\");\n }\n \n if (data.success && data.link) {\n onLinkCreated(data.link);\n setUrl(\"\");\n setCustomShortId(\"\");\n setShowAdvanced(false);\n } else {\n throw new Error(\"Something went wrong\");\n }\n } catch (err) {\n setError(err.message);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Shorten a URL

\n \n

\n \n URL to shorten\n \n setUrl(e.target.value)}\n placeholder=\"https://example.com/very/long/url\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n />\n

\n \n

\n setShowAdvanced(!showAdvanced)}\n className=\"text-sm text-blue-600 hover:text-blue-800\"\n >\n {showAdvanced ? \"Hide advanced options\" : \"Show advanced options\"}\n \n

\n \n {showAdvanced && (\n

\n \n Custom short ID (optional)\n \n setCustomShortId(e.target.value)}\n placeholder=\"custom-name\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Leave empty to generate a random ID\n

\n )}\n \n {error && (\n

\n {error}\n

\n )}\n \n \n {isLoading ? \"Creating...\" : \"Create Short Link\"}\n \n \n

\n );\n}",[],[216,241,251],"6a8bb918-13c4-11f0-886f-569c3dd06744","App.tsx","6a8bb9c2-13c4-11f0-886f-569c3dd06744",11,["D",1744039477049],"// @jsxImportSource https://esm.sh/react@18.2.0\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { \n createBrowserRouter, \n RouterProvider, \n Route, \n createRoutesFromElements,\n Outlet,\n Link as RouterLink,\n useParams,\n useNavigate\n} from \"https://esm.sh/react-router-dom@7.0.0-rc.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { CreateLink } from \"./CreateLink.tsx\";\nimport { LinkList } from \"./LinkList.tsx\";\nimport { NotFound } from \"./NotFound.tsx\";\nimport { Link } from \"../../shared/types.ts\";\n\n// Layout component with header and footer\nfunction Layout() {\n return (\n

\n \n \n Link Shortener\n \n \n

\n \n

\n \n \n

\n );\n}\n\n// Home page component\nfunction HomePage() {\n const [links, setLinks] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(\"\");\n\n const fetchLinks = async () => {\n try {\n setIsLoading(true);\n const response = await fetch(\"/api/links\");\n \n if (!response.ok) {\n throw new Error(\"Failed to fetch links\");\n }\n \n const data = await response.json();\n setLinks(data.links || []);\n } catch (err) {\n setError(\"Failed to load links. Please try again later.\");\n console.error(err);\n } finally {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n fetchLinks();\n }, []);\n\n const handleLinkCreated = (newLink: Link) => {\n setLinks([newLink, ...links]);\n };\n\n return (\n

\n \n \n {isLoading ? (\n

Loading links...

\n ) : error ? (\n

\n {error}\n

\n ) : (\n \n )}\n

\n );\n}\n\n// Redirect component\nfunction RedirectPage() {\n const { shortId } = useParams<{ shortId: string }>();\n const navigate = useNavigate();\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n const checkLink = async () => {\n try {\n if (!shortId) {\n navigate(\"/not-found\");\n return;\n }\n\n const response = await fetch(`/api/links/${shortId}`);\n \n if (!response.ok) {\n navigate(\"/not-found\");\n return;\n }\n \n // If we get here, the backend should have already redirected us\n // This is just a fallback\n setError(\"Redirect failed. Please try again.\");\n } catch (err) {\n setError(\"Something went wrong. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n checkLink();\n }, [shortId, navigate]);\n\n if (isLoading) {\n return (\n

Redirecting...

\n );\n }\n\n if (error) {\n return (\n

\n {error}\n

\n \n Go to Homepage\n \n

\n );\n }\n\n return null;\n}\n\n// Create the router\nconst router = createBrowserRouter(\n createRoutesFromElements(\n }>\n } />\n } />\n } />\n } />\n \n )\n);\n\n// Main App component\nexport function App() {\n return ;\n}",[],[216,241,259],"4ed588de-13c4-11f0-b944-569c3dd06744",["D",1744039430553],[173,174,175,176],[216,241],"41e3a9c6-13c4-11f0-a306-569c3dd06744",["D",1744039408833],[172,177,178,179],[216],"3ea4ecd4-13c4-11f0-bc34-569c3dd06744","3ea4ed92-13c4-11f0-bc34-569c3dd06744","0b20952e-e790-4707-a773-e8c979d5f61c",5,["D",1744039403395],"import { Hono } from \"https://esm.sh/hono@3.12.0\";\nimport { cors } from \"https://esm.sh/hono@3.12.0/cors\";\nimport { serveFile, readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { setupDatabase } from \"./database/migrations.ts\";\nimport { \n createLink, \n getLinkByShortId, \n incrementClickCount, \n getAllLinks \n} from \"./database/queries.ts\";\nimport { CreateLinkRequest } from \"../shared/types.ts\";\n\n// Initialize the app\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(\"Error:\", err);\n throw err;\n});\n\n// Add CORS middleware\napp.use(\"/*\", cors());\n\n// Setup the database on startup\napp.use(\"*\", async (c, next) => {\n try {\n await setupDatabase();\n } catch (error) {\n console.error(\"Database setup error:\", error);\n }\n return next();\n});\n\n// API routes\napp.post(\"/api/links\", async (c) => {\n try {\n const body = await c.req.json() as CreateLinkRequest;\n \n if (!body.originalUrl) {\n return c.json({ success: false, error: \"Original URL is required\" }, 400);\n }\n \n // Validate URL format\n try {\n new URL(body.originalUrl);\n } catch (error) {\n return c.json({ success: false, error: \"Invalid URL format\" }, 400);\n }\n \n const link = await createLink(body.originalUrl, body.customShortId);\n return c.json({ success: true, link });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 400);\n }\n});\n\napp.get(\"/api/links\", async (c) => {\n try {\n const links = await getAllLinks();\n return c.json({ links });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// Redirect route\napp.get(\"/:shortId\", async (c) => {\n const shortId = c.req.param(\"shortId\");\n \n // Skip API routes and static files\n if (shortId.startsWith(\"api\") || shortId.startsWith(\"public\")) {\n return c.next();\n }\n \n try {\n const link = await getLinkByShortId(shortId);\n \n if (!link) {\n // If no link found, serve the frontend with the 404 state\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n }\n \n // Increment click count asynchronously\n incrementClickCount(shortId).catch(console.error);\n \n // Redirect to the original URL\n return new Response(null, {\n status: 302,\n headers: { Location: link.originalUrl }\n });\n } catch (error) {\n console.error(\"Redirect error:\", error);\n return c.text(\"Server error\", 500);\n }\n});\n\n// Serve static files\napp.get(\"/public/*\", (c) => {\n return serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url);\n});\n\n// Serve the frontend for all other routes\napp.get(\"*\", async (c) => {\n try {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n } catch (error) {\n console.error(\"Error serving frontend:\", error);\n return c.text(\"Server error\", 500);\n }\n});\n\n// Export the app for Val Town\nexport default app.fetch;",[],[282,185],"backend","3310d11c-13c4-11f0-a7db-569c3dd06744","queries.ts","3310d1a8-13c4-11f0-a7db-569c3dd06744","c0945900-7eed-4789-b775-8f502181b48b",3,["D",1744039383966],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { LINKS_TABLE } from \"./migrations.ts\";\nimport { Link } from \"../../shared/types.ts\";\nimport { nanoid } from \"https://esm.sh/nanoid@4.0.2\";\n\n// Generate a short ID for the URL\nexport function generateShortId(length = 6): string {\n return nanoid(length);\n}\n\n// Create a new shortened link\nexport async function createLink(originalUrl: string, customShortId?: string): Promise {\n const shortId = customShortId || generateShortId();\n const createdAt = Date.now();\n \n try {\n await sqlite.execute(\n `INSERT INTO ${LINKS_TABLE} (short_id, original_url, created_at) VALUES (?, ?, ?)`,\n [shortId, originalUrl, createdAt]\n );\n \n return {\n id: 0, // SQLite will assign the actual ID\n shortId,\n originalUrl,\n createdAt,\n clickCount: 0\n };\n } catch (error) {\n // Handle duplicate short_id error\n if (error.message.includes('UNIQUE constraint failed')) {\n throw new Error('This short ID is already in use. Please try another one.');\n }\n throw error;\n }\n}\n\n// Get a link by its short ID\nexport async function getLinkByShortId(shortId: string): Promise {\n const result = await sqlite.execute(\n `SELECT id, short_id, original_url, created_at, click_count FROM ${LINKS_TABLE} WHERE short_id = ?`,\n [shortId]\n );\n \n if (result.rows.length === 0) {\n return null;\n }\n \n const row = result.rows[0];\n return {\n id: row[0] as number,\n shortId: row[1] as string,\n originalUrl: row[2] as string,\n createdAt: row[3] as number,\n clickCount: row[4] as number\n };\n}\n\n// Increment the click count for a link\nexport async function incrementClickCount(shortId: string): Promise {\n await sqlite.execute(\n `UPDATE ${LINKS_TABLE} SET click_count = click_count + 1 WHERE short_id = ?`,\n [shortId]\n );\n}\n\n// Get all links\nexport async function getAllLinks(): Promise {\n const result = await sqlite.execute(\n `SELECT id, short_id, original_url, created_at, click_count FROM ${LINKS_TABLE} ORDER BY created_at DESC`\n );\n \n return result.rows.map(row => ({\n id: row[0] as number,\n shortId: row[1] as string,\n originalUrl: row[2] as string,\n createdAt: row[3] as number,\n clickCount: row[4] as number\n }));\n}",[],[282,292,284],"database","2cd51498-13c4-11f0-a750-569c3dd06744","migrations.ts","2cd5156a-13c4-11f0-a750-569c3dd06744",2,["D",1744039373508],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table name with version to allow for schema changes\nexport const LINKS_TABLE = 'link_shortener_links_v1';\n\nexport async function setupDatabase() {\n // Create the links table if it doesn't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${LINKS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n short_id TEXT NOT NULL UNIQUE,\n original_url TEXT NOT NULL,\n created_at INTEGER NOT NULL,\n click_count INTEGER DEFAULT 0\n )\n `);\n \n // Create an index on short_id for faster lookups\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_${LINKS_TABLE}_short_id ON ${LINKS_TABLE} (short_id)\n `);\n}",[],[282,292,294],"2cd51f9c-13c4-11f0-a750-569c3dd06744",["D",1744039373508],[168,169],[282,292],"2cd51dbc-13c4-11f0-a750-569c3dd06744",["D",1744039373508],[167,170],[282],["D",1744038813299],{"_11":12,"_121":70},{"_11":12,"_117":-5,"_69":70,"_31":68,"_118":119,"_120":30},{"_39":88,"_13":16,"_33":36,"_109":74,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":14,"_116":12},"ctx",{"_52":-5,"_140":346,"_347":348,"_349":350,"_351":30,"_352":30,"_353":30,"_354":24,"_355":-5,"_356":-7,"_357":-7,"_358":26,"_359":30,"_360":30,"_361":-5,"_362":30,"_363":30,"_364":30,"_365":-5},"ENV",{"_317":318,"_319":320,"_321":16,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · shared