add the title description

Author: Piyush-r-bhaskar

src/components/misc/ElementCard.vue

@@ -7,6 +7,9 @@
                 </h6>
                 <ChevronRight />
             </div>
+            <div v-if="title">
+                <slot name="markdown" :content="title.replace(/ *:(?![ /])/g, ': ')" />
+            </div>
             <div class="plugin-info">
                 <code class="plugin-class">{{ pluginClass }}</code>
             </div>
@@ -25,6 +28,7 @@
         pluginClass: string
         href?: string | undefined
         isActive?: boolean
+        title?: string
     }>();
 
     const hrefWithDefault = computed(() => props.href === undefined 
@@ -111,5 +115,18 @@
                 display: block;
             }
         }
+
+        :deep(p) {
+            color: var(--ks-content-secondary);
+            font-size: 12px !important;
+            line-height: 1rem;
+            margin: 0;
+            margin-top: 0.5rem;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+            -webkit-box-orient: vertical;
+        }
     }
 </style>

src/components/plugins/PluginIndex.vue

@@ -38,9 +38,14 @@
                             :href="elementHref(element)"
                             :route-path="routePath"
                             :is-active="activeId === slugify(element)"
+                            :title="schemas?.[element]?.title"
                             class="h-100"
                             @click="$emit('goTo', {element})"
-                        />
+                        >
+                            <template #markdown="{content}">
+                                <slot name="markdown" :content="content" />
+                            </template>
+                        </ElementCard>
                     </div>
                 </div>
             </div>
@@ -90,7 +95,8 @@
         subGroup?: string | undefined,
         activeId?: string | undefined
         subgroupBlueprintCounts?: Record<string, number>,
-        metadataMap?: Record<string, PluginMetadata>
+        metadataMap?: Record<string, PluginMetadata>,
+        schemas?: Record<string, {title?: string}>
     }>();
 
     const getSubgroupMetadata = (subGroupWrapper: Plugin) => {