From f3ddca9d06963553451947fbd253c4950a2dc570 Mon Sep 17 00:00:00 2001
From: Taron Chatoyan <chatoyan48@gmailc.com>
Date: Mon, 13 May 2024 15:21:14 +0200
Subject: [PATCH] replaced the markdown with vue component

---
 components/docs/NavSideBar.vue        |  13 +-
 components/home/Header.vue            | 414 +++++++++++++-------------
 components/layout/PluginContainer.vue | 347 +++++++++++++++++++++
 nuxt.config.ts                        |   5 +-
 pages/plugins/[...slug].vue           |   2 +-
 server/api/plugins.js                 |  91 +++++-
 6 files changed, 647 insertions(+), 225 deletions(-)
 create mode 100644 components/layout/PluginContainer.vue

diff --git a/components/docs/NavSideBar.vue b/components/docs/NavSideBar.vue
index b3fd3c6a7c..6261e6beba 100644
--- a/components/docs/NavSideBar.vue
+++ b/components/docs/NavSideBar.vue
@@ -45,22 +45,13 @@
 <script setup>
   import Magnify from "vue-material-design-icons/Magnify.vue"
   import Keyboard from "vue-material-design-icons/Keyboard.vue"
-
+  import Menu from "vue-material-design-icons/Menu.vue"
+  import RecursiveNavSidebar from "./RecursiveNavSidebar.vue";
 </script>
 
 <script>
-    import ChevronDown from "vue-material-design-icons/ChevronDown.vue"
-    import ChevronUp from "vue-material-design-icons/ChevronUp.vue"
-    import Menu from "vue-material-design-icons/Menu.vue"
-    import RecursiveNavSidebar from "./RecursiveNavSidebar.vue";
 
     export default defineComponent({
-        components: {
-            RecursiveNavSidebar,
-            ChevronDown,
-            ChevronUp,
-            Menu
-        },
         props: {
             type: {
                 type: String,
diff --git a/components/home/Header.vue b/components/home/Header.vue
index bf7140a44d..6ac6526f35 100644
--- a/components/home/Header.vue
+++ b/components/home/Header.vue
@@ -97,261 +97,261 @@
 </template>
 
 <script>
-import Console from "vue-material-design-icons/Console.vue";
-import PlayOutline from "vue-material-design-icons/PlayOutline.vue";
-
-import TextScroller from "~/components/layout/TextScroller.vue";
-
-export default {
-    components: {
-        Console,
-        PlayOutline,
-        TextScroller,
-    },
-    data() {
-        return {
-            videoVisible: false,
-            scrollingTexts: [
-                { text: "Orchestrate", color: "#E500EA" },
-                { text: "Automate", color: "#4281FF" },
-                { text: "Schedule", color: "#9D40FB" },
-            ],
-        };
-    },
-};
+    import Console from "vue-material-design-icons/Console.vue";
+    import PlayOutline from "vue-material-design-icons/PlayOutline.vue";
+
+    import TextScroller from "~/components/layout/TextScroller.vue";
+
+    export default {
+        components: {
+            Console,
+            PlayOutline,
+            TextScroller,
+        },
+        data() {
+            return {
+                videoVisible: false,
+                scrollingTexts: [
+                    { text: "Orchestrate", color: "#E500EA" },
+                    { text: "Automate", color: "#4281FF" },
+                    { text: "Schedule", color: "#9D40FB" },
+                ],
+            };
+        },
+    };
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/styles/variable";
-
-.main {
-    position: relative;
-    &::before {
-        position: absolute;
-        content: "";
-        z-index: 0;
-        width: 100vw;
-        height: 91.6%;
-        background: linear-gradient(197.51deg, #390380 13.37%, #14151B 45.45%);
-        right: 0;
-        top: 0;
-    }
-    .text-block {
-        margin: 4rem 0 1rem;
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        align-items: center;
-        gap: $spacer;
-        @include media-breakpoint-down(md) {
-            margin: 2.5rem 0 1rem;
-        }
-    }
+    @import "../../assets/styles/variable";
 
-    .hero {
-        padding-bottom: 2rem;
-        padding-top: 5rem;
+    .main {
         position: relative;
-    }
+        &::before {
+            position: absolute;
+            content: "";
+            z-index: 0;
+            width: 100vw;
+            height: 91.6%;
+            background: linear-gradient(197.51deg, #390380 13.37%, #14151B 45.45%);
+            right: 0;
+            top: 0;
+        }
+        .text-block {
+            margin: 4rem 0 1rem;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            align-items: center;
+            gap: $spacer;
+            @include media-breakpoint-down(md) {
+                margin: 2.5rem 0 1rem;
+            }
+        }
 
-    h1 {
-        color: var(--bs-white);
-        text-align: center;
-        max-width: 100%;
-        font-size: 32px!important;
-        font-weight: 600;
-        margin: 0;
-        padding: 0;
-
-        @include media-breakpoint-up(lg) {
-            font-size: 53px!important;
+        .hero {
+            padding-bottom: 2rem;
+            padding-top: 5rem;
+            position: relative;
         }
 
+        h1 {
+            color: var(--bs-white);
+            text-align: center;
+            max-width: 100%;
+            font-size: 32px!important;
+            font-weight: 600;
+            margin: 0;
+            padding: 0;
 
-        :deep(span) {
-            background: linear-gradient(91.82deg, #9639F9 28.72%, #9788EC 99.23%);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-    }
+            @include media-breakpoint-up(lg) {
+                font-size: 53px!important;
+            }
 
-    p {
-        max-width: fit-content;
-        text-align: center;
-        font-weight: 500;
-        font-size: $h6-font-size;
-        color: $white;
-    }
 
-    .buttons {
-        text-align: center;
-    }
+            :deep(span) {
+                background: linear-gradient(91.82deg, #9639F9 28.72%, #9788EC 99.23%);
+                background-clip: text;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+        }
 
-    .companies {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        padding-bottom: 4rem !important;
-    }
+        p {
+            max-width: fit-content;
+            text-align: center;
+            font-weight: 500;
+            font-size: $h6-font-size;
+            color: $white;
+        }
 
-    .companies-title {
-        position: relative;
+        .buttons {
+            text-align: center;
+        }
 
-        &:after {
-            content: "";
-            position: absolute;
-            left: 50%;
-            bottom: calc(-1 * var(--spacer));
-            transform: translateX(-50%);
-            display: inline-block;
-            height: 2px;
-            width: 51px;
-            background: var(--bs-pink);
+        .companies {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            padding-bottom: 4rem !important;
         }
-    }
 
-    @include media-breakpoint-down(lg) {
-        .hero {
-            padding-top: 6rem;
-            padding-bottom: 2rem;
+        .companies-title {
+            position: relative;
 
-            .text-block {
-                margin-bottom: 0;
+            &:after {
+                content: "";
+                position: absolute;
+                left: 50%;
+                bottom: calc(-1 * var(--spacer));
+                transform: translateX(-50%);
+                display: inline-block;
+                height: 2px;
+                width: 51px;
+                background: var(--bs-pink);
             }
         }
-    }
 
-    .companies-background {
-        padding-bottom: 4rem;
-        position: relative;
-        z-index: 10;
-        margin-top: -170px;
+        @include media-breakpoint-down(lg) {
+            .hero {
+                padding-top: 6rem;
+                padding-bottom: 2rem;
 
-        @include media-breakpoint-down(xxl) {
-            margin-top: -80px;
+                .text-block {
+                    margin-bottom: 0;
+                }
+            }
         }
 
-        @include media-breakpoint-down(xl) {
-            width: 100vw;
+        .companies-background {
+            padding-bottom: 4rem;
             position: relative;
-            left: 50%;
-            right: 50%;
-            margin-left: -50vw;
-            margin-right: -50vw;
-        }
-        @media only screen and (max-width: 320px)  { /* notice the max-width instead of min-width */
-            width: unset;
-            position: unset;
-            left: unset;
-            right: unset;
-            margin-left: -15px;
-            margin-right: -15px;
-        }
-        @include media-breakpoint-down(md) {
-            margin-top: -40px;
-        }
-        :deep(.companies-container .companies img) {
-            @include media-breakpoint-down(md) {
-                max-height: 30px;
-                width: auto;
-            }
-            @include media-breakpoint-down(sm) {
-                max-height: 15px;
-                width: auto;
-            }
+            z-index: 10;
+            margin-top: -170px;
 
-        }
-    }
-
-    .activity-list {
-        border-radius: 8px;
-        border: 0.829px solid $black-6;
-        padding: 34px 122.5px;
-        background: url("/landing/home/bg.svg") no-repeat center;
-        background-size: 100% 100%;
-        text-align: center;
-        font-family: $font-family-sans-serif;
-        text-transform: uppercase;
+            @include media-breakpoint-down(xxl) {
+                margin-top: -80px;
+            }
 
-        p {
-            margin: 0;
-        }
+            @include media-breakpoint-down(xl) {
+                width: 100vw;
+                position: relative;
+                left: 50%;
+                right: 50%;
+                margin-left: -50vw;
+                margin-right: -50vw;
+            }
+            @media only screen and (max-width: 320px)  { /* notice the max-width instead of min-width */
+                width: unset;
+                position: unset;
+                left: unset;
+                right: unset;
+                margin-left: -15px;
+                margin-right: -15px;
+            }
+            @include media-breakpoint-down(md) {
+                margin-top: -40px;
+            }
+            :deep(.companies-container .companies img) {
+                @include media-breakpoint-down(md) {
+                    max-height: 30px;
+                    width: auto;
+                }
+                @include media-breakpoint-down(sm) {
+                    max-height: 15px;
+                    width: auto;
+                }
 
-        .count {
-            color: $white;
-            font-size: 48.087px;
-            font-weight: 100;
-            line-height: 46px;
+            }
         }
 
-        .description {
-            color: rgba(255, 255, 255, 0.70);
-            font-size: 11.607px;
-            font-weight: 500;
-        }
+        .activity-list {
+            border-radius: 8px;
+            border: 0.829px solid $black-6;
+            padding: 34px 122.5px;
+            background: url("/landing/home/bg.svg") no-repeat center;
+            background-size: 100% 100%;
+            text-align: center;
+            font-family: $font-family-sans-serif;
+            text-transform: uppercase;
 
-        @include media-breakpoint-down(xl) {
-            padding: 30px 64px;
-        }
+            p {
+                margin: 0;
+            }
 
-        @include media-breakpoint-down(lg) {
-            padding: 30px 44px;
             .count {
-                font-size: 30px;
-                line-height: 30px;
+                color: $white;
+                font-size: 48.087px;
+                font-weight: 100;
+                line-height: 46px;
             }
 
             .description {
-                font-size: 9px;
+                color: rgba(255, 255, 255, 0.70);
+                font-size: 11.607px;
+                font-weight: 500;
             }
-        }
 
-        @include media-breakpoint-down(md) {
-            max-width: 330px;
-            flex-wrap: wrap;
-            justify-content: center !important;
-            gap: 25px;
-        }
-    }
+            @include media-breakpoint-down(xl) {
+                padding: 30px 64px;
+            }
 
-    .img-block
-    {
-        display: flex;
-        width: 100%;
-        justify-content: center;
-        position: relative;
+            @include media-breakpoint-down(lg) {
+                padding: 30px 44px;
+                .count {
+                    font-size: 30px;
+                    line-height: 30px;
+                }
+
+                .description {
+                    font-size: 9px;
+                }
+            }
 
-        &:after {
-            content: "";
-            background-image: url(/landing/header-menu/bg-dots.png);
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            position: absolute;
-            top: 0;
-            width: 148%;
             @include media-breakpoint-down(md) {
-                width: 138%;
+                max-width: 330px;
+                flex-wrap: wrap;
+                justify-content: center !important;
+                gap: 25px;
             }
-            height: 85%;
         }
 
-        img {
-            width: 80%;
+        .img-block
+        {
+            display: flex;
+            width: 100%;
+            justify-content: center;
             position: relative;
-            z-index: 5;
-            @include media-breakpoint-down(md) {
-                width: 100%;
+
+            &:after {
+                content: "";
+                background-image: url(/landing/header-menu/bg-dots.png);
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                position: absolute;
+                top: 0;
+                width: 148%;
+                @include media-breakpoint-down(md) {
+                    width: 138%;
+                }
+                height: 85%;
+            }
+
+            img {
+                width: 80%;
+                position: relative;
+                z-index: 5;
+                @include media-breakpoint-down(md) {
+                    width: 100%;
+                }
             }
         }
-    }
 
-    :deep(.companies-container) {
-        max-width: unset;
-        .companies-list-container {
-            &:before,
-            &:after {
-                content: none;
+        :deep(.companies-container) {
+            max-width: unset;
+            .companies-list-container {
+                &:before,
+                &:after {
+                    content: none;
+                }
             }
         }
     }
-}
 </style>
diff --git a/components/layout/PluginContainer.vue b/components/layout/PluginContainer.vue
new file mode 100644
index 0000000000..a3eca9fa82
--- /dev/null
+++ b/components/layout/PluginContainer.vue
@@ -0,0 +1,347 @@
+<template>
+    <div class="container-fluid bd-gutter bd-layout">
+        <NavSideBar :type="type" :navigation="navigation"/>
+        <article class="bd-main order-1" :class="{'full': page?.rightBar === false , 'docs' : isDoc}">
+            <div class="bd-title">
+                <Breadcrumb :slug="slug" :pageList="pageList" :pageNames="pageNames"/>
+                <h1 v-if="page && getPageTitle()" class="py-0 title">
+                    <NuxtImg
+                        v-if="getPageIcon()"
+                        :src="page.pluginType === 'definitions' ? getPageIcon() : page.icon"
+                        :alt="getPageTitle()"
+                        width="40px"
+                        height="40px"
+                        loading="lazy"
+                        format="webp"
+                        quality="80"
+                        densities="x1 x2"
+                        class="me-3 page-icon"
+                    />
+                    <span v-html="transformTitle(getPageTitle())"></span>
+                </h1>
+            </div>
+            <NavToc :rate-helpful="true" :page="page && page" class="my-md-0 my-4 right-menu"/>
+
+            <div class="bd-content">
+                <DocsFeatureScopeMarker v-if="page.editions || page.version" :editions="page.editions"
+                                        :version="page.version"/>
+                <SchemaToHtml :page="page" :getPageName="getPageName" v-if="page.pluginType === 'definitions'">
+                    <template v-slot:markdown="{ content }">
+                        <MDC :value="content" tag="article" />
+                    </template>
+                </SchemaToHtml>
+                <ContentRendererMarkdown
+                    class="bd-markdown"
+                    :value="page"
+                    data-bs-spy="scroll"
+                    data-bs-target="#nav-toc"
+                    v-else
+                />
+                <PrevNext v-if="prevNext" :navigation="navigation"/>
+            </div>
+        </article>
+    </div>
+</template>
+
+<script setup>
+    import PrevNext from "~/components/layout/PrevNext.vue";
+    import NavSideBar from "~/components/docs/NavSideBar.vue";
+    import Breadcrumb from "~/components/layout/Breadcrumb.vue";
+    import NavToc from "~/components/docs/NavToc.vue";
+    import {SchemaToHtml} from '@kestra-io/ui-libs'
+    import {hash} from "ohash";
+    import {recursivePages, generatePageNames} from "~/utils/navigation.js";
+
+
+    const isDoc = computed(() => props.type === 'docs');
+    const config = useRuntimeConfig();
+
+    const route = useRoute()
+    const slug = computed(() => `/${props.type}/${route.params.slug instanceof Array ? route.params.slug.join('/') : route.params.slug}`);
+    let page;
+
+
+    const fetchNavigation = async () => {
+        let navigationFetch;
+        if (props.type === "plugins") {
+            navigationFetch = await useFetch(`/api/plugins?type=navigation`);
+        } else {
+            const queryBuilder = queryContent('/' + props.type + '/');
+
+            navigationFetch = await useAsyncData(
+                `NavSideBar-${hash(props.type)}`,
+                () => fetchContentNavigation(queryBuilder)
+            );
+
+            if (navigationFetch.data && navigationFetch.data.value && props.type === 'docs' && !navigationFetch.data.value[0].children.find((item) => (item.title === "Videos tutorials"))) {
+                navigationFetch.data.value[0].children.splice(navigationFetch.data.value[0].children.length - 3, 0, {
+                    title: "Videos Tutorials",
+                    _path: "/tutorial-videos",
+                });
+            }
+        }
+
+        const navigation = navigationFetch.data;
+
+        const pageList = recursivePages(navigation.value[0]);
+        const pageNames = generatePageNames(navigation.value[0]);
+
+        return {navigation, pageList, pageNames};
+    }
+
+    const transformTitle = (text) => {
+        return text
+            .replace(/([A-Z])/g, '&#x200B;$1')
+            .replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '');
+    }
+
+    const props = defineProps({
+        type: {
+            type: String,
+            required: true
+        },
+        prevNext: {
+            type: Boolean,
+            required: false,
+            default: true
+        },
+    })
+
+    if (props.type === 'plugins') {
+        const parts = slug.value.split('/');
+        let pageUrl;
+        if (parts?.length > 3) {
+            pageUrl = `/api/plugins?page=${parts[parts?.length - 1].replace(/.md$/, "")}&type=definitions`
+        } else {
+            pageUrl = `/api/plugins?page=${parts[2]}&type=plugin`
+        }
+
+        const {data: pluginInformation} = await useAsyncData(`Container-${hash(pageUrl)}`, () => {
+            return $fetch(pageUrl)
+        });
+
+        if (pluginInformation?.value?.error) {
+            throw createError({statusCode: 404, message: pluginInformation?.value?.message, fatal: true})
+        }
+        page = pluginInformation?.value;
+    } else {
+        const {data, error} = await useAsyncData(`Container-${hash(slug.value)}`, () => {
+            try {
+                return queryContent(slug.value).findOne();
+            } catch (error) {
+                throw createError({statusCode: 404, message: error.toString(), data: error, fatal: true})
+            }
+        });
+        page = data.value;
+
+        if (error && error.value) {
+            throw error.value;
+        }
+    }
+
+    const {navigation, pageList, pageNames} = await fetchNavigation();
+
+    useContentHead(page);
+
+    const getPageType = () => {
+        const paths = route.path.split('/');
+        return paths[paths?.length - 1];
+    }
+
+    const getPageName = () => {
+        const pageType = getPageType().split('.');
+        pageType[pageType?.length - 1] = pageNames[getPageType()];
+        return pageType.join('.');
+    }
+
+    const getPageIcon = () => {
+        return `${config.public.apiUrl}/plugins/icons/${getPageName()}`;
+    }
+
+    const getPageTitle = () => {
+        return pageNames[getPageType()];
+    }
+
+    const {description, title} = page;
+    const {origin} = useRequestURL();
+    useHead({
+        meta: [
+            {name: 'twitter:card', content: 'summary_large_image'},
+            {name: 'twitter:site', content: '@kestra_io'},
+            {name: 'twitter:title', content: title},
+            {name: 'twitter:description', content: description},
+            {name: 'twitter:image', content: `${origin}/landing/home/header-bg.png`},
+            {name: 'twitter:image:alt', content: title}
+        ]
+    })
+</script>
+<style lang="scss" scoped>
+    @import "../../assets/styles/variable";
+
+    .container-fluid {
+        gap: calc($spacer * 4);
+        overflow-x: unset;
+
+        .bd-title {
+            margin-top: calc($spacer * 4);
+            @include media-breakpoint-down(lg) {
+                margin-top: calc($spacer * 1);
+            }
+
+            h1 {
+                @media only screen and (min-width: 1920px) {
+                    max-width: 71.25rem;
+                }
+            }
+        }
+
+        .bd-main {
+            gap: calc($spacer * 2) $spacer;
+            @include media-breakpoint-down(sm) {
+                gap: calc($spacer * 2) calc($spacer * 7);
+            }
+        }
+
+        .bd-content {
+            margin: 0 auto;
+            @media only screen and (min-width: 1920px) {
+                max-width:71.25rem
+            }
+        }
+
+        .title {
+            font-size: $h2-font-size;
+            font-weight: 400;
+            line-height: 3.25rem;
+            margin: 0 auto;
+        }
+    }
+
+    :deep(p) {
+        font-weight: 400;
+        line-height: 1.75rem;
+        font-size: $h6-font-size;
+    }
+
+    :deep(.bd-markdown > h2) {
+        margin-top: calc($spacer * 4.12);
+        border-top: 1px solid $black-6;
+        padding-top: calc($spacer * 3.125);
+        margin-bottom: 2rem;
+
+        a {
+            border-left: 5px solid $purple-36;
+            padding-left: calc($spacer * 0.6);
+            font-size: calc($font-size-base * 1.87);
+        }
+    }
+
+
+    :deep(p > a) {
+        text-decoration: underline;
+    }
+
+    :deep(h2 > a) {
+        font-weight: 600;
+        line-height: 2.375rem;
+        margin: 0;
+    }
+
+    :deep(h3 > a ) {
+        color: $white !important;
+        font-size: 1.5rem;
+        font-weight: 600;
+        line-height: 2.375rem;
+    }
+
+    :deep(h4 > a ) {
+        color: $white !important;
+        font-weight: 600;
+    }
+
+    :deep(h5) {
+        color: $white !important;
+        font-weight: 600;
+    }
+
+    .bd-main :deep(p > a), .bd-main :deep(ul a) {
+        color: $purple-36;
+    }
+
+    .container, :deep(h2 > a) {
+        color: $white !important;
+    }
+
+    :deep(.doc-alert) {
+        border: 1px solid #3A3C55;
+        background-color: #18131F;
+        color: #B9BEF8;
+
+        p {
+            font-size: $font-size-base;
+        }
+    }
+
+    :deep(p > code), :deep(li > code), :deep(a > code), :deep(table code) {
+        color: $white-3;
+        text-decoration: none !important;
+        border-radius: 0.25rem;
+        padding: 0 calc($spacer / 4);
+    }
+
+    :deep(.code-block), :deep(p > code), :deep(li > code), :deep(a > code), :deep(table code) {
+        border: $block-border;
+        background-color: $black-2 !important;
+    }
+
+    :deep(p > strong > code) {
+        color: $white-3;
+        text-decoration: none !important;
+        border-radius: 0.25rem;
+        padding: 0 calc($spacer / 4);
+    }
+
+
+    :deep(li > mark) {
+        background-color: $link-color;
+    }
+
+    :deep(.docs-prev-next a) {
+        span {
+            color: $link-color;
+        }
+
+        .directory {
+            color: $white;
+        }
+    }
+
+    :deep(.btn) {
+        span {
+            color: $link-color;
+        }
+
+        &:hover {
+
+            span {
+                color: $white;
+            }
+        }
+    }
+
+    :deep(table) {
+        td, th {
+            background-color: $black-2;
+            border: $block-border;
+            color: $white;
+
+            a {
+                color: $link-color;
+            }
+        }
+    }
+
+    .docs :deep(img:not(.page-icon)) {
+        width: 100%;
+    }
+</style>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index dbb8377d68..f5dea855f2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -131,7 +131,10 @@ export default defineNuxtConfig({
     vite: {
         build: {
             rollupOptions: {
-                external: ['shiki/onig.wasm'],
+                external: [
+                    'shiki/onig.wasm',
+                    '@kestra-io/ui-libs'
+                ],
             }
         },
         optimizeDeps: {
diff --git a/pages/plugins/[...slug].vue b/pages/plugins/[...slug].vue
index 50fdd80e65..db2917ea4b 100644
--- a/pages/plugins/[...slug].vue
+++ b/pages/plugins/[...slug].vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-    import PluginContainer from "~/components/layout/Container.vue";
+  import PluginContainer from "~/components/layout/PluginContainer.vue";
 </script>
 
 <style lang="scss" scoped>
diff --git a/server/api/plugins.js b/server/api/plugins.js
index e81b156009..b3014e0ec7 100644
--- a/server/api/plugins.js
+++ b/server/api/plugins.js
@@ -2,18 +2,90 @@ import {parseMarkdown} from '@nuxtjs/mdc/runtime'
 import url from "node:url";
 import {camelToKebabCase} from "~/utils/url.js";
 
-function toNuxtContent(parsedMarkdown) {
+function toNuxtContent(parsedMarkdown, type) {
     return {
         body: {
             toc: parsedMarkdown.toc,
             ...parsedMarkdown.body
         },
+        pluginType: type,
         description: parsedMarkdown.data.description,
         title: parsedMarkdown.data.title,
         icon: `data:image/svg+xml;base64,${parsedMarkdown.data.icon}` ?? null
     };
 }
 
+function toNuxtBlocks(data, type) {
+    const { $schema, required, title, description, $examples, $deprecated, $beta, $metrics, ...pageData } = data;
+
+    if ($examples) {
+        pageData.examples = $examples;
+    }
+
+    if ($metrics) {
+        pageData.metrics = $metrics;
+    }
+    return {
+        body: {
+            children: pageData,
+            toc: {
+                links: navTocData(pageData)
+            },
+        },
+        pluginType: type,
+        description,
+        deprecated: $deprecated,
+        title,
+    };
+}
+
+const generateNavTocChildren = (properties) => {
+    const children = [];
+
+    const sortedKeys = Object.keys(properties).sort((a, b) => {
+        return (properties[b].$required || false) - (properties[a].$required || false);
+    });
+
+    for (const key of sortedKeys) {
+        children.push({
+            id: key,
+            depth: 3,
+            text: properties[key].name ? properties[key].name : key,
+        });
+    }
+
+    return children;
+}
+
+function capitalizeFirstLetter(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+const navTocData = (pageData) => {
+    const links = [{
+        id: 'examples',
+        depth: 2,
+        text: 'Examples',
+    }];
+    for(const [key, value] of Object.entries(pageData)) {
+        if (key !== 'examples' && key.split('')[0] !== '$') {
+            const data = {
+                id: key,
+                depth: 2,
+                text: capitalizeFirstLetter(key),
+            }
+
+            if (Object.keys(value).length > 0) {
+                data.children = generateNavTocChildren(value);
+            }
+
+            links.push(data)
+        }
+    }
+
+    return links;
+};
+
 function generateSubMenu(baseUrl, group, items) {
     return generateSubMenuWithGroupProvider(baseUrl, () => group, items);
 }
@@ -73,20 +145,29 @@ export default defineEventHandler(async (event) => {
         const page = requestUrl.searchParams.get("page");
         const type = requestUrl.searchParams.get("type");
         const config = useRuntimeConfig();
-
         if (type === 'definitions') {
             let pageData = await $fetch(`${config.public.apiUrl}/plugins/definitions/${page}`);
 
-            const parsedMarkdown = await parseMarkdown(pageData.markdown);
+            if (pageData.schema.outputs && pageData.schema.outputs.properties) {
+                pageData.schema.properties.outputs = pageData.schema.outputs.properties;
+            }
+
+            if (pageData.schema.definitions && Object.keys(pageData.schema.definitions).length) {
+                pageData.schema.properties.definitions = pageData.schema.definitions;
+            }
+
+            if (pageData.schema['examples']) {
+                pageData.schema.properties.examples = pageData.schema['examples']
+            }
 
-            return toNuxtContent(parsedMarkdown);
+            return toNuxtBlocks(pageData.schema.properties, type);
         }
         if (type === 'plugin') {
             let pageData = await $fetch(`${config.public.apiUrl}/plugins/${page}`);
 
             const parsedMarkdown = await parseMarkdown(pageData.body);
 
-            return toNuxtContent(parsedMarkdown);
+            return toNuxtContent(parsedMarkdown, type);
         }
         if (type === 'navigation') {
             const plugins = await $fetch(`${config.public.apiUrl}/plugins`);