[WIP] Docs Updates #5 - Layout Changes

app/app.config.ts

@@ -7,21 +7,63 @@ export default defineAppConfig({
 		colors: {
 			primary: 'purple',
 			secondary: 'pink',
-			neutral: 'slate',
+			neutral: 'neutral',
 		},
 
+		button: {
+			slots: {
+				base: 'rounded-l-full rounded-r-full',
+			},
+		},
+
+		container: {
+			base: '@max-[40rem]/docs-pane:px-4! @min-[40rem]/docs-pane:px-6! @min-[64rem]/docs-pane:px-8!',
+		},
+		header: {
+			slots: {
+				left: '@max-[40rem]/docs-pane:flex-none! @min-[40rem]/docs-pane:flex-1!',
+				center: '@max-[40rem]/docs-pane:hidden! @min-[40rem]/docs-pane:flex!',
+				right: '@max-[40rem]/docs-pane:flex-none! @min-[40rem]/docs-pane:flex-1!',
+				toggle: '@max-[40rem]/docs-pane:flex! @min-[40rem]/docs-pane:hidden!',
+				content: '@max-[40rem]/docs-pane:block! @min-[40rem]/docs-pane:hidden!',
+				overlay: '@max-[40rem]/docs-pane:block! @min-[40rem]/docs-pane:hidden!',
+			},
+		},
+		contentToc: {
+			slots: {
+				bottom: '@max-[64rem]/docs-pane:hidden! @min-[64rem]/docs-pane:flex!',
+			},
+		},
 		content: {
 			callout: {
 				// Fix background color of pre > code blocks
 				wrapper: '[&_pre>code]:!bg-transparent',
 			},
 		},
-		page: {
+		contentSurround: {
+			slots: {
+				root: 'flex flex-col-reverse sm:grid sm:grid-cols-2 gap-8',
+			},
+		},
+		pageHeader: {
 			slots: {
-				root: 'lg:gap-8',
+				wrapper: '@max-[40rem]/docs-pane:flex-col! @max-[40rem]/docs-pane:items-stretch! @max-[40rem]/docs-pane:justify-start! @min-[40rem]/docs-pane:flex-row! @min-[40rem]/docs-pane:items-center! @min-[40rem]/docs-pane:justify-between!',
+				title: 'text-3xl sm:text-4xl text-pretty font-display font-medium text-highlighted',
 			},
 		},
 		prose: {
+			h1: {
+				base: 'font-display font-medium',
+			},
+			h2: {
+				base: 'font-display font-medium',
+			},
+			h3: {
+				base: 'font-display font-medium',
+			},
+			h4: {
+				base: 'font-display font-medium',
+			},
 			pre: {
 				slots: {
 					base: 'text-xs/4',
@@ -92,7 +134,7 @@ export default defineAppConfig({
 					{
 						label: 'Security',
 						to: '/guides/security/best-practices',
-						icon: 'i-ph-shield-check',
+						icon: 'material-symbols:verified-user-outline',
 					},
 					{
 						label: 'AI',
@@ -112,17 +154,17 @@ export default defineAppConfig({
 					{
 						label: 'Cloud',
 						to: '/cloud/getting-started/introduction',
-						icon: 'i-ph-cloud',
+						icon: 'material-symbols:cloud-outline',
 					},
 					{
 						label: 'Self-Hosting',
 						to: '/self-hosting/overview',
-						icon: 'i-ph-hard-drives',
+						icon: 'material-symbols:dns-outline',
 					},
 					{
 						label: 'Configuration',
 						to: '/configuration/intro',
-						icon: 'i-ph-gear',
+						icon: 'material-symbols:settings-outline',
 					},
 				],
 			},
@@ -132,22 +174,22 @@ export default defineAppConfig({
 					{
 						label: 'Frameworks',
 						to: '/frameworks',
-						icon: 'i-ph-brackets-curly',
+						icon: 'material-symbols:data-object',
 					},
 					{
 						label: 'Tutorials',
 						to: '/tutorials',
-						icon: 'i-ph-article',
+						icon: 'material-symbols:article-outline',
 					},
 					{
 						label: 'Community',
 						to: '/community/overview/welcome',
-						icon: 'i-ph-hand-heart',
+						icon: 'material-symbols:volunteer-activism-outline',
 					},
 					{
 						label: 'Releases',
 						to: '/releases',
-						icon: 'i-ph-notebook',
+						icon: 'material-symbols:menu-book-outline',
 					},
 				],
 			},

app/app.vue

@@ -1,27 +1,67 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content';
-import { spec } from '@directus/openapi';
 
-const { data: navigation } = useAsyncData('content-navigation', () => queryCollectionNavigation('content', ['title', 'description', 'icon', 'links']));
+const { data: navigation } = await useAsyncData('content-navigation', () => queryCollectionNavigation('content', ['title', 'description', 'icon', 'links']));
 
-provide('openapi', spec);
 provide('navigation', navigation as Ref<ContentNavigationItem[]>);
 
 defineOgImage('Default', {
 	title: 'Directus Docs',
 });
+
+if (import.meta.client) {
+	const router = useRouter();
+
+	function getHashTarget(hash: string) {
+		const id = decodeURIComponent(hash.replace(/^#/, ''));
+		return document.getElementById(id) ?? document.querySelector(hash) as HTMLElement | null;
+	}
+
+	function scrollToHash(hash: string) {
+		const scroller = document.getElementById('docs-scroll');
+		const target = getHashTarget(hash);
+		if (!target) return false;
+
+		if (scroller) {
+			scroller.scrollTo({ top: Math.max(0, target.offsetTop - 80), behavior: 'smooth' });
+		}
+		else {
+			window.scrollTo({ top: Math.max(0, target.offsetTop - 80), behavior: 'smooth' });
+		}
+		return true;
+	}
+
+	router.options.scrollBehavior = async (to, from, savedPosition) => {
+		const scroller = document.getElementById('docs-scroll');
+		const scrollTarget = scroller ?? window;
+
+		if (savedPosition) {
+			scrollTarget.scrollTo(savedPosition.left ?? 0, savedPosition.top ?? 0);
+			return;
+		}
+
+		if (to.hash) {
+			await nextTick();
+			requestAnimationFrame(() => scrollToHash(to.hash));
+			return false;
+		}
+
+		if (to.path !== from.path) {
+			await nextTick();
+			scrollTarget.scrollTo(0, 0);
+		}
+	};
+}
 </script>
 
 <template>
 	<UApp>
 		<NuxtLoadingIndicator color="var(--color-primary)" />
-		<DocsBanner />
-		<DocsHeader />
-		<UMain>
-			<NuxtLayout>
-				<NuxtPage />
-			</NuxtLayout>
-		</UMain>
-		<DocsFooter />
+		<div
+			id="docs-scroll"
+			class="h-screen min-w-0 overflow-y-auto overflow-x-hidden scroll-smooth"
+		>
+			<DocsShell />
+		</div>
 	</UApp>
 </template>

app/assets/css/main.css

@@ -2,10 +2,12 @@
 @import "@nuxt/ui";
 
 @source "../../../content/**/*";
+@source "../../../modules/**/*.{vue,ts}";
 
 @theme static {
 	--font-sans: "Inter", sans-serif;
-	--font-display: "Poppins", sans-serif;
+	--font-display: "Source Serif 4", serif;
+	--font-mono: "IBM Plex Mono", monospace;
 
 	--color-purple-50: #f3f2ff;
 	--color-purple-100: #e9e8ff;
@@ -35,6 +37,14 @@
 	--diff-green: rgba(16, 185, 129, 0.2);
 }
 
+.dark {
+	--ui-bg: #090909;
+}
+
+::selection {
+	background: color-mix(in srgb, var(--color-primary) 50%, var(--ui-bg) 50%);
+}
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -66,6 +76,12 @@ html {
 	scroll-behavior: smooth;
 }
 
+.sp-divider,
+.sp-divider *,
+.sp-divider > :first-child::after {
+	cursor: col-resize !important;
+}
+
 pre {
 	> code {
 		& .line.diff.remove {
@@ -78,3 +94,56 @@ pre {
 		}
 	}
 }
+
+html .shiki span {
+	color: var(--shiki-default);
+	background: var(--shiki-default-bg);
+	font-style: var(--shiki-default-font-style);
+	font-weight: var(--shiki-default-font-weight);
+	text-decoration: var(--shiki-default-text-decoration);
+}
+
+html.light .shiki span,
+html .light .shiki span {
+	color: var(--shiki-light);
+	background: var(--shiki-light-bg);
+	font-style: var(--shiki-light-font-style);
+	font-weight: var(--shiki-light-font-weight);
+	text-decoration: var(--shiki-light-text-decoration);
+}
+
+html.dark .shiki span,
+html .dark .shiki span {
+	color: var(--shiki-dark);
+	background: var(--shiki-dark-bg);
+	font-style: var(--shiki-dark-font-style);
+	font-weight: var(--shiki-dark-font-weight);
+	text-decoration: var(--shiki-dark-text-decoration);
+}
+
+.scrollbar-thin {
+	scrollbar-width: thin;
+	scrollbar-color: var(--ui-border-accented) var(--ui-bg-muted);
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+	background: var(--ui-bg-muted);
+	border-radius: 999px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+	background-color: var(--ui-border-accented);
+	border-radius: 999px;
+	border: 2px solid transparent;
+	background-clip: content-box;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+	background-color: var(--ui-text-dimmed);
+	background-clip: content-box;
+}