npmx.dev/app/pages/index.vue at b4e40e3ca59230f3e5f1e3601c5ceb1650ed5b2a · 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
142
143
144
145
146
147
148
149
150
151
152
153
<script setup lang="ts">
import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'

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

async function search() {
  startSearch()
}

const { env } = useAppConfig().buildInfo

useHead({
  link: [{ key: 'llms-txt', rel: 'alternate', href: '/llms.txt', title: 'LLMs.txt' }],
})

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-6 motion-safe:animate-fade-in motion-safe:animate-fill-both"
        >
          <AppLogo class="w-42 h-auto sm:w-58 md:w-70" />
          <span
            aria-hidden="true"
            class="text-sm sm:text-base md:text-lg transform-origin-br font-mono tracking-widest text-accent absolute -bottom-4 -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-2xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
          style="animation-delay: 0.2s"
        >
          <form
            method="GET"
            action="/search"
            class="relative grid justify-items-center gap-4"
            @submit.prevent.trim="search"
          >
            <label for="home-search" class="sr-only">
              {{ $t('search.label') }}
            </label>

            <div class="relative group w-full max-w-xl" :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"
                  aria-describedby="instant-search-advisory"
                  @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>

            <InstantSearch />
          </form>
        </search>

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

      <nav
        :aria-label="$t('nav.popular_packages')"
        class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both max-w-xl mx-auto"
        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="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
            <LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm">
              <span
                class="home-tag-dot w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
              />
              {{ framework.name }}
            </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>

<style scoped>
/* Windows High Contrast Mode support */
@media (forced-colors: active) {
  .home-tag-dot {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
</style>