Skip to content

Commit 7c1bc9d

Browse files
danielroedanielroe
committed
refactor: extract shared layout components
1 parent 803ff68 commit 7c1bc9d

6 files changed

Lines changed: 98 additions & 124 deletions

File tree

‎app/app.vue‎

Lines changed: 2 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -56,48 +56,7 @@ onUnmounted(() => {
5656
class="skip-link font-mono"
5757
>Skip to main content</a>
5858

59-
<header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
60-
<nav
61-
aria-label="Main navigation"
62-
class="container h-14 flex items-center justify-between"
63-
>
64-
<NuxtLink
65-
v-show="!isHomepage"
66-
to="/"
67-
aria-label="npmx home"
68-
class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
69-
>
70-
<span class="text-fg-subtle"><span style="letter-spacing: -0.2em;">.</span>/</span>npmx
71-
</NuxtLink>
72-
<!-- Spacer when logo is hidden on homepage -->
73-
<span
74-
v-show="isHomepage"
75-
class="w-1"
76-
/>
77-
78-
<ul class="flex items-center gap-4 sm:gap-6">
79-
<li class="flex">
80-
<NuxtLink
81-
to="/search"
82-
class="link-subtle font-mono text-sm inline-flex items-center gap-2"
83-
>
84-
search
85-
<kbd class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded">/</kbd>
86-
</NuxtLink>
87-
</li>
88-
<li class="flex">
89-
<ClientOnly>
90-
<ConnectorStatus />
91-
<template #fallback>
92-
<div class="w-8 h-8 flex items-center justify-center">
93-
<span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
94-
</div>
95-
</template>
96-
</ClientOnly>
97-
</li>
98-
</ul>
99-
</nav>
100-
</header>
59+
<AppHeader :show-logo="!isHomepage" />
10160

10261
<div
10362
id="main-content"
@@ -106,30 +65,7 @@ onUnmounted(() => {
10665
<NuxtPage />
10766
</div>
10867

109-
<footer class="border-t border-border mt-auto">
110-
<div class="container py-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-fg-subtle text-sm">
111-
<p class="font-mono m-0">
112-
a better npm browser
113-
</p>
114-
<div class="flex items-center gap-6">
115-
<a
116-
href="https://github.com/danielroe/npmx.dev"
117-
rel="noopener noreferrer"
118-
class="link-subtle font-mono text-xs"
119-
>
120-
source
121-
</a>
122-
<span class="text-border">|</span>
123-
<a
124-
href="https://roe.dev"
125-
rel="noopener noreferrer"
126-
class="link-subtle font-mono text-xs"
127-
>
128-
@danielroe
129-
</a>
130-
</div>
131-
</div>
132-
</footer>
68+
<AppFooter />
13369
</div>
13470
</template>
13571

‎app/components/AppFooter.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<footer class="border-t border-border mt-auto">
3+
<div class="container py-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-fg-subtle text-sm">
4+
<p class="font-mono m-0">
5+
a better npm browser
6+
</p>
7+
<div class="flex items-center gap-6">
8+
<a
9+
href="https://github.com/danielroe/npmx.dev"
10+
rel="noopener noreferrer"
11+
class="link-subtle font-mono text-xs"
12+
>
13+
source
14+
</a>
15+
<span class="text-border">|</span>
16+
<a
17+
href="https://roe.dev"
18+
rel="noopener noreferrer"
19+
class="link-subtle font-mono text-xs"
20+
>
21+
@danielroe
22+
</a>
23+
</div>
24+
</div>
25+
</footer>
26+
</template>

‎app/components/AppHeader.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script setup lang="ts">
2+
withDefaults(defineProps<{
3+
showLogo?: boolean
4+
showConnector?: boolean
5+
}>(), {
6+
showLogo: true,
7+
showConnector: true,
8+
})
9+
</script>
10+
11+
<template>
12+
<header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
13+
<nav
14+
aria-label="Main navigation"
15+
class="container h-14 flex items-center justify-between"
16+
>
17+
<NuxtLink
18+
v-if="showLogo"
19+
to="/"
20+
aria-label="npmx home"
21+
class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
22+
>
23+
<span class="text-fg-subtle"><span style="letter-spacing: -0.2em;">.</span>/</span>npmx
24+
</NuxtLink>
25+
<!-- Spacer when logo is hidden -->
26+
<span
27+
v-else
28+
class="w-1"
29+
/>
30+
31+
<ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
32+
<li class="flex">
33+
<NuxtLink
34+
to="/search"
35+
class="link-subtle font-mono text-sm inline-flex items-center gap-2"
36+
>
37+
search
38+
<kbd class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded">/</kbd>
39+
</NuxtLink>
40+
</li>
41+
<li
42+
v-if="showConnector"
43+
class="flex"
44+
>
45+
<ConnectorStatus />
46+
</li>
47+
<li
48+
v-else
49+
class="flex"
50+
>
51+
<a
52+
href="https://github.com/danielroe/npmx.dev"
53+
rel="noopener noreferrer"
54+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
55+
>
56+
<span class="i-carbon-logo-github w-4 h-4" />
57+
<span class="hidden sm:inline">github</span>
58+
</a>
59+
</li>
60+
</ul>
61+
</nav>
62+
</header>
63+
</template>

app/components/ConnectorStatus.vue renamed to app/components/ConnectorStatus.client.vue

File renamed without changes.

‎app/components/ConnectorStatus.server.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="w-8 h-8 flex items-center justify-center">
3+
<span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
4+
</div>
5+
</template>

‎app/error.vue‎

Lines changed: 2 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -27,40 +27,7 @@ useHead({
2727

2828
<template>
2929
<div class="min-h-screen flex flex-col bg-bg text-fg">
30-
<header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
31-
<nav
32-
aria-label="Main navigation"
33-
class="container h-14 flex items-center justify-between"
34-
>
35-
<a
36-
href="/"
37-
class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
38-
>
39-
<span class="text-fg-subtle">./</span>npmx
40-
</a>
41-
42-
<ul class="flex items-center gap-6 list-none m-0 p-0">
43-
<li class="flex">
44-
<a
45-
href="/search"
46-
class="link-subtle font-mono text-sm inline-flex items-center"
47-
>
48-
search
49-
</a>
50-
</li>
51-
<li class="flex">
52-
<a
53-
href="https://github.com/danielroe/npmx.dev"
54-
rel="noopener noreferrer"
55-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
56-
>
57-
<span class="i-carbon-logo-github w-4 h-4" />
58-
<span class="hidden sm:inline">github</span>
59-
</a>
60-
</li>
61-
</ul>
62-
</nav>
63-
</header>
30+
<AppHeader :show-connector="false" />
6431

6532
<main class="flex-1 container flex flex-col items-center justify-center py-20 text-center">
6633
<p class="font-mono text-8xl sm:text-9xl font-medium text-fg-subtle mb-4">
@@ -87,29 +54,6 @@ useHead({
8754
</button>
8855
</main>
8956

90-
<footer class="border-t border-border mt-auto">
91-
<div class="container py-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-fg-subtle text-sm">
92-
<p class="font-mono m-0">
93-
a better npm browser
94-
</p>
95-
<div class="flex items-center gap-6">
96-
<a
97-
href="https://github.com/danielroe/npmx.dev"
98-
rel="noopener noreferrer"
99-
class="link-subtle font-mono text-xs"
100-
>
101-
source
102-
</a>
103-
<span class="text-border">|</span>
104-
<a
105-
href="https://roe.dev"
106-
rel="noopener noreferrer"
107-
class="link-subtle font-mono text-xs"
108-
>
109-
@danielroe
110-
</a>
111-
</div>
112-
</div>
113-
</footer>
57+
<AppFooter />
11458
</div>
11559
</template>

0 commit comments

Comments
 (0)