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 <[email protected]>
clemcode · May 10, 2023 · 542cd9e · 542cd9e
1 parent 0335844
commit 542cd9e
Show file tree

Hide file tree

Showing 4 changed files with 1,378 additions and 1,424 deletions.
diff --git a/components/content/ArticlesListItem.vue b/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" />

diff --git a/nuxt.config.ts b/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
   }
 })
diff --git a/package.json b/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"