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]>

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}`));