Added Logos to Home Page

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<string, string> = {
-    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'

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
+      ? `<img class="framework-card-logo ${logo.className ?? ''}" src="${logo.src}" alt="" />`
+      : `<span class="framework-card-symbol" aria-hidden="true">${logo?.symbol ?? '◼'}</span>`
+
+  return `<span class="framework-card-title">${visual}<span>${name}</span></span>`
+}
+
 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) => (
         <LinkCard
-          title={framework.name}
+          title={framework.title}
           href={`/framework/${framework.slug}/`}
           description={`Version ${framework.version}`}
         />
@@ -51,11 +82,45 @@ const additionalFrameworks = frameworkRows.filter(
     {
       additionalFrameworks.map((framework) => (
         <LinkCard
-          title={framework.name}
+          title={framework.title}
           href={`/framework/${framework.slug}/`}
           description={`Version ${framework.version}`}
         />
       ))
     }
   </CardGrid>
 </section>
+
+<style>
+  :global(.framework-card-title) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  :global(.framework-card-logo),
+  :global(.framework-card-symbol) {
+    width: 1.5rem;
+    height: 1.5rem;
+    flex: none;
+  }
+
+  :global(.framework-card-logo) {
+    object-fit: contain;
+  }
+
+  :global(.framework-card-symbol) {
+    display: inline-grid;
+    place-items: center;
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+
+  :global(:root[data-theme='light'] .framework-card-logo--next) {
+    filter: invert(1);
+  }
+
+  :global(:root[data-theme='light'] .framework-card-logo--astro) {
+    content: url('/framework-logos/astro-dark.svg');
+  }
+</style>