chore: upgrade to nuxt-content 3 (#2195)

* feat: update deps

* define docs collection

* fix nuxt config again

* reorder modules and setup server modules

* still work to do but homepage and nav load

* fix malformed blog post

* fix positions page

* remove debug code

* the main page renders docs

* fix order of usecases

* make renderer work (weird)

* add conditional rendering for ContentRenderer component

* minor fixes

* make dos look good (almost)

* better layout

* remove specificity of homepage

* consistent sizing

* fix: plugin container

* fix remove useless props

* remove last occurence of type from container template

* remove a console log

* fix guides and child tables

* cleanup plugincontainer

* finish merge main

* almost all fixed

* fix plugins rendering

* fix rss feed

* make custom highlighting work

* remove extra border

* restore docs css

* fix blog

* remove use of shiki in client

* reorganize nuxt config

* fix routing issue on pages

* fix binding

* remove unused import from nuxt config

* fix childcard

* update wrangler to database binding

* fix: see if we can rely on defaults

* fix: restore edit this page link

components/blogs/BlogCard.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="mb-5 mt-1" role="button">
-        <NuxtLink class="text-dark" :href="blog._path">
+        <NuxtLink class="text-dark" :href="blog.path">
             <img loading="lazy" :alt="blog.title" :src="blog.image" class="card-image w-100 rounded-3" />
             <div class="mt-1">
                 <span class="small-text category">{{ blog.category }}</span>

components/blogs/BlogsList.vue

@@ -64,7 +64,7 @@
                 <div class="row mt-5">
                     <div
                         v-for="(blog, index) in paginatedBlogs"
-                        :key="blog._path"
+                        :key="blog.path"
                         :ref="`blog-${index}`"
                         class="col-lg-6 col-md-6"
                     >

components/blogs/HighlightBlogCard.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="" role="button">
-        <NuxtLink class="d-inline-block text-dark w-100" :href="blog._path">
+        <NuxtLink class="d-inline-block text-dark w-100" :href="blog.path">
             <NuxtImg width="840" loading="lazy" format="webp" quality="80" densities="x1 x2" class="w-100 col-md-12 rounded-3 img-fluid blog-image" :alt="blog.image" :src="blog.image" />
             <div class="description mt-4">
                 <span class="small-text category">{{ blog.category }}</span>

components/blueprints/Detail.vue

@@ -3,7 +3,7 @@
         <div class="col-md-10">
             <h3>Source</h3>
             <div class="mt-4 relative code mb-3 main-code-block" :class="{ hide: hideCode }">
-                <ContentRendererMarkdown
+                <ContentRenderer
                     class="bd-markdown"
                     :value="flow"
                 />
@@ -19,7 +19,7 @@
             <div class="title">
                 <p>{{ tagsList }}</p>
             </div>
-            <ContentRendererMarkdown
+            <ContentRenderer
                 class="bd-markdown"
                 :value="description"
             />

components/careers/Positions.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="container" id="positions">
-        <Section
+        <LayoutSection
             subtitle="It's a"
             subtitle-after="Match"
             baseline="We are looking for talented open-source enthusiasts working remotely from anywhere. Browse our open positions, and find a job you love."
         >
             <ul class="list-unstyled d-flex flex-column gap-3">
                 <li data-aos="fade-left" v-for="doc in pageData">
-                    <NuxtLink class="d-flex align-items-center bg-dark-2" :href="doc._path">
+                    <NuxtLink class="d-flex align-items-center bg-dark-2" :href="doc.path">
                         <div class="d-flex align-items-center gap-3">
                             <img src="/landing/careers/emoji_people.svg" alt="emoji_people" />
                             <span>{{ doc.title }}</span>
@@ -19,26 +19,15 @@
                     </NuxtLink>
                 </li>
             </ul>
-
-        </Section>
+        </LayoutSection>
     </div>
 </template>
 
 <script setup>
-    import ArrowRight from "vue-material-design-icons/ArrowRight.vue"
     const {data: pageData} = await useAsyncData(
-        `Blog-Page-List`,
-        () => queryContent("/careers/").find()
+        `Career-Positions`,
+        () => queryCollection("careers").all()
     );
-
-</script>
-
-<script>
-    import Section from '../../components/layout/Section.vue';
-
-    export default {
-        components: {Section}
-    }
 </script>
 
 <style lang="scss" scoped>

components/common/SocialsList.vue

@@ -58,10 +58,10 @@
     });
 
     const editLink = computed(() => {
-        if (!props.page._file) {
+        if (!props.page.stem || !props.page.extension) {
             return false;
         }
-        return `https://github.com/kestra-io/kestra.io/edit/main/content/${props.page._file}`;
+        return `https://github.com/kestra-io/kestra.io/edit/main/content/${props.page.stem}.${props.page.extension}`;
     });
 </script>
 <style lang="scss" scoped>

components/content/BigChildCards.vue

@@ -2,7 +2,7 @@
 <template>
     <h2 class="big-title">{{title}}</h2>
     <div class="big-card-grid">
-        <NuxtLink :href="item._path" class="big-card" v-for="item in navigation" :key="item._path">
+        <NuxtLink :href="item.path" class="big-card" v-for="item in navigation" :key="item.path">
             <h4 class="card-title">{{ item.title }}</h4>
             <p class="card-text">{{ item.description }}</p>
         </NuxtLink>
@@ -21,7 +21,7 @@ const props = defineProps<{
 
 const {data: navigation} = await useAsyncData(
         `BigChildCard-${hash(props.directory)}`,
-        () => queryContent(props.directory + "/").find()
+        () => queryCollection("docs").where("path", "LIKE", `${props.directory}/%`).all()
     );
 </script>
 

components/content/ChildCard.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="row card-group mb-2">
-        <NuxtLink :href="item._path" class="col-12 col-md-6 mb-lg-4 mb-2" v-for="item in navigation" :key="item._path">
+        <NuxtLink :href="item.path" class="col-12 col-md-6 mb-lg-4 mb-2" v-for="item in navigation" :key="item.path">
             <div class="card">
                 <div class="card-body d-flex">
                         <span class="card-icon">
@@ -19,7 +19,6 @@
 <script setup>
     import {hash} from "ohash";
     import {useAsyncData} from "#imports";
-    import Typewriter from "vue-material-design-icons/Typewriter.vue";
 
     const props = defineProps({
         pageUrl: {
@@ -38,17 +37,16 @@
         currentPageSlug = route.path;
     }
 
-    currentPageSlug = currentPageSlug.endsWith("/") ? currentPageSlug.slice(0, -1) : currentPageSlug;
-    const currentPageDir = currentPageSlug.split('/').pop();
+    currentPageSlug = currentPageSlug.replace(/\/$/, '');
 
     const {data: navigation} = await useAsyncData(
         `ChildCard-${hash(currentPageSlug)}`,
-        () => queryContent(currentPageSlug + "/").where({ _dir: currentPageDir}).find()
+        () => queryCollection('docs').where('path', 'LIKE', `${currentPageSlug}/%`).all()
     );
 
     const {data: currentPage} = await useAsyncData(
         `ChildCardCurrentPage-${hash(currentPageSlug)}`,
-        () => queryContent(currentPageSlug).findOne()
+        () => queryCollection('docs').path(currentPageSlug).first()
     );
 
     // if (currentPage == "/docs/faq") {

components/content/ChildReleases.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="row card-group card-centered mb-2">
-        <NuxtLink :href="item._path" class="col-12 col-md-10 mb-4" v-for="item in navigation" :key="item._path">
+        <NuxtLink :href="item.path" class="col-12 col-md-10 mb-4" v-for="item in navigation" :key="item.path">
             <div class="card">
                 <div class="card-body">
                     <div>
@@ -39,6 +39,6 @@
 
     const {data: navigation} = await useAsyncData(
         `ChildReleases-${hash(currentPage)}`,
-        () => queryContent(`${currentPage}/`).where({ release: { $exists: true } }).sort({ release: -1 }).find()
+        () => () => queryCollection('docs').where('release', 'IS', `NotNull`).sort("release", "DESC").all()
     );
 </script>

components/content/ChildTableOfContents.vue

@@ -1,6 +1,6 @@
 <script>
     import {hash} from "ohash";
-    import {useAsyncData, fetchContentNavigation} from "#imports";
+    import {useAsyncData} from "#imports";
     import {NuxtLink} from "#components";
 
     export default defineComponent({
@@ -17,7 +17,6 @@
         async setup(props) {
             const {pageUrl, max} = toRefs(props);
             const route = useRoute()
-            const {navDirFromPath} = useContentHelpers()
 
             let currentPage = null;
 
@@ -29,24 +28,35 @@
 
             currentPage = currentPage.endsWith("/") ? currentPage.slice(0, -1) : currentPage;
 
-            const queryBuilder = queryContent(currentPage)
-
             const {data: navigation} = await useAsyncData(
                 `ChildTableOfContents-${hash(currentPage)}`,
-                () => fetchContentNavigation(queryBuilder),
+                () => queryCollectionNavigation('docs').andWhere(query =>
+                    query
+                        .where('path', 'LIKE', `${currentPage}/%`)
+                        .where('path', '<>', currentPage)
+                )
             );
 
-            const dir = (navDirFromPath(currentPage, navigation.value) || [])
-                .filter(value => value._path !== currentPage)
+            const dir = computed(() => {
+                const extractLeafChildrenPages = (children) => {
+                    return children.map((child) => {
+                        if (child.children && child.children.length) {
+                            return extractLeafChildrenPages(child.children);
+                        }
+                        return child;
+                    }).flat();
+                };
+
+                return extractLeafChildrenPages(navigation.value)
+            });
 
             return {dir, max};
         },
 
         render(ctx) {
             const {dir, max} = ctx;
 
-            const renderLink = (link) => h(NuxtLink, {to: link._path}, () => link.title);
-
+            const renderLink = (link) => h(NuxtLink, {to: link.path}, () => link.title);
 
             const renderLinks = (data, level) => {
                 return h(
@@ -55,7 +65,7 @@
                     (data || []).map((link) => {
                         if (link.children &&
                             (max === undefined || max <= level) &&
-                            (link.children.length > 1 || link.children.length === 1 && link.children[0]._path !== link._path)
+                            (link.children.length > 1 || link.children.length === 1 && link.children[0].path !== link.path)
                         ) {
                             return h("li", null, [renderLink(link), renderLinks(link.children, level + 1)]);
                         }

components/content/GuidesChildCard.vue

@@ -34,7 +34,7 @@
                 </div>
             </div>
         </div>
-        <NuxtLink :href="item._path" class="col-12 col-md-4 mb-lg-4 mb-2" v-for="item in navigation" :key="item._path">
+        <NuxtLink :href="item.path" class="col-12 col-md-4 mb-lg-4 mb-2" v-for="item in navigation" :key="item.path">
             <div class="card">
                 <div class="card-body">
                     <span class="card-stage" :style="`background-color: ${stages[item.stage]}`">
@@ -60,8 +60,6 @@
     import {hash} from "ohash";
     import {useAsyncData} from "#imports";
     import Magnify from "vue-material-design-icons/Magnify.vue";
-    import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
-    import Close from "vue-material-design-icons/Close.vue"
     import DeleteOutline from "vue-material-design-icons/DeleteOutline.vue"
 
 
@@ -140,24 +138,21 @@
       const {data: result} = await useAsyncData(
         `ChildCard-${hash(currentPage)}`,
         () => {
-          let query = queryContent(currentPage + "/").where({ _dir: currentPageDir });
-
-          let queryParams = {};
+          let query = queryCollection('docs').where('path', 'LIKE', `${currentPage}/%`);
 
           if (Array.isArray(stage.value) && stage.value.length > 0) {
-            queryParams.stage = { $in: stage.value };
+            query = query.andWhere('stage', 'IN', stage.value);
           }
 
           if (Array.isArray(topic.value) && topic.value.length > 0) {
-            queryParams.topics = { $contains: topic.value };
+            query = query.andWhere('topics', 'CONTAINS', topic.value);
           }
 
           if (search.value) {
-            queryParams.title = { $icontains: search.value }
+            query = query.andWhere('title', 'CONTAINS', search.value);
           }
-          query = query.where(queryParams);
 
-          return query.find();
+          return query.all();
         });
       navigation.value = result.value;
     };

components/content/ProseA.vue

@@ -34,15 +34,15 @@
         if (!NON_NUXT_CONTENT_RESOLVED_PATHS.some(p => route.path.includes(p))) {
             page = (await useAsyncData(
                 `ProseA-${hash(route.path)}`,
-                () => queryContent(route.path).only("_file").findOne(),
+                () => queryCollection('docs').path(route.path).select('id').findOne(),
                 {
                     dedupe: "defer"
                 }
             )).data;
         }
 
         // If we are on an index page, we want to resolve relative paths starting from our current route
-        if (page?.value?._file?.includes('index.md') || !page) {
+        if (page?.value?.file?.includes('index.md') || !page) {
             absolutePath = absolutePath + "/";
         }
 

components/content/ProseCode.vue → components/content/ProsePre.vue

@@ -1,7 +1,6 @@
 <script setup>
     import {onMounted} from "#imports";
     import { createPopper } from "@popperjs/core";
-    import useShiki from "~/composables/useShiki";
 
     import ContentCopy from "vue-material-design-icons/ContentCopy.vue";
     import Check from "vue-material-design-icons/Check.vue";
@@ -36,14 +35,8 @@
         const copyButton = ref(null);
         const copyTooltip = ref(null);
 
-        const {highlightCodeBlocks} = useShiki();
-
         const codeBlock = ref(null);
 
-        onMounted(() => {
-            highlightCodeBlocks(codeBlock.value);
-        });
-
         function hoverCode(){
             isHoveringCode.value = true;
             if(copyIconResetTimer.value) {
@@ -88,7 +81,7 @@
                 <div id="arrow" data-popper-arrow />
             </div>
         </template>
-        <slot />
+        <pre v-bind="$attrs"><slot /></pre>
     </div>
 </template>
 

components/content/WhatsNew.vue

@@ -2,9 +2,9 @@
   <div>
         <h2>{{title}}</h2>
         <div class="list-of-posts">
-            <template v-for="(post, index) of posts" :key="post._path" >
+            <template v-for="(post, index) of posts" :key="post.path" >
                 <hr v-if="index > 0" />
-                <NuxtLink :to="post._path" class="post-card">
+                <NuxtLink :to="post.path" class="post-card">
                     <img :src="post.image" class="card-img-left" alt="blog.title" />
                     <div class="card-body">
                         <div class="card-details">
@@ -33,7 +33,7 @@ const dateTimeFormat = new Intl.DateTimeFormat('en-US', {
 
 const {data: posts} = await useAsyncData(
     `Blog-Page-Short-List`,
-    () => queryContent("/blogs/").sort({date:-1}).limit(4).find()
+    () => queryCollection("blogs").order("date", "DESC").limit(4).all()
 );
 </script>