Merge branch 'directus-labs:main' into portal-account-page

.directus/docker-compose.yaml

@@ -17,7 +17,7 @@ services:
     image: redis:6
 
   directus:
-    image: directus/directus:10.8.3
+    image: directus/directus:10.13.1
     ports:
       - 8055:8055
     volumes:

components/Logo.vue

@@ -2,7 +2,7 @@
 const appConfig = useAppConfig();
 
 const logo = computed(() => {
-	return appConfig.globals.logo_on_dark_bg;
+	return appConfig.globals?.logo_on_dark_bg;
 });
 
 const props = defineProps({

components/TeamCard.vue

@@ -9,10 +9,12 @@ const flipped = ref(false);
 </script>
 <template>
 	<div class="opacity-0 cursor-pointer select-none animate-fade-in" @click="flipped = !flipped">
-		<div class="relative w-full h-full overflow-hidden group rounded-card">
+		<div class="relative w-full aspect-square overflow-hidden group rounded-card">
 			<!-- Front of Team Card -->
 			<NuxtImg
 				v-if="person.image"
+				width="400"
+				height="400"
 				class="object-cover w-full h-full transition duration-300 grayscale group-hover:grayscale-0"
 				:src="person.image as string"
 				:alt="person.name ?? ''"
@@ -25,23 +27,21 @@ const flipped = ref(false);
 				class="absolute inset-0 p-2 -m-2 overflow-hidden bg-primary/80 backdrop-blur-sm"
 				:initial="{
 					opacity: 0,
-					y: 100,
-					x: 100,
+					y: 25,
+					x: 200,
 					scale: 0.9,
 				}"
 				:enter="{
 					opacity: 1,
 					scale: 1,
 					x: 0,
 					y: 0,
-					transformOrigin: 'bottom right',
 				}"
 				:leave="{
 					opacity: 0,
 					scale: 0.9,
-					x: 100,
-					y: 100,
-					transformOrigin: 'bottom right',
+					x: 200,
+					y: 25,
 				}"
 			>
 				<div class="relative p-4 space-y-2">
@@ -69,7 +69,7 @@ const flipped = ref(false);
 				<TypographyHeadline v-if="person.name" :content="person.name" size="sm" class="text-white drop-shadow">
 					{{ person?.name }}
 				</TypographyHeadline>
-				<TypographyTitle v-if="person.job_title">
+				<TypographyTitle v-if="person.job_title" class="text-white/50">
 					{{ person?.job_title }}
 				</TypographyTitle>
 			</div>

components/base/UForm.vue

@@ -58,7 +58,8 @@ watch(
 		<div class="mb-4">
 			<VAlert v-if="error" type="error">Oops! {{ error }}</VAlert>
 			<VAlert v-if="form.on_success === 'message' && success" type="success">
-				{{ form.success_message ?? 'Success! Your form has been submitted.' }}
+				<div v-if="form.success_message" v-dompurify-html="form.success_message"></div>
+				<p v-else>Success! Your form has been submitted.</p>
 			</VAlert>
 		</div>
 		<div>

components/blocks/Columns.vue

@@ -23,28 +23,27 @@ defineProps<{
 					<BlocksButtonGroup v-if="row?.button_group" :data="row?.button_group as BlockButtonGroup" class="mt-4" />
 				</div>
 				<div
-					class="order-first block w-full overflow-hidden border aspect-square dark:border-gray-700 rounded-card"
+					v-if="row.image"
+					v-motion
+					class="order-first block w-full h-full overflow-hidden border dark:border-gray-700 rounded-card"
+					:initial="{ opacity: 0, scale: 0.5, y: 0 }"
+					:visibleOnce="{ opacity: 1, scale: 1, y: 0 }"
+					:duration="1000"
+					:delay="250"
 					:class="[
 						{
 							'lg:order-last': row?.image_position === 'right',
 							'lg:order-first': row?.image_position === 'left',
 						},
 					]"
 				>
-					<div
-						v-motion
-						:initial="{ opacity: 0, scale: 0.8, y: 50 }"
-						:visibleOnce="{ opacity: 1, scale: 1, y: 0 }"
-						:duration="1000"
-						:delay="250"
-					>
-						<NuxtImg
-							v-if="row.image"
-							:alt="safeRelation(row.image)?.description ?? ''"
-							:src="safeRelationId(row.image) ?? ''"
-							class="object-cover object-center w-full h-full bg-gray-100 rounded-card dark:brightness-90"
-						/>
-					</div>
+					<NuxtImg
+						:alt="safeRelation(row.image)?.description ?? ''"
+						:src="safeRelationId(row.image) ?? ''"
+						height="600"
+						width="600"
+						class="object-cover object-center w-full h-full bg-gray-100 rounded-card dark:brightness-90"
+					/>
 				</div>
 			</div>
 		</div>

components/navigation/MobileMenu.vue

@@ -69,7 +69,7 @@ watch(
 					<NuxtLink href="/">
 						<Logo class="h-6 dark:text-white" />
 					</NuxtLink>
-					<VText v-if="globals.tagline" class="pb-4 mt-2">
+					<VText v-if="globals?.tagline" class="pb-4 mt-2">
 						{{ globals.tagline }}
 					</VText>
 				</div>

components/navigation/TheFooter.vue

@@ -68,7 +68,7 @@ const { data: form } = await useAsyncData(
 					<NuxtLink href="/">
 						<Logo class="h-8 dark:text-white" />
 					</NuxtLink>
-					<VText v-if="globals.tagline" text-color="light" class="mt-2">
+					<VText v-if="globals?.tagline" text-color="light" class="mt-2">
 						{{ globals.tagline }}
 					</VText>
 				</div>
@@ -106,7 +106,7 @@ const { data: form } = await useAsyncData(
 		<div class="pt-6 mx-auto border-t dark:border-t-gray-700 max-w-7xl md:flex md:items-center md:justify-between">
 			<div class="flex items-center justify-center space-x-6 md:order-last md:mb-0">
 				<NuxtLink
-					v-for="link in globals.social_links"
+					v-for="link in globals?.social_links"
 					:key="link.url"
 					:href="link.url"
 					class="w-6 h-6 text-white"
@@ -119,7 +119,9 @@ const { data: form } = await useAsyncData(
 			<div class="mt-8 md:mt-0 md:order-1">
 				<span class="mt-2 text-gray-600 dark:text-gray-400">
 					Copyright © 1988 - {{ new Date().getFullYear() }}
-					<NuxtLink href="/" class="mx-2 hover:text-primary" rel="noopener noreferrer">{{ globals.title }}.</NuxtLink>
+					<NuxtLink v-if="globals?.title" href="/" class="mx-2 hover:text-primary" rel="noopener noreferrer">
+						{{ globals.title }}.
+					</NuxtLink>
 					All rights reserved.
 				</span>
 				<!-- You're free to remove this footer if you want. But we'd appreciate it if you keep the credits. -->

components/navigation/TheHeader.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-const {
-	theme,
-	globals: { title },
-} = useAppConfig();
+const { theme, globals } = useAppConfig();
 
 const {
 	data: navigation,
@@ -54,7 +51,7 @@ const {
 		<div class="flex items-center bg-gray-900 justify-between py-2 px-6 md:flex-1 rounded-card">
 			<NuxtLink href="/" class="py-2">
 				<Logo class="h-6 text-white" />
-				<span class="sr-only">{{ title }}</span>
+				<span v-if="globals?.title" class="sr-only">{{ globals.title }}</span>
 			</NuxtLink>
 			<nav class="hidden md:flex md:space-x-4 lg:space-x-6" aria-label="Global">
 				<NavigationMenuItem v-for="item in navigation?.items" :key="item.id" :item="item" />

modules/directus/runtime/composables/useDirectusAuth.ts

@@ -1,4 +1,3 @@
-import jwtDecode from 'jwt-decode';
 import { readMe, passwordRequest, passwordReset } from '@directus/sdk';
 import type { RestClient, AuthenticationClient } from '@directus/sdk';
 import type { Schema } from '~/types/schema';
@@ -60,18 +59,11 @@ export default function useDirectusAuth<DirectusSchema extends object>() {
 		user.value = response as User;
 	}
 
-	async function isTokenExpired(token: string) {
-		const decodedToken = jwtDecode(token) as { exp: number };
-		const expirationDate = new Date(decodedToken.exp * 1000);
-		return expirationDate < new Date();
-	}
-
 	return {
 		user,
 		login,
 		logout,
 		fetchUser,
-		isTokenExpired,
 		_loggedIn,
 	};
 }

modules/directus/runtime/plugins/directus.ts

@@ -1,52 +1,16 @@
 import { createDirectus, rest, authentication } from '@directus/sdk';
-import type { AuthenticationClient, RestClient, AuthenticationStorage, AuthenticationData } from '@directus/sdk';
 import type { Schema } from '~/types/schema';
 
-import {
-	defineNuxtPlugin,
-	addRouteMiddleware,
-	useRuntimeConfig,
-	useState,
-	useDirectusAuth,
-	useRoute,
-	useNuxtApp,
-} from '#imports';
+import { defineNuxtPlugin, useRuntimeConfig, useRoute } from '#imports';
 
 export default defineNuxtPlugin((nuxtApp) => {
 	const route = useRoute();
 	const config = useRuntimeConfig();
-	const directusUrl = config.public.directus.rest.baseUrl as string;
+	const directusURL = config.public.directus.rest.baseUrl as string;
 
-	const { isTokenExpired } = useDirectusAuth();
-
-	// We're creating a custom storage class to use the Nuxt so we can use auth on the server and clien
-	class CookieStorage {
-		get() {
-			const cookie = useCookie('directus-auth');
-			return cookie.value;
-		}
-
-		set(value: AuthenticationData) {
-			const cookie = useCookie('directus-auth');
-			cookie.value = value as any;
-		}
-	}
-
-	const directus: RestClient<Schema> & AuthenticationClient<Schema> = createDirectus<Schema>(directusUrl, {
-		globals: {
-			fetch: $fetch, // We're using the built-in Nuxt $fetch from ofetch
-		},
-	})
-		.with(authentication('json', { storage: new CookieStorage() as AuthenticationStorage, credentials: 'include' }))
-		.with(
-			rest({
-				onRequest: async (request) => {
-					const userToken = await directus.getToken();
-
-					return request;
-				},
-			}),
-		);
+	const directus = createDirectus<Schema>(directusURL, { globals: { fetch: $fetch } })
+		.with(authentication('cookie', { credentials: 'include' }))
+		.with(rest({ credentials: 'include' }));
 
 	// ** Live Preview Bits **
 	// Check if we are in preview mode

nuxt.config.ts

@@ -25,17 +25,15 @@ export default defineNuxtConfig({
 	css: ['~/assets/css/tailwind.css', '~/assets/css/main.css'],
 
 	modules: [
-		'@nuxt/devtools', // https://devtools.nuxtjs.org/
 		'@nuxt/image',
-		'@nuxt/ui',
-		'@nuxtjs/color-mode',
-		'@nuxtjs/google-fonts',
-		'@nuxtjs/sitemap', // https://nuxtseo.com/sitemap/getting-started/how-it-works
+		'@nuxt/ui', // https://ui.nuxt.com
+		'@nuxtjs/color-mode', // https://color-mode.nuxtjs.org
+		'@nuxtjs/google-fonts', // https://google-fonts.nuxtjs.org
+		'@nuxtjs/seo', // https://nuxtseo.com
+		'@formkit/auto-animate/nuxt',
 		'@vueuse/motion/nuxt', // https://motion.vueuse.org/nuxt.html
 		'@vueuse/nuxt', // https://vueuse.org/
-		'nuxt-icon', // https://github.com/nuxt-modules/icon
-		'nuxt-og-image',
-		'nuxt-schema-org', // https://nuxtseo.com/schema-org/guides/quick-setup
+		'@nuxt/icon', // https://github.com/nuxt-modules/icon
 	],
 
 	experimental: {
@@ -72,10 +70,6 @@ export default defineNuxtConfig({
 	// Nuxt DevTools - https://devtools.nuxtjs.org/
 	devtools: { enabled: true },
 
-	ui: {
-		icons: 'all',
-	},
-
 	// Color Mode Configuration - https://color-mode.nuxtjs.org/
 	colorMode: {
 		classSuffix: '', // This is so we play nice with TailwindCSS
@@ -139,4 +133,6 @@ export default defineNuxtConfig({
 	build: {
 		transpile: ['v-perfect-signature'],
 	},
+
+	compatibilityDate: '2024-07-28',
 });

package.json

@@ -12,50 +12,46 @@
 		"format": "prettier --write \"**/*.{md,y?(a)ml,json,vue}\""
 	},
 	"devDependencies": {
-		"@directus/sdk": "14.0.0",
-		"@directus/types": "11.0.3",
-		"@formkit/auto-animate": "1.0.0-beta.6",
-		"@headlessui/vue": "1.7.16",
-		"@iconify/json": "2.2.166",
-		"@nuxt/devtools": "^1.0.6",
-		"@nuxt/ui": "2.11.1",
-		"@nuxtjs/color-mode": "3.3.2",
-		"@nuxtjs/eslint-config-typescript": "12.1.0",
-		"@nuxtjs/eslint-module": "4.1.0",
-		"@nuxtjs/google-fonts": "3.1.3",
-		"@nuxtjs/sitemap": "5.1.4",
-		"@nuxtjs/tailwindcss": "6.10.3",
-		"@stripe/stripe-js": "2.2.2",
-		"@tailwindcss/forms": "0.5.7",
-		"@tailwindcss/typography": "0.5.10",
-		"@types/uuid": "9.0.7",
-		"@vueuse/core": "10.7.1",
-		"@vueuse/motion": "2.0.0",
-		"@vueuse/nuxt": "10.7.1",
+		"@iconify-json/material-symbols": "^1.1.85",
+		"@iconify-json/mdi": "^1.1.67",
+		"@nuxtjs/eslint-config-typescript": "^12.1.0",
+		"@nuxtjs/eslint-module": "^4.1.0",
+		"@nuxtjs/tailwindcss": "^6.12.1",
+		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/typography": "^0.5.13",
+		"@types/uuid": "^10.0.0",
+		"@vueuse/core": "^10.11.0",
+		"@vueuse/nuxt": "^10.11.0",
 		"eslint": "8.56.0",
-		"eslint-config-prettier": "9.1.0",
-		"eslint-plugin-prettier": "5.1.2",
-		"eslint-plugin-vue": "9.19.2",
-		"floating-vue": "2.0.0-beta.24",
-		"form-data": "4.0.0",
-		"jwt-decode": "3.1.2",
-		"micromark": "4.0.0",
-		"micromark-extension-gfm": "3.0.0",
-		"nuxt": "3.10.3",
-		"nuxt-icon": "0.6.8",
-		"nuxt-schema-org": "3.3.2",
-		"prettier": "3.1.1",
-		"stripe": "13.8.0",
-		"typescript": "5.3.3",
-		"uuid": "9.0.1",
-		"v-perfect-signature": "1.4.0",
-		"vue-tsc": "1.8.27"
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.2.1",
+		"eslint-plugin-vue": "^9.27.0",
+		"prettier": "^3.3.3",
+		"typescript": "^5.5.4",
+		"vue-tsc": "^2.0.29"
 	},
 	"dependencies": {
-		"@nuxt/image": "1.1.0",
-		"nuxt-og-image": "3.0.0-rc.23"
+		"@directus/sdk": "^16.1.1",
+		"@formkit/auto-animate": "^0.8.2",
+		"@headlessui/vue": "^1.7.22",
+		"@nuxt/icon": "^1.3.1",
+		"@nuxt/image": "^1.7.0",
+		"@nuxt/ui": "^2.18.2",
+		"@nuxtjs/color-mode": "^3.4.2",
+		"@nuxtjs/google-fonts": "^3.2.0",
+		"@nuxtjs/seo": "^2.0.0-rc.16",
+		"@stripe/stripe-js": "^4.1.0",
+		"@vueuse/motion": "^2.2.3",
+		"micromark": "^4.0.0",
+		"micromark-extension-gfm": "^3.0.0",
+		"nuxt": "^3.12.4",
+		"stripe": "^16.5.0",
+		"uuid": "^10.0.0",
+		"v-perfect-signature": "^1.4.0",
+		"vue": "^3.4.34",
+		"vue-dompurify-html": "^5.1.0"
 	},
-	"packageManager": "pnpm@8.6.0",
+	"packageManager": "pnpm@9.6.0",
 	"engines": {
 		"node": ">=18.0.0",
 		"pnpm": ">=8.6.0"