feat: new plugins & subgroups homepages

closes #1503
kestra-io · Feb 19, 2025 · e97664e · e97664e
1 parent 5290762
commit e97664e
Show file tree

Hide file tree

Showing 17 changed files with 481 additions and 408 deletions.
diff --git a/app.vue b/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",

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -2,10 +2,7 @@
 
 html {
     height: 100%;
-}
-
-* {
-    scroll-margin-top: var(--top-bar-height);
+    scroll-padding-top: var(--top-bar-height);
 }
 
 body {

diff --git a/assets/styles/docs.scss b/assets/styles/docs.scss
@@ -84,6 +84,7 @@ $bd-gutter-x: 3rem;
 
     h4 {
         padding-top: 1rem;
+        color: $white;
         font-size: $h5-font-size;
     }
 

diff --git a/assets/styles/theme.scss b/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;

diff --git a/components/blueprints/ListCard.vue b/components/blueprints/ListCard.vue
@@ -20,10 +20,6 @@
     </NuxtLink>
 </template>
 
-<script setup>
-    import {slugify} from "~/utils/url.js";
-</script>
-
 <script>
     export default {
         props: {

diff --git a/components/docs/NavToc.vue b/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" :href="`#${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" :href="`#${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,8 +57,6 @@
 <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>
@@ -58,6 +66,10 @@
                 type: Object,
                 required: true
             },
+            capitalize: {
+                type: Boolean,
+                default: false
+            }
         },
         data() {
             return {
@@ -216,6 +228,7 @@
             max-height: 60vh;
             overflow-x: hidden;
             position: relative;
+
             &::-webkit-scrollbar {
                 width: 4px;
                 height: 4px;
@@ -232,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 {
@@ -246,6 +262,7 @@
                         }
                     }
                 }
+
                 li {
                     a {
                         border-left: 1px solid transparent;
@@ -256,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);
                             }
                         }
 
@@ -305,6 +322,7 @@
         background: $black-4;
         color: var(--bs-gray-500);
         font-size: $font-size-sm;
+
         &.collapsed {
             border-radius: 8px 8px 0 0;
         }
@@ -323,6 +341,7 @@
         strong {
             margin-left: calc($spacer * 2);
         }
+
         @include media-breakpoint-down(lg) {
             nav {
                 padding-bottom: $spacer;
@@ -334,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;

diff --git a/components/plugins/PluginCard.vue b/components/plugins/PluginCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <NuxtLink :href="`/plugins/${plugin.name}`">
+    <NuxtLink :href="href">
         <div class="plugin d-flex align-items-center gap-2 bg-dark-2" ref="root" data-bs-toogle="tooltip"
              data-bs-html="true" data-bs-custom-class="plugin-tooltip" :data-bs-original-title="plugin.tooltipContent">
             <div class="icon-content">
@@ -12,7 +12,9 @@
     </NuxtLink>
 </template>
 <script setup>
-    const {$bootstrap} = useNuxtApp()
+    import {slugify} from "@kestra-io/ui-libs"
+
+    const {$bootstrap} = useNuxtApp();
     const props = defineProps({
         plugin: {
             type: Object,
@@ -26,6 +28,8 @@
 
     const root = ref(null);
 
+    const href = `/plugins/${props.plugin.name}${props.plugin.subGroup === undefined ? '' : ('/' + slugify(props.plugin.title))}`
+
     onMounted(() => {
       if (process.client) {
         new $bootstrap.Tooltip(root.value, {

diff --git a/components/stories/Card.vue b/components/stories/Card.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-    import {slugify} from "~/utils/url.js";
+    import {slugify} from "@kestra-io/ui-libs";
 
     defineProps({
         story: {

diff --git a/components/stories/RowCard.vue b/components/stories/RowCard.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script setup>
-    import {slugify} from "~/utils/url.js";
+    import {slugify} from "@kestra-io/ui-libs";
 
     const props = defineProps({
         story: {

diff --git a/middleware/redirect.global.js b/middleware/redirect.global.js
@@ -8,8 +8,8 @@ export default function ({ route, redirect }) {
 
     plugins.forEach(plugin => {
         plugin.taskRunners.forEach(taskRunner => {
-            const standardPath = `/plugins/plugin-${plugin.base}/task-runners/io.kestra.plugin.${plugin.base}.runner.${taskRunner}`;
-            const eePath = `/plugins/plugin-ee-${plugin.base}/task-runners/io.kestra.plugin.ee.${plugin.base}.runner.${taskRunner}`;
+            const standardPath = `/plugins/plugin-${plugin.base}/io.kestra.plugin.${plugin.base}.runner.${taskRunner}`;
+            const eePath = `/plugins/plugin-ee-${plugin.base}/io.kestra.plugin.ee.${plugin.base}.runner.${taskRunner}`;
 
             if (route?.path === standardPath) {
                 return redirect(eePath);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "analyze": "nuxt analyze"
   },
   "dependencies": {
-    "@kestra-io/ui-libs": "^0.0.136",
+    "@kestra-io/ui-libs": "^0.0.142",
     "@popperjs/core": "^2.11.8",
     "@rive-app/canvas": "^2.26.1",
     "@vue-flow/background": "^1.3.2",
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,10 +2,7 @@ @@
     html {
         height: 100%;
-    }
-    * {
-        scroll-margin-top: var(--top-bar-height);
+        scroll-padding-top: var(--top-bar-height);
     }
     body {
@@ Expand Down @@