feat: add docs

Author: OskarLebuda

app/app.vue

@@ -1,27 +1,132 @@
 <script setup lang="ts">
 const { seo } = useAppConfig()
+const site = useSiteConfig()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
 const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
   server: false
 })
 
+const siteUrl = site.url || 'https://vercube.dev'
+const siteName = seo?.siteName || 'Vercube'
+
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' }
   ],
   link: [
-    { rel: 'icon', href: '/favicon.ico' }
+    { rel: 'icon', type: 'image/png', href: '/favicon-96x96.png', sizes: '96x96' },
+    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+    { rel: 'shortcut icon', href: '/favicon.ico' },
+    { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
+    { rel: 'manifest', href: '/site.webmanifest' }
   ],
   htmlAttrs: {
     lang: 'en'
   }
 })
 
 useSeoMeta({
-  titleTemplate: `%s - ${seo?.siteName}`,
-  ogSiteName: seo?.siteName,
-  twitterCard: 'summary_large_image'
+  // Global defaults
+  titleTemplate: `%s - ${siteName}`,
+  ogSiteName: siteName,
+  twitterCard: 'summary_large_image',
+  twitterSite: '@vercubejs',
+  twitterCreator: '@vercubejs',
+
+  // Open Graph defaults
+  ogType: 'website',
+  ogLocale: 'en_US',
+  ogImage: `${siteUrl}/og-image.png`,
+  ogImageWidth: 1200,
+  ogImageHeight: 630,
+
+  // Application defaults
+  applicationName: siteName,
+  appleMobileWebAppTitle: siteName,
+  appleMobileWebAppCapable: 'yes',
+  appleMobileWebAppStatusBarStyle: 'black-translucent',
+
+  // Theme
+  themeColor: '#000000',
+  colorScheme: 'dark light',
+
+  // SEO defaults
+  robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
+  author: 'Vercube Team',
+
+  // Keywords (global)
+  keywords: [
+    'vercube',
+    'javascript framework',
+    'typescript framework',
+    'server framework',
+    'node.js',
+    'bun',
+    'deno',
+    'dependency injection',
+    'decorators',
+    'routing',
+    'middleware',
+    'validation',
+    'esm',
+    'web-native',
+    'request response',
+    'serverless',
+    'api framework',
+    'modern javascript',
+    'type-safe',
+    'zero-config'
+  ].join(', ')
+})
+
+// Global JSON-LD structured data
+useHead({
+  script: [
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'WebSite',
+        'name': 'Vercube',
+        'url': siteUrl,
+        'potentialAction': {
+          '@type': 'SearchAction',
+          'target': {
+            '@type': 'EntryPoint',
+            'urlTemplate': `${siteUrl}/docs?q={search_term_string}`
+          },
+          'query-input': 'required name=search_term_string'
+        }
+      })
+    },
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'SoftwareApplication',
+        'name': 'Vercube',
+        'applicationCategory': 'DeveloperApplication',
+        'operatingSystem': 'Node.js, Bun, Deno',
+        'url': siteUrl,
+        'author': {
+          '@type': 'Organization',
+          'name': 'Vercube',
+          'url': 'https://github.com/vercube'
+        },
+        'offers': {
+          '@type': 'Offer',
+          'price': '0',
+          'priceCurrency': 'USD'
+        },
+        'aggregateRating': {
+          '@type': 'AggregateRating',
+          'ratingValue': '5',
+          'ratingCount': '1'
+        }
+      })
+    }
+  ]
 })
 
 provide('navigation', navigation)

app/pages/index.vue

@@ -23,16 +23,45 @@ definePageMeta({
   colorMode: 'dark'
 })
 
-const title = page.value.seo?.title || page.value.title
-const description = page.value.seo?.description || page.value.description
+const route = useRoute()
+const site = useSiteConfig()
 
+const title = page.value.seo?.title || page.value.title || 'Vercube - Unleash your server development'
+const description = page.value.seo?.description || page.value.description || 'An ultra-efficient JavaScript server framework that runs anywhere - Node.js, Bun, or Deno - with unmatched flexibility and complete configurability for developers who refuse to sacrifice speed or control.'
+
+const siteUrl = site.url || 'https://vercube.dev'
+const canonicalUrl = `${siteUrl}${route.path}`
+
+// Define OG Image component for homepage
+defineOgImageComponent('Docs', {
+  headline: 'Next generation server framework',
+  title: 'Vercube',
+  description: 'Unleash your server development with an ultra-efficient JavaScript framework'
+}, {
+  fonts: ['Geist:400', 'Geist:600']
+})
+
+// Homepage-specific SEO (overrides global defaults)
 useSeoMeta({
   titleTemplate: '',
   title,
-  ogTitle: title,
   description,
+  ogTitle: title,
   ogDescription: description,
-  ogImage: 'https://ui.nuxt.com/assets/templates/nuxt/docs-light.png',
-  twitterImage: 'https://ui.nuxt.com/assets/templates/nuxt/docs-light.png'
+  ogUrl: canonicalUrl,
+  ogImageAlt: title,
+  twitterTitle: title,
+  twitterDescription: description,
+  twitterImageAlt: title
+})
+
+// Canonical URL for homepage
+useHead({
+  link: [
+    {
+      rel: 'canonical',
+      href: canonicalUrl
+    }
+  ]
 })
 </script>