Skip to content

Commit

Permalink
Features pages (#162)
Browse files Browse the repository at this point in the history
* 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 <contact@alexchopin.com>
  • Loading branch information
bryantgillespie and alexchopin authored Sep 12, 2024
1 parent c785e27 commit 5e1efa3
Show file tree
Hide file tree
Showing 12 changed files with 337 additions and 27 deletions.
11 changes: 10 additions & 1 deletion components/Base/Button.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface BaseButtonProps {
target?: '_blank' | '_self' | '_parent' | '_top';
outline?: boolean;
block?: boolean;
disabled?: boolean;
}
const props = withDefaults(defineProps<BaseButtonProps>(), {
Expand Down Expand Up @@ -60,6 +61,9 @@ const { theme } = useTheme();
`color-${color}`,
`theme-${theme}`,
{ 'icon-only': isIconOnly, outline, 'size-block': block },
{
disabled,
},
]"
v-bind="buttonProps"
>
Expand Down Expand Up @@ -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>
1 change: 1 addition & 0 deletions components/Base/Icon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ const filledIcons = [
'monitoring',
'online_prediction',
'password',
'partner_exchange',
'post_add',
'public',
'published_with_changes',
Expand Down
90 changes: 72 additions & 18 deletions components/Block/Directory.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
}),
),
);
Expand Down Expand Up @@ -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',
};
}
});
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
4 changes: 4 additions & 0 deletions components/PageSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
28 changes: 22 additions & 6 deletions composables/useDirectory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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, []])));

Expand Down Expand Up @@ -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) => {
Expand All @@ -62,7 +61,6 @@ export function useDirectory({ items, searchFields, facetFields, fieldMapping =
};

readFromURL();

watch([searchQuery, selectedFacets], updateURL, { deep: true });

const facets = computed(() => {
Expand Down Expand Up @@ -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(() => {
Expand Down
3 changes: 3 additions & 0 deletions modules/prerender.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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}`));

Expand Down
Loading

0 comments on commit 5e1efa3

Please sign in to comment.