davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2interface Props {
3 primaryColor?: string
4 title?: string
5 description?: string
6}
7
8const props = withDefaults(defineProps<Props>(), {
9 primaryColor: '#60a5fa',
10 title: 'npmx',
11 description: 'a fast, modern browser for the **npm registry**',
12})
13</script>
14
15<template>
16 <div
17 class="h-full w-full flex flex-col justify-center px-20 bg-[#050505] text-[#fafafa] relative overflow-hidden"
18 style="font-family: 'Geist Mono', sans-serif"
19 >
20 <div class="relative z-10 flex flex-col gap-6">
21 <div class="flex items-start gap-4">
22 <div
23 class="flex items-start justify-center w-16 h-16 p-3.5 rounded-xl bg-gradient-to-tr from-[#3b82f6] shadow-lg"
24 :style="{ backgroundColor: props.primaryColor }"
25 >
26 <svg
27 width="36"
28 height="36"
29 viewBox="0 0 24 24"
30 fill="none"
31 stroke="white"
32 stroke-width="2.5"
33 stroke-linecap="round"
34 stroke-linejoin="round"
35 >
36 <path d="m7.5 4.27 9 5.15" />
37 <path
38 d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
39 />
40 <path d="m3.3 7 8.7 5 8.7-5" />
41 <path d="M12 22V12" />
42 </svg>
43 </div>
44
45 <h1 class="text-8xl font-bold">
46 <span
47 class="opacity-80 tracking-[-0.1em]"
48 :style="{ color: props.primaryColor }"
49 style="margin-left: -1rem; margin-right: 0.5rem"
50 >./</span
51 >{{ props.title }}
52 </h1>
53 </div>
54
55 <div
56 class="flex flex-wrap items-center gap-x-3 text-4xl text-[#a3a3a3]"
57 style="font-family: 'Geist', sans-serif"
58 >
59 <template v-for="(part, index) in props.description.split(/(\*\*.*?\*\*)/)" :key="index">
60 <span
61 v-if="part.startsWith('**') && part.endsWith('**')"
62 class="px-3 py-1 rounded-lg border font-normal"
63 :style="{
64 color: props.primaryColor,
65 backgroundColor: props.primaryColor + '10',
66 borderColor: props.primaryColor + '30',
67 boxShadow: `0 0 20px ${props.primaryColor}25`,
68 }"
69 >
70 {{ part.replaceAll('**', '') }}
71 </span>
72 <span v-else-if="part.trim() !== ''">
73 {{ part }}
74 </span>
75 </template>
76 </div>
77 </div>
78
79 <div
80 class="absolute -top-32 -inset-ie-32 w-[550px] h-[550px] rounded-full blur-3xl"
81 :style="{ backgroundColor: props.primaryColor + '10' }"
82 />
83 </div>
84</template>