forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
refactor: extract shared layout components
+98
-124
+2
-66
app/app.vue
+2
-66
app/app.vue
···
56
56
class="skip-link font-mono"
57
57
>Skip to main content</a>
58
58
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" />
101
60
102
61
<div
103
62
id="main-content"
···
106
65
<NuxtPage />
107
66
</div>
108
67
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 />
133
69
</div>
134
70
</template>
135
71
+63
app/components/AppHeader.vue
+63
app/components/AppHeader.vue
···
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>
+5
app/components/ConnectorStatus.server.vue
+5
app/components/ConnectorStatus.server.vue
app/components/ConnectorStatus.vue
app/components/ConnectorStatus.client.vue
app/components/ConnectorStatus.vue
app/components/ConnectorStatus.client.vue
+2
-58
app/error.vue
+2
-58
app/error.vue
···
27
27
28
28
<template>
29
29
<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" />
64
31
65
32
<main class="flex-1 container flex flex-col items-center justify-center py-20 text-center">
66
33
<p class="font-mono text-8xl sm:text-9xl font-medium text-fg-subtle mb-4">
···
87
54
</button>
88
55
</main>
89
56
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 />
114
58
</div>
115
59
</template>