add dynamic cta for feature page

Author: bryantgillespie

pages/features/[slug].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { $directus, $readItems } = useNuxtApp();
+const { $directus, $readItems, $readSingleton } = useNuxtApp();
 const { params } = useRoute();
 const router = useRouter();
 
@@ -37,6 +37,14 @@ const { data: allFeatures } = await useAsyncData(
 	},
 );
 
+const { data: footerCta } = useAsyncData('features-footer-cta', () =>
+	$directus.request(
+		$readSingleton('globals', {
+			fields: ['features_page_cta'],
+		}),
+	),
+);
+
 const pagination = computed(() => {
 	if (!unref(feature) || !unref(allFeatures)) return {};
 	const currentIndex = unref(allFeatures)?.findIndex((f) => f.sort === unref(feature)?.sort);
@@ -133,8 +141,8 @@ onMounted(() => {
 					/>
 				</div>
 			</div>
-			<div class="block-container narrow mt-16 pb-16">
-				<BlockPaper uuid="8ce2ec0c-b939-4cb1-b4dc-8366618b9625" />
+			<div v-if="footerCta?.features_page_cta" class="block-container narrow mt-16 pb-16">
+				<BlockPaper :uuid="footerCta?.features_page_cta as string" />
 			</div>
 		</BaseContainer>
 	</PageSection>

types/schema/meta/globals.ts

@@ -1,5 +1,6 @@
 import type { BlockButtonGroup } from '../blocks/block-button-group.js';
 import type { BlockForm } from '../blocks';
+import type { BlockPaper } from '../blocks/block-paper.js';
 import type { User } from '../system/index.js';
 
 export interface Globals {
@@ -21,4 +22,6 @@ export interface Globals {
 	resource_sidebar_cta_header: string | null;
 	resource_sidebar_cta_description: string | null;
 	resource_sidebar_cta_form: string | BlockForm | null;
+	// Features Page CTA
+	features_page_cta: string | BlockPaper | null;
 }