[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_203":204,"_205":206},"routes/_app.x.$handle.$name",{"_100":99,"_32":50,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_21":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":25,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_48":49,"_32":50,"_36":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":43,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",4,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","backend","latestPath","fileId","e3b00545-15c6-49de-943e-443014f167c3","name","fileType","directory","content","createdAt",["D",1755483815904],"branchVersion","branchId","0493d4aa-7bda-11f0-aa5f-0224a6c84d84",{"_30":43,"_32":44,"_33":45,"_35":46,"_36":47,"_38":14,"_39":40,"_24":25},"backend/index.ts","5811a896-7bda-11f0-b992-0224a6c84d84","index.ts","script","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;",["D",1755483815904],"id","04935ce6-7bda-11f0-aa5f-0224a6c84d84","og",["D",1755483675829],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","660e611e-30de-4ed3-8449-79507be25f74","pinnedFileId","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",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":59,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_48":40,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":50,"_98":99},"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",{"_48":49,"_32":50,"_36":199,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":43,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":200,"_84":201,"_86":202,"_88":25},"tree",[169,171,173,174],"files",[169,170,171,172,173,174],"counts",{"_159":66,"_160":138,"_161":66,"_162":163,"_164":165},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":156,"_32":28,"_30":31,"_137":-5,"_39":40,"_38":14,"_139":62,"_36":157,"_13":66,"_33":34,"_35":-5,"_24":25,"_141":-5,"_27":158},{"_48":150,"_32":151,"_30":152,"_137":-5,"_39":40,"_38":153,"_139":62,"_36":154,"_13":66,"_33":34,"_35":-5,"_24":25,"_141":-5,"_27":155},{"_48":143,"_32":144,"_30":145,"_137":-5,"_39":40,"_38":146,"_139":62,"_36":147,"_13":66,"_33":21,"_35":148,"_24":25,"_141":-5,"_27":149},{"_48":134,"_32":135,"_30":136,"_137":-5,"_39":40,"_38":138,"_139":25,"_36":140,"_13":66,"_33":45,"_35":109,"_24":25,"_141":-5,"_27":142},"0496167a-7bda-11f0-aa5f-0224a6c84d84","main.tsx","04961738-7bda-11f0-aa5f-0224a6c84d84","parentId",1,"latest",["D",1755483675844],"label",[135],"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",[144],"4c778d3e-7bda-11f0-9e1d-0224a6c84d84","shared","5c75e33f-af27-472e-ac04-a0f4759e9bc1",3,["D",1755483796436],[151],"5811c1d2-7bda-11f0-b992-0224a6c84d84",["D",1755483815904],[28],"pulls","branches","forks","envVars",{"_166":66,"_168":66},"connections",{"_166":66,"_167":66},"count","unfilledCount","emptyCount",{"_48":156,"_32":28,"_30":31,"_137":-5,"_39":40,"_38":14,"_139":62,"_36":196,"_13":66,"_33":34,"_35":-5,"_24":25,"_141":-5,"_176":197,"_27":198},{"_48":192,"_32":44,"_30":43,"_137":31,"_39":40,"_38":14,"_139":25,"_36":193,"_13":66,"_33":45,"_35":46,"_24":25,"_141":-5,"_176":194,"_27":195},{"_48":150,"_32":151,"_30":152,"_137":-5,"_39":40,"_38":153,"_139":62,"_36":189,"_13":66,"_33":34,"_35":-5,"_24":25,"_141":-5,"_176":190,"_27":191},{"_48":182,"_32":183,"_30":184,"_137":152,"_39":40,"_38":153,"_139":62,"_36":185,"_13":66,"_33":45,"_35":186,"_24":25,"_141":-5,"_176":187,"_27":188},{"_48":143,"_32":144,"_30":145,"_137":-5,"_39":40,"_38":146,"_139":62,"_36":179,"_13":66,"_33":21,"_35":148,"_24":25,"_141":-5,"_176":180,"_27":181},{"_48":134,"_32":135,"_30":136,"_137":-5,"_39":40,"_38":138,"_139":25,"_36":175,"_13":66,"_33":45,"_35":109,"_24":25,"_141":-5,"_176":177,"_27":178},["D",1755483675844],"children",[],[135],["D",1755483792681],[],[144],"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}",[],[151,183],["D",1755483796436],[172],[151],"5811a7ba-7bda-11f0-b992-0224a6c84d84",["D",1755483815904],[],[28,44],["D",1755483815904],[170],[28],["D",1755483675829],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":59,"_104":105,"_106":25},{"_13":89,"_32":90,"_48":40,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":50,"_98":99},"ctx",{"_82":-5,"_127":236,"_237":238,"_239":240,"_241":25,"_242":25,"_243":25,"_244":62,"_245":-5,"_246":-7,"_247":-7,"_248":66,"_249":25,"_250":25,"_251":-5,"_252":25,"_253":25,"_254":25,"_255":-5},"ENV",{"_207":208,"_209":210,"_211":90,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235},"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 · v4