Skip to content

Commit 8b8ea55

Browse files
RYGRITRYGRIT
committed
Merge branch 'main' into fix/issue-1323
2 parents 57d6c4b + 80dc9be commit 8b8ea55

70 files changed

Lines changed: 4278 additions & 440 deletions

Some content is hidden

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

‎app/components/AppHeader.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
127127
128128
const showFullSearch = shallowRef(false)
129129
const showMobileMenu = shallowRef(false)
130-
const { env } = useAppConfig().buildInfo
130+
const { env, prNumber } = useAppConfig().buildInfo
131131
132132
// On mobile, clicking logo+search button expands search
133133
const route = useRoute()
@@ -227,6 +227,15 @@ onKeyStroke(
227227
{{ env === 'release' ? 'alpha' : env }}
228228
</span>
229229
</NuxtLink>
230+
<NuxtLink
231+
v-if="prNumber"
232+
:to="`https://github.com/npmx-dev/npmx.dev/pull/${prNumber}`"
233+
:aria-label="`Open GitHub pull request ${prNumber}`"
234+
>
235+
<span class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium ms-2">
236+
PR #{{ prNumber }}
237+
</span>
238+
</NuxtLink>
230239
</div>
231240
<!-- Spacer when logo is hidden on desktop -->
232241
<span v-else class="hidden sm:block w-1" />

‎app/components/Code/FileTree.vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,7 @@ watch(
9494
block
9595
:style="{ paddingLeft: `${depth * 12 + 32}px` }"
9696
>
97-
<svg
98-
class="size-[1em] me-1 shrink-0"
99-
viewBox="0 0 16 16"
100-
fill="currentColor"
101-
aria-hidden="true"
102-
>
97+
<svg class="size-[1em] me-1 shrink-0" viewBox="0 0 16 16" aria-hidden="true">
10398
<use :href="`/file-tree-sprite.svg#${getFileIcon(node.name)}`" />
10499
</svg>
105100
<span class="truncate">{{ node.name }}</span>

‎app/components/CollapsibleSection.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { LinkBase } from '#components'
44
55
interface Props {
66
title: string
7+
subtitle?: string
78
isLoading?: boolean
89
headingLevel?: `h${number}`
910
id: string
@@ -81,7 +82,8 @@ useHead({
8182
<div class="flex items-center justify-between mb-3 px-1">
8283
<component
8384
:is="headingLevel"
84-
class="group text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2"
85+
class="group text-xs text-fg-subtle uppercase tracking-wider flex gap-2"
86+
:class="subtitle ? 'items-start' : 'items-center'"
8587
>
8688
<button
8789
:id="buttonId"
@@ -101,9 +103,14 @@ useHead({
101103
/>
102104
</button>
103105

104-
<LinkBase :to="`#${id}`">
105-
{{ title }}
106-
</LinkBase>
106+
<span>
107+
<LinkBase :to="`#${id}`">
108+
{{ title }}
109+
</LinkBase>
110+
<span v-if="subtitle" class="block text-2xs normal-case tracking-normal">{{
111+
subtitle
112+
}}</span>
113+
</span>
107114
</component>
108115

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

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

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { useAtproto } from '~/composables/atproto/useAtproto'
33
import { authRedirect } from '~/utils/atproto/helpers'
44
import { isAtIdentifierString } from '@atproto/lex'
55
6+
const authModal = useModal('auth-modal')
7+
68
const handleInput = shallowRef('')
79
const errorMessage = shallowRef('')
810
const route = useRoute()
@@ -72,9 +74,22 @@ watch(user, async newUser => {
7274
</p>
7375
</div>
7476
</div>
75-
<ButtonBase class="w-full" @click="logout">
76-
{{ $t('auth.modal.disconnect') }}
77-
</ButtonBase>
77+
78+
<div class="flex flex-col space-y-4">
79+
<LinkBase
80+
variant="button-secondary"
81+
:to="{ name: 'profile-handle', params: { handle: user.handle } }"
82+
prefetch-on="interaction"
83+
class="w-full"
84+
@click="authModal.close()"
85+
>
86+
{{ $t('auth.modal.profile') }}
87+
</LinkBase>
88+
89+
<ButtonBase class="w-full" @click="logout">
90+
{{ $t('auth.modal.disconnect') }}
91+
</ButtonBase>
92+
</div>
7893
</div>
7994

8095
<!-- Disconnected state -->

‎app/components/Link/Base.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@ const props = withDefaults(
1010
* `type` should never be used, because this will always be a link.
1111
* */
1212
type?: never
13+
/** Visual style of the link */
1314
variant?: 'button-primary' | 'button-secondary' | 'link'
15+
/** Size (only applicable for button variants) */
1416
size?: 'small' | 'medium'
17+
/** Makes the link take full width */
1518
block?: boolean
1619
20+
/** Keyboard shortcut hint */
1721
ariaKeyshortcuts?: string
1822
1923
/**
@@ -26,8 +30,10 @@ const props = withDefaults(
2630
*/
2731
rel?: never
2832
33+
/** Icon class to display */
2934
classicon?: IconClass
3035
36+
/** Link destination (internal or external URL) */
3137
to?: NuxtLinkProps['to']
3238
3339
/** always use `to` instead of `href` */
@@ -37,6 +43,7 @@ const props = withDefaults(
3743
noUnderline?: boolean
3844
3945
/**
46+
* Hide external link icon (deprecated)
4047
* @deprecated @todo remove this property and add separate clean component without this logic
4148
*/
4249
noNewTabIcon?: boolean

‎app/components/Link/Link.stories.ts‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import type { Meta, StoryObj } from '@storybook-vue/nuxt'
2+
import LinkBase from './Base.vue'
3+
4+
const meta = {
5+
component: LinkBase,
6+
args: {
7+
to: '/',
8+
default: 'Click me',
9+
},
10+
} satisfies Meta<typeof LinkBase>
11+
12+
export default meta
13+
type Story = StoryObj<typeof meta>
14+
15+
export const Default: Story = {}
16+
17+
export const ExternalLink: Story = {
18+
args: {
19+
to: 'https://example.com',
20+
default: 'External Link',
21+
},
22+
}
23+
24+
export const AnchorLink: Story = {
25+
args: {
26+
to: '#section',
27+
default: 'Anchor Link',
28+
},
29+
}
30+
31+
export const WithIcon: Story = {
32+
args: {
33+
classicon: 'i-lucide:check',
34+
default: 'Verified',
35+
},
36+
}
37+
38+
export const NoUnderline: Story = {
39+
args: {
40+
noUnderline: true,
41+
default: 'Link without underline',
42+
},
43+
}
44+
45+
export const Disabled: Story = {
46+
args: {
47+
disabled: true,
48+
default: 'Disabled Link',
49+
},
50+
}
51+
52+
export const ButtonPrimary: Story = {
53+
args: {
54+
variant: 'button-primary',
55+
default: 'Primary Button',
56+
},
57+
}
58+
59+
export const ButtonSecondary: Story = {
60+
args: {
61+
variant: 'button-secondary',
62+
default: 'Secondary Button',
63+
},
64+
}
65+
66+
export const SmallButton: Story = {
67+
args: {
68+
variant: 'button-primary',
69+
size: 'small',
70+
default: 'Small Button',
71+
},
72+
}
73+
74+
export const WithIconButton: Story = {
75+
args: {
76+
variant: 'button-primary',
77+
classicon: 'i-lucide:copy',
78+
default: 'Copy',
79+
},
80+
}
81+
82+
export const WithKeyboardShortcut: Story = {
83+
args: {
84+
variant: 'button-secondary',
85+
ariaKeyshortcuts: 's',
86+
default: 'Search',
87+
},
88+
}
89+
90+
export const BlockLink: Story = {
91+
args: {
92+
variant: 'button-primary',
93+
block: true,
94+
default: 'Full Width Button',
95+
},
96+
}
97+
98+
export const DisabledButton: Story = {
99+
args: {
100+
variant: 'button-primary',
101+
disabled: true,
102+
default: 'Disabled Button',
103+
},
104+
}
105+
106+
export const Snapshot: Story = {
107+
render: () => ({
108+
template: `
109+
<div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
110+
<LinkBase to="/">Default Link</LinkBase>
111+
<LinkBase to="https://example.com">External Link</LinkBase>
112+
<LinkBase to="#section">Anchor Link</LinkBase>
113+
<LinkBase to="/" classicon="i-lucide:check">Link with icon</LinkBase>
114+
<LinkBase to="/" no-underline>Link without underline</LinkBase>
115+
<LinkBase to="/" disabled>Disabled Link</LinkBase>
116+
117+
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
118+
<LinkBase to="/" variant="button-primary">Primary</LinkBase>
119+
<LinkBase to="/" variant="button-secondary">Secondary</LinkBase>
120+
<LinkBase to="/" variant="button-primary" disabled>Disabled</LinkBase>
121+
<LinkBase to="/" variant="button-primary" classicon="i-lucide:copy">With Icon</LinkBase>
122+
</div>
123+
124+
<div style="display: flex; gap: 1rem;">
125+
<LinkBase to="/" variant="button-primary" size="small">Small Button</LinkBase>
126+
</div>
127+
<LinkBase to="/" variant="button-primary" block>Full Width Button</LinkBase>
128+
</div>
129+
`,
130+
components: { LinkBase },
131+
}),
132+
}

‎app/components/Modal.client.vue‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
const props = defineProps<{
33
modalTitle: string
4+
modalSubtitle?: string
45
}>()
56
67
const dialogRef = useTemplateRef('dialogRef')
@@ -14,6 +15,12 @@ const modalTitleId = computed(() => {
1415
return id ? `${id}-title` : undefined
1516
})
1617
18+
const modalSubtitleId = computed(() => {
19+
if (!props.modalSubtitle) return undefined
20+
const id = getCurrentInstance()?.attrs.id
21+
return id ? `${id}-subtitle` : undefined
22+
})
23+
1724
function handleModalClose() {
1825
dialogRef.value?.close()
1926
}
@@ -45,14 +52,20 @@ defineExpose({
4552
closedby="any"
4653
class="w-[calc(100%-2rem)] bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
4754
:aria-labelledby="modalTitleId"
55+
:aria-describedby="modalSubtitleId"
4856
v-bind="$attrs"
4957
@transitionend="onDialogTransitionEnd"
5058
>
5159
<!-- Modal top header section -->
5260
<div class="flex items-center justify-between mb-6">
53-
<h2 :id="modalTitleId" class="font-mono text-lg font-medium">
54-
{{ modalTitle }}
55-
</h2>
61+
<div>
62+
<h2 :id="modalTitleId" class="font-mono text-lg font-medium">
63+
{{ modalTitle }}
64+
</h2>
65+
<p v-if="modalSubtitle" :id="modalSubtitleId" class="text-xs text-fg-subtle">
66+
{{ modalSubtitle }}
67+
</p>
68+
</div>
5669
<ButtonBase
5770
type="button"
5871
:aria-label="$t('common.close')"

‎app/components/Package/ChartModal.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
const props = defineProps<{
33
modalTitle?: string
4+
modalSubtitle?: string
45
}>()
56
67
const emit = defineEmits<{
@@ -11,6 +12,7 @@ const emit = defineEmits<{
1112
<template>
1213
<Modal
1314
:modalTitle="modalTitle ?? $t('package.trends.title')"
15+
:modalSubtitle="modalSubtitle"
1416
id="chart-modal"
1517
class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] sm:max-w-3xl"
1618
@transitioned="emit('transitioned')"

0 commit comments

Comments
 (0)