Skip to content

feat: add kawai logo in npmx.dev homepage #2346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
patak-cat merged 12 commits into from
Mar 31, 2026
Merged

feat: add kawai logo in npmx.dev homepage #2346

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bd3f798
feat: add kawai logos
alfonsusac Mar 31, 2026
fb57265
fix: typo in classname
alfonsusac Mar 31, 2026
4c1eab6
fix: use a more meaningful alt text for the kawai logo
alfonsusac Mar 31, 2026
d2f2a2f
fix: using double i instead of single i
alfonsusac Mar 31, 2026
c26ef05
fix: hydration issue + added scale-in animation
alfonsusac Mar 31, 2026
d5cab9c
[autofix.ci] apply automated fixes
autofix-ci[bot] Mar 31, 2026
37f1b25
fix: only allow kawaii search key and not something else
alfonsusac Mar 31, 2026
b6ec909
fix: improve type casting + improve naming + shorten kawaii detection
alfonsusac Mar 31, 2026
d6289c5
fix: remove redundant code + added locale for alt-text
alfonsusac Mar 31, 2026
7926464
fix: update i18n schema
alfonsusac Mar 31, 2026
e326bb0
feat: add tkawaii logo on april first
alexdln Mar 31, 2026
920d30d
test: add a11y test for landing-logo
alexdln Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ defineOgImageComponent('Default', {
title: 'npmx',
description: 'a fast, modern browser for the **npm registry**',
})

const route = useRoute()
const isKawaii = computed(() => route.query.kawai === 'true')
</script>

<template>
Expand All @@ -36,8 +39,16 @@ defineOgImageComponent('Default', {
dir="ltr"
class="relative flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-6 motion-safe:animate-fade-in motion-safe:animate-fill-both"
>
<AppLogo class="w-42 h-auto sm:w-58 md:w-70" />
<img
v-if="isKawaii === true"
width="400"
class="pb-8 motion-safe:animate-fade-in motion-safe:hover:scale-105 motion-safe:transition"
src="/extra/npmx-cute.svg"
alt="npmx kawaii logo"
/>
<AppLogo v-if="isKawaii !== true" class="w-42 h-auto sm:w-58 md:w-70" />
<span
v-if="isKawaii !== true"
aria-hidden="true"
class="text-sm sm:text-base md:text-lg transform-origin-br font-mono tracking-widest text-accent absolute -bottom-4 -inset-ie-1.5"
>
Expand All @@ -46,6 +57,7 @@ defineOgImageComponent('Default', {
</h1>

<p
v-if="isKawaii !== true"
class="text-fg-muted text-lg sm:text-xl max-w-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both"
style="animation-delay: 0.1s"
>
Expand Down
Loading
Loading