Page Builder > Hero Headline Block (#24)

* 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

* hero headline

* Improve types structure

* Add path as key for async data

* Cleanup components

* Fix type error

* Use margin-inline instead of left/right

---------

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

components/Base/ButtonGroup.vue

@@ -0,0 +1 @@
+<template><slot /></template>

components/Block/HeroHeadline.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { readItem } from '@directus/sdk';
+import { BlockProps } from './types';
+
+const { $directus } = useNuxtApp();
+
+const props = defineProps<BlockProps>();
+
+const { data: block } = useAsyncData(() =>
+	$directus.request(
+		readItem('block_hero_headline', props.uuid, {
+			fields: ['heading', 'subheading', { button_group: [{ buttons: ['page', 'external_url', 'variant', 'label'] }] }],
+		})
+	)
+);
+</script>
+
+<template>
+	<div v-if="block" class="hero-headline">
+		<BaseHeading size="title" align="center" :content="block.heading" />
+		<BaseText align="center" :content="block.subheading" />
+		<BaseButtonGroup class="buttons">
+			<BaseButton
+				v-for="(button, idx) in block.button_group?.buttons"
+				:key="idx"
+				:href="button.page ?? button.external_url ?? undefined"
+				:variant="button.variant"
+			>
+				{{ button.label }}
+			</BaseButton>
+		</BaseButtonGroup>
+	</div>
+</template>
+
+<style scoped>
+.hero-headline {
+	padding-top: var(--space-12);
+	padding-bottom: var(--space-12);
+	max-width: 64rem;
+	margin-inline: auto;
+}
+
+.hero-headline > * + * {
+	margin-top: var(--space-8);
+}
+
+.hero-headline .base-text {
+	margin-inline: auto;
+	max-width: 48rem;
+}
+
+.buttons {
+	width: 100%;
+	margin-inline: auto;
+	display: flex;
+	justify-content: center;
+}
+</style>

components/PageBuilder.vue

@@ -20,11 +20,11 @@ export interface PageSectionBlock {
 defineProps<PageBuilderProps>();
 
 const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
-	block_hero_form: 'div',
 	block_cardgroup: resolveComponent('BlockCardGroup'),
 	block_columns: 'div',
 	block_featuregrid: 'div',
-	block_hero_headline: 'div',
+	block_hero_form: 'div',
+	block_hero_headline: resolveComponent('BlockHeroHeadline'),
 	block_hero_rotator: 'div',
 	block_logocloud: 'div',
 	block_media_fullwidth: resolveComponent('BlockMediaFullWidth'),

pages/[...permalink].vue

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

types/schema/content/page/block/block-cardgroup.ts → types/schema/blocks/block-cardgroup.ts

@@ -1,5 +1,5 @@
-import type { File } from '../../../system';
-import type { ComponentButton } from '../component';
+import type { File } from '../system';
+import type { ComponentButton } from '../components';
 
 export interface BlockCardGroup {
 	id: string;

types/schema/content/page/block/block-hero-form.ts → types/schema/blocks/block-hero-form.ts

@@ -1,4 +1,4 @@
-import type { Form } from '../../form.js';
+import type { Form } from '../content/form.js';
 
 export interface BlockHeroForm {
 	id: string;

types/schema/content/page/block/block-hero-headline.ts → types/schema/blocks/block-hero-headline.ts

@@ -1,4 +1,4 @@
-import type { ComponentButtonGroup } from '../component/index.js';
+import type { ComponentButtonGroup } from '../components/index.js';
 
 export interface BlockHeroHeadline {
 	id: string;

types/schema/content/page/block/block-logo-cloud.ts → types/schema/blocks/block-logo-cloud.ts

@@ -1,4 +1,4 @@
-import type { File } from '../../../system/index.js';
+import type { File } from '../system/index.js';
 
 export interface BlockLogoCloud {
 	id: string;

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

@@ -1,5 +1,5 @@
-import type { File } from '../../../system/file.js';
-import type { Video } from '../../video.js';
+import type { File } from '../system/file.js';
+import type { Video } from '../content/video.js';
 
 export interface BlockMediaFullWidth {
 	id: string;

types/schema/content/page/block/block-page-header.ts → types/schema/blocks/block-page-header.ts

@@ -1,4 +1,4 @@
-import { ComponentButtonGroup } from '../component/index.js';
+import { ComponentButtonGroup } from '../components/index.js';
 
 export interface BlockPageHeader {
 	id: string;

types/schema/content/page/block/block-showcase.ts → types/schema/blocks/block-showcase.ts

@@ -1,4 +1,4 @@
-import type { Video } from '../../video.js';
+import type { Video } from '../content/video.js';
 
 export interface BlockShowcase {
 	id: string;

types/schema/content/page/component/component-button.ts → types/schema/components/component-button.ts

@@ -1,12 +1,12 @@
-import type { Resource } from '../../resource.js';
-import type { Page } from '../page.js';
+import type { Page } from '../content/page/page.js';
+import type { Resource } from '../content/resource.js';
 import type { ComponentButtonGroup } from './component-button-group.js';
 
 export interface ComponentButton {
 	id: string;
 	sort: number | null;
 	label: string | null;
-	variant: string;
+	variant: 'solid' | 'frosted' | 'gradient';
 	button_group: string | ComponentButtonGroup | null;
 	page: string | Page | null;
 	type: string | null;

types/schema/content/page/component/component-media.ts → types/schema/components/component-media.ts

@@ -1,5 +1,5 @@
-import type { File } from '../../../system/index.js';
-import type { Video } from '../../video.js';
+import type { File } from '../system/index.js';
+import type { Video } from '../content/video.js';
 
 export interface CompMedia {
 	id: string;

types/schema/content/page/component/component-quote.ts → types/schema/components/component-quote.ts

@@ -1,4 +1,4 @@
-import type { File } from '../../../system/index.js';
+import type { File } from '../system/index.js';
 
 export interface CompQuote {
 	id: string;

types/schema/content/page/index.ts

@@ -1,5 +1,3 @@
-export type * from './block/index.js';
-export type * from './component/index.js';
 export type * from './page-section-block.js';
 export type * from './page-section.js';
 export type * from './page.js';

types/schema/content/page/page-section-block.ts

@@ -1,4 +1,4 @@
-import type { Block } from './block/index.js';
+import type { Block } from '../../blocks/index.js';
 import type { PageSection } from './page-section.js';
 
 export type BlockType =

types/schema/index.ts

@@ -1,3 +1,5 @@
+export type * from './blocks/index.js';
+export type * from './components/index.js';
 export type * from './content/index.js';
 export type * from './meta/index.js';
 export type * from './routes/index.js';

types/schema/schema.ts

@@ -1,16 +1,6 @@
-import type {
-	Article,
-	BlockCardGroup,
-	BlockMediaFullWidth,
-	Career,
-	CaseStudy,
-	ComponentButton,
-	Form,
-	Page,
-	Report,
-	SiteBanner,
-	Video,
-} from './content/index.js';
+import type { BlockCardGroup, BlockHeroHeadline, BlockMediaFullWidth } from './blocks/index.js';
+import type { ComponentButton, ComponentButtonGroup } from './components/index.js';
+import type { Article, 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';
@@ -36,9 +26,11 @@ export interface Schema {
 	// Blocks
 	block_media_fullwidth: BlockMediaFullWidth[];
 	block_cardgroup: BlockCardGroup[];
+	block_hero_headline: BlockHeroHeadline[];
 
 	// Components
 	comp_button: ComponentButton[];
+	comp_button_groups: ComponentButtonGroup[];
 
 	// Meta
 	navigation: Navigation[];