Features pages (#162)

* wip

* fix partner icon

* add groupby to composable

* directory component update

* features page updates

* types

* fixed groupnmae

* add features to prerender

* add thumbnail

* add muted bg

* left align feature pages

* more tweaks

* tweak color

---------

Co-authored-by: Alexandre Chopin <[email protected]>

Author: bryantgillespie

components/Base/Button.vue

@@ -10,6 +10,7 @@ export interface BaseButtonProps {
 	target?: '_blank' | '_self' | '_parent' | '_top';
 	outline?: boolean;
 	block?: boolean;
+	disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<BaseButtonProps>(), {
@@ -60,6 +61,9 @@ const { theme } = useTheme();
 			`color-${color}`,
 			`theme-${theme}`,
 			{ 'icon-only': isIconOnly, outline, 'size-block': block },
+			{
+				disabled,
+			},
 		]"
 		v-bind="buttonProps"
 	>
@@ -242,10 +246,15 @@ const { theme } = useTheme();
 }
 
 .size-x-large.icon-only {
-	padding: var(--space-2);
+	padding: var(--space-3);
 }
 
 .size-block {
 	width: 100%;
 }
+
+.disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
 </style>

components/Base/Icon.vue

@@ -65,6 +65,7 @@ const filledIcons = [
 	'monitoring',
 	'online_prediction',
 	'password',
+	'partner_exchange',
 	'post_add',
 	'public',
 	'published_with_changes',

components/Block/Directory.vue

@@ -10,7 +10,7 @@ const props = defineProps<BlockProps>();
 const { data: block } = await useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_directory', props.uuid, {
-			fields: ['style', 'grid', 'collection', 'filter', 'title_size'],
+			fields: ['style', 'grid', 'collection', 'filter', 'title_size', 'group_by'],
 		}),
 	),
 );
@@ -73,6 +73,19 @@ const dirConfig = computed(() => {
 				href: (item: Project) => `/built-with-directus/${item.slug}`,
 			},
 		};
+	} else if (context.collection === 'features') {
+		return {
+			searchFields: ['title', 'description'],
+			facetFields: ['module'],
+			fieldMapping: {
+				title: 'title',
+				image: 'thumbnail',
+				description: 'description',
+				href: (item: any) => `/features/${item.slug}`,
+				module: 'module',
+			},
+			groupBy: 'module',
+		};
 	}
 });
 
@@ -82,6 +95,7 @@ const { searchQuery, selectedFacets, facets, filteredItems, isFilterActive, clea
 	searchFields: unref(dirConfig)?.searchFields ?? [],
 	facetFields: unref(dirConfig)?.facetFields ?? [],
 	fieldMapping: unref(dirConfig)?.fieldMapping ?? undefined,
+	groupBy: unref(dirConfig)?.groupBy ?? undefined,
 });
 
 // Mobile filter state
@@ -130,23 +144,52 @@ const toggleFilter = () => {
 				</div>
 			</aside>
 			<main>
-				<BaseCardGroup v-auto-animate :grid="block.grid">
-					<BaseCard
-						v-for="card in filteredItems"
-						:key="card.title"
-						:title="card.title"
-						:image="card.image ?? undefined"
-						:media-style="block.style"
-						:description="card.description ?? undefined"
-						:description-avatar="card.avatar ?? undefined"
-						layout="vertical"
-						:to="card.href"
-						:badge="card.badge ?? undefined"
-						:title-size="block.title_size"
-					/>
-				</BaseCardGroup>
-
-				<p v-if="filteredItems?.length === 0">No items were found. Try changing the search criteria.</p>
+				<template v-if="Array.isArray(filteredItems)">
+					<BaseCardGroup v-auto-animate :grid="block.grid">
+						<BaseCard
+							v-for="card in filteredItems"
+							:key="card.title"
+							:title="card.title"
+							:image="card.image ?? undefined"
+							:media-style="block.style"
+							:description="card.description ?? undefined"
+							:description-avatar="card.avatar ?? undefined"
+							layout="vertical"
+							:to="card.href"
+							:badge="card.badge ?? undefined"
+							:title-size="block.title_size"
+						/>
+					</BaseCardGroup>
+				</template>
+				<template v-else>
+					<div v-for="(group, groupName) in filteredItems" :key="groupName" class="group-container">
+						<h2 v-if="groupName" class="group-title">{{ formatTitle(groupName as string) }}</h2>
+						<BaseCardGroup v-auto-animate :grid="block.grid">
+							<BaseCard
+								v-for="card in group"
+								:key="card.title"
+								:title="card.title"
+								:image="card.image ?? undefined"
+								:media-style="block.style"
+								:description="card.description ?? undefined"
+								:description-avatar="card.avatar ?? undefined"
+								layout="vertical"
+								:to="card.href"
+								:badge="card.badge ?? undefined"
+								:title-size="block.title_size"
+							/>
+						</BaseCardGroup>
+					</div>
+				</template>
+
+				<p
+					v-if="
+						(Array.isArray(filteredItems) && filteredItems.length === 0) ||
+						(!Array.isArray(filteredItems) && Object.keys(filteredItems).length === 0)
+					"
+				>
+					No items were found. Try changing the search criteria.
+				</p>
 				<!-- @TODO: Pagination -->
 			</main>
 		</div>
@@ -231,4 +274,15 @@ const toggleFilter = () => {
 		justify-self: end;
 	}
 }
+
+.group-container {
+	margin-bottom: var(--space-8);
+}
+
+.group-title {
+	font-size: var(--text-lg);
+	font-weight: var(--weight-bold);
+	margin-bottom: var(--space-4);
+	border-bottom: 1px solid var(--gray-200);
+}
 </style>

components/PageSection.vue

@@ -209,6 +209,10 @@ const { height: headerHeight } = useHeaderHeight();
 	background-size: cover;
 }
 
+.bg-colorful-muted {
+	background: linear-gradient(to bottom, #fe97dc15, #745eff15);
+}
+
 .bg-pristine-white + .bg-pristine-white-lines {
 	border-block-start: 1px solid var(--gray-200);
 }

composables/useDirectory.ts

@@ -19,12 +19,12 @@ interface UseDirectoryOptions {
 	searchFields: string[];
 	facetFields: string[];
 	fieldMapping?: FieldMapping | undefined;
+	groupBy?: string;
 }
 
-export function useDirectory({ items, searchFields, facetFields, fieldMapping = {} }: UseDirectoryOptions) {
+export function useDirectory({ items, searchFields, facetFields, fieldMapping = {}, groupBy }: UseDirectoryOptions) {
 	const route = useRoute();
 	const router = useRouter();
-
 	const searchQuery = ref('');
 	const selectedFacets = ref<Record<string, string[]>>(Object.fromEntries(facetFields.map((field) => [field, []])));
 
@@ -52,7 +52,6 @@ export function useDirectory({ items, searchFields, facetFields, fieldMapping =
 
 	const readFromURL = () => {
 		const { q, ...facetParams } = route.query;
-
 		searchQuery.value = (q as string) || '';
 
 		Object.keys(selectedFacets.value).forEach((field) => {
@@ -62,7 +61,6 @@ export function useDirectory({ items, searchFields, facetFields, fieldMapping =
 	};
 
 	readFromURL();
-
 	watch([searchQuery, selectedFacets], updateURL, { deep: true });
 
 	const facets = computed(() => {
@@ -115,16 +113,34 @@ export function useDirectory({ items, searchFields, facetFields, fieldMapping =
 		}, {} as DirectoryItem);
 	};
 
+	const groupItems = (items: DirectoryItem[]) => {
+		if (!groupBy) return items;
+
+		return items.reduce(
+			(acc, item) => {
+				const groupValue = item[groupBy];
+
+				if (!acc[groupValue]) {
+					acc[groupValue] = [];
+				}
+
+				acc[groupValue].push(item);
+				return acc;
+			},
+			{} as Record<string, DirectoryItem[]>,
+		);
+	};
+
 	const filteredItems = computed(() => {
 		let result = items;
-
 		result = filterItemsByFacets(result);
 
 		if (searchQuery.value) {
 			result = fuse.search(searchQuery.value).map((res) => res.item);
 		}
 
-		return result.map(applyFieldMapping);
+		const mappedResult = result.map(applyFieldMapping);
+		return groupBy ? groupItems(mappedResult) : mappedResult;
 	});
 
 	const isFilterActive = computed(() => {

modules/prerender.ts

@@ -57,6 +57,8 @@ export default defineNuxtModule({
 
 		const agencyPartners = await directus.request(readItems('agency_partners', { fields: ['slug'], limit: -1 }));
 
+		const features = await directus.request(readItems('features', { fields: ['slug'], limit: -1 }));
+
 		const shows = await directusTv.request(readItems('shows', { fields: ['slug'], limit: -1 }));
 
 		const episodes = await directusTv.request(
@@ -68,6 +70,7 @@ export default defineNuxtModule({
 		permalinks.push(...team.map((member) => `/team/${member.slug}`));
 		permalinks.push(...projects.map((project) => `/built-with-directus/${project.slug}`));
 		permalinks.push(...agencyPartners.map((partner) => `/agency-directory/${partner.slug}`));
+		permalinks.push(...features.map((feature) => `/features/${feature.slug}`));
 		permalinks.push(...shows.map((show) => `/tv/${show.slug}`));
 		permalinks.push(...episodes.map((ep) => `/tv/${ep.season.show.slug}/${ep.slug}`));