danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/dwaring87-webdev-wedding. Marissa & David's Wedding Website!
Get Details from CMS
author
David Waring
date
(Sep 29, 2022, 10:08 PM -0400)
commit
d79a3b9e
d79a3b9e5b5d11fe155bcacef80926e9d20bbe2a
parent
f464ffa8
f464ffa85603d1073c7e81f828f27a7aede184ea
+93
-15
+6
-3
app.vue
+6
-3
app.vue
···
1
-
<script setup lang="ts">
2
-
const BASE_TITLE: string = "Marissa & David";
1
+
<script setup>
2
+
const { getDetails } = useCMS();
3
+
const couple = await getDetails('couple');
4
+
5
+
const BASE_TITLE = couple;
3
6
useHead({
4
-
titleTemplate: function(title: string) {
7
+
titleTemplate: function(title) {
5
8
return title.includes(BASE_TITLE) ? title : title ? `${BASE_TITLE} - ${title}` : BASE_TITLE;
6
9
},
7
10
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
+9
-4
components/Home/Hero.vue
+9
-4
components/Home/Hero.vue
···
1
+
<script setup>
2
+
const { getDetails } = useCMS();
3
+
const details = await getDetails();
4
+
</script>
5
+
1
6
<template>
2
7
<div class="max-w-7xl mx-auto sm:my-12 sm:px-6 lg:px-8">
3
8
<div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
···
8
13
<br /><br /><br />
9
14
<div class="relative h-full px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
10
15
<h1 class="text-center text-4xl drop-shadow-lg font-extrabold sm:text-5xl lg:text-6xl">
11
-
<span class="block text-white py-2">Marissa & David</span>
12
-
<span class="block text-emerald-500 py-2">September 16th, 2023</span>
13
-
<span class="block text-white py-2">Silver Queen Farm</span>
14
-
<span class="block text-white py-2">Trumansburg, NY</span>
16
+
<span class="block text-white py-2">{{ details.couple }}</span>
17
+
<span class="block text-emerald-500 py-2">{{ details.date }}</span>
18
+
<span class="block text-white py-2">{{ details.venue_name }}</span>
19
+
<span class="block text-white py-2">{{ details.venue_town }}</span>
15
20
</h1>
16
21
</div>
17
22
<br /><br /><br />
+6
-1
components/Toolbar.vue
+6
-1
components/Toolbar.vue
···
1
+
<script setup>
2
+
const { getDetails } = useCMS();
3
+
const couple = await getDetails('couple');
4
+
</script>
5
+
1
6
<template>
2
7
<nav class="bg-emerald-800 text-gray-200">
3
8
<div class="container">
4
9
<div class="h-14 flex justify-between items-center">
5
10
<div class="flex items-center font-bold opacity-80 hover:opacity-100">
6
-
<NuxtLink to="/">Marissa & David</NuxtLink>
11
+
<NuxtLink to="/">{{ couple }}</NuxtLink>
7
12
</div>
8
13
</div>
9
14
</div>
+57
composables/useCMS.ts
+57
composables/useCMS.ts
···
1
+
export const useCMS = () => {
2
+
const { getItems, getSingletonItem } = useDirectusItems();
3
+
const { getFiles, getThumbnail } = useDirectusFiles();
4
+
5
+
/**
6
+
* Get the key/value pairs of the requested details
7
+
* @param keys The array of keys to get (return all details, if not defined)
8
+
* @returns The value
9
+
*/
10
+
const getDetails = async (keys?: string|string[]): Promise<string|Details> => {
11
+
keys = typeof keys === 'string' ? [keys] : keys;
12
+
const properties: Detail[] = await getItems({
13
+
collection: 'details',
14
+
params: {
15
+
fields: ['key', 'value'],
16
+
filter: {
17
+
key: keys ? { "_in": keys } : undefined
18
+
}
19
+
}
20
+
});
21
+
22
+
if ( properties && properties.length === 1 ) {
23
+
return properties[0].value;
24
+
}
25
+
if ( properties && properties.length > 1 ) {
26
+
let rtn: Details = {};
27
+
properties.forEach((prop) => {
28
+
rtn[prop.key] = prop.value;
29
+
});
30
+
return rtn;
31
+
}
32
+
else {
33
+
return {};
34
+
}
35
+
}
36
+
37
+
38
+
return {
39
+
getDetails
40
+
}
41
+
}
42
+
43
+
44
+
/**
45
+
* A key/value pair from the Details collection
46
+
*/
47
+
type Detail = {
48
+
key: string,
49
+
value: string
50
+
}
51
+
52
+
/**
53
+
* A collection of Details (key/value pairs)
54
+
*/
55
+
type Details = {
56
+
[key: Detail["key"]]: Detail["value"];
57
+
}