Clean up custom module docs

docs/guides/extensions/create-a-custom-display.md

@@ -32,7 +32,11 @@ export default {
 * `description` — A short description (<80 characters) of this display shown in the App.
 * `icon` — An icon name from the material icon set, or the extended list of Directus custom icons.
 * `handler` — A function, or reference to your Vue component.
-* `types` — A CSV of supported [types](#). See [the TypeScript definition](https://github.com/directus/next/blob/20355fee5eba514dd75565f60269311187010c66/app/src/interfaces/types.ts#L5-L18) for a full list of possible options.
+* `types` — A CSV of supported [types](#).
+
+:::tip
+See [the TypeScript definition](https://github.com/directus/next/blob/20355fee5eba514dd75565f60269311187010c66/app/src/displays/types.ts#L24-L34) for more info on what can go into this object.
+:::
 
 ### src/display.vue
 

docs/guides/extensions/create-a-custom-interface.md

@@ -32,7 +32,11 @@ export default {
 * `description` — A short description (<80 characters) of this interface shown in the App.
 * `icon` — An icon name from the material icon set, or the extended list of Directus custom icons.
 * `component` — A reference to your Vue component.
-* `types` — A CSV of supported [types](#). See [the TypeScript definition](https://github.com/directus/next/blob/20355fee5eba514dd75565f60269311187010c66/app/src/interfaces/types.ts#L5-L18) for a full list of possible options.
+* `types` — A CSV of supported [types](#).
+
+:::tip
+See [the TypeScript definition](https://github.com/directus/next/blob/20355fee5eba514dd75565f60269311187010c66/app/src/interfaces/types.ts#L5-L18) for more info on what can go into this object.
+:::
 
 ### src/interface.vue
 

docs/guides/extensions/create-a-custom-layout.md

@@ -28,6 +28,10 @@ export default {
 * `name` — The human-readable name for this layout.
 * `component` — A reference to your Vue component.
 
+:::tip
+See [the TypeScript definition](https://github.com/directus/next/blob/20355fee5eba514dd75565f60269311187010c66/app/src/layouts/types.ts#L4-L9) for more info on what can go into this object.
+:::
+
 ### src/layout.vue
 
 ```vue

docs/guides/extensions/create-a-custom-module.md

@@ -1,10 +1,10 @@
 # Create a Custom Module
 
-> TK
+> Custom modules allow you to create completely new experiences within the platform.
 
 ## 1. Setup the Boilerplate
 
-Every module is a standalone "package" that contains at least a metadata file, and a Vue component. I recommend you use the following file structure:
+Every module is a standalone "package" that contains at least a metadata file and a Vue component. We recommend using the following file structure:
 
 ```
 src/
@@ -14,8 +14,6 @@ src/
 
 ### src/index.js
 
-_See [the TypeScript definition](https://github.com/directus/next/blob/20355fee5eba514dd75565f60269311187010c66/app/src/modules/types.ts#L6-L17) for more info on what can go into this object_
-
 ```js
 import ModuleComponent from './module.vue';
 
@@ -32,11 +30,20 @@ export default {
 }
 ```
 
+* `id` — The unique key for this module. It is good practice to scope proprietary interfaces with an author prefix.
+* `name` — The human-readable name for this module.
+* `icon` — An icon name from the material icon set, or the extended list of Directus custom icons.
+* `routes` — Details the routes in your module per the Vue router.
+
+:::tip
+See [the TypeScript definition](https://github.com/directus/next/blob/20355fee5eba514dd75565f60269311187010c66/app/src/modules/types.ts#L6-L17) for more info on what can go into this object.
+:::
+
 ### src/module.vue
 
 ```vue
 <template>
-    <div>My Custom module</div>
+    <div>My Custom Module</div>
 </template>
 
 <script>
@@ -44,22 +51,27 @@ export default {}
 </script>
 ```
 
-The props you can use in an module are:
+#### Available Props
 
+If you setup a route with a parameter, you can pass it in as a prop.
 
-## 2. Install Dependencies & Setup Buildchain
+## 2. Install Dependencies and Configure the Buildchain
 
-The output that's read by the app has to be a single bundled index.js file. In order to bundle the Vue component into the index.js file, you need a bundler.
+Set up a package.json file by running:
 
-I recommend you use Rollup for this purpose.
+```bash
+npm init -y
+```
 
-Run `npm init -y` to setup a package.json file. Then run `npm i -D rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-terser rollup-plugin-vue@5.0.0 @vue/compiler-sfc vue-template-compiler` to install the dev dependencies needed for the buildchain.
+To be read by the Admin App, your custom module's Vue component must first be bundled into a single `index.js` file. We recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
 
-Use the following Rollup config:
+```bash
+npm i -D rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-terser rollup-plugin-vue@5.0.0 @vue/compiler-sfc vue-template-compiler
+```
+
+You can then use the following Rollup configuration within `rollup.config.js`:
 
 ```js
-// rollup.config.js
-
 import { terser } from 'rollup-plugin-terser';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs'
@@ -80,10 +92,16 @@ export default {
 }
 ```
 
-## 3. Build Your Custom module
+## 3. Build Your Custom Module
 
-The module itself is a Vue component, which allows you to do whatever you need.
+The module itself is simply a Vue component, which provides an blank canvas for creating anything you need.
 
 ## 4. Build and Deploy
 
-Run `npx rollup -c` to build the module for use in Directus. Move the `dist` folder into the `extensions` folder you've configured in the API under `modules`.
+To build the module for use within Directus, run:
+
+```bash
+npx rollup -c
+```
+
+Finally, move the output from your module's `dist` folder into your API's `/extensions/modules` folder. Keep in mind that the extensions directory is configurable within your env file, and may be located elsewhere.