chore: update

nuxt · Sep 17, 2024 · 821e8f9 · 821e8f9
1 parent a76a39f
commit 821e8f9
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 51 deletions.
diff --git a/components/UInputCopy.vue b/components/UInputCopy.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps({
+  value: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: String,
+    default: 'lg'
+  }
+})
+const { copy, copied } = useClipboard()
+</script>
+
+<template>
+  <label>
+    <UInput :model-value="value" :size="size" disabled :ui="{ icon: { trailing: { pointer: '' } } }" icon="i-ph-terminal">
+      <div class="absolute inset-0" :class="[copied ? 'cursor-default' : 'cursor-copy']" @click="copy(value)" />
+      <template #trailing>
+        <UButton
+          :icon="copied ? 'i-ph-check' : 'i-ph-copy'"
+          color="gray"
+          variant="link"
+          :padded="false"
+          :class="{ 'text-green-500 hover:text-green-500 dark:text-green-400 hover:dark:text-green-400': copied }"
+          aria-label="copy button"
+          @click="copy(value)"
+        />
+      </template>
+    </UInput>
+  </label>
+</template>
diff --git a/components/newsletter/NewsletterForm.vue b/components/newsletter/NewsletterForm.vue
@@ -39,12 +39,12 @@ function onSubmit() {
 
 <template>
   <form @submit.prevent="onSubmit">
-    <UFormGroup name="email" :label="label" :description="description" size="xl" :ui="{ label: { base: 'font-semibold' }, container: 'mt-3' }">
+    <UFormGroup name="email" :label="label" size="lg" :description="description" :ui="{ label: { base: 'font-semibold' }, container: 'mt-3' }">
       <UInput
         v-model="email"
         type="email"
         placeholder="[email protected]"
-        :ui="{ icon: { trailing: { pointer: '' } } }"
+        :ui="{ icon: { trailing: { pointer: '', padding: { lg: 'px-1' } } } }"
         required
         autocomplete="off"
         class="max-w-sm"

diff --git a/content/0.index.yml b/content/0.index.yml
@@ -3,11 +3,7 @@ hero:
   cta:
     label: Nuxt v3.13 is out
     to: /blog/v3-13
-    variant: outline
     icon: i-ph-arrow-right
-    size: xs
-    trailing: true
-    class: 'font-semibold hover:bg-primary-100 dark:hover:bg-primary-900 rounded-full'
 logos:
   title: 'Trusted by the best front-end teams'
 sections:
@@ -26,6 +22,7 @@ sections:
         to: '/docs/examples/hello-world'
         color: gray
         size: md
+        variant: ghost
     slot: code
     code: |
       ```vue [app.vue]
@@ -65,6 +62,7 @@ sections:
         icon: i-ph-newspaper-duotone
         to: '/blog/nuxt-on-the-edge'
         color: gray
+        variant: ghost
         size: md
     slot: code
     code: |
@@ -113,7 +111,7 @@ sections:
         to: '/docs/getting-started/routing'
       - title: 'Data Fetching'
         description: 'Composables that run on the server to fetch data for your components and enable you to render content in different ways.'
-        icon: ' i-ph-plugs-connected-duotone'
+        icon: 'i-ph-plugs-connected-duotone'
         to: '/docs/getting-started/data-fetching'
       - title: 'Assets & Style'
         description: 'Image, Font and Script optimizations with a built-in support for CSS Modules, Sass, PostCSS, CSS-in-JS and more.'

diff --git a/pages/docs/[...slug].vue b/pages/docs/[...slug].vue
@@ -50,11 +50,6 @@ const communityLinks = computed(() => [{
   label: 'Edit this page',
   to: `https://github.com/nuxt/nuxt/edit/main/docs/${page?.value?._file?.split('/').slice(1).join('/')}`,
   target: '_blank'
-}, {
-  icon: 'i-ph-shooting-star-duotone',
-  label: 'Star on GitHub',
-  to: 'https://go.nuxt.com/github',
-  target: '_blank'
 }, {
   icon: 'i-ph-chat-centered-text-duotone',
   label: 'Chat on Discord',
@@ -67,30 +62,6 @@ const communityLinks = computed(() => [{
   target: '_blank'
 }])
 
-const ecosystemLinks = [{
-  icon: 'i-ph-buildings-duotone',
-  label: 'Enterprise Support',
-  to: '/enterprise/support'
-}, {
-  icon: 'i-ph-handshake-duotone',
-  label: 'Nuxt Agencies',
-  to: '/enterprise/agencies'
-}, {
-  icon: 'i-ph-briefcase-duotone',
-  label: 'Find a Nuxt Job',
-  to: '/enterprise/jobs'
-}, {
-  icon: 'i-ph-graduation-cap-duotone',
-  label: 'Video Courses',
-  to: 'https://masteringnuxt.com/nuxt3?ref=nuxt',
-  target: '_blank'
-}, {
-  label: 'Nuxt Certification',
-  icon: 'i-ph-medal-duotone',
-  to: 'https://certification.nuxt.com',
-  target: '_blank'
-}]
-
 const title = page.value.head?.title || page.value.title
 const description = page.value.head?.description || page.value.description
 
@@ -135,12 +106,6 @@ defineOgImageComponent('Docs', {
 
             <UPageLinks title="Community" :links="communityLinks" />
 
-            <UDivider type="dashed" />
-
-            <UPageLinks title="Ecosystem" :links="ecosystemLinks" />
-
-            <UDivider type="dashed" />
-
             <Ads />
           </div>
         </template>

diff --git a/pages/index.vue b/pages/index.vue
@@ -32,15 +32,24 @@ useSeoMeta({
   <div v-if="page" class="dark:bg-gray-900">
     <ULandingHero
       :ui="{ base: 'relative z-[1]' }"
-      class="dark:bg-gradient-to-b from-gray-950 to-gray-900"
+      class="dark:bg-gradient-to-b from-gray-950 to-gray-900 md:pb-24"
       :orientation="uwuCookie ? 'horizontal' : 'vertical'"
     >
       <template #top>
         <HomeHeroBackground v-if="!uwuCookie" class="absolute -top-[--header-height] inset-x-0 w-full hidden lg:block" />
       </template>
 
       <template #headline>
-        <UButton v-bind="page.hero.cta" />
+        <NuxtLink :to="page.hero.cta.to">
+          <UBadge variant="subtle" size="lg" class="relative rounded-full font-semibold dark:hover:bg-primary-400/15 dark:hover:ring-primary-700">
+            {{ page?.hero.cta.label }}
+            <UIcon
+              v-if="page?.hero.cta.icon"
+              :name="page?.hero.cta.icon"
+              class="ml-1 w-4 h-4 pointer-events-none"
+            />
+          </UBadge>
+        </NuxtLink>
       </template>
 
       <template #title>
@@ -59,12 +68,17 @@ useSeoMeta({
       </template>
 
       <template #links>
-        <UButton to="/docs/getting-started/installation" trailing-icon="i-ph-arrow-right" size="lg">
-          Get Started
-        </UButton>
-        <UButton size="lg" color="gray" variant="ghost" trailing-icon="i-ph-play-circle" @click="videoModalOpen = true">
-          Nuxt in 100 Seconds
-        </UButton>
+        <div class="flex flex-col gap-4">
+          <div class="flex items-center gap-2">
+            <UButton to="/docs/getting-started/installation" trailing-icon="i-ph-arrow-right" size="lg">
+              Get Started
+            </UButton>
+            <UButton size="lg" color="gray" variant="ghost" trailing-icon="i-ph-play-circle" @click="videoModalOpen = true">
+              Nuxt in 100 Seconds
+            </UButton>
+          </div>
+          <UInputCopy value="npx nuxi@latest init <my-app>" class="w-full" />
+        </div>
 
         <UModal v-model="videoModalOpen" :ui="{ width: 'sm:max-w-4xl lg:max-w-5xl aspect-[16/9]' }">
           <div class="p-3 h-full">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -33,7 +33,7 @@ export default <Partial<Config>>{
         }
       },
       fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans]
+        sans: ['Public Sans', ...defaultTheme.fontFamily.sans]
       },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))'