Skip to content

Commit 17cb9fe

Browse files
knowlerknowler
committed
refactor: remove Transition
1 parent 199673f commit 17cb9fe

File tree

1 file changed

+114
-117
lines changed

1 file changed

+114
-117
lines changed

‎app/pages/about.vue‎

Lines changed: 114 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -278,130 +278,127 @@ function onBeforeToggleHoverCard(event) {
278278
</section>
279279
</article>
280280

281-
<Transition name="pop">
282-
<article
283-
ref="panelRef"
284-
id="contributor-hovercard"
285-
popover="hint"
286-
:aria-label="activeContributor?.name || activeContributor?.login"
287-
class="contributor-hovercard"
288-
@beforetoggle="onBeforeToggleHoverCard"
281+
<article
282+
id="contributor-hovercard"
283+
popover="hint"
284+
:aria-label="activeContributor?.name || activeContributor?.login"
285+
class="contributor-hovercard"
286+
@beforetoggle="onBeforeToggleHoverCard"
287+
>
288+
<div
289+
v-if="activeContributor"
290+
class="flex flex-col gap-y-3 w-64 rounded-xl border border-border-subtle bg-bg-elevated p-4 shadow-2xl text-start"
289291
>
290-
<div
291-
v-if="activeContributor"
292-
class="flex flex-col gap-y-3 w-64 rounded-xl border border-border-subtle bg-bg-elevated p-4 shadow-2xl text-start"
293-
>
294-
<div class="flex flex-col gap-2 min-w-0">
295-
<span class="w-full font-sans font-bold text-fg leading-tight truncate block">
296-
{{ activeContributor.name || activeContributor.login }}
297-
</span>
298-
<div
299-
v-if="roleLabels[activeContributor.role]"
300-
class="font-mono text-3xs uppercase tracking-wider text-accent font-bold"
301-
>
302-
{{ roleLabels[activeContributor.role] }}
303-
</div>
304-
<p
305-
v-if="activeContributor.bio"
306-
class="font-sans text-xs text-fg-subtle line-clamp-3 leading-relaxed"
307-
>
308-
"{{ activeContributor.bio }}"
309-
</p>
310-
<div
311-
v-if="activeContributor.companyHTML"
312-
class="flex items-center gap-1 font-sans text-2xs text-fg-muted min-w-0"
313-
>
314-
<div class="i-lucide:building-2 size-3 shrink-0 text-accent/80" aria-hidden="true" />
315-
<div
316-
class="leading-relaxed break-words min-w-0 [&_a]:(text-accent no-underline hover:underline)"
317-
v-html="activeContributor.companyHTML"
318-
/>
319-
</div>
292+
<div class="flex flex-col gap-2 min-w-0">
293+
<span class="w-full font-sans font-bold text-fg leading-tight truncate block">
294+
{{ activeContributor.name || activeContributor.login }}
295+
</span>
296+
<div
297+
v-if="roleLabels[activeContributor.role]"
298+
class="font-mono text-3xs uppercase tracking-wider text-accent font-bold"
299+
>
300+
{{ roleLabels[activeContributor.role] }}
301+
</div>
302+
<p
303+
v-if="activeContributor.bio"
304+
class="font-sans text-xs text-fg-subtle line-clamp-3 leading-relaxed"
305+
>
306+
"{{ activeContributor.bio }}"
307+
</p>
308+
<div
309+
v-if="activeContributor.companyHTML"
310+
class="flex items-center gap-1 font-sans text-2xs text-fg-muted min-w-0"
311+
>
312+
<div class="i-lucide:building-2 size-3 shrink-0 text-accent/80" aria-hidden="true" />
320313
<div
321-
v-else-if="activeContributor.company"
322-
class="flex items-center gap-1 font-sans text-2xs text-fg-muted min-w-0"
323-
>
324-
<div class="i-lucide:building-2 size-3 shrink-0 text-accent/80" aria-hidden="true" />
325-
<span>{{ activeContributor.company }}</span>
326-
</div>
314+
class="leading-relaxed break-words min-w-0 [&_a]:(text-accent no-underline hover:underline)"
315+
v-html="activeContributor.companyHTML"
316+
/>
327317
</div>
328-
329-
<div class="flex flex-col gap-2 text-3xs text-fg-subtle font-sans">
330-
<div v-if="activeContributor.location" class="flex items-center gap-1">
331-
<div class="i-lucide:map-pin size-3 shrink-0" aria-hidden="true" />
332-
<span class="truncate">{{ activeContributor.location }}</span>
333-
</div>
334-
<a
335-
v-if="activeContributor.websiteUrl"
336-
:href="activeContributor.websiteUrl"
337-
target="_blank"
338-
rel="noopener noreferrer"
339-
class="flex items-center gap-1 hover:text-accent transition-colors"
340-
>
341-
<div class="i-lucide:link size-3 shrink-0" aria-hidden="true" />
342-
<span class="truncate">{{
343-
activeContributor.websiteUrl.replace(/^https?:\/\//, '')
344-
}}</span>
345-
</a>
346-
<a
347-
v-if="activeContributor.twitterUsername"
348-
:href="`https://x.com/${activeContributor.twitterUsername}`"
349-
target="_blank"
350-
rel="noopener noreferrer"
351-
class="flex items-center gap-1 hover:text-accent transition-colors"
352-
>
353-
<div class="i-simple-icons:x size-2.5 shrink-0" aria-hidden="true" />
354-
<span>@{{ activeContributor.twitterUsername }}</span>
355-
</a>
356-
<a
357-
v-if="activeContributor.blueskyHandle"
358-
:href="`https://bsky.app/profile/${activeContributor.blueskyHandle}`"
359-
target="_blank"
360-
rel="noopener noreferrer"
361-
class="flex items-center gap-1 hover:text-accent transition-colors"
362-
>
363-
<div class="i-simple-icons:bluesky size-2.5 shrink-0" aria-hidden="true" />
364-
<span>@{{ activeContributor.blueskyHandle }}</span>
365-
</a>
366-
<a
367-
v-if="activeContributor.mastodonUrl"
368-
:href="activeContributor.mastodonUrl"
369-
target="_blank"
370-
rel="noopener noreferrer"
371-
class="flex items-center gap-1 hover:text-accent transition-colors"
372-
>
373-
<div class="i-simple-icons:mastodon size-2.5 shrink-0" aria-hidden="true" />
374-
<span class="truncate">{{
375-
activeContributor.mastodonUrl.replace(/^https?:\/\//, '').replace(/\/@?/, '@')
376-
}}</span>
377-
</a>
318+
<div
319+
v-else-if="activeContributor.company"
320+
class="flex items-center gap-1 font-sans text-2xs text-fg-muted min-w-0"
321+
>
322+
<div class="i-lucide:building-2 size-3 shrink-0 text-accent/80" aria-hidden="true" />
323+
<span>{{ activeContributor.company }}</span>
378324
</div>
325+
</div>
379326

380-
<div class="flex items-center justify-between border-t border-border-subtle pt-3">
381-
<a
382-
:href="activeContributor.html_url"
383-
target="_blank"
384-
rel="noopener noreferrer"
385-
class="text-3xs text-fg-subtle font-mono hover:text-accent"
386-
>
387-
@{{ activeContributor.login }}
388-
</a>
389-
390-
<a
391-
v-if="activeContributor.sponsors_url"
392-
:href="activeContributor.sponsors_url"
393-
:aria-label="$t('about.team.sponsor_aria', { name: activeContributor.login })"
394-
target="_blank"
395-
rel="noopener noreferrer"
396-
class="flex items-center gap-1 rounded border border-purple-700/30 bg-purple-700/5 text-purple-700 dark:border-purple-300/30 dark:bg-purple-300/5 dark:text-purple-300 px-2 py-0.5 text-4xs font-bold uppercase tracking-wider transition-colors hover:bg-purple-700/15 dark:hover:bg-purple-300/15"
397-
>
398-
<span class="i-lucide:heart size-3" aria-hidden="true" />
399-
<span>{{ $t('about.team.sponsor') }}</span>
400-
</a>
327+
<div class="flex flex-col gap-2 text-3xs text-fg-subtle font-sans">
328+
<div v-if="activeContributor.location" class="flex items-center gap-1">
329+
<div class="i-lucide:map-pin size-3 shrink-0" aria-hidden="true" />
330+
<span class="truncate">{{ activeContributor.location }}</span>
401331
</div>
332+
<a
333+
v-if="activeContributor.websiteUrl"
334+
:href="activeContributor.websiteUrl"
335+
target="_blank"
336+
rel="noopener noreferrer"
337+
class="flex items-center gap-1 hover:text-accent transition-colors"
338+
>
339+
<div class="i-lucide:link size-3 shrink-0" aria-hidden="true" />
340+
<span class="truncate">{{
341+
activeContributor.websiteUrl.replace(/^https?:\/\//, '')
342+
}}</span>
343+
</a>
344+
<a
345+
v-if="activeContributor.twitterUsername"
346+
:href="`https://x.com/${activeContributor.twitterUsername}`"
347+
target="_blank"
348+
rel="noopener noreferrer"
349+
class="flex items-center gap-1 hover:text-accent transition-colors"
350+
>
351+
<div class="i-simple-icons:x size-2.5 shrink-0" aria-hidden="true" />
352+
<span>@{{ activeContributor.twitterUsername }}</span>
353+
</a>
354+
<a
355+
v-if="activeContributor.blueskyHandle"
356+
:href="`https://bsky.app/profile/${activeContributor.blueskyHandle}`"
357+
target="_blank"
358+
rel="noopener noreferrer"
359+
class="flex items-center gap-1 hover:text-accent transition-colors"
360+
>
361+
<div class="i-simple-icons:bluesky size-2.5 shrink-0" aria-hidden="true" />
362+
<span>@{{ activeContributor.blueskyHandle }}</span>
363+
</a>
364+
<a
365+
v-if="activeContributor.mastodonUrl"
366+
:href="activeContributor.mastodonUrl"
367+
target="_blank"
368+
rel="noopener noreferrer"
369+
class="flex items-center gap-1 hover:text-accent transition-colors"
370+
>
371+
<div class="i-simple-icons:mastodon size-2.5 shrink-0" aria-hidden="true" />
372+
<span class="truncate">{{
373+
activeContributor.mastodonUrl.replace(/^https?:\/\//, '').replace(/\/@?/, '@')
374+
}}</span>
375+
</a>
376+
</div>
377+
378+
<div class="flex items-center justify-between border-t border-border-subtle pt-3">
379+
<a
380+
:href="activeContributor.html_url"
381+
target="_blank"
382+
rel="noopener noreferrer"
383+
class="text-3xs text-fg-subtle font-mono hover:text-accent"
384+
>
385+
@{{ activeContributor.login }}
386+
</a>
387+
388+
<a
389+
v-if="activeContributor.sponsors_url"
390+
:href="activeContributor.sponsors_url"
391+
:aria-label="$t('about.team.sponsor_aria', { name: activeContributor.login })"
392+
target="_blank"
393+
rel="noopener noreferrer"
394+
class="flex items-center gap-1 rounded border border-purple-700/30 bg-purple-700/5 text-purple-700 dark:border-purple-300/30 dark:bg-purple-300/5 dark:text-purple-300 px-2 py-0.5 text-4xs font-bold uppercase tracking-wider transition-colors hover:bg-purple-700/15 dark:hover:bg-purple-300/15"
395+
>
396+
<span class="i-lucide:heart size-3" aria-hidden="true" />
397+
<span>{{ $t('about.team.sponsor') }}</span>
398+
</a>
402399
</div>
403-
</article>
404-
</Transition>
400+
</div>
401+
</article>
405402
</main>
406403
</template>
407404

0 commit comments

Comments
 (0)