docs: add content components and improve og image

Author: atinux

docs/app.config.ts

@@ -28,7 +28,7 @@ export default defineAppConfig({
     }]
   },
   footer: {
-    credits: 'Copyright © 2024',
+    credits: 'Copyright NuxtLabs © 2024',
     colorMode: false,
     links: [{
       icon: 'i-simple-icons-nuxtdotjs',

docs/components/OgImage/OgImageDocs.vue

@@ -0,0 +1,19 @@
+
+<script setup lang="ts">
+import type uiColors from '#ui-colors'
+
+const props = defineProps({
+  title: { type: String },
+  icon: { type: String },
+  color: { type: String as PropType<(typeof uiColors)[number]> },
+  to: { type: String },
+})
+
+const target = computed(() => (props.to?.startsWith('https://') ? '_blank' : ''))
+</script>
+
+<template>
+  <Callout :icon="icon" :color="color" :to="to" :target="target">
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </Callout>
+</template>

docs/components/content/Alert.vue

@@ -0,0 +1,11 @@
+<template>
+  <Alert
+    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="$attrs.to ? 'dark:hover:!border-red-600/50 hover:!border-red-400/50' : ''"
+  >
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </Alert>
+</template>

docs/components/content/Caution.vue

@@ -0,0 +1,11 @@
+<template>
+  <Alert
+    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="$attrs.to ? 'dark:hover:!border-violet-600/50 hover:!border-violet-400/50' : ''"
+  >
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </Alert>
+</template>

docs/components/content/Important.vue

@@ -0,0 +1,11 @@
+<template>
+  <Alert
+    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="$attrs.to ? 'dark:hover:!border-blue-600/50 hover:!border-blue-400/50' : ''"
+  >
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </Alert>
+</template>

docs/components/content/Note.vue

@@ -0,0 +1,11 @@
+<template>
+  <Alert
+    title="Tip"
+    icon="i-ph-lightbulb-duotone"
+    color="green"
+    class="dark:!bg-green-800/40 !bg-green-200/40 dark:!border-green-600/30 !border-green-400/30"
+    :class="$attrs.to ? 'dark:hover:!border-green-600/50 hover:!border-green-400/50' : ''"
+  >
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </Alert>
+</template>

docs/components/content/Tip.vue

@@ -0,0 +1,11 @@
+<template>
+  <Alert
+    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="$attrs.to ? 'dark:hover:!border-amber-600/50 hover:!border-amber-400/50' : ''"
+  >
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </Alert>
+</template>

docs/components/content/Warning.vue

@@ -24,16 +24,16 @@ NuxtHub comes with a powerful proxy system to connect to your project's resource
 
 ## Packages
 
-We plan to provide a complete backend experience for Nuxt apps through various `@nuxthub` modules.
+We plan to provide a complete backend experience for Nuxt apps through various `@nuxthub` packages.
 
 - [`@nuxthub/core`](https://github.com/nuxt-hub/core): Main package to provide storage features
 - `@nuxthub/auth`: Add authentication for user management (soon)
 - `@nuxthub/email`: Send transactional emails to your users (soon)
 - `@nuxthub/analytics`: Understand your traffic and track events within your application and API (soon)
 - `@nuxthub/...`: You name it!
 
-::callout
-We are currently in the early stages of development 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).
+::important
+We are currently in the early stages of development (alpha) 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).
 ::
 
 ## Console (alpha)
@@ -52,6 +52,6 @@ The [NuxtHub console](https://console.hub.nuxt.com) is a web based dashboard to
 - Give access to team members to manage the application without sharing your Cloudflare account
 - Monitor your application with logs and analytics
 
-::callout
+::note
 The NuxtHub Console is currently in private alpha and is not yet open to the public. We are looking for early adopters to help us shape the platform. If you are interested, please register on [console.hub.nuxt.com](https://console.hub.nuxt.com) and tell us what you plan to build with NuxtHub.
 ::

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

@@ -60,7 +60,7 @@ export default defineNuxtConfig({
 
 That's it! You can now use NuxtHub features in your Nuxt project.
 
-::callout
+::note
 NuxtHub will create a `.data/hub` directory in your project root, which contains the necessary configuration files and resources for the features to work. It will also add it to the `.gitignore` file to avoid committing it to your repository.
 ::
 
@@ -85,6 +85,6 @@ export default defineNuxtConfig({
   ::
 ::
 
-::callout
+::tip{icon="i-ph-rocket-launch-duotone"}
 You're all set! Now, let's dive into connecting to your Cloudflare account and [deploying it on the Edge](/docs/getting-started/deploy).
 ::

docs/content/docs/1.getting-started/2.installation.md

@@ -7,7 +7,7 @@ To deploy your Nuxt application on the Edge, we use Cloudflare Pages. Therefore,
 
 ## NuxtHub Console (alpha)
 
-The [NuxtHub Console](https://console.hub.nuxt.com) is made to simplify your experience with the NuxtHub module, enabling you to effortlessly manage teams and projects, as well as deploy in seconds combined with the NuxtHub CLI.
+The [NuxtHub Console](https://console.hub.nuxt.com) is made to simplify your experience with NuxtHub, enabling you to effortlessly manage teams and projects, as well as deploy in seconds combined with the NuxtHub CLI.
 
 After linking your Cloudflare account in the console, deploy your project with a single command:
 
@@ -49,7 +49,9 @@ export default defineNuxtConfig({
 })
 ```
 
+::note
 Nuxt will use the remote storage from your deployed project **as long as you are logged in with the [NuxtHub CLI](https://github.com/nuxt-hub/cli) and the local project is linked to a NuxtHub project**.
+::
 
 ## Self-hosted
 
@@ -91,4 +93,7 @@ Then, start your Nuxt project with:
 npx nuxt dev --remote
 ```
 
-NuxtHub will use the remote data from your deployed project as long as the `NUXT_HUB_PROJECT_SECRET` matches the one in your Cloudflare Pages project settings.
+::warning
+NuxtHub will use the remote data from your deployed project as long as the `NUXT_HUB_PROJECT_SECRET` matches the one in 
+your Cloudflare Pages project settings.
+::

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

@@ -5,8 +5,6 @@ description: How to create a database and store entries with NuxtHub.
 
 NuxtHub Database is a layer on top of [Cloudflare D1](https://developers.cloudflare.com/d1), a serverless SQLite databases.
 
-Once properly configured, NuxtHub module exposes a server composable to the application.
-
 ## `hubDatabase()`
 
 Server composable that returns a [D1 database client](https://developers.cloudflare.com/d1/build-databases/query-databases/).

docs/content/docs/2.storage/1.database.md

@@ -3,9 +3,7 @@ title: Blob
 description: How to store objects with NuxtHub.
 ---
 
-NuxtHub Blob is a layer to [Cloudflare R2](https://developers.cloudflare.com/r2){target=_blank}, allowing to store large amounts of unstructured data.
-
-Once properly configured, NuxtHub module exposes a server composable to the application.
+NuxtHub Blob is a layer on top of [Cloudflare R2](https://developers.cloudflare.com/r2), allowing to store large amounts of unstructured data (images, videos, etc.).
 
 ## `hubBlob()`
 

docs/content/docs/2.storage/3.blob.md

@@ -7,8 +7,8 @@ description: Use lifecycle hooks to stay synced with NuxtHub.
 
 Use `onHubReady()` to ensure the execution of some code once NuxtHub environment bindings are set up.
 
-::callout
-It is a shortcut using the [`hubHooks`](#hubhooks) object under the hood to listen to the `bindings:ready` event.
+::note
+`onHubReady()` is a shortcut using the [`hubHooks`](#hubhooks) object under the hood to listen to the `bindings:ready` event.
 ::
 
 This is useful to run database migrations inside your [server/plugins/](https://nuxt.com/docs/guide/directory-structure/server#server-plugins).
@@ -31,10 +31,6 @@ export default defineNitroPlugin(() => {
 
 ```
 
-This is similar to 
-
-<!-- TODO -->
-
 ## `hubHooks`
 
 The `hubHooks` object is a collection of hooks that can be used to stay synced with NuxtHub.
@@ -60,7 +56,7 @@ export default defineNitroPlugin(() => {
 })
 ```
 
-::callout{icon="i-ph-info-duotone"}
+::note
 Note that `hubHooks` is a [hookable](https://hookable.unjs.io) instance.
 ::
 

docs/content/docs/3.recipes/1.hooks.md

@@ -91,6 +91,10 @@ When running the `npm run migrate` command, `drizzle-kit` will generate the migr
 
 ### Migrations
 
+::important
+We are planning to update this section to leverage [Nitro Tasks](https://nitro.unjs.io/guide/tasks) instead of a server plugin very soon.
+::
+
 We can create a server plugin to run the migrations in development automatically:
 
 ```ts [server/plugins/migrations.ts]