Update Dependencies to latest versions (#168)

* reorder css declarations per sass rules

* fix operator

* move to nuxt-icon with v1 release

* explictly import utils to appease TS

* explicitly type clients

* more util imports

* css changes

* Update Google Tag Manager ID in .env.example

* Refactor code-highlighter.post.ts to use createHighlighter instead of getHighlighter

* update dependencies to latest versions

* add back vue to package.json

* bump typescript and eslint back

* flat config test

* lint ignore

* fix ignore settings

* lint fixes

* fix hsform

---------

Co-authored-by: Alexandre Chopin <[email protected]>

Author: bryantgillespie

.env.example

@@ -1,6 +1,6 @@
 DIRECTUS_URL="https://your-instance.directus.app"
 DIRECTUS_TV_URL="https://your-instance.directus.app"
-GOOGLE_TAG_MANAGER_ID="GTM-PTLT3GH"
+NUXT_PUBLIC_SCRIPTS_GOOGLE_TAG_MANAGER_ID="GTM-PTLT3GH"
 NUXT_PUBLIC_SITE_URL=https://directus.io
 POSTHOG_API_KEY="phc_project_api_key"
 POSTHOG_API_HOST="https://us.i.posthog.com"

.eslintignore

@@ -6,7 +6,7 @@ interface Props {
 	hideLabel?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
 	required: false,
 	hideLabel: false,
 });

.eslintrc.js

@@ -18,6 +18,7 @@ const { formId } = toRefs(props);
 const { $directus, $readSingleton, $posthog } = useNuxtApp();
 
 declare global {
+	// eslint-disable-next-line no-var
 	var hbspt: any;
 }
 

components/Base/FormGroup.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import 'iconify-icon';
-
 export interface BaseIconProps {
 	/**
 	 * Name of the Material Symbol to use.
@@ -100,8 +98,8 @@ const iconName = computed(() => {
 </script>
 
 <template>
-	<span class="base-icon" :class="size">
-		<iconify-icon :icon="iconName"></iconify-icon>
+	<span v-if="iconName" class="base-icon" :class="size">
+		<Icon :name="iconName" />
 	</span>
 </template>
 

components/Base/HsForm.vue

@@ -33,8 +33,6 @@ const inputClasses = computed(() => ({
 	'has-prepend-icon': !!props.prependIcon,
 	'has-append-icon': !!props.appendIcon,
 }));
-
-const { theme } = useTheme();
 </script>
 
 <template>

components/Base/Icon.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { BlockProps } from './types';
+import type { BlockCard, Resource, Page, Team } from '~/types/schema';
+import { resourcePermalink } from '~/utils/resourcePermalink';
 
 const { $directus, $readItem } = useNuxtApp();
 
@@ -20,14 +22,19 @@ interface BlockCardProps extends BlockProps {
 	iconSize?: 'medium' | 'large';
 }
 
+interface ExtendedBlockCard extends BlockCard {
+	page: Page | null;
+	resource: Resource | null;
+}
+
 const props = withDefaults(defineProps<BlockCardProps>(), {
 	direction: 'vertical',
 	mediaStyle: 'image-fill-16-9',
 	titleSize: 'medium',
 	iconSize: 'large',
 });
 
-const { data: block } = useAsyncData(props.uuid, () =>
+const { data: block }: { data: Ref<ExtendedBlockCard> } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_card', props.uuid, {
 			fields: [
@@ -69,12 +76,12 @@ const { data: block } = useAsyncData(props.uuid, () =>
 			(block.resource?.date_published
 				? new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(
 						new Date(block.resource!.date_published as string),
-				  )
+					)
 				: undefined) ??
 			undefined
 		"
-		:description-avatar="(block.resource?.author?.image as string) ?? undefined"
-		:to="block.external_url ?? block.page?.permalink ?? resourcePermalink(block.resource as any) ?? undefined"
+		:description-avatar="((block.resource?.author as Team)?.image as string) ?? undefined"
+		:to="block.external_url ?? block.page?.permalink ?? resourcePermalink(block.resource as Resource) ?? undefined"
 		:layout="direction"
 		:badge="block.badge ?? block.resource?.category ?? undefined"
 		:title-size="titleSize"

components/Base/Input.vue

@@ -136,7 +136,7 @@ const { data: cards, pending } = await useAsyncData(
 					description: start_time
 						? new Intl.DateTimeFormat('en-US', {
 								dateStyle: 'medium',
-						  }).format(new Date(start_time))
+							}).format(new Date(start_time))
 						: '',
 					href: link_url ?? undefined,
 					badge: location?.includes('Online') ? 'Online' : 'In Person',

components/Block/Card.vue

@@ -29,7 +29,7 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	<BaseMedia
 		v-if="block"
 		class="block-media"
-		:aspect="block.type === 'arcade' ? 'auto' : block.aspect_ratio ?? undefined"
+		:aspect="block.type === 'arcade' ? 'auto' : (block.aspect_ratio ?? undefined)"
 		:border="block.border"
 		:radius="block.border_radius"
 		:caption="block.caption ?? undefined"

components/Block/CardGroupDynamic.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { BlockProps } from './types';
+import { resourcePermalink } from '~/utils/resourcePermalink';
 
 interface BlockMetricGroupProps extends BlockProps {
 	background: 'transparent' | 'pristine-white' | 'simple-gray';
@@ -38,7 +39,7 @@ const component = computed(() => {
 		:class="`background-${background}`"
 		:href="
 			hasLink
-				? block.external_url ?? block.page?.permalink ?? resourcePermalink(block.resource) ?? undefined
+				? (block.external_url ?? block.page?.permalink ?? resourcePermalink(block.resource) ?? undefined)
 				: undefined
 		"
 	>

components/Block/Media.vue

@@ -78,13 +78,12 @@ tr {
 	align-items: baseline;
 	font-size: 0.6rem;
 	line-height: 0.6rem;
+	padding-block: var(--space-2);
 
 	@container (width > 20rem) {
 		font-size: var(--font-size-sm);
 		line-height: var(--line-height-sm);
 	}
-
-	padding-block: var(--space-2);
 }
 
 td,

components/Block/Metric.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { File } from '~/types/schema';
+import { resourcePermalink } from '~/utils/resourcePermalink';
 
 export interface LogoTitleProps {
 	logos: {

components/Block/Table.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Query } from '@directus/sdk';
 import type { Navigation, Schema } from '~/types/schema';
+import { dynamicAsset } from '~/utils/dynamicAsset';
 
 const { $directus, $readItem, $readSingleton } = useNuxtApp();
 

components/LogoTitle.vue

@@ -67,12 +67,11 @@ watch(() => route.fullPath, resetNavState);
 onClickOutside(headerContainer, resetNavState);
 
 const activeSectionTitle = computed(() => {
-	return unref(menu)?.items?.find(
-		(item) =>
-			item.children?.some(
-				// @TODO remove as {}
-				(child) => (child.page as { permalink: string })?.permalink === route.path || child.url === route.path,
-			),
+	return unref(menu)?.items?.find((item) =>
+		item.children?.some(
+			// @TODO remove as {}
+			(child) => (child.page as { permalink: string })?.permalink === route.path || child.url === route.path,
+		),
 	)?.id;
 });
 

components/Nav/Footer.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { dynamicAsset } from '~/utils/dynamicAsset';
+
 interface BaseBylineProps {
 	name?: string;
 	title?: string;

components/Nav/Header.vue

@@ -162,10 +162,12 @@ onKeyStroke('Escape', () => {
 	border: none;
 	cursor: pointer;
 	padding: var(--space-2);
+	border-radius: var(--rounded-full);
+
 	&:hover {
 		background: var(--gray-200);
 	}
-	border-radius: var(--rounded-full);
+
 	&[aria-pressed='true'] {
 		background: var(--primary-500);
 		color: var(--white);