show bundle in extension catalog and ui

Signed-off-by: Ignasi Barrera <ignasi@tetrate.io>

Author: nacx

ui/compiled/bundle.js

@@ -1036,6 +1036,16 @@ a.ext-row-name:hover {
     text-underline-offset: 2px;
 }
 
+.ext-row-bundle {
+    font-size: 11px;
+    color: var(--text-light);
+    font-family: var(--font-mono);
+    margin-top: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .ext-row-desc {
     font-size: 12px;
     color: var(--text-muted);

ui/css/style.css

@@ -283,6 +283,9 @@
                 {:else}
                     <span class="ext-row-name">{displayLabel}</span>
                 {/if}
+                {#if ext.parent}
+                    <div class="ext-row-bundle">bundle: {ext.parent}</div>
+                {/if}
                 <div class="ext-row-desc">{ext.description}</div>
             </div>
 

ui/src/components/ExtensionRow.svelte

@@ -5,19 +5,23 @@ interface Props {
 	categories: string[];
 	description: string;
 	href: string;
+	parent?: string;
 	tags?: string[];
 	filterTypes?: string[];
 }
 
-const { name, type, categories, description, href, tags = [], filterTypes = [] } = Astro.props;
+const { name, type, categories, description, href, parent, tags = [], filterTypes = [] } = Astro.props;
 const sortedCategories = [...categories].sort((a, b) => a.localeCompare(b));
 const sortedTags = [...tags].sort((a, b) => a.localeCompare(b));
 ---
 
 <a href={href} class="extension-card-link">
 	<div class="extension-card" data-type={type} data-tags={tags.join(',')} data-filter-types={filterTypes.join(',')}>
 		<div class="extension-header">
-			<h3>{name}</h3>
+			<div class="extension-title">
+				<h3>{name}</h3>
+				{parent && <span class="extension-parent">bundle: {parent}</span>}
+			</div>
 			<div class="extension-badges">
 				{sortedCategories.map(category => (
 					<span class={`extension-badge extension-badge--${category.toLowerCase().replace(/\s+/g, '-')}`}>{category}</span>

website/src/components/ExtensionCard.astro

@@ -18,6 +18,7 @@ const featuredExtensions = loadExtensions().filter(ext => ext.featured === true)
 					categories={ext.categories}
 					description={ext.description}
 					href={`/extensions/${ext.name}`}
+					parent={ext.parent}
 					tags={ext.tags}
 					filterTypes={ext.filterType}
 				/>

website/src/components/Extensions.astro

@@ -98,6 +98,7 @@ function formatTypeName(type: string): string {
 											categories={ext.categories}
 											description={ext.description}
 											href={`/extensions/${ext.name}`}
+											parent={ext.parent}
 											tags={ext.tags}
 											filterTypes={ext.filterType}
 										/>

website/src/pages/extensions.astro

@@ -89,6 +89,12 @@ function formatTypeName(type: string): string {
 									<span class="meta-label">Version</span>
 									<span class="meta-value">{extension.version}</span>
 								</div>
+								{extension.parent && (
+									<div class="meta-item">
+										<span class="meta-label">Bundle</span>
+										<span class="meta-value">{extension.parent}</span>
+									</div>
+								)}
 								{(extension.minEnvoyVersion || extension.maxEnvoyVersion) && (
 									<div class="meta-item">
 										<span class="meta-label">Envoy Version</span>

website/src/pages/extensions/[name].astro

@@ -589,6 +589,14 @@ header nav a:focus {
 	font-family: 'Monaco', 'Menlo', monospace;
 }
 
+.extension-parent {
+	display: block;
+	font-size: 12px;
+	color: var(--text-light);
+	font-family: 'Monaco', 'Menlo', monospace;
+	margin-top: 2px;
+}
+
 .extension-badges {
 	display: flex;
 	gap: 4px;

website/src/styles/main.css

@@ -19,6 +19,7 @@ export interface Extension {
 	longDescription: string;
 	tags: string[];
 	license: string;
+	parent?: string;
 	featured?: boolean;
 	composerVersion?: string;
 	minEnvoyVersion?: string;