From caf15a6af56811704b50e686a84de9162f501845 Mon Sep 17 00:00:00 2001 From: Alexander Karan <47707063+AlexanderKaran@users.noreply.github.com> Date: Sat, 25 Jul 2026 10:49:51 +0800 Subject: [PATCH] Added Logos to Home Page --- .../public/framework-logos/astro-dark.svg | 4 ++ .../public/framework-logos/astro-gradient.svg | 11 +++ .../src/components/ComparisonBarChart.astro | 9 ++- .../docs/src/components/FrameworkLists.astro | 69 ++++++++++++++++++- 4 files changed, 90 insertions(+), 3 deletions(-) create mode 100644 packages/docs/public/framework-logos/astro-dark.svg create mode 100644 packages/docs/public/framework-logos/astro-gradient.svg diff --git a/packages/docs/public/framework-logos/astro-dark.svg b/packages/docs/public/framework-logos/astro-dark.svg new file mode 100644 index 00000000..e5211819 --- /dev/null +++ b/packages/docs/public/framework-logos/astro-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/docs/public/framework-logos/astro-gradient.svg b/packages/docs/public/framework-logos/astro-gradient.svg new file mode 100644 index 00000000..52b76d55 --- /dev/null +++ b/packages/docs/public/framework-logos/astro-gradient.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/docs/src/components/ComparisonBarChart.astro b/packages/docs/src/components/ComparisonBarChart.astro index 65afb82c..7a627daf 100644 --- a/packages/docs/src/components/ComparisonBarChart.astro +++ b/packages/docs/src/components/ComparisonBarChart.astro @@ -124,7 +124,7 @@ const chartPayload = JSON.stringify({ const VALUE_LABEL_PADDING = 16 const MEDIAN_COLORS = ['#ec8f5e', '#f2ca60', '#bece57', '#7bb560'] const FRAMEWORK_LOGO_SOURCES: Record = { - Astro: '/framework-logos/astro.svg', + Astro: '/framework-logos/astro-gradient.svg', 'Baseline HTML': '/framework-logos/html5.svg', Gatsby: '/framework-logos/gatsby.svg', 'Next.js': '/framework-logos/nextdotjs.svg', @@ -143,6 +143,13 @@ const chartPayload = JSON.stringify({ } function getFrameworkLogoSource(name: string) { + if ( + name === 'Astro' && + document.documentElement.dataset.theme === 'light' + ) { + return '/framework-logos/astro-dark.svg' + } + if ( name === 'Next.js' && document.documentElement.dataset.theme !== 'light' diff --git a/packages/docs/src/components/FrameworkLists.astro b/packages/docs/src/components/FrameworkLists.astro index c7d54d10..c862690b 100644 --- a/packages/docs/src/components/FrameworkLists.astro +++ b/packages/docs/src/components/FrameworkLists.astro @@ -3,9 +3,40 @@ import { CardGrid, LinkCard } from '@astrojs/starlight/components' import { starterStats } from '../lib/collections' import { getFrameworkSlug } from '../lib/utils' +const frameworkLogos: Record< + string, + { src?: string; symbol?: string; className?: string } +> = { + 'starter-astro': { + src: '/framework-logos/astro-gradient.svg', + className: 'framework-card-logo--astro', + }, + 'starter-mastro': { symbol: '👨‍🍳' }, + 'starter-next-js': { + src: '/framework-logos/nextdotjs-light.svg', + className: 'framework-card-logo--next', + }, + 'starter-nuxt': { src: '/framework-logos/nuxt.svg' }, + 'starter-react-router': { src: '/framework-logos/reactrouter.svg' }, + 'starter-solid-start': { src: '/framework-logos/solid.svg' }, + 'starter-sveltekit': { src: '/framework-logos/svelte.svg' }, + 'starter-tanstack-start-react': { src: '/tanstack-circle-logo.png' }, +} + +function getFrameworkTitle(name: string, packageName: string) { + const logo = frameworkLogos[packageName] + const visual = + logo?.src != null + ? `` + : `` + + return `${visual}${name}` +} + const frameworkRows = starterStats.map((framework) => ({ name: framework.name, slug: getFrameworkSlug(framework.package), + title: getFrameworkTitle(framework.name, framework.package), version: framework.frameworkVersion != null && framework.frameworkVersion.trim() !== '' && @@ -32,7 +63,7 @@ const additionalFrameworks = frameworkRows.filter( { focusedFrameworks.map((framework) => ( @@ -51,7 +82,7 @@ const additionalFrameworks = frameworkRows.filter( { additionalFrameworks.map((framework) => ( @@ -59,3 +90,37 @@ const additionalFrameworks = frameworkRows.filter( } + +