From 73784999794592c0b06dea789e22bea221d303e1 Mon Sep 17 00:00:00 2001
From: Kevin Lewis <kvn@lws.io>
Date: Thu, 21 Mar 2024 09:24:18 +0100
Subject: [PATCH 1/3] Added 'episode' in hero and tv listing

---
 components/Tv/TVEpisode.vue | 116 ++++++++++++++++++------------------
 pages/tv/index.vue          |  90 ++++++++++++++--------------
 2 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/components/Tv/TVEpisode.vue b/components/Tv/TVEpisode.vue
index f854545c..61fb5ed3 100644
--- a/components/Tv/TVEpisode.vue
+++ b/components/Tv/TVEpisode.vue
@@ -1,85 +1,85 @@
 <template>
-	<NuxtLink :to="`/tv/${show.slug}/${episode.slug}`" class="episode">
-		<img :src="`${directusUrl}/assets/${episode.tile}?width=600`" alt="" />
-		<div>
-			<h3>
-				<span v-if="!hideNumber">{{ episode.episode_number }}:</span>
-				{{ episode.title }}
-				<span class="meta">
-					<span v-if="episode.length">{{ episode.length }}m</span>
-					<span>{{ formatDate(episode.published) }}</span>
-				</span>
-			</h3>
-			<p>{{ episode.description }}</p>
-		</div>
-	</NuxtLink>
+  <NuxtLink :to="`/tv/${show.slug}/${episode.slug}`" class="episode">
+    <img :src="`${directusUrl}/assets/${episode.tile}?width=600`" alt="" />
+    <div>
+      <h3>
+        <span v-if="!hideNumber">Episode {{ episode.episode_number }}:</span>
+        {{ episode.title }}
+        <span class="meta">
+          <span v-if="episode.length">{{ episode.length }}m</span>
+          <span>{{ formatDate(episode.published) }}</span>
+        </span>
+      </h3>
+      <p>{{ episode.description }}</p>
+    </div>
+  </NuxtLink>
 </template>
 
 <script setup>
 const {
-	public: { tvUrl },
+  public: { tvUrl },
 } = useRuntimeConfig();
 
 const directusUrl = process.env.DIRECTUS_TV_URL || tvUrl;
 
 defineProps({
-	show: Object,
-	episode: Object,
-	hideNumber: Boolean,
+  show: Object,
+  episode: Object,
+  hideNumber: Boolean,
 });
 
 const formatDate = (dateString) => {
-	const formatted = new Intl.DateTimeFormat('en-US', {
-		day: 'numeric',
-		month: 'short',
-		year: 'numeric',
-	})
-		.format(new Date(dateString))
-		.split(',')
-		.join('');
+  const formatted = new Intl.DateTimeFormat('en-US', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+    .format(new Date(dateString))
+    .split(',')
+    .join('');
 
-	return formatted;
+  return formatted;
 };
 </script>
 
 <style lang="scss" scoped>
 .episode {
-	list-style-type: none;
-	text-decoration: none;
-	color: inherit;
-	display: grid;
-	gap: 1em;
-	img {
-		width: 100%;
-		border-radius: var(--rounded-lg);
-	}
-	h3 .meta {
-		opacity: 0.5;
-		margin-left: 0.5rem;
-		font-size: 0.8rem;
-		span:not(:last-child):after {
-			content: '\2022';
-			margin: 0 0.5em;
-		}
-	}
-	p {
-		margin: 0.5em 0;
-	}
+  list-style-type: none;
+  text-decoration: none;
+  color: inherit;
+  display: grid;
+  gap: 1em;
+  img {
+    width: 100%;
+    border-radius: var(--rounded-lg);
+  }
+  h3 .meta {
+    opacity: 0.5;
+    margin-left: 0.5rem;
+    font-size: 0.8rem;
+    span:not(:last-child):after {
+      content: '\2022';
+      margin: 0 0.5em;
+    }
+  }
+  p {
+    margin: 0.5em 0;
+  }
 }
 
 @media (width > 60rem) {
-	.episode {
-		grid-template-columns: 300px auto;
-	}
+  .episode {
+    grid-template-columns: 300px auto;
+  }
 }
 
 @media (width > 35rem) {
-	.episode {
-		grid-template-columns: 200px auto;
-		gap: 2em;
-	}
-	p {
-		margin: 1em 0;
-	}
+  .episode {
+    grid-template-columns: 200px auto;
+    gap: 2em;
+  }
+  p {
+    margin: 1em 0;
+  }
 }
 </style>
diff --git a/pages/tv/index.vue b/pages/tv/index.vue
index cc12ee99..0a65d015 100644
--- a/pages/tv/index.vue
+++ b/pages/tv/index.vue
@@ -1,85 +1,85 @@
 <template>
-	<TVHero
-		:cover="globals.featured.season.show.cover"
-		:logo="globals.featured.season.show.logo"
-		:title="globals.featured.title"
-		:description="globals.featured.description"
-		:buttons="heroButtons"
-	/>
-	<BaseContainer class="main">
-		<section class="categories">
-			<TVCategory v-for="category in categories" :key="category.id" :title="category.title" :shows="category.shows" />
-		</section>
-	</BaseContainer>
+  <TVHero
+    :cover="globals.featured.season.show.cover"
+    :logo="globals.featured.season.show.logo"
+    :title="`Episode ${globals.featured.episode_number}: ${globals.featured.title}`"
+    :description="globals.featured.description"
+    :buttons="heroButtons"
+  />
+  <BaseContainer class="main">
+    <section class="categories">
+      <TVCategory v-for="category in categories" :key="category.id" :title="category.title" :shows="category.shows" />
+    </section>
+  </BaseContainer>
 </template>
 
 <script setup>
 import { createDirectus, rest, readItems, readSingleton } from '@directus/sdk';
 
 const {
-	public: { tvUrl, baseUrl },
+  public: { tvUrl, baseUrl },
 } = useRuntimeConfig();
 
 const directusUrl = process.env.DIRECTUS_TV_URL || tvUrl;
 const directus = createDirectus(directusUrl).with(rest());
 
 const globals = await directus.request(
-	readSingleton('globals', { fields: ['og', { featured: ['*', { season: [{ show: ['*'] }] }] }] }),
+  readSingleton('globals', { fields: ['og', { featured: ['*', { season: [{ show: ['*'] }] }] }] }),
 );
 
 const categories = await directus.request(
-	readItems('categories', {
-		fields: ['id', 'title', { shows: [{ shows_id: ['*'] }] }],
-	}),
+  readItems('categories', {
+    fields: ['id', 'title', { shows: [{ shows_id: ['*'] }] }],
+  }),
 );
 
 const heroButtons = [
-	{
-		type: 'primary',
-		icon: 'play_arrow',
-		text: 'Play Episode',
-		href: `/tv/${globals.featured.season.show.slug}/${globals.featured.slug}`,
-	},
-	{
-		type: 'secondary',
-		icon: 'arrow_forward',
-		text: 'Details',
-		href: `/tv/${globals.featured.season.show.slug}`,
-	},
+  {
+    type: 'primary',
+    icon: 'play_arrow',
+    text: 'Play Episode',
+    href: `/tv/${globals.featured.season.show.slug}/${globals.featured.slug}`,
+  },
+  {
+    type: 'secondary',
+    icon: 'arrow_forward',
+    text: 'Details',
+    href: `/tv/${globals.featured.season.show.slug}`,
+  },
 ];
 
 definePageMeta({
-	layout: 'tv',
+  layout: 'tv',
 });
 
 const seoTitle = 'Directus TV';
 const seoDesc = 'Go down the rabbit hole with hours of original video content from the team at Directus.';
 
 useSeoMeta({
-	title: seoTitle,
-	ogTitle: seoTitle,
-	description: seoDesc,
-	ogDescription: seoDesc,
-	ogImage: `${directusUrl}/assets/${globals.og}`,
-	twitterCard: 'summary_large_image',
-	ogUrl: `${baseUrl}/tv`,
+  title: seoTitle,
+  ogTitle: seoTitle,
+  description: seoDesc,
+  ogDescription: seoDesc,
+  ogImage: `${directusUrl}/assets/${globals.og}`,
+  twitterCard: 'summary_large_image',
+  ogUrl: `${baseUrl}/tv`,
 });
 </script>
 
 <style lang="scss" scoped>
 .main {
-	padding-bottom: 8em;
+  padding-bottom: 8em;
 }
 .categories {
-	margin-top: 4rem;
-	display: flex;
-	flex-direction: column;
-	gap: 2rem;
+  margin-top: 4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }
 
 @media (width > 60rem) {
-	.categories {
-		gap: 4rem;
-	}
+  .categories {
+    gap: 4rem;
+  }
 }
 </style>

From 171071cb392f5dc6c68c98ab2c312c22c43ed0c1 Mon Sep 17 00:00:00 2001
From: Kevin Lewis <kvn@lws.io>
Date: Thu, 21 Mar 2024 09:32:13 +0100
Subject: [PATCH 2/3] fixed all page

---
 pages/tv/all.vue | 118 +++++++++++++++++++++++++++--------------------
 1 file changed, 68 insertions(+), 50 deletions(-)

diff --git a/pages/tv/all.vue b/pages/tv/all.vue
index 3e2ade01..c3715459 100644
--- a/pages/tv/all.vue
+++ b/pages/tv/all.vue
@@ -1,90 +1,108 @@
 <template>
-	<ThemeProvider variant="dark">
-		<TVHero
-			:cover="globals.featured.season.show.cover"
-			:logo="globals.featured.season.show.logo"
-			:title="globals.featured.title"
-			:description="globals.featured.description"
-			:buttons="heroButtons"
-		/>
-		<BaseContainer class="main">
-			<ul class="episodes">
-				<li v-for="episode in episodesWithShowTitles" :key="episode.id">
-					<TVEpisode :show="episode.season.show" :episode="episode" :hide-number="true" />
-				</li>
-			</ul>
-		</BaseContainer>
-	</ThemeProvider>
+  <ThemeProvider variant="dark">
+    <TVHero
+      :cover="globals.featured.season.show.cover"
+      :logo="globals.featured.season.show.logo"
+      :title="globals.featured.title"
+      :description="globals.featured.description"
+      :buttons="heroButtons"
+    />
+    <BaseContainer class="main">
+      <p class="stat">
+        Displaying all {{ episodes.length }} episodes across {{ shows.length }} shows. We hope you enjoy them!
+      </p>
+      <ul class="episodes">
+        <li v-for="episode in episodesWithShowTitles" :key="episode.id">
+          <TVEpisode :show="episode.season.show" :episode="episode" :hide-number="true" />
+        </li>
+      </ul>
+    </BaseContainer>
+  </ThemeProvider>
 </template>
 
 <script setup>
 import { createDirectus, rest, readItems, readSingleton } from '@directus/sdk';
 
 const {
-	public: { tvUrl, baseUrl },
+  public: { tvUrl, baseUrl },
 } = useRuntimeConfig();
 
 const directusUrl = process.env.DIRECTUS_TV_URL || tvUrl;
 const directus = createDirectus(directusUrl).with(rest());
 
 const globals = await directus.request(
-	readSingleton('globals', { fields: ['og', { featured: ['*', { season: [{ show: ['*'] }] }] }] }),
+  readSingleton('globals', { fields: ['og', { featured: ['*', { season: [{ show: ['*'] }] }] }] }),
 );
 
+const shows = await directus.request(readItems('shows', { fields: ['id'], limit: -1 }));
+
 const episodes = await directus.request(
-	readItems('episodes', {
-		fields: ['*', { season: ['*', { show: ['title', 'slug'] }] }],
-		sort: ['-published'],
-	}),
+  readItems('episodes', {
+    fields: ['*', { season: ['*', { show: ['title', 'slug'] }] }],
+    sort: ['-published'],
+    limit: -1,
+  }),
 );
 
 const episodesWithShowTitles = episodes.map((episode) => {
-	return {
-		...episode,
-		title: `${episode.season.show.title}: ${episode.title}`,
-	};
+  return {
+    ...episode,
+    title: `${episode.season.show.title}: ${episode.title}`,
+  };
 });
 
 const heroButtons = [
-	{
-		type: 'primary',
-		icon: 'play_arrow',
-		text: 'Play Episode',
-		href: `/tv/${globals.featured.season.show.slug}/${globals.featured.slug}`,
-	},
-	{
-		type: 'secondary',
-		icon: 'arrow_forward',
-		text: 'Details',
-		href: `/tv/${globals.featured.season.show.slug}`,
-	},
+  {
+    type: 'primary',
+    icon: 'play_arrow',
+    text: 'Play Episode',
+    href: `/tv/${globals.featured.season.show.slug}/${globals.featured.slug}`,
+  },
+  {
+    type: 'secondary',
+    icon: 'arrow_forward',
+    text: 'Details',
+    href: `/tv/${globals.featured.season.show.slug}`,
+  },
 ];
 
 definePageMeta({
-	layout: 'tv',
+  layout: 'tv',
 });
 
 const seoTitle = 'Directus TV';
 const seoDesc = 'Go down the rabbit hole with hours of original video content from the team at Directus.';
 
 useSeoMeta({
-	title: seoTitle,
-	ogTitle: seoTitle,
-	description: seoDesc,
-	ogDescription: seoDesc,
-	ogImage: `${directusUrl}/assets/${globals.og}`,
-	twitterCard: 'summary_large_image',
-	ogUrl: `${baseUrl}/tv`,
+  title: seoTitle,
+  ogTitle: seoTitle,
+  description: seoDesc,
+  ogDescription: seoDesc,
+  ogImage: `${directusUrl}/assets/${globals.og}`,
+  twitterCard: 'summary_large_image',
+  ogUrl: `${baseUrl}/tv`,
 });
 </script>
 
 <style scoped>
+.stat {
+  margin-top: 4rem;
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  opacity: 0.5;
+  line-height: 1.125;
+}
 .episodes {
-	padding-left: 0;
-	list-style-type: none;
-	margin-bottom: 4em;
+  padding-left: 0;
+  list-style-type: none;
+  margin-bottom: 4em;
 }
 li {
-	margin-top: 2em;
+  margin-top: 2em;
+}
+@media (width > 35rem) {
+  .stat {
+    font-size: 2rem;
+  }
 }
 </style>

From fb94ebc46179e57e25804873448142faa83315ef Mon Sep 17 00:00:00 2001
From: Kevin Lewis <kvn@lws.io>
Date: Thu, 21 Mar 2024 10:05:21 +0100
Subject: [PATCH 3/3] Please the linter

---
 components/Tv/TVEpisode.vue | 116 ++++++++++++++++-----------------
 pages/tv/all.vue            | 124 ++++++++++++++++++------------------
 pages/tv/index.vue          |  90 +++++++++++++-------------
 3 files changed, 165 insertions(+), 165 deletions(-)

diff --git a/components/Tv/TVEpisode.vue b/components/Tv/TVEpisode.vue
index 61fb5ed3..64437ef0 100644
--- a/components/Tv/TVEpisode.vue
+++ b/components/Tv/TVEpisode.vue
@@ -1,85 +1,85 @@
 <template>
-  <NuxtLink :to="`/tv/${show.slug}/${episode.slug}`" class="episode">
-    <img :src="`${directusUrl}/assets/${episode.tile}?width=600`" alt="" />
-    <div>
-      <h3>
-        <span v-if="!hideNumber">Episode {{ episode.episode_number }}:</span>
-        {{ episode.title }}
-        <span class="meta">
-          <span v-if="episode.length">{{ episode.length }}m</span>
-          <span>{{ formatDate(episode.published) }}</span>
-        </span>
-      </h3>
-      <p>{{ episode.description }}</p>
-    </div>
-  </NuxtLink>
+	<NuxtLink :to="`/tv/${show.slug}/${episode.slug}`" class="episode">
+		<img :src="`${directusUrl}/assets/${episode.tile}?width=600`" alt="" />
+		<div>
+			<h3>
+				<span v-if="!hideNumber">Episode {{ episode.episode_number }}:</span>
+				{{ episode.title }}
+				<span class="meta">
+					<span v-if="episode.length">{{ episode.length }}m</span>
+					<span>{{ formatDate(episode.published) }}</span>
+				</span>
+			</h3>
+			<p>{{ episode.description }}</p>
+		</div>
+	</NuxtLink>
 </template>
 
 <script setup>
 const {
-  public: { tvUrl },
+	public: { tvUrl },
 } = useRuntimeConfig();
 
 const directusUrl = process.env.DIRECTUS_TV_URL || tvUrl;
 
 defineProps({
-  show: Object,
-  episode: Object,
-  hideNumber: Boolean,
+	show: Object,
+	episode: Object,
+	hideNumber: Boolean,
 });
 
 const formatDate = (dateString) => {
-  const formatted = new Intl.DateTimeFormat('en-US', {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  })
-    .format(new Date(dateString))
-    .split(',')
-    .join('');
+	const formatted = new Intl.DateTimeFormat('en-US', {
+		day: 'numeric',
+		month: 'short',
+		year: 'numeric',
+	})
+		.format(new Date(dateString))
+		.split(',')
+		.join('');
 
-  return formatted;
+	return formatted;
 };
 </script>
 
 <style lang="scss" scoped>
 .episode {
-  list-style-type: none;
-  text-decoration: none;
-  color: inherit;
-  display: grid;
-  gap: 1em;
-  img {
-    width: 100%;
-    border-radius: var(--rounded-lg);
-  }
-  h3 .meta {
-    opacity: 0.5;
-    margin-left: 0.5rem;
-    font-size: 0.8rem;
-    span:not(:last-child):after {
-      content: '\2022';
-      margin: 0 0.5em;
-    }
-  }
-  p {
-    margin: 0.5em 0;
-  }
+	list-style-type: none;
+	text-decoration: none;
+	color: inherit;
+	display: grid;
+	gap: 1em;
+	img {
+		width: 100%;
+		border-radius: var(--rounded-lg);
+	}
+	h3 .meta {
+		opacity: 0.5;
+		margin-left: 0.5rem;
+		font-size: 0.8rem;
+		span:not(:last-child):after {
+			content: '\2022';
+			margin: 0 0.5em;
+		}
+	}
+	p {
+		margin: 0.5em 0;
+	}
 }
 
 @media (width > 60rem) {
-  .episode {
-    grid-template-columns: 300px auto;
-  }
+	.episode {
+		grid-template-columns: 300px auto;
+	}
 }
 
 @media (width > 35rem) {
-  .episode {
-    grid-template-columns: 200px auto;
-    gap: 2em;
-  }
-  p {
-    margin: 1em 0;
-  }
+	.episode {
+		grid-template-columns: 200px auto;
+		gap: 2em;
+	}
+	p {
+		margin: 1em 0;
+	}
 }
 </style>
diff --git a/pages/tv/all.vue b/pages/tv/all.vue
index c3715459..7bb157dd 100644
--- a/pages/tv/all.vue
+++ b/pages/tv/all.vue
@@ -1,108 +1,108 @@
 <template>
-  <ThemeProvider variant="dark">
-    <TVHero
-      :cover="globals.featured.season.show.cover"
-      :logo="globals.featured.season.show.logo"
-      :title="globals.featured.title"
-      :description="globals.featured.description"
-      :buttons="heroButtons"
-    />
-    <BaseContainer class="main">
-      <p class="stat">
-        Displaying all {{ episodes.length }} episodes across {{ shows.length }} shows. We hope you enjoy them!
-      </p>
-      <ul class="episodes">
-        <li v-for="episode in episodesWithShowTitles" :key="episode.id">
-          <TVEpisode :show="episode.season.show" :episode="episode" :hide-number="true" />
-        </li>
-      </ul>
-    </BaseContainer>
-  </ThemeProvider>
+	<ThemeProvider variant="dark">
+		<TVHero
+			:cover="globals.featured.season.show.cover"
+			:logo="globals.featured.season.show.logo"
+			:title="globals.featured.title"
+			:description="globals.featured.description"
+			:buttons="heroButtons"
+		/>
+		<BaseContainer class="main">
+			<p class="stat">
+				Displaying all {{ episodes.length }} episodes across {{ shows.length }} shows. We hope you enjoy them!
+			</p>
+			<ul class="episodes">
+				<li v-for="episode in episodesWithShowTitles" :key="episode.id">
+					<TVEpisode :show="episode.season.show" :episode="episode" :hide-number="true" />
+				</li>
+			</ul>
+		</BaseContainer>
+	</ThemeProvider>
 </template>
 
 <script setup>
 import { createDirectus, rest, readItems, readSingleton } from '@directus/sdk';
 
 const {
-  public: { tvUrl, baseUrl },
+	public: { tvUrl, baseUrl },
 } = useRuntimeConfig();
 
 const directusUrl = process.env.DIRECTUS_TV_URL || tvUrl;
 const directus = createDirectus(directusUrl).with(rest());
 
 const globals = await directus.request(
-  readSingleton('globals', { fields: ['og', { featured: ['*', { season: [{ show: ['*'] }] }] }] }),
+	readSingleton('globals', { fields: ['og', { featured: ['*', { season: [{ show: ['*'] }] }] }] }),
 );
 
 const shows = await directus.request(readItems('shows', { fields: ['id'], limit: -1 }));
 
 const episodes = await directus.request(
-  readItems('episodes', {
-    fields: ['*', { season: ['*', { show: ['title', 'slug'] }] }],
-    sort: ['-published'],
-    limit: -1,
-  }),
+	readItems('episodes', {
+		fields: ['*', { season: ['*', { show: ['title', 'slug'] }] }],
+		sort: ['-published'],
+		limit: -1,
+	}),
 );
 
 const episodesWithShowTitles = episodes.map((episode) => {
-  return {
-    ...episode,
-    title: `${episode.season.show.title}: ${episode.title}`,
-  };
+	return {
+		...episode,
+		title: `${episode.season.show.title}: ${episode.title}`,
+	};
 });
 
 const heroButtons = [
-  {
-    type: 'primary',
-    icon: 'play_arrow',
-    text: 'Play Episode',
-    href: `/tv/${globals.featured.season.show.slug}/${globals.featured.slug}`,
-  },
-  {
-    type: 'secondary',
-    icon: 'arrow_forward',
-    text: 'Details',
-    href: `/tv/${globals.featured.season.show.slug}`,
-  },
+	{
+		type: 'primary',
+		icon: 'play_arrow',
+		text: 'Play Episode',
+		href: `/tv/${globals.featured.season.show.slug}/${globals.featured.slug}`,
+	},
+	{
+		type: 'secondary',
+		icon: 'arrow_forward',
+		text: 'Details',
+		href: `/tv/${globals.featured.season.show.slug}`,
+	},
 ];
 
 definePageMeta({
-  layout: 'tv',
+	layout: 'tv',
 });
 
 const seoTitle = 'Directus TV';
 const seoDesc = 'Go down the rabbit hole with hours of original video content from the team at Directus.';
 
 useSeoMeta({
-  title: seoTitle,
-  ogTitle: seoTitle,
-  description: seoDesc,
-  ogDescription: seoDesc,
-  ogImage: `${directusUrl}/assets/${globals.og}`,
-  twitterCard: 'summary_large_image',
-  ogUrl: `${baseUrl}/tv`,
+	title: seoTitle,
+	ogTitle: seoTitle,
+	description: seoDesc,
+	ogDescription: seoDesc,
+	ogImage: `${directusUrl}/assets/${globals.og}`,
+	twitterCard: 'summary_large_image',
+	ogUrl: `${baseUrl}/tv`,
 });
 </script>
 
 <style scoped>
 .stat {
-  margin-top: 4rem;
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  opacity: 0.5;
-  line-height: 1.125;
+	margin-top: 4rem;
+	margin-bottom: 1rem;
+	font-size: 1.25rem;
+	opacity: 0.5;
+	line-height: 1.125;
 }
 .episodes {
-  padding-left: 0;
-  list-style-type: none;
-  margin-bottom: 4em;
+	padding-left: 0;
+	list-style-type: none;
+	margin-bottom: 4em;
 }
 li {
-  margin-top: 2em;
+	margin-top: 2em;
 }
 @media (width > 35rem) {
-  .stat {
-    font-size: 2rem;
-  }
+	.stat {
+		font-size: 2rem;
+	}
 }
 </style>
diff --git a/pages/tv/index.vue b/pages/tv/index.vue
index 0a65d015..f7c05793 100644
--- a/pages/tv/index.vue
+++ b/pages/tv/index.vue
@@ -1,85 +1,85 @@
 <template>
-  <TVHero
-    :cover="globals.featured.season.show.cover"
-    :logo="globals.featured.season.show.logo"
-    :title="`Episode ${globals.featured.episode_number}: ${globals.featured.title}`"
-    :description="globals.featured.description"
-    :buttons="heroButtons"
-  />
-  <BaseContainer class="main">
-    <section class="categories">
-      <TVCategory v-for="category in categories" :key="category.id" :title="category.title" :shows="category.shows" />
-    </section>
-  </BaseContainer>
+	<TVHero
+		:cover="globals.featured.season.show.cover"
+		:logo="globals.featured.season.show.logo"
+		:title="`Episode ${globals.featured.episode_number}: ${globals.featured.title}`"
+		:description="globals.featured.description"
+		:buttons="heroButtons"
+	/>
+	<BaseContainer class="main">
+		<section class="categories">
+			<TVCategory v-for="category in categories" :key="category.id" :title="category.title" :shows="category.shows" />
+		</section>
+	</BaseContainer>
 </template>
 
 <script setup>
 import { createDirectus, rest, readItems, readSingleton } from '@directus/sdk';
 
 const {
-  public: { tvUrl, baseUrl },
+	public: { tvUrl, baseUrl },
 } = useRuntimeConfig();
 
 const directusUrl = process.env.DIRECTUS_TV_URL || tvUrl;
 const directus = createDirectus(directusUrl).with(rest());
 
 const globals = await directus.request(
-  readSingleton('globals', { fields: ['og', { featured: ['*', { season: [{ show: ['*'] }] }] }] }),
+	readSingleton('globals', { fields: ['og', { featured: ['*', { season: [{ show: ['*'] }] }] }] }),
 );
 
 const categories = await directus.request(
-  readItems('categories', {
-    fields: ['id', 'title', { shows: [{ shows_id: ['*'] }] }],
-  }),
+	readItems('categories', {
+		fields: ['id', 'title', { shows: [{ shows_id: ['*'] }] }],
+	}),
 );
 
 const heroButtons = [
-  {
-    type: 'primary',
-    icon: 'play_arrow',
-    text: 'Play Episode',
-    href: `/tv/${globals.featured.season.show.slug}/${globals.featured.slug}`,
-  },
-  {
-    type: 'secondary',
-    icon: 'arrow_forward',
-    text: 'Details',
-    href: `/tv/${globals.featured.season.show.slug}`,
-  },
+	{
+		type: 'primary',
+		icon: 'play_arrow',
+		text: 'Play Episode',
+		href: `/tv/${globals.featured.season.show.slug}/${globals.featured.slug}`,
+	},
+	{
+		type: 'secondary',
+		icon: 'arrow_forward',
+		text: 'Details',
+		href: `/tv/${globals.featured.season.show.slug}`,
+	},
 ];
 
 definePageMeta({
-  layout: 'tv',
+	layout: 'tv',
 });
 
 const seoTitle = 'Directus TV';
 const seoDesc = 'Go down the rabbit hole with hours of original video content from the team at Directus.';
 
 useSeoMeta({
-  title: seoTitle,
-  ogTitle: seoTitle,
-  description: seoDesc,
-  ogDescription: seoDesc,
-  ogImage: `${directusUrl}/assets/${globals.og}`,
-  twitterCard: 'summary_large_image',
-  ogUrl: `${baseUrl}/tv`,
+	title: seoTitle,
+	ogTitle: seoTitle,
+	description: seoDesc,
+	ogDescription: seoDesc,
+	ogImage: `${directusUrl}/assets/${globals.og}`,
+	twitterCard: 'summary_large_image',
+	ogUrl: `${baseUrl}/tv`,
 });
 </script>
 
 <style lang="scss" scoped>
 .main {
-  padding-bottom: 8em;
+	padding-bottom: 8em;
 }
 .categories {
-  margin-top: 4rem;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
+	margin-top: 4rem;
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
 }
 
 @media (width > 60rem) {
-  .categories {
-    gap: 4rem;
-  }
+	.categories {
+		gap: 4rem;
+	}
 }
 </style>