docs: various improvements

docs/app.config.ts

@@ -15,7 +15,7 @@ export default defineAppConfig({
     siteName: 'NuxtHub'
   },
   toc: {
-    title: 'Table of Contents',
+    title: 'On this page',
     bottom: {
       edit: 'https://github.com/nuxt-hub/core/edit/main/docs/content'
     }

docs/components/AppFooter.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 const links = [
   {
-    label: 'Nuxt Docs',
-    to: 'https://nuxt.com'
-  }, {
     label: 'Terms',
     to: 'https://admin.hub.nuxt.com/terms',
     target: '_blank'
@@ -27,6 +24,14 @@ const links = [
 
     <template #right>
       <ColorScheme><UColorModeSelect /></ColorScheme>
+      <UButton
+        icon="i-simple-icons-discord"
+        color="gray"
+        variant="ghost"
+        to="https://discord.gg/vW89dsVqBF"
+        target="_blank"
+        aria-label="Go to NuxtHub Discord server"
+      />
       <UButton
         icon="i-simple-icons-x"
         color="gray"

docs/components/PageSectionCTA.vue

@@ -0,0 +1,47 @@
+<template>
+  <ULandingSection
+    :ui="{
+      wrapper: 'mt-10 py-12 sm:py-12 not-prose relative',
+      container: 'gap-8 sm:gap-y-8',
+      title: 'lg:text-4xl font-semibold'
+    }"
+    :links="[
+      {
+        label: 'Get started for free',
+        to: 'https://admin.hub.nuxt.com',
+        trailingIcon: 'i-ph-arrow-right'
+      },
+      {
+        label: 'Read docs',
+        to: '/docs/getting-started',
+        variant: 'ghost',
+        color: 'gray'
+      }
+    ]"
+  >
+    <svg class="absolute top-0 inset-x-0 pointer-events-none" viewBox="0 0 1017 181" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g opacity="0.5">
+        <mask id="path-1-inside-1_846_160841" fill="white">
+          <path d="M0 0H1017V181H0V0Z" />
+        </mask>
+        <path d="M0 0H1017V181H0V0Z" fill="url(#paint0_radial_846_160841)" fill-opacity="0.22" />
+        <path d="M0 2H1017V-2H0V2Z" fill="url(#paint1_linear_846_160841)" mask="url(#path-1-inside-1_846_160841)" />
+      </g>
+      <defs>
+        <radialGradient id="paint0_radial_846_160841" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(508.999 19.5) rotate(90.177) scale(161.501 509.002)">
+          <stop stop-color="#00DC82" />
+          <stop offset="1" stop-color="#00DC82" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient id="paint1_linear_846_160841" x1="10.9784" y1="91" x2="1017" y2="90.502" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#00DC82" stop-opacity="0" />
+          <stop offset="0.395" stop-color="#00DC82" />
+          <stop offset="1" stop-color="#00DC82" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+
+    <template #title>
+      <span>Start with NuxtHub <span class="text-primary">today</span></span>
+    </template>
+  </ULandingSection>
+</template>

docs/content/0.index.yml

@@ -14,7 +14,7 @@ hero:
     to: /blog/cloudflare-ai-for-user-experience
     icon: i-ph-arrow-right
   links:
-    - label: Get started
+    - label: Start reading docs
       trailing-icon: i-ph-arrow-right
       to: '/docs/getting-started'
       size: md

docs/content/1.docs/1.getting-started/1.index.md

@@ -3,47 +3,54 @@ navigation:
   title: Introduction
 title: What is NuxtHub?
 description: NuxtHub helps you build and deploy full-stack Nuxt applications globally.
+links:
+  - label: '3min video'
+    to: https://www.youtube.com/watch?v=hlmPqDkc3_s
+    target: _blank
+    icon: i-ph-play-circle
 ---
 
 On top of deploying your Nuxt application, NuxtHub aims to provide a complete backend experience on top of the framework, allowing developers to build full-stack applications on the Edge, read more about [Nuxt on the Edge](https://nuxt.com/blog/nuxt-on-the-edge).
 
 It leverages Cloudflare features such as Pages, Workers Analytics, AI, KV, D1, R2 and more.
 
-::tip
+::callout
 **NuxtHub is what Vercel / Netlify is for AWS, but for Cloudflare.** :br
 It also deploys to your Cloudflare account so you stay in control of your data and billing as we don't mark-up Cloudflare prices.
 ::
 
-::callout
----
-color: red
-icon: i-logos-youtube-icon
-target: _blan
-to: https://www.youtube.com/watch?v=hlmPqDkc3_s
----
-Watch a 3 minute introduction video by **LearnVue**.
-::
-
 ## Features
 
 NuxtHub provides optional features to help you build full-stack applications:
 
-- [AI Models](/docs/features/ai) to run machine learning models, such as LLMs in Nuxt.
-- [Blob storage](/docs/features/blob) to store static assets, such as images, videos and more
-- [Caching system](/docs/features/cache) for your Nuxt pages, API routes or server functions
-- [SQL database](/docs/features/database) to store your application's data
-- [Key-Value](/docs/features/kv) to store JSON data accessible globally with low-latency
-- [Open API](/docs/features/open-api) to generate your API documentation with [Scalar](https://scalar.com)
+::card-group
+  :::card{icon="i-ph-magic-wand" title="AI Models" to="/docs/features/ai"}
+  Run machine learning models, such as LLMs.
+  :::
+
+  :::card{icon="i-ph-shapes" title="Blob" to="/docs/features/blob"}
+  Store static assets, such as images, videos and more
+  :::
+
+  :::card{icon="i-ph-lightning" title="Cache" to="/docs/features/cache"}
+  Caching system for your Nuxt pages, API routes or server functions
+  :::
+
+  :::card{icon="i-ph-database" title="SQL database" to="/docs/features/database"}
+  Store your application's data in a secure and scalable serverless SQL database.
+  :::
+  :::card{icon="i-ph-coin" title="Key-Value" to="/docs/features/kv"}
+  Key-Value to store JSON data accessible globally with low-latency
+  :::
+
+  :::card{icon="i-ph-plugs-connected" title="Remote Access" to="/docs/getting-started/remote-storage"}
+  Connect to your project's resources from your local environment.
+  :::
 
-::tip
----
-icon: i-ph-plugs-connected-duotone
-to: /docs/getting-started/remote-storage
----
-NuxtHub comes with a powerful proxy system to connect to your project's resources from your local environment, allowing you to work with your remote storage as if it was local with `npx nuxi dev --remote`.
 ::
 
-## NuxtHub Admin
+
+## Dashboard
 
 ::tabs
   :::div{label="Projects"}
@@ -113,9 +120,9 @@ NuxtHub also integrates with the [Nuxt DevTools](https://devtools.nuxt.com/) to
   :::
 ::
 
-## Upcoming Packages
+## Upcoming 
 
-We plan to provide a complete backend experience for Nuxt apps through various `@nuxthub` packages.
+NuxtHub is built with a modular approach:
 
 - [`@nuxthub/core`](https://github.com/nuxt-hub/core): Main package to provide storage features
 - `@nuxthub/auth`: Add authentication for user management (soon)
@@ -124,6 +131,6 @@ We plan to provide a complete backend experience for Nuxt apps through various `
 - `@nuxthub/analytics`: Understand your traffic and track events within your application and API (soon)
 - `@nuxthub/...`: You name it!
 
-::important
+::callout
 We are currently in the early stages of development (beta) and are looking for feedback from the community. If you are interested in contributing, please join us on [nuxt-hub/core](https://github.com/nuxt-hub/core).
 ::

docs/content/4.changelog.yml

@@ -9,12 +9,18 @@ hero:
     - label: '@nuxt_hub'
       icon: i-simple-icons-x
       color: white
-      size: lg
+      size: xs
       to: https://x.com/nuxt_hub
       target: _blank
+    - label: 'NuxtHub'
+      icon: i-simple-icons-linkedin
+      color: white
+      size: xs
+      to: https://www.linkedin.com/showcase/nuxthub/
+      target: _blank
     - label: 'Changelog RSS'
       icon: 'i-simple-icons-rss'
       to: '/changelog/rss.xml'
       color: white
-      size: lg
+      size: xs
       target: _blank

docs/content/4.changelog/blob-folders.md

@@ -3,7 +3,6 @@ title: Blob Folders
 description: "It is now possible to change the view of your blobs to a folder structure."
 date: 2024-06-03
 image: '/images/changelog/blob-folders.png'
-category: Admin
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/4.changelog/blob-upload-prefix.md

@@ -3,7 +3,6 @@ title: Blob Upload Prefix
 description: "It is now possible to upload a blob and setting the prefix beforehand."
 date: 2024-07-02
 image: '/images/changelog/blob-upload-prefix.png'
-category: Admin
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/4.changelog/deploy-button.md

@@ -3,7 +3,6 @@ title: Deploy to NuxtHub button
 description: "The Deploy to NuxtHub button allows you to deploy a GitHub template directly from the NuxtHub Admin."
 date: 2024-07-22
 image: '/images/changelog/deploy-button.png'
-category: Template
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/4.changelog/deployment-details.md

@@ -3,7 +3,6 @@ title: Deployment Details
 description: "We redesigned the deployment listing as well as added the deployment page to provide more information about each deployment."
 date: 2024-05-28
 image: '/images/changelog/deployment-details.png'
-category: Admin
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/4.changelog/drizzle-studio-remembers.md

@@ -3,7 +3,6 @@ title: Drizzle Studio Remembers
 description: "The database admin UI now remembers where you were last time, speeding up your workflow."
 date: 2024-06-04
 image: '/images/changelog/drizzle-studio-remembers.png'
-category: Admin
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/4.changelog/hello-edge.md

@@ -3,7 +3,6 @@ title: Hello World Template
 description: "Hello Edge is our minimal Nuxt template to get started with server-side rendering on the Edge."
 date: 2024-06-18
 image: '/images/changelog/hello-edge.png'
-category: Template
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/4.changelog/hub-ai.md

@@ -3,7 +3,7 @@ title: Introducing hubAI()
 description: "Run machine learning models, such as LLMs in your Nuxt application, with minimal setup."
 date: 2024-08-15
 image: '/images/changelog/hub-ai.png'
-category: Admin
+category: Core
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/4.changelog/hyperdrive-bindings.md

@@ -3,7 +3,6 @@ title: Hyperdrive bindings
 description: "It is now possible to use PostgreSQL & Cloudflare Hyperdrive in your Nuxt application."
 date: 2024-08-28
 image: '/images/changelog/hyperdrive-bindings.png'
-category: Admin
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/4.changelog/server-cache.md

@@ -3,7 +3,6 @@ title: Server Cache UI
 description: "It is now possible to manage your server cache with our new UI for Server Cache."
 date: 2024-04-18
 image: '/images/changelog/server-cache.png'
-category: Admin
 authors:
   - name: Sebastien Chopin
     avatar:

docs/content/4.changelog/team-webhooks-env.md

@@ -3,7 +3,6 @@ title: Webhooks Environment Selection
 description: "It is now possible to select the environment to be notified about."
 date: 2024-06-15
 image: '/images/changelog/team-webhooks-env.png'
-category: Admin
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/4.changelog/team-webhooks.md

@@ -3,7 +3,6 @@ title: Team Webhooks
 description: "It is now possible to trigger webhooks for your team's projects when a new deployment is created."
 date: 2024-05-22
 image: '/images/changelog/team-webhooks.png'
-category: Admin
 authors:
   - name: Sebastien Chopin
     avatar: 

docs/content/5.blog.yml

@@ -10,12 +10,18 @@ hero:
     - label: '@nuxt_hub'
       icon: i-simple-icons-x
       color: white
-      size: lg
+      size: xs
       to: https://x.com/nuxt_hub
       target: _blank
+    - label: 'NuxtHub'
+      icon: i-simple-icons-linkedin
+      color: white
+      size: xs
+      to: https://www.linkedin.com/showcase/nuxthub/
+      target: _blank
     - label: 'Blog RSS'
       icon: 'i-simple-icons-rss'
       to: '/blog/rss.xml'
       color: white
-      size: lg
+      size: xs
       target: _blank

docs/pages/blog/[slug].vue

@@ -44,17 +44,10 @@ const socialLinks = computed(() => [{
   icon: 'i-simple-icons-linkedin',
   to: `https://www.linkedin.com/sharing/share-offsite/?url=https://hub.nuxt.com${post.value._path}`
 }, {
-  icon: 'i-simple-icons-twitter',
-  to: `https://twitter.com/intent/tweet?text=${encodeURIComponent(`${post.value.title}\n\n`)}https://hub.nuxt.com${post.value._path}`
+  icon: 'i-simple-icons-x',
+  to: `https://x.com/intent/tweet?text=${encodeURIComponent(`${post.value.title}\n\n`)}https://hub.nuxt.com${post.value._path}`
 }])
 
-const links = computed(() => [{
-  icon: 'i-heroicons-pencil-square',
-  label: 'Edit this post',
-  to: `${toc.bottom.edit}/${post?.value?._file}`,
-  target: '_blank'
-}, ...asideLinks].filter(Boolean))
-
 function copyLink() {
   copy(`https://hub.nuxt.com${post.value._path}`, { title: 'Post URL to clipboard' })
 }
@@ -72,9 +65,7 @@ onMounted(() => {
         <template #headline>
           <UBreadcrumb :links="[{ label: 'Blog', icon: 'i-ph-newspaper-duotone', to: '/blog' }, { label: post.title }]" :ui="{ wrapper: 'max-w-full' }" />
           <div class="flex items-center space-x-2">
-            <span>
-              {{ post.badge?.label || 'Article' }}
-            </span>
+            <UBadge :label="post?.category || 'Article'" color="gray" />
             <span class="text-gray-500 dark:text-gray-400">&middot;&nbsp;&nbsp;<time>{{ formatDateByLocale('en', post.date) }}</time></span>
           </div>
         </template>
@@ -100,17 +91,16 @@ onMounted(() => {
       </UPageHeader>
 
       <UPage>
-        <UPageBody prose class="dark:text-gray-300 dark:prose-pre:!bg-gray-800/60">
+        <UPageBody prose class="dark:text-gray-300 dark:prose-pre:!bg-gray-800/60 lg:pr-10">
           <ContentRenderer v-if="post && post.body" :value="post" />
-
+          <PageSectionCTA />
           <div class="flex items-center justify-between mt-12 not-prose">
-            <UButton to="/blog" variant="link" :padded="false">
-              ← Back to blog
+            <UButton to="/blog" variant="link" :padded="false" color="gray" icon="i-ph-arrow-left">
+              Back to blog
             </UButton>
             <div class="flex justify-end items-center gap-1.5">
-              <UButton icon="i-ph-link-simple" v-bind="($ui.button.secondary as any)" @click="copyLink">
-                Copy URL
-              </UButton>
+              Share:
+              <UButton icon="i-ph-link-simple" color="gray" variant="ghost" @click="copyLink" />
               <UButton
                 v-for="(link, index) in socialLinks"
                 :key="index"
@@ -128,13 +118,7 @@ onMounted(() => {
         </UPageBody>
 
         <template #right>
-          <UContentToc v-if="post.body && post.body.toc" :links="post.body.toc.links">
-            <template #bottom>
-              <div class="hidden lg:block space-y-6">
-                <UPageLinks title="Links" :links="links" />
-              </div>
-            </template>
-          </UContentToc>
+          <UContentToc v-if="post.body && post.body.toc" :links="post.body.toc.links" title="On this page" />
         </template>
       </UPage>
     </UPage>