chore: test @nuxt/ui-pro new prose img

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import mediumZoom from 'medium-zoom'
 import { joinURL } from 'ufo'
 
 definePageMeta({
@@ -48,12 +47,6 @@ const socialLinks = computed(() => [{
   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}`
 }])
-
-onMounted(() => {
-  mediumZoom('[data-zoom-src]', {
-    margin: 5
-  })
-})
 </script>
 
 <template>

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import mediumZoom from 'medium-zoom'
 import { joinURL } from 'ufo'
 
 definePageMeta({
@@ -48,12 +47,6 @@ const socialLinks = computed(() => [{
   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}`
 }])
-
-onMounted(() => {
-  mediumZoom('[data-zoom-src]', {
-    margin: 5
-  })
-})
 </script>
 
 <template>

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import mediumZoom from 'medium-zoom'
-
 definePageMeta({
   layout: 'docs',
   primary: 'green',
@@ -32,12 +30,6 @@ useSeoMeta({
 defineOgImageComponent('Docs', {
   category: 'Docs'
 })
-
-onMounted(() => {
-  mediumZoom('[data-zoom-src]', {
-    margin: 5
-  })
-})
 </script>
 
 <template>

docs/app/pages/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import mediumZoom from 'medium-zoom'
 import { joinURL } from 'ufo'
 
 const { data: page } = await useAsyncData('index', () => {
@@ -21,9 +20,6 @@ const demoVideoLink = page.value.deploy?.links?.find(link => link.id === 'demo-v
 const videoLink = ref('')
 
 onMounted(() => {
-  mediumZoom('[data-zoom-src]', {
-    margin: 5
-  })
   if (introVideoLink) {
     document.body.querySelector(`#${introVideoLink.id}`)?.addEventListener('click', (e) => {
       if (e.ctrlKey || e.metaKey) {
@@ -313,13 +309,4 @@ onMounted(() => {
 .hero_code div div {
   @apply dark:bg-neutral-900/60 backdrop-blur-3xl bg-white/60;
 }
-
-.medium-zoom-overlay {
-  @apply dark:!bg-neutral-950 !bg-white;
-}
-
-.medium-zoom-overlay,
-.medium-zoom-image--opened {
-  z-index: 100;
-}
 </style>

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`)
 
-: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"}
 
 ### Production
 
@@ -461,7 +461,7 @@ npx nuxthub manage
 
 Or go to https://admin.hub.nuxt.com and select your project.
 
-: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"}
 
 ## Conclusion
 

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.
 
-: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" 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

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"}
-  :img{alt="NuxtHub Admin" dataZoomSrc="/images/landing/nuxthub-admin.png" height="515" src="/images/landing/nuxthub-admin.png" width="915"}
+  :img{alt="NuxtHub Admin" height="515" src="/images/landing/nuxthub-admin.png" width="915"}
   :::
 
   :::div{label="Deployments"}
-  :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" height="515" src="/images/landing/nuxthub-admin-project.png" width="915"}
   :::
 
   :::div{label="Database"}
-  :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" height="515" src="/images/landing/nuxthub-admin-database.png" width="915"}
   :::
 
   :::div{label="KV"}
-  :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" height="515" src="/images/landing/nuxthub-admin-kv.png" width="915"}
   :::
 
   :::div{label="Blob"}
-  :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" height="515" src="/images/landing/nuxthub-admin-blob.png" width="915"}
   :::
 
   :::div{label="Logs"}
-  :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" height="515" src="/images/landing/nuxthub-admin-server-logs.png" width="915"}
   :::
 
   :::div{label="Open API"}
-  :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" height="515" src="/images/landing/nuxthub-admin-open-api.png" width="915"}
   :::
 
   :::div{label="Cache"}
-  :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" 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"}
-  :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" height="515" src="/images/landing/nuxt-devtools-database.png" width="915"}
   :::
 
   :::div{label="KV"}
-  :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" height="515" src="/images/landing/nuxt-devtools-kv.png" width="915"}
   :::
 
   :::div{label="Blob"}
-  :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" height="515" src="/images/landing/nuxt-devtools-blob.png" width="915"}
   :::
 ::
 

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"}
-: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"}
 ::
 ::div{label="Deployment Details"}
-: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"}
 ::
 ::
 

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.
 ---
 
-: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"}
 
 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.
 

docs/content/docs/1.getting-started/5.server-logs.md

@@ -9,7 +9,7 @@ When you have a successful deployment, you can access to the logs of the deploym
 
 Logs are available under the `Server > Logs` section of your project page. You can also access to the logs of each successful deployment in the `Deployments` section.
 
-:img{src="/images/landing/nuxthub-admin-server-logs.png" alt="NuxtHub Admin Server Logs" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-server-logs.png" class="rounded"}
+:img{src="/images/landing/nuxthub-admin-server-logs.png" alt="NuxtHub Admin Server Logs" width="915" height="515"}
 
 ## NuxtHub CLI
 
@@ -21,7 +21,7 @@ By default, the CLI will detect based on the current branch the canonical deploy
 npx nuxthub logs
 ```
 
-:img{src="/images/landing/nuxthub-cli-server-logs.png" alt="NuxtHub CLI Server Logs" width="915" height="515" data-zoom-src="/images/landing/nuxthub-cli-server-logs.png" class="rounded"}
+:img{src="/images/landing/nuxthub-cli-server-logs.png" alt="NuxtHub CLI Server Logs" width="915" height="515"}
 
 ### Production environment
 
@@ -43,7 +43,7 @@ npx nuxthub logs --preview
 
 Worker project types can enable Worker Logs and view the Workers Observability tab dashboard in Cloudflare. Learn more on the [Cloudflare documentation](https://developers.cloudflare.com/workers/observability/).
 
-![Observability Overview](/images/docs/observability-overview.png)
+:img{src="/images/docs/observability-overview.png" alt="Observability Overview" width="915" height="515"}
 
 ::callout{to="https://dash.cloudflare.com/?to=/:account/workers/services/view/:worker/production/metrics/"}
 Go to the Workers Observability tab in the Cloudflare Dashboard

docs/content/docs/2.features/blob.md

@@ -22,10 +22,10 @@ This option will use Cloudflare platform proxy in development and automatically
 
 ::tabs
 ::div{label="Nuxt DevTools"}
-:img{src="/images/landing/nuxt-devtools-blob.png" alt="Nuxt DevTools Blob" width="915" height="515" data-zoom-src="/images/landing/nuxt-devtools-blob.png"}
+:img{src="/images/landing/nuxt-devtools-blob.png" alt="Nuxt DevTools Blob" width="915" height="515"}
 ::
 ::div{label="NuxtHub Admin"}
-:img{src="/images/landing/nuxthub-admin-blob.png" alt="NuxtHub Admin Blob" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-blob.png"}
+:img{src="/images/landing/nuxthub-admin-blob.png" alt="NuxtHub Admin Blob" width="915" height="515"}
 ::
 ::
 

docs/content/docs/2.features/cache.md

@@ -24,7 +24,7 @@ This option will configure [Nitro's cache storage](https://nitro.build/guide/cac
 
 Once your Nuxt project is deployed, you can manage your cache entries in the `Cache` section of your project in the [NuxtHub admin](https://admin.hub.nuxt.com/).
 
-:img{src="/images/landing/nuxthub-admin-cache.png" alt="NuxtHub Admin Cache" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-cache.png"}
+:img{src="/images/landing/nuxthub-admin-cache.png" alt="NuxtHub Admin Cache" width="915" height="515"}
 
 In development, checkout the Hub Cache section in the Nuxt Devtools.
 

docs/content/docs/2.features/database.md

@@ -30,10 +30,10 @@ During local development, you can view and edit your database in the Nuxt DevToo
 
 ::tabs
 ::div{label="Nuxt DevTools"}
-:img{src="/images/landing/nuxt-devtools-database.png" alt="Nuxt DevTools Database" width="915" height="515" data-zoom-src="/images/landing/nuxt-devtools-database.png"}
+:img{src="/images/landing/nuxt-devtools-database.png" alt="Nuxt DevTools Database" width="915" height="515"}
 ::
 ::div{label="NuxtHub Admin"}
-:img{src="/images/landing/nuxthub-admin-database.png" alt="NuxtHub Admin Database" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-database.png"}
+:img{src="/images/landing/nuxthub-admin-database.png" alt="NuxtHub Admin Database" width="915" height="515"}
 ::
 ::
 

docs/content/docs/2.features/kv.md

@@ -31,10 +31,10 @@ You can inspect your KV namespace during local development in the Nuxt DevTools
 
 ::tabs
 ::div{label="Nuxt DevTools"}
-:img{src="/images/landing/nuxt-devtools-kv.png" alt="Nuxt DevTools KV" width="915" height="515" data-zoom-src="/images/landing/nuxt-devtools-kv.png"}
+:img{src="/images/landing/nuxt-devtools-kv.png" alt="Nuxt DevTools KV" width="915" height="515"}
 ::
-::div{label="NuxtHub Admin"}
-:img{src="/images/landing/nuxthub-admin-kv.png" alt="NuxtHub Admin KV" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-kv.png"}
+  ::div{label="NuxtHub Admin"}
+  :img{src="/images/landing/nuxthub-admin-kv.png" alt="NuxtHub Admin KV" width="915" height="515"}
 ::
 ::
 

docs/content/docs/2.features/open-api.md

@@ -26,7 +26,7 @@ export default defineNuxtConfig({
 
 After you deploy your project, NuxtHub Admin will showcase your API documentation using [Scalar](https://scalar.com).
 
-:img{src="/images/landing/nuxthub-admin-open-api.png" alt="Nuxt Open API Scalar integration" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-open-api.png"}
+:img{src="/images/landing/nuxthub-admin-open-api.png" alt="Nuxt Open API Scalar integration" width="915" height="515"}
 
 You can define route handler meta (at build time) using the `defineRouteMeta` macro:
 
@@ -53,4 +53,4 @@ It list all the API routes in your project as well as providing a playground to
 
 Check out the [Nuxt DevTools](https://devtools.nuxt.com/) documentation for more information.
 
-:img{src="/images/landing/nuxt-devtools-api-routes.png" alt="NuxtHub Admin Cache" width="915" height="515" data-zoom-src="/images/landing/nuxt-devtools-api-routes.png"}
+:img{src="/images/landing/nuxt-devtools-api-routes.png" alt="NuxtHub Admin Cache" width="915" height="515"}

docs/package.json

@@ -19,18 +19,17 @@
     "@nuxt/content": "^3.4.0",
     "@nuxt/image": "^1.10.0",
     "@nuxt/scripts": "^0.11.6",
-    "@nuxt/ui-pro": "^3.1.0",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@71f41ec",
     "@nuxtjs/plausible": "^1.2.0",
     "@rollup/plugin-yaml": "^4.1.2",
     "@tsparticles/engine": "^3.8.1",
     "@tsparticles/slim": "^3.8.1",
     "@vueuse/core": "^13.1.0",
     "@vueuse/nuxt": "^13.1.0",
     "feed": "^4.2.2",
-    "medium-zoom": "^1.1.0",
     "nuxt": "^3.16.2",
     "nuxt-cloudflare-analytics": "^1.0.8",
     "nuxt-llms": "^0.1.2",
     "nuxt-og-image": "^5.1.2"
   }
-}
+}