Feat/plugins index page

app.vue

@@ -8,6 +8,10 @@
     import DefaultLayout from "~/layouts/default.vue";
     import "@kestra-io/ui-libs/style.css";
 
+    String.prototype.capitalize = function () {
+        return this.charAt(0).toUpperCase() + this.slice(1)
+    }
+
     useHead({
         htmlAttrs: {
             lang: "en",

assets/styles/app.scss

@@ -2,6 +2,7 @@
 
 html {
     height: 100%;
+    scroll-padding-top: var(--top-bar-height);
 }
 
 body {
@@ -61,17 +62,6 @@ h2 {
     font-weight: 800
 }
 
-// Offsets anchor headers to scroll past the top-bar
-.container {
-    h1, h2, h3, h4, h5, h6 {
-        &[id] {
-            --anchor-offset: calc(var(--top-bar-height) + var(--spacer));
-            margin-top: calc(var(--anchor-offset) * -1);
-            padding-top: var(--anchor-offset);
-        }
-    }
-}
-
 main {
     padding-top: 67px;
 

assets/styles/docs.scss

@@ -84,6 +84,7 @@ $bd-gutter-x: 3rem;
 
     h4 {
         padding-top: 1rem;
+        color: $white;
         font-size: $h5-font-size;
     }
 

assets/styles/theme.scss

@@ -2,6 +2,7 @@
     #{--kestra-io-token-color-background-primary}: #111113;
     #{--kestra-io-token-color-background-hover-primary}: #404559;
     #{--kestra-io-token-color-background-secondary}: #161617;
+    #{--tokens-border-border-active}: #8405FF;
     #{--kestra-io-token-color-border-primary}: #3D3D3F;
     #{--kestra-io-token-color-border-secondary}: #252526;
     #{--kestra-io-token-color-white}: #FFFFFF;

components/blueprints/ListCard.vue

@@ -20,10 +20,6 @@
     </NuxtLink>
 </template>
 
-<script setup>
-    import {slugify} from "~/utils/url.js";
-</script>
-
 <script>
     export default {
         props: {

components/docs/NavToc.vue

@@ -22,13 +22,23 @@
                     <strong class="d-none d-lg-block h6 mb-2">Table of Contents</strong>
                     <nav id="nav-toc">
                         <ul class="ps-0 pt-2 pt-lg-0 mb-2" v-for="tableOfContent in generated">
-                            <li v-if="tableOfContent.depth > 1 && tableOfContent.depth < 6 && tableOfContent.text" @click="closeToc" class="table-content">
-                                <a @click="menuNavigate" :name="tableOfContent.id" :class="'depth-' + tableOfContent.depth">{{ tableOfContent.text }}</a>
+                            <li v-if="tableOfContent.depth > 1 && tableOfContent.depth < 6 && tableOfContent.text"
+                                @click="closeToc" class="table-content">
+                                <a @click="menuNavigate" :href="`#${tableOfContent.id}`" :class="{
+                                    'text-capitalize': capitalize,
+                                    [`depth-${tableOfContent.depth}`]: true
+                                    }">{{ tableOfContent.text }}</a>
                             </li>
-                            <ul class="ps-0 pt-2 pt-lg-0" v-if="tableOfContent.children && tableOfContent.children.length">
-                                <template v-for="item in tableOfContent.children" >
-                                    <li v-if="item.depth > 1 && item.depth < 6" @click="closeToc" :class="{'mt-3': item.depth === 2}">
-                                        <a @click="menuNavigate" :name="item.id" :class="'depth-' + item.depth">{{ item.text }}</a>
+                            <ul class="ps-0 pt-2 pt-lg-0"
+                                v-if="tableOfContent.children && tableOfContent.children.length">
+                                <template v-for="item in tableOfContent.children">
+                                    <li v-if="item.depth > 1 && item.depth < 6" @click="closeToc"
+                                        :class="{'mt-3': item.depth === 2}">
+                                        <a @click="menuNavigate" :href="`#${item.id}`"
+                                           :class="{
+                                    'text-capitalize': capitalize,
+                                    [`depth-${item.depth}`]: true
+                                    }">{{ item.text }}</a>
                                     </li>
                                 </template>
                             </ul>
@@ -47,19 +57,19 @@
 <script setup>
     import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
     import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
-    import ThumbUpOutline from "vue-material-design-icons/ThumbUpOutline.vue";
-    import ThumbDownOutline from "vue-material-design-icons/ThumbDownOutline.vue";
 </script>
 
 <script>
-    import posthog from 'posthog-js'
-
     export default {
         props: {
             page: {
                 type: Object,
                 required: true
             },
+            capitalize: {
+                type: Boolean,
+                default: false
+            }
         },
         data() {
             return {
@@ -69,12 +79,12 @@
         },
         computed: {
             generated() {
-                return this.page.body.toc.links
+                return this.page.body?.toc?.links ?? [];
             }
         },
         mounted() {
-            window.addEventListener('scroll', this.handleScroll);
             this.scrollToHash();
+            window.addEventListener('scroll', this.handleScroll);
         },
         beforeDestroy() {
             window.removeEventListener('scroll', this.handleScroll);
@@ -115,20 +125,20 @@
               }, 1000);
             },
             activateMenuItem(item, index, linkArray, removeActiveTab) {
-              if (item?.id && linkArray[index - 1]?.id) {
+              if (item?.id) {
                 const childrenLinkPosition = document.querySelector(`#${item.id}`)?.getBoundingClientRect();
-                const prevChildrenLinkPosition = index ? document.querySelector(`#${linkArray[index - 1].id}`)?.getBoundingClientRect().top : undefined;
-                if (childrenLinkPosition?.top <= 160  && childrenLinkPosition?.top > 0) {
-                  let activeTapItem = document.querySelector(`.right-menu a[name='${item.id}']`);
+                const prevChildrenLinkPosition = index > 0 ? document.querySelector(`#${linkArray[index - 1].id}`)?.getBoundingClientRect()?.top : undefined;
+                if (childrenLinkPosition?.top <= 160) {
+                  let activeTapItem = document.querySelector(`.right-menu a[href='#${item.id}']`);
                   if (!activeTapItem.classList.contains('active')) {
                     if ((prevChildrenLinkPosition <= 0 || prevChildrenLinkPosition === undefined)) {
                       removeActiveTab();
                       activeTapItem.classList.add('active');
+                      activeTapItem.scrollIntoView({block: "nearest", inline: "nearest"});
                     }
                   }
                 }
               }
-              return
             },
             scrollToHash() {
               const hash = this.$route.hash;
@@ -141,9 +151,8 @@
               const element = document.getElementById(id);
               this.$nextTick(() => {
                 if (element) {
-                  const offset = element?.getBoundingClientRect().top + window.scrollY;
                   setTimeout(() => {
-                    window.scrollTo({ top: offset - 70 });
+                    element.scrollIntoView({block: "nearest", inline: "nearest"});
                   }, 100);
                 } else {
                   setTimeout(() => {
@@ -219,6 +228,7 @@
             max-height: 60vh;
             overflow-x: hidden;
             position: relative;
+
             &::-webkit-scrollbar {
                 width: 4px;
                 height: 4px;
@@ -235,10 +245,13 @@
             &::-webkit-scrollbar-thumb:hover {
                 background: #370883;
             }
+
             @include font-size(.875rem);
+
             ul {
                 margin-bottom: 0;
                 list-style: none;
+
                 &:has(a.active) {
                     .table-content {
                         a {
@@ -249,6 +262,7 @@
                         }
                     }
                 }
+
                 li {
                     a {
                         border-left: 1px solid transparent;
@@ -259,7 +273,7 @@
 
                         @for $i from 2 through 6 {
                             &.depth-#{$i} {
-                                padding-left: calc(0.5rem * ($i - 2) +  2rem);
+                                padding-left: calc(0.5rem * ($i - 2) + 2rem);
                             }
                         }
 
@@ -308,6 +322,7 @@
         background: $black-4;
         color: var(--bs-gray-500);
         font-size: $font-size-sm;
+
         &.collapsed {
             border-radius: 8px 8px 0 0;
         }
@@ -326,6 +341,7 @@
         strong {
             margin-left: calc($spacer * 2);
         }
+
         @include media-breakpoint-down(lg) {
             nav {
                 padding-bottom: $spacer;
@@ -337,19 +353,23 @@
             display: block !important; // stylelint-disable-line declaration-no-important
         }
     }
+
     .bd-social-list, .bd-toc-collapse {
         @include media-breakpoint-down(lg) {
             border-top-width: 0 !important;
             border: 1px solid $black-6;
             border-radius: 0 0 8px 8px;
         }
+
         button:hover {
             color: $purple-36 !important;
         }
+
         ul, :deep(ul) {
             li {
                 a {
                     font-weight: 500;
+
                     &:hover {
                         color: $purple-36 !important;
                         border-left: 1px solid $purple-36 !important;