Release 202506031821

web/src/components/BadgeSmall.astro

@@ -2,13 +2,14 @@
 import { Icon } from 'astro-icon/components'
 import { tv, type VariantProps } from 'tailwind-variants'
 
+import type { AstroChildren } from '../lib/astro'
 import type { Polymorphic } from 'astro/types'
 
 const badge = tv({
   slots: {
     base: 'inline-flex h-4 items-center justify-center gap-0.75 rounded-full px-1.25 text-[10px] font-medium',
     icon: 'size-3 shrink-0',
-    text: 'mx-0.25 overflow-hidden text-ellipsis whitespace-nowrap',
+    text: 'mx-0.25 overflow-hidden text-ellipsis whitespace-nowrap [&>a]:hover:underline [&>a]:focus-visible:underline',
   },
   variants: {
     color: {
@@ -122,18 +123,22 @@ const badge = tv({
   },
 })
 
-type Props<Tag extends 'a' | 'div' | 'li' = 'div'> = Polymorphic<
+type Props<
+  Tag extends 'a' | 'div' | 'li' = 'div',
+  Text extends string | undefined = string | undefined,
+> = Polymorphic<
   VariantProps<typeof badge> & {
     as: Tag
     icon?: string
     endIcon?: string
-    text: string
+    text?: Text
     inlineIcon?: boolean
     classNames?: {
       icon?: string
       text?: string
       endIcon?: string
     }
+    children?: Text extends string ? never : AstroChildren
   }
 >
 
@@ -161,7 +166,7 @@ const { base, icon: iconSlot, text: textSlot } = badge({ color, variant })
       <Icon name={iconName} class={iconSlot({ class: classNames?.icon })} is:inline={inlineIcon} />
     )
   }
-  <span class={textSlot({ class: classNames?.text })}>{textContent}</span>
+  <span class={textSlot({ class: classNames?.text })}>{textContent ?? <slot />}</span>
   {
     !!endIconName && (
       <Icon name={endIconName} class={iconSlot({ class: classNames?.endIcon })} is:inline={inlineIcon} />

web/src/components/CommentItem.astro

@@ -243,13 +243,10 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
         comment.author.serviceAffiliations.map((affiliation) => {
           const roleInfo = getServiceUserRoleInfo(affiliation.role)
           return (
-            <BadgeSmall
-              icon={roleInfo.icon}
-              color={roleInfo.color}
-              text={`${roleInfo.label} at ${affiliation.service.name}`}
-              variant="faded"
-              inlineIcon
-            />
+            <BadgeSmall icon={roleInfo.icon} color={roleInfo.color} variant="faded" inlineIcon>
+              {roleInfo.label} at
+              <a href={`/service/${affiliation.service.slug}`}>{affiliation.service.name}</a>
+            </BadgeSmall>
           )
         })
       }

web/src/components/VerificationWarningBanner.astro

@@ -56,7 +56,15 @@ const wasRecentlyAdded = isPast(listedDate) && differenceInDays(new Date(), list
   ) : service.verificationStatus === 'COMMUNITY_CONTRIBUTED' ? (
     <div class="mb-3 flex items-center gap-2 rounded-md bg-yellow-600/30 p-2 text-sm text-yellow-200">
       <Icon name="ri:alert-line" class="size-5 text-yellow-400" />
-      <span>Community-contributed. Information not reviewed.</span>
+      <span>
+        Community-contributed. Information not reviewed.
+        <a
+          href="/about#suggestion-review-process"
+          class="text-yellow-100 underline opacity-50 transition-opacity hover:opacity-100 focus-visible:opacity-100"
+        >
+          Learn more
+        </a>
+      </span>
     </div>
   ) : wasRecentlyAdded ? (
     <div class="mb-3 rounded-md bg-red-900/50 p-2 text-sm text-red-400">
@@ -64,11 +72,25 @@ const wasRecentlyAdded = isPast(listedDate) && differenceInDays(new Date(), list
       <TimeFormatted date={listedDate} daysUntilDate={RECENTLY_ADDED_DAYS} />
       {service.verificationStatus !== 'VERIFICATION_SUCCESS' && ' and it is not verified'}. Proceed with
       caution.
+      <a
+        href="/about#suggestion-review-process"
+        class="text-yellow-100 underline opacity-50 transition-opacity hover:opacity-100 focus-visible:opacity-100"
+      >
+        Learn more
+      </a>
     </div>
   ) : service.verificationStatus !== 'VERIFICATION_SUCCESS' ? (
     <div class="mb-3 flex items-center gap-2 rounded-md bg-blue-600/30 p-2 text-sm text-blue-200">
       <Icon name="ri:information-line" class="size-5 text-blue-400" />
-      <span>Basic checks passed, but not fully verified.</span>
+      <span>
+        Basic checks passed, but not fully verified.
+        <a
+          href="/about#suggestion-review-process"
+          class="text-yellow-100 underline opacity-50 transition-opacity hover:opacity-100 focus-visible:opacity-100"
+        >
+          Learn more
+        </a>
+      </span>
     </div>
   ) : null
 }