docs: use img tag

atinux · atinux · commit 6cfa14c4c25a · 2025-04-08T11:44:12.000+02:00
diff --git a/docs/content/blog/1.beta.md b/docs/content/blog/1.beta.md
@@ -49,11 +49,11 @@ One of the core features of the `@nuxthub/core` module is the ability to connect
 
 This feature is useful for working with your production or staging database, KV and blob storage during development.
 
-:nuxt-img{src="/images/blog/nuxthub-remote-storage.png" alt="NuxtHub remote storage in terminal" width="915" height="515"}
+:img{src="/images/blog/nuxthub-remote-storage.png" alt="NuxtHub remote storage in terminal" width="915" height="515"}
 
 When opening the [Nuxt DevTools](https://devtools.nuxt.com) of your project, you will notice new tabs:
 
-:nuxt-img{src="/images/blog/nuxthub-devtools.png" alt="NuxtHub tabs in Nuxt devtools" width="915" height="515"}
+:img{src="/images/blog/nuxthub-devtools.png" alt="NuxtHub tabs in Nuxt devtools" width="915" height="515"}
 
 NuxtHub adds a UI to administrate your SQL database (powered by [Drizzle Studio](https://orm.drizzle.team/drizzle-studio/overview)), KV and Blob storage as well as your server cache.
 
@@ -77,7 +77,7 @@ Some of the features are:
 - Monitor your application with logs and analytics
 
 ::a{href="https://admin.hub.nuxt.com" target="_blank"}
-  :nuxt-img{src="/images/blog/nuxthub-admin-projects.png" alt="NuxtHub projects management" width="915" height="515"}
+  :img{src="/images/blog/nuxthub-admin-projects.png" alt="NuxtHub projects management" width="915" height="515"}
 ::
 
 You can sign up for free and start building full-stack Nuxt applications at [admin.hub.nuxt.com](https://admin.hub.nuxt.com).
@@ -106,11 +106,11 @@ NuxtHub also has the ability to access your remote storage from your local envir
 
 As of today, NuxtHub works like this:
 
-:nuxt-img{src="/images/landing/nuxthub-schema.png" alt="NuxtHub architecture" width="915" height="594"}
+:img{src="/images/landing/nuxthub-schema.png" alt="NuxtHub architecture" width="915" height="594"}
 
 This is only the beginning as we plan to support more Cloudflare primitives in the future:
 
-:nuxt-img{src="/images/blog/cloudflare-primitives.png" alt="Cloudflare primitives" width="915" height="810"}
+:img{src="/images/blog/cloudflare-primitives.png" alt="Cloudflare primitives" width="915" height="810"}
 
 ## What’s next?
 
diff --git a/docs/content/blog/2.drawing-app-with-nuxt-and-cloudflare-r2.md b/docs/content/blog/2.drawing-app-with-nuxt-and-cloudflare-r2.md
@@ -447,7 +447,7 @@ When running your project locally, you can open the Nuxt DevTools:
 - `Shift + Option + D` shortcut or clicking on the Nuxt logo in the botttom of the screen
 - The look for the **Hub Blob** tab (you can also use `CTRL + K` to open the search bar and type `Blob`)
 
-:nuxt-img{src="/images/blog/atidraw-devtools-blob.png" alt="NuxtHub DevTools Blob for Atidraw" width="915" height="515" data-zoom-src="/images/blog/atidraw-devtools-blob.png"}
+:img{src="/images/blog/atidraw-devtools-blob.png" alt="NuxtHub DevTools Blob for Atidraw" width="915" height="515" data-zoom-src="/images/blog/atidraw-devtools-blob.png"}
 
 ### Production
 
@@ -461,7 +461,7 @@ npx nuxthub manage
 
 Or go to https://admin.hub.nuxt.com and select your project.
 
-:nuxt-img{src="/images/blog/atidraw-admin-blob.png" alt="NuxtHub Admin Blob for Atidraw" width="915" height="515" data-zoom-src="/images/blog/atidraw-admin-blob.png"}
+:img{src="/images/blog/atidraw-admin-blob.png" alt="NuxtHub Admin Blob for Atidraw" width="915" height="515" data-zoom-src="/images/blog/atidraw-admin-blob.png"}
 
 ## Conclusion
 
diff --git a/docs/content/blog/3.cloudflare-ai-for-user-experience.md b/docs/content/blog/3.cloudflare-ai-for-user-experience.md
@@ -83,7 +83,7 @@ I've been thinking about two features:
 
 Before starting, I took a look at [Cloudflare's multi modal playground](https://multi-modal.ai.cloudflare.com/) and played with some models.
 
-:nuxt-img{alt="Atidraw AI models" dataZoomSrc="/images/blog/atidraw-ai-models.png" height="515" src="/images/blog/atidraw-ai-models.png" width="915"}
+:img{alt="Atidraw AI models" dataZoomSrc="/images/blog/atidraw-ai-models.png" height="515" src="/images/blog/atidraw-ai-models.png" width="915"}
 
 This guided me to the following models:
 - [LLaVA](https://developers.cloudflare.com/workers-ai/models/llava-1.5-7b-hf/) for the alternative text generation
diff --git a/docs/content/changelog/blob-folders.md b/docs/content/changelog/blob-folders.md
@@ -40,7 +40,7 @@ Learn more about Blob Storage.
 
 When viewing your blobs in the [NuxtHub admin](https://admin.hub.nuxt.com), you will now see a folder structure:
 
-:nuxt-img{src="/images/changelog/server-cache.png" alt="NuxtHub Deployment Details" width="915" height="515"}
+:img{src="/images/changelog/server-cache.png" alt="NuxtHub Deployment Details" width="915" height="515"}
 
 ::callout{icon="i-lucide-heart"}
 Thank you to [Gerben Mulder](https://github.com/Gerbuuun) for suggesting this feature on [nuxt-hub/core#101](https://github.com/nuxt-hub/core/issues/101).
diff --git a/docs/content/changelog/cloudflare-access.md b/docs/content/changelog/cloudflare-access.md
@@ -19,7 +19,7 @@ We now fully support Cloudflare Access across admin, module and CLI.
 
 ## What is Cloudflare Access
 
-:nuxt-img{src="/images/changelog/cloudflare-access.png" alt="Cloudflare Access" width="915" height="515"}
+:img{src="/images/changelog/cloudflare-access.png" alt="Cloudflare Access" width="915" height="515"}
 
 [Cloudflare Access](https://www.cloudflare.com/zero-trust/products/access/) allows you to secure your web applications by restricting who can reach your application by applying configured identity-aware Access policies. Cloudflare Access is part of [Cloudflare's Zero Trust](https://www.cloudflare.com/plans/zero-trust-services/) offerings.
 
diff --git a/docs/content/changelog/database-migrations.md b/docs/content/changelog/database-migrations.md
@@ -23,7 +23,7 @@ This feature is available on both [free and pro plans](/pricing) starting with [
 
 We're excited to introduce automatic [database migrations](/docs/features/database#database-migrations) in NuxtHub.
 
-:nuxt-img{src="/images/changelog/database-migrations.png" alt="Automatic Database Migrations" width="915" height="515"}
+:img{src="/images/changelog/database-migrations.png" alt="Automatic Database Migrations" width="915" height="515"}
 
 ## Automatic Migration Application
 
@@ -36,7 +36,7 @@ Starting now, when you clone any of [our templates](/templates) with a database,
 
 [→ Deploy the Todo App template](https://admin.hub.nuxt.com/new?template=atidone)
 
-:nuxt-img{src="/images/changelog/database-migration-on-deploy.png" alt="Database Migrations applied during deployment" width="915" height="515"}
+:img{src="/images/changelog/database-migration-on-deploy.png" alt="Database Migrations applied during deployment" width="915" height="515"}
 
 ::note{to="/docs/features/database#database-migrations"}
 Learn more about database migrations in our **full documentation**.
diff --git a/docs/content/changelog/deploy-button.md b/docs/content/changelog/deploy-button.md
@@ -18,7 +18,7 @@ authors:
 
 The button is designed to be used in the README of a GitHub repository, documentations or any other place where you want to allow users to deploy your project with one click.
 
-:nuxt-img{src="/images/changelog/deploy-button.png" alt="NuxtHub Deploy Button" width="915" height="515"}
+:img{src="/images/changelog/deploy-button.png" alt="NuxtHub Deploy Button" width="915" height="515"}
 
 ## Deploy Button
 
diff --git a/docs/content/changelog/deployment-details.md b/docs/content/changelog/deployment-details.md
@@ -23,7 +23,7 @@ authors:
 
 We are excited to announce that we have added a new page to NuxtHub: **Deployment Details**!
 
-:nuxt-img{src="/images/changelog/deployment-details.png" alt="NuxtHub Deployment Details" width="915" height="515"}
+:img{src="/images/changelog/deployment-details.png" alt="NuxtHub Deployment Details" width="915" height="515"}
 
 You can now access more information about each deployment such as:
 - **Details:** Status, Branch, Commit and more
diff --git a/docs/content/changelog/github-app-and-action.md b/docs/content/changelog/github-app-and-action.md
@@ -23,17 +23,17 @@ We're thrilled to release our brand new [GitHub Application](https://github.com/
 
 Once setup, NuxtHub will automatically comment on pull requests with branch URLs, permalinks and QR codes for easy preview access.
 
-:nuxt-img{src="/images/changelog/nuxthub-github-app-action.png" alt="GitHub Action" width="926" height="520"}
+:img{src="/images/changelog/nuxthub-github-app-action.png" alt="GitHub Action" width="926" height="520"}
 
 ## GitHub Deployments
 
 NuxtHub also integrates with GitHub's deployment system, including status updates and environment tracking.
 
-:nuxt-img{src="/images/changelog/nuxthub-github-action-deployment.png" alt="NuxtHub GitHub Action deployments" width="926" height="521"}
+:img{src="/images/changelog/nuxthub-github-action-deployment.png" alt="NuxtHub GitHub Action deployments" width="926" height="521"}
 
 This includes GitHub Deployments support in pull requests.
 
-:nuxt-img{src="/images/changelog/nuxthub-github-action-deployment-pr.png" alt="NuxtHub GitHub Action deployments" width="926" height="219"}
+:img{src="/images/changelog/nuxthub-github-action-deployment-pr.png" alt="NuxtHub GitHub Action deployments" width="926" height="219"}
 
 And many more:
 - **Deployment Protection**: Support for GitHub's deployment protection rules which enable approval workflows and environment restrictions ([learn more on GitHub's documentation](https://docs.github.com/en/actions/managing-workflow-runs-and-deployments/managing-deployments/managing-environments-for-deployment#deployment-protection-rules))
@@ -44,7 +44,7 @@ And many more:
 
 Thanks to the new GitHub App, you can now clone a template from NuxtHub Admin and deploy it with a single click.
 
-:nuxt-img{src="/images/changelog/nuxthub-github-app-clone-template.png" alt="NuxtHub GitHub App clone template" width="2596" height="1460"}
+:img{src="/images/changelog/nuxthub-github-app-clone-template.png" alt="NuxtHub GitHub App clone template" width="2596" height="1460"}
 
 ::note
 The repository will be created in your GitHub account with the GitHub Actions workflow already configured.
diff --git a/docs/content/changelog/hub-vectorize.md b/docs/content/changelog/hub-vectorize.md
@@ -18,7 +18,7 @@ This feature is available on both [free and pro plans](/pricing) and in [`@nuxth
 
 We are excited to introduce [`hubVectorize()`](/docs/features/vectorize), which gives you access to a globally distributed vector database from Nuxt. Paired with [`hubAI()`](/docs/features/ai), it makes Nuxt a perfect framework for easily building full-stack AI-powered applications.
 
-:nuxt-img{src="/images/changelog/nuxthub-vectorize.png" alt="NuxtHub Vectorize command" width="915" height="515"}
+:img{src="/images/changelog/nuxthub-vectorize.png" alt="NuxtHub Vectorize command" width="915" height="515"}
 
 ## What is a vector database?
 
diff --git a/docs/content/changelog/nuxthub-preview.md b/docs/content/changelog/nuxthub-preview.md
@@ -32,7 +32,7 @@ This command will:
 1. read the `dist/hub.config.json` file and generate a local `dist/wrangler.toml` file
 2. start the server using the `wrangler pages dev` command within the `dist/` director
 
-:nuxt-img{src="/images/changelog/nuxthub-preview.png" alt="NuxtHub Preview command" width="915" height="515"}
+:img{src="/images/changelog/nuxthub-preview.png" alt="NuxtHub Preview command" width="915" height="515"}
 
 ## Limitations
 
diff --git a/docs/content/changelog/server-cache.md b/docs/content/changelog/server-cache.md
@@ -18,7 +18,7 @@ authors:
 
 We are excited to announce that we have added a new page to your NuxtHub project: **Server Cache**!
 
-:nuxt-img{src="/images/changelog/server-cache.png" alt="NuxtHub Deployment Details" width="915" height="515"}
+:img{src="/images/changelog/server-cache.png" alt="NuxtHub Deployment Details" width="915" height="515"}
 
 It works with:
 - [`cachedEventHandler`](https://nitro.unjs.io/guide/cache#cached-event-handlers)
diff --git a/docs/content/changelog/team-webhooks-env.md b/docs/content/changelog/team-webhooks-env.md
@@ -26,7 +26,7 @@ You can select to be notified about all environments, only the production or pre
 
 We also added the possibility to add a name to the webhook for better identification.
 
-:nuxt-img{src="/images/changelog/team-webhooks-env.png" alt="Team Webhooks Env selection" width="915" height="515" class="rounded"}
+:img{src="/images/changelog/team-webhooks-env.png" alt="Team Webhooks Env selection" width="915" height="515" class="rounded"}
 
 ::callout{icon="i-lucide-webhooks" to="/changelog/team-webhooks"}
 Learn more about team webhooks.
diff --git a/docs/content/changelog/team-webhooks.md b/docs/content/changelog/team-webhooks.md
@@ -26,21 +26,21 @@ This feature is available on all [NuxtHub plans](/pricing).
 
 They allow you to get notified about your project deployments. You can use them to trigger custom actions, like sending notifications to your team's chat, updating your project management tool and more.
 
-:nuxt-img{src="/images/changelog/team-webhooks.png" alt="Team Webhooks" width="915" height="515"}
+:img{src="/images/changelog/team-webhooks.png" alt="Team Webhooks" width="915" height="515"}
 
 ## Creating a Webhook
 
 To create a webhook, go to your team settings and click on the "Webhooks" tab. You can then add a new webhook by providing an endpoint and selecting the events you want to trigger the webhook for.
 
-:nuxt-img{src="/images/changelog/team-webhooks-new.png" alt="Creating a NuxtHub Webhook" width="915" height="515"}
+:img{src="/images/changelog/team-webhooks-new.png" alt="Creating a NuxtHub Webhook" width="915" height="515"}
 
 ## Slack & Discord Integration
 
 We have also added built-in integrations for [Slack Incoming Webhooks](https://api.slack.com/messaging/webhooks) and [Discord Webhooks](https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks).
 
 When pasting a webhook URL from these services, we will automatically send a pre-formatted message to your channel or user.
 
-:nuxt-img{src="/images/changelog/team-webhooks-slack.png" alt="NuxtHub Slack Integration" width="915" height="515"}
+:img{src="/images/changelog/team-webhooks-slack.png" alt="NuxtHub Slack Integration" width="915" height="515"}
 
 ::callout{icon="i-lucide-heart"}
 Thank you to [Israel Ortuno](https://github.com/IsraelOrtuno) for suggesting this feature on [nuxt-hub/core#102](https://github.com/nuxt-hub/core/issues/102).
diff --git a/docs/content/docs/1.getting-started/1.index.md b/docs/content/docs/1.getting-started/1.index.md
@@ -54,35 +54,35 @@ NuxtHub provides optional features to help you build full-stack applications:
 
 ::tabs
   :::div{label="Projects"}
-  :nuxt-img{alt="NuxtHub Admin" dataZoomSrc="/images/landing/nuxthub-admin.png" height="515" src="/images/landing/nuxthub-admin.png" width="915"}
+  :img{alt="NuxtHub Admin" dataZoomSrc="/images/landing/nuxthub-admin.png" height="515" src="/images/landing/nuxthub-admin.png" width="915"}
   :::
 
   :::div{label="Deployments"}
-  :nuxt-img{alt="NuxtHub Admin Deployments" dataZoomSrc="/images/landing/nuxthub-admin-project.png" height="515" src="/images/landing/nuxthub-admin-project.png" width="915"}
+  :img{alt="NuxtHub Admin Deployments" dataZoomSrc="/images/landing/nuxthub-admin-project.png" height="515" src="/images/landing/nuxthub-admin-project.png" width="915"}
   :::
 
   :::div{label="Database"}
-  :nuxt-img{alt="NuxtHub Admin Database" dataZoomSrc="/images/landing/nuxthub-admin-database.png" height="515" src="/images/landing/nuxthub-admin-database.png" width="915"}
+  :img{alt="NuxtHub Admin Database" dataZoomSrc="/images/landing/nuxthub-admin-database.png" height="515" src="/images/landing/nuxthub-admin-database.png" width="915"}
   :::
 
   :::div{label="KV"}
-  :nuxt-img{alt="NuxtHub Admin KV" dataZoomSrc="/images/landing/nuxthub-admin-kv.png" height="515" src="/images/landing/nuxthub-admin-kv.png" width="915"}
+  :img{alt="NuxtHub Admin KV" dataZoomSrc="/images/landing/nuxthub-admin-kv.png" height="515" src="/images/landing/nuxthub-admin-kv.png" width="915"}
   :::
 
   :::div{label="Blob"}
-  :nuxt-img{alt="NuxtHub Admin Blob" dataZoomSrc="/images/landing/nuxthub-admin-blob.png" height="515" src="/images/landing/nuxthub-admin-blob.png" width="915"}
+  :img{alt="NuxtHub Admin Blob" dataZoomSrc="/images/landing/nuxthub-admin-blob.png" height="515" src="/images/landing/nuxthub-admin-blob.png" width="915"}
   :::
 
   :::div{label="Logs"}
-  :nuxt-img{alt="NuxtHub Admin Logs" dataZoomSrc="/images/landing/nuxthub-admin-server-logs.png" height="515" src="/images/landing/nuxthub-admin-server-logs.png" width="915"}
+  :img{alt="NuxtHub Admin Logs" dataZoomSrc="/images/landing/nuxthub-admin-server-logs.png" height="515" src="/images/landing/nuxthub-admin-server-logs.png" width="915"}
   :::
 
   :::div{label="Open API"}
-  :nuxt-img{alt="NuxtHub Admin Open API" dataZoomSrc="/images/landing/nuxthub-admin-open-api.png" height="515" src="/images/landing/nuxthub-admin-open-api.png" width="915"}
+  :img{alt="NuxtHub Admin Open API" dataZoomSrc="/images/landing/nuxthub-admin-open-api.png" height="515" src="/images/landing/nuxthub-admin-open-api.png" width="915"}
   :::
 
   :::div{label="Cache"}
-  :nuxt-img{alt="NuxtHub Admin Cache" dataZoomSrc="/images/landing/nuxthub-admin-cache.png" height="515" src="/images/landing/nuxthub-admin-cache.png" width="915"}
+  :img{alt="NuxtHub Admin Cache" dataZoomSrc="/images/landing/nuxthub-admin-cache.png" height="515" src="/images/landing/nuxthub-admin-cache.png" width="915"}
   :::
 ::
 
@@ -108,15 +108,15 @@ NuxtHub also integrates with the [Nuxt DevTools](https://devtools.nuxt.com/) to
 
 ::tabs
   :::div{label="Database"}
-  :nuxt-img{alt="Nuxt DevTools Database" dataZoomSrc="/images/landing/nuxt-devtools-database.png" height="515" src="/images/landing/nuxt-devtools-database.png" width="915"}
+  :img{alt="Nuxt DevTools Database" dataZoomSrc="/images/landing/nuxt-devtools-database.png" height="515" src="/images/landing/nuxt-devtools-database.png" width="915"}
   :::
 
   :::div{label="KV"}
-  :nuxt-img{alt="Nuxt DevTools KV" dataZoomSrc="/images/landing/nuxt-devtools-kv.png" height="515" src="/images/landing/nuxt-devtools-kv.png" width="915"}
+  :img{alt="Nuxt DevTools KV" dataZoomSrc="/images/landing/nuxt-devtools-kv.png" height="515" src="/images/landing/nuxt-devtools-kv.png" width="915"}
   :::
 
   :::div{label="Blob"}
-  :nuxt-img{alt="Nuxt DevTools Blob" dataZoomSrc="/images/landing/nuxt-devtools-blob.png" height="515" src="/images/landing/nuxt-devtools-blob.png" width="915"}
+  :img{alt="Nuxt DevTools Blob" dataZoomSrc="/images/landing/nuxt-devtools-blob.png" height="515" src="/images/landing/nuxt-devtools-blob.png" width="915"}
   :::
 ::
 
diff --git a/docs/content/docs/1.getting-started/3.deploy.md b/docs/content/docs/1.getting-started/3.deploy.md
@@ -12,10 +12,10 @@ The [NuxtHub Admin](https://admin.hub.nuxt.com) is made to simplify your experie
 
 ::tabs
 ::div{label="Deployments"}
-:nuxt-img{src="/images/landing/nuxthub-admin-project.png" alt="NuxtHub Admin Deployments" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-project.png"}
+:img{src="/images/landing/nuxthub-admin-project.png" alt="NuxtHub Admin Deployments" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-project.png"}
 ::
 ::div{label="Deployment Details"}
-:nuxt-img{src="/images/landing/nuxthub-admin-deployment.png" alt="NuxtHub Admin Deployment" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-deployment.png"}
+:img{src="/images/landing/nuxthub-admin-deployment.png" alt="NuxtHub Admin Deployment" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-deployment.png"}
 ::
 ::
 
@@ -105,7 +105,7 @@ NuxtHub integrates with [GitHub deployments](https://docs.github.com/en/actions/
 
 After deploying from a pull request, NuxtHub automatically adds a comment with information about the deployment.
 
-:nuxt-img{src="/images/docs/nuxthub-github-app-pr-comment.png" alt="NuxtHUb GitHub Action commenting on pull requests" width="926" height="520"}
+:img{src="/images/docs/nuxthub-github-app-pr-comment.png" alt="NuxtHUb GitHub Action commenting on pull requests" width="926" height="520"}
 
 ::tip
 You can customise the workflow to tailor to any specific custom DevOps requirements.
diff --git a/docs/content/docs/1.getting-started/4.remote-storage.md b/docs/content/docs/1.getting-started/4.remote-storage.md
@@ -3,7 +3,7 @@ title: Remote Storage
 description: Access your remote data locally or from external Nuxt projects with our secured proxy.
 ---
 
-:nuxt-img{src="/images/docs/nuxthub-remote-access.png" alt="NuxtHub Remote Access" width="766" height="377" data-zoom-src="/images/docs/nuxthub-remote-access.png"}
+:img{src="/images/docs/nuxthub-remote-access.png" alt="NuxtHub Remote Access" width="766" height="377" data-zoom-src="/images/docs/nuxthub-remote-access.png"}
 
 One of the main features of NuxtHub is the ability to access your remote storage from your local environment or from external Nuxt projects. This is made possible by our secured proxy system.
 
diff --git a/docs/content/docs/1.getting-started/5.server-logs.md b/docs/content/docs/1.getting-started/5.server-logs.md
diff --git a/docs/content/docs/2.features/blob.md b/docs/content/docs/2.features/blob.md
diff --git a/docs/content/docs/2.features/cache.md b/docs/content/docs/2.features/cache.md
diff --git a/docs/content/docs/2.features/database.md b/docs/content/docs/2.features/database.md
diff --git a/docs/content/docs/2.features/kv.md b/docs/content/docs/2.features/kv.md
diff --git a/docs/content/docs/2.features/open-api.md b/docs/content/docs/2.features/open-api.md
