Merge branch 'main' into og-image-tweaks

.github/actions/prepare/action.yml

@@ -9,9 +9,9 @@ runs:
   using: 'composite'
   steps:
     - name: Install Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: 20
         registry-url: ${{ inputs.registry }}
 
     - uses: pnpm/action-setup@v2

.github/workflows/lint.yaml

@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Prepare
         uses: ./.github/actions/prepare

.github/workflows/typecheck.yaml

@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Prepare
         uses: ./.github/actions/prepare

components/Base/HsForm.vue

@@ -22,7 +22,7 @@ declare global {
 }
 
 const { data: globals } = useAsyncData('sales-reps', () =>
-	$directus.request($readSingleton('globals', { fields: ['reps'] }))
+	$directus.request($readSingleton('globals', { fields: ['reps'] })),
 );
 
 function routeToMeetingLinkCallback(form: any, data: any) {

components/Base/Icon.vue

@@ -61,7 +61,9 @@ const fontSize = computed(() => unref(opticalSize) + 'px');
 	white-space: nowrap;
 	direction: ltr;
 	font-size: v-bind(fontSize);
-	font-variation-settings: 'opsz' v-bind(opticalSize), 'wght' v-bind(weight);
+	font-variation-settings:
+		'opsz' v-bind(opticalSize),
+		'wght' v-bind(weight);
 	user-select: none;
 }
 </style>

components/Block/Accordion.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_accordion', props.uuid, {
 			fields: ['title', 'icon', { content: ['id', 'collection', 'item'] }],
-		})
-	)
+		}),
+	),
 );
 
 useSchemaOrg([

components/Block/AccordionGroup.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_accordion_group', props.uuid, {
 			fields: [{ items: ['id', 'block_accordion_id'] }],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/Button.vue

@@ -18,8 +18,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 				'size',
 				{ page: ['permalink'], resource: ['slug', { type: ['slug'] }] },
 			],
-		})
-	)
+		}),
+	),
 );
 
 const href = computed(() => {

components/Block/ButtonGroup.vue

@@ -15,8 +15,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 					buttons: ['id', 'block_button_id'],
 				},
 			],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/Card.vue

@@ -50,8 +50,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 					],
 				},
 			],
-		})
-	)
+		}),
+	),
 );
 
 // @TODO fix as any in template below
@@ -65,9 +65,13 @@ const { data: block } = useAsyncData(props.uuid, () =>
 		:icon="block.icon ?? undefined"
 		:media-style="mediaStyle"
 		:description="
-			block.description ?? (block.resource?.date_published
-				? new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date(block.resource!.date_published as string))
-				: undefined) ?? undefined
+			block.description ??
+			(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 ?? undefined"
 		:to="block.external_url ?? block.page?.permalink ?? resourcePermalink(block.resource as any) ?? undefined"

components/Block/CardGroup.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_card_group', props.uuid, {
 			fields: ['stacked', 'icon_color', 'style', 'grid', 'title_size', 'icon_size', { cards: ['block_card_id'] }],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/CardGroupDynamic.vue

@@ -22,8 +22,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 				'limit',
 				'title_size',
 			],
-		})
-	)
+		}),
+	),
 );
 
 const activeTab = ref(0);
@@ -61,7 +61,7 @@ const { data: cards, pending } = useAsyncData(
 						: undefined,
 					limit: context.limit,
 					page: unref(page),
-				})
+				}),
 			);
 
 			return teamItems.map(({ image, name, job_title, slug, type, resources }) => ({
@@ -90,7 +90,7 @@ const { data: cards, pending } = useAsyncData(
 						: undefined,
 					limit: context.limit,
 					page: unref(page),
-				})
+				}),
 			);
 
 			return resourceItems.map(({ image, title, author, type, slug, category, date_published }) => {
@@ -115,7 +115,7 @@ const { data: cards, pending } = useAsyncData(
 						: undefined,
 					limit: context.limit,
 					page: unref(page),
-				})
+				}),
 			);
 
 			return eventItems.map(({ name, start_time, location, link_url, cover }) => {
@@ -134,7 +134,7 @@ const { data: cards, pending } = useAsyncData(
 			});
 		}
 	},
-	{ watch: [block, filter, page] }
+	{ watch: [block, filter, page] },
 );
 
 const { data: count } = useAsyncData(
@@ -152,13 +152,13 @@ const { data: count } = useAsyncData(
 				aggregate: {
 					count: 'id',
 				},
-			})
+			}),
 		);
 	},
 	{
 		transform: (data) => (data?.[0]?.count?.id ? Number(data[0].count.id) : null),
 		watch: [block, filter],
-	}
+	},
 );
 </script>
 

components/Block/Code.vue

@@ -11,8 +11,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_code', props.uuid, {
 			fields: ['background', 'snippets'],
-		})
-	)
+		}),
+	),
 );
 
 const shiki = await getHighlighter({
@@ -23,14 +23,15 @@ const shiki = await getHighlighter({
 	langs: ['graphql', 'http', 'typescript', 'sql', 'json'],
 });
 
-const snippets = computed(() =>
-	unref(block)?.snippets?.map((snippet) => ({
-		...snippet,
-		html: shiki.codeToHtml(snippet.snippet, {
-			lang: snippet.language,
-			theme: unref(block)?.background === 'dark-night' ? 'directus-dark' : 'directus-light',
-		}),
-	}))
+const snippets = computed(
+	() =>
+		unref(block)?.snippets?.map((snippet) => ({
+			...snippet,
+			html: shiki.codeToHtml(snippet.snippet, {
+				lang: snippet.language,
+				theme: unref(block)?.background === 'dark-night' ? 'directus-dark' : 'directus-light',
+			}),
+		})),
 );
 
 const activeSnippet = ref(0);

components/Block/Columns.vue

@@ -15,8 +15,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 					col_b: ['id', 'collection', 'item'],
 				},
 			],
-		})
-	)
+		}),
+	),
 );
 
 const fillBlocks = ['block_quote', 'block_code'];

components/Block/Cta.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_cta', props.uuid, {
 			fields: ['id', 'heading', 'icon', 'subheading', 'button'],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/Form.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_form', props.uuid, {
 			fields: ['alignment', 'show_labels', 'inline', { form: ['hubspot_form_id', 'route_to_meeting_link_on_success'] }],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/Header.vue

@@ -19,8 +19,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 				'subheading_color',
 				'subheading_type',
 			],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/LogoCloud.vue

@@ -20,8 +20,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 					],
 				},
 			],
-		})
-	)
+		}),
+	),
 );
 
 const logos = computed(() => {
@@ -32,5 +32,5 @@ const logos = computed(() => {
 <template>
 	<LogoGrid v-if="block && block.type === 'grid'" :logos="logos" />
 	<LogoTicker v-else-if="block && block.type === 'ticker'" :logos="logos" />
-	<LogoTitle v-else-if="block && block.type === 'title'" :logos="(logos as any)" />
+	<LogoTitle v-else-if="block && block.type === 'title'" :logos="logos as any" />
 </template>

components/Block/Media.vue

@@ -20,8 +20,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 				'caption',
 				{ video: ['url', 'autoplay', 'controls', 'loop', { file: ['id'] }], image: ['id', 'description'] },
 			],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/Metric.vue

@@ -18,8 +18,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 				'external_url',
 				{ page: ['permalink'], resource: ['type', 'slug'], image: ['id', 'description'] },
 			],
-		})
-	)
+		}),
+	),
 );
 
 const hasLink = computed(() => !!unref(block)?.page || !!unref(block)?.external_url || !!unref(block)?.resource);

components/Block/MetricGroup.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_metric_group', props.uuid, {
 			fields: ['background', { items: ['id', 'block_metric_id'] }],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/PageNav.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_page_nav', props.uuid, {
 			fields: ['tag', { logo: ['id', 'description'] }, 'navigation', 'title'],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/Paper.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_paper', props.uuid, {
 			fields: ['background', 'padding', { blocks: ['id', 'collection', 'item'] }],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/Quote.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_quote', props.uuid, {
 			fields: ['company_logo', 'person_image', 'person_name', 'person_title', 'quote', 'button'],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/ResourceSlider.vue

@@ -25,8 +25,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 					],
 				},
 			],
-		})
-	)
+		}),
+	),
 );
 
 const {

components/Block/RichText.vue

@@ -9,8 +9,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_richtext', props.uuid, {
 			fields: ['content', 'color'],
-		})
-	)
+		}),
+	),
 );
 </script>
 

components/Block/Showcase.vue

@@ -13,8 +13,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 					items: ['id', 'heading', 'icon', 'subheading', { blocks: ['id', 'collection', 'item'] }],
 				},
 			],
-		})
-	)
+		}),
+	),
 );
 
 const sections = computed(() => unref(block)?.items?.length ?? 0);