Skip to content

Commit d67f565

Browse files
bjohansebasbjohansebas
authored
feat: add kawaii logo (#2272)
1 parent 3df5f93 commit d67f565

10 files changed

Lines changed: 127 additions & 16 deletions

File tree

‎public/images/logos/express-kawaii.webp‎

70.4 KB
Loading

‎src/components/patterns/Footer/Footer.astro‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77
import './Footer.css';
88
import { Icon } from 'astro-icon/components';
9-
import { BodyMd, Col, Container, Grid } from '@/components/primitives';
9+
import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives';
1010
---
1111

1212
<footer class="footer">
@@ -84,6 +84,20 @@ import { BodyMd, Col, Container, Grid } from '@/components/primitives';
8484
</Col>
8585
<Col xs={12} md={6} lg={6}>
8686
<ul class="footer__socials" aria-label="Social links">
87+
<li>
88+
<Button
89+
id="kawaiiToggle"
90+
class="kawaii-toggle"
91+
type="button"
92+
aria-label="Toggle kawaii logo"
93+
aria-pressed="false"
94+
variant="secondary"
95+
size="xs"
96+
ghost
97+
>
98+
Kawaii?
99+
</Button>
100+
</li>
87101
<li>
88102
<a
89103
href="https://github.com/expressjs/express"
@@ -142,3 +156,27 @@ import { BodyMd, Col, Container, Grid } from '@/components/primitives';
142156
</Container>
143157
</div>
144158
</footer>
159+
160+
<script>
161+
const toggle = document.getElementById('kawaiiToggle');
162+
const isKawaii = localStorage.getItem('kawaii') === 'true';
163+
164+
if (isKawaii) {
165+
document.documentElement.setAttribute('data-kawaii', '');
166+
toggle?.setAttribute('aria-pressed', 'true');
167+
}
168+
169+
toggle?.addEventListener('click', () => {
170+
const active = document.documentElement.hasAttribute('data-kawaii');
171+
172+
if (active) {
173+
document.documentElement.removeAttribute('data-kawaii');
174+
localStorage.removeItem('kawaii');
175+
toggle.setAttribute('aria-pressed', 'false');
176+
} else {
177+
document.documentElement.setAttribute('data-kawaii', '');
178+
localStorage.setItem('kawaii', 'true');
179+
toggle.setAttribute('aria-pressed', 'true');
180+
}
181+
});
182+
</script>

‎src/components/patterns/Footer/Footer.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
display: flex;
7171
align-items: center;
7272
justify-content: center;
73-
gap: var(--space-8);
73+
gap: var(--space-6);
7474

7575
li {
7676
display: inline;
@@ -90,7 +90,7 @@
9090

9191
@media (--md-up) {
9292
justify-content: right;
93-
gap: var(--space-10);
93+
gap: var(--space-8);
9494
}
9595
}
9696

@@ -123,4 +123,12 @@
123123
[data-theme='light'] .footer-logo-dark {
124124
display: none;
125125
}
126+
127+
.kawaii-toggle {
128+
font-size: var(--font-size-sm);
129+
}
130+
131+
.kawaii-toggle[aria-pressed='true'] {
132+
color: var(--color-link);
133+
}
126134
}

‎src/components/patterns/Header/Header.astro‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* Main site header with logo and navigation menu
66
*/
77
import './Header.css';
8+
import { Image } from 'astro:assets';
89
import { Icon } from 'astro-icon/components';
910
import { Flex } from '@/components/primitives';
1011
import { ThemeSwitcher, SearchBox, LanguageSelect } from '@components/patterns';
@@ -30,8 +31,15 @@ const t = useTranslations(currentLang);
3031
<span class="hamburger-line"></span>
3132
</button>
3233
<a href={`/${currentLang}/`} class="logo-link" aria-label={t('nav.home')}>
33-
<Icon name="logo-dark" class="logo logo-dark" />
34-
<Icon name="logo-light" class="logo logo-light" />
34+
<Image
35+
src="/images/logos/express-kawaii.webp"
36+
alt="Express.js kawaii logo"
37+
class="logo logo-kawaii"
38+
width={40}
39+
height={40}
40+
/>
41+
<Icon name="logo-dark" class="logo logo-dark logo-default" />
42+
<Icon name="logo-light" class="logo logo-light logo-default" />
3543
</a>
3644
</Flex>
3745
<Flex align="center" justify="center" gap="2">

‎src/components/patterns/Header/Header.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,24 @@
6363
}
6464
}
6565

66+
.logo-kawaii {
67+
display: none;
68+
height: var(--size-8);
69+
width: auto;
70+
71+
@media (--md-up) {
72+
height: var(--size-10);
73+
}
74+
}
75+
76+
:root[data-kawaii] .logo-kawaii {
77+
display: block;
78+
}
79+
80+
:root[data-kawaii] .logo-default {
81+
display: none;
82+
}
83+
6684
:root[data-theme='light'] .logo-light,
6785
:root:not([data-theme]) .logo-light {
6886
display: none;

‎src/components/patterns/Hero/Hero.astro‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,15 @@ const { videoSrc, videoSrcLight, posterSrc, posterSrcLight } = Astro.props;
9696
<div class="hero__content">
9797
<Flex align="end" gap="4">
9898
<div class="hero__logo">
99-
<Icon name="logo-express-black" class="hero__logo-icon--dark" />
100-
<Icon name="logo-express-white" class="hero__logo-icon--light" />
99+
<Image
100+
src="/images/logos/express-kawaii.webp"
101+
alt="Express.js kawaii logo"
102+
class="hero__logo-kawaii"
103+
width={400}
104+
height={225}
105+
/>
106+
<Icon name="logo-express-black" class="hero__logo-icon--dark hero__logo-default" />
107+
<Icon name="logo-express-white" class="hero__logo-icon--light hero__logo-default" />
101108
</div>
102109
<BodyMd vMargin={false}>{EXPRESS_VERSION}</BodyMd>
103110
</Flex>

‎src/components/patterns/Hero/Hero.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,11 +204,24 @@
204204
width: var(--size-36);
205205
}
206206

207-
.hero__logo svg {
207+
.hero__logo svg,
208+
.hero__logo img {
208209
width: 100%;
209210
height: auto;
210211
}
211212

213+
.hero__logo-kawaii {
214+
display: none;
215+
}
216+
217+
:root[data-kawaii] .hero__logo-kawaii {
218+
display: block;
219+
}
220+
221+
:root[data-kawaii] .hero__logo-default {
222+
display: none !important;
223+
}
224+
212225
@media (--md-up) {
213226
.hero__logo {
214227
width: var(--size-52);

‎src/components/patterns/Sidebar/SidebarMenu.astro‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Menu, VersionPrefix } from '@/config/types';
33
import type { VersionConfig } from '@/components/patterns/VersionSwitcher/types';
44
import type { LanguageCode } from '@/i18n/locales';
55
import { Body } from '@/components/primitives';
6+
import { Image } from 'astro:assets';
67
import { Icon } from 'astro-icon/components';
78
import { VersionSwitcher } from '@/components/patterns';
89
import { useTranslations } from '@/i18n/utils';
@@ -77,8 +78,15 @@ const commonItemsListProps = {
7778
<ul class="sidebar-nav-list">
7879
<li class="sidebar-logo-item">
7980
<a href={`/${lang}/`} class="logo-link sidebar-nav-item" aria-label={t('nav.home')}>
80-
<Icon name="logo-dark" class="logo logo-dark" />
81-
<Icon name="logo-light" class="logo logo-light" />
81+
<Image
82+
src="/images/logos/express-kawaii.webp"
83+
alt="Express.js kawaii logo"
84+
class="logo logo-kawaii"
85+
width={40}
86+
height={40}
87+
/>
88+
<Icon name="logo-dark" class="logo logo-dark logo-default" />
89+
<Icon name="logo-light" class="logo logo-light logo-default" />
8290
</a>
8391
</li>
8492
{

‎src/components/primitives/LogoDisplay/LogoDisplay.astro‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* Displays both logo variants (dark and light) as cards side by side,
66
* each with a contrasting background and a download button.
77
*/
8+
import { Image } from 'astro:assets';
89
import { Button } from '@components/primitives';
910
import { getLangFromUrl, useTranslations } from '@i18n/utils';
1011
import './LogoDisplay.css';
@@ -23,12 +24,12 @@ const t = useTranslations(lang);
2324
<div class="logo-display">
2425
<div class="logo-display__card">
2526
<div class="logo-display__preview logo-display__preview--light-bg">
26-
<img
27+
<Image
2728
src={darkSrc}
2829
alt={`${alt} (dark)`}
2930
class="logo-display__img"
30-
width="200"
31-
height="65"
31+
width={200}
32+
height={65}
3233
loading="lazy"
3334
/>
3435
</div>
@@ -38,12 +39,12 @@ const t = useTranslations(lang);
3839
</div>
3940
<div class="logo-display__card">
4041
<div class="logo-display__preview logo-display__preview--dark-bg">
41-
<img
42+
<Image
4243
src={lightSrc}
4344
alt={`${alt} (light)`}
4445
class="logo-display__img"
45-
width="200"
46-
height="65"
46+
width={200}
47+
height={65}
4748
loading="lazy"
4849
/>
4950
</div>

‎src/content/pages/en/resources/community.mdx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,13 @@ Express is a project of the OpenJS Foundation. Please review the [trademark poli
8080
lightSrc="/images/logos/logo-dark.svg"
8181
alt="Express.js glyph"
8282
/>
83+
84+
### Kawaii
85+
86+
This logo was created by [SAWARATSUKI](https://github.com/SAWARATSUKI).
87+
88+
<LogoDisplay
89+
darkSrc="/images/logos/express-kawaii.webp"
90+
lightSrc="/images/logos/express-kawaii.webp"
91+
alt="Express.js kawaii logo"
92+
/>

0 commit comments

Comments
 (0)