Skip to content

Commit 899d228

Browse files
harlan-zwharlan-zw
committed
doc: home page improvements
1 parent 7991426 commit 899d228

File tree

6 files changed

+239
-46
lines changed

6 files changed

+239
-46
lines changed

‎docs/components/Footer.vue‎

Lines changed: 79 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,82 @@
1-
<template>
2-
<UFooter :links="links">
3-
<template #left />
1+
<script lang="ts" setup>
42
5-
<template #right>
6-
<UColorModeButton v-if="footer?.colorMode" />
3+
</script>
74

8-
<template v-if="footer?.links">
9-
<UButton
10-
v-for="(link, index) of footer?.links"
11-
:key="index"
12-
v-bind="{ color: 'gray', variant: 'ghost', ...link }"
13-
/>
14-
</template>
15-
</template>
16-
</UFooter>
5+
<template>
6+
<div>
7+
<footer class="text-sm text-gray-700 dark:text-gray-200 mt-20">
8+
<div class="border-t border-gray-200 dark:border-gray-800">
9+
<UContainer>
10+
<div class="py-10 grid xl:grid-cols-3 lg:gap-20 gap-10">
11+
<div>
12+
<div class="mb-5">
13+
<NuxtLink to="/" title="Home" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white font-title">
14+
<Logo />
15+
</NuxtLink>
16+
</div>
17+
<nav>
18+
<ul class="space-y-6">
19+
<li>
20+
<NuxtLink to="/docs/getting-started">
21+
What is Nuxt Scripts?
22+
</NuxtLink>
23+
</li>
24+
<li>
25+
<NuxtLink to="/docs/getting-started/installation">
26+
Install Nuxt Scripts
27+
</NuxtLink>
28+
</li>
29+
</ul>
30+
</nav>
31+
</div>
32+
<div>
33+
<h3 class="font-bold mb-5">
34+
Top Guides
35+
</h3>
36+
<nav>
37+
<ul class="grid grid-cols-2 gap-6">
38+
<li v-for="(module, key) in modules" :key="key">
39+
<NuxtLink :to="module.to">
40+
<Icon :name="module.icon" />
41+
{{ module.label }}
42+
</NuxtLink>
43+
</li>
44+
</ul>
45+
</nav>
46+
</div>
47+
<div>
48+
<div class="bg-gray-50 dark:bg-gray-900 flex rounded-xl shadow p-5">
49+
<div>
50+
<div class="mb-2">
51+
Hey <Icon name="noto:waving-hand" /> My name is <a href="https://harlanzw.com" target="_blank" class="underline">Harlan</a> and I'm the lead developer and maintainer of Nuxt Scripts.
52+
</div>
53+
<div>
54+
Like the module? Let me know!
55+
</div>
56+
</div>
57+
<div class="gap-3">
58+
<img alt="Harlan Wilton" loading="lazy" src="https://avatars.githubusercontent.com/u/5326365?v=4" class="mx-auto rounded-full w-10 h-10 mb-3">
59+
<div class="flex justify-center items-center">
60+
<UButton color="white" title="Twitter" variant="link" to="https://twitter.com/harlan_zw" target="_blank">
61+
<Icon name="i-ph-twitter-logo-duotone" class="text-xl" />
62+
</UButton>
63+
<UButton color="white" title="GitHub" aria-label="GitHub" variant="link" to="https://github.com/harlan-zw" target="_blank">
64+
<Icon name="i-ph-github-logo-duotone" class="text-xl" />
65+
</UButton>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</UContainer>
72+
</div>
73+
<div class="border-t border-gray-200 dark:border-gray-800">
74+
<UContainer>
75+
<div class="py-10">
76+
Copyright © {{ new Date().getFullYear() }} Nuxt Team - <a href="https://github.com/nuxt/scripts/blob/main/LICENSE">MIT License</a>
77+
</div>
78+
</UContainer>
79+
</div>
80+
</footer>
81+
</div>
1782
</template>

‎docs/components/ShowcaseCard.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts" setup>
2+
defineProps<{ label: string, description: string }>()
3+
</script>
4+
5+
<template>
6+
<div class="relative h-full">
7+
<div class="h-full">
8+
<div class="group relative border hover:border-blue-400 dark:border-gray-800 transition rounded-xl overflow-hidden h-full">
9+
<div
10+
class="h-48 relative flex items-center justify-center bg-no-repeat bg-cover border-b-2 border-gray-100/30 dark:border-gray-900/10"
11+
style="background-image: url('/grid.png')"
12+
>
13+
<div
14+
class="blur-overlay w-full h-full absolute pointer-events-none"
15+
/>
16+
<div class="z-10 text-blue-200 group-hover:scale-110 w-full h-full flex items-center justify-center group-hover:text-blue-500 transition-all relative">
17+
<slot />
18+
</div>
19+
<slot name="teleport" />
20+
</div>
21+
22+
<div class="p-4">
23+
<h3 class="font-semibold">
24+
{{ label }}
25+
</h3>
26+
<p class="text-sm mt-1 text-gray-400 leading-[22px]">
27+
{{ description }}
28+
</p>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</template>

‎docs/content/_cookie-api.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```vue
2+
<script lang="ts" setup>
3+
const cookieConsent = useScriptTriggerConsent()
4+
const { $script, gtag } = useScript('/my-script.js', {
5+
trigger: cookieConsent
6+
})
7+
</script>
8+
<template>
9+
<CookieConsent @accept="cookieConsent.accept()" />
10+
</template>
11+
```

‎docs/content/_magic-api.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```vue
2+
<script lang="ts" setup>
3+
const { $script, gtag } = useScriptGoogleAnalytics(
4+
{ id: 'G-1234567' },
5+
{ trigger: 'manual' }
6+
)
7+
// send events
8+
gtag('config', 'UA-123456789-1')
9+
// ..
10+
$script.load() // load the script
11+
</script>
12+
```

‎docs/pages/index.vue‎

Lines changed: 104 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,24 @@ const benchmarks = {
150150
si: 3900,
151151
},
152152
},
153+
intercom: {
154+
logo: registry.find(s => s.import?.name === 'useScriptIntercom').logo,
155+
label: 'Intercom',
156+
nuxt: {
157+
link: 'https://scripts-phi.vercel.app/third-parties/intercom/nuxt-scripts',
158+
fcp: 1400,
159+
tbt: 220,
160+
lcp: 1400,
161+
si: 1900,
162+
},
163+
iframe: {
164+
link: 'https://scripts-phi.vercel.app/third-parties/intercom/default',
165+
fcp: 1400,
166+
tbt: 850,
167+
lcp: 1400,
168+
si: 2800,
169+
},
170+
},
153171
}
154172
155173
const webVital = ref('tbt')
@@ -166,6 +184,8 @@ function timesFaster(nuxt: number, iframe: number) {
166184
// should display as 2.5 for 2500%
167185
return (iframe / nuxt).toFixed(1)
168186
}
187+
const { data } = await useAsyncData('code-example', () => queryContent('/_magic-api').findOne())
188+
const { data: data2 } = await useAsyncData('code-example2', () => queryContent('/_cookie-api').findOne())
169189
170190
const contributors = useRuntimeConfig().public.contributors
171191
</script>
@@ -208,23 +228,39 @@ const contributors = useRuntimeConfig().public.contributors
208228
</div>
209229
</ULandingHero>
210230

211-
<ULandingSection :ui="{ wrapper: 'py-6 sm:py-12' }">
231+
<ULandingSection :ui="{ wrapper: 'pt-0 py-6 sm:py-14' }">
212232
<ul class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-8 lg:gap-y-16">
213-
<li v-for="feature in features" :key="feature.name" class="flex flex-col gap-y-2">
214-
<UIcon :name="feature.icon" class="h-8 w-8 shrink-0 text-primary" />
215-
<div class="flex flex-col gap-y-1">
216-
<h5 class="font-medium text-gray-900 dark:text-white">
217-
{{ feature.name }}
218-
</h5>
219-
<p class="text-gray-500 dark:text-gray-400">
220-
{{ feature.description }}
221-
</p>
222-
</div>
223-
</li>
233+
<ShowcaseCard v-for="feature in features" :key="feature.name" :label="feature.name" :description="feature.description">
234+
<UIcon :name="feature.icon" class="h-20 w-20 shrink-0 text-primary" />
235+
</ShowcaseCard>
224236
</ul>
225237
</ULandingSection>
226238

227-
<UContainer class="py-6 sm:py-20 gap-8 lg:gap-20 mb-12 flex flex-col xl:flex-row ">
239+
<ULandingSection :ui="{ wrapper: 'pt-0 py-6 sm:py-14' }">
240+
<div class="xl:flex items-center justify-between gap-12">
241+
<div class="max-w-lg">
242+
<UIcon name="i-ph-magic-wand-duotone" class="h-[100px] w-[100px] text-primary" />
243+
<h2 class="text-xl xl:text-4xl font-bold mb-4">
244+
A powerful API with <span class="italic">just enough</span> magic
245+
</h2>
246+
<p class="text-gray-500 dark:text-gray-400 mb-3">
247+
Nuxt Scripts provides an abstraction layer on top of third-party scripts, providing SSR support and type-safety and
248+
while still giving you full low-level control over how a script is loaded.
249+
</p>
250+
</div>
251+
<UCard>
252+
<div class="padded-code xl:col-span-7 hidden sm:block">
253+
<div class="flex justify-center xl:justify-end">
254+
<div class="flex relative items-center bg-gradient-to-br to-green-200/50 from-blue-100/50 dark:from-green-500/10 dark:to-blue-500/20 rounded">
255+
<ContentRenderer :value="data" class="xl:col-span-6 max-w-full" />
256+
</div>
257+
</div>
258+
</div>
259+
</UCard>
260+
</div>
261+
</ULandingSection>
262+
263+
<UContainer class="py-6 sm:py-20 gap-8 lg:gap-20 flex flex-col xl:flex-row ">
228264
<div class="max-w-lg">
229265
<UIcon name="i-ph-speedometer-duotone" class="h-[100px] w-[100px] text-primary" />
230266
<h2 class="text-xl xl:text-4xl font-bold flex items-center gap-4 mb-4">
@@ -245,7 +281,7 @@ const contributors = useRuntimeConfig().public.contributors
245281
<div class="flex flex-col lg:grid grid-cols-2 mb-8 gap-8">
246282
<div v-for="(benchmark, key) in benchmarks" :key="key">
247283
<h3 class="md:text-xl font-bold flex items-center gap-3 mb-5">
248-
<div class="logo h-auto w-7" v-html="benchmark.logo" />
284+
<div class="logo h-auto w-7 max-h-7" v-html="benchmark.logo" />
249285
{{ benchmark.label }}
250286
</h3>
251287
<div class="mb-3">
@@ -293,33 +329,66 @@ const contributors = useRuntimeConfig().public.contributors
293329
</p>
294330
</div>
295331
</UContainer>
296-
<ULandingSection :ui="{ wrapper: 'py-6 sm:py-12' }">
297-
<div class="xl:flex items-center gap-12 mx-auto">
332+
333+
<ULandingSection :ui="{ wrapper: 'pt-0 py-6 sm:py-14' }">
334+
<div class="xl:flex items-center justify-between gap-12">
298335
<div class="max-w-lg">
299-
<h2 class="text-xl xl:text-4xl font-bold flex items-center gap-4 mb-4">
300-
<UIcon name="i-ph-handshake-duotone" class="h-12 w-12 shrink-0 text-primary" />
301-
<span>A collaboration in making the web faster</span>
336+
<UIcon name="i-ph-cookie-duotone" class="h-[100px] w-[100px] text-primary" />
337+
<h2 class="text-xl xl:text-4xl font-bold mb-4">
338+
Cookie consent that's good enough to eat
302339
</h2>
303-
<p class="text-gray-500 dark:text-gray-400 mb-1">
304-
Nuxt Scripts was designed and built by the Nuxt core team in collaboration with the <a href="https://developer.chrome.com/aurora" target="_blank" class="underline">Chrome Aurora</a> team at Google.
340+
<p class="text-gray-500 dark:text-gray-400 mb-3">
341+
Nuxt Scripts aims to improve end-user privacy by providing a <NuxtLink to="/docs/guide/consent" class="underline">
342+
simple API for managing cookie consent
343+
</NuxtLink>.
305344
</p>
306-
<p class="text-gray-500 dark:text-gray-400 mb-1">
307-
It's being actively maintained by the Nuxt core team and amazing community contributors.
345+
<p class="text-gray-500 dark:text-gray-400 mb-3">
346+
All scripts can be loaded conditionally based on user consent, set it up however you need.
308347
</p>
309348
</div>
349+
<UCard>
350+
<div class="padded-code xl:col-span-7 hidden sm:block">
351+
<div class="flex justify-center xl:justify-end">
352+
<div class="flex relative items-center bg-gradient-to-br to-green-200/50 from-blue-100/50 dark:from-green-500/10 dark:to-blue-500/20 rounded">
353+
<ContentRenderer :value="data2" class="xl:col-span-6 max-w-full" />
354+
</div>
355+
</div>
356+
</div>
357+
</UCard>
358+
</div>
359+
</ULandingSection>
360+
361+
<ULandingSection :ui="{ wrapper: 'py-6 sm:py-12' }">
362+
<div class="xl:flex items-center gap-12">
310363
<div>
311-
<div class="xl:flex justify-center items-center gap-3 mb-8">
312-
<div class="font-light text-6xl mb-2">
313-
<Icon name="carbon:user-favorite-alt" />
314-
{{ contributors.length }}
364+
<div class="max-w-lg">
365+
<UIcon name="i-ph-handshake-duotone" class="h-[100px] w-[100px] text-primary" />
366+
<h2 class="text-xl xl:text-4xl font-bold flex items-center gap-4 mb-4">
367+
<span>A faster web collaboration</span>
368+
</h2>
369+
<p class="text-gray-500 dark:text-gray-400 mb-4">
370+
Nuxt Scripts was designed and built by the Nuxt core team in collaboration with the <a href="https://developer.chrome.com/aurora" target="_blank" class="underline">Chrome Aurora</a> team at Google.
371+
</p>
372+
<p class="text-gray-500 dark:text-gray-400 mb-1">
373+
Nuxt Scripts is being actively maintained by the Nuxt core team and amazing community contributors, we welcome all contributions.
374+
</p>
375+
</div>
376+
</div>
377+
<div class="flex-grow">
378+
<div class="max-w-lg flex flex-col items-center">
379+
<div class="xl:flex justify-center items-center gap-3 mb-8">
380+
<div class="font-light text-6xl mb-2">
381+
<Icon name="carbon:user-favorite-alt" />
382+
{{ contributors.length }}
383+
</div>
384+
<div class="text-sm opacity-80">
385+
Contributors
386+
</div>
315387
</div>
316-
<div class="text-sm opacity-80">
317-
Contributors
388+
<div class="mb-7 gap-2 mx-auto text-center grid grid-cols-4 sm:grid-cols-7">
389+
<UAvatar v-for="(c, index) in contributors" :key="index" :alt="`GitHub User ${c}`" size="xl" height="45" width="45" loading="lazy" :src="`https://avatars.githubusercontent.com/u/${c}?s=80&v=4`" />
318390
</div>
319391
</div>
320-
<div class="mb-7 gap-2 mx-auto text-center grid grid-cols-4 sm:grid-cols-7">
321-
<UAvatar v-for="(c, index) in contributors" :key="index" :alt="`GitHub User ${c}`" size="xl" height="45" width="45" loading="lazy" :src="`https://avatars.githubusercontent.com/u/${c}?s=80&v=4`" />
322-
</div>
323392
</div>
324393
</div>
325394
</ULandingSection>
@@ -432,4 +501,7 @@ const contributors = useRuntimeConfig().public.contributors
432501
filter: drop-shadow(0px 1px 4px rgba(56,239,125, 0.5));
433502
}
434503
}
504+
.padded-code pre {
505+
padding: 0.75em 1em;
506+
}
435507
</style>

‎docs/public/grid.png‎

7.89 KB
Loading

0 commit comments

Comments
 (0)