post template types

directus-labs · Oct 21, 2023 · 4d9654b · 4d9654b
1 parent 0e9b0d5
commit 4d9654b
Show file tree

Hide file tree

Showing 7 changed files with 485 additions and 146 deletions.
diff --git a/components/post/PostBlog.vue b/components/post/PostBlog.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+export interface PostBlogProps {
+	page: any;
+}
+
+defineProps<PostBlogProps>();
+</script>
+<template>
+	<BlockContainer>
+		<header>
+			<div class="md:flex">
+				<!-- Post Image -->
+				<div class="relative w-full max-w-3xl">
+					<div
+						class="relative w-full mx-auto rounded-xl overflow-hidden bg-cover h-[300px] md:h-[450px] dark:outline-gray-800"
+					>
+						<NuxtImg :src="page?.image" class="object-cover w-full h-full saturate-0 dark:brightness-90" alt="" />
+						<div class="absolute inset-0 mix-blend-multiply bg-gradient-to-b from-gray-100 to-gray-900" />
+					</div>
+				</div>
+
+				<!-- Post Meta -->
+				<div class="hidden p-8 mt-12 space-y-6 md:block">
+					<NuxtLink
+						v-if="page?.category"
+						:href="`/posts/categories/${page?.category.slug}`"
+						class="inline-block hover:opacity-90"
+					>
+						<Category size="lg" :color="page?.category.color">{{ page?.category.title }}</Category>
+					</NuxtLink>
+					<Author v-if="page?.author" v-bind="page?.author" />
+					<div class="space-y-2">
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:timer-outline-rounded" class="w-6 h-6 mr-2" />
+							{{ calculateReadTime(page?.content) }}
+						</p>
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:calendar-today-rounded" class="w-6 h-6 mr-2" />
+							{{ getRelativeTime(page?.date_published) }}
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- Title Container -->
+			<div
+				class="relative w-full max-w-4xl p-2 px-8 py-8 mx-auto -mt-12 overflow-hidden text-gray-900 border md:-mt-32 rounded-xl border-primary md:px-16 md:py-12"
+			>
+				<div
+					class="absolute inset-0 bg-gradient-to-br from-white via-gray-300 to-primary dark:from-gray-700 dark:via-gray-900 dark:to-primary/50"
+				/>
+				<div class="absolute inset-0 opacity-50 grain-bg dark:opacity-10" />
+				<div class="relative">
+					<TypographyHeadline :content="page?.title" as="h1" size="lg" />
+					<TypographyProse :content="page?.summary" class="mt-2" />
+				</div>
+			</div>
+
+			<div class="block px-6 mt-6 md:hidden">
+				<Author v-if="page?.author" v-bind="page?.author" />
+				<div class="flex justify-between pb-4 mt-4 border-b dark:border-gray-700">
+					<div class="space-y-2">
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:timer-outline-rounded" class="w-6 h-6 mr-2" />
+							{{ calculateReadTime(page?.content) }}
+						</p>
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:calendar-today-rounded" class="w-6 h-6 mr-2" />
+							{{ getRelativeTime(page?.date_published) }}
+						</p>
+					</div>
+					<NuxtLink
+						v-if="page?.category"
+						:href="`/posts/categories/${page?.category.slug}`"
+						class="inline-block hover:opacity-90"
+					>
+						<Category size="lg" :color="page?.category.color">{{ page?.category.title }}</Category>
+					</NuxtLink>
+				</div>
+			</div>
+		</header>
+
+		<!-- Article -->
+		<main class="w-full max-w-4xl mx-auto mt-12">
+			<TypographyProse ref="article" :content="page?.content" />
+		</main>
+	</BlockContainer>
+</template>
diff --git a/components/post/PostCard.vue b/components/post/PostCard.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { Post } from '~~/types';
+
+withDefaults(
+	defineProps<{
+		post: Post;
+		direction: 'horizontal' | 'vertical';
+	}>(),
+	{
+		direction: 'vertical',
+	},
+);
+
+const iconMap = {
+	blog: 'material-symbols:article-outline-rounded',
+	video: 'material-symbols:video-library-outline-rounded',
+	project: 'material-symbols:trophy-outline-rounded',
+};
+</script>
+<template>
+	<figure
+		:class="[
+			{
+				'flex-col': direction === 'vertical',
+				'flex-col md:flex-row': direction === 'horizontal',
+			},
+			'flex group gap-6',
+		]"
+	>
+		<NuxtLink
+			:class="[
+				{
+					'w-full h-56': direction === 'vertical',
+					'w-full h-56 md:w-72 md:h-72': direction === 'horizontal',
+				},
+				'relative block overflow-hidden border dark:border-gray-700 group rounded-card flex-shrink-0',
+			]"
+			:href="`/posts/${post.slug}`"
+		>
+			<NuxtImg
+				class="relative flex-shrink-0 object-cover w-full h-full transition duration-300 saturate-0 group-hover:opacity-75"
+				:src="post.image ?? 'https://source.unsplash.com/random/800x800?sig=' + post.id"
+				alt=""
+			/>
+			<div
+				class="absolute inset-0 transition-opacity duration-300 opacity-0 bg-gradient-to-br from-transparent via-transparent to-primary group-hover:opacity-100"
+			/>
+			<Category v-if="post.category" size="lg" :color="post.category.color" class="absolute bottom-0 left-0 mb-4 ml-4">
+				{{ post.category.title }}
+			</Category>
+			<div v-if="post.type" class="absolute top-0 right-0 p-1.5 mt-4 mr-4 rounded-button bg-gray-900/50">
+				<UIcon :name="iconMap[post.type ?? 'blog']" class="w-6 h-6 text-white" />
+			</div>
+		</NuxtLink>
+
+		<div class="flex flex-col justify-between h-full gap-3">
+			<NuxtLink class="space-y-4" :href="`/posts/${post.slug}`">
+				<TypographyHeadline :content="post.title" class="group-hover:text-primary" size="xs" as="h3" />
+				<VText text-color="light" class="line-clamp-2">
+					{{ post?.summary }}
+				</VText>
+			</NuxtLink>
+
+			<Author v-if="post?.author" size="sm" v-bind="post?.author" />
+		</div>
+	</figure>
+</template>
diff --git a/components/post/PostProject.vue b/components/post/PostProject.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { BlockGalleryFile } from '~/types';
+
+export interface PostProjectProps {
+	page: any;
+}
+
+const props = defineProps<PostProjectProps>();
+
+const galleryItems = computed(() => {
+	if (!props.page) return;
+	return unref(props.page)?.gallery.map((item: BlockGalleryFile) => {
+		return item.directus_files_id;
+	});
+});
+</script>
+<template>
+	<div class="py-12">
+		<header class="relative h-[400px] overflow-hidden flex justify-center items-center">
+			<NuxtImg class="absolute inset-0 object-cover w-full h-full" :src="page?.image" />
+			<div class="absolute inset-0 bg-gray-900 opacity-75" />
+			<div class="relative max-w-3xl p-8 mx-auto overflow-hidden bg-gray-900 bg-opacity-50 rounded-xl">
+				<TypographyHeadline :content="page?.title" class="text-white" size="xl" />
+				<TypographyProse :content="page?.summary" class="text-white" />
+			</div>
+		</header>
+
+		<BlockContainer class="md:flex">
+			<!-- Main -->
+			<main class="p-4">
+				<article class="w-full">
+					<TypographyProse ref="article" :content="page?.content" />
+				</article>
+				<!-- Optional Image Gallery -->
+				<VGallery v-if="galleryItems && galleryItems.length > 0" :items="galleryItems" />
+			</main>
+			<!-- Project Metadata -->
+			<aside class="md:w-[300px] flex-shrink-0">
+				<div class="p-4 space-y-8 border-2 dark:border-gray-700 rounded-xl">
+					<div>
+						<TypographyTitle>Client</TypographyTitle>
+						<p class="font-bold dark:text-white">
+							{{ page?.client }}
+						</p>
+					</div>
+					<div>
+						<TypographyTitle>Built With</TypographyTitle>
+						<div v-for="(item, itemIdx) in page?.built_with" class="mt-2">
+							<UBadge size="lg" color="black">{{ item }}</UBadge>
+						</div>
+					</div>
+					<div>
+						<TypographyTitle>Cost</TypographyTitle>
+						<p class="font-bold dark:text-white">
+							{{ page?.cost }}
+						</p>
+					</div>
+				</div>
+			</aside>
+		</BlockContainer>
+	</div>
+</template>
diff --git a/components/post/PostVideo.vue b/components/post/PostVideo.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { BlockGalleryFile } from '~/types';
+
+export interface PostVideoProps {
+	page: any;
+}
+
+const props = defineProps<PostVideoProps>();
+</script>
+<template>
+	<div class="py-12">
+		<div class="relative flex items-center justify-center w-full overflow-hidden bg-gray-900/50 dark:bg-gray-900">
+			<VVideo :url="page?.video_url" class="max-w-6xl" />
+		</div>
+
+		<BlockContainer>
+			<!-- Main -->
+			<main class="flex flex-col gap-4">
+				<TypographyHeadline :content="page?.title" as="h1" size="lg" />
+				<TypographyProse :content="page?.summary" />
+				<div
+					class="pb-4 space-y-4 border-b md:space-y-0 md:flex md:justify-between md:items-center dark:border-gray-700"
+				>
+					<Author v-if="page?.author" v-bind="page?.author" />
+					<NuxtLink
+						v-if="page?.category"
+						:href="`/posts/categories/${page?.category.slug}`"
+						class="inline-block hover:opacity-90"
+					>
+						<Category size="lg" :color="page?.category.color">{{ page?.category.title }}</Category>
+					</NuxtLink>
+					<div class="inline-flex gap-4">
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:timer-outline-rounded" class="w-6 h-6 mr-2" />
+							{{ calculateReadTime(page?.content) }}
+						</p>
+						<p class="flex text-gray-500 dark:text-gray-300">
+							<UIcon name="material-symbols:calendar-today-rounded" class="w-6 h-6 mr-2" />
+							{{ getRelativeTime(page?.date_published) }}
+						</p>
+					</div>
+				</div>
+				<article>
+					<TypographyProse ref="article" :content="page?.content" />
+				</article>
+			</main>
+		</BlockContainer>
+	</div>
+</template>