From 3274bf09c68b94b14be5104e5265252eea1dbd52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Thu, 29 Aug 2024 18:19:37 +0200
Subject: [PATCH] docs: various improvements

---
 docs/app.config.ts                            |  2 +-
 docs/components/AppFooter.vue                 | 11 +++-
 docs/components/PageSectionCTA.vue            | 47 ++++++++++++++
 docs/content/0.index.yml                      |  2 +-
 .../1.docs/1.getting-started/1.index.md       | 61 +++++++++++--------
 docs/content/4.changelog.yml                  | 10 ++-
 docs/content/4.changelog/blob-folders.md      |  1 -
 .../content/4.changelog/blob-upload-prefix.md |  1 -
 docs/content/4.changelog/deploy-button.md     |  1 -
 .../content/4.changelog/deployment-details.md |  1 -
 .../4.changelog/drizzle-studio-remembers.md   |  1 -
 docs/content/4.changelog/hello-edge.md        |  1 -
 docs/content/4.changelog/hub-ai.md            |  2 +-
 .../4.changelog/hyperdrive-bindings.md        |  1 -
 docs/content/4.changelog/server-cache.md      |  1 -
 docs/content/4.changelog/team-webhooks-env.md |  1 -
 docs/content/4.changelog/team-webhooks.md     |  1 -
 docs/content/5.blog.yml                       | 10 ++-
 docs/pages/blog/[slug].vue                    | 36 +++--------
 docs/pages/changelog/[slug].vue               | 25 +++-----
 docs/pages/changelog/index.vue                |  3 -
 docs/pages/docs/[...slug].vue                 | 37 +++++------
 22 files changed, 143 insertions(+), 113 deletions(-)
 create mode 100644 docs/components/PageSectionCTA.vue

diff --git a/docs/app.config.ts b/docs/app.config.ts
index 279c2b0e..d5f4ef29 100644
--- a/docs/app.config.ts
+++ b/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'
     }
diff --git a/docs/components/AppFooter.vue b/docs/components/AppFooter.vue
index b999537d..4b3e1230 100644
--- a/docs/components/AppFooter.vue
+++ b/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"
diff --git a/docs/components/PageSectionCTA.vue b/docs/components/PageSectionCTA.vue
new file mode 100644
index 00000000..6a1f89df
--- /dev/null
+++ b/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>
diff --git a/docs/content/0.index.yml b/docs/content/0.index.yml
index 16093b8e..28545d67 100644
--- a/docs/content/0.index.yml
+++ b/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
diff --git a/docs/content/1.docs/1.getting-started/1.index.md b/docs/content/1.docs/1.getting-started/1.index.md
index ac5b9611..c57dc37a 100644
--- a/docs/content/1.docs/1.getting-started/1.index.md
+++ b/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).
 ::
diff --git a/docs/content/4.changelog.yml b/docs/content/4.changelog.yml
index fd1ebdba..6e606df8 100644
--- a/docs/content/4.changelog.yml
+++ b/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
diff --git a/docs/content/4.changelog/blob-folders.md b/docs/content/4.changelog/blob-folders.md
index 3ca57fd7..2c9a5f4f 100644
--- a/docs/content/4.changelog/blob-folders.md
+++ b/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: 
diff --git a/docs/content/4.changelog/blob-upload-prefix.md b/docs/content/4.changelog/blob-upload-prefix.md
index ac8cf213..838c1217 100644
--- a/docs/content/4.changelog/blob-upload-prefix.md
+++ b/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: 
diff --git a/docs/content/4.changelog/deploy-button.md b/docs/content/4.changelog/deploy-button.md
index 571a39a3..b786593b 100644
--- a/docs/content/4.changelog/deploy-button.md
+++ b/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: 
diff --git a/docs/content/4.changelog/deployment-details.md b/docs/content/4.changelog/deployment-details.md
index 4e08d3fe..63ffb751 100644
--- a/docs/content/4.changelog/deployment-details.md
+++ b/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: 
diff --git a/docs/content/4.changelog/drizzle-studio-remembers.md b/docs/content/4.changelog/drizzle-studio-remembers.md
index 2639bc04..2fe773e7 100644
--- a/docs/content/4.changelog/drizzle-studio-remembers.md
+++ b/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: 
diff --git a/docs/content/4.changelog/hello-edge.md b/docs/content/4.changelog/hello-edge.md
index 8fd4eb1c..032570ea 100644
--- a/docs/content/4.changelog/hello-edge.md
+++ b/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: 
diff --git a/docs/content/4.changelog/hub-ai.md b/docs/content/4.changelog/hub-ai.md
index b171c063..fe9fffe8 100644
--- a/docs/content/4.changelog/hub-ai.md
+++ b/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: 
diff --git a/docs/content/4.changelog/hyperdrive-bindings.md b/docs/content/4.changelog/hyperdrive-bindings.md
index b7493bfc..656760da 100644
--- a/docs/content/4.changelog/hyperdrive-bindings.md
+++ b/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: 
diff --git a/docs/content/4.changelog/server-cache.md b/docs/content/4.changelog/server-cache.md
index a14532c5..12c81577 100644
--- a/docs/content/4.changelog/server-cache.md
+++ b/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:
diff --git a/docs/content/4.changelog/team-webhooks-env.md b/docs/content/4.changelog/team-webhooks-env.md
index e44802a3..7804f854 100644
--- a/docs/content/4.changelog/team-webhooks-env.md
+++ b/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: 
diff --git a/docs/content/4.changelog/team-webhooks.md b/docs/content/4.changelog/team-webhooks.md
index 295de112..4f64eaec 100644
--- a/docs/content/4.changelog/team-webhooks.md
+++ b/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: 
diff --git a/docs/content/5.blog.yml b/docs/content/5.blog.yml
index c6afb3ad..82465654 100644
--- a/docs/content/5.blog.yml
+++ b/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
diff --git a/docs/pages/blog/[slug].vue b/docs/pages/blog/[slug].vue
index 6efc6387..762d07da 100644
--- a/docs/pages/blog/[slug].vue
+++ b/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>
diff --git a/docs/pages/changelog/[slug].vue b/docs/pages/changelog/[slug].vue
index 1a03f1b7..8441fca6 100644
--- a/docs/pages/changelog/[slug].vue
+++ b/docs/pages/changelog/[slug].vue
@@ -41,8 +41,8 @@ const socialLinks = computed(() => [{
   icon: 'i-simple-icons-linkedin',
   to: `https://www.linkedin.com/sharing/share-offsite/?url=https://hub.nuxt.com${changelog.value._path}`
 }, {
-  icon: 'i-simple-icons-twitter',
-  to: `https://twitter.com/intent/tweet?text=${encodeURIComponent(`NuxtHub: ${changelog.value.title}\n\n`)}https://hub.nuxt.com${changelog.value._path}`
+  icon: 'i-simple-icons-x',
+  to: `https://x.com/intent/tweet?text=${encodeURIComponent(`NuxtHub: ${changelog.value.title}\n\n`)}https://hub.nuxt.com${changelog.value._path}`
 }])
 
 function copyLink() {
@@ -85,17 +85,16 @@ function copyLink() {
       </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="changelog && changelog.body" :value="changelog" />
-
+          <PageSectionCTA />
           <div class="flex items-center justify-between mt-12 not-prose">
-            <UButton to="/changelog" variant="link" :padded="false">
-              ← Back to changelog
+            <UButton to="/changelog" variant="link" :padded="false" color="gray" icon="i-ph-arrow-left">
+              Back to changelog
             </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"
@@ -113,13 +112,7 @@ function copyLink() {
         </UPageBody>
 
         <template #right>
-          <UContentToc v-if="changelog.body && changelog.body.toc" :links="changelog.body.toc.links">
-            <template #bottom>
-              <div class="hidden lg:block space-y-6">
-                <UPageLinks title="Links" :links="asideLinks" />
-              </div>
-            </template>
-          </UContentToc>
+          <UContentToc v-if="changelog.body && changelog.body.toc" :links="changelog.body.toc.links" title="On this page" />
         </template>
       </UPage>
     </UPage>
diff --git a/docs/pages/changelog/index.vue b/docs/pages/changelog/index.vue
index f77e8be0..16905e9a 100644
--- a/docs/pages/changelog/index.vue
+++ b/docs/pages/changelog/index.vue
@@ -123,9 +123,6 @@ watch(() => arrivedState.bottom, () => {
               </NuxtLink>
 
               <div class="flex flex-col">
-                <div v-if="changelog.category" class="block mb-2">
-                  <UBadge :label="changelog.category" color="gray" variant="solid" />
-                </div>
                 <h2 class="text-3xl font-semibold">
                   <NuxtLink :to="changelog._path" class="hover:underline underline-offset-4 decoration-1">
                     {{ changelog.title }}
diff --git a/docs/pages/docs/[...slug].vue b/docs/pages/docs/[...slug].vue
index bad4f0cb..30e4a9e9 100644
--- a/docs/pages/docs/[...slug].vue
+++ b/docs/pages/docs/[...slug].vue
@@ -36,13 +36,6 @@ defineOgImageComponent('Docs', {
 
 const headline = computed(() => findPageHeadline(page.value))
 
-const links = computed(() => [toc?.bottom?.edit && {
-  icon: 'i-heroicons-pencil-square',
-  label: 'Edit this page',
-  to: `${toc.bottom.edit}/${page?.value?._file}`,
-  target: '_blank'
-}, ...asideLinks].filter(Boolean))
-
 onMounted(() => {
   mediumZoom('[data-zoom-src]', {
     margin: 5
@@ -54,24 +47,26 @@ onMounted(() => {
   <UPage>
     <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
 
-    <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 pb-0">
       <ContentRenderer v-if="page.body" :value="page" />
-
-      <hr v-if="surround?.length">
-
-      <UContentSurround :surround="surround" />
     </UPageBody>
+    <div class="pb-24">
+      <UDivider class="my-10">
+        <div class="flex items-center gap-2 text-sm dark:text-gray-400">
+          <UButton size="sm" variant="link" color="gray" to="https://github.com/nuxt-hub/core/issues/new/choose" target="_blank">
+            Report an issue
+          </UButton>
+          or
+          <UButton size="sm" variant="link" color="gray" :to="`${toc.bottom.edit}/${page?._file}`" target="_blank">
+            Edit this page on GitHub
+          </UButton>
+        </div>
+      </UDivider>
+      <UContentSurround :surround="surround" />
+    </div>
 
     <template v-if="page.toc !== false" #right>
-      <UContentToc :title="toc?.title" :links="page.body?.toc?.links" class="bg-transparent dark:bg-transparent backdrop-blur-none">
-        <template v-if="toc?.bottom" #bottom>
-          <div class="hidden lg:block space-y-6" :class="{ '!mt-6': page.body?.toc?.links?.length }">
-            <UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
-
-            <UPageLinks title="Links" :links="links" />
-          </div>
-        </template>
-      </UContentToc>
+      <UContentToc :title="toc?.title" :links="page.body?.toc?.links" class="bg-transparent dark:bg-transparent backdrop-blur-none" />
     </template>
   </UPage>
 </template>