npmx.dev/app/pages/index.vue at f28fbd2472932325287e8710e92c91a912c9dcf8 · npmx-dev/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<script setup lang="ts">
import type { NpmxPicksResponse } from '#shared/types/picks'

const { data: picksData } = useFetch<NpmxPicksResponse>('/api/picks')
const { selectedAccentColor } = useAccentColor()

const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch()
const isSearchFocused = shallowRef(false)

async function search() {
  flushUpdateUrlQuery()
}

const { env } = useAppConfig().buildInfo

useSeoMeta({
  title: () => $t('seo.home.title'),
  ogTitle: () => $t('seo.home.title'),
  twitterTitle: () => $t('seo.home.title'),
  description: () => $t('seo.home.description'),
  ogDescription: () => $t('seo.home.description'),
  twitterDescription: () => $t('seo.home.description'),
})

defineOgImageComponent('Default', {
  primaryColor: '#60a5fa',
  title: 'npmx',
  description: 'a fast, modern browser for the **npm registry**',
})
</script>

<template>
  <main>
    <section class="container min-h-screen flex flex-col">
      <header
        class="flex-1 flex flex-col items-center justify-center text-center pt-20 pb-4 md:pb-8 lg:pb-20"
      >
        <h1
          dir="ltr"
          class="relative flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
        >
          <AppLogo
            class="w-12 h-12 -ms-3 sm:w-20 sm:h-20 sm:-ms-5 md:w-24 md:h-24 md:-ms-6 rounded-2xl sm:rounded-3xl"
          />
          <span class="pb-4">npmx</span>
          <span
            aria-hidden="true"
            class="scale-15 transform-origin-br font-mono tracking-widest text-accent absolute bottom-3 -inset-ie-1.5"
          >
            {{ env === 'release' ? 'alpha' : env }}
          </span>
        </h1>

        <p
          class="text-fg-muted text-lg sm:text-xl max-w-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both"
          style="animation-delay: 0.1s"
        >
          {{ $t('tagline') }}
        </p>
        <search
          class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
          style="animation-delay: 0.2s"
        >
          <form method="GET" action="/search" class="relative" @submit.prevent.trim="search">
            <label for="home-search" class="sr-only">
              {{ $t('search.label') }}
            </label>

            <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
              <div
                class="absolute z-1 -inset-px pointer-events-none rounded-lg bg-gradient-to-r from-fg/0 to-accent/5 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100"
              />

              <div class="search-box relative flex items-center">
                <span
                  class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
                >
                  /
                </span>

                <InputBase
                  id="home-search"
                  v-model="searchQuery"
                  type="search"
                  name="q"
                  autofocus
                  :placeholder="$t('search.placeholder')"
                  no-correct
                  size="large"
                  class="w-full ps-8 pe-24"
                  @focus="isSearchFocused = true"
                  @blur="isSearchFocused = false"
                />

                <ButtonBase
                  type="submit"
                  variant="primary"
                  class="absolute inset-ie-2 border-transparent"
                  classicon="i-lucide:search"
                >
                  <span class="sr-only sm:not-sr-only">
                    {{ $t('search.button') }}
                  </span>
                </ButtonBase>
              </div>
            </div>
          </form>
        </search>

        <BuildEnvironment class="mt-4" />
      </header>

      <nav
        v-if="picksData?.picks?.length"
        :aria-label="$t('nav.npmx_picks')"
        class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both"
        style="animation-delay: 0.3s"
      >
        <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
          <li v-for="pick in picksData?.picks" :key="pick.letter">
            <LinkBase :to="packageRoute(pick.name)" class="text-sm">
              <span
                >{{ pick.name.slice(0, pick.letterIndex)
                }}<span class="font-semibold" :class="{ 'text-accent': selectedAccentColor }">{{
                  pick.name[pick.letterIndex]
                }}</span
                >{{ pick.name.slice(pick.letterIndex + 1) }}</span
              >
            </LinkBase>
          </li>
        </ul>
      </nav>
    </section>

    <section class="border-t border-border py-24 bg-bg-subtle/10">
      <div class="container max-w-3xl mx-auto">
        <CallToAction />
      </div>
    </section>
  </main>
</template>