docs: refactor using Docus v3

docs/app/app.config.ts

@@ -0,0 +1,55 @@
+export default defineAppConfig({
+  header: {
+    title: 'Nuxt Image',
+  },
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'slate',
+    },
+  },
+  uiPro: {
+    pageHero: {
+      slots: {
+        container: 'lg:!grid-cols-3',
+        wrapper: 'col-span-2',
+      },
+    },
+  },
+  socials: {
+    nuxt: 'https://nuxt.com',
+    x: 'https://x.com/nuxt_js',
+  },
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      title: 'Community',
+      links: [
+        {
+          icon: 'i-ph-shooting-star-duotone',
+          label: 'Star on GitHub',
+          to: 'https://github.com/nuxt/image',
+          target: '_blank',
+        },
+        {
+          icon: 'i-ph-chat-centered-text-duotone',
+          label: 'Chat on Discord',
+          to: 'https://chat.nuxt.dev',
+          target: '_blank',
+        },
+        {
+          icon: 'i-ph-hand-heart-duotone',
+          label: 'Become a Sponsor',
+          to: 'https://github.com/sponsors/nuxt',
+          target: '_blank',
+        },
+        {
+          icon: 'i-simple-icons-nuxtdotjs',
+          label: 'Nuxt docs',
+          to: 'https://nuxt.com',
+          target: '_blank',
+        },
+      ],
+    },
+  },
+})

docs/app/assets/css/main.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../../../content/**/*";
+@source "../../../node_modules/docus/app/**/*";
+@theme static {
+  --font-sans: 'Public Sans', sans-serif;
+}

docs/app/components/AppHeaderBody.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const nav = computed(() => ([
+  {
+    title: 'Documentation',
+    icon: 'i-heroicons-book-open-solid',
+    path: '/get-started/installation',
+    children: navigation!.value,
+  },
+  {
+    title: 'Playground',
+    icon: 'i-ph-play-duotone',
+    path: '/playground',
+  }, {
+    title: 'Releases',
+    icon: 'i-heroicons-rocket-launch-solid',
+    path: 'https://github.com/nuxt/image/releases',
+    target: '_blank',
+  },
+]))
+</script>
+
+<template>
+  <UContentNavigation
+    highlight
+    variant="link"
+    :navigation="nav"
+  />
+</template>

docs/app/components/AppHeaderCenter.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const links = [{
+  label: 'Documentation',
+  to: '/get-started/installation',
+}, {
+  label: 'Playground',
+  to: '/playground',
+}, {
+  label: 'Releases',
+  to: 'https://github.com/nuxt/image/releases',
+  target: '_blank',
+}]
+</script>
+
+<template>
+  <UNavigationMenu
+    :items="links"
+    variant="link"
+  />
+</template>

docs/app/components/DocsAsideLeftTop.vue

@@ -0,0 +1,6 @@
+<template>
+  <UContentSearchButton
+    :collapsed="false"
+    class="mb-8 w-full"
+  />
+</template>

docs/app/components/content/CopyCodeInput.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const props = defineProps<{
+  source: string
+}>()
+
+const copied = ref(false)
+
+function copy() {
+  navigator.clipboard.writeText(props.source)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <UInput
+    :model-value="props.source"
+    aria-label="Copy code to get started"
+    size="xl"
+    class="w-88"
+    disabled
+    :ui="{ base: 'disabled:cursor-default' }"
+  >
+    <template #leading>
+      <UIcon name="i-ph-terminal" />
+    </template>
+    <template
+      v-if="props.source?.length"
+      #trailing
+    >
+      <UTooltip
+        text="Copy to clipboard"
+        :content="{ side: 'right' }"
+      >
+        <UButton
+          :color="copied ? 'success' : 'neutral'"
+          variant="link"
+          :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+          aria-label="Copy to clipboard"
+          @click="copy"
+        />
+      </UTooltip>
+    </template>
+  </UInput>
+</template>