fix: add article id to handle on Studio (#134)

* feat: add `data-content-id` to articles in preview mode

* chore: upgrade deps

* fix: disable inlineSSRStyles for now

---------

Co-authored-by: Farnabaz <farnabaz@gmail.com>

Author: atinux

components/content/ArticlesListItem.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import { useContentPreview } from '#imports'
+
 type Article = {
   _path: string
   title: string
   date: string
   description: string
 }
 
-defineProps({
+const props = defineProps({
   article: {
     type: Object,
     required: true,
@@ -20,10 +22,15 @@ defineProps({
     default: false
   }
 })
+
+const id = computed(() => {
+  // @ts-ignore
+  return (process.dev || useContentPreview()?.isEnabled()) ? props.article?._id : undefined
+})
 </script>
 
 <template>
-  <article v-if="article._path && article.title" :class="{ 'featured': featured }">
+  <article v-if="article._path && article.title" :class="{ 'featured': featured }" :data-content-id="id">
     <div class="image">
       <NuxtLink :to="article._path">
         <NuxtImg v-if="article.cover" :src="article.cover" :alt="article.title" width="16" height="9" />

nuxt.config.ts

@@ -48,5 +48,8 @@ export default defineNuxtConfig({
       },
       preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini', 'c', 'cpp']
     }
+  },
+  experimental: {
+    inlineSSRStyles: false
   }
 })

package.json

@@ -38,7 +38,7 @@
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxtjs/plausible": "^0.2.1",
     "eslint": "^8.40.0",
-    "nuxt": "3.4.2",
+    "nuxt": "^3.4.3",
     "release-it": "^15.10.3",
     "typescript": "^5.0.4",
     "vue": "^3.2.47"