Merge branch 'main' into gh-count

.env.example

@@ -1,2 +1,3 @@
 DIRECTUS_URL="https://your-instance.directus.app"
+GOOGLE_TAG_MANAGER_ID="GTM-PTLT3GH"
 NUXT_PUBLIC_SITE_URL=https://directus.io

app.vue

@@ -1,7 +1,47 @@
 <script lang="ts" setup>
-useHead({
+useServerHead({
 	htmlAttrs: { lang: 'en' },
+	meta: [
+		{ charset: 'UTF-8' },
+		{ property: 'og:type', content: 'website' },
+		{ property: 'og:url', content: 'https://directus.io/' },
+	],
+	link: [
+		{
+			rel: 'icon',
+			href: '/favicon.ico',
+		},
+		{
+			rel: 'icon',
+			type: 'image/svg+xml',
+			href: '/favicon.svg',
+		},
+		{
+			rel: 'apple-touch-icon',
+			href: '/apple-touch-icon.png',
+		},
+		{
+			rel: 'mask-icon',
+			href: 'safari-pinned-tab.svg',
+			color: '#5bbad5',
+		},
+	],
 });
+
+useSchemaOrg([
+	defineOrganization({
+		name: 'Directus',
+		logo: '/images/logo-dark.svg',
+		sameAs: [
+			'https://hub.docker.com/r/directus/directus',
+			'https://twitter.com/directus',
+			'https://github.com/directus',
+			'https://www.youtube.com/c/DirectusVideos',
+			'https://www.linkedin.com/company/directus-io',
+			'https://www.npmjs.com/package/directus',
+		],
+	}),
+]);
 </script>
 
 <template>

components/Art/Lines.vue

@@ -46,8 +46,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .art-lines {
 	inline-size: 100%;
-	block-size: 100%;
-	max-block-size: 800px;
+	block-size: 800px;
 	inset-inline-start: 0;
 	inset-block-start: 0;
 	position: absolute;

components/Base/Card.vue

@@ -123,6 +123,10 @@ const imageDimensions = computed(() => {
 		&:hover {
 			.heading {
 				text-decoration: underline;
+
+				.icon {
+					text-decoration: none;
+				}
 			}
 
 			&:is(.style-image-fill-16-9, .style-image-fill-1-1) .image img {
@@ -236,9 +240,9 @@ const imageDimensions = computed(() => {
 }
 
 .title-large .heading {
-	font-size: var(--font-size-2xl);
-	line-height: var(--line-height-2xl);
-	font-weight: 400;
+	font-size: var(--font-size-xl);
+	line-height: var(--line-height-xl);
+	font-weight: 500;
 }
 
 .description {

components/Base/DirectusVideo.vue

@@ -3,14 +3,20 @@ const {
 	public: { directusUrl },
 } = useRuntimeConfig();
 
-export interface DirectusImageProps {
+export interface DirectusVideoProps {
 	/**
 	 * Directus File ID
 	 */
 	uuid: string;
+
+	muted?: boolean;
+	autoplay?: boolean;
+	controls?: boolean;
+	loop?: boolean;
+	playsinline?: boolean;
 }
 
-const props = defineProps<DirectusImageProps>();
+const props = defineProps<DirectusVideoProps>();
 
 const src = computed(() => {
 	const url = new URL(`/assets/${props.uuid}`, directusUrl);
@@ -19,5 +25,5 @@ const src = computed(() => {
 </script>
 
 <template>
-	<video :src="src" />
+	<video :src="src" :muted="muted" :autoplay="autoplay" :controls="controls" :loop="loop" :playsinline="playsinline" />
 </template>

components/Base/Heading.vue

@@ -40,7 +40,7 @@ const iconSize = computed(() => {
 			<BaseIcon v-if="icon && size !== 'title'" :name="icon" :size="iconSize" :weight="700" />
 
 			<!-- eslint-disable-next-line vue/no-v-html -->
-			<span class="content" v-html="content" />
+			<span v-links class="content" v-html="content" />
 		</component>
 	</div>
 </template>

components/Base/HsForm.vue

@@ -14,17 +14,6 @@ const props = withDefaults(defineProps<BaseHsFormProps>(), {
 
 const { formId } = toRefs(props);
 
-useHead({
-	script: [
-		{
-			src: '//js.hsforms.net/forms/embed/v2.js',
-			defer: true,
-		},
-	],
-});
-
-const generatedId = computed(() => `hs-form-${unref(formId)}`);
-
 declare global {
 	var hbspt: any;
 }
@@ -38,6 +27,18 @@ const renderHsForm = () => {
 	});
 };
 
+useHead({
+	script: [
+		{
+			src: '//js.hsforms.net/forms/embed/v2.js',
+			defer: true,
+			onload: renderHsForm,
+		},
+	],
+});
+
+const generatedId = computed(() => `hs-form-${unref(formId)}`);
+
 const { theme } = useTheme();
 
 onMounted(renderHsForm);
@@ -121,8 +122,10 @@ watch(formId, renderHsForm);
 		}
 	}
 
-	:deep(fieldset + fieldset) {
-		margin-block-start: var(--space-7);
+	:deep(fieldset + fieldset .hs-form-field > label),
+	:deep(.hs-dependent-field > * + * .hs-form-field > label) {
+		display: block;
+		margin-block-start: var(--space-6);
 	}
 
 	:deep(input[type='submit']) {
@@ -152,10 +155,33 @@ watch(formId, renderHsForm);
 		}
 	}
 
+	:deep(.hs-field-desc) {
+		color: var(--gray-400);
+		padding: 0;
+	}
+
 	:deep(select) {
 		appearance: none;
 	}
 
+	:deep(.inputs-list) {
+		list-style: none;
+		padding: 0;
+		margin-block-start: var(--space-6);
+	}
+
+	:deep(.hs-form-booleancheckbox > label) {
+		display: flex;
+		align-items: center;
+
+		input {
+			height: auto;
+			width: auto !important;
+			margin: 0;
+			margin-right: 0.5rem;
+		}
+	}
+
 	:deep(.hs-fieldtype-select .input) {
 		position: relative;
 
@@ -222,12 +248,16 @@ watch(formId, renderHsForm);
 		}
 
 		input:not([type='submit']) {
-			min-inline-size: var(--space-80);
+			min-inline-size: var(--space-64);
 		}
 
 		input[type='submit'] {
 			height: 100%;
 		}
+
+		.hs-form-field {
+			flex-grow: 1;
+		}
 	}
 
 	&.inline.align-center :deep(form) {

components/Base/Panel.vue

@@ -1,15 +1,15 @@
 <template>
 	<div class="base-panel-container">
 		<div class="base-panel">
-			<div v-if="$slots['header']" class="base-panel-header">
+			<div class="base-panel-header">
 				<slot name="header" />
 			</div>
 
 			<div class="base-panel-content">
 				<slot />
 			</div>
 
-			<div v-if="$slots['footer']" class="base-panel-footer">
+			<div class="base-panel-footer">
 				<slot name="footer" />
 			</div>
 		</div>
@@ -39,5 +39,14 @@
 		gap: var(--space-10);
 		padding: var(--space-10);
 	}
+
+	@container (width > 50rem) {
+		.base-panel-header,
+		.base-panel-footer {
+			&:empty {
+				display: none;
+			}
+		}
+	}
 }
 </style>

components/Base/Quote.vue

@@ -12,7 +12,7 @@ defineProps<BaseQuoteProps>();
 <template>
 	<div class="base-quote">
 		<!-- eslint-disable-next-line vue/no-v-html -->
-		<blockquote class="quote" v-html="quote" />
+		<blockquote v-links class="quote" v-html="quote" />
 
 		<BaseByline :name="personName" :title="personTitle" :image="personImage" />
 	</div>

components/Base/Text.vue

@@ -26,6 +26,7 @@ withDefaults(defineProps<BaseTextProps>(), {
 	<div class="base-text-container">
 		<!-- eslint-disable vue/no-v-html -->
 		<div
+			v-links
 			class="base-text"
 			:class="[`align-${align}`, `size-${size}`, `type-${type}`, `color-${color}`]"
 			v-html="content"

components/Base/Video.vue

@@ -56,6 +56,7 @@ const iframeSrc = computed(() => {
 		class="base-video"
 		:autoplay="autoplay"
 		:muted="autoplay"
+		:playsinline="autoplay"
 		:controls="controls"
 		:loop="loop"
 	/>

components/Block/Accordion.vue

@@ -12,6 +12,13 @@ const { data: block } = useAsyncData(props.uuid, () =>
 		})
 	)
 );
+
+useSchemaOrg([
+	defineQuestion({
+		name: unref(block)?.title,
+		/* @TODO  Get the content of the first block to use as an answer */
+	}),
+]);
 </script>
 
 <template>

components/Block/Button.vue

@@ -23,6 +23,5 @@ const { data: block } = useAsyncData(props.uuid, () =>
 		:size="block.size"
 		:label="block.label ?? undefined"
 		:outline="block.outline"
-		:target="block.external_url ? '_blank' : undefined"
 	/>
 </template>

components/Block/CardGroupDynamic.vue

@@ -54,7 +54,7 @@ const { data: cards, pending } = useAsyncData(
 		if (context.collection === 'team') {
 			const teamItems = await $directus.request(
 				$readItems('team', {
-					fields: ['image', 'name', 'job_title', 'slug'],
+					fields: ['image', 'name', 'job_title', 'slug', 'resources', 'type'],
 					filter: unref(filter) as Query<Schema, Team>['filter'],
 					sort: context.sort
 						? [((context.sort_direction === 'desc' ? '-' : '') + context.sort) as keyof Team]
@@ -64,12 +64,13 @@ const { data: cards, pending } = useAsyncData(
 				})
 			);
 
-			return teamItems.map(({ image, name, job_title, slug }) => ({
+			return teamItems.map(({ image, name, job_title, slug, type, resources }) => ({
 				title: name,
 				image,
 				avatar: null,
 				description: job_title,
-				href: `/team/${slug}`,
+				// Don't create a link for non-core team members or guest authors without resources
+				href: type === 'core_team' || (resources && resources.length > 0) ? `/team/${slug}` : undefined,
 				badge: null,
 			}));
 		} else if (context.collection === 'resources') {

components/Block/Code.vue

@@ -55,6 +55,7 @@ const activeSnippet = ref(0);
 				v-for="(snippet, index) in snippets"
 				v-show="activeSnippet === index"
 				:key="snippet.name"
+				v-links
 				class="snippet"
 				v-html="snippet.html"
 			/>
@@ -78,8 +79,10 @@ const activeSnippet = ref(0);
 	display: flex;
 	gap: var(--space-2);
 	padding: var(--space-2) var(--space-5);
+	overflow-x: auto;
 
 	button {
+		flex-shrink: 0;
 		color: var(--gray-400);
 		font-size: var(--font-size-sm);
 		line-height: var(--line-height-sm);

components/Block/Header.vue

@@ -77,6 +77,14 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	}
 }
 
+.size-large {
+	@container (width > 35rem) {
+		& > * + * {
+			margin-block-start: var(--space-4);
+		}
+	}
+}
+
 .size-title {
 	grid-column: standard !important;