Merge pull request #27 from directus/extensions

Extensions Section

Author: connorwinston

app/components/articles/Card.vue

@@ -14,7 +14,7 @@ defineProps<{
 		</p>
 
 		<div class="card-footer-row">
-			<div class="card-tag-row">
+			<div v-if="article.tags" class="card-tag-row">
 				<span
 					v-for="tag in article.tags"
 					:key="tag.id"
@@ -24,9 +24,12 @@ defineProps<{
 					<Icon :name="tag.icon || 'material-symbols:question-mark'" />
 				</span>
 			</div>
-			<p class="card-category">
+			<p v-if="article.category" class="card-category">
 				{{ article.category }}
 			</p>
+			<p v-if="article.description" class="card-description">
+				{{ article.description }}
+			</p>
 		</div>
 	</NuxtLink>
 </template>
@@ -47,10 +50,10 @@ defineProps<{
 	.card-title {
 		font-size: 1rem;
 		font-weight: 500;
-		margin-bottom: 0.5rem;
 	}
 
 	.card-footer-row {
+		margin-top: 0.5rem;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;

app/components/pages/ExtensionListing.global.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content';
+
+interface Section {
+	items?: Array<{ path: string }>;
+}
+
+const props = defineProps<{
+	data: ParsedContent;
+}>();
+
+const paths: Array<string> = props.data.sections.flatMap((section: Section) =>
+	section.items?.map(item => item.path) ?? [],
+);
+
+const pages = await queryContent().where({ _path: { $in: paths } }).only(['_path', 'title', 'description']).find();
+
+const sections = props.data.sections.map((section: Section) => {
+	const items = section.items?.map((item: { path: string }) => {
+		const page = pages.find(page => page._path === item.path);
+		return {
+			title: page?.title,
+			description: page?.description,
+			_path: page?._path,
+		};
+	});
+	return { ...section, items };
+});
+</script>
+
+<template>
+	<div class="docs container">
+		Test
+		<UiAsideNav :path="data?._path" />
+		<div class="slug">
+			<main v-if="data">
+				<article>
+					<ContentRenderer :value="data">
+						<ContentRendererMarkdown
+							class="prose"
+							:value="data"
+						/>
+					</ContentRenderer>
+				</article>
+				<section
+					v-for="section in sections"
+					:key="section.title"
+				>
+					<h2>{{ section.title }}</h2>
+					<!-- {{ section.items }} -->
+					<ArticlesGrid :articles="section.items" />
+				</section>
+			</main>
+			<aside>
+				<AsideNewsletter />
+				<AsideFeedback />
+			</aside>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.slug {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 250px;
+	width: 100%;
+	gap: 3rem;
+}
+main {
+	margin-top: var(--nav-spacing-under);
+	.prev-next {
+		padding: var(--nav-spacing-under) 0 calc(var(--nav-spacing-under) + 1rem);
+	}
+}
+aside {
+	margin-top: var(--nav-spacing-under);
+	padding-left: 2rem;
+	padding-right: 1em;
+	border-left: 2px solid var(--border);
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--nav-spacing-under) / 2);
+	> * {
+		width: 100%;
+	}
+}
+.docs {
+	display: grid;
+	grid-template-columns: 225px minmax(0, 1fr);
+	gap: 3rem;
+	> nav {
+		margin-top: var(--nav-spacing-under);
+		border-right: 2px solid var(--border);
+		section {
+			margin: 2rem 0;
+			&:first-child {
+				margin-top: 0;
+			}
+		}
+	}
+}
+:deep(ol ol) {
+	display: none;
+}
+section {
+	margin-top: 2rem;
+	> h2 {
+		margin-bottom: 1rem;
+	}
+}
+</style>

content/1.getting-started/0.overview.md

@@ -32,9 +32,9 @@ Using Directus Insights, your whole team can build custom applications. Ditch th
 
 Establish a single source of truth for all data. Build no-code analytics dashboards to gain insights into company KPIs and other metrics. Coalesce previously siloed data and use Directus Automate to keep everything in sync.
 
-::callout{type="tutorials" url="/tutorials"}
+<!-- TODO ::callout{type="tutorials" url="/tutorials"}
 See all project and use-case tutorials.
-::
+:: -->
 
 ## Directus Cloud
 

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

@@ -103,15 +103,15 @@ The project that runs from this `docker-compose.yml` file is not production-read
 Read our self-hosting product checklist.
 ::
 
-## Deploy Directus
+<!-- TODO ## Deploy Directus
 
 We also have a number of guides on deploying Directus to various cloud providers, like Amazon Web Services, Microsoft Azure, and Google Cloud Platform.
 
 ::callout{type="tutorials" url="/tutorials/tags/deployment"}
 
 See how to deploy Directus on multiple hosting providers.
 
-::
+:: -->
 
 ## Next Steps
 

content/1.getting-started/2.resources.md

@@ -10,9 +10,9 @@ Detailed documentation about the Directus platform.
 Comprehensive list of endpoints available in your projects.
 ::
 
-::callout{type="tutorials" url="/tutorials" title="Tutorials"}
+<!-- TODO: ::callout{type="tutorials" url="/tutorials" title="Tutorials"}
 Framework, project, and other implementation guides.
-::
+:: -->
 
 ::callout{type="community" url="/community" title="Community"}
 Get involved through feature requests, code contribution, education, and more.

content/10.extensions/0.overview.md

@@ -1,6 +1,67 @@
 ---
 title: Overview
-description:
+description: Extensions are used to extend the functionality of Directus.
 ---
 
 # Extensions Overview
+
+Directus has been built to be extensible - both allowing for powerful enhancements to be built for single projects, and for publishing in the [Directus Marketplace](/extensions/marketplace).
+
+Extensions in Directus run within the same environment as the main application, allowing them to leverage existing access to underlying [services](/extensions/api-extensions/services) and [UI components](/extensions/app-extensions/ui-library).
+
+## App Extensions
+
+[App Extensions](/extensions/app-extensions) extend the functionality of the Data Studio.
+
+### Interfaces
+
+<!-- TODO: IMAGE FROM NOTION -->
+
+[Interfaces](/extensions/app-extensions/interfaces) are form inputs used primarily inside of the :product-link{product="editor"}. Interfaces are the primary way users interact with data inside of Directus. Custom interfaces can be used for use cases with unique interaction needs, complex data entry, and any time you need to add elements to the editor.
+
+### Displays
+
+<!-- TODO: IMAGE FROM NOTION -->
+
+[Displays](/extensions/app-extensions/displays) are small components that are used to display a single value throughout the Data Studio. Displays receive a single value and any custom display options that are defined in the display entrypoint. They are then expected to render the value in a user-friendly way.
+
+### Layouts
+
+<!-- TODO: IMAGE FROM NOTION -->
+
+[Layouts](/extensions/app-extensions/layouts) allow for listing of items in :product-link{product="explore"} pages. Layouts receive a collection, filters, searches, and any custom layout options that are defined in the layout entrypoint. They are then expected to fetch and render the items from a collection.
+
+
+### Panels
+
+<!-- TODO: IMAGE FROM NOTION -->
+
+[Panels](/extensions/app-extensions/panels) are customizable components within :product-link{product="insights"} dashboards. Panels are the building blocks of analytics dashboards, enabling rapid, no-code creation of data visualizations with data from a Directus project. Panels can also contain interactive elements, making them suitable for building custom internal applications within dashboards. 
+
+### Modules
+
+<!-- TODO: IMAGE FROM NOTION -->
+
+[Modules](/extensions/app-extensions/modules) are top-level areas of the Data Studio, navigated to from the left-hand module bar. They will load at the specified routes. The Data Studio splits up functionality into modules - the content module, the files module, the user module, the insights module, and the settings module. Extensions can add new modules to the Data Studio.
+
+### Themes
+
+<!-- TODO: IMAGE FROM NOTION -->
+
+[Themes](/extensions/app-extensions/themes) are used to style the Data Studio. They can be used to change the colors, fonts, and other visual elements of the Data Studio.
+
+## API Extensions
+
+[API Extensions](/extensions/api-extensions) extend the functionality of the API.
+
+### Hooks
+
+[Hooks](/extensions/api-extensions/hooks) allow running code when events occur within Directus. Events are triggered on schedules, database events, or during the Directus application lifecycle.
+
+### Endpoints
+
+[Endpoints](/extensions/api-extensions/endpoints) allow you to register new API routes in your Directus project.
+
+### Operations
+
+[Operations](/extensions/api-extensions/operations) are single steps in a Flow - the no-code automation tool part of :product-link{product="automate"}.

content/10.extensions/1.quickstart.md

@@ -1,6 +1,54 @@
 ---
 title: Quickstart
-description:
+description: This guide will cover how to get started with developing an extension for Directus.
 ---
 
 # Extensions Quickstart
+
+This guide will cover how to get started with developing an extension for Directus. You will set up a development environment, build an extension, and load it into your project.
+
+## Loading an Extension Volume 
+
+Follow the steps in the [Create a Project](/getting-started/create-a-project) guide to set up your project locally. This `docker-compose.yml` file will set up a local volume for extensions to be loaded from. This directory exists on your local filesystem and is also mounted into the Docker container.
+
+Add the following to the `environment` section of your `docker-compose.yml` file to automatically reload your extensions when they are rebuilt:
+
+```yaml
+EXTENSIONS_AUTO_RELOAD: true
+```
+
+::callout{type="info" title="Restarting Directus"}
+When changing the `docker-compose.yml` file, you will need to restart Directus by restarting the Docker container.
+::
+
+## Initializing an Extension
+
+In your terminal, navigate to the `extensions` directory and run the following command and follow the prompts to initialize an extension:
+
+```bash
+npx create-directus-extension@latest
+? Choose the extension type: endpoint
+? Choose a name for the extension: my-first-endpoint
+? Choose the language to use: javascript
+? Auto install dependencies?: Yes
+```
+
+This will create a new subdirectory in `extensions` with a boilerplate extension. 
+
+## Building Your Extension
+
+Run `npm run build` to build your extension. This will create a `dist` directory in your extension directory with your built extension. This is the code that will be loaded into your Directus project.
+
+You can alternatively run `npm run dev` to automatically rebuild your extension when you make changes.
+
+With the `EXTENSIONS_AUTO_RELOAD` environment variable set, your extension will be automatically reloaded in Directuswhen you make changes.
+
+## Using Your Extension
+
+Navigate to the extensions page in your project settings. You should now see your new extension in the list. 
+
+Endpoints are only available via API, so navigate to `http://localhost:8055/my-first-endpoint` in your browser to access your new endpoint. Other extension types are available in their respective selection panes within the Data Studio.
+
+## Next Steps
+
+Now that you've built your first extension, you can start building out your own. Check out the [API Extensions](/extensions/api-extensions) overview or [App Extensions](/extensions/app-extensions) overview for more information on building each extension type.

content/10.extensions/2.api-extensions/0.index.md

@@ -0,0 +1,19 @@
+---
+style: ExtensionListing
+title: API Extensions
+description:
+sections:
+  - title: Extension Types
+    items:
+      - path: /extensions/api-extensions/hooks
+      - path: /extensions/api-extensions/endpoints
+      - path: /extensions/api-extensions/operations
+  - title: Resources
+    items:
+      - path: /extensions/api-extensions/services
+      - path: /extensions/api-extensions/sandbox
+---
+
+# API Extensions Overview
+
+API Extensions extend the functionality of the API.