Merge branch 'main' into oas-fixed

.env.example

@@ -1,3 +1,9 @@
 NUXT_PUBLIC_SITE_URL=http://localhost:3000
 NUXT_SITE_ENV=preview
-NUXT_PRODUCT_DIRECTUS_URL=https://product-team.directus.app
+NUXT_PUBLIC_NEWSLETTER_URL=https://product-team.directus.app/flows/trigger/webhook_id
+NUXT_PUBLIC_PRODUCT_DIRECTUS_URL=https://product-team.directus.app
+NUXT_IMAGE_DOMAINS="product-team.directus.app"
+POSTHOG_API_KEY="phc_api_key"
+POSTHOG_API_HOST="https://us.i.posthog.com"
+ALGOLIA_API_KEY="api_key"
+ALGOLIA_APPLICATION_ID="application_id"

.github/workflows/lint-app.yaml

@@ -14,6 +14,7 @@ concurrency:
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
+  NUXT_PUBLIC_PRODUCT_DIRECTUS_URL: https://product-team.directus.app
 
 jobs:
   app-lint:

.github/workflows/lint-oas.yaml

@@ -14,6 +14,7 @@ concurrency:
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
+  NUXT_PUBLIC_PRODUCT_DIRECTUS_URL: https://product-team.directus.app
 
 jobs:
   oas-lint:

.github/workflows/typecheck.yaml

@@ -14,6 +14,7 @@ concurrency:
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
+  NUXT_PUBLIC_PRODUCT_DIRECTUS_URL: https://product-team.directus.app
 
 jobs:
   typecheck:
@@ -28,3 +29,4 @@ jobs:
 
       - name: Run Typechecker
         run: pnpm typecheck
+

app/assets/css/_vars.scss

@@ -3,9 +3,9 @@
 
 :root {
 
-	--font--body: 'IBM Plex Sans', sans-serif;
+	--font--body: 'Inter', sans-serif;
 	--font--header: 'Poppins', sans-serif;
-	--font--code: 'IBM Plex Mono', monospace;
+	--font--code: 'Fira Mono', monospace;
 
 	--width-md: 768px;
 	--width-lg: 1024px;
@@ -35,7 +35,7 @@
 	--area--community: var(--red);
 }
 
-.dark-mode {
+.dark {
 	--typography: var(--white);
 	--typography-subdued: color-mix(in hsl shorter hue, var(--white) 70%, var(--black) 30%);
 

app/assets/css/main.scss

@@ -6,6 +6,21 @@ body {
 	background-color: var(--background);
 	font-family: var(--font--body);
 	color: var(--typography);
+	max-width: 100vw;
+}
+
+.light {
+	color-scheme: light;
+}
+
+.dark {
+	color-scheme: dark;
+}
+
+html {
+	overflow: overlay;
+	scrollbar-color: var(--border-subtle) var(--background-subdued);
+	scrollbar-width: thin;
 }
 
 a {
@@ -34,6 +49,9 @@ pre {
 	padding: 0 24px;
 	margin-left: auto;
 	margin-right: auto;
+	@media (max-width: 768px) {
+		padding: 0 12px;
+	}
 }
 
 .container .container {
@@ -62,7 +80,7 @@ pre {
 			font-size: 1.1rem;
 		}
 	}
-	p, img, ul, ol, table, .TabsRoot {
+	p, img, ul, ol, .prose-table-wrapper, .TabsRoot {
 		margin-bottom: 1rem;
 	}
 	.box, .directus-cloud, .callout, .prose-pre {
@@ -74,7 +92,7 @@ pre {
 			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*='//']{
+	a:not(.article-card):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;
@@ -84,7 +102,7 @@ pre {
 			background-size: var(--size);
 			width: var(--size);
 			height: var(--size);
-		}
+			vertical-align: sub;		}
 	}
 	img {
 		border-radius: var(--border-radius);
@@ -124,6 +142,12 @@ pre {
 	svg.icon {
 		margin-bottom: 4px;
 	}
+	video {
+		width: 100%;
+		border-radius: var(--border-radius);
+		overflow: hidden;
+		margin-bottom: 1rem;
+	}
 }
 
 .section-title {
@@ -132,3 +156,8 @@ pre {
 	font-size: 14px;
 	font-weight: 500;
 }
+
+hr {
+	border: 0;
+	border-top: 2px solid var(--border);
+}