[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_244":245,"_246":247},"routes/_app.x.$handle.$name",{"_95":94,"_31":44,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":24,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","734bc786-7bda-11f0-918c-0224a6c84d84","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { PreviewCard } from \"./PreviewCard.tsx\";\nimport type { PreviewResponse, PreviewRequest } from \"../../shared/types.ts\";\n\nexport function App() {\n const [url, setUrl] = useState('');\n const [loading, setLoading] = useState(false);\n const [result, setResult] = useState(null);\n const [error, setError] = useState(null);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!url.trim()) return;\n\n setLoading(true);\n setError(null);\n setResult(null);\n\n try {\n const response = await fetch('/api/preview', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ url: url.trim() } as PreviewRequest),\n });\n\n const data: PreviewResponse = await response.json();\n \n if (data.success) {\n setResult(data);\n } else {\n setError(data.error || 'Failed to fetch preview');\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Network error occurred');\n } finally {\n setLoading(false);\n }\n };\n\n const handleExampleUrl = (exampleUrl: string) => {\n setUrl(exampleUrl);\n };\n\n const exampleUrls = [\n 'https://github.com',\n 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',\n 'https://dev.to',\n 'https://stackoverflow.com/questions/11227809/why-is-processing-a-sorted-array-faster-than-processing-an-unsorted-array'\n ];\n\n return (\n

\n OpenGraph Preview Tool\n

\n See how your URLs will appear when shared on social media platforms\n

\n\n

\n \n Enter URL to preview\n \n

\n setUrl(e.target.value)}\n placeholder=\"https://example.com\"\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n disabled={loading}\n />\n \n {loading &&

}\n {loading ? 'Loading...' : 'Preview'}\n \n

\n \n

\n Try these examples:\n {exampleUrls.map((exampleUrl, index) => (\n handleExampleUrl(exampleUrl)}\n className=\"text-sm text-blue-600 hover:text-blue-800 underline\"\n disabled={loading}\n >\n {new URL(exampleUrl).hostname}\n \n ))}\n

\n\n {error && (\n

❌

Error

{error}

\n )}\n\n {result && result.success && result.data && (\n

\n Preview Results\n

\n {result.hasOpenGraph \n ? '✅ OpenGraph tags found and parsed successfully'\n : '⚠️ No OpenGraph tags found - showing fallback preview'\n }\n

\n URL: {result.url}\n

\n\n

\n \n \n \n \n

\n\n {/* Debug information */}\n

\n 🔍 Raw OpenGraph Data (for debugging)\n

\n              {JSON.stringify(result.data, null, 2)}\n

\n )}\n\n

\n This tool fetches and displays OpenGraph metadata from web pages.\n
\n It shows how your content will appear when shared on social media platforms.\n

\n );\n}","createdAt",["D",1755483861582],"branchVersion","branchId","0493d4aa-7bda-11f0-aa5f-0224a6c84d84","id","04935ce6-7bda-11f0-aa5f-0224a6c84d84","og",["D",1755483675829],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","660e611e-30de-4ed3-8449-79507be25f74","pinnedFileId","5811a896-7bda-11f0-b992-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","f4053730-af3b-4f20-9c5e-6d19f910dfd0","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"isOwned",12,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","hrbrmstr","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybTQ2MzZSZEl6dm1wZjZnT1hJM2NGNjFCbWgifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":240,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":241,"_79":242,"_81":243,"_83":24},"tree",[175,177,182,184,185],"files",[175,176,177,178,179,180,181,182,183,184,185],"counts",{"_165":61,"_166":134,"_167":61,"_168":169,"_170":171},"contents",[125,126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":159,"_31":160,"_29":161,"_133":-5,"_40":41,"_39":162,"_135":57,"_37":163,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_26":164},{"_42":153,"_31":154,"_29":155,"_133":-5,"_40":41,"_39":156,"_135":57,"_37":157,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_26":158},{"_42":146,"_31":147,"_29":148,"_133":-5,"_40":41,"_39":149,"_135":57,"_37":150,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_26":152},{"_42":139,"_31":140,"_29":141,"_133":-5,"_40":41,"_39":142,"_135":57,"_37":143,"_13":61,"_33":20,"_35":144,"_23":24,"_137":-5,"_26":145},{"_42":130,"_31":131,"_29":132,"_133":-5,"_40":41,"_39":134,"_135":24,"_37":136,"_13":61,"_33":34,"_35":104,"_23":24,"_137":-5,"_26":138},"0496167a-7bda-11f0-aa5f-0224a6c84d84","main.tsx","04961738-7bda-11f0-aa5f-0224a6c84d84","parentId",1,"latest",["D",1755483675844],"label",[131],"4a3b3908-7bda-11f0-b911-0224a6c84d84","README.md","4a3b39bc-7bda-11f0-b911-0224a6c84d84",2,["D",1755483792681],"# OpenGraph Preview App\n\nA web application that fetches and displays OpenGraph metadata from URLs, showing how they would appear when shared on social media platforms like X (Twitter), Facebook, Bluesky, and Mastodon.\n\n## Features\n\n- Fetch OpenGraph metadata from any URL\n- Display preview cards similar to social media platforms\n- Handle cases where no OpenGraph tags are present\n- Responsive design with social media platform styling\n- Error handling for invalid URLs or network issues\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main API server with URL fetching\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React frontend\n│ └── components/\n│ ├── App.tsx # Main app component\n│ └── PreviewCard.tsx # OpenGraph preview card\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Usage\n\n1. Enter a URL in the input field\n2. Click \"Preview\" to fetch OpenGraph metadata\n3. View the preview cards showing how the URL would appear on different platforms\n4. If no OpenGraph tags are found, a message will indicate this\n\n## API Endpoints\n\n- `GET /` - Serves the frontend application\n- `POST /api/preview` - Fetches OpenGraph metadata for a given URL",[140],"4c778d3e-7bda-11f0-9e1d-0224a6c84d84","shared","5c75e33f-af27-472e-ac04-a0f4759e9bc1",3,["D",1755483796436],"directory",[147],"5bb73a38-7bda-11f0-a144-0224a6c84d84","frontend","cf01a96d-0e7b-4d79-817f-76bb29596eb6",5,["D",1755483822021],[154],"5811c1d2-7bda-11f0-b992-0224a6c84d84","backend","e3b00545-15c6-49de-943e-443014f167c3",4,["D",1755483815904],[160],"pulls","branches","forks","envVars",{"_172":61,"_174":61},"connections",{"_172":61,"_173":61},"count","unfilledCount","emptyCount",{"_42":159,"_31":160,"_29":161,"_133":-5,"_40":41,"_39":162,"_135":57,"_37":237,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_187":238,"_26":239},{"_42":231,"_31":232,"_29":55,"_133":161,"_40":41,"_39":162,"_135":24,"_37":233,"_13":61,"_33":34,"_35":234,"_23":24,"_137":-5,"_187":235,"_26":236},{"_42":153,"_31":154,"_29":155,"_133":-5,"_40":41,"_39":156,"_135":57,"_37":228,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_187":229,"_26":230},{"_42":224,"_31":219,"_29":213,"_133":155,"_40":41,"_39":214,"_135":57,"_37":225,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_187":226,"_26":227},{"_42":220,"_31":32,"_29":30,"_133":213,"_40":41,"_39":14,"_135":57,"_37":221,"_13":61,"_33":34,"_35":36,"_23":24,"_137":-5,"_187":222,"_26":223},{"_42":210,"_31":211,"_29":212,"_133":213,"_40":41,"_39":214,"_135":24,"_37":215,"_13":61,"_33":34,"_35":216,"_23":24,"_137":-5,"_187":217,"_26":218},{"_42":203,"_31":204,"_29":205,"_133":155,"_40":41,"_39":156,"_135":57,"_37":206,"_13":61,"_33":20,"_35":207,"_23":24,"_137":-5,"_187":208,"_26":209},{"_42":146,"_31":147,"_29":148,"_133":-5,"_40":41,"_39":149,"_135":57,"_37":200,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_187":201,"_26":202},{"_42":193,"_31":194,"_29":195,"_133":148,"_40":41,"_39":149,"_135":57,"_37":196,"_13":61,"_33":34,"_35":197,"_23":24,"_137":-5,"_187":198,"_26":199},{"_42":139,"_31":140,"_29":141,"_133":-5,"_40":41,"_39":142,"_135":57,"_37":190,"_13":61,"_33":20,"_35":144,"_23":24,"_137":-5,"_187":191,"_26":192},{"_42":130,"_31":131,"_29":132,"_133":-5,"_40":41,"_39":134,"_135":24,"_37":186,"_13":61,"_33":34,"_35":104,"_23":24,"_137":-5,"_187":188,"_26":189},["D",1755483675844],"children",[],[131],["D",1755483792681],[],[140],"4c7784a6-7bda-11f0-9e1d-0224a6c84d84","types.ts","4c77856e-7bda-11f0-9e1d-0224a6c84d84",["D",1755483796436],"export interface OpenGraphData {\n title?: string;\n description?: string;\n image?: string;\n url?: string;\n siteName?: string;\n type?: string;\n locale?: string;\n author?: string;\n publishedTime?: string;\n modifiedTime?: string;\n}\n\nexport interface PreviewResponse {\n success: boolean;\n data?: OpenGraphData;\n error?: string;\n hasOpenGraph: boolean;\n url: string;\n}\n\nexport interface PreviewRequest {\n url: string;\n}",[],[147,194],["D",1755483796436],[183],[147],"5bb730f6-7bda-11f0-a144-0224a6c84d84","index.html","5bb731aa-7bda-11f0-a144-0224a6c84d84",["D",1755483822021],"\n\n\n \n \n OpenGraph Preview Tool\n \n \n \n\n\n

\n \n\n",[],[154,204],"65d23d10-7bda-11f0-8cc0-0224a6c84d84","PreviewCard.tsx","65d23dba-7bda-11f0-8cc0-0224a6c84d84","97deb019-83e8-4d36-be6e-791bd26ed51d",6,["D",1755483838974],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { OpenGraphData } from \"../../shared/types.ts\";\n\ninterface PreviewCardProps {\n platform: 'twitter' | 'facebook' | 'bluesky' | 'mastodon';\n data: OpenGraphData;\n hasOpenGraph: boolean;\n}\n\nconst platformStyles = {\n twitter: {\n bg: 'bg-white',\n border: 'border-gray-200',\n accent: 'text-blue-500',\n name: 'X (Twitter)'\n },\n facebook: {\n bg: 'bg-white',\n border: 'border-gray-300',\n accent: 'text-blue-600',\n name: 'Facebook'\n },\n bluesky: {\n bg: 'bg-white',\n border: 'border-blue-200',\n accent: 'text-blue-500',\n name: 'Bluesky'\n },\n mastodon: {\n bg: 'bg-white',\n border: 'border-purple-200',\n accent: 'text-purple-600',\n name: 'Mastodon'\n }\n};\n\nexport function PreviewCard({ platform, data, hasOpenGraph }: PreviewCardProps) {\n const style = platformStyles[platform];\n \n const truncateText = (text: string, maxLength: number) => {\n if (text.length <= maxLength) return text;\n return text.substring(0, maxLength) + '...';\n };\n\n const formatUrl = (url: string) => {\n try {\n const urlObj = new URL(url);\n return urlObj.hostname;\n } catch {\n return url;\n }\n };\n\n return (\n

{style.name}

\n \n {!hasOpenGraph && (\n

\n ⚠️ No OpenGraph tags found - using fallback data\n

\n )}\n \n

\n {data.image && (\n

{\n const target = e.target as HTMLImageElement;\n target.style.display = 'none';\n const parent = target.parentElement;\n if (parent) {\n parent.innerHTML = '

Image failed to load

';\n }\n }}\n />\n

\n )}\n \n

\n {data.url && (\n

\n {formatUrl(data.url)}\n

\n )}\n \n {data.title && (\n

\n {platform === 'twitter' ? truncateText(data.title, 70) : data.title}\n

\n )}\n \n {data.description && (\n

\n {platform === 'twitter' \n ? truncateText(data.description, 125)\n : platform === 'facebook'\n ? truncateText(data.description, 300)\n : data.description\n }\n

\n )}\n \n {data.siteName && (\n

\n {data.siteName}\n

\n )}\n

\n \n {/* Platform-specific metadata */}\n {(data.author || data.publishedTime) && (\n

\n {data.author && By {data.author}}\n {data.author && data.publishedTime && • }\n {data.publishedTime && (\n {new Date(data.publishedTime).toLocaleDateString()}\n )}\n

\n )}\n

\n );\n}",[],[154,219,211],"components","734bc6d2-7bda-11f0-918c-0224a6c84d84",["D",1755483861582],[],[154,219,32],"65d24814-7bda-11f0-8cc0-0224a6c84d84",["D",1755483838974],[179,180],[154,219],["D",1755483822021],[178,181],[154],"5811a7ba-7bda-11f0-b992-0224a6c84d84","index.ts",["D",1755483815904],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport type { OpenGraphData, PreviewResponse, PreviewRequest } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Extract OpenGraph tags from HTML\nfunction extractOpenGraphData(html: string): OpenGraphData {\n const ogData: OpenGraphData = {};\n \n // Regular expressions to match OpenGraph meta tags\n const ogRegex = /]*>/gi;\n const twitterRegex = /]*>/gi;\n const titleRegex = /]*>([^<]*)<\\/title>/i;\n const descRegex = /]*>/i;\n \n let match;\n \n // Extract OpenGraph tags\n while ((match = ogRegex.exec(html)) !== null) {\n const property = match[1];\n const content = match[2];\n \n switch (property) {\n case 'title':\n ogData.title = content;\n break;\n case 'description':\n ogData.description = content;\n break;\n case 'image':\n ogData.image = content;\n break;\n case 'url':\n ogData.url = content;\n break;\n case 'site_name':\n ogData.siteName = content;\n break;\n case 'type':\n ogData.type = content;\n break;\n case 'locale':\n ogData.locale = content;\n break;\n case 'author':\n ogData.author = content;\n break;\n case 'article:published_time':\n ogData.publishedTime = content;\n break;\n case 'article:modified_time':\n ogData.modifiedTime = content;\n break;\n }\n }\n \n // Extract Twitter Card tags as fallback\n while ((match = twitterRegex.exec(html)) !== null) {\n const property = match[1];\n const content = match[2];\n \n switch (property) {\n case 'title':\n if (!ogData.title) ogData.title = content;\n break;\n case 'description':\n if (!ogData.description) ogData.description = content;\n break;\n case 'image':\n if (!ogData.image) ogData.image = content;\n break;\n }\n }\n \n // Fallback to HTML title and description\n if (!ogData.title) {\n const titleMatch = titleRegex.exec(html);\n if (titleMatch) ogData.title = titleMatch[1].trim();\n }\n \n if (!ogData.description) {\n const descMatch = descRegex.exec(html);\n if (descMatch) ogData.description = descMatch[1];\n }\n \n return ogData;\n}\n\n// Check if URL has any OpenGraph tags\nfunction hasOpenGraphTags(html: string): boolean {\n const ogRegex = / {\n try {\n const body: PreviewRequest = await c.req.json();\n const { url } = body;\n \n if (!url) {\n return c.json({\n success: false,\n error: \"URL is required\",\n hasOpenGraph: false,\n url: \"\"\n }, 400);\n }\n \n const normalizedUrl = normalizeUrl(url);\n \n // Validate URL format\n try {\n new URL(normalizedUrl);\n } catch {\n return c.json({\n success: false,\n error: \"Invalid URL format\",\n hasOpenGraph: false,\n url: normalizedUrl\n }, 400);\n }\n \n // Fetch the webpage\n const response = await fetch(normalizedUrl, {\n headers: {\n 'User-Agent': 'Mozilla/5.0 (compatible; OpenGraph-Preview-Bot/1.0)'\n }\n });\n \n if (!response.ok) {\n return c.json({\n success: false,\n error: `Failed to fetch URL: ${response.status} ${response.statusText}`,\n hasOpenGraph: false,\n url: normalizedUrl\n }, 400);\n }\n \n const html = await response.text();\n const ogData = extractOpenGraphData(html);\n const hasOG = hasOpenGraphTags(html);\n \n // Set the canonical URL if not present\n if (!ogData.url) {\n ogData.url = normalizedUrl;\n }\n \n return c.json({\n success: true,\n data: ogData,\n hasOpenGraph: hasOG,\n url: normalizedUrl\n });\n \n } catch (error) {\n console.error(\"Error fetching OpenGraph data:\", error);\n return c.json({\n success: false,\n error: error instanceof Error ? error.message : \"Unknown error occurred\",\n hasOpenGraph: false,\n url: \"\"\n }, 500);\n }\n});\n\nexport default app.fetch;",[],[160,232],["D",1755483815904],[176],[160],["D",1755483675829],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_122":277,"_278":279,"_280":281,"_282":24,"_283":24,"_284":24,"_285":57,"_286":-5,"_287":-7,"_288":-7,"_289":61,"_290":24,"_291":24,"_292":-5,"_293":24,"_294":24,"_295":24,"_296":-5},"ENV",{"_248":249,"_250":251,"_252":85,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Diff · v7