✓ 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}",[],[137,179],"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",[],[137,186],["D",1768467425606],[161,162,163],[137],"4b13a2a2-f1f0-11f0-b76e-42dde27851f2","previews.ts","4b13a32e-f1f0-11f0-b76e-42dde27851f2",5,["D",1768467480245],"import type { OGTags } from \"../lib/types.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 truncate(str: string, max: number): string {\n if (str.length <= max) return str;\n return str.slice(0, max - 1) + \"…\";\n}\n\nfunction getDomain(url: string): string {\n try {\n return new URL(url).hostname;\n } catch {\n return url;\n }\n}\n\nexport function twitterCard(tags: OGTags, url: string): string {\n const title = escapeHtml(tags.ogTitle || tags.twitterTitle || tags.title || \"No title\");\n const desc = escapeHtml(truncate(tags.ogDescription || tags.twitterDescription || tags.description || \"\", 125));\n const image = tags.twitterImage || tags.ogImage;\n const domain = getDomain(tags.ogUrl || url);\n const cardType = tags.twitterCard || \"summary\";\n\n if (cardType === \"summary_large_image\" && image) {\n return `\n <article class=\"preview-card twitter-large\">\n <div class=\"preview-image\" style=\"background-image: url('${escapeHtml(image)}')\"></div>\n <div class=\"preview-content\">\n <span class=\"preview-domain\">${escapeHtml(domain)}</span>\n <strong class=\"preview-title\">${title}</strong>\n <p class=\"preview-desc\">${desc}</p>\n </div>\n </article>`;\n }\n\n return `\n <article class=\"preview-card twitter-summary\">\n ${image ? `<div class=\"preview-thumb\" style=\"background-image: url('${escapeHtml(image)}')\"></div>` : \"\"}\n <div class=\"preview-content\">\n <span class=\"preview-domain\">${escapeHtml(domain)}</span>\n <strong class=\"preview-title\">${truncate(title, 70)}</strong>\n <p class=\"preview-desc\">${desc}</p>\n </div>\n </article>`;\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 <article class=\"preview-card facebook\">\n ${image ? `<div class=\"preview-image\" style=\"background-image: url('${escapeHtml(image)}')\"></div>` : \"\"}\n <div class=\"preview-content\">\n <span class=\"preview-domain\">${escapeHtml(siteName || domain)}</span>\n <strong class=\"preview-title\">${title}</strong>\n <p class=\"preview-desc\">${desc}</p>\n </div>\n </article>`;\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 <article class=\"preview-card discord\" style=\"border-left-color: ${escapeHtml(themeColor)}\">\n <div class=\"preview-content\">\n <span class=\"preview-site-name\">${siteName}</span>\n <strong class=\"preview-title\">${title}</strong>\n <p class=\"preview-desc\">${desc}</p>\n </div>\n ${image ? `<div class=\"preview-thumb-right\" style=\"background-image: url('${escapeHtml(image)}')\"></div>` : \"\"}\n </article>`;\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 <article class=\"preview-card slack\">\n <div class=\"preview-content\">\n <div class=\"preview-header\">\n ${favicon ? `<img class=\"preview-favicon\" src=\"${escapeHtml(favicon)}\" alt=\"\" />` : \"\"}\n <span class=\"preview-domain\">${escapeHtml(domain)}</span>\n </div>\n <strong class=\"preview-title\">${title}</strong>\n <p class=\"preview-desc\">${desc}</p>\n ${image ? `<div class=\"preview-image-inline\" style=\"background-image: url('${escapeHtml(image)}')\"></div>` : \"\"}\n </div>\n </article>`;\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 <article class=\"preview-card linkedin\">\n ${image ? `<div class=\"preview-image\" style=\"background-image: url('${escapeHtml(image)}')\"></div>` : \"\"}\n <div class=\"preview-content\">\n <strong class=\"preview-title\">${title}</strong>\n <span class=\"preview-domain\">${escapeHtml(domain)}</span>\n </div>\n </article>`;\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 <article class=\"preview-card imessage\">\n ${image ? `<div class=\"preview-image\" style=\"background-image: url('${escapeHtml(image)}')\"></div>` : \"\"}\n <div class=\"preview-content\">\n <span class=\"preview-domain\">${escapeHtml(domain)}</span>\n <strong class=\"preview-title\">${title}</strong>\n </div>\n </article>`;\n}\n",[],[144,197],["D",1768467430745],[159],[144],["D",1768467410026],["D",1789518676100],{"_11":12,"_92":88},{"_11":12,"_85":86,"_87":88,"_45":46,"_89":90,"_91":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_80":-5,"_81":-5,"_82":-5,"_83":14,"_84":12},"ctx",{"_73":-5,"_114":245,"_246":247,"_248":249,"_250":38,"_251":38,"_252":38,"_253":50,"_254":-5,"_255":-7,"_256":-7,"_257":54,"_258":38,"_259":38,"_260":-5,"_261":38,"_262":38,"_263":38,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":26,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"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

Branches1

Branches
1