\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",[],[155,173],[155],{"_103":183,"_96":184,"_156":185,"_158":-5,"_159":141,"_160":186,"_162":118,"_105":187,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":188,"_99":215},"2a82bb9a-f1f0-11f0-a275-42dde27851f2","lib","2a82bc4e-f1f0-11f0-a275-42dde27851f2",1,["D",1768467425606],[189,198,207],{"_103":190,"_96":191,"_156":192,"_158":185,"_159":141,"_160":193,"_162":118,"_105":194,"_100":32,"_164":177,"_166":195,"_167":22,"_168":-5,"_169":196,"_99":197},"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",[],[184,191],{"_103":199,"_96":200,"_156":201,"_158":185,"_159":141,"_160":140,"_162":118,"_105":202,"_100":203,"_164":177,"_166":204,"_167":22,"_168":-5,"_169":205,"_99":206},"496e1baa-f1f3-11f0-b2f0-42dde27851f2","renderer.ts","60c3bcfe-f1f0-11f0-89cb-42dde27851f2",["D",1768468765965],3,"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 .replace(/\"/g, \""\");\n}\n\nfunction warningBadge(severity: ValidationWarning[\"severity\"]): string {\n const colors = { error: \"red\", warning: \"orange\", info: \"blue\" };\n return `<span class=\"badge ${severity}\">${severity}</span>`;\n}\n\nexport function renderWarnings(warnings: ValidationWarning[]): string {\n if (!warnings.length) {\n return `<p class=\"success\">✓ All recommended tags present</p>`;\n }\n\n return `\n <ul class=\"warnings-list\">\n ${\n warnings.map((w) => `\n <li class=\"warning-item ${w.severity}\">\n ${warningBadge(w.severity)}\n <span>${escapeHtml(w.message)}</span>\n ${w.tag ? `<code>${escapeHtml(w.tag)}</code>` : \"\"}\n </li>\n `).join(\"\")\n }\n </ul>`;\n}\n\nexport function renderRawTags(raw: Record<string, string>): string {\n const entries = Object.entries(raw).sort((a, b) => a[0].localeCompare(b[0]));\n\n if (!entries.length) return `<p>No meta tags found</p>`;\n\n return `\n <table class=\"raw-tags\">\n <thead><tr><th>Tag</th><th>Value</th></tr></thead>\n <tbody>\n ${\n entries.map(([key, value]) => `\n <tr>\n <td><code>${escapeHtml(key)}</code></td>\n <td class=\"tag-value\">${\n value.startsWith(\"http\")\n ? `<a href=\"${escapeHtml(value)}\" target=\"_blank\" rel=\"noopener\">${\n escapeHtml(value)\n }</a>`\n : escapeHtml(value)\n }</td>\n </tr>\n `).join(\"\")\n }\n </tbody>\n </table>`;\n}\n\nexport function renderPreviews(result: OGResult): string {\n const { tags, url } = result;\n\n return `\n <div class=\"previews-grid\">\n <div class=\"preview-section\">\n <h4>Twitter / X <small>(${tags.twitterCard || \"summary\"})</small></h4>\n ${previews.twitterCard(tags, url)}\n </div>\n <div class=\"preview-section\">\n <h4>Facebook</h4>\n ${previews.facebookCard(tags, url)}\n </div>\n <div class=\"preview-section\">\n <h4>Discord</h4>\n ${previews.discordEmbed(tags, url)}\n </div>\n <div class=\"preview-section\">\n <h4>Slack</h4>\n ${previews.slackUnfurl(tags, url)}\n </div>\n <div class=\"preview-section\">\n <h4>LinkedIn</h4>\n ${previews.linkedinCard(tags, url)}\n </div>\n <div class=\"preview-section\">\n <h4>iMessage / WhatsApp</h4>\n ${previews.imessageCard(tags, url)}\n </div>\n </div>`;\n}\n\nexport function renderPage(\n result?: OGResult,\n error?: string,\n inputUrl?: string,\n): string {\n return `<!DOCTYPE html>\n<html lang=\"en\" data-theme=\"auto\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>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}",[],[184,200],{"_103":208,"_96":209,"_156":210,"_158":185,"_159":141,"_160":203,"_162":118,"_105":211,"_100":32,"_164":177,"_166":212,"_167":22,"_168":-5,"_169":213,"_99":214},"312354d2-f1f0-11f0-a46a-42dde27851f2","types.ts","31235586-f1f0-11f0-a46a-42dde27851f2",["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",[],[184,209],[184],{"_103":217,"_96":218,"_156":116,"_158":-5,"_159":141,"_160":219,"_162":118,"_105":220,"_100":32,"_164":221,"_166":222,"_167":22,"_168":-5,"_169":223,"_99":224},"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",[],[218],"files",[153,171,182,189,198,207,216],"counts",{"_229":32,"_230":186,"_231":32,"_232":233},"pulls","branches","forks","envVars",{"_234":32,"_235":32},"count","emptyCount","contents",[238,241,244],{"_103":154,"_96":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":118,"_105":239,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":240},["D",1768467430745],[155],{"_103":183,"_96":184,"_156":185,"_158":-5,"_159":141,"_160":186,"_162":118,"_105":242,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":243},["D",1768467425606],[184],{"_103":217,"_96":218,"_156":116,"_158":-5,"_159":141,"_160":219,"_162":118,"_105":245,"_100":32,"_164":221,"_166":222,"_167":22,"_168":-5,"_99":246},["D",1768467524400],[218],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_94":95,"_96":97,"_98":-7,"_100":-7,"_101":256,"_236":261,"_268":-7,"_269":-5,"_270":-5,"_225":271,"_293":290,"_294":-5,"_295":-5,"_296":22,"_297":22},{"_103":104,"_96":97,"_105":257,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":-5,"_120":-5,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":258,"_135":259,"_138":260,"_150":22},["D",1768467410026],{"_94":95,"_133":134},{"_94":95,"_137":134,"_14":114},{"_100":140,"_96":44,"_103":141,"_142":104,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":97,"_149":95},[262,264,266],{"_103":154,"_96":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":118,"_105":239,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":263},[155],{"_103":183,"_96":184,"_156":185,"_158":-5,"_159":141,"_160":186,"_162":118,"_105":242,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":265},[184],{"_103":217,"_96":218,"_156":116,"_158":-5,"_159":141,"_160":219,"_162":118,"_105":245,"_100":32,"_164":221,"_166":222,"_167":22,"_168":-5,"_99":267},[218],"readme","upstream","pull",[272,274,278,280,283,286,290],{"_103":154,"_96":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":118,"_105":163,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":273,"_99":277},[274],{"_103":172,"_96":173,"_156":174,"_158":157,"_159":141,"_160":175,"_162":118,"_105":176,"_100":32,"_164":177,"_166":178,"_167":22,"_168":-5,"_169":275,"_99":276},[],[155,173],[155],{"_103":183,"_96":184,"_156":185,"_158":-5,"_159":141,"_160":186,"_162":118,"_105":187,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":279,"_99":289},[280,283,286],{"_103":190,"_96":191,"_156":192,"_158":185,"_159":141,"_160":193,"_162":118,"_105":194,"_100":32,"_164":177,"_166":195,"_167":22,"_168":-5,"_169":281,"_99":282},[],[184,191],{"_103":199,"_96":200,"_156":201,"_158":185,"_159":141,"_160":140,"_162":118,"_105":202,"_100":203,"_164":177,"_166":204,"_167":22,"_168":-5,"_169":284,"_99":285},[],[184,200],{"_103":208,"_96":209,"_156":210,"_158":185,"_159":141,"_160":203,"_162":118,"_105":211,"_100":32,"_164":177,"_166":212,"_167":22,"_168":-5,"_169":287,"_99":288},[],[184,209],[184],{"_103":217,"_96":218,"_156":116,"_158":-5,"_159":141,"_160":219,"_162":118,"_105":220,"_100":32,"_164":221,"_166":222,"_167":22,"_168":-5,"_169":291,"_99":292},[],[218],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

kamalnrf

og-previewer