Implement Hannes' feedback

content/1.getting-started/1.create-a-project.md

@@ -55,7 +55,6 @@ Create a `docker-compose.yml` file in the `directus` directory:
 <!-- TODO: Load latest version always -->
 
 ```yaml [docker-compose.yml]
-version: "3"
 services:
 	directus:
 		image: directus/directus:10.10.1
@@ -66,7 +65,6 @@ services:
 			- ./uploads:/directus/uploads
 			- ./extensions:/directus/extensions
 		environment:
-			KEY: "replace-with-random-value"
 			SECRET: "replace-with-random-value"
 			ADMIN_EMAIL: "[email protected]"
 			ADMIN_PASSWORD: "d1r3ctu5"
@@ -82,7 +80,7 @@ services:
 - The `volumes` section maps internal `directus/database` and `directus/uploads` to our local file system alongside the `docker-compose.yml`
   - meaning data is backed up outside of Docker containers.
 - The `environment` section contains any [configuration environment variables](/configuration/overview) we wish to set.
-  - `KEY` and `SECRET` are required and should be long random values. `KEY` is used for telemetry and health tracking, and `SECRET` is used to sign access tokens.
+  - `SECRET` is required and should be a long random value. `SECRET` is used to sign access tokens.
   - `ADMIN_EMAIL` and `ADMIN_PASSWORD` is the initial admin user credentials on first launch.
   - `DB_CLIENT` and `DB_FILENAME` are defining the connection to your database.
   - `WEBSOCKETS_ENABLED` is not required, but enables [Directus Realtime](/realtime/quickstart).

content/10.extensions/3.app-extensions/1.interfaces.md

@@ -18,10 +18,11 @@ The `index.js` or `index.ts` file exports an object that is read by Directus. It
 
 ### Entrypoint Example
 
-```vue
+```js
+import { defineInterface } from '@directus/extensions-sdk'
 import InterfaceComponent from './interface.vue';
 
-export default {
+export default defineInterface({
 	id: 'custom',
 	name: 'Custom',
 	icon: 'box',
@@ -39,7 +40,7 @@ export default {
 			}
 		},
 	],
-};
+});
 ```
 
 ### Properties
@@ -111,4 +112,4 @@ The interface component can emit the following events that will be recognized by
 | `input`         | Update the value of the field.         |
 | `setFieldValue` | Used to set the value of other fields. |
 
-:partial{content="extensions-app-internals"}
+:partial{content="extensions-app-internals"}

content/10.extensions/3.app-extensions/2.displays.md

@@ -19,17 +19,18 @@ The `index.js` or `index.ts` file exports an object that is read by Directus. It
 ### Entrypoint Example
 
 ```js
+import { defineInterface } from '@directus/extensions-sdk'
 import DisplayComponent from './display.vue';
 
-export default {
+export default defineInterface({
 	id: 'custom',
 	name: 'Custom',
 	icon: 'box',
 	description: 'This is my custom display!',
 	component: DisplayComponent,
 	options: null,
 	types: ['string'],
-};
+});
 ```
 
 ### Properties
@@ -91,7 +92,9 @@ The current value of the field is provided to the component via the `value` prop
 Instead of defining the component inside a separate Vue file, you can use a functional component. This allows you to make small displays that don't need a full component.
 
 ```js
-export default {
+import { defineInterface } from '@directus/extensions-sdk'
+
+export default defineInterface({
 	id: 'custom',
 	name: 'Custom',
 	icon: 'box',
@@ -101,7 +104,7 @@ export default {
 	},
 	options: null,
 	types: ['string'],
-};
+});
 ```
 
-:partial{content="extensions-app-internals"}
+:partial{content="extensions-app-internals"}

content/10.extensions/3.app-extensions/3.layouts.md

@@ -20,9 +20,10 @@ The `index.js` or `index.ts` file exports an object that is read by Directus. It
 
 ```js
 import { ref } from 'vue';
+import { defineInterface } from '@directus/extensions-sdk'
 import LayoutComponent from './layout.vue';
 
-export default {
+export default defineInterface({
 	id: 'custom',
 	name: 'Custom',
 	icon: 'box',
@@ -36,7 +37,7 @@ export default {
 		const name = ref('Custom Layout');
 		return { name };
 	},
-};
+});
 ```
 
 ### Properties
@@ -116,4 +117,4 @@ The layout component can emit the following events that will be recognized by Di
 | `update:layoutOptions` | Update the user's currently saved layout options.     |
 | `update:layoutQuery`   | Update the user's layout query parameters.            |
 
-:partial{content="extensions-app-internals"}
+:partial{content="extensions-app-internals"}

content/10.extensions/3.app-extensions/4.panels.md

@@ -19,9 +19,10 @@ The `index.js` or `index.ts` file exports an object that is read by Directus. It
 ### Entrypoint Example
 
 ```js
+import { defineInterface } from '@directus/extensions-sdk'
 import PanelComponent from './panel.vue';
 
-export default {
+export default defineInterface({
 	id: 'custom',
 	name: 'Custom',
 	icon: 'box',
@@ -40,7 +41,7 @@ export default {
 			},
 		},
 	],
-};
+});
 ```
 
 ### Properties

content/10.extensions/3.app-extensions/5.modules.md

@@ -25,9 +25,10 @@ The `index.js` or `index.ts` file exports an object that is read by Directus. It
 ## Entrypoint Example
 
 ```js
+import { defineInterface } from '@directus/extensions-sdk'
 import ModuleComponent from './module.vue';
 
-export default {
+export default defineInterface({
 	id: 'custom',
 	name: 'Custom',
 	icon: 'box',
@@ -37,7 +38,7 @@ export default {
 			component: ModuleComponent,
 		},
 	],
-};
+});
 ```
 
 ### Properties
@@ -96,4 +97,4 @@ sidebar, header, and the main content area. Named slots can be used to add addit
 | `splitView`           | Renders content in the split view area (only if the private layout has the split-view prop set to true).         |
 | `sidebar`             | Populates the sidebar area in the Directus interface.                                                            |
 
-:partial{content="extensions-app-internals"}
+:partial{content="extensions-app-internals"}

content/10.extensions/3.app-extensions/6.themes.md

@@ -90,4 +90,4 @@ fontFamily: 'Comic Sans MS, sans-serif'
 fontFamily: '"Yesteryear", sans-serif'
 ```
 
-When using a Google Font, ensure the configured weight is available for the selected font.
+When using a Google Font, ensure the configured weight is available for the selected font.

content/10.extensions/3.app-extensions/7.ui-library.md

@@ -51,12 +51,12 @@ Refer to the full list of component based CSS variables [in our source code](htt
 The Directus UI components are designed with flexibility and customization in mind. However, you may need to create your
 own components using shared styling. Directus exposes several CSS variables for both light and dark themes.
 
-Examples of CSS variables include `--border-normal`, `--foreground-normal` `-purple`, `--module-background`, and
-`--overlay-color`.
+Examples of CSS variables include `--theme--border-normal`, `--theme--foreground-normal` `--theme--purple`, `--theme--module-background`, and
+`--theme--overlay-color`.
 
 ::callout{type="info" title="Explore Light and Dark Theme CSS Variables"}
 
 Refer to our [source code](https://github.com/directus/directus/tree/main/app/src/styles/themes) for a full list of CSS
 variables.
 
-::
+::

content/4.auth/1.quickstart.md

@@ -35,6 +35,8 @@ Log out of the Data Studio. From the Sign In screen, you will see a new option t
 
 Open your terminal and run the following command to register a new user.
 
+::snippets
+#rest
 ```bash [Terminal]
 curl \
 --request POST \
@@ -43,12 +45,29 @@ curl \
 --url 'https://directus.example.com/register'
 ```
 
+#graphql
+```graphql
+mutation {
+	users_register(email: "[email protected]", password: "d1r3ctu5")
+}
+```
+
+#sdk
+```js
+import { createDirectus, rest, registerUser } from '@directus/sdk';
+
+const client = createDirectus('https://directus.example.com').with(rest());
+
+const result = await client.request(registerUser('[email protected]', 'd1r3ctu5'));
+```
+::
+
 Go to the user directory by clicking :icon{name="user-directory"} in the module bar and you should see a new user has been created.
 
 ## Logging In
 
-To log in and get an access token, run the following command.
-
+::snippets
+#rest
 ```bash [Terminal]
 curl \
 --request POST \
@@ -57,6 +76,29 @@ curl \
 --url 'https://directus.example.com/auth/login'
 ```
 
+#graphql
+```graphql
+mutation {
+	auth_login(email: "[email protected]", password: "d1r3ctu5") {
+		access_token
+		refresh_token
+	}
+}
+```
+
+#sdk
+```js
+import { createDirectus, authentication } from '@directus/sdk';
+
+const email = "[email protected]";
+const password = "d1r3ctu5";
+
+const client = createDirectus('http://directus.example.com').with(authentication());
+
+const token = await client.login(email, password);
+```
+::
+
 ## Authenticating Requests
 
 You can use the access token while making requests. If your token has expired, you must refresh it.