diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 1600bb4c9..18801fca3 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -213,9 +213,9 @@ onKeyStroke( v-if="!isSearchExpanded && !isOnHomePage" to="/" :aria-label="$t('header.home')" - class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring" + class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4" > - + @@ -224,13 +224,12 @@ onKeyStroke( :to="{ name: 'index' }" :aria-label="$t('header.home')" dir="ltr" - class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded" + class="relative inline-flex items-center gap-1 py-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 me-4" > - - npmx + diff --git a/app/components/AppLogo.vue b/app/components/AppLogo.vue index 68c0e582f..a31201348 100644 --- a/app/components/AppLogo.vue +++ b/app/components/AppLogo.vue @@ -8,25 +8,34 @@ defineProps<{ diff --git a/app/components/AppMark.vue b/app/components/AppMark.vue new file mode 100644 index 000000000..bed49eb4a --- /dev/null +++ b/app/components/AppMark.vue @@ -0,0 +1,25 @@ + + + diff --git a/app/pages/index.vue b/app/pages/index.vue index 74d38d65d..3a63c2492 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -34,15 +34,12 @@ defineOgImageComponent('Default', { >

- - npmx + diff --git a/public-dev/logo-icon.svg b/public-dev/logo-icon.svg new file mode 100644 index 000000000..befaf6550 --- /dev/null +++ b/public-dev/logo-icon.svg @@ -0,0 +1,13 @@ + + + + / + diff --git a/public-dev/logo-mark.svg b/public-dev/logo-mark.svg new file mode 100644 index 000000000..c60a193dc --- /dev/null +++ b/public-dev/logo-mark.svg @@ -0,0 +1,2 @@ + + diff --git a/public-dev/logo.svg b/public-dev/logo.svg index befaf6550..de48ec0ec 100644 --- a/public-dev/logo.svg +++ b/public-dev/logo.svg @@ -1,13 +1,2 @@ - - - - / - + + diff --git a/public-staging/logo-icon.svg b/public-staging/logo-icon.svg new file mode 100644 index 000000000..befaf6550 --- /dev/null +++ b/public-staging/logo-icon.svg @@ -0,0 +1,13 @@ + + + + / + diff --git a/public-staging/logo-mark.svg b/public-staging/logo-mark.svg new file mode 100644 index 000000000..c60a193dc --- /dev/null +++ b/public-staging/logo-mark.svg @@ -0,0 +1,2 @@ + + diff --git a/public-staging/logo.svg b/public-staging/logo.svg index befaf6550..de48ec0ec 100644 --- a/public-staging/logo.svg +++ b/public-staging/logo.svg @@ -1,13 +1,2 @@ - - - - / - + + diff --git a/public/logo-icon.svg b/public/logo-icon.svg new file mode 100644 index 000000000..befaf6550 --- /dev/null +++ b/public/logo-icon.svg @@ -0,0 +1,13 @@ + + + + / + diff --git a/public/logo-mark.svg b/public/logo-mark.svg new file mode 100644 index 000000000..c60a193dc --- /dev/null +++ b/public/logo-mark.svg @@ -0,0 +1,2 @@ + + diff --git a/public/logo.svg b/public/logo.svg index befaf6550..de48ec0ec 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1,13 +1,2 @@ - - - - / - + + diff --git a/pwa-assets.config.ts b/pwa-assets.config.ts index dc49c8087..13e320523 100644 --- a/pwa-assets.config.ts +++ b/pwa-assets.config.ts @@ -2,5 +2,5 @@ import { defineConfig, minimal2023Preset } from '@vite-pwa/assets-generator/conf export default defineConfig({ preset: minimal2023Preset, - images: ['public/logo.svg', 'public-dev/logo.svg', 'public-staging/logo.svg'], + images: ['public/logo-icon.svg', 'public-dev/logo-icon.svg', 'public-staging/logo-icon.svg'], }) diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts index 9fa5f127b..4774a5ce6 100644 --- a/test/nuxt/a11y.spec.ts +++ b/test/nuxt/a11y.spec.ts @@ -119,6 +119,7 @@ import { AppFooter, AppHeader, AppLogo, + AppMark, AboutLogoImg, AboutLogoList, AuthorAvatar, @@ -329,6 +330,22 @@ describe('component accessibility audits', () => { }) }) + describe('AppMark', () => { + it('should have no accessibility violations', async () => { + const component = await mountSuspended(AppMark) + const results = await runAxe(component) + expect(results.violations).toEqual([]) + }) + + it('should have no accessibility violations with custom class', async () => { + const component = await mountSuspended(AppMark, { + props: { class: 'h-6 w-6 text-accent' }, + }) + const results = await runAxe(component) + expect(results.violations).toEqual([]) + }) + }) + describe('AboutLogoImg', () => { it('should have no accessibility violations with string src', async () => { const component = await mountSuspended(AboutLogoImg, { diff --git a/test/unit/server/utils/file-tree.spec.ts b/test/unit/server/utils/file-tree.spec.ts index 7e5f7de06..362083f1c 100644 --- a/test/unit/server/utils/file-tree.spec.ts +++ b/test/unit/server/utils/file-tree.spec.ts @@ -48,7 +48,7 @@ describe('convertToFileTree', () => { { type: 'directory', name: 'assets', - files: [{ type: 'file', name: 'logo.svg', size: 42 }], + files: [{ type: 'file', name: 'logo-icon.svg', size: 42 }], }, ]