fix: move comopnents and fix feeds imports

Author: TechWatching

.vscode/mcp.json

@@ -0,0 +1,7 @@
+{
+  "servers": {
+    "nuxt": {
+      "url": "https://mcp.nuxt.com/sse",
+    }
+  }
+}

archive/components/PostsTags.vue renamed to app/components/PostsTags.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {getTagSlug} from "~/utils/tag";
+import {getTagSlug} from "~~/utils/tag";
 
 defineProps<{ tags: string[] }>()
 </script>
@@ -8,9 +8,9 @@ defineProps<{ tags: string[] }>()
   <UDivider type="dashed" label="Tags"/>
   <div class="flex flex-wrap w-full items-center gap-3 mt-5">
     <UBadge
-v-for="(tag, index) in tags"
-            :key="index"
-            :ui="{base: 'text-center justify-center'}">
+      v-for="(tag, index) in tags"
+      :key="index"
+      :ui="{base: 'text-center justify-center'}">
       <NuxtLink :to="`/tags/${getTagSlug(tag)}`">{{tag}}</NuxtLink>
     </UBadge>
   </div>

archive/components/SocialLinks.vue renamed to app/components/SocialLinks.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Giscus from '@giscus/vue'
 const route = useRoute()
 
 const { data: post } = await useAsyncData(route.path, () => queryCollection('posts').path(route.path).first())
@@ -14,6 +15,13 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
 
 const title = post.value.seo?.title || post.value.title
 const description = post.value.seo?.description || post.value.description
+if(post.value.canonical) {
+  useHead({
+    link: [
+      { rel: 'canonical', href: post.value.canonical }
+    ]
+  })
+}
 
 useSeoMeta({
   title,
@@ -31,6 +39,8 @@ if (post.value.image?.src) {
     headline: 'Blog'
   })
 }
+const colorMode = useColorMode()
+const theme = computed(() => colorMode.value == "dark" ? "" : "light")
 </script>
 
 <template>
@@ -85,8 +95,31 @@ if (post.value.image?.src) {
         v-if="post?.body?.toc?.links?.length"
         #right
       >
-        <UContentToc :links="post.body.toc.links" />
+          <UContentToc :links="post.body.toc.links" />
+
+        <!-- <div class="">
+          <PostsTags :tags="post.tags"/>
+          <SocialsShare/>
+        </div> -->
       </template>
     </UPage>
+        <Giscus
+          repo="techwatching/techwatching.dev"
+          repo-id="R_kgDOGPrzmQ"
+          category="Announcements"
+          category-id="DIC_kwDOGPrzmc4B_fVQ"
+          mapping="pathname"
+          strict="0"
+          reactions-enabled="1"
+          emit-metadata="0"
+          input-position="top"
+          :theme="theme"
+          loading="lazy"
+          crossorigin="anonymous"/>
   </UContainer>
 </template>
+<style scoped>
+img {
+  view-transition-name: selected-post;
+}
+</style>

archive/components/SocialsShare.vue renamed to app/components/SocialsShare.vue

@@ -2,7 +2,10 @@
 const route = useRoute()
 
 const { data: page } = await useAsyncData('blog', () => queryCollection('blog').first())
-const { data: posts } = await useAsyncData(route.path, () => queryCollection('posts').all())
+const { data: posts } = await useAsyncData(route.path, () => queryCollection('posts')
+  .where('extension', '=', 'md')
+  .order('date', 'DESC')
+  .all())
 
 const title = page.value?.seo?.title || page.value?.title
 const description = page.value?.seo?.description || page.value?.description
@@ -15,6 +18,8 @@ useSeoMeta({
 })
 
 defineOgImageComponent('Saas')
+
+const activePost = useState()
 </script>
 
 <template>
@@ -37,7 +42,7 @@ defineOgImageComponent('Saas')
           :authors="post.authors"
           :badge="post.badge"
           :orientation="index === 0 ? 'horizontal' : 'vertical'"
-          :class="[index === 0 && 'col-span-full']"
+          :class="[index === 0 && 'col-span-full', activePost === index && 'active']"
           variant="naked"
           :ui="{
             description: 'line-clamp-2'
@@ -47,3 +52,10 @@ defineOgImageComponent('Saas')
     </UPageBody>
   </UContainer>
 </template>
+
+<style scoped>
+  .active {
+    view-transition-name: selected-post;
+    contain: layout;
+  }
+</style>

archive/components/content/Tweet.vue renamed to app/components/content/Tweet.vue

@@ -1,4 +1,5 @@
 import { defineCollection, z } from '@nuxt/content'
+import { string } from 'zod'
 
 const variantEnum = z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link'])
 const colorEnum = z.enum(['primary', 'secondary', 'neutral', 'error', 'warning', 'success', 'info'])
@@ -130,7 +131,8 @@ export const collections = {
       ),
       date: z.date(),
       badge: z.object({ label: z.string().nonempty() }),
-      tags: z.array(z.string()).optional()
+      tags: z.array(z.string()),
+      canonical: z.string().optional(),
     })
   }),
   changelog: defineCollection({

app/pages/blog/[slug].vue

@@ -11,6 +11,10 @@ export default defineNuxtConfig({
     '@stefanobartoletti/nuxt-social-share'
   ],
 
+  experimental: {
+    viewTransition: true,
+  },
+  
   devtools: {
     enabled: true
   },