fix: docs og image; twoslash for utils

docs/.gitignore

@@ -1,6 +1,5 @@
 # Nuxt dev/build outputs
 .output
-.vercel
 .data
 .nuxt
 .nitro

docs/.nuxtrc

@@ -1 +1 @@
-imports.autoImport=true
+imports.autoImport=true

docs/README.md

@@ -1,13 +1,13 @@
-![nuxt-ui-pro-docs-template](https://github.com/nuxt-ui-pro/docs/assets/904724/67fc15a7-92f6-4566-95b9-fe099012473c)
+![nuxt-ui-docs-social-card](https://github.com/nuxt-ui-pro/docs/assets/739984/f64e13d9-9ae0-4e03-bf7f-6be4c36cd9ba)
 
 # Nuxt UI Pro - Docs template
 
 [![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro)
 [![Nuxt Studio](https://img.shields.io/badge/Open%20in%20Nuxt%20Studio-18181B?&logo=nuxt.js&logoColor=3BB5EC)](https://nuxt.studio/themes/docs)
 
-- [Live demo](https://nuxt-ui-pro-template-docs.vercel.app/)
+- [Live demo](https://docs-template.nuxt.dev/)
 - [Play on Stackblitz](https://stackblitz.com/github/nuxt-ui-pro/docs)
-- [Documentation](https://ui.nuxt.com/pro/guide)
+- [Documentation](https://ui.nuxt.com/pro/getting-started)
 - [Clone on Nuxt Studio](https://nuxt.studio/themes/docs)
 
 ## Quick Start
@@ -110,7 +110,9 @@ Add this module to your `nuxt.config.ts`:
 
 ```ts
 export default defineNuxtConfig({
+  ...
   modules: [
+    ...
     '@nuxthq/studio'
   ]
 })

docs/app.config.ts

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

docs/app.vue

@@ -23,19 +23,20 @@ useHead({
 })
 
 useSeoMeta({
+  titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
+  ogImage: 'https://docs-template.nuxt.dev/social-card.png',
+  twitterImage: 'https://docs-template.nuxt.dev/social-card.png',
   twitterCard: 'summary_large_image',
 })
 
-defineOgImage({
-  url: '/cover.png',
-})
-
 provide('navigation', navigation)
 </script>
 
 <template>
   <div>
+    <NuxtLoadingIndicator />
+
     <Header />
 
     <UMain>
@@ -47,7 +48,7 @@ provide('navigation', navigation)
     <Footer />
 
     <ClientOnly>
-      <LazyUDocsSearch :files="files" :navigation="navigation" />
+      <LazyUContentSearch :files="files" :navigation="navigation" />
     </ClientOnly>
 
     <UNotifications />

docs/components/Header.vue

@@ -18,11 +18,11 @@ const { header } = useAppConfig()
     </template>
 
     <template v-if="header?.search" #center>
-      <UDocsSearchButton class="hidden lg:flex" />
+      <UContentSearchButton class="hidden lg:flex" />
     </template>
 
     <template #right>
-      <UDocsSearchButton v-if="header?.search" :label="null" class="lg:hidden" />
+      <UContentSearchButton v-if="header?.search" :label="null" class="lg:hidden" />
 
       <UColorModeButton v-if="header?.colorMode" />
 

docs/components/OgImage/OgImageDocs.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
 defineOptions({
-  inheritAttrs: false,
+  inheritAttrs: false
 })
 
 defineProps({
   title: {
     type: String,
-    required: true,
+    required: true
   },
   description: {
     type: String,
-    required: true,
-  },
+    required: true
+  }
 })
 </script>
 

docs/content/1.setup/2.configuration.md

@@ -28,6 +28,7 @@ export default defineNuxtConfig({
 Client can also be configured using `runtimeConfig` or environment variables:
 
 ```ts twoslash [nuxt.config.ts]
+// @noErrors
 export default defineNuxtConfig({
   openFetch: {
     clients: {

docs/content/1.setup/3.schemas.md

@@ -6,6 +6,7 @@ description: "Use local or remote schema"
 By default NuxtOpenFetch searches for OpenAPI schemas in `/openapi/[client]` directory, where `[client]` is the name specified in the Nuxt config (f.e. `pets`):
 
 ```ts twoslash [nuxt.config.ts]
+// @noErrors
 export default defineNuxtConfig({
   openFetch: {
     clients: {
@@ -27,6 +28,7 @@ nuxt.config.ts
 You can manually specify schema for each client using [schema](/setup/configuration) option in Nuxt config.
 
 ```ts twoslash [nuxt.config.ts]
+// @noErrors
 export default defineNuxtConfig({
   openFetch: {
     clients: {

docs/content/1.setup/4.proxy.md

@@ -6,6 +6,7 @@ description: "Proxy setup is pretty straightforward with Nuxt's built-in routeRu
 All you need is to add proxy rule to `routeRules` in Nuxt config and change `baseURL` fetch option:
 
 ```ts twoslash [nuxt.config.ts]
+// @noErrors
 export default defineNuxtConfig({
   openFetch: {
     clients: {
@@ -25,6 +26,7 @@ You can also use [ProxyOptions](https://www.jsdocs.io/package/h3#ProxyOptions) o
 F.e, remove `domain` attributes in the `set-cookie` headers:
 
 ```ts twoslash [nuxt.config.ts]
+// @noErrors
 export default defineNuxtConfig({
   routeRules: {
     '/petsProxy/**': {

docs/content/3.utils/1.$[client].md

@@ -9,7 +9,7 @@ You can access clients from the Vue context using `useNuxtApp()`.
 
 It has the same API as Nuxt's [$fetch](https://nuxt.com/docs/api/utils/dollarfetch) util with additional `path` option, which is used to replace params in the pathname.
 
-```vue
+```vue twoslash
 <script setup lang="ts">
 const { $pets } = useNuxtApp()
 

docs/content/index.yml

@@ -21,8 +21,8 @@ hero:
   code: |
     ```ts twoslash
     // @noErrors
-    const { data } = useLazyPets('/pet/{petId}', {
-    //                                        ^|
+    const { data } = await usePets('/pet/{petId}', {
+    //                                          ^|
       path: {
         petId: 2
       },
@@ -33,7 +33,8 @@ hero:
       default: () => ({
         name: 'Tony Stark',
         email: '[email protected]'
-      })
+      }),
+      lazy: true
     })
     ```
 features:

docs/error.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 import type { NuxtError } from '#app'
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.'
+})
 
 defineProps({
   error: {
     type: Object as PropType<NuxtError>,
-    required: true,
-  },
-})
-
-useSeoMeta({
-  title: 'Page not found',
-  description: 'We are sorry but this page could not be found.',
+    required: true
+  }
 })
 
 useHead({
   htmlAttrs: {
-    lang: 'en',
-  },
+    lang: 'en'
+  }
 })
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
@@ -44,7 +44,7 @@ provide('navigation', navigation)
     <Footer />
 
     <ClientOnly>
-      <LazyUDocsSearch :files="files" :navigation="navigation" />
+      <LazyUContentSearch :files="files" :navigation="navigation" />
     </ClientOnly>
 
     <UNotifications />

docs/nuxt.config.ts

@@ -1,19 +1,12 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  nitro: {
-    preset: 'vercel-static',
-  },
-  extends: [
-    '@nuxt/ui-pro',
-  ],
+  extends: ['@nuxt/ui-pro'],
   modules: [
     'nuxt-content-twoslash',
     '@nuxt/content',
     '@nuxt/ui',
+    '@nuxt/fonts',
     '@nuxthq/studio',
-    '@nuxtjs/fontaine',
-    '@nuxtjs/google-fonts',
-    'nuxt-og-image',
     'nuxt-open-fetch',
   ],
   hooks: {
@@ -27,24 +20,6 @@ export default defineNuxtConfig({
   ui: {
     icons: ['heroicons', 'simple-icons'],
   },
-  twoslash: {
-    floatingVueOptions: {
-      classMarkdown: 'prose prose-primary dark:prose-invert',
-    },
-    throws: false,
-    includeNuxtTypes: true,
-  },
-  // Fonts
-  fontMetrics: {
-    fonts: ['DM Sans'],
-  },
-  googleFonts: {
-    display: 'swap',
-    download: true,
-    families: {
-      'DM+Sans': [400, 500, 600, 700],
-    },
-  },
   routeRules: {
     '/api/search.json': { prerender: true },
   },
@@ -54,26 +29,12 @@ export default defineNuxtConfig({
   typescript: {
     strict: false,
   },
-  content: {
-    highlight: {
-      theme: {
-        default: 'material-theme-lighter',
-        dark: 'material-theme-palenight',
-      },
-      langs: [
-        'js',
-        'ts',
-        'vue',
-        'css',
-        'scss',
-        'sass',
-        'html',
-        'bash',
-        'md',
-        'mdc',
-        'json',
-      ],
+  twoslash: {
+    floatingVueOptions: {
+      classMarkdown: 'prose prose-primary dark:prose-invert',
     },
+    throws: false,
+    includeNuxtTypes: true,
   },
   openFetch: {
     disableNitroPlugin: true,
@@ -83,13 +44,4 @@ export default defineNuxtConfig({
       },
     },
   },
-  vite: {
-    define: {
-      __NUXT_ASYNC_CONTEXT__: false,
-    },
-  },
-  site: {
-    // production URL
-    url: 'https://nuxt-open-fetch.vercel.app',
-  },
 })

docs/package.json

@@ -12,32 +12,19 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/heroicons": "^1.1.19",
-    "@iconify-json/simple-icons": "^1.1.90",
-    "@nuxt/content": "^2.12.0",
-    "@nuxt/ui-pro": "^0.7.5",
-    "@nuxtjs/fontaine": "^0.4.1",
-    "@nuxtjs/google-fonts": "^3.1.3",
-    "@shikijs/vitepress-twoslash": "^1.1.1",
-    "fast-glob": "^3.3.2",
-    "nuxt": "^3.10.3",
-    "nuxt-content-twoslash": "^0.0.10",
-    "nuxt-open-fetch": "0.6.3",
-    "openapi-typescript": "^6.7.4",
-    "picocolors": "^1.0.0",
-    "shiki-twoslash": "^3.1.2"
+    "@iconify-json/heroicons": "^1.1.20",
+    "@iconify-json/simple-icons": "^1.1.94",
+    "@nuxt/content": "^2.12.1",
+    "@nuxt/fonts": "^0.1.0",
+    "@nuxt/ui-pro": "^1.0.2",
+    "nuxt": "^3.11.0",
+    "nuxt-open-fetch": "0.6.3"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/studio": "^1.0.10",
-    "eslint": "^8.56.0",
-    "nuxt-og-image": "^3.0.0-rc.45",
-    "vue-tsc": "^1.8.27"
-  },
-  "overrides": {
-    "vue": "3.3.13"
-  },
-  "resolutions": {
-    "vue": "3.3.13"
+    "@nuxthq/studio": "^1.0.13",
+    "eslint": "^8.57.0",
+    "nuxt-content-twoslash": "^0.0.10",
+    "vue-tsc": "^2.0.6"
   }
 }