site: add filter type filter to the extensions page (#459)

Part of #370 and
#375

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

Author: nacx

website/src/components/ExtensionCard.astro

@@ -6,15 +6,16 @@ interface Props {
 	description: string;
 	href: string;
 	tags?: string[];
+	filterTypes?: string[];
 }
 
-const { name, type, categories, description, href, tags = [] } = Astro.props;
+const { name, type, categories, description, href, 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(',')}>
+	<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-badges">

website/src/components/Extensions.astro

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

website/src/pages/extensions.astro

@@ -17,6 +17,10 @@ const sortedTypes = [...new Set(extensions.map(ext => ext.type))]
 const sortedCategories = [...new Set(extensions.flatMap(ext => ext.categories))]
 	.sort((a, b) => a.localeCompare(b));
 
+// Collect unique filterTypes from extensions and sort alphabetically
+const sortedFilterTypes = [...new Set(extensions.flatMap(ext => ext.filterType))]
+	.sort((a, b) => a.localeCompare(b));
+
 // Helper function to format type names (snake_case to Title Case)
 function formatTypeName(type: string): string {
 	return type
@@ -69,6 +73,14 @@ function formatTypeName(type: string): string {
 								))}
 							</select>
 						</div>
+						<div class="filter-type-filter">
+							<select id="filter-type-filter" aria-label="Filter by filter type">
+								<option value="">All Filter Types</option>
+								{sortedFilterTypes.map(filterType => (
+									<option value={filterType}>{formatTypeName(filterType)}</option>
+								))}
+							</select>
+						</div>
 					</div>
 				</div>
 			</section>
@@ -87,6 +99,7 @@ function formatTypeName(type: string): string {
 											description={ext.description}
 											href={`/extensions/${ext.name}`}
 											tags={ext.tags}
+											filterTypes={ext.filterType}
 										/>
 									</div>
 								))}
@@ -114,13 +127,15 @@ function formatTypeName(type: string): string {
 			const searchInput = document.getElementById('search-input') as HTMLInputElement;
 			const typeFilter = document.getElementById('type-filter') as HTMLSelectElement;
 			const categoryFilter = document.getElementById('category-filter') as HTMLSelectElement;
+			const filterTypeFilter = document.getElementById('filter-type-filter') as HTMLSelectElement;
 			const extensionsGrid = document.getElementById('extensions-grid');
 			const noResults = document.getElementById('no-results');
 
 			function filterExtensions() {
 				const searchTerm = searchInput?.value.toLowerCase() || '';
 				const selectedType = typeFilter?.value || '';
 				const selectedCategory = categoryFilter?.value || '';
+				const selectedFilterType = filterTypeFilter?.value || '';
 
 				const cardWrappers = extensionsGrid?.querySelectorAll('[data-categories]');
 				let visibleCount = 0;
@@ -132,15 +147,17 @@ function formatTypeName(type: string): string {
 					const type = (card as HTMLElement)?.dataset.type || '';
 					const tags = (card as HTMLElement)?.dataset.tags?.toLowerCase() || '';
 					const categories = (wrapper as HTMLElement).dataset.categories?.split(',') || [];
+					const filterTypes = (card as HTMLElement)?.dataset.filterTypes?.split(',') || [];
 
 					const matchesSearch = searchTerm === '' ||
 						name.includes(searchTerm) ||
 						description.includes(searchTerm) ||
 						tags.includes(searchTerm);
 					const matchesType = selectedType === '' || type === selectedType;
 					const matchesCategory = selectedCategory === '' || categories.includes(selectedCategory);
+					const matchesFilterType = selectedFilterType === '' || filterTypes.includes(selectedFilterType);
 
-					if (matchesSearch && matchesType && matchesCategory) {
+					if (matchesSearch && matchesType && matchesCategory && matchesFilterType) {
 						(wrapper as HTMLElement).style.display = '';
 						visibleCount++;
 					} else {
@@ -164,6 +181,7 @@ function formatTypeName(type: string): string {
 			searchInput?.addEventListener('input', filterExtensions);
 			typeFilter?.addEventListener('change', filterExtensions);
 			categoryFilter?.addEventListener('change', filterExtensions);
+			filterTypeFilter?.addEventListener('change', filterExtensions);
 		</script>
 	</body>
 </html>

website/src/styles/extensions.css

@@ -23,8 +23,6 @@
 .filters {
 	display: flex;
 	gap: 16px;
-	max-width: 800px;
-	margin: 0 auto;
 }
 
 .search-box {
@@ -54,6 +52,7 @@
 }
 
 .type-filter select,
+.filter-type-filter select,
 .category-filter select {
 	padding: 14px 40px 14px 20px;
 	border: 2px solid var(--border);
@@ -72,13 +71,15 @@
 }
 
 .type-filter select:focus,
+.filter-type-filter select:focus,
 .category-filter select:focus {
 	outline: none;
 	border-color: var(--primary);
 	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
 }
 
 .type-filter select:hover,
+.filter-type-filter select:hover,
 .category-filter select:hover {
 	border-color: var(--primary-light);
 }
@@ -132,6 +133,7 @@
 	}
 
 	.type-filter select,
+	.filter-type-filter select,
 	.category-filter select {
 		width: 100%;
 		min-width: 0;

website/src/utils/extensions.ts

@@ -27,6 +27,7 @@ export interface Extension {
 	sourcePath: string;
 	sourceUrl: string;
 	configReferencePath?: string;
+	filterType: string[];
 }
 
 /**
@@ -44,4 +45,3 @@ export function loadExtensions(): Extension[] {
 		}))
 		.sort((a, b) => a.name.localeCompare(b.name));
 }
-