docs(studio): integrate props components edition

Author: larbish

docs/content/docs/8.studio/3.content.md

@@ -114,13 +114,13 @@ defineProps({
 
 The visual editor simplifies the component edition, allowing you to integrate and edit them directly in the visual editor. Non technical users can play with **slots** and **props** without any technical knowledge.
 
-![vue component edition on Studio](/docs/studio/home-content-studio-dark.webp)
+:video{autoplay controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1744126742/studio/finalpropscomps_usfabp.mp4"}
+
+ 
 
 All components in the `/components/content` folder are available in the editor. Studio users can type `/` anywhere while editing to access the list of available components.
 
-  :::tip{to="/docs/studio/debug"}
-  Take a look at this section to validate your `Vue` component integration in the editor in local development.
-  :::
+:tip[Take a look at this section to validate your `Vue` component integration in the editor in local development.]{to="/docs/studio/debug"}
 ::
 
 #### Integrate built-in components from external libraries

docs/content/index.md

@@ -8,7 +8,7 @@ seo:
 ---
 
 ::u-page-hero
-  :::div{class="hidden sm:block"}
+  :::div{.hidden.sm:block}
     ::::u-color-mode-image
     ---
     class: size-full absolute bottom-0 inset-0 z-[-1]
@@ -54,7 +54,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f
   ---
   #title{unwrap="p"}
   File-based CMS
-
+  
   #description{unwrap="p"}
   Write your content in Markdown, YAML, CSV or JSON and query it in your components.
   :::
@@ -65,7 +65,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f
   ---
   #title{unwrap="p"}
   Query Builder
-
+  
   #description{unwrap="p"}
   Query your content with a MongoDB-like API to fetch the right data at the right time.
   :::
@@ -76,7 +76,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f
   ---
   #title{unwrap="p"}
   SQLite powered
-
+  
   #description{unwrap="p"}
   Add custom fields to your content, making it suitable for various types of projects.
   :::
@@ -87,7 +87,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f
   ---
   #title{unwrap="p"}
   Markdown with Vue
-
+  
   #description{unwrap="p"}
   Use Vue components in Markdown files, with props, slots and nested components.
   :::
@@ -98,7 +98,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f
   ---
   #title{unwrap="p"}
   Code highlighting
-
+  
   #description{unwrap="p"}
   Display beautiful code blocks on your website with the Shiki integration supporting VS Code themes.
   :::
@@ -109,7 +109,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f
   ---
   #title{unwrap="p"}
   Visual Editor
-
+  
   #description{unwrap="p"}
   Let your team edit your Nuxt Content project with Nuxt Studio, our visual editor.
   :::
@@ -120,7 +120,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f
   ---
   #title{unwrap="p"}
   Navigation Generation
-
+  
   #description{unwrap="p"}
   Generate a structured object from your content files and display a navigation menu in minutes.
   :::
@@ -131,7 +131,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f
   ---
   #title{unwrap="p"}
   Prose Components
-
+  
   #description{unwrap="p"}
   Customize HTML typography tags with Vue components to give your content a consistent style.
   :::
@@ -142,7 +142,7 @@ Nuxt Content is a module for Nuxt that provides a simple way to manage content f
   ---
   #title{unwrap="p"}
   Deploy everywhere
-
+  
   #description{unwrap="p"}
   Nuxt Content works on all hosting providers, static, server, serverless & edge.
   :::
@@ -155,7 +155,7 @@ Everything you need for content management
 #description
 Combine file-based simplicity with Vue component power. Build content-rich websites, from documentation pages to complex applications.
 
-  :::div{class="hidden sm:block"}
+  :::div{.hidden.sm:block}
     ::::u-color-mode-image
     ---
     class: size-full absolute top-0 inset-0
@@ -180,35 +180,35 @@ orientation: horizontal
       ---
       #title
       The Everest.
-
+      
       #description
       The Everest is the highest mountain in the world, standing at 8,848 meters above sea level.
       :::::
     ::::
-
+  
   ```mdc [content/index.md]
   ---
   title: The Mountains Website
   description: A website about the most iconic mountains in the world.
   ---
-
+  
   ::landing-hero
   ---
   image: /mountains/everest.png
   ---
   #title
   The Everest.
-
+  
   #description
   The Everest is the highest mountain in the world, standing at 8,848 meters above sea level.
   ::
   ```
-
+  
   ```vue [components/LandingHero.vue]
   <script setup lang="ts">
   defineProps<{ image: string }>()
   </script>
-
+  
   <template>
     <section class="flex flex-col sm:flex-row sm:items-center flex-col-reverse gap-4 py-8 sm:gap-12 sm:py-12">
       <div>
@@ -279,7 +279,7 @@ orientation: horizontal
     return queryCollection('blog').all()
   })
   </script>
-
+  
   <template>
     <div>
       <h1>Blog</h1>
@@ -291,10 +291,10 @@ orientation: horizontal
     </div>
   </template>
   ```
-
+  
   ```ts [content.config.ts]
   import { defineContentConfig, defineCollection, z } from '@nuxt/content'
-
+  
   export default defineContentConfig({
     collections: {
       blog: defineCollection({
@@ -362,6 +362,8 @@ orientation: horizontal
 ---
 :video{autoplay controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1733494722/contentv3final_rc8bvu.mp4"}
 
+ 
+
 #title{unwrap="p"}
 Let [anyone edit]{.text-(--ui-primary)} your website
 
@@ -405,7 +407,7 @@ Edit your Nuxt Content website with **Studio**, our CMS platform with Notion-lik
 ::
 
 ::u-page-section
-  :::div{class="hidden sm:block"}
+  :::div{.hidden.sm:block}
     ::::u-color-mode-image
     ---
     class: size-full absolute bottom-0 inset-0 z-[-1]

docs/content/studio/index.md

@@ -1,11 +1,14 @@
 ---
 seo:
   title: Meet Studio, content edition for everyone.
-  description: Nuxt Studio brings visual editing to your Nuxt Content projects. Anyone can contribute to the website thanks to our versatile editor that adapt to markdown, YAML, or JSON – no technical expertise needed. Built for developers, made for everyone.
+  description: Nuxt Studio brings visual editing to your Nuxt Content projects.
+    Anyone can contribute to the website thanks to our versatile editor that
+    adapt to markdown, YAML, or JSON – no technical expertise needed. Built for
+    developers, made for everyone.
 ---
 
 ::u-page-hero
-  :::div{class="hidden sm:block"}
+  :::div{.hidden.sm:block}
     ::::u-color-mode-image
     ---
     class: size-full absolute bottom-0 inset-x-4 z-[-1]
@@ -51,7 +54,7 @@ Meet Studio, content edition :br for everyone.
   ---
   #title{unwrap="p"}
   GitHub & Google Authentication
-
+  
   #description{unwrap="p"}
   Personalized workspace for each role: developers, writers, and clients.
   :::
@@ -62,7 +65,7 @@ Meet Studio, content edition :br for everyone.
   ---
   #title{unwrap="p"}
   Easy content updates
-
+  
   #description{unwrap="p"}
   From Markdown to YAML edition, our visual editor is designed for non technical users.
   :::
@@ -73,7 +76,7 @@ Meet Studio, content edition :br for everyone.
   ---
   #title{unwrap="p"}
   Real-time Collaboration
-
+  
   #description{unwrap="p"}
   Write as a team in real-time with our collaboration features.
   :::
@@ -84,7 +87,7 @@ Meet Studio, content edition :br for everyone.
   ---
   #title{unwrap="p"}
   From Code to Edition
-
+  
   #description{unwrap="p"}
   Developers build the foundation while writers can safely edit the content.
   :::
@@ -95,7 +98,7 @@ Meet Studio, content edition :br for everyone.
   ---
   #title{unwrap="p"}
   Review before publishing
-
+  
   #description{unwrap="p"}
   Review your changes before making them live on your website.
   :::
@@ -106,7 +109,7 @@ Meet Studio, content edition :br for everyone.
   ---
   #title{unwrap="p"}
   Ready-to-use Templates
-
+  
   #description{unwrap="p"}
   Get started quickly with pre-built templates for Saas sites, blogs, docs and more.
   :::
@@ -126,7 +129,7 @@ orientation: horizontal
       },
     })
   </script>
-
+  
   <template>
     <div class="flex items-start gap-3">
       <div class="flex items-center justify-center border rounded-lg p-1.5">
@@ -143,7 +146,7 @@ orientation: horizontal
     </div>
   </template>
   ```
-
+  
   ```mdc [content/index.md]
   ::home-feature
     ---
@@ -155,7 +158,7 @@ orientation: horizontal
     Edit slots and props inside the Notion-like editor.
   ::
   ```
-
+  
     ::::preview-card{icon="i-lucide-eye" label="Editor"}
     ![vue component edition on Studio](/docs/studio/home-content-studio-dark.webp)
     ::::
@@ -209,9 +212,7 @@ Developers build the foundation their way: custom components, media library, and
 reverse: true
 orientation: horizontal
 ---
-:video{autoplay controls loop poster="/assets/home/videos/HomeNotionLikePoster.webp" src="https://res.cloudinary.com/nuxt/video/upload/v1733494722/contentv3final_rc8bvu.mp4"}
-
-
+:video{autoplay controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1744126742/studio/finalpropscomps_usfabp.mp4"}
 
 #title{unwrap="p"}
 Let [anyone edit]{.text-(--ui-primary)} your Nuxt Content website
@@ -290,7 +291,7 @@ Edit content as a team and see your site come to life with live preview. From te
 ::
 
 ::u-page-section
-  :::div{class="hidden sm:block"}
+  :::div{.hidden.sm:block}
     ::::u-color-mode-image
     ---
     class: size-full absolute bottom-0 inset-x-4 z-[-1]