mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
docs: drop the note and marks beside the figures
Nothing feeds the trailing side of the stats row anymore, so the content, the schema and the component's props for it go.
This commit is contained in:
@@ -3,27 +3,16 @@
|
||||
import { NuxtLink } from '#components'
|
||||
|
||||
/**
|
||||
* A row of figures for the hero's `bottom` slot: the figures on the left,
|
||||
* each a link when it has somewhere to go, and on the right either the
|
||||
* platforms the library runs on (`marks`, led by the `note`) or a caption
|
||||
* saying where the figures come from (the `note` alone).
|
||||
* A row of figures for the hero's `bottom` slot, each a link when it has
|
||||
* somewhere to go.
|
||||
*/
|
||||
defineProps<{
|
||||
items: { value: string, label: string, to?: string }[]
|
||||
/** The caption opposite the figures: alone, or leading the marks. */
|
||||
note?: string
|
||||
/** A glyph ahead of the note, when the note names its source. */
|
||||
noteIcon?: string
|
||||
/** The platforms behind the note, each its logo in its own color with its name. */
|
||||
marks?: { icon: string, label: string, color?: string }[]
|
||||
}>()
|
||||
|
||||
// the figures' captions and the note share one voice
|
||||
const captionClass = 'text-[11.5px] font-medium uppercase tracking-[.09em] text-muted whitespace-nowrap'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UContainer class="relative pt-14 pb-7.5 flex flex-wrap items-end gap-x-10 sm:gap-x-14 gap-y-6">
|
||||
<div class="relative flex flex-wrap items-end justify-end gap-x-10 sm:gap-x-14 gap-y-6">
|
||||
<component
|
||||
:is="item.to ? NuxtLink : 'div'"
|
||||
v-for="item in items"
|
||||
@@ -35,24 +24,9 @@ const captionClass = 'text-[11.5px] font-medium uppercase tracking-[.09em] text-
|
||||
<span class="text-3xl sm:text-[34px] font-semibold leading-[.95] tracking-[-.03em] tabular-nums text-highlighted group-hover:text-primary transition-colors">
|
||||
{{ item.value }}
|
||||
</span>
|
||||
<span :class="captionClass">
|
||||
<span class="text-[11.5px] font-medium uppercase tracking-[.09em] text-muted whitespace-nowrap">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</component>
|
||||
|
||||
<!-- the trailing side sits on the captions' baseline -->
|
||||
<div v-if="marks?.length" class="ms-auto pb-1 flex flex-wrap items-center gap-5">
|
||||
<span v-if="note" :class="captionClass">{{ note }}</span>
|
||||
|
||||
<span v-for="mark in marks" :key="mark.label" class="flex items-center gap-2">
|
||||
<UIcon :name="mark.icon" class="size-5.5 shrink-0" :style="mark.color ? { color: mark.color } : undefined" />
|
||||
<span class="text-[15px] font-semibold tracking-[-.01em] text-highlighted">{{ mark.label }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span v-else-if="note" class="ms-auto pb-1 flex items-center gap-2">
|
||||
<UIcon v-if="noteIcon" :name="noteIcon" class="size-3.75 shrink-0 text-highlighted" />
|
||||
<span :class="captionClass">{{ note }}</span>
|
||||
</span>
|
||||
</UContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -88,9 +88,7 @@ const people = computed(() => (github.value?.contributors ?? []).map((contributo
|
||||
<template>
|
||||
<UMain v-if="page">
|
||||
<PageHero v-bind="page.hero">
|
||||
<template #bottom>
|
||||
<PageStats :items="stats" v-bind="page.stats" />
|
||||
</template>
|
||||
<PageStats :items="stats" />
|
||||
</PageHero>
|
||||
|
||||
<UContainer>
|
||||
|
||||
@@ -42,19 +42,6 @@ const PageHero = z.object({
|
||||
links: z.array(Button).optional()
|
||||
})
|
||||
|
||||
/** The trailing side of the figures row under the hero (PageStats). */
|
||||
const PageStats = z.object({
|
||||
/** The caption opposite the figures, alone or leading the marks. */
|
||||
note: z.string().optional(),
|
||||
noteIcon: z.string().optional(),
|
||||
/** The platforms behind the note: a logo in its own color with its name. */
|
||||
marks: z.array(z.object({
|
||||
icon: z.string(),
|
||||
label: z.string(),
|
||||
color: z.string().optional()
|
||||
})).optional()
|
||||
})
|
||||
|
||||
// `@nuxtjs/sitemap` only walks a collection whose schema declares this field,
|
||||
// and reads its per-page options (`lastmod`, `changefreq`, `priority`) off it.
|
||||
const sitemap = defineSitemapSchema({ z })
|
||||
@@ -63,7 +50,6 @@ const Page = z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
hero: PageHero,
|
||||
stats: PageStats.optional(),
|
||||
sitemap
|
||||
})
|
||||
|
||||
|
||||
@@ -18,12 +18,3 @@ hero:
|
||||
variant: outline
|
||||
color: neutral
|
||||
trailingIcon: i-lucide-arrow-right
|
||||
stats:
|
||||
note: Works with
|
||||
marks:
|
||||
- icon: i-simple-icons-nuxt
|
||||
label: Nuxt
|
||||
color: '#00dc82'
|
||||
- icon: i-simple-icons-vite
|
||||
label: Vite
|
||||
color: '#646cff'
|
||||
|
||||
@@ -8,6 +8,3 @@ hero:
|
||||
lead: Meet the
|
||||
accent: Team
|
||||
description: Nuxt UI is built in the open by contributors from all over the world. Here is everyone who ships it, ranked by their contributions on GitHub.
|
||||
stats:
|
||||
note: Updated weekly
|
||||
noteIcon: i-simple-icons-github
|
||||
|
||||
Reference in New Issue
Block a user