docs: improve templates and add status page

Author: atinux

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "eslint.experimental.useFlatConfig": true,
+  "eslint.useFlatConfig": true,
   "prettier.enable": false,
 }

docs/components/AppFooter.vue

@@ -11,6 +11,10 @@ const links = [
     label: 'Privacy',
     to: 'https://admin.hub.nuxt.com/privacy',
     target: '_blank'
+  }, {
+    label: 'Status',
+    to: 'https://status.hub.nuxt.com',
+    target: '_blank'
   }
 ]
 </script>

docs/content/2.templates.yml

@@ -8,8 +8,8 @@ hero:
     - label: Deploy a template
       icon: i-ph-rocket-launch-duotone
       color: black
-      to: https://admin.hub.nuxt.com
-      target: _blank
+      to: https://hub.nuxt.com/new
+      external: true
     - label: Read the documentation
       icon: i-ph-book-open
       color: white

docs/pages/index.vue

@@ -136,7 +136,11 @@ onMounted(() => {
 
     <!-- Full Stack section -->
     <ULandingSection
-      :title="page?.fullStack.title" :links="page?.fullStack.buttons"
+      :title="page?.fullStack.title"
+      :links="page?.fullStack.buttons"
+      :ui="{
+        title: 'text-4xl'
+      }"
     >
       <template v-if="page?.fullStack.headline" #headline>
         <UBadge color="white" size="lg" class="rounded-full mb-6">
@@ -156,7 +160,7 @@ onMounted(() => {
       align="left"
       :ui="{
         wrapper: 'pt-0 sm:pt-0 pb-24',
-        container: 'gap-8',
+        container: 'gap-y-8 sm:gap-y-12',
         title: 'text-xl sm:text-2xl lg:text-3xl font-semibold',
         description: 'text-base mt-3 dark:text-gray-400'
       }"
@@ -192,7 +196,7 @@ onMounted(() => {
       align="right"
       :ui="{
         wrapper: 'pt-0 sm:pt-0 pb-24',
-        container: 'gap-8',
+        container: 'gap-y-8 sm:gap-y-12',
         title: 'text-xl sm:text-2xl lg:text-3xl font-semibold',
         description: 'text-base mt-3 dark:text-gray-400'
       }"
@@ -228,7 +232,7 @@ onMounted(() => {
       align="left"
       :ui="{
         wrapper: 'pt-0 sm:pt-0 pb-24',
-        container: 'gap-8',
+        container: 'gap-y-8 sm:gap-y-12',
         title: 'text-xl sm:text-2xl lg:text-3xl font-semibold',
         description: 'text-base mt-3 dark:text-gray-400'
       }"
@@ -264,7 +268,7 @@ onMounted(() => {
       align="right"
       :ui="{
         wrapper: 'pt-0 sm:pt-0 pb-24 mb-10',
-        container: 'gap-8',
+        container: 'gap-y-8 sm:gap-y-12',
         title: 'text-xl sm:text-2xl lg:text-3xl font-semibold',
         description: 'text-base mt-3 dark:text-gray-400'
       }"

docs/pages/templates.vue

@@ -18,7 +18,7 @@ defineOgImageComponent('Docs')
 <template>
   <UContainer>
     <UPageHero v-bind="page?.hero" :ui="{ base: 'z-10' }" />
-    <UPageGrid class="lg:grid-cols-3 xl:grid-cols-4">
+    <UPageGrid class="lg:grid-cols-3 xl:grid-cols-4 pb-10">
       <UPageCard
         v-for="(template, index) in templates"
         :key="index"
@@ -28,9 +28,24 @@ defineOgImageComponent('Docs')
           description: 'line-clamp-2 sm:min-h-[45px]'
         }"
         class="overflow-hidden"
-        :title="template.title"
         :description="template.description"
       >
+        <template #title>
+          <div class="flex flex-1 items-center justify-between">
+            <span class="text-gray-900 dark:text-white text-base font-semibold truncate">
+              {{ template.title }}
+            </span>
+            <UButton
+              icon="i-simple-icons-github"
+              :to="`https://github.com/${template.owner}/${template.repo}`"
+              target="_blank"
+              size="xs"
+              color="gray"
+              variant="ghost"
+              class="opacity-75 hover:opacity-100"
+            />
+          </div>
+        </template>
         <template #header>
           <img
             :src="template.imageUrl"
@@ -57,14 +72,14 @@ defineOgImageComponent('Docs')
             size="sm"
             class="rounded-full"
           />
-          <UBadge
-            v-for="feature of template.features"
-            :key="feature"
-            :label="feature"
-            size="sm"
-            color="gray"
-            class="rounded-full"
-          />
+          <NuxtLink v-for="feature of template.features" :key="feature" :to="`/docs/features/${feature}`">
+            <UBadge
+              :label="feature"
+              size="sm"
+              color="gray"
+              class="rounded-full hover:text-black dark:hover:text-white"
+            />
+          </NuxtLink>
         </div>
         <UButtonGroup class="mt-3 w-full">
           <UButton
@@ -79,10 +94,9 @@ defineOgImageComponent('Docs')
             :ui="{ icon: { size: { sm: 'w-4 h-4' } } }"
           />
           <UButton
-            label="GitHub"
-            icon="i-simple-icons-github"
-            :to="`https://github.com/${template.owner}/${template.repo}`"
-            target="_blank"
+            label="Deploy"
+            icon="i-ph-rocket-launch-duotone"
+            :to="`https://hub.nuxt.com/new?template=${template.slug}`"
             size="sm"
             color="gray"
             class="justify-center"