Initial Changes

Author: connorwinston

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1 @@
+# Directus Docs

app/app.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ConfigProvider } from 'radix-vue';
+
+const site = useSiteConfig();
+
+// Base HTML Head Configuration
+useHead({
+	meta: [
+		{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
+	],
+	link: [
+		{ rel: 'icon', href: '/favicon.ico' },
+	],
+	htmlAttrs: {
+		lang: 'en',
+	},
+});
+
+// Base SEO Configuration
+useSeoMeta({
+	titleTemplate: `%s - ${site.name}`,
+	ogSiteName: site.name,
+	twitterCard: 'summary_large_image',
+});
+
+const useIdFunction = () => useId();
+</script>
+
+<template>
+	<ConfigProvider :use-id="useIdFunction">
+		<NuxtLayout>
+			<NuxtPage />
+		</NuxtLayout>
+	</ConfigProvider>
+</template>

app/assets/css/_reset.scss

@@ -0,0 +1,40 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+}
+
+body {
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}

app/assets/css/_vars.scss

@@ -0,0 +1,101 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Poppins:wght@400;500;600;700&display=swap');
+
+:root {
+	--purple--light-3: #E0DAFF;
+	--purple--light-2: #C2B4FF;
+	--purple--light-1: #947CFF;
+	--purple: #6644ff;
+	--purple--dark-1: #4C2DDB;
+	--purple--dark-2: #201262;
+
+	--pink--light-3: #FFEBF8;
+	--pink--light-2: #FFD6F1;
+	--pink--light-1: #FFB8E7;
+	--pink: #ff99dd;
+	--pink--dark-1: #D064AC;
+	--pink--dark-2: #4F133B;
+
+	--blue--light-3: #DAEBFC;
+	--blue--light-2: #B3D7F9;
+	--blue--light-1: #8FC4F7;
+	--blue: #68B0F4;
+	--blue--dark-1: #5A93C8;
+	--blue--dark-2: #4B769B;
+
+	--green--light-3: #E6FAF5;
+	--green--light-2: #7FE3CA;
+	--green--light-1: #40D6B1;
+	--green: #01C897;
+	--green--dark-1: #08A582;
+	--green--dark-2: #17826D;
+
+	--yellow--light-3: #FEF0D3;
+	--yellow--light-2: #FDE2A7;
+	--yellow--light-1: #FCD37B;
+	--yellow: #FBC54E;
+	--yellow--dark-1: #C8A34B;
+	--yellow--dark-2: #948049;
+
+	--red--light-3: #FDEEF0;
+	--red--light-2: #F0A7B3;
+	--red--light-1: #EA7D8F;
+	--red: #E35169;
+	--red--dark-1: #B64C5F;
+	--red--dark-2: #884756;
+
+	--typography-1: #19212C;
+	--typography-2: #8196B0;
+	--typography-3: #BECBDC;
+	--typography--dark-1: #FAFBFC;
+	--typography--dark--2: #F6F8FA;
+	--typography--dark--3: #ECF0F5;
+
+	--bg: white;
+	--bg-2: #F7FAFC;
+	--bg-3: #F0F4F9;
+	--bg--dark: #18222F;
+	--bg--dark-2: #172940;
+	--bg--dark-3: #263B56;
+
+	--border: #F0F4F9;
+	--border-2: #D3DAE4;
+	--border-3: #A2B5CD;
+
+	--font--body: 'IBM Plex Sans', sans-serif;
+	--font--header: 'Poppins', sans-serif;
+	--font--code: 'IBM Plex Mono', monospace;
+
+	--primary: var(--purple);
+	--primary--light: var(--purple--light-1);
+	--primary--dark: var(--purple--dark-1);
+	--secondary: var(--pink);
+	--secondary--light: var(--pink--light-1);
+	--secondary--dark: var(--pink--dark-1);
+	--typography: var(--typography-1);
+	--typography--subdued: var(--typography-2);
+	--typography--subtle: var(--typography-3);
+	--background: var(--bg);
+	--background--subdued: var(--bg-2);
+	--background--subtle: var(--bg-3);
+
+
+	--width-md: 768px;
+	--width-lg: 1024px;
+	--width-xl: 1280px;
+	--width-2xl: 1440px;
+	--max-width: var(--width-2xl);
+
+	--sidebar-width: 280px;
+	--page-padding: 24px;
+	--border-radius: 6px;
+	--nav-spacing-under: 4rem;
+
+	--nav-font: 14px;
+	--nav-padding: 8px;
+
+	--section--dev-docs: var(--purple);
+	--section--api-reference: var(--green);
+	--section--tutorials: var(--pink);
+	--section--cloud: var(--blue);
+	--section--community: var(--red);
+}

app/assets/css/main.scss

@@ -0,0 +1,132 @@
+@use 'reset';
+@use 'vars';
+
+body {
+	font-family: var(--font--body);
+	color: var(--typography-1);
+}
+
+a {
+	text-decoration: underline;
+	color: inherit;
+}
+
+h1,
+h2,
+h3,
+h4 {
+	font-family: var(--font--header);
+	font-weight: 600;
+	& a {
+		text-decoration: none;
+	}
+}
+
+code,
+pre {
+	font-family: var(--font--code);
+}
+
+.container {
+	max-width: var(--max-width);
+	padding: 0 var(--page-padding);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.container .container {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.prose {
+	line-height: 1.9;
+	h1 {
+		font-size: 2rem;
+	}
+	> h2,
+	h2.header-with-badge {
+		margin-top: 3rem;
+	}
+	h3 {
+		margin-top: 2rem;
+	}
+	> h2 + h3 {
+		margin-top: 1rem;
+	}
+	h1, h2, h3, h4 {
+		margin-bottom: 0.3rem;
+		code {
+			font-size: 1.1rem;
+		}
+	}
+	p, img, ul, ol, table, .TabsRoot {
+		margin-bottom: 1rem;
+	}
+	.box, .directus-cloud, .callout, .prose-pre {
+		margin-bottom: 1.5rem;
+		margin-top: 1.5rem;
+	}
+	ul, ol {
+		ul, ol {
+			margin-top: 0.5rem;
+		}
+	}
+	a:not(.callout):not([href*='directus.io']):not([href*='directus.cloud']):not([href*='localhost']):not([href*='127.0.0.1'])[href*='//']{
+		display: inline-block;
+		&:after {
+			--size: 1rem;
+			content: '';
+			background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0ibTE2IDguNGwtOC45IDguOXEtLjI3NS4yNzUtLjcuMjc1dC0uNy0uMjc1dC0uMjc1LS43dC4yNzUtLjdMMTQuNiA3SDdxLS40MjUgMC0uNzEyLS4yODhUNiA2dC4yODgtLjcxMlQ3IDVoMTBxLjQyNSAwIC43MTMuMjg4VDE4IDZ2MTBxMCAuNDI1LS4yODguNzEzVDE3IDE3dC0uNzEyLS4yODhUMTYgMTZ6Ii8+PC9zdmc+');
+			display: inline-block;
+			background-size: var(--size);
+			width: var(--size);
+			height: var(--size);
+		}
+	}
+	img {
+		border-radius: var(--border-radius);
+		display: block;
+		width: 100%;
+	}
+	code {
+		background: var(--background--subtle);
+		font-size: 0.8rem;
+		padding: 0rem 0.2rem;
+		border-radius: 4px;
+		border: 1px solid var(--border-2);
+	}
+	pre code {
+		font-weight: normal;
+		background: inherit;
+		padding: 0;
+		border-radius: 0;
+		border: none;
+	}
+	table, td, th {
+		border: 1px solid var(--border-2);
+		border-collapse: collapse;
+		text-align: left;
+	}
+	table {
+		width: 100%;
+		border-radius: var(--border-radius);
+	}
+	th {
+		font-weight: bold;
+		background: var(--bg-2);
+	}
+	td, th {
+		padding: 0.5rem 0.75rem;
+	}
+	svg.icon {
+		margin-bottom: 4px;
+	}
+}
+
+.section-title {
+	color: var(--typography--subdued);
+	text-transform: uppercase;
+	font-size: var(--nav-font);
+	font-weight: 500;
+}