Merge branch 'main' into json-ld

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

@@ -155,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;
 

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/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"
 			/>

components/Nav/Banner.vue

@@ -32,7 +32,7 @@ const dismiss = (id: string) => {
 			<NuxtLink class="link" :href="banner.link ?? undefined">
 				<BaseIcon v-if="banner.icon" class="icon" :name="banner.icon" size="small" />
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<span class="content" v-html="banner.content" />
+				<span v-links class="content" v-html="banner.content" />
 				<BaseIcon class="arrow" name="arrow_forward" size="small" />
 			</NuxtLink>
 

components/Nav/Footer.vue

@@ -58,7 +58,7 @@ const socials = {
 						</NuxtLink>
 
 						<!-- eslint-disable-next-line vue/no-v-html -->
-						<div v-if="globals" class="description" v-html="globals.description" />
+						<div v-if="globals" v-links class="description" v-html="globals.description" />
 					</li>
 
 					<li v-for="group of navPrimary.items" :key="group.id">

components/Nav/Header.vue

@@ -121,6 +121,7 @@ watch(
 							v-if="section.url || (section.page as any)?.permalink"
 							:href="(section.page as any)?.permalink ?? section.url ?? undefined"
 							class="section-title"
+							:target="!section.page && section.url ? '_blank' : undefined"
 						>
 							{{ section.title }}
 						</NuxtLink>
@@ -143,7 +144,11 @@ watch(
 										<div v-if="section.children_title" class="subsection-title">{{ section.children_title }}</div>
 										<ul v-if="section.children && section.children.length > 0">
 											<li v-for="link in section.children" :key="link.id">
-												<NuxtLink :href="(link.page as any)?.permalink ?? link.url ?? undefined" class="link">
+												<NuxtLink
+													:href="(link.page as any)?.permalink ?? link.url ?? undefined"
+													class="link"
+													:target="!link.page && link.url ? '_blank' : undefined"
+												>
 													<BaseDirectusImage
 														v-if="link.image"
 														:uuid="(link.image as string)"

plugins/links.ts

@@ -0,0 +1,34 @@
+export default defineNuxtPlugin((nuxtApp) => {
+	nuxtApp.vueApp.directive('links', {
+		mounted(el: HTMLElement) {
+			const anchors = Array.from(el.getElementsByTagName('a'));
+
+			for (const anchor of anchors) {
+				const href = anchor.getAttribute('href');
+
+				if (!href) return;
+
+				const url = new URL(href, window.location.origin);
+
+				const isLocal = url.hostname === 'directus.io';
+
+				if (isLocal) {
+					anchor.addEventListener('click', (e) => {
+						const { pathname, searchParams, hash } = new URL(anchor.href);
+
+						navigateTo({
+							path: pathname,
+							hash: hash,
+							query: Object.fromEntries(searchParams.entries()),
+						});
+
+						e.preventDefault();
+					});
+				} else {
+					anchor.setAttribute('target', '_blank');
+					anchor.setAttribute('rel', 'noopener noreferrer');
+				}
+			}
+		},
+	});
+});