Skip to content

Commit 24df2c1

Browse files
essenmitsosseessenmitsosse
committed
Merge remote-tracking branch 'upstream/main' into replace-all-links
2 parents c09999d + 0215130 commit 24df2c1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+2171
-951
lines changed

‎app/assets/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,11 +192,11 @@
192192
*/
193193

194194
html {
195+
@apply scroll-pt-20;
195196
-webkit-font-smoothing: antialiased;
196197
-moz-osx-font-smoothing: grayscale;
197198
text-rendering: optimizeLegibility;
198199
/* Offset for fixed header - otherwise anchor headers are cutted */
199-
scroll-padding-top: 5rem;
200200
scrollbar-gutter: stable;
201201
}
202202

‎app/components/AppFooter.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script setup lang="ts">
22
const route = useRoute()
33
const isHome = computed(() => route.name === 'index')
4+
5+
const modalRef = useTemplateRef('modalRef')
6+
const showModal = () => modalRef.value?.showModal?.()
47
</script>
58

69
<template>
@@ -33,6 +36,73 @@ const isHome = computed(() => route.name === 'index')
3336
<LinkBase to="https://chat.npmx.dev">
3437
{{ $t('footer.chat') }}
3538
</LinkBase>
39+
40+
<button
41+
type="button"
42+
class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
43+
@click.prevent="showModal"
44+
aria-haspopup="dialog"
45+
>
46+
{{ $t('footer.keyboard_shortcuts') }}
47+
</button>
48+
49+
<Modal
50+
ref="modalRef"
51+
:modalTitle="$t('footer.keyboard_shortcuts')"
52+
class="w-auto max-w-lg"
53+
>
54+
<p class="mb-2 font-mono text-fg-subtle">
55+
{{ $t('shortcuts.section.global') }}
56+
</p>
57+
<ul class="mb-6 flex flex-col gap-2">
58+
<li class="flex gap-2 items-center">
59+
<kbd class="kbd">/</kbd>
60+
<span>{{ $t('shortcuts.focus_search') }}</span>
61+
</li>
62+
<li class="flex gap-2 items-center">
63+
<kbd class="kbd">?</kbd>
64+
<span>{{ $t('shortcuts.show_kbd_hints') }}</span>
65+
</li>
66+
<li class="flex gap-2 items-center">
67+
<kbd class="kbd">,</kbd>
68+
<span>{{ $t('shortcuts.settings') }}</span>
69+
</li>
70+
<li class="flex gap-2 items-center">
71+
<kbd class="kbd">c</kbd>
72+
<span>{{ $t('shortcuts.compare') }}</span>
73+
</li>
74+
</ul>
75+
<p class="mb-2 font-mono text-fg-subtle">
76+
{{ $t('shortcuts.section.search') }}
77+
</p>
78+
<ul class="mb-6 flex flex-col gap-2">
79+
<li class="flex gap-2 items-center">
80+
<kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
81+
<span>{{ $t('shortcuts.navigate_results') }}</span>
82+
</li>
83+
<li class="flex gap-2 items-center">
84+
<kbd class="kbd">Enter</kbd>
85+
<span>{{ $t('shortcuts.go_to_result') }}</span>
86+
</li>
87+
</ul>
88+
<p class="mb-2 font-mono text-fg-subtle">
89+
{{ $t('shortcuts.section.package') }}
90+
</p>
91+
<ul class="mb-6 flex flex-col gap-2">
92+
<li class="flex gap-2 items-center">
93+
<kbd class="kbd">.</kbd>
94+
<span>{{ $t('shortcuts.open_code_view') }}</span>
95+
</li>
96+
<li class="flex gap-2 items-center">
97+
<kbd class="kbd">d</kbd>
98+
<span>{{ $t('shortcuts.open_docs') }}</span>
99+
</li>
100+
<li class="flex gap-2 items-center">
101+
<kbd class="kbd">c</kbd>
102+
<span>{{ $t('shortcuts.compare_from_package') }}</span>
103+
</li>
104+
</ul>
105+
</Modal>
36106
</div>
37107
</div>
38108
<p class="text-xs text-fg-muted text-center sm:text-start m-0">
@@ -42,3 +112,9 @@ const isHome = computed(() => route.name === 'index')
42112
</div>
43113
</footer>
44114
</template>
115+
116+
<style scoped>
117+
.kbd {
118+
@apply items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2;
119+
}
120+
</style>

‎app/components/AppHeader.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,12 @@ onKeyStroke(
122122

123123
<!-- Center: Search bar + nav items -->
124124
<div
125-
class="flex-1 flex items-center justify-center md:gap-6"
126-
:class="{ 'hidden sm:flex': !isSearchExpanded }"
125+
class="flex-1 flex items-center md:gap-6"
126+
:class="{
127+
'hidden sm:flex': !isSearchExpanded,
128+
'justify-end': isOnHomePage,
129+
'justify-center': !isOnHomePage,
130+
}"
127131
>
128132
<!-- Search bar (hidden on mobile unless expanded) -->
129133
<HeaderSearchBox

‎app/components/CollapsibleSection.vue‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import { shallowRef, computed } from 'vue'
3+
import { LinkBase } from '#components'
34
45
interface Props {
56
title: string
@@ -18,7 +19,6 @@ const appSettings = useSettings()
1819
1920
const buttonId = `${props.id}-collapsible-button`
2021
const contentId = `${props.id}-collapsible-content`
21-
const headingId = `${props.id}-heading`
2222
2323
const isOpen = shallowRef(true)
2424
@@ -75,11 +75,10 @@ useHead({
7575
</script>
7676

7777
<template>
78-
<section class="scroll-mt-20" :data-anchor-id="id">
78+
<section :id="id" :data-anchor-id="id" class="scroll-mt-20 xl:scroll-mt-0">
7979
<div class="flex items-center justify-between mb-3 px-1">
8080
<component
8181
:is="headingLevel"
82-
:id="headingId"
8382
class="group text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2"
8483
>
8584
<button
@@ -104,17 +103,9 @@ useHead({
104103
/>
105104
</button>
106105

107-
<a
108-
:href="`#${id}`"
109-
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
110-
>
111-
<span v-if="icon" :class="icon" aria-hidden="true" />
106+
<LinkBase :to="`#${id}`" class="">
112107
{{ title }}
113-
<span
114-
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
115-
aria-hidden="true"
116-
/>
117-
</a>
108+
</LinkBase>
118109
</component>
119110

120111
<!-- Actions slot for buttons or other elements -->

‎app/components/Compare/PackageSelector.vue‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ const maxPackages = computed(() => props.max ?? 4)
1414
const inputValue = shallowRef('')
1515
const isInputFocused = shallowRef(false)
1616
17-
// Use the shared npm search composable
18-
const { data: searchData, status } = useNpmSearch(inputValue, { size: 15 })
17+
// Use the shared search composable (supports both npm and Algolia providers)
18+
const { data: searchData, status } = useSearch(inputValue, { size: 15 })
1919
2020
const isSearching = computed(() => status.value === 'pending')
2121
@@ -129,17 +129,16 @@ function handleBlur() {
129129

130130
<!-- Add package input -->
131131
<div v-if="packages.length < maxPackages" class="relative">
132-
<div class="relative group">
132+
<div class="relative group flex items-center">
133133
<label for="package-search" class="sr-only">
134134
{{ $t('compare.selector.search_label') }}
135135
</label>
136136
<span
137-
class="absolute inset-y-0 start-3 flex items-center text-fg-subtle pointer-events-none group-focus-within:text-accent"
138-
aria-hidden="true"
137+
class="absolute inset-is-3 text-fg-subtle font-mono text-md pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
139138
>
140-
<span class="i-carbon:search w-4 h-4" />
139+
/
141140
</span>
142-
<input
141+
<InputBase
143142
id="package-search"
144143
v-model="inputValue"
145144
type="text"
@@ -148,7 +147,9 @@ function handleBlur() {
148147
? $t('compare.selector.search_first')
149148
: $t('compare.selector.search_add')
150149
"
151-
class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
150+
no-correct
151+
size="medium"
152+
class="w-full min-w-25 ps-7"
152153
aria-autocomplete="list"
153154
@focus="isInputFocused = true"
154155
@blur="handleBlur"

‎app/components/Compare/ReplacementSuggestion.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ const emit = defineEmits<{
1616
1717
const docUrl = computed(() => {
1818
if (props.replacement.type !== 'documented' || !props.replacement.docPath) return null
19-
// TODO(serhalp): Once the e18e docs site is complete, link there instead
20-
return `https://github.com/es-tooling/module-replacements/blob/main/docs/modules/${props.replacement.docPath}.md`
19+
return `https://e18e.dev/docs/replacements/${props.replacement.docPath}.html`
2120
})
2221
</script>
2322

‎app/components/Filter/Panel.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -239,13 +239,15 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
239239
</button>
240240
</div>
241241
</div>
242-
<input
242+
<InputBase
243243
id="filter-search"
244244
type="text"
245245
:value="filters.text"
246246
:placeholder="searchPlaceholder"
247247
autocomplete="off"
248-
class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
248+
class="w-full min-w-25"
249+
size="medium"
250+
no-correct
249251
@input="handleTextInput"
250252
/>
251253
</div>

‎app/components/Header/AuthModal.client.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,15 @@ watch(handleInput, newHandleInput => {
8989
>
9090
{{ $t('auth.modal.handle_label') }}
9191
</label>
92-
<input
92+
<InputBase
9393
id="handle-input"
9494
v-model="handleInput"
9595
type="text"
9696
name="handle"
9797
:placeholder="$t('auth.modal.handle_placeholder')"
98-
v-bind="noCorrect"
99-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 hover:border-fg-subtle focus:border-accent focus-visible:(outline-2 outline-accent/70)"
98+
no-correct
99+
class="w-full"
100+
size="medium"
100101
/>
101102
<p v-if="errorMessage" class="text-red-500 text-xs mt-1" role="alert">
102103
{{ errorMessage }}

‎app/components/Header/ConnectorModal.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -161,14 +161,15 @@ function handleDisconnect() {
161161
>
162162
{{ $t('connector.modal.token_label') }}
163163
</label>
164-
<input
164+
<InputBase
165165
id="connector-token"
166166
v-model="tokenInput"
167167
type="password"
168168
name="connector-token"
169169
:placeholder="$t('connector.modal.token_placeholder')"
170-
v-bind="noCorrect"
171-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 hover:border-fg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
170+
no-correct
171+
class="w-full"
172+
size="medium"
172173
/>
173174
</div>
174175

@@ -183,14 +184,15 @@ function handleDisconnect() {
183184
>
184185
{{ $t('connector.modal.port_label') }}
185186
</label>
186-
<input
187+
<InputBase
187188
id="connector-port"
188189
v-model="portInput"
189190
type="text"
190191
name="connector-port"
191192
inputmode="numeric"
192193
autocomplete="off"
193-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 hover:border-fg-subtle focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
194+
class="w-full"
195+
size="medium"
194196
/>
195197
</div>
196198
</details>

‎app/components/Header/SearchBox.vue‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,6 @@ watch(
7070
},
7171
)
7272
73-
function handleSearchBlur() {
74-
isSearchFocused.value = false
75-
emit('blur')
76-
}
77-
function handleSearchFocus() {
78-
isSearchFocused.value = true
79-
emit('focus')
80-
}
81-
8273
function handleSubmit() {
8374
if (pagesWithLocalFilter.has(route.name as string)) {
8475
router.push({
@@ -114,17 +105,18 @@ defineExpose({ focus })
114105
/
115106
</span>
116107

117-
<input
108+
<InputBase
118109
id="header-search"
119110
ref="inputRef"
120111
v-model="searchQuery"
121112
type="search"
122113
name="q"
123114
:placeholder="$t('search.placeholder')"
124-
v-bind="noCorrect"
125-
class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
126-
@focus="handleSearchFocus"
127-
@blur="handleSearchBlur"
115+
no-correct
116+
class="w-full min-w-25 ps-7"
117+
@focus="isSearchFocused = true"
118+
@blur="isSearchFocused = false"
119+
size="small"
128120
/>
129121
<button type="submit" class="sr-only">{{ $t('search.button') }}</button>
130122
</div>

0 commit comments

Comments
 (0)