Skip to content

Commit e6d5303

Browse files
mbabkerclaude
mbabker
and
claude
committed
Add reusable AppAlert component for documentation page alerts
Extract the repeated alert markup (unsupported package, unreleased version, end-of-support version) into a shared AppAlert component with variant-based styling and icons. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent ec11748 commit e6d5303

3 files changed

Lines changed: 85 additions & 56 deletions

File tree

‎app/components/app/Alert.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
variant: AlertVariant
4+
}>()
5+
6+
defineSlots<{
7+
default: (props: Record<string, never>) => any // eslint-disable-line @typescript-eslint/no-explicit-any
8+
title?: (props: Record<string, never>) => any // eslint-disable-line @typescript-eslint/no-explicit-any
9+
}>()
10+
11+
// eslint-disable-next-line vue/return-in-computed-property -- All variant values are covered
12+
const variantConfig = computed(() => {
13+
switch (props.variant) {
14+
case 'danger':
15+
return {
16+
icon: 'fa7-solid:circle-xmark',
17+
container: 'border-red-200 bg-red-50',
18+
iconColor: 'text-red-400',
19+
title: 'text-red-800',
20+
body: 'text-red-700',
21+
}
22+
case 'info':
23+
return {
24+
icon: 'fa7-solid:info-circle',
25+
container: 'border-blue-200 bg-blue-50',
26+
iconColor: 'text-blue-400',
27+
title: 'text-blue-800',
28+
body: 'text-blue-700',
29+
}
30+
case 'warning':
31+
return {
32+
icon: 'fa7-solid:exclamation-triangle',
33+
container: 'border-yellow-200 bg-yellow-50',
34+
iconColor: 'text-yellow-400',
35+
title: 'text-yellow-800',
36+
body: 'text-yellow-700',
37+
}
38+
}
39+
})
40+
</script>
41+
42+
<template>
43+
<div :class="['mb-6 rounded-lg border p-4', variantConfig.container]">
44+
<div class="flex">
45+
<div class="shrink-0">
46+
<Icon :name="variantConfig.icon" :class="['h-5 w-5 fill-current', variantConfig.iconColor]" />
47+
</div>
48+
<div class="ml-3">
49+
<div :class="['text-xl font-semibold', variantConfig.title]">
50+
<slot name="title" />
51+
</div>
52+
<p :class="['text-md mt-1', variantConfig.body]">
53+
<slot />
54+
</p>
55+
</div>
56+
</div>
57+
</div>
58+
</template>

‎app/pages/open-source/packages/[slug]/docs/[version]/[...path].vue‎

Lines changed: 26 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -167,64 +167,34 @@ onUnmounted(() => {
167167
</aside>
168168

169169
<main class="lg:col-span-9 xl:col-span-10">
170-
<div v-if="!pkg.supported" class="mb-6 rounded-lg border border-red-200 bg-red-50 p-4">
171-
<div class="flex">
172-
<div class="shrink-0">
173-
<Icon name="fa7-solid:circle-xmark" class="h-5 w-5 fill-current text-red-400" />
174-
</div>
175-
<div class="ml-3">
176-
<div class="text-xl font-semibold text-red-800">Package No Longer Supported</div>
177-
<p class="text-md mt-1 text-red-700">
178-
The {{ pkg.name }} package is no longer supported and will not receive further
179-
updates or bug fixes. You are advised to migrate to an alternative solution.
180-
</p>
181-
</div>
182-
</div>
183-
</div>
184-
185-
<div v-if="!pkgVersion!.released" class="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
186-
<div class="flex">
187-
<div class="shrink-0">
188-
<Icon name="fa7-solid:info-circle" class="h-5 w-5 fill-current text-blue-400" />
189-
</div>
190-
<div class="ml-3">
191-
<div class="text-xl font-semibold text-blue-800">Version Not Yet Released</div>
192-
<p class="text-md mt-1 text-blue-700">
193-
You are viewing the documentation for the {{ pkgVersion!.version }} branch of the
194-
{{ pkg.name }} package which has not yet been released. Be aware that the API for
195-
this version may change before release.
196-
</p>
197-
</div>
198-
</div>
199-
</div>
200-
201-
<div
170+
<AppAlert v-if="!pkg.supported" variant="danger">
171+
<template #title>Package No Longer Supported</template>
172+
The {{ pkg.name }} package is no longer supported and will not receive further updates or bug
173+
fixes. You are advised to migrate to an alternative solution.
174+
</AppAlert>
175+
176+
<AppAlert v-if="!pkgVersion!.released" variant="info">
177+
<template #title>Version Not Yet Released</template>
178+
You are viewing the documentation for the {{ pkgVersion!.version }} branch of the
179+
{{ pkg.name }} package which has not yet been released. Be aware that the API for this version
180+
may change before release.
181+
</AppAlert>
182+
183+
<AppAlert
202184
v-if="pkgVersion!.endOfSupport && new Date(pkgVersion!.endOfSupport) < new Date()"
203-
class="mb-6 rounded-lg border border-yellow-200 bg-yellow-50 p-4"
185+
variant="warning"
204186
>
205-
<div class="flex">
206-
<div class="shrink-0">
207-
<Icon
208-
name="fa7-solid:exclamation-triangle"
209-
class="h-5 w-5 fill-current text-yellow-400"
210-
/>
211-
</div>
212-
<div class="ml-3">
213-
<div class="text-xl font-semibold text-yellow-800">Version No Longer Supported</div>
214-
<p class="text-md mt-1 text-yellow-700">
215-
You are viewing the documentation for the {{ pkgVersion!.version }} branch of the
216-
{{ pkg.name }} package which is no longer supported as of
217-
<NuxtTime
218-
:datetime="pkgVersion!.endOfSupport"
219-
year="numeric"
220-
month="long"
221-
day="numeric"
222-
locale="en-US"
223-
/>. You are advised to upgrade as soon as possible to a supported version.
224-
</p>
225-
</div>
226-
</div>
227-
</div>
187+
<template #title>Version No Longer Supported</template>
188+
You are viewing the documentation for the {{ pkgVersion!.version }} branch of the
189+
{{ pkg.name }} package which is no longer supported as of
190+
<NuxtTime
191+
:datetime="pkgVersion!.endOfSupport"
192+
year="numeric"
193+
month="long"
194+
day="numeric"
195+
locale="en-US"
196+
/>. You are advised to upgrade as soon as possible to a supported version.
197+
</AppAlert>
228198

229199
<div class="rounded-lg border border-gray-200 bg-white shadow-sm">
230200
<div class="p-8">

‎shared/types/alerts.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export type AlertVariant = 'danger' | 'info' | 'warning'

0 commit comments

Comments
 (0)