Skip to content

Commit cda6630

Browse files
userquinuserquin
committed
Merge branch 'main' into fix-color-contrast
2 parents ac43111 + eeeb6b6 commit cda6630

20 files changed

Lines changed: 1287 additions & 172 deletions

‎.github/workflows/ci.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ jobs:
8484
run: pnpm install
8585

8686
- name: 🧪 Unit tests
87-
run: pnpm test:unit run --coverage --reporter=junit --outputFile=test-report.junit.xml
87+
run: pnpm test:unit run --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml
8888

8989
- name: ⬆︎ Upload test results to Codecov
9090
if: ${{ !cancelled() }}
@@ -115,7 +115,7 @@ jobs:
115115
run: pnpm playwright install chromium-headless-shell
116116

117117
- name: 🧪 Component tests
118-
run: pnpm test:nuxt run --coverage --reporter=junit --outputFile=test-report.junit.xml
118+
run: pnpm test:nuxt run --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml
119119

120120
- name: ⬆︎ Upload coverage reports to Codecov
121121
uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5

‎app/components/OgImage/Package.d.vue.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1-
declare const _default: any
1+
// This type declaration file is required to break a circular type resolution in vue-tsc.
2+
//
3+
// nuxt-og-image generates a type declaration (.nuxt/module/nuxt-og-image.d.ts) that imports
4+
// this component's type. This creates a cycle: nuxt.d.ts → nuxt-og-image.d.ts → Package.vue →
5+
// needs auto-import globals from nuxt.d.ts. Without this file, vue-tsc resolves the component
6+
// before the globals are available, so all auto-imports (computed, toRefs, useFetch, etc.) fail.
7+
8+
import type { DefineComponent } from 'vue'
9+
10+
declare const _default: DefineComponent<{
11+
name: string
12+
version: string
13+
primaryColor?: string
14+
}>
215

316
export default _default

‎app/components/SearchProviderToggle.client.vue‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<script setup lang="ts">
2+
const { searchProvider, isAlgolia } = useSearchProvider()
3+
4+
const isOpen = shallowRef(false)
5+
const toggleRef = useTemplateRef('toggleRef')
6+
7+
onClickOutside(toggleRef, () => {
8+
isOpen.value = false
9+
})
10+
11+
useEventListener('keydown', event => {
12+
if (event.key === 'Escape' && isOpen.value) {
13+
isOpen.value = false
14+
}
15+
})
16+
</script>
17+
18+
<template>
19+
<div ref="toggleRef" class="relative">
20+
<ButtonBase
21+
:aria-label="$t('settings.data_source.label')"
22+
:aria-expanded="isOpen"
23+
aria-haspopup="true"
24+
size="small"
25+
class="border-none w-8 h-8 !px-0 justify-center"
26+
classicon="i-carbon:settings"
27+
@click="isOpen = !isOpen"
28+
/>
29+
30+
<Transition
31+
enter-active-class="transition-all duration-150"
32+
leave-active-class="transition-all duration-100"
33+
enter-from-class="opacity-0 translate-y-1"
34+
leave-to-class="opacity-0 translate-y-1"
35+
>
36+
<div
37+
v-if="isOpen"
38+
class="absolute inset-ie-0 top-full pt-2 w-72 z-50"
39+
role="menu"
40+
:aria-label="$t('settings.data_source.label')"
41+
>
42+
<div
43+
class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/50 overflow-hidden p-1"
44+
>
45+
<!-- npm Registry option -->
46+
<button
47+
type="button"
48+
role="menuitem"
49+
class="w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted"
50+
:class="[!isAlgolia ? 'bg-bg-muted' : '']"
51+
@click="
52+
() => {
53+
searchProvider = 'npm'
54+
isOpen = false
55+
}
56+
"
57+
>
58+
<span
59+
class="i-carbon:catalog w-4 h-4 mt-0.5 shrink-0"
60+
:class="!isAlgolia ? 'text-accent' : 'text-fg-muted'"
61+
aria-hidden="true"
62+
/>
63+
<div class="min-w-0 flex-1">
64+
<div class="text-sm font-medium" :class="!isAlgolia ? 'text-fg' : 'text-fg-muted'">
65+
{{ $t('settings.data_source.npm') }}
66+
</div>
67+
<p class="text-xs text-fg-subtle mt-0.5">
68+
{{ $t('settings.data_source.npm_description') }}
69+
</p>
70+
</div>
71+
</button>
72+
73+
<!-- Algolia option -->
74+
<button
75+
type="button"
76+
role="menuitem"
77+
class="w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted mt-1"
78+
:class="[isAlgolia ? 'bg-bg-muted' : '']"
79+
@click="
80+
() => {
81+
searchProvider = 'algolia'
82+
isOpen = false
83+
}
84+
"
85+
>
86+
<span
87+
class="i-carbon:search w-4 h-4 mt-0.5 shrink-0"
88+
:class="isAlgolia ? 'text-accent' : 'text-fg-muted'"
89+
aria-hidden="true"
90+
/>
91+
<div class="min-w-0 flex-1">
92+
<div class="text-sm font-medium" :class="isAlgolia ? 'text-fg' : 'text-fg-muted'">
93+
{{ $t('settings.data_source.algolia') }}
94+
</div>
95+
<p class="text-xs text-fg-subtle mt-0.5">
96+
{{ $t('settings.data_source.algolia_description') }}
97+
</p>
98+
</div>
99+
</button>
100+
101+
<!-- Algolia attribution -->
102+
<div v-if="isAlgolia" class="border-t border-border mx-1 mt-1 pt-2 pb-1">
103+
<a
104+
href="https://www.algolia.com/developers"
105+
target="_blank"
106+
rel="noopener noreferrer"
107+
class="text-xs text-fg-subtle hover:text-fg-muted transition-colors inline-flex items-center gap-1 px-2"
108+
>
109+
{{ $t('search.algolia_disclaimer') }}
110+
<span class="i-carbon:launch w-3 h-3" aria-hidden="true" />
111+
</a>
112+
</div>
113+
</div>
114+
</div>
115+
</Transition>
116+
</div>
117+
</template>

‎app/components/SearchProviderToggle.server.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div class="relative">
3+
<div class="flex items-center justify-center w-8 h-8 rounded-md text-fg-subtle">
4+
<span class="i-carbon:settings w-4 h-4" aria-hidden="true" />
5+
</div>
6+
</div>
7+
</template>

0 commit comments

Comments
 (0)