feat: add blog posts content and remove unecessary sections

Author: TechWatching

.github/copilot-instructions.md

@@ -0,0 +1,56 @@
+# GitHub Copilot Instructions
+
+## MCP Tool Usage
+
+When answering questions about this project, use the appropriate MCP (Model Context Protocol) tools:
+
+### Nuxt UI Questions
+
+For questions about **Nuxt UI components, styling, theming, or UI-related features**, use the Nuxt UI MCP tools:
+
+- `mcp_nuxt-ui_list-components` - List all available Nuxt UI components
+- `mcp_nuxt-ui_get-component-metadata` - Get detailed props, slots, and events for a component
+- `mcp_nuxt-ui_list-examples` - Browse UI examples and code demonstrations
+- `mcp_nuxt-ui_get-example` - Get specific example implementation code
+- `mcp_nuxt-ui_get-migration-guide` - Get migration guides between versions
+- `mcp_nuxt-ui_list-getting-started-guides` - List installation and setup guides
+- `mcp_nuxt-ui_get-template` - Get template details and setup instructions
+
+**Examples of Nuxt UI questions:**
+- How do I use the UButton component?
+- What props does UHeader accept?
+- How do I customize the color theme?
+- How do I create a navigation menu?
+- What's the difference between UCard and UPageCard?
+
+### Nuxt Framework Questions
+
+For questions about **Nuxt framework, routing, configuration, modules, content, or deployment**, use the Nuxt MCP tools:
+
+- `mcp_nuxt_get-getting-started-guide` - Get the Nuxt getting started guide
+- `mcp_nuxt_list-documentation-pages` - Search/explore Nuxt documentation
+- `mcp_nuxt_list-modules` - Discover available Nuxt modules
+- `mcp_nuxt_list-deploy-providers` - List deployment/hosting options
+
+Activate additional tool groups as needed:
+- `activate_nuxt_documentation_tools` - For detailed documentation pages
+- `activate_nuxt_module_management_tools` - For module details
+- `activate_nuxt_deployment_tools` - For deployment guides
+- `activate_nuxt_blog_management_tools` - For Nuxt blog posts
+
+**Examples of Nuxt questions:**
+- How do I configure nuxt.config.ts?
+- How does Nuxt Content v3 work?
+- How do I set up SSR/SSG?
+- How do I deploy to Netlify/Vercel?
+- How do I create API routes in Nuxt?
+
+## Project Context
+
+This is a personal blog built with:
+- **Nuxt 4** - Vue.js meta-framework
+- **Nuxt UI v3** - UI component library
+- **Nuxt Content v3** - Markdown/content management
+- **TailwindCSS v4** - Styling
+
+Content is stored in the `content/` directory with blog posts in `content/1.posts/`.

.vscode/mcp.json

@@ -0,0 +1,12 @@
+{
+  "servers": {
+    "nuxt-ui": {
+      "type": "http",
+      "url": "https://ui.nuxt.com/mcp"
+    },
+    "nuxt": {
+      "type": "http",
+      "url": "https://nuxt.com/mcp"
+    }
+  }
+}

app/app.vue

@@ -24,32 +24,25 @@ useSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
-  transform: data => data.find(item => item.path === '/docs')?.children || []
-})
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('posts'), {
   server: false
 })
 
 const links = [{
-  label: 'Docs',
-  icon: 'i-lucide-book',
-  to: '/docs/getting-started'
-}, {
-  label: 'Pricing',
-  icon: 'i-lucide-credit-card',
-  to: '/pricing'
-}, {
   label: 'Blog',
   icon: 'i-lucide-pencil',
-  to: '/blog'
-}, {
-  label: 'Changelog',
-  icon: 'i-lucide-history',
-  to: '/changelog'
+  to: '/posts'
 }]
 
-provide('navigation', navigation)
+// Use the content search composable
+const { open } = useContentSearch()
+
+// Also support '/' as a shortcut for search (common pattern)
+defineShortcuts({
+  '/': () => {
+    open.value = true
+  }
+})
 </script>
 
 <template>
@@ -64,7 +57,6 @@ provide('navigation', navigation)
       <LazyUContentSearch
         :files="files"
         shortcut="meta_k"
-        :navigation="navigation"
         :links="links"
         :fuse="{ resultLimit: 42 }"
       />

app/components/AppFooter.vue

@@ -1,36 +1,9 @@
 <script setup lang="ts">
 const columns = [{
-  label: 'Resources',
+  label: 'Blog',
   children: [{
-    label: 'Help center'
-  }, {
-    label: 'Docs'
-  }, {
-    label: 'Roadmap'
-  }, {
-    label: 'Changelog'
-  }]
-}, {
-  label: 'Features',
-  children: [{
-    label: 'Affiliates'
-  }, {
-    label: 'Portal'
-  }, {
-    label: 'Jobs'
-  }, {
-    label: 'Sponsors'
-  }]
-}, {
-  label: 'Company',
-  children: [{
-    label: 'About'
-  }, {
-    label: 'Pricing'
-  }, {
-    label: 'Careers'
-  }, {
-    label: 'Blog'
+    label: 'All posts',
+    to: '/posts'
   }]
 }]
 

app/components/AppHeader.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
 const route = useRoute()
 
-const items = computed(() => [{
-  label: 'Docs',
-  to: '/docs',
-  active: route.path.startsWith('/docs')
-}, {
-  label: 'Pricing',
-  to: '/pricing'
-}, {
-  label: 'Blog',
-  to: '/blog'
-}, {
-  label: 'Changelog',
-  to: '/changelog'
-}])
+const items = computed(() => [
+  {
+    label: 'Home',
+    to: '/',
+    active: route.path === '/'
+  },
+  {
+    label: 'Blog',
+    to: '/posts',
+    active: route.path.startsWith('/posts')
+  }
+])
 </script>
 
 <template>

app/error.vue

@@ -19,25 +19,17 @@ useSeoMeta({
   description: 'We are sorry but this page could not be found.'
 })
 
-const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
-  transform: data => data.find(item => item.path === '/docs')?.children || []
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('posts'), {
+  transform: data => data.find(item => item.path === '/posts')?.children || []
 })
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('posts'), {
   server: false
 })
 
 const links = [{
-  label: 'Docs',
-  icon: 'i-lucide-book',
-  to: '/docs/getting-started'
-}, {
-  label: 'Pricing',
-  icon: 'i-lucide-credit-card',
-  to: '/pricing'
-}, {
   label: 'Blog',
   icon: 'i-lucide-pencil',
-  to: '/blog'
+  to: '/posts'
 }]
 </script>