mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-22 13:32:11 +00:00
4931b0c4b2
*PR Created by the Glary-Bot Agent* --- ## Summary The comfy.org favicon was reported as illegible in Google search results. The current `logomark.svg` is a transparent yellow "C" — when Google (or any client) composites it onto a white surface (search results, light-theme tab strips), the yellow disappears into the background. Fix: ship a dedicated `/favicon.svg` that wraps the existing yellow logomark in a solid black square, and point `<link rel="icon">` at it. The in-page nav logo, `Organization.logo` Schema.org URL, and any other consumer of `logomark.svg` are left untouched, so transparent-composite contexts (knowledge panels, dark nav) continue to render cleanly. ## Changes - `apps/website/public/favicon.svg` *(new)* — 48×48 SVG: black square + scaled-down original logomark path. Existing path geometry is reused verbatim inside a `<g transform>` so the C glyph is byte-identical to the source. - `apps/website/src/layouts/BaseLayout.astro` — `<link rel="icon" href="/icons/logomark.svg">` → `<link rel="icon" href="/favicon.svg">`. One-line change. ## Why a new file (vs editing `logomark.svg` in place) `logomark.svg` is also used by `SiteNav.vue` (in-page header on the dark `--color-primary-comfy-ink` background) and by the JSON-LD `Organization.logo` URL. Both consumers want the transparent version. Editing it in place would draw an ugly black square in the site's own header. ## User report > "just google searched comfyui and logo isnt legible. We should update.." ## Verification **Built site** - `pnpm typecheck` (astro check): 0 errors, 0 warnings - `pnpm build` (astro build): 280 pages built, exit 0 - Built `dist/index.html` contains exactly one `<link rel="icon" href="/favicon.svg">` and zero references to the old icon path in `<head>` - `oxlint` on changed `.astro` file: 0 warnings, 0 errors **Visual (Playwright on local astro dev server)** - New favicon renders correctly at 16/32/64 px — yellow C centered on black square, no clipping. - In-page nav logo unchanged (yellow C floats cleanly on the dark `--color-primary-comfy-ink` nav background, no black wrapper visible). - Mock of Google search-result row shows the new favicon is high-contrast inside Google's white circular wrapper; the old one is nearly invisible. ## Screenshots ### Google-style search result simulation (before / after)  ### Favicon at native sizes + Google circular wrapper  ### In-page nav header (unchanged after the fix)  ## Notes for reviewers - The change deliberately uses pure black `#000` (matching the user's literal request "make the white background, black") rather than `--color-primary-comfy-ink` (`#211927`). Either would work; happy to switch if brand preference is the ink color. - Search-engine cached favicons can take days/weeks to refresh on Google's side after the new file is deployed. ## Screenshots    ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12285-fix-website-add-dark-background-favicon-for-legibility-in-search-results-3616d73d365081babbcbedf0b86d3d67) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com>
165 lines
5.3 KiB
Plaintext
165 lines
5.3 KiB
Plaintext
---
|
|
import { ClientRouter } from 'astro:transitions'
|
|
import Analytics from '@vercel/analytics/astro'
|
|
import '../styles/global.css'
|
|
import type { Locale } from '../i18n/translations'
|
|
import SiteFooter from '../components/common/SiteFooter.vue'
|
|
import SiteNav from '../components/common/SiteNav.vue'
|
|
import { escapeJsonLd } from '../utils/escapeJsonLd'
|
|
import { fetchGitHubStars, formatStarCount } from '../utils/github'
|
|
|
|
interface Props {
|
|
title: string
|
|
description?: string
|
|
keywords?: string[]
|
|
ogImage?: string
|
|
noindex?: boolean
|
|
}
|
|
|
|
const {
|
|
title,
|
|
description = 'Comfy is the AI creation engine for visual professionals who demand control.',
|
|
keywords,
|
|
ogImage = 'https://media.comfy.org/website/comfy.webp',
|
|
noindex = false,
|
|
} = Astro.props
|
|
|
|
const keywordsContent = keywords && keywords.length > 0 ? keywords.join(', ') : undefined
|
|
|
|
const siteBase = Astro.site ?? 'https://comfy.org'
|
|
const canonicalURL = new URL(Astro.url.pathname, siteBase)
|
|
const ogImageURL = new URL(ogImage, siteBase)
|
|
const rawLocale = Astro.currentLocale ?? 'en'
|
|
const locale: Locale = rawLocale === 'zh-CN' ? 'zh-CN' : 'en'
|
|
const rawStars = await fetchGitHubStars('Comfy-Org', 'ComfyUI')
|
|
const githubStars = rawStars ? formatStarCount(rawStars) : ''
|
|
|
|
const gtmId = 'GTM-NP9JM6K7'
|
|
const gtmEnabled = import.meta.env.PROD
|
|
|
|
const organizationJsonLd = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'Organization',
|
|
name: 'Comfy Org',
|
|
url: 'https://comfy.org',
|
|
logo: 'https://comfy.org/icons/logomark.svg',
|
|
sameAs: [
|
|
'https://github.com/comfyanonymous/ComfyUI',
|
|
'https://discord.gg/comfyorg',
|
|
'https://x.com/comaboratory',
|
|
'https://reddit.com/r/comfyui',
|
|
'https://linkedin.com/company/comfyorg',
|
|
'https://instagram.com/comfyorg',
|
|
],
|
|
}
|
|
|
|
const websiteJsonLd = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'WebSite',
|
|
name: 'Comfy',
|
|
url: 'https://comfy.org',
|
|
}
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang={locale} class="overflow-x-clip">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content={description} />
|
|
{keywordsContent && <meta name="keywords" content={keywordsContent} />}
|
|
{noindex && <meta name="robots" content="noindex, nofollow" />}
|
|
<title>{title}</title>
|
|
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
|
<link rel="canonical" href={canonicalURL.href} />
|
|
<link rel="preconnect" href="https://www.googletagmanager.com" />
|
|
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content={title} />
|
|
<meta property="og:description" content={description} />
|
|
<meta property="og:image" content={ogImageURL.href} />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:url" content={canonicalURL.href} />
|
|
<meta property="og:locale" content={locale} />
|
|
<meta property="og:site_name" content="Comfy" />
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:site" content="@comaboratory" />
|
|
<meta name="twitter:title" content={title} />
|
|
<meta name="twitter:description" content={description} />
|
|
<meta name="twitter:image" content={ogImageURL.href} />
|
|
|
|
<!-- Structured Data -->
|
|
<script is:inline type="application/ld+json" set:html={escapeJsonLd(organizationJsonLd)} />
|
|
<script is:inline type="application/ld+json" set:html={escapeJsonLd(websiteJsonLd)} />
|
|
<slot name="head" />
|
|
|
|
<slot name="head" />
|
|
|
|
<!-- Google Tag Manager -->
|
|
{gtmEnabled && (
|
|
<script is:inline define:vars={{ gtmId }}>
|
|
;(function (w, d, s, l, i) {
|
|
w[l] = w[l] || []
|
|
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
|
|
var f = d.getElementsByTagName(s)[0],
|
|
j = d.createElement(s),
|
|
dl = l != 'dataLayer' ? '&l=' + l : ''
|
|
j.async = true
|
|
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
|
|
f.parentNode.insertBefore(j, f)
|
|
})(window, document, 'script', 'dataLayer', gtmId)
|
|
</script>
|
|
)}
|
|
|
|
<ClientRouter />
|
|
<slot name="head" />
|
|
</head>
|
|
<body class="bg-primary-comfy-ink text-white font-formula antialiased overflow-x-clip">
|
|
{gtmEnabled && (
|
|
<noscript>
|
|
<iframe
|
|
src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
|
|
height="0"
|
|
width="0"
|
|
style="display:none;visibility:hidden"
|
|
></iframe>
|
|
</noscript>
|
|
)}
|
|
|
|
<SiteNav locale={locale} github-stars={githubStars} client:load />
|
|
<main class="mt-20 lg:mt-32">
|
|
<slot />
|
|
</main>
|
|
<SiteFooter locale={locale} client:load />
|
|
|
|
<Analytics />
|
|
|
|
<script>
|
|
import { initSmoothScroll, cancelScroll } from '../scripts/smoothScroll'
|
|
import { ScrollTrigger } from '../scripts/gsapSetup'
|
|
import { initPostHog, capturePageview } from '../scripts/posthog'
|
|
|
|
initSmoothScroll()
|
|
|
|
if (import.meta.env.PROD) {
|
|
initPostHog()
|
|
document.addEventListener('astro:page-load', capturePageview)
|
|
}
|
|
|
|
document.addEventListener('astro:page-load', () => {
|
|
ScrollTrigger.refresh()
|
|
})
|
|
|
|
document.addEventListener('astro:before-preparation', () => {
|
|
cancelScroll()
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|