\n ${escapeHtml(domain)}\n ${title}\n

${desc}

`;\n }\n\n return `\n

\n ${image ? `

` : \"\"}\n

\n ${escapeHtml(domain)}\n ${truncate(title, 70)}\n

${desc}

`;\n}\n\nexport function facebookCard(tags: OGTags, url: string): string {\n const title = escapeHtml(tags.ogTitle || tags.title || \"No title\");\n const desc = escapeHtml(truncate(tags.ogDescription || tags.description || \"\", 150));\n const image = tags.ogImage;\n const domain = getDomain(tags.ogUrl || url).toUpperCase();\n const siteName = tags.ogSiteName;\n\n return `\n

\n ${image ? `

` : \"\"}\n

\n ${escapeHtml(siteName || domain)}\n ${title}\n

${desc}

`;\n}\n\nexport function discordEmbed(tags: OGTags, url: string): string {\n const title = escapeHtml(tags.ogTitle || tags.title || \"No title\");\n const desc = escapeHtml(truncate(tags.ogDescription || tags.description || \"\", 300));\n const image = tags.ogImage;\n const siteName = escapeHtml(tags.ogSiteName || getDomain(url));\n const themeColor = tags.themeColor || \"#5865F2\";\n\n return `\n

\n ${siteName}\n ${title}\n

${desc}

\n ${image ? `

` : \"\"}\n

`;\n}\n\nexport function slackUnfurl(tags: OGTags, url: string): string {\n const title = escapeHtml(tags.ogTitle || tags.title || \"No title\");\n const desc = escapeHtml(truncate(tags.ogDescription || tags.description || \"\", 200));\n const image = tags.ogImage;\n const domain = getDomain(tags.ogUrl || url);\n const favicon = tags.favicon;\n\n return `\n

\n ${favicon ? ` $\"\"$ ` : \"\"}\n ${escapeHtml(domain)}\n

\n ${title}\n

${desc}

\n ${image ? `

` : \"\"}\n

`;\n}\n\nexport function linkedinCard(tags: OGTags, url: string): string {\n const title = escapeHtml(truncate(tags.ogTitle || tags.title || \"No title\", 100));\n const image = tags.ogImage;\n const domain = getDomain(tags.ogUrl || url);\n\n return `\n

\n ${image ? `

` : \"\"}\n

\n ${title}\n ${escapeHtml(domain)}\n

`;\n}\n\nexport function imessageCard(tags: OGTags, url: string): string {\n const title = escapeHtml(truncate(tags.ogTitle || tags.title || getDomain(url), 60));\n const image = tags.ogImage;\n const domain = getDomain(tags.ogUrl || url);\n\n return `\n

\n ${image ? `

` : \"\"}\n

\n ${escapeHtml(domain)}\n ${title}\n

`;\n}\n",[18,64],"pulls","branches",1,"forks","envVars",{"_169":26,"_171":26},"connections",{"_169":26,"_170":26},"count","unfilledCount","emptyCount",{"_33":148,"_13":18,"_62":71,"_43":-5,"_35":36,"_149":150,"_151":24,"_37":220,"_39":26,"_65":72,"_153":-5,"_67":30,"_154":-5,"_185":221,"_17":222},{"_33":157,"_13":64,"_62":63,"_43":71,"_35":36,"_149":40,"_151":24,"_37":217,"_39":26,"_65":66,"_153":159,"_67":30,"_154":-5,"_185":218,"_17":219},{"_33":213,"_13":197,"_62":191,"_43":-5,"_35":36,"_149":163,"_151":24,"_37":214,"_39":26,"_65":72,"_153":-5,"_67":30,"_154":-5,"_185":215,"_17":216},{"_33":205,"_13":206,"_62":207,"_43":191,"_35":36,"_149":208,"_151":24,"_37":209,"_39":26,"_65":66,"_153":210,"_67":30,"_154":-5,"_185":211,"_17":212},{"_33":198,"_13":199,"_62":200,"_43":191,"_35":36,"_149":112,"_151":24,"_37":201,"_39":192,"_65":66,"_153":202,"_67":30,"_154":-5,"_185":203,"_17":204},{"_33":188,"_13":189,"_62":190,"_43":191,"_35":36,"_149":192,"_151":24,"_37":193,"_39":26,"_65":66,"_153":194,"_67":30,"_154":-5,"_185":195,"_17":196},{"_33":179,"_13":180,"_62":85,"_43":-5,"_35":36,"_149":181,"_151":24,"_37":182,"_39":26,"_65":183,"_153":184,"_67":30,"_154":-5,"_185":186,"_17":187},"65657766-f1f0-11f0-9796-42dde27851f2","main.ts",7,["D",1768467524400],"http","import { fetchOG } from \"./lib/parser.ts\";\nimport { renderPage } from \"./lib/renderer.ts\";\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n const targetUrl = url.searchParams.get(\"url\");\n const format = url.searchParams.get(\"format\");\n\n // JSON API\n if (format === \"json\") {\n if (!targetUrl) {\n return Response.json({ error: \"Missing url parameter\" }, { status: 400 });\n }\n try {\n const result = await fetchOG(targetUrl);\n return Response.json(result, {\n headers: { \"Access-Control-Allow-Origin\": \"*\" },\n });\n } catch (e) {\n return Response.json({ error: String(e) }, { status: 500 });\n }\n }\n\n // HTML UI\n if (!targetUrl) {\n return new Response(renderPage(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n }\n\n try {\n const result = await fetchOG(targetUrl);\n return new Response(renderPage(result, undefined, targetUrl), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n } catch (e) {\n return new Response(renderPage(undefined, String(e), targetUrl), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n }\n}\n","children",[],[180],"312354d2-f1f0-11f0-a46a-42dde27851f2","types.ts","31235586-f1f0-11f0-a46a-42dde27851f2","2a82bc4e-f1f0-11f0-a275-42dde27851f2",3,["D",1768467436726],"export interface OGTags {\n ogTitle?: string;\n ogDescription?: string;\n ogImage?: string;\n ogUrl?: string;\n ogType?: string;\n ogSiteName?: string;\n ogLocale?: string;\n\n twitterCard?: string;\n twitterTitle?: string;\n twitterDescription?: string;\n twitterImage?: string;\n twitterSite?: string;\n twitterCreator?: string;\n\n title?: string;\n description?: string;\n canonical?: string;\n favicon?: string;\n themeColor?: string;\n\n raw: Record;\n}\n\nexport interface ValidationWarning {\n severity: \"error\" | \"warning\" | \"info\";\n message: string;\n tag?: string;\n}\n\nexport interface OGResult {\n url: string;\n tags: OGTags;\n warnings: ValidationWarning[];\n fetchedAt: string;\n}\n",[],[197,189],"lib","496e1baa-f1f3-11f0-b2f0-42dde27851f2","renderer.ts","60c3bcfe-f1f0-11f0-89cb-42dde27851f2",["D",1768468765965],"import type { OGResult, ValidationWarning } from \"./types.ts\";\nimport * as previews from \"../components/previews.ts\";\n\nfunction escapeHtml(str: string): string {\n return str\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\");\n}\n\nfunction warningBadge(severity: ValidationWarning[\"severity\"]): string {\n const colors = { error: \"red\", warning: \"orange\", info: \"blue\" };\n return `${severity}`;\n}\n\nexport function renderWarnings(warnings: ValidationWarning[]): string {\n if (!warnings.length) {\n return `

✓ All recommended tags present

`;\n }\n\n return `\n

\n ${warningBadge(w.severity)}\n ${escapeHtml(w.message)}\n ${w.tag ? `${escapeHtml(w.tag)}` : \"\"}\n

`;\n}\n\nexport function renderRawTags(raw: Record): string {\n const entries = Object.entries(raw).sort((a, b) => a[0].localeCompare(b[0]));\n\n if (!entries.length) return `

No meta tags found

`;\n\n return `\n \n \n \n ${\n entries.map(([key, value]) => `\n \n \n \n \n `).join(\"\")\n }\n \n

Tag	Value
`${escapeHtml(key)}`	${\n value.startsWith(\"http\")\n ? `${\n escapeHtml(value)\n }`\n : escapeHtml(value)\n }

`;\n}\n\nexport function renderPreviews(result: OGResult): string {\n const { tags, url } = result;\n\n return `\n

Twitter / X (${tags.twitterCard || \"summary\"})

\n ${previews.twitterCard(tags, url)}\n

Facebook

\n ${previews.facebookCard(tags, url)}\n

Discord

\n ${previews.discordEmbed(tags, url)}\n

Slack

\n ${previews.slackUnfurl(tags, url)}\n

\n ${previews.linkedinCard(tags, url)}\n

iMessage / WhatsApp

\n ${previews.imessageCard(tags, url)}\n

`;\n}\n\nexport function renderPage(\n result?: OGResult,\n error?: string,\n inputUrl?: string,\n): string {\n return `\n\n\n \n \n OG Previewer - OpenGraph Meta Tag Debugger\n \n \n \n \n \n \n \n\n\n

🔍 OG Previewer

Preview how your URL appears when shared on social platforms

\n\n \n\n ${error ? `

${escapeHtml(error)}

` : \"\"}\n\n ${\n result\n ? `\n

Fetched: ${\n escapeHtml(result.url)\n } at ${result.fetchedAt}

\n\n

Validation

\n ${renderWarnings(result.warnings)}\n

\n\n

Platform Previews

\n ${renderPreviews(result)}\n

\n\n

Raw Meta Tags (${\n Object.keys(result.tags.raw).length\n })

\n ${renderRawTags(result.tags.raw)}\n

\n `\n : \"\"\n }\n

\n\n`;\n}",[],[197,199],"3fbb432e-f1f0-11f0-a115-42dde27851f2","parser.ts","3fbb441e-f1f0-11f0-a115-42dde27851f2",4,["D",1768467461191],"import type { OGTags, ValidationWarning, OGResult } from \"./types.ts\";\n\nconst USER_AGENT = \"Mozilla/5.0 (compatible; OGPreviewBot/1.0; +https://kamals-tools.val.run)\";\n\nfunction extractMetaTags(html: string): Record {\n const tags: Record = {};\n\n // og: and twitter: meta tags (property attribute)\n const ogRegex = /]*?\\s+)?property=[\"'](og:|twitter:)([^\"']+)[\"'][^>]*?\\s+content=[\"']([^\"']*)[\"'][^>]*?\\/?>/gi;\n const ogRegex2 = /]*?\\s+)?content=[\"']([^\"']*)[\"'][^>]*?\\s+property=[\"'](og:|twitter:)([^\"']+)[\"'][^>]*?\\/?>/gi;\n\n let match;\n while ((match = ogRegex.exec(html)) !== null) {\n tags[`${match[1]}${match[2]}`] = match[3];\n }\n while ((match = ogRegex2.exec(html)) !== null) {\n tags[`${match[2]}${match[3]}`] = match[1];\n }\n\n // twitter: with name attribute\n const twitterNameRegex = /]*?\\s+)?name=[\"'](twitter:[^\"']+)[\"'][^>]*?\\s+content=[\"']([^\"']*)[\"'][^>]*?\\/?>/gi;\n const twitterNameRegex2 = /]*?\\s+)?content=[\"']([^\"']*)[\"'][^>]*?\\s+name=[\"'](twitter:[^\"']+)[\"'][^>]*?\\/?>/gi;\n\n while ((match = twitterNameRegex.exec(html)) !== null) {\n tags[match[1]] = match[2];\n }\n while ((match = twitterNameRegex2.exec(html)) !== null) {\n tags[match[2]] = match[1];\n }\n\n // Standard meta description\n const descRegex = /]*?\\s+)?name=[\"']description[\"'][^>]*?\\s+content=[\"']([^\"']*)[\"'][^>]*?\\/?>/i;\n const descRegex2 = /]*?\\s+)?content=[\"']([^\"']*)[\"'][^>]*?\\s+name=[\"']description[\"'][^>]*?\\/?>/i;\n const descMatch = html.match(descRegex) || html.match(descRegex2);\n if (descMatch) tags[\"description\"] = descMatch[1];\n\n // Theme color\n const themeRegex = /]*?\\s+)?name=[\"']theme-color[\"'][^>]*?\\s+content=[\"']([^\"']*)[\"'][^>]*?\\/?>/i;\n const themeMatch = html.match(themeRegex);\n if (themeMatch) tags[\"theme-color\"] = themeMatch[1];\n\n // Title tag\n const titleMatch = html.match(/]*>([^<]*)<\\/title>/i);\n if (titleMatch) tags[\"title\"] = titleMatch[1].trim();\n\n // Canonical URL\n const canonicalMatch = html.match(/]*\\s+rel=[\"']canonical[\"'][^>]*\\s+href=[\"']([^\"']*)[\"'][^>]*\\/?>/i);\n const canonicalMatch2 = html.match(/]*\\s+href=[\"']([^\"']*)[\"'][^>]*\\s+rel=[\"']canonical[\"'][^>]*\\/?>/i);\n if (canonicalMatch) tags[\"canonical\"] = canonicalMatch[1];\n else if (canonicalMatch2) tags[\"canonical\"] = canonicalMatch2[1];\n\n // Favicon\n const faviconMatch = html.match(/]*\\s+rel=[\"'](?:shortcut )?icon[\"'][^>]*\\s+href=[\"']([^\"']*)[\"'][^>]*\\/?>/i);\n const faviconMatch2 = html.match(/]*\\s+href=[\"']([^\"']*)[\"'][^>]*\\s+rel=[\"'](?:shortcut )?icon[\"'][^>]*\\/?>/i);\n if (faviconMatch) tags[\"favicon\"] = faviconMatch[1];\n else if (faviconMatch2) tags[\"favicon\"] = faviconMatch2[1];\n\n return tags;\n}\n\nfunction mapToOGTags(raw: Record, baseUrl: string): OGTags {\n const resolveUrl = (url?: string) => {\n if (!url) return undefined;\n if (url.startsWith(\"http\")) return url;\n if (url.startsWith(\"//\")) return `https:${url}`;\n if (url.startsWith(\"/\")) return new URL(url, baseUrl).href;\n return new URL(url, baseUrl).href;\n };\n\n return {\n ogTitle: raw[\"og:title\"],\n ogDescription: raw[\"og:description\"],\n ogImage: resolveUrl(raw[\"og:image\"]),\n ogUrl: raw[\"og:url\"],\n ogType: raw[\"og:type\"],\n ogSiteName: raw[\"og:site_name\"],\n ogLocale: raw[\"og:locale\"],\n\n twitterCard: raw[\"twitter:card\"],\n twitterTitle: raw[\"twitter:title\"],\n twitterDescription: raw[\"twitter:description\"],\n twitterImage: resolveUrl(raw[\"twitter:image\"]),\n twitterSite: raw[\"twitter:site\"],\n twitterCreator: raw[\"twitter:creator\"],\n\n title: raw[\"title\"],\n description: raw[\"description\"],\n canonical: raw[\"canonical\"],\n favicon: resolveUrl(raw[\"favicon\"]),\n themeColor: raw[\"theme-color\"],\n\n raw,\n };\n}\n\nfunction validate(tags: OGTags): ValidationWarning[] {\n const warnings: ValidationWarning[] = [];\n\n // Required tags\n if (!tags.ogTitle && !tags.title) {\n warnings.push({ severity: \"error\", message: \"Missing title (og:title or )\", tag: \"og:title\" });\n }\n if (!tags.ogImage) {\n warnings.push({ severity: \"error\", message: \"Missing og:image - most platforms won't show a preview\", tag: \"og:image\" });\n }\n if (!tags.ogDescription && !tags.description) {\n warnings.push({ severity: \"warning\", message: \"Missing description (og:description or meta description)\", tag: \"og:description\" });\n }\n\n // Twitter specific\n if (!tags.twitterCard) {\n warnings.push({ severity: \"info\", message: \"No twitter:card specified, will default to 'summary'\", tag: \"twitter:card\" });\n }\n\n // Length warnings\n const title = tags.ogTitle || tags.twitterTitle || tags.title || \"\";\n if (title.length > 70) {\n warnings.push({ severity: \"warning\", message: `Title is ${title.length} chars - Twitter truncates at ~70`, tag: \"og:title\" });\n }\n\n const desc = tags.ogDescription || tags.twitterDescription || tags.description || \"\";\n if (desc.length > 200) {\n warnings.push({ severity: \"warning\", message: `Description is ${desc.length} chars - may be truncated`, tag: \"og:description\" });\n }\n\n return warnings;\n}\n\nexport async function fetchOG(url: string): Promise<OGResult> {\n const response = await fetch(url, {\n headers: { \"User-Agent\": USER_AGENT },\n redirect: \"follow\",\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);\n }\n\n const html = await response.text();\n const raw = extractMetaTags(html);\n const tags = mapToOGTags(raw, url);\n const warnings = validate(tags);\n\n return {\n url: response.url,\n tags,\n warnings,\n fetchedAt: new Date().toISOString(),\n };\n}\n",[],[197,206],"2a82bb9a-f1f0-11f0-a275-42dde27851f2",["D",1768467425606],[175,176,177],[197],["D",1768467480245],[],[18,64],["D",1768467430745],[173],[18],["D",1768467410026],["D",1789518676100],{"_11":12,"_126":70},{"_11":12,"_121":122,"_69":70,"_31":68,"_123":124,"_125":30},{"_39":112,"_13":16,"_33":36,"_113":74,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"ctx",{"_52":-5,"_145":261,"_262":263,"_264":265,"_266":30,"_267":30,"_268":30,"_269":24,"_270":-5,"_271":-7,"_272":-7,"_273":26,"_274":30,"_275":30,"_276":-5,"_277":30,"_278":30,"_279":30,"_280":-5},"ENV",{"_232":233,"_234":235,"_236":16,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260},"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"] </article></body></html>

Twitter / X (${tags.twitterCard || \"summary\"})

Facebook

Discord

Slack

LinkedIn

iMessage / WhatsApp

Validation

Platform Previews

History · components