feat: new plugins & subgroups homepages

closes #1503

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/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/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">
@@ -26,6 +26,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, {

components/plugins/PluginIndex.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="d-flex flex-column gap-4">
+        <slot v-if="description !== undefined" name="markdown" :content="description"/>
+        <!-- Root plugin page with subgroups -->
+        <template v-if="subGroup === undefined && plugins.length > 1">
+            <div class="d-flex flex-column">
+                <RowLink v-for="subGroupWrapper in subGroupsWrappers"
+                         :id="`group-${slugify(subGroupName(subGroupWrapper))}`"
+                         :iconB64Svg="'data:image/svg+xml;base64,' + icons[subGroupWrapper.subGroup]"
+                         :text="subGroupName(subGroupWrapper)"
+                         :href="subGroupHref(subGroupName(subGroupWrapper))"
+                         @click="$emit('goTo', {targetSubGroup: subGroupWrapper.subGroup})"
+                />
+            </div>
+        </template>
+        <template v-else>
+            <div class="d-flex flex-column elements-section" v-for="(elements, elementType) in elementsByType">
+                <h4 :id="`section-${slugify(elementType)}`">{{ elementType }}</h4>
+                <div class="d-flex flex-column">
+                    <RowLink v-for="element in elements"
+                             :id="slugify(element)"
+                             :iconB64Svg="'data:image/svg+xml;base64,' + icons[element]"
+                             :text="elementName(element)"
+                             :href="elementHref(element)"
+                             @click="$emit('goTo', {targetElement: element})"
+                    />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+    import RowLink from "./RowLink.vue";
+    import type {Plugin} from "~/utils/plugins";
+    import {isEntryAPluginElementPredicate, subGroupName} from "~/utils/plugins";
+    import {slugify} from "~/utils/url.js";
+
+    const props = defineProps<{
+        plugins: Plugin[],
+        pluginName: string,
+        subGroup?: string | undefined,
+        icons: Record<string, string>
+    }>();
+
+    const plugin = computed(() => props.plugins.find(p => props.subGroup === undefined ? true : (slugify(subGroupName(p)) === props.subGroup)));
+
+    const description = computed(() => plugin.value?.longDescription ?? plugin.value?.description);
+
+    const subGroupsWrappers = computed(() => {
+        return props.plugins
+            .filter(p => p.name.toLowerCase() === props.pluginName.toLowerCase() && p.subGroup !== undefined);
+    });
+
+    const elementName = (qualifiedName) => {
+        let split = qualifiedName.split(".");
+        return split?.[split.length - 1]?.capitalize();
+    }
+
+    const {path} = useRoute();
+
+    const subGroupHref = (targetSubGroup) => `${path}/${slugify(targetSubGroup)}`;
+
+    const elementHref = (element) => `${path}/${element}`;
+
+    const extractPluginElements: Record<string, string[]> = (plugin: Plugin) => {
+        return Object.fromEntries(
+            Object.entries(plugin).filter(([key, value]) => isEntryAPluginElementPredicate(key, value))
+                .map(([key, value]) => [key.replaceAll(/[A-Z]/g, match => ` ${match}`).capitalize(), value])
+        );
+    };
+
+    const elementsByType = computed(() => extractPluginElements(plugin.value));
+
+    defineEmits<{
+        goTo: [targetElement: string, targetSubGroup?: string]
+    }>()
+</script>

components/plugins/RowLink.vue

@@ -0,0 +1,20 @@
+<template>
+    <a :href="hrefWithDefault" class="row-link d-flex flex-grow-1 align-items-center gap-7 rounded">
+        <img :src="iconB64Svg" :alt="`${text} icon`"/>{{ text }}
+        <ChevronRight class="ms-auto"/>
+    </a>
+</template>
+<script setup lang="ts">
+    import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
+    import {slugify} from "~/utils/url";
+
+    const props = defineProps<{ iconB64Svg: string, text: string, href?: string | undefined }>();
+
+    const {path} = useRoute();
+    const hrefWithDefault = computed(() => props.href === undefined ? `${path}/${slugify(props.text)}` : props.href);
+</script>
+<style lang="scss" scoped>
+    .row-link {
+        border-width: 1px;
+    }
+</style>

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);

package.json

@@ -17,7 +17,7 @@
     "analyze": "nuxt analyze"
   },
   "dependencies": {
-    "@kestra-io/ui-libs": "^0.0.136",
+    "@kestra-io/ui-libs": "^0.0.137",
     "@popperjs/core": "^2.11.8",
     "@rive-app/canvas": "^2.26.1",
     "@vue-flow/background": "^1.3.2",