Page Builder > Full Width Media (#25)

* Merge branch 'types/schema-1.0' into nuxt/pageblocks

* update fields and types

* delete sample block

* page and block base components

* catch all route

* Add types to Directus SDK

* base css

* file url utility composable

* media full width

* Remove reset

* Move file url helper to util function

* Create shared block types

* Render first real block

* Update schema to include block type

* Don't require title prop in Video

* Remove empty dummy component

* Fetch block content in block itself

* Render block by type

---------

Co-authored-by: rijkvanzanten <[email protected]>

components/Base/Video.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 export interface BaseVideoProps {
 	/**
-	 * The title of the video.
+	 * The url of the video.
 	 */
-	title: string;
+	url: string;
 
 	/**
-	 * The url of the video.
+	 * The title of the video.
 	 */
-	url: string;
+	title?: string;
 }
 
 const props = defineProps<BaseVideoProps>();

components/Block/MediaFullWidth.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { readItem } from '@directus/sdk';
+import type { BlockProps } from './types';
+
+const { $directus } = useNuxtApp();
+
+const props = defineProps<BlockProps>();
+
+const { data: block } = useAsyncData(() =>
+	$directus.request(
+		readItem('block_media_fullwidth', props.uuid, {
+			fields: ['type', 'embed', { video: ['url'] }, { image: ['id', 'title'] }],
+		})
+	)
+);
+
+const imgSrc = computed(() => {
+	if (unref(block)?.type !== 'image') return null;
+	return getFileUrl(unref(block)!.image.id);
+});
+</script>
+
+<template>
+	<BaseFrame v-if="block" aspect="16-9" variant="frosted" color="white">
+		<BaseVideo v-if="block.type === 'video' && block.video" :url="block.video.url!" />
+		<img v-else-if="block.type === 'image' && block.image" :src="imgSrc!" :alt="block.image.title" />
+		<div v-else-if="block.type === 'embed' && block.embed" v-html="block.embed" />
+	</BaseFrame>
+</template>
+
+<style scoped></style>

components/Block/types.ts

@@ -0,0 +1,3 @@
+export interface BlockProps {
+	uuid: string;
+}

components/PageBuilder.vue

@@ -20,14 +20,14 @@ export interface PageBuilderSectionBlock {
 defineProps<PageBuilderProps>();
 
 const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
-	block_hero_form: resolveComponent('BlockHeroForm'),
+	block_hero_form: 'div',
 	block_cardgroup: 'div',
 	block_columns: 'div',
 	block_featuregrid: 'div',
 	block_hero_headline: 'div',
 	block_hero_rotator: 'div',
 	block_logocloud: 'div',
-	block_media_fullwidth: 'div',
+	block_media_fullwidth: resolveComponent('BlockMediaFullWidth'),
 	block_pageheader: 'div',
 	block_separator: 'div',
 	block_showcase: 'div',
@@ -38,7 +38,7 @@ const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
 	<div class="content">
 		<PageSection v-for="section in sections" :key="section.id" :background="section.background">
 			<BlockContainer v-for="block in section.blocks" :key="block.id">
-				<component :is="components[block.collection]" :id="block.item" />
+				<component :is="components[block.collection]" :uuid="block.item" />
 			</BlockContainer>
 		</PageSection>
 	</div>

pages/[...permalink].vue

@@ -10,7 +10,6 @@ const pageFilter = computed(() => {
 });
 
 const { data: page } = await useAsyncData(
-	path,
 	() => {
 		return $directus.request(
 			readItems('pages', {

types/schema/content/page/block/block-media-full-width.ts

@@ -1,3 +1,4 @@
+import type { File } from '../../../system/file.js';
 import type { Video } from '../../video.js';
 
 export interface BlockMediaFullWidth {

types/schema/schema.ts

@@ -1,4 +1,14 @@
-import type { Article, Career, CaseStudy, Form, Page, Report, SiteBanner, Video } from './content/index.js';
+import type {
+	Article,
+	BlockMediaFullWidth,
+	Career,
+	CaseStudy,
+	Form,
+	Page,
+	Report,
+	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';
@@ -21,6 +31,9 @@ export interface Schema {
 	reports: Report[];
 	case_studies: CaseStudy[];
 
+	// Blocks
+	block_media_fullwidth: BlockMediaFullWidth[];
+
 	// Meta
 	navigation: Navigation[];
 	globals: Globals;

utils/getFileUrl.ts

@@ -0,0 +1,11 @@
+import { File } from '~/types/schema';
+
+export const getFileUrl = (fileId: string | File | null | undefined) => {
+	const config = useRuntimeConfig();
+
+	if (typeof fileId === 'object') {
+		fileId = fileId?.id;
+	}
+
+	return `${config.public.directusUrl}/assets/${fileId}?token=${config.public.directusToken}`; /* TODO Drop the token when we make assets public. */
+};