create-ginko 0.6.2 → 0.6.3

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # create-ginko
 
+## 0.6.3
+
+No changes in this release.
+
 ## 0.6.2
 
 No changes in this release.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ginko",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "type": "module",
   "description": "Start a Ginko site: npm create ginko my-site",
   "bin": {

package/templates/blog/app/components/block/Cards.vue

@@ -16,8 +16,9 @@ export interface Card {
 /** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
  *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
  *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
- *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
-const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen.
+ *  `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean, eager?: boolean }>(), { columns: 3, headingLevel: 'h3' })
 // Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
 const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
 const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
@@ -29,7 +30,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
     :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
   >
     <li
-      v-for="item in items"
+      v-for="(item, i) in items"
       :key="item.key"
       class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
       :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
@@ -38,6 +39,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
         v-if="item.image"
         :image="item.image"
         :sizes="sizes"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full bg-muted object-cover"
         :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
       />

package/templates/blog/app/components/blog/PostList.vue

@@ -4,18 +4,19 @@ import type { BlogPost } from '~/composables/useBlog'
 
 /** Posts as rows divided by lines: date and authors, title (the link), summary, and the cover (3:2) at the end of the
  *  row from `sm` up, above the text on phones. A post without a cover is a row without an image, not a gap. `images` false
- *  leaves the covers out (a teaser on a home page). */
-withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean }>(), { headingLevel: 'h2', images: true })
+ *  leaves the covers out (a teaser on a home page). `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean, eager?: boolean }>(), { headingLevel: 'h2', images: true })
 const { format, t } = useI18n('blog')
 </script>
 
 <template>
   <ul class="flex flex-col border-b">
-    <li v-for="post in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
+    <li v-for="(post, i) in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
       <GinkoImage
         v-if="images && post.image"
         :image="post.image"
         sizes="(min-width: 640px) 224px, 100vw"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full shrink-0 rounded-block bg-muted object-cover sm:w-56"
       />
       <div class="flex min-w-0 flex-1 flex-col gap-2">

package/templates/blog/app/components/people/List.vue

@@ -2,17 +2,18 @@
 <script setup lang="ts">
 /** People as a grid: photo (4:5) or initials, name (a link to the person's page when people have pages), role, short
  *  bio and contact. Never a stock face for a named person: without a photo the initials stand in, on phones small and
- *  beside the name, so the bios stay close. */
-defineProps<{ items: GinkoItem<'people'>[] }>()
+ *  beside the name, so the bios stay close. `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+defineProps<{ items: GinkoItem<'people'>[], eager?: boolean }>()
 const { t } = useI18n('people')
 const locale = useGinkoLocale()
 </script>
 
 <template>
   <ul class="grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
-    <li v-for="person in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
+    <li v-for="(person, i) in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
       <GinkoImage
         v-if="person.data.photo"
+        :eager="eager && i === 0"
         :image="person.data.photo"
         sizes="(min-width: 1024px) 384px, (min-width: 640px) 50vw, 100vw"
         class="aspect-4/5 w-full rounded-block bg-muted object-cover"

package/templates/blog/app/pages/about/[slug].vue

@@ -37,7 +37,7 @@ usePageSeo(() => ({
     <section aria-labelledby="author-posts" class="mx-auto max-w-page px-gutter">
       <div class="max-w-4xl">
         <h2 id="author-posts" class="pb-2 text-h3">{{ t('author.posts', { name: person.data.name }) }}</h2>
-        <BlogPostList v-if="written.length" :items="written" heading-level="h3" />
+        <BlogPostList v-if="written.length" :items="written" heading-level="h3" eager />
         <p v-else class="border-t py-8 text-muted-foreground">{{ t('author.none') }}</p>
         <NuxtLink :to="path('news')" class="mt-6 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
           {{ t('blog.all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />

package/templates/blog/app/pages/news/index.vue

@@ -40,10 +40,10 @@ usePageSeo(() => ({
         <template v-if="years.length > 1">
           <section v-for="group in years" :key="group.year" :aria-labelledby="`year-${group.year}`" class="pt-6 first:pt-0">
             <h2 :id="`year-${group.year}`" class="pb-2 text-h3 tabular-nums">{{ group.year }}</h2>
-            <BlogPostList :items="group.posts" heading-level="h3" />
+            <BlogPostList :items="group.posts" heading-level="h3" :eager="group === years[0]" />
           </section>
         </template>
-        <BlogPostList v-else-if="posts.length" :items="posts" />
+        <BlogPostList v-else-if="posts.length" :items="posts" eager />
         <BlockEmpty v-else :title="t('empty')" path="content/posts/" />
         <a :href="feed" class="mt-6 inline-flex min-h-11 items-center gap-2 text-small text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
           <Rss class="size-4" aria-hidden="true" />{{ t('feed') }}

package/templates/blog/app/pages/news/tags/[tag].vue

@@ -31,7 +31,7 @@ usePageSeo(() => ({ title: title.value, description: t('count', { count: tag.val
     <BlockPageHeader :title="title" :meta="t('count', { count: tag.count })" />
     <div class="mx-auto max-w-page px-gutter">
       <div class="max-w-4xl">
-        <BlogPostList :items="tagged" />
+        <BlogPostList :items="tagged" eager />
         <NuxtLink :to="path('news')" class="mt-6 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
           {{ t('all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
         </NuxtLink>

package/templates/blog/app/pages/team.vue

@@ -33,7 +33,7 @@ usePageSeo(() => ({
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto flex max-w-page flex-col gap-12 px-gutter md:gap-16">
       <component :is="contact" v-if="contact" />
-      <PeopleList v-if="people.items.length" :items="people.items" />
+      <PeopleList v-if="people.items.length" :items="people.items" eager />
       <BlockEmpty v-else :title="t('empty')" path="content/people/" />
     </div>
   </div>

package/templates/blog/nuxt.config.ts

@@ -13,6 +13,8 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
   ],
   ginko,
+  // The site's icon: the initial on the brand colour. Replace public/favicon.svg with the real mark.
+  app: { head: { link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] } },
   css: ['~/assets/css/main.css'],
   // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
   colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },

package/templates/blog/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#4f46e5"/><text x="16" y="22.5" text-anchor="middle" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif" font-size="19" font-weight="700" fill="#fff">F</text></svg>

package/templates/company/app/components/block/Cards.vue

@@ -16,8 +16,9 @@ export interface Card {
 /** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
  *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
  *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
- *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
-const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen.
+ *  `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean, eager?: boolean }>(), { columns: 3, headingLevel: 'h3' })
 // Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
 const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
 const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
@@ -29,7 +30,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
     :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
   >
     <li
-      v-for="item in items"
+      v-for="(item, i) in items"
       :key="item.key"
       class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
       :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
@@ -38,6 +39,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
         v-if="item.image"
         :image="item.image"
         :sizes="sizes"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full bg-muted object-cover"
         :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
       />

package/templates/company/app/components/blog/PostList.vue

@@ -4,18 +4,19 @@ import type { BlogPost } from '~/composables/useBlog'
 
 /** Posts as rows divided by lines: date and authors, title (the link), summary, and the cover (3:2) at the end of the
  *  row from `sm` up, above the text on phones. A post without a cover is a row without an image, not a gap. `images` false
- *  leaves the covers out (a teaser on a home page). */
-withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean }>(), { headingLevel: 'h2', images: true })
+ *  leaves the covers out (a teaser on a home page). `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean, eager?: boolean }>(), { headingLevel: 'h2', images: true })
 const { format, t } = useI18n('blog')
 </script>
 
 <template>
   <ul class="flex flex-col border-b">
-    <li v-for="post in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
+    <li v-for="(post, i) in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
       <GinkoImage
         v-if="images && post.image"
         :image="post.image"
         sizes="(min-width: 640px) 224px, 100vw"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full shrink-0 rounded-block bg-muted object-cover sm:w-56"
       />
       <div class="flex min-w-0 flex-1 flex-col gap-2">

package/templates/company/app/components/people/List.vue

@@ -2,17 +2,18 @@
 <script setup lang="ts">
 /** People as a grid: photo (4:5) or initials, name (a link to the person's page when people have pages), role, short
  *  bio and contact. Never a stock face for a named person: without a photo the initials stand in, on phones small and
- *  beside the name, so the bios stay close. */
-defineProps<{ items: GinkoItem<'people'>[] }>()
+ *  beside the name, so the bios stay close. `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+defineProps<{ items: GinkoItem<'people'>[], eager?: boolean }>()
 const { t } = useI18n('people')
 const locale = useGinkoLocale()
 </script>
 
 <template>
   <ul class="grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
-    <li v-for="person in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
+    <li v-for="(person, i) in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
       <GinkoImage
         v-if="person.data.photo"
+        :eager="eager && i === 0"
         :image="person.data.photo"
         sizes="(min-width: 1024px) 384px, (min-width: 640px) 50vw, 100vw"
         class="aspect-4/5 w-full rounded-block bg-muted object-cover"

package/templates/company/app/pages/events/index.vue

@@ -13,7 +13,7 @@ usePageSeo(() => ({ title: t('title'), description: t('lead') }))
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto max-w-page px-gutter">
       <h2 v-if="cards.length" class="sr-only">{{ t('upcoming') }}</h2>
-      <BlockCards v-if="cards.length" :items="cards" :columns="3" />
+      <BlockCards v-if="cards.length" :items="cards" :columns="3" eager />
       <p v-else class="max-w-prose text-lead text-muted-foreground">{{ t('none') }}</p>
     </div>
   </div>

package/templates/company/app/pages/news/index.vue

@@ -40,10 +40,10 @@ usePageSeo(() => ({
         <template v-if="years.length > 1">
           <section v-for="group in years" :key="group.year" :aria-labelledby="`year-${group.year}`" class="pt-6 first:pt-0">
             <h2 :id="`year-${group.year}`" class="pb-2 text-h3 tabular-nums">{{ group.year }}</h2>
-            <BlogPostList :items="group.posts" heading-level="h3" />
+            <BlogPostList :items="group.posts" heading-level="h3" :eager="group === years[0]" />
           </section>
         </template>
-        <BlogPostList v-else-if="posts.length" :items="posts" />
+        <BlogPostList v-else-if="posts.length" :items="posts" eager />
         <BlockEmpty v-else :title="t('empty')" path="content/posts/" />
         <a :href="feed" class="mt-6 inline-flex min-h-11 items-center gap-2 text-small text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
           <Rss class="size-4" aria-hidden="true" />{{ t('feed') }}

package/templates/company/app/pages/news/tags/[tag].vue

@@ -31,7 +31,7 @@ usePageSeo(() => ({ title: title.value, description: t('count', { count: tag.val
     <BlockPageHeader :title="title" :meta="t('count', { count: tag.count })" />
     <div class="mx-auto max-w-page px-gutter">
       <div class="max-w-4xl">
-        <BlogPostList :items="tagged" />
+        <BlogPostList :items="tagged" eager />
         <NuxtLink :to="path('news')" class="mt-6 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
           {{ t('all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
         </NuxtLink>

package/templates/company/app/pages/services/index.vue

@@ -11,7 +11,7 @@ usePageSeo(() => ({ title: t('title'), description: t('lead') }))
   <div>
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto max-w-page px-gutter">
-      <BlockCards v-if="cards.length" :items="cards" heading-level="h2" />
+      <BlockCards v-if="cards.length" :items="cards" heading-level="h2" eager />
       <BlockEmpty v-else :title="t('empty')" path="content/services/" />
     </div>
   </div>

package/templates/company/app/pages/team.vue

@@ -33,7 +33,7 @@ usePageSeo(() => ({
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto flex max-w-page flex-col gap-12 px-gutter md:gap-16">
       <component :is="contact" v-if="contact" />
-      <PeopleList v-if="people.items.length" :items="people.items" />
+      <PeopleList v-if="people.items.length" :items="people.items" eager />
       <BlockEmpty v-else :title="t('empty')" path="content/people/" />
     </div>
   </div>

package/templates/company/nuxt.config.ts

@@ -13,6 +13,8 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
   ],
   ginko,
+  // The site's icon: the initial on the brand colour. Replace public/favicon.svg with the real mark.
+  app: { head: { link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] } },
   css: ['~/assets/css/main.css'],
   // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
   colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },

package/templates/company/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#0369a1"/><text x="16" y="22.5" text-anchor="middle" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif" font-size="19" font-weight="700" fill="#fff">H</text></svg>

package/templates/docs/content/docs/2.getting-started.de.md

@@ -4,6 +4,8 @@ slug: schnellstart
 description: Orbit SDK installieren, den API-Schlüssel setzen und den ersten Monitor anlegen.
 ---
 
+## Einrichten
+
 :::steps
 ### Paket installieren
 

package/templates/docs/content/docs/2.getting-started.md

@@ -3,6 +3,8 @@ title: Getting started
 description: Install Orbit SDK, set your API key and create your first monitor.
 ---
 
+## Set up
+
 :::steps
 ### Install the package
 

package/templates/events/app/components/block/Cards.vue

@@ -16,8 +16,9 @@ export interface Card {
 /** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
  *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
  *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
- *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
-const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen.
+ *  `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean, eager?: boolean }>(), { columns: 3, headingLevel: 'h3' })
 // Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
 const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
 const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
@@ -29,7 +30,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
     :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
   >
     <li
-      v-for="item in items"
+      v-for="(item, i) in items"
       :key="item.key"
       class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
       :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
@@ -38,6 +39,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
         v-if="item.image"
         :image="item.image"
         :sizes="sizes"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full bg-muted object-cover"
         :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
       />

package/templates/events/app/components/block/Gallery.vue

@@ -9,10 +9,10 @@ import type { ImageValue } from '@lupinum/ginko'
  * takes the rest of a short last row, so its photos keep about the row height instead of growing past the rows above.
  * Each photo is a button that opens the lightbox at that photo.
  * `stack`: one photo below the other at full width, each in its own ratio, the first loaded at once (the main photos of
- * a page, such as the photos of one project). A photo's description (`alt`) is not shown below it; it stays on the
+ * a page, such as the photos of one project). `eager`: the gallery opens the page, so its first photo loads at once. A photo's description (`alt`) is not shown below it; it stays on the
  * image and in the name of the photo's button.
  */
-const props = defineProps<{ images: ImageValue[], stack?: boolean }>()
+const props = defineProps<{ images: ImageValue[], stack?: boolean, eager?: boolean }>()
 const { t } = useI18n('gallery')
 const list = useTemplateRef<HTMLUListElement>('list')
 const open = ref(false)
@@ -68,7 +68,7 @@ function focusPhoto(i: number) {
           <GinkoImage
             :image="image"
             :sizes="sizes"
-            :eager="stack && i === 0"
+            :eager="(stack || eager) && i === 0"
             class="w-full"
             :class="!stack && ['aspect-3/2 object-cover', rows && 'sm:aspect-(--ratio)']"
           />

package/templates/events/app/pages/events/index.vue

@@ -13,7 +13,7 @@ usePageSeo(() => ({ title: t('title'), description: t('lead') }))
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto max-w-page px-gutter">
       <h2 v-if="cards.length" class="sr-only">{{ t('upcoming') }}</h2>
-      <BlockCards v-if="cards.length" :items="cards" :columns="3" />
+      <BlockCards v-if="cards.length" :items="cards" :columns="3" eager />
       <p v-else class="max-w-prose text-lead text-muted-foreground">{{ t('none') }}</p>
     </div>
   </div>

package/templates/events/nuxt.config.ts

@@ -13,6 +13,8 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
   ],
   ginko,
+  // The site's icon: the initial on the brand colour. Replace public/favicon.svg with the real mark.
+  app: { head: { link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] } },
   css: ['~/assets/css/main.css'],
   // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
   colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },

package/templates/events/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#be123c"/><text x="16" y="22.5" text-anchor="middle" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif" font-size="19" font-weight="700" fill="#fff">O</text></svg>

package/templates/local-business/app/components/block/Cards.vue

@@ -16,8 +16,9 @@ export interface Card {
 /** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
  *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
  *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
- *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
-const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen.
+ *  `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean, eager?: boolean }>(), { columns: 3, headingLevel: 'h3' })
 // Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
 const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
 const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
@@ -29,7 +30,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
     :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
   >
     <li
-      v-for="item in items"
+      v-for="(item, i) in items"
       :key="item.key"
       class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
       :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
@@ -38,6 +39,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
         v-if="item.image"
         :image="item.image"
         :sizes="sizes"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full bg-muted object-cover"
         :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
       />

package/templates/local-business/app/components/block/Gallery.vue

@@ -9,10 +9,10 @@ import type { ImageValue } from '@lupinum/ginko'
  * takes the rest of a short last row, so its photos keep about the row height instead of growing past the rows above.
  * Each photo is a button that opens the lightbox at that photo.
  * `stack`: one photo below the other at full width, each in its own ratio, the first loaded at once (the main photos of
- * a page, such as the photos of one project). A photo's description (`alt`) is not shown below it; it stays on the
+ * a page, such as the photos of one project). `eager`: the gallery opens the page, so its first photo loads at once. A photo's description (`alt`) is not shown below it; it stays on the
  * image and in the name of the photo's button.
  */
-const props = defineProps<{ images: ImageValue[], stack?: boolean }>()
+const props = defineProps<{ images: ImageValue[], stack?: boolean, eager?: boolean }>()
 const { t } = useI18n('gallery')
 const list = useTemplateRef<HTMLUListElement>('list')
 const open = ref(false)
@@ -68,7 +68,7 @@ function focusPhoto(i: number) {
           <GinkoImage
             :image="image"
             :sizes="sizes"
-            :eager="stack && i === 0"
+            :eager="(stack || eager) && i === 0"
             class="w-full"
             :class="!stack && ['aspect-3/2 object-cover', rows && 'sm:aspect-(--ratio)']"
           />

package/templates/local-business/app/components/people/List.vue

@@ -2,17 +2,18 @@
 <script setup lang="ts">
 /** People as a grid: photo (4:5) or initials, name (a link to the person's page when people have pages), role, short
  *  bio and contact. Never a stock face for a named person: without a photo the initials stand in, on phones small and
- *  beside the name, so the bios stay close. */
-defineProps<{ items: GinkoItem<'people'>[] }>()
+ *  beside the name, so the bios stay close. `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+defineProps<{ items: GinkoItem<'people'>[], eager?: boolean }>()
 const { t } = useI18n('people')
 const locale = useGinkoLocale()
 </script>
 
 <template>
   <ul class="grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
-    <li v-for="person in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
+    <li v-for="(person, i) in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
       <GinkoImage
         v-if="person.data.photo"
+        :eager="eager && i === 0"
         :image="person.data.photo"
         sizes="(min-width: 1024px) 384px, (min-width: 640px) 50vw, 100vw"
         class="aspect-4/5 w-full rounded-block bg-muted object-cover"

package/templates/local-business/app/pages/services/index.vue

@@ -11,7 +11,7 @@ usePageSeo(() => ({ title: t('title'), description: t('lead') }))
   <div>
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto max-w-page px-gutter">
-      <BlockCards v-if="cards.length" :items="cards" heading-level="h2" />
+      <BlockCards v-if="cards.length" :items="cards" heading-level="h2" eager />
       <BlockEmpty v-else :title="t('empty')" path="content/services/" />
     </div>
   </div>

package/templates/local-business/app/pages/team.vue

@@ -33,7 +33,7 @@ usePageSeo(() => ({
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto flex max-w-page flex-col gap-12 px-gutter md:gap-16">
       <component :is="contact" v-if="contact" />
-      <PeopleList v-if="people.items.length" :items="people.items" />
+      <PeopleList v-if="people.items.length" :items="people.items" eager />
       <BlockEmpty v-else :title="t('empty')" path="content/people/" />
     </div>
   </div>

package/templates/local-business/nuxt.config.ts

@@ -13,6 +13,8 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
   ],
   ginko,
+  // The site's icon: the initial on the brand colour. Replace public/favicon.svg with the real mark.
+  app: { head: { link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] } },
   css: ['~/assets/css/main.css'],
   // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
   colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },

package/templates/local-business/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#0f766e"/><text x="16" y="22.5" text-anchor="middle" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif" font-size="19" font-weight="700" fill="#fff">H</text></svg>

package/templates/nonprofit/app/components/block/Cards.vue

@@ -16,8 +16,9 @@ export interface Card {
 /** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
  *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
  *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
- *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
-const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen.
+ *  `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean, eager?: boolean }>(), { columns: 3, headingLevel: 'h3' })
 // Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
 const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
 const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
@@ -29,7 +30,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
     :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
   >
     <li
-      v-for="item in items"
+      v-for="(item, i) in items"
       :key="item.key"
       class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
       :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
@@ -38,6 +39,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
         v-if="item.image"
         :image="item.image"
         :sizes="sizes"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full bg-muted object-cover"
         :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
       />

package/templates/nonprofit/app/components/blog/PostList.vue

@@ -4,18 +4,19 @@ import type { BlogPost } from '~/composables/useBlog'
 
 /** Posts as rows divided by lines: date and authors, title (the link), summary, and the cover (3:2) at the end of the
  *  row from `sm` up, above the text on phones. A post without a cover is a row without an image, not a gap. `images` false
- *  leaves the covers out (a teaser on a home page). */
-withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean }>(), { headingLevel: 'h2', images: true })
+ *  leaves the covers out (a teaser on a home page). `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean, eager?: boolean }>(), { headingLevel: 'h2', images: true })
 const { format, t } = useI18n('blog')
 </script>
 
 <template>
   <ul class="flex flex-col border-b">
-    <li v-for="post in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
+    <li v-for="(post, i) in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
       <GinkoImage
         v-if="images && post.image"
         :image="post.image"
         sizes="(min-width: 640px) 224px, 100vw"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full shrink-0 rounded-block bg-muted object-cover sm:w-56"
       />
       <div class="flex min-w-0 flex-1 flex-col gap-2">

package/templates/nonprofit/app/components/people/List.vue

@@ -2,17 +2,18 @@
 <script setup lang="ts">
 /** People as a grid: photo (4:5) or initials, name (a link to the person's page when people have pages), role, short
  *  bio and contact. Never a stock face for a named person: without a photo the initials stand in, on phones small and
- *  beside the name, so the bios stay close. */
-defineProps<{ items: GinkoItem<'people'>[] }>()
+ *  beside the name, so the bios stay close. `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+defineProps<{ items: GinkoItem<'people'>[], eager?: boolean }>()
 const { t } = useI18n('people')
 const locale = useGinkoLocale()
 </script>
 
 <template>
   <ul class="grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
-    <li v-for="person in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
+    <li v-for="(person, i) in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
       <GinkoImage
         v-if="person.data.photo"
+        :eager="eager && i === 0"
         :image="person.data.photo"
         sizes="(min-width: 1024px) 384px, (min-width: 640px) 50vw, 100vw"
         class="aspect-4/5 w-full rounded-block bg-muted object-cover"

package/templates/nonprofit/app/pages/events/index.vue

@@ -13,7 +13,7 @@ usePageSeo(() => ({ title: t('title'), description: t('lead') }))
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto max-w-page px-gutter">
       <h2 v-if="cards.length" class="sr-only">{{ t('upcoming') }}</h2>
-      <BlockCards v-if="cards.length" :items="cards" :columns="3" />
+      <BlockCards v-if="cards.length" :items="cards" :columns="3" eager />
       <p v-else class="max-w-prose text-lead text-muted-foreground">{{ t('none') }}</p>
     </div>
   </div>

package/templates/nonprofit/app/pages/news/index.vue

@@ -40,10 +40,10 @@ usePageSeo(() => ({
         <template v-if="years.length > 1">
           <section v-for="group in years" :key="group.year" :aria-labelledby="`year-${group.year}`" class="pt-6 first:pt-0">
             <h2 :id="`year-${group.year}`" class="pb-2 text-h3 tabular-nums">{{ group.year }}</h2>
-            <BlogPostList :items="group.posts" heading-level="h3" />
+            <BlogPostList :items="group.posts" heading-level="h3" :eager="group === years[0]" />
           </section>
         </template>
-        <BlogPostList v-else-if="posts.length" :items="posts" />
+        <BlogPostList v-else-if="posts.length" :items="posts" eager />
         <BlockEmpty v-else :title="t('empty')" path="content/posts/" />
         <a :href="feed" class="mt-6 inline-flex min-h-11 items-center gap-2 text-small text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
           <Rss class="size-4" aria-hidden="true" />{{ t('feed') }}

package/templates/nonprofit/app/pages/news/tags/[tag].vue

@@ -31,7 +31,7 @@ usePageSeo(() => ({ title: title.value, description: t('count', { count: tag.val
     <BlockPageHeader :title="title" :meta="t('count', { count: tag.count })" />
     <div class="mx-auto max-w-page px-gutter">
       <div class="max-w-4xl">
-        <BlogPostList :items="tagged" />
+        <BlogPostList :items="tagged" eager />
         <NuxtLink :to="path('news')" class="mt-6 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
           {{ t('all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
         </NuxtLink>

package/templates/nonprofit/app/pages/projects/index.vue

@@ -17,7 +17,7 @@ usePageSeo(() => ({ title: t('title'), description: t('lead') }))
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto max-w-page px-gutter">
       <component :is="List" v-if="List && projects.items.length" :items="projects.items" />
-      <BlockCards v-else-if="cards.length" :items="cards" heading-level="h2" />
+      <BlockCards v-else-if="cards.length" :items="cards" heading-level="h2" eager />
       <BlockEmpty v-else :title="t('empty')" path="content/projects/" />
     </div>
   </div>

package/templates/nonprofit/app/pages/team.vue

@@ -33,7 +33,7 @@ usePageSeo(() => ({
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto flex max-w-page flex-col gap-12 px-gutter md:gap-16">
       <component :is="contact" v-if="contact" />
-      <PeopleList v-if="people.items.length" :items="people.items" />
+      <PeopleList v-if="people.items.length" :items="people.items" eager />
       <BlockEmpty v-else :title="t('empty')" path="content/people/" />
     </div>
   </div>

package/templates/nonprofit/nuxt.config.ts

@@ -13,6 +13,8 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
   ],
   ginko,
+  // The site's icon: the initial on the brand colour. Replace public/favicon.svg with the real mark.
+  app: { head: { link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] } },
   css: ['~/assets/css/main.css'],
   // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
   colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },

package/templates/nonprofit/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#15803d"/><text x="16" y="22.5" text-anchor="middle" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif" font-size="19" font-weight="700" fill="#fff">R</text></svg>

package/templates/portfolio/app/components/block/Cards.vue

@@ -16,8 +16,9 @@ export interface Card {
 /** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
  *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
  *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
- *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
-const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen.
+ *  `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean, eager?: boolean }>(), { columns: 3, headingLevel: 'h3' })
 // Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
 const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
 const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
@@ -29,7 +30,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
     :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
   >
     <li
-      v-for="item in items"
+      v-for="(item, i) in items"
       :key="item.key"
       class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
       :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
@@ -38,6 +39,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
         v-if="item.image"
         :image="item.image"
         :sizes="sizes"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full bg-muted object-cover"
         :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
       />

package/templates/portfolio/app/components/block/Gallery.vue

@@ -9,10 +9,10 @@ import type { ImageValue } from '@lupinum/ginko'
  * takes the rest of a short last row, so its photos keep about the row height instead of growing past the rows above.
  * Each photo is a button that opens the lightbox at that photo.
  * `stack`: one photo below the other at full width, each in its own ratio, the first loaded at once (the main photos of
- * a page, such as the photos of one project). A photo's description (`alt`) is not shown below it; it stays on the
+ * a page, such as the photos of one project). `eager`: the gallery opens the page, so its first photo loads at once. A photo's description (`alt`) is not shown below it; it stays on the
  * image and in the name of the photo's button.
  */
-const props = defineProps<{ images: ImageValue[], stack?: boolean }>()
+const props = defineProps<{ images: ImageValue[], stack?: boolean, eager?: boolean }>()
 const { t } = useI18n('gallery')
 const list = useTemplateRef<HTMLUListElement>('list')
 const open = ref(false)
@@ -68,7 +68,7 @@ function focusPhoto(i: number) {
           <GinkoImage
             :image="image"
             :sizes="sizes"
-            :eager="stack && i === 0"
+            :eager="(stack || eager) && i === 0"
             class="w-full"
             :class="!stack && ['aspect-3/2 object-cover', rows && 'sm:aspect-(--ratio)']"
           />

package/templates/portfolio/app/components/blog/PostList.vue

@@ -4,18 +4,19 @@ import type { BlogPost } from '~/composables/useBlog'
 
 /** Posts as rows divided by lines: date and authors, title (the link), summary, and the cover (3:2) at the end of the
  *  row from `sm` up, above the text on phones. A post without a cover is a row without an image, not a gap. `images` false
- *  leaves the covers out (a teaser on a home page). */
-withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean }>(), { headingLevel: 'h2', images: true })
+ *  leaves the covers out (a teaser on a home page). `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean, eager?: boolean }>(), { headingLevel: 'h2', images: true })
 const { format, t } = useI18n('blog')
 </script>
 
 <template>
   <ul class="flex flex-col border-b">
-    <li v-for="post in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
+    <li v-for="(post, i) in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
       <GinkoImage
         v-if="images && post.image"
         :image="post.image"
         sizes="(min-width: 640px) 224px, 100vw"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full shrink-0 rounded-block bg-muted object-cover sm:w-56"
       />
       <div class="flex min-w-0 flex-1 flex-col gap-2">

package/templates/portfolio/app/components/people/List.vue

@@ -2,17 +2,18 @@
 <script setup lang="ts">
 /** People as a grid: photo (4:5) or initials, name (a link to the person's page when people have pages), role, short
  *  bio and contact. Never a stock face for a named person: without a photo the initials stand in, on phones small and
- *  beside the name, so the bios stay close. */
-defineProps<{ items: GinkoItem<'people'>[] }>()
+ *  beside the name, so the bios stay close. `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+defineProps<{ items: GinkoItem<'people'>[], eager?: boolean }>()
 const { t } = useI18n('people')
 const locale = useGinkoLocale()
 </script>
 
 <template>
   <ul class="grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
-    <li v-for="person in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
+    <li v-for="(person, i) in items" :id="person.id.split('/').pop()" :key="person.id" class="flex flex-col gap-4 break-inside-avoid">
       <GinkoImage
         v-if="person.data.photo"
+        :eager="eager && i === 0"
         :image="person.data.photo"
         sizes="(min-width: 1024px) 384px, (min-width: 640px) 50vw, 100vw"
         class="aspect-4/5 w-full rounded-block bg-muted object-cover"

package/templates/portfolio/app/pages/news/index.vue

@@ -40,10 +40,10 @@ usePageSeo(() => ({
         <template v-if="years.length > 1">
           <section v-for="group in years" :key="group.year" :aria-labelledby="`year-${group.year}`" class="pt-6 first:pt-0">
             <h2 :id="`year-${group.year}`" class="pb-2 text-h3 tabular-nums">{{ group.year }}</h2>
-            <BlogPostList :items="group.posts" heading-level="h3" />
+            <BlogPostList :items="group.posts" heading-level="h3" :eager="group === years[0]" />
           </section>
         </template>
-        <BlogPostList v-else-if="posts.length" :items="posts" />
+        <BlogPostList v-else-if="posts.length" :items="posts" eager />
         <BlockEmpty v-else :title="t('empty')" path="content/posts/" />
         <a :href="feed" class="mt-6 inline-flex min-h-11 items-center gap-2 text-small text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
           <Rss class="size-4" aria-hidden="true" />{{ t('feed') }}

package/templates/portfolio/app/pages/news/tags/[tag].vue

@@ -31,7 +31,7 @@ usePageSeo(() => ({ title: title.value, description: t('count', { count: tag.val
     <BlockPageHeader :title="title" :meta="t('count', { count: tag.count })" />
     <div class="mx-auto max-w-page px-gutter">
       <div class="max-w-4xl">
-        <BlogPostList :items="tagged" />
+        <BlogPostList :items="tagged" eager />
         <NuxtLink :to="path('news')" class="mt-6 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
           {{ t('all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
         </NuxtLink>

package/templates/portfolio/app/pages/projects/index.vue

@@ -17,7 +17,7 @@ usePageSeo(() => ({ title: t('title'), description: t('lead') }))
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto max-w-page px-gutter">
       <component :is="List" v-if="List && projects.items.length" :items="projects.items" />
-      <BlockCards v-else-if="cards.length" :items="cards" heading-level="h2" />
+      <BlockCards v-else-if="cards.length" :items="cards" heading-level="h2" eager />
       <BlockEmpty v-else :title="t('empty')" path="content/projects/" />
     </div>
   </div>

package/templates/portfolio/app/pages/team.vue

@@ -33,7 +33,7 @@ usePageSeo(() => ({
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto flex max-w-page flex-col gap-12 px-gutter md:gap-16">
       <component :is="contact" v-if="contact" />
-      <PeopleList v-if="people.items.length" :items="people.items" />
+      <PeopleList v-if="people.items.length" :items="people.items" eager />
       <BlockEmpty v-else :title="t('empty')" path="content/people/" />
     </div>
   </div>

package/templates/portfolio/nuxt.config.ts

@@ -13,6 +13,8 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
   ],
   ginko,
+  // The site's icon: the initial on the brand colour. Replace public/favicon.svg with the real mark.
+  app: { head: { link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] } },
   css: ['~/assets/css/main.css'],
   // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
   colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },

package/templates/portfolio/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#1c1917"/><text x="16" y="22.5" text-anchor="middle" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif" font-size="19" font-weight="700" fill="#fff">M</text></svg>

package/templates/restaurant/app/components/block/Cards.vue

@@ -16,8 +16,9 @@ export interface Card {
 /** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
  *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
  *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
- *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
-const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen.
+ *  `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean, eager?: boolean }>(), { columns: 3, headingLevel: 'h3' })
 // Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
 const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
 const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
@@ -29,7 +30,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
     :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
   >
     <li
-      v-for="item in items"
+      v-for="(item, i) in items"
       :key="item.key"
       class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
       :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
@@ -38,6 +39,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
         v-if="item.image"
         :image="item.image"
         :sizes="sizes"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full bg-muted object-cover"
         :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
       />

package/templates/restaurant/app/components/block/Gallery.vue

@@ -9,10 +9,10 @@ import type { ImageValue } from '@lupinum/ginko'
  * takes the rest of a short last row, so its photos keep about the row height instead of growing past the rows above.
  * Each photo is a button that opens the lightbox at that photo.
  * `stack`: one photo below the other at full width, each in its own ratio, the first loaded at once (the main photos of
- * a page, such as the photos of one project). A photo's description (`alt`) is not shown below it; it stays on the
+ * a page, such as the photos of one project). `eager`: the gallery opens the page, so its first photo loads at once. A photo's description (`alt`) is not shown below it; it stays on the
  * image and in the name of the photo's button.
  */
-const props = defineProps<{ images: ImageValue[], stack?: boolean }>()
+const props = defineProps<{ images: ImageValue[], stack?: boolean, eager?: boolean }>()
 const { t } = useI18n('gallery')
 const list = useTemplateRef<HTMLUListElement>('list')
 const open = ref(false)
@@ -68,7 +68,7 @@ function focusPhoto(i: number) {
           <GinkoImage
             :image="image"
             :sizes="sizes"
-            :eager="stack && i === 0"
+            :eager="(stack || eager) && i === 0"
             class="w-full"
             :class="!stack && ['aspect-3/2 object-cover', rows && 'sm:aspect-(--ratio)']"
           />

package/templates/restaurant/app/pages/events/index.vue

@@ -13,7 +13,7 @@ usePageSeo(() => ({ title: t('title'), description: t('lead') }))
     <BlockPageHeader :title="t('title')" :lead="t('lead')" />
     <div class="mx-auto max-w-page px-gutter">
       <h2 v-if="cards.length" class="sr-only">{{ t('upcoming') }}</h2>
-      <BlockCards v-if="cards.length" :items="cards" :columns="3" />
+      <BlockCards v-if="cards.length" :items="cards" :columns="3" eager />
       <p v-else class="max-w-prose text-lead text-muted-foreground">{{ t('none') }}</p>
     </div>
   </div>

package/templates/restaurant/app/pages/gallery.vue

@@ -10,7 +10,7 @@ usePageSeo(() => ({ title: t('gallery'), description: t('galleryLead'), image: i
   <div>
     <BlockPageHeader :title="t('gallery')" :lead="t('galleryLead')" />
     <div class="mx-auto max-w-page px-gutter">
-      <BlockGallery v-if="images.length" :images="images" />
+      <BlockGallery v-if="images.length" :images="images" eager />
       <BlockEmpty v-else :title="t('galleryEmpty')" path="content/gallery.md" />
     </div>
   </div>

package/templates/restaurant/nuxt.config.ts

@@ -13,6 +13,8 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
   ],
   ginko,
+  // The site's icon: the initial on the brand colour. Replace public/favicon.svg with the real mark.
+  app: { head: { link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] } },
   css: ['~/assets/css/main.css'],
   // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
   colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },

package/templates/restaurant/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#c2410c"/><text x="16" y="22.5" text-anchor="middle" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif" font-size="19" font-weight="700" fill="#fff">L</text></svg>

package/templates/saas/app/components/block/Cards.vue

@@ -16,8 +16,9 @@ export interface Card {
 /** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
  *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
  *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
- *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
-const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen.
+ *  `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean, eager?: boolean }>(), { columns: 3, headingLevel: 'h3' })
 // Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
 const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
 const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
@@ -29,7 +30,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
     :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
   >
     <li
-      v-for="item in items"
+      v-for="(item, i) in items"
       :key="item.key"
       class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
       :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
@@ -38,6 +39,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
         v-if="item.image"
         :image="item.image"
         :sizes="sizes"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full bg-muted object-cover"
         :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
       />

package/templates/saas/app/components/blog/PostList.vue

@@ -4,18 +4,19 @@ import type { BlogPost } from '~/composables/useBlog'
 
 /** Posts as rows divided by lines: date and authors, title (the link), summary, and the cover (3:2) at the end of the
  *  row from `sm` up, above the text on phones. A post without a cover is a row without an image, not a gap. `images` false
- *  leaves the covers out (a teaser on a home page). */
-withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean }>(), { headingLevel: 'h2', images: true })
+ *  leaves the covers out (a teaser on a home page). `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+withDefaults(defineProps<{ items: BlogPost[], headingLevel?: 'h2' | 'h3', images?: boolean, eager?: boolean }>(), { headingLevel: 'h2', images: true })
 const { format, t } = useI18n('blog')
 </script>
 
 <template>
   <ul class="flex flex-col border-b">
-    <li v-for="post in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
+    <li v-for="(post, i) in items" :key="post.id" class="group relative flex flex-col gap-5 border-t py-8 sm:flex-row-reverse sm:items-start sm:gap-8">
       <GinkoImage
         v-if="images && post.image"
         :image="post.image"
         sizes="(min-width: 640px) 224px, 100vw"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full shrink-0 rounded-block bg-muted object-cover sm:w-56"
       />
       <div class="flex min-w-0 flex-1 flex-col gap-2">

package/templates/saas/app/pages/changelog.vue

@@ -34,7 +34,7 @@ usePageSeo(() => ({ title: t('title'), description: lead.value }))
               <time :datetime="release.date">{{ format.date(release.date) }}</time>
             </p>
           </div>
-          <GinkoMarkdown :value="release.body" class="prose min-w-0 lg:col-span-8" />
+          <GinkoMarkdown :value="release.body" :id-prefix="release.anchor" class="prose min-w-0 lg:col-span-8" />
         </li>
       </ul>
       <BlockEmpty v-else :title="t('empty')" path="content/changelog/" />

package/templates/saas/app/pages/news/index.vue

@@ -40,10 +40,10 @@ usePageSeo(() => ({
         <template v-if="years.length > 1">
           <section v-for="group in years" :key="group.year" :aria-labelledby="`year-${group.year}`" class="pt-6 first:pt-0">
             <h2 :id="`year-${group.year}`" class="pb-2 text-h3 tabular-nums">{{ group.year }}</h2>
-            <BlogPostList :items="group.posts" heading-level="h3" />
+            <BlogPostList :items="group.posts" heading-level="h3" :eager="group === years[0]" />
           </section>
         </template>
-        <BlogPostList v-else-if="posts.length" :items="posts" />
+        <BlogPostList v-else-if="posts.length" :items="posts" eager />
         <BlockEmpty v-else :title="t('empty')" path="content/posts/" />
         <a :href="feed" class="mt-6 inline-flex min-h-11 items-center gap-2 text-small text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
           <Rss class="size-4" aria-hidden="true" />{{ t('feed') }}

package/templates/saas/app/pages/news/tags/[tag].vue

@@ -31,7 +31,7 @@ usePageSeo(() => ({ title: title.value, description: t('count', { count: tag.val
     <BlockPageHeader :title="title" :meta="t('count', { count: tag.count })" />
     <div class="mx-auto max-w-page px-gutter">
       <div class="max-w-4xl">
-        <BlogPostList :items="tagged" />
+        <BlogPostList :items="tagged" eager />
         <NuxtLink :to="path('news')" class="mt-6 inline-flex min-h-11 items-center gap-2 font-medium text-primary underline-offset-4 hover:underline">
           {{ t('all') }}<ArrowRight class="size-4 rtl:-scale-x-100" aria-hidden="true" />
         </NuxtLink>

package/templates/saas/nuxt.config.ts

@@ -14,6 +14,8 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
   ],
   ginko,
+  // The site's icon: the initial on the brand colour. Replace public/favicon.svg with the real mark.
+  app: { head: { link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] } },
   css: ['~/assets/css/main.css'],
   // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
   colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },

package/templates/saas/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#6d28d9"/><text x="16" y="22.5" text-anchor="middle" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif" font-size="19" font-weight="700" fill="#fff">P</text></svg>

package/templates/starter/app/components/block/Cards.vue

@@ -16,8 +16,9 @@ export interface Card {
 /** Two to four cards per row; the whole card is one link (the title's link stretches over it), marked by an arrow.
  *  Photos are 3:2. `headingLevel`: h3 under a section's h2 (default), h2 when the cards follow the page's h1.
  *  `compact`: on phones (below `sm`) each card is one row, a square photo of 96 px at the start next to the meta line
- *  and the title, without the text and the arrow, so a list of three fits in less than a screen. */
-const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean }>(), { columns: 3, headingLevel: 'h3' })
+ *  and the title, without the text and the arrow, so a list of three fits in less than a screen.
+ *  `eager`: the list opens the page, so the first photo loads at once (it is the largest thing on a phone's first screen). */
+const props = withDefaults(defineProps<{ items: Card[], columns?: 2 | 3 | 4, headingLevel?: 'h2' | 'h3', compact?: boolean, eager?: boolean }>(), { columns: 3, headingLevel: 'h3' })
 // Never an empty column at lg: fewer items than `columns` take that many columns (two at least; one item stays as is).
 const lgColumns = computed(() => (props.items.length > 1 ? Math.min(props.columns, Math.max(2, props.items.length)) : props.columns))
 const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw, ${props.compact ? '96px' : '100vw'}`)
@@ -29,7 +30,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
     :class="{ 'lg:grid-cols-3': lgColumns === 3, 'lg:grid-cols-4': lgColumns === 4, 'max-sm:gap-3': compact }"
   >
     <li
-      v-for="item in items"
+      v-for="(item, i) in items"
       :key="item.key"
       class="group relative flex overflow-hidden rounded-block border bg-card transition-[color,background-color,border-color] duration-150 hover:bg-muted has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-3 has-[a:focus-visible]:outline-ring"
       :class="compact ? 'max-sm:items-center sm:flex-col' : 'flex-col'"
@@ -38,6 +39,7 @@ const sizes = computed(() => `(min-width: 1024px) 384px, (min-width: 640px) 50vw
         v-if="item.image"
         :image="item.image"
         :sizes="sizes"
+        :eager="eager && i === 0"
         class="aspect-3/2 w-full bg-muted object-cover"
         :class="{ 'max-sm:m-3 max-sm:me-0 max-sm:aspect-square max-sm:size-24 max-sm:shrink-0 max-sm:rounded-md': compact }"
       />

package/templates/starter/nuxt.config.ts

@@ -13,6 +13,8 @@ export default defineNuxtConfig({
     'shadcn-nuxt',
   ],
   ginko,
+  // The site's icon: the initial on the brand colour. Replace public/favicon.svg with the real mark.
+  app: { head: { link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] } },
   css: ['~/assets/css/main.css'],
   // Light and dark follow the visitor's system until they pick one with the toggle; `.dark` on <html>.
   colorMode: { classSuffix: '', preference: 'system', fallback: 'light', storageKey: 'color-mode' },

package/templates/starter/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#18181b"/><text x="16" y="22.5" text-anchor="middle" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif" font-size="19" font-weight="700" fill="#fff">K</text></svg>