Skip to content

Commit eeef5e5

Browse files
autofix-ci[bot]autofix-ci[bot]
authored
[autofix.ci] apply automated fixes
1 parent 9fde292 commit eeef5e5

File tree

4 files changed

+62
-29
lines changed

4 files changed

+62
-29
lines changed

‎app/components/Brand/Customize.vue‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ function getCustomSvgString(): string {
1616
const el = customLogoRef.value?.$el as SVGElement | undefined
1717
if (!el) return ''
1818
const clone = el.cloneNode(true) as SVGElement
19-
clone.querySelectorAll('[fill="currentColor"]').forEach((path) => {
19+
clone.querySelectorAll('[fill="currentColor"]').forEach(path => {
2020
;(path as SVGElement).setAttribute('fill', customBgDark.value ? '#fafafa' : '#0a0a0a')
2121
})
22-
clone.querySelectorAll('[fill="var(--accent)"]').forEach((path) => {
22+
clone.querySelectorAll('[fill="var(--accent)"]').forEach(path => {
2323
const style = getComputedStyle(path as SVGElement)
2424
;(path as SVGElement).setAttribute('fill', style.fill || activeAccentColor.value)
2525
})
@@ -69,12 +69,11 @@ async function downloadCustomPng() {
6969
ctx.scale(scale, scale)
7070
ctx.drawImage(img, 0, 0, 602, 170)
7171
72-
canvas.toBlob((pngBlob) => {
72+
canvas.toBlob(pngBlob => {
7373
if (pngBlob) downloadBlob(pngBlob, `npmx-logo-${activeAccentId.value}.png`)
7474
URL.revokeObjectURL(url)
7575
}, 'image/png')
76-
}
77-
finally {
76+
} finally {
7877
pngLoading.value = false
7978
}
8079
}
@@ -104,11 +103,15 @@ async function downloadCustomPng() {
104103
</div>
105104

106105
<!-- Controls -->
107-
<div class="border-t border-border p-4 sm:p-6 flex flex-col sm:flex-row sm:items-center gap-4">
106+
<div
107+
class="border-t border-border p-4 sm:p-6 flex flex-col sm:flex-row sm:items-center gap-4"
108+
>
108109
<!-- Accent color picker -->
109110
<fieldset class="flex items-center gap-3 flex-1 border-none p-0 m-0">
110111
<legend class="sr-only">{{ $t('brand.customize.accent_label') }}</legend>
111-
<span class="text-xs font-mono text-fg-muted shrink-0">{{ $t('brand.customize.accent_label') }}</span>
112+
<span class="text-xs font-mono text-fg-muted shrink-0">{{
113+
$t('brand.customize.accent_label')
114+
}}</span>
112115
<div class="flex items-center gap-1.5" role="radiogroup">
113116
<button
114117
v-for="color in accentColors"
@@ -118,7 +121,11 @@ async function downloadCustomPng() {
118121
:aria-checked="activeAccentId === color.id"
119122
:aria-label="color.label"
120123
class="w-6 h-6 rounded-full border-2 cursor-pointer transition-all duration-150 focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg motion-reduce:transition-none"
121-
:class="activeAccentId === color.id ? 'border-fg scale-110' : 'border-transparent hover:border-border-hover'"
124+
:class="
125+
activeAccentId === color.id
126+
? 'border-fg scale-110'
127+
: 'border-transparent hover:border-border-hover'
128+
"
122129
:style="{ backgroundColor: color.value }"
123130
@click="customAccent = color.id"
124131
/>
@@ -128,14 +135,19 @@ async function downloadCustomPng() {
128135
<!-- Background toggle -->
129136
<div class="flex items-center gap-3">
130137
<span class="text-xs font-mono text-fg-muted">{{ $t('brand.customize.bg_label') }}</span>
131-
<div class="flex items-center border border-border rounded-md overflow-hidden" role="radiogroup">
138+
<div
139+
class="flex items-center border border-border rounded-md overflow-hidden"
140+
role="radiogroup"
141+
>
132142
<button
133143
type="button"
134144
role="radio"
135145
:aria-checked="customBgDark"
136146
:aria-label="$t('brand.logos.on_dark')"
137147
class="px-2.5 py-1 text-xs font-mono cursor-pointer border-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent motion-reduce:transition-none"
138-
:class="customBgDark ? 'bg-bg-muted text-fg' : 'bg-transparent text-fg-muted hover:text-fg'"
148+
:class="
149+
customBgDark ? 'bg-bg-muted text-fg' : 'bg-transparent text-fg-muted hover:text-fg'
150+
"
139151
@click="customBgDark = true"
140152
>
141153
{{ $t('brand.logos.on_dark') }}
@@ -146,7 +158,9 @@ async function downloadCustomPng() {
146158
:aria-checked="!customBgDark"
147159
:aria-label="$t('brand.logos.on_light')"
148160
class="px-2.5 py-1 text-xs font-mono cursor-pointer border-none border-is border-is-border transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent motion-reduce:transition-none"
149-
:class="!customBgDark ? 'bg-bg-muted text-fg' : 'bg-transparent text-fg-muted hover:text-fg'"
161+
:class="
162+
!customBgDark ? 'bg-bg-muted text-fg' : 'bg-transparent text-fg-muted hover:text-fg'
163+
"
150164
@click="customBgDark = false"
151165
>
152166
{{ $t('brand.logos.on_light') }}

‎app/components/LogoContextMenu.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,7 @@ async function copySvg() {
3838
const res = await fetch('/logo.svg')
3939
const svg = await res.text()
4040
await copy(svg)
41-
}
42-
finally {
41+
} finally {
4342
close()
4443
}
4544
}

‎app/composables/useSvgToPng.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,10 @@ export function useSvgToPng() {
2222
ctx.drawImage(img, 0, 0, width, height)
2323

2424
return new Promise<Blob>((resolve, reject) => {
25-
canvas.toBlob(
26-
(blob) => {
27-
if (blob) resolve(blob)
28-
else reject(new Error('Canvas toBlob failed'))
29-
},
30-
'image/png',
31-
)
25+
canvas.toBlob(blob => {
26+
if (blob) resolve(blob)
27+
else reject(new Error('Canvas toBlob failed'))
28+
}, 'image/png')
3229
})
3330
}
3431

‎app/pages/brand.vue‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,13 @@ const logos = [
4949
const colors = [
5050
{ key: 'background', hex: '#0a0a0a', oklch: 'oklch(0.171 0 0)', swatch: '#0a0a0a', light: false },
5151
{ key: 'foreground', hex: '#fafafa', oklch: 'oklch(0.982 0 0)', swatch: '#fafafa', light: true },
52-
{ key: 'accent', hex: '#51c8fc', oklch: 'oklch(0.787 0.128 230.318)', swatch: '#51c8fc', light: true },
52+
{
53+
key: 'accent',
54+
hex: '#51c8fc',
55+
oklch: 'oklch(0.787 0.128 230.318)',
56+
swatch: '#51c8fc',
57+
light: true,
58+
},
5359
]
5460
5561
const { copy, copied, text: lastCopied } = useClipboard({ copiedDuring: 2000 })
@@ -79,8 +85,7 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
7985
const blob = await convert(logo.src, logo.width, logo.height)
8086
const filename = logo.src.replace(/^\//, '').replace('.svg', '.png')
8187
downloadPng(blob, filename)
82-
}
83-
finally {
88+
} finally {
8489
pngLoading.value = null
8590
}
8691
}
@@ -217,26 +222,38 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
217222
<ButtonBase
218223
size="sm"
219224
class="!border-none !px-0 !justify-start"
220-
:aria-label="$t('brand.colors.copy_hex', { name: $t(`brand.colors.${color.key}`) })"
225+
:aria-label="
226+
$t('brand.colors.copy_hex', { name: $t(`brand.colors.${color.key}`) })
227+
"
221228
@click="copy(color.hex)"
222229
>
223230
<code class="text-fg-muted">{{ color.hex }}</code>
224231
<span
225232
class="w-3 h-3 shrink-0 transition-colors duration-200"
226-
:class="copied && lastCopied === color.hex ? 'i-lucide:check text-badge-green' : 'i-lucide:copy opacity-0 group-hover:opacity-100'"
233+
:class="
234+
copied && lastCopied === color.hex
235+
? 'i-lucide:check text-badge-green'
236+
: 'i-lucide:copy opacity-0 group-hover:opacity-100'
237+
"
227238
aria-hidden="true"
228239
/>
229240
</ButtonBase>
230241
<ButtonBase
231242
size="sm"
232243
class="!border-none !px-0 !justify-start"
233-
:aria-label="$t('brand.colors.copy_oklch', { name: $t(`brand.colors.${color.key}`) })"
244+
:aria-label="
245+
$t('brand.colors.copy_oklch', { name: $t(`brand.colors.${color.key}`) })
246+
"
234247
@click="copy(color.oklch)"
235248
>
236249
<code class="text-fg-subtle">{{ color.oklch }}</code>
237250
<span
238251
class="w-3 h-3 shrink-0 transition-colors duration-200"
239-
:class="copied && lastCopied === color.oklch ? 'i-lucide:check text-badge-green' : 'i-lucide:copy opacity-0 group-hover:opacity-100'"
252+
:class="
253+
copied && lastCopied === color.oklch
254+
? 'i-lucide:check text-badge-green'
255+
: 'i-lucide:copy opacity-0 group-hover:opacity-100'
256+
"
240257
aria-hidden="true"
241258
/>
242259
</ButtonBase>
@@ -324,7 +341,10 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
324341
:key="`do-${i}`"
325342
class="flex items-start gap-3 text-fg-muted text-sm"
326343
>
327-
<span class="i-lucide:check w-4 h-4 text-badge-green shrink-0 mt-0.5" aria-hidden="true" />
344+
<span
345+
class="i-lucide:check w-4 h-4 text-badge-green shrink-0 mt-0.5"
346+
aria-hidden="true"
347+
/>
328348
<span>{{ item() }}</span>
329349
</li>
330350
</ul>
@@ -341,7 +361,10 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
341361
:key="`dont-${i}`"
342362
class="flex items-start gap-3 text-fg-muted text-sm"
343363
>
344-
<span class="i-lucide:x w-4 h-4 text-badge-pink shrink-0 mt-0.5" aria-hidden="true" />
364+
<span
365+
class="i-lucide:x w-4 h-4 text-badge-pink shrink-0 mt-0.5"
366+
aria-hidden="true"
367+
/>
345368
<span>{{ item() }}</span>
346369
</li>
347370
</ul>

0 commit comments

Comments
 (0)