Skip to content

Commit 77b9103

Browse files
userquinautofix-ci[bot]danielroe
authored
feat: production setup (#378)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
1 parent d206a7a commit 77b9103

42 files changed

Lines changed: 331 additions & 33 deletions

Some content is hidden

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

‎.gitattributes‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
* text eol=lf
1+
* text=auto eol=lf

‎app/app.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ if (import.meta.client) {
6868

6969
<template>
7070
<div class="min-h-screen flex flex-col bg-bg text-fg">
71+
<NuxtPwaAssets />
7172
<a href="#main-content" class="skip-link font-mono">{{ $t('common.skip_link') }}</a>
7273

7374
<AppHeader :show-logo="!isHomepage" />

‎app/assets/main.css‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -541,12 +541,6 @@ input[type='search']::-webkit-search-results-decoration {
541541
appearance: none;
542542
}
543543

544-
/* View transition for logo (hero -> header) */
545-
.hero-logo,
546-
.header-logo {
547-
view-transition-name: site-logo;
548-
}
549-
550544
/* Disable the default fade transition on page navigation */
551545
::view-transition-old(root),
552546
::view-transition-new(root) {
@@ -555,9 +549,7 @@ input[type='search']::-webkit-search-results-decoration {
555549

556550
/* Customize the view transition animations for specific elements */
557551
::view-transition-old(search-box),
558-
::view-transition-new(search-box),
559-
::view-transition-old(site-logo),
560-
::view-transition-new(site-logo) {
552+
::view-transition-new(search-box) {
561553
animation-duration: 0.3s;
562554
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
563555
}

‎app/components/AppFooter.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
1+
<script setup lang="ts">
2+
const route = useRoute()
3+
const isHome = computed(() => route.name === 'index')
4+
</script>
5+
16
<template>
27
<footer class="border-t border-border mt-auto">
38
<div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
49
<div
510
class="flex flex-col sm:flex-row items-center sm:items-baseline justify-between gap-2 sm:gap-4"
611
>
7-
<p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
12+
<div>
13+
<p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
14+
<BuildEnvironment v-if="!isHome" footer />
15+
</div>
816
<div class="flex items-center gap-3 sm:gap-6">
917
<NuxtLink
1018
to="/about"

‎app/components/AppHeader.vue‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,24 @@ onKeyStroke(',', e => {
3434
>
3535
<!-- Start: Logo -->
3636
<div :class="{ 'hidden sm:block': showFullSearch }" class="flex-shrink-0">
37-
<NuxtLink
38-
v-if="showLogo"
39-
to="/"
40-
:aria-label="$t('header.home')"
41-
class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
42-
>
43-
<span class="text-accent"><span class="-tracking-0.2em">.</span>/</span>npmx
44-
</NuxtLink>
37+
<div v-if="showLogo">
38+
<NuxtLink
39+
to="/"
40+
:aria-label="$t('header.home')"
41+
dir="ltr"
42+
class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
43+
>
44+
<img
45+
aria-hidden="true"
46+
:alt="$t('alt_logo')"
47+
src="/logo.svg"
48+
width="96"
49+
height="96"
50+
class="w-8 h-8 rounded-lg"
51+
/>
52+
<span>npmx</span>
53+
</NuxtLink>
54+
</div>
4555
<!-- Spacer when logo is hidden -->
4656
<span v-else class="w-1" />
4757
</div>

‎app/components/BuildEnvironment.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
footer?: boolean
4+
}>()
5+
6+
const buildInfo = useAppConfig().buildInfo
7+
</script>
8+
9+
<template>
10+
<div
11+
class="font-mono text-xs text-fg-muted flex items-center gap-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
12+
:class="footer ? 'mt-4 justify-start' : 'mb-8 justify-center'"
13+
style="animation-delay: 0.05s"
14+
>
15+
<i18n-t keypath="built_at">
16+
<NuxtTime :datetime="buildInfo.time" relative />
17+
</i18n-t>
18+
<span>&middot;</span>
19+
<NuxtLink
20+
v-if="buildInfo.env === 'release'"
21+
external
22+
:href="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
23+
target="_blank"
24+
class="hover:text-fg transition-colors"
25+
>
26+
v{{ buildInfo.version }}
27+
</NuxtLink>
28+
<span v-else class="tracking-wider">{{ buildInfo.env }}</span>
29+
30+
<template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
31+
<span>&middot;</span>
32+
<NuxtLink
33+
external
34+
:href="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`"
35+
target="_blank"
36+
class="hover:text-fg transition-colors"
37+
>
38+
{{ buildInfo.shortCommit }}
39+
</NuxtLink>
40+
</template>
41+
</div>
42+
</template>

‎app/pages/index.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,18 @@ defineOgImageComponent('Default', {
3838
<header class="flex-1 flex flex-col items-center justify-center text-center py-20">
3939
<!-- Animated title -->
4040
<h1
41-
class="font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-4 motion-safe:animate-fade-in motion-safe:animate-fill-both"
41+
dir="ltr"
42+
class="flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-4 motion-safe:animate-fade-in motion-safe:animate-fill-both"
4243
>
43-
<span class="text-accent"><span class="-tracking-0.2em">.</span>/</span>npmx
44+
<img
45+
aria-hidden="true"
46+
:alt="$t('alt_logo')"
47+
src="/logo.svg"
48+
width="48"
49+
height="48"
50+
class="w-12 h-12 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl sm:rounded-3xl"
51+
/>
52+
<span class="pb-4">npmx</span>
4453
</h1>
4554

4655
<p
@@ -97,6 +106,9 @@ defineOgImageComponent('Default', {
97106
</div>
98107
</form>
99108
</search>
109+
110+
<!-- Build info badge -->
111+
<BuildEnvironment class="mt-4" />
100112
</header>
101113

102114
<!-- Popular packages -->

‎config/env.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import Git from 'simple-git'
2+
import * as process from 'node:process'
3+
4+
export { version } from '../package.json'
5+
6+
/**
7+
* Environment variable `PULL_REQUEST` provided by Netlify.
8+
* @see {@link https://docs.netlify.com/build/configure-builds/environment-variables/#git-metadata}
9+
*
10+
* Environment variable `VERCEL_GIT_PULL_REQUEST_ID` provided by Vercel.
11+
* @see {@link https://vercel.com/docs/environment-variables/system-environment-variables#VERCEL_GIT_PULL_REQUEST_ID}
12+
*
13+
* Whether triggered by a GitHub PR
14+
*/
15+
export const isPR = process.env.PULL_REQUEST === 'true' || !!process.env.VERCEL_GIT_PULL_REQUEST_ID
16+
17+
/**
18+
* Environment variable `BRANCH` provided by Netlify.
19+
* @see {@link https://docs.netlify.com/build/configure-builds/environment-variables/#git-metadata}
20+
*
21+
* Environment variable `VERCEL_GIT_COMMIT_REF` provided by Vercel.
22+
* @see {@link https://vercel.com/docs/environment-variables/system-environment-variables#VERCEL_GIT_COMMIT_REF}
23+
*
24+
* Git branch
25+
*/
26+
export const gitBranch = process.env.BRANCH || process.env.VERCEL_GIT_COMMIT_REF
27+
28+
/**
29+
* Environment variable `CONTEXT` provided by Netlify.
30+
* @see {@link https://docs.netlify.com/build/configure-builds/environment-variables/#build-metadata}
31+
*
32+
* Environment variable `VERCEL_ENV` provided by Vercel.
33+
* @see {@link https://vercel.com/docs/environment-variables/system-environment-variables#VERCEL_ENV}
34+
*
35+
* Whether triggered by PR, `deploy-preview` or `dev`.
36+
*/
37+
export const isPreview =
38+
isPR ||
39+
process.env.CONTEXT === 'deploy-preview' ||
40+
process.env.CONTEXT === 'dev' ||
41+
process.env.VERCEL_ENV === 'preview' ||
42+
process.env.VERCEL_ENV === 'development'
43+
44+
const git = Git()
45+
export async function getGitInfo() {
46+
let branch
47+
try {
48+
branch = gitBranch || (await git.revparse(['--abbrev-ref', 'HEAD']))
49+
} catch {
50+
branch = 'unknown'
51+
}
52+
53+
let commit
54+
try {
55+
// Netlify: COMMIT_REF, Vercel: VERCEL_GIT_COMMIT_SHA
56+
commit =
57+
process.env.COMMIT_REF || process.env.VERCEL_GIT_COMMIT_SHA || (await git.revparse(['HEAD']))
58+
} catch {
59+
commit = 'unknown'
60+
}
61+
62+
let shortCommit
63+
try {
64+
if (commit && commit !== 'unknown') {
65+
shortCommit = commit.slice(0, 7)
66+
} else {
67+
shortCommit = await git.revparse(['--short=7', 'HEAD'])
68+
}
69+
} catch {
70+
shortCommit = 'unknown'
71+
}
72+
73+
return { branch, commit, shortCommit }
74+
}
75+
76+
export async function getEnv(isDevelopment: boolean) {
77+
const { commit, shortCommit, branch } = await getGitInfo()
78+
const env = isDevelopment
79+
? 'dev'
80+
: isPreview
81+
? 'preview'
82+
: branch === 'main'
83+
? 'canary'
84+
: 'release'
85+
return { commit, shortCommit, branch, env } as const
86+
}

‎i18n/locales/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
"description": "A better browser for the npm registry. Search, browse, and explore packages with a modern interface."
66
}
77
},
8+
"version": "Version",
9+
"built_at": "built {0}",
10+
"alt_logo": "npmx logo",
811
"tagline": "a better browser for the npm registry",
912
"non_affiliation_disclaimer": "not affiliated with npm, Inc.",
1013
"trademark_disclaimer": "npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.",

‎lunaria/files/en-US.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
"description": "A better browser for the npm registry. Search, browse, and explore packages with a modern interface."
66
}
77
},
8+
"version": "Version",
9+
"built_at": "built {0}",
10+
"alt_logo": "npmx logo",
811
"tagline": "a better browser for the npm registry",
912
"non_affiliation_disclaimer": "not affiliated with npm, Inc.",
1013
"trademark_disclaimer": "npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.",

0 commit comments

Comments
 (0)