docs: improve content and add cache note

Author: atinux

docs/components/content/Caution.vue

@@ -3,9 +3,20 @@
     title="Caution"
     icon="i-ph-warning-octagon-duotone"
     color="red"
-    class="prose-a:text-red-500 hover:prose-a:border-red-500 dark:prose-a:text-red-400 dark:hover:prose-a:border-red-400 dark:!bg-red-800/40 !bg-red-200/40 dark:!border-red-600/30 !border-red-400/30"
+    class="_caution"
     :class="$attrs.to ? 'dark:hover:!border-red-600/50 hover:!border-red-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
+
+<style lang="postcss">
+._caution {
+  @apply prose-a:text-red-500 hover:prose-a:border-red-500 !bg-red-200/40 !border-red-400/30 prose-code:text-red-700 text-red-900;
+  @apply dark:!border-red-600 dark:prose-a:text-red-400 dark:hover:prose-a:border-red-400 dark:!bg-red-900/70 dark:text-red-200 dark:prose-code:text-red-200;
+  a code {
+    @apply hover:!text-red-600 hover:!border-red-400;
+    @apply dark:hover:!text-red-400 dark:hover:!border-red-400;
+  }
+}
+</style>

docs/components/content/Important.vue

@@ -3,9 +3,20 @@
     title="Important"
     icon="i-ph-warning-diamond-duotone"
     color="violet"
-    class="prose-a:text-violet-500 hover:prose-a:border-violet-500 dark:prose-a:text-violet-400 dark:hover:prose-a:border-violet-400 dark:!bg-violet-800/30 !bg-violet-200/50 dark:!border-violet-600/30 !border-violet-400/30"
+    class="_important"
     :class="$attrs.to ? 'dark:hover:!border-violet-600/50 hover:!border-violet-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
+
+<style lang="postcss">
+._important {
+  @apply prose-a:text-violet-500 hover:prose-a:border-violet-500 !bg-violet-200/40 !border-violet-400/30 prose-code:text-violet-700 text-violet-950;
+  @apply dark:!border-violet-600 dark:prose-a:text-violet-400 dark:hover:prose-a:border-violet-400 dark:!bg-violet-900/50 dark:text-violet-200 dark:prose-code:text-violet-200;
+  a code {
+    @apply hover:!text-violet-700 hover:!border-violet-400;
+    @apply dark:hover:!text-violet-400 dark:hover:!border-violet-400;
+  }
+}
+</style>

docs/components/content/Note.vue

@@ -3,9 +3,20 @@
     title="Note"
     icon="i-ph-info-duotone"
     color="blue"
-    class="prose-a:text-blue-500 hover:prose-a:border-blue-500 dark:prose-a:text-blue-400 dark:hover:prose-a:border-blue-400 dark:!bg-blue-800/40 !bg-blue-200/40 dark:!border-blue-600/30 !border-blue-400/30"
+    class="_note"
     :class="$attrs.to ? 'dark:hover:!border-blue-600/50 hover:!border-blue-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
+
+<style lang="postcss">
+._note {
+  @apply prose-a:text-blue-500 hover:prose-a:border-blue-500 !bg-blue-200/40 !border-blue-400/30 prose-code:text-blue-700 text-blue-900;
+  @apply dark:!border-blue-600 dark:prose-a:text-blue-400 dark:hover:prose-a:border-blue-400 dark:!bg-blue-900/70 dark:text-blue-200 dark:prose-code:text-blue-200;
+  a code {
+    @apply hover:!text-blue-600 hover:!border-blue-400;
+    @apply dark:hover:!text-blue-400 dark:hover:!border-blue-400;
+  }
+}
+</style>

docs/components/content/Tip.vue

@@ -3,9 +3,20 @@
     title="Tip"
     icon="i-ph-lightbulb-duotone"
     color="green"
-    class="prose-a:text-green-500 hover:prose-a:border-green-500 dark:prose-a:text-green-400 dark:hover:prose-a:border-green-400 dark:!bg-green-800/40 !bg-green-200/40 dark:!border-green-600/30 !border-green-400/30"
+    class="_tip"
     :class="$attrs.to ? 'dark:hover:!border-green-600/50 hover:!border-green-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
+
+<style lang="postcss">
+._tip {
+  @apply prose-a:text-green-500 hover:prose-a:border-green-500 !bg-green-200/40 !border-green-400/30 prose-code:text-green-700 text-green-900;
+  @apply dark:!border-green-600 dark:prose-a:text-green-400 dark:hover:prose-a:border-green-400 dark:!bg-green-900/70 dark:text-green-200 dark:prose-code:text-green-200;
+  a code {
+    @apply hover:!text-green-600 hover:!border-green-400;
+    @apply dark:hover:!text-green-400 dark:hover:!border-green-400;
+  }
+}
+</style>

docs/components/content/Warning.vue

@@ -3,9 +3,20 @@
     title="Warning"
     icon="i-ph-warning-duotone"
     color="amber"
-    class="prose-a:text-amber-500 hover:prose-a:border-amber-500 dark:prose-a:text-amber-400 dark:hover:prose-a:border-amber-400 dark:!bg-amber-800/40 dark:!border-amber-800/40 !bg-amber-200/30 !border-amber-400/30"
+    class="_warning"
     :class="$attrs.to ? 'dark:hover:!border-amber-600/50 hover:!border-amber-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
+
+<style lang="postcss">
+._warning {
+  @apply prose-a:text-amber-500 hover:prose-a:border-amber-500 !bg-amber-200/40 !border-amber-400/30 prose-code:text-amber-700 text-amber-900;
+  @apply dark:!border-amber-600/80 dark:prose-a:text-amber-400 dark:hover:prose-a:border-amber-400 dark:!bg-amber-800/50 dark:text-amber-200 dark:prose-code:text-amber-200;
+  a code {
+    @apply hover:!text-amber-600 hover:!border-amber-400;
+    @apply dark:hover:!text-amber-400 dark:hover:!border-amber-400;
+  }
+}
+</style>

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

@@ -3,23 +3,24 @@ title: Introduction
 description: NuxtHub helps you build full-stack applications on the Edge.
 ---
 
-NuxtHub aims to provide a complete backend experience for [Nuxt](https://nuxt.com) apps, allowing developers to build full-stack applications on the Edge.
+NuxtHub aims to provide a complete backend experience for [Nuxt](https://nuxt.com) apps, 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).
 
 ::callout
 It is **currently made to be deployed on [Cloudflare Pages](https://pages.cloudflare.com)** as it leverages many Cloudflare features such as KV, D1, and R2. We are looking to support other platforms in the future.
 ::
 
-## Storage
+## Features
 
-NuxtHub provides different storage to help you build full-stack applications:
+NuxtHub provides multiple features to help you build full-stack applications:
 - **SQL database** to store your application's data with [`hubDatabase()`](/docs/storage/database)
 - **Key-Value** to store JSON data accessible globally with low-latency with [`hubKV()`](/docs/storage/kv)
 - **Blob storage** to store static assets, such as images, videos and more with [`hubBlob()`](/docs/storage/blob)
+- **Cache storage** to cache your server route responses or functions using Nitro's [`cachedEventHandler`](https://nitro.unjs.io/guide/cache#cached-event-handlers) and [`cachedFunction`](https://nitro.unjs.io/guide/cache#cached-functions)
 
-Each storage utils is auto-imported and ready to be used in your [Nuxt's server directory](https://nuxt.com/docs/guide/directory-structure/server).
+Each storage utils is auto-imported and configured to be used in your [Nuxt's server directory](https://nuxt.com/docs/guide/directory-structure/server).
 
 ::callout{icon="i-ph-plugs-connected-duotone" to="/docs/getting-started/deploy#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.
+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`.
 ::
 
 ## Packages

docs/content/docs/1.getting-started/3.deploy.md

@@ -59,15 +59,19 @@ Nuxt will use the remote storage from your deployed project **as long as you are
 
 You can deploy your project on your own Cloudflare account without using the NuxtHub Console.
 
-For that, you need to create the necessary resources in your Cloudflare account and configure your project to use them.
+For that, you need to create the necessary resources in your Cloudflare account and configure your project to use them:
 
-1. Create a D1 database, KV namespace and R2 bucket in your Cloudflare account.
-2. Create a Cloudflare Pages project and link it to your GitHub or Gitlab repository and choose the Nuxt Framework preset in the build settings.
+- One [D1 database](https://dash.cloudflare.com/?to=/:account/workers/d1)
+- Two [KV namespaces](https://dash.cloudflare.com/?to=/:account/workers/kv/namespaces) (one for `hubKV()` and one for [server caching](https://nitro.unjs.io/guide/cache))
+- One [R2 bucket](https://dash.cloudflare.com/?to=/:account/r2/new)
+
+Then, create a [Cloudflare Pages project](https://dash.cloudflare.com/?to=/:account/pages/new/provider/github) and link your GitHub or Gitlab repository and choose the Nuxt Framework preset in the build settings.
 
 Once your project is created, open the `Settings -> Functions` tab and set:
 - Placement: Smart
 - KV namespace bindings
   - `KV` -> select your KV namespace created
+  - `CACHE` -> select your KV namespace for caching created
 - R2 bucket bindings
   - `BLOB` -> select your R2 bucket created
 - D1 database bindings

docs/pages/[...slug].vue

@@ -47,7 +47,7 @@ const links = computed(() => [toc?.bottom?.edit && {
   <UPage>
     <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
 
-    <UPageBody prose class="dark:text-gray-300">
+    <UPageBody prose class="dark:text-gray-300 dark:prose-pre:!bg-gray-800/60">
       <ContentRenderer v-if="page.body" :value="page" />
 
       <hr v-if="surround?.length">