Remove file util, start on cardgroup

components/Base/Panel.vue

@@ -8,15 +8,13 @@ export interface CardGrayProps {
 	button?: Pick<BaseButtonProps, 'label' | 'href' | 'variant'>;
 }
 
-const props = defineProps<CardGrayProps>();
-
-const fileUrl = computed(() => getFileUrl(props.image));
+defineProps<CardGrayProps>();
 </script>
 
 <template>
 	<div class="base-panel">
 		<div class="base-panel-header">
-			<img :src="fileUrl" :alt="title" height="50" />
+			<BaseDirectusImage v-if="image" :uuid="image" :alt="title ?? ''" height="50" />
 
 			<div>
 				<BaseHeading v-if="title" size="medium" :content="title" />

components/Block/CardGroup.vue

@@ -9,9 +9,17 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_cardgroup', props.uuid, {
 			fields: [
-				'variant',
+				'direction',
+				'aspect_ratio',
 				{
-					cards: ['id', 'title', 'description', 'href', 'image'],
+					cards: [
+						'id',
+						'title',
+						'description',
+						'external_url',
+						'image',
+						{ page: ['permalink'], resource: ['type', 'slug'] },
+					],
 				},
 			],
 		})
@@ -20,14 +28,15 @@ const { data: block } = useAsyncData(props.uuid, () =>
 </script>
 
 <template>
-	<div v-if="block" :class="[`${block.variant}-group`, 'block-cardgroup']">
+	<div v-if="block" :class="[`direction-${block.direction}`, 'block-cardgroup']">
 		<BaseCard
 			v-for="card in block.cards"
 			:key="card.id"
 			:title="card.title ?? undefined"
 			:image="card.image ?? undefined"
 			:description="card.description"
-			:href="card.href ?? undefined"
+			:href="card.external_url ?? undefined"
+			:to="card.page?.permalink ?? resourcePermalink(card.resource) ?? undefined"
 		/>
 	</div>
 </template>

components/Block/Showcase.vue

@@ -95,8 +95,8 @@ onBeforeUnmount(() => {
 		<BaseFrame aspect="16-9" variant="frosted" color="white">
 			<div class="transition-group">
 				<template v-for="(item, itemIdx) in block.items" :key="item.id">
-					<div class="image-container" :class="{ 'is-active': selectedIdx === itemIdx }">
-						<img :src="getFileUrl(item.image?.id)" :alt="item.image?.description ?? undefined" />
+					<div v-if="item.image" class="image-container" :class="{ 'is-active': selectedIdx === itemIdx }">
+						<BaseDirectusImage :uuid="item.image?.id" :alt="item.image?.description ?? ''" />
 					</div>
 				</template>
 			</div>

components/Comp/Media.vue

@@ -19,14 +19,16 @@ const { data: comp } = useAsyncData(props.uuid, () =>
 		})
 	)
 );
-
-const imageUrl = computed(() => getFileUrl(unref(comp)?.image?.id));
 </script>
 
 <template>
 	<BaseFrame variant="frosted" color="white">
 		<BaseVideo v-if="comp?.type === 'video' && comp.video?.url" :url="comp.video.url" />
-		<img v-else-if="comp?.type === 'image' && comp.image" :src="imageUrl" :alt="comp.image.description ?? undefined" />
+		<BaseDirectusImage
+			v-else-if="comp?.type === 'image' && comp.image"
+			:uuid="comp.image.id"
+			:alt="comp.image.description ?? ''"
+		/>
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-else-if="comp?.type === 'embed'" v-html="comp.embed" />
 	</BaseFrame>

components/Comp/Quote.vue

@@ -16,10 +16,10 @@ const { data: comp } = useAsyncData(props.uuid, () =>
 
 <template>
 	<div v-if="comp" class="comp-quote">
-		<img class="company-logo" height="25" :src="getFileUrl(comp.company_logo)" />
+		<BaseDirectusImage class="company-logo" height="25" :uuid="comp.company_logo!" alt="" />
 		<BaseText v-if="comp.quote" :content="comp.quote" />
 		<div class="avatar">
-			<img width="64" height="64" :src="getFileUrl(comp.person_image)" />
+			<BaseDirectusImage width="64" height="64" :uuid="comp.person_image!" alt="" />
 			<div>
 				<p>{{ comp.person_name }}</p>
 				<p>{{ comp.person_title }}</p>

components/Nav/Header.vue

@@ -109,7 +109,7 @@ onClickOutside(headerContainer, resetNavState);
 						>
 							<li v-for="link in section.children" :key="link.id">
 								<NuxtLink :href="link.url ?? undefined" :to="(link.page as any)?.permalink" class="link">
-									<img v-if="link.image" :src="getFileUrl(link.image as any)" alt="" class="icon" lazy />
+									<BaseDirectusImage if="link.image" :uuid="(link.image as string)" alt="" class="icon" lazy />
 									<div class="content">
 										<div class="title">{{ link.title }}</div>
 										<div v-if="link.description" class="description">{{ link.description }}</div>

types/schema/blocks/block-cardgroup.ts

@@ -1,9 +1,10 @@
-import type { ComponentButton } from '../components';
+import type { Page, Resource } from '../content';
 import type { File } from '../system';
 
 export interface BlockCardGroup {
 	id: string;
-	variant: 'gray' | 'white' | 'resource';
+	direction: 'horizontal' | 'vertical' | null;
+	aspect_ratio: '1-1' | '16-9' | null;
 	cards: string[] | BlockCardGroupCards[] | null;
 }
 
@@ -14,7 +15,9 @@ export interface BlockCardGroupCards {
 	title: string;
 	description: string | null;
 	image_size: 'icon' | 'cover' | null;
-	image: File | null;
-	button: ComponentButton | null;
-	href: string | null;
+	image: string | File | null;
+	type: 'pages' | 'resources' | 'external' | null;
+	external_url: string | null;
+	page: string | Page | null;
+	resource: string | Resource | null;
 }

types/schema/content/resource.ts

@@ -1,19 +1,25 @@
-import type { Team } from '../routes/index.js';
-import type { User } from '../system/index.js';
-import type { Video } from './video.js';
+import type { Seo } from '../meta';
+import type { Team } from '../routes';
+import type { User } from '../system';
+import type { Article } from './article';
+import type { CaseStudy } from './case-study';
+import type { Video } from './video';
 
 export interface Resource {
 	id: string;
-	status: string;
-	sort: number | null;
-	user_created: string | User | null;
-	date_created: string | null;
+	sort: number;
+	user_created: string | User;
+	date_created: string;
 	user_updated: string | User | null;
 	date_updated: string | null;
-	video: string | Video | null;
-	type: string | null;
+	type: 'article' | 'video' | 'case_study';
+	status: 'published' | 'draft' | 'archived';
 	title: string | null;
-	date_published: string | null;
-	author: string | Team | null;
 	slug: string | null;
+	author: string | Team | null;
+	date_published: string | null;
+	video: string | Video | null;
+	article: string | Article | null;
+	case_study: string | CaseStudy | null;
+	seo: string | Seo | null;
 }

types/schema/schema.ts

@@ -21,7 +21,7 @@ import type {
 	ComponentMetrics,
 	ComponentQuote,
 } from './components/index.js';
-import type { Article, Career, CaseStudy, Form, Page, Report, SiteBanner, Video } from './content/index.js';
+import type { Article, Career, CaseStudy, Form, Page, Report, Resource, SiteBanner, Video } from './content/index.js';
 import type { Globals, Navigation, Redirect, Seo } from './meta/index.js';
 import type { ContentType, Event, Partner, Team } from './routes/index.js';
 import type { File, User } from './system/index.js';
@@ -41,6 +41,7 @@ export interface Schema {
 	case_studies: CaseStudy[];
 	forms: Form[];
 	reports: Report[];
+	resources: Resource[];
 	site_banners: SiteBanner[];
 	videos: Video[];
 

utils/resourcePermalink.ts

@@ -0,0 +1,7 @@
+export const resourcePermalink = (
+	resource?: { type: 'case_study' | 'article' | 'video' | null; slug: string | null } | null
+) => {
+	if (!resource || !resource.type || !resource.slug) return null;
+
+	return `/${resource.type}/${resource.slug}`;
+};