From 5d971a668a118ee1dac5eeb5c67acfd1cec08a90 Mon Sep 17 00:00:00 2001 From: Lindsey Zylstra Date: Mon, 8 Dec 2025 15:08:41 -0800 Subject: [PATCH 1/3] Add docs for n8n --- .../7.workflows/directus-n8n-actions.md | 173 ++++++++++++ .../7.workflows/directus-n8n-advanced.md | 264 ++++++++++++++++++ .../7.workflows/directus-n8n-triggers.md | 136 +++++++++ .../use-directus-with-n8n-for-automation.md | 84 ++++++ public/img/tutorials/n8n.png | Bin 0 -> 10187 bytes 5 files changed, 657 insertions(+) create mode 100644 content/tutorials/7.workflows/directus-n8n-actions.md create mode 100644 content/tutorials/7.workflows/directus-n8n-advanced.md create mode 100644 content/tutorials/7.workflows/directus-n8n-triggers.md create mode 100644 content/tutorials/7.workflows/use-directus-with-n8n-for-automation.md create mode 100644 public/img/tutorials/n8n.png diff --git a/content/tutorials/7.workflows/directus-n8n-actions.md b/content/tutorials/7.workflows/directus-n8n-actions.md new file mode 100644 index 00000000..8b0548f1 --- /dev/null +++ b/content/tutorials/7.workflows/directus-n8n-actions.md @@ -0,0 +1,173 @@ +--- +id: directus-n8n-actions +title: Directus n8n Actions +description: Complete guide for using Directus actions in n8n workflows, including working with items, users, and files. +technologies: + - n8n +--- + +This guide covers how to use the Directus Node to perform actions on your Directus data in n8n workflows, including working with items, users, and files. + +**[← Back to Directus + n8n Overview](/tutorials/workflows/use-directus-with-n8n-for-automation)** + +## Using the Directus Node (Actions) + +The Directus node lets you perform actions on your Directus data. It works with three types of resources: **Items**, **Users**, and **Files**. + +## Available Actions + +Quick reference of all available actions organized by resource type: + +| Resource | Operation | Description | +|----------|-----------|-------------| +| **Items** | Create | Add a new item to a collection | +| **Items** | Get | Retrieve a single item by ID | +| **Items** | Get Many | Retrieve multiple items with optional filters | +| **Items** | Update | Modify an existing item | +| **Items** | Delete | Permanently remove an item | +| **Users** | Invite | Send an invitation to a new user | +| **Users** | Get | Retrieve a single user by ID | +| **Users** | Get Many | Retrieve multiple users with optional filters | +| **Users** | Update | Modify an existing user | +| **Users** | Delete | Permanently remove a user | +| **Files** | Upload a File | Upload a file from binary data | +| **Files** | Import a File | Import a file from a URL | +| **Files** | Get | Retrieve a single file by ID | +| **Files** | Get Many | Retrieve multiple files with optional filters | +| **Files** | Update | Modify file metadata | +| **Files** | Delete | Permanently remove a file | + +--- + +## Common Operations + +Most operations follow a similar pattern across resources. Set the **Resource** type (Item, User, or File), choose the **Operation**, and configure the required fields. + +### Create, Update, Delete + +These operations work similarly across all resources: + +- **Create**: Set Resource → Operation to Create → Select Collection (Items only) → Fill in fields → Click **Add Field** for additional fields +- **Update**: Set Resource → Operation to Update → Enter ID → Update desired fields +- **Delete**: Set Resource → Operation to Delete → Enter ID + +**Note for Items**: When creating or updating items, you must select the **Collection** first. For Users and Files, no collection selection is needed. + +::callout{icon="material-symbols:warning-rounded" color="warning"} +**Permanent Deletion** +Delete operations permanently remove data. Make sure this is what you want to do! +:: + +### Get Operations + +- **Get**: Set Resource → Operation to Get → Enter ID → Optionally select **Fields** to return +- **Get Many**: Set Resource → Operation to Get Many → Optionally add filters → Set **Limit** → Optionally select **Fields** + +**Note for Items**: Select the **Collection** before configuring filters. + +## Resource-Specific Operations + +### Items + +Items are content entries in your Directus collections (blog posts, products, pages, etc.). All standard operations require selecting a **Collection** first. + +**Example**: Create a blog post +- Collection: `posts` +- Fields: `title`, `content`, `status` + +### Users + +#### Invite a User + +Set **Resource** to **User** → **Operation** to **Invite** → Enter **Email** → Select **Role**. + +All other operations (Get, Get Many, Update, Delete) follow the standard pattern above. + +### Files + +#### Upload a File + +Set **Resource** to **File** → **Operation** to **Upload a File**. The file must come from a previous node that outputs binary data (like an HTTP Request node). Optionally set **Title**, **Description**, and **Folder**. + +#### Import a File from URL + +Set **Resource** to **File** → **Operation** to **Import a File** → Enter **File URL** + +All other operations (Get, Get Many, Update, Delete) follow the standard pattern above. + +--- + +## Tips and Best Practices + +### Using Expressions + +You can use n8n expressions to reference data from previous nodes: + +- `{{ $json.id }}` - Get the ID from the previous node +- `{{ $json.title }}` - Get the title field +- `{{ $json.email }}` - Get the email field + +This is especially useful when chaining Directus nodes together. For example, use `{{ $json.id }}` to update an item that was just created in a previous node. + +### Field Selection + +When getting items, you can select specific fields to return. This is helpful when: + +- You only need certain information +- You want to reduce the amount of data transferred +- You're working with large collections + +::callout{icon="material-symbols:info-outline"} +**Performance Tip** +Selecting only the fields you need reduces data transfer and improves workflow performance, especially with large collections. +:: + +### Simplify Option + +For **Get Many** operations on Users and Files, use the **Simplify** option to get only the most commonly used fields. This makes the data easier to work with in subsequent nodes. + + + + + +--- + +## Troubleshooting + +When working with Directus API through n8n, you may encounter various error codes. For a comprehensive list of Directus error codes and their meanings, refer to the [official Directus Error Codes documentation](https://directus.io/docs/guides/connect/errors). + +### Error Handling + +If you get errors: + +1. **Permission Errors**: Check that your Directus API token has the right permissions +2. **Not Found Errors**: Verify that the collection, item ID, or user ID exists +3. **Connection Errors**: Make sure your Directus URL is correct and accessible + + +### Getting Help + +If you encounter issues: + +1. **For Directus-specific questions:** Ask for help in the [Directus Community](https://community.directus.io/) +2. **For n8n-specific questions:** Visit the [n8n Community Forum](https://community.n8n.io/) or check [n8n Documentation](https://docs.n8n.io/) +3. **For API connection issues:** Verify your Directus configuration and permissions + +--- + +## Next Steps + +- **[← Back to Overview](/tutorials/workflows/use-directus-with-n8n-for-automation)** Return to the integration overview +- **[Learn about Directus Triggers →](/tutorials/workflows/directus-n8n-triggers)** Set up automated workflows + + + + + + + + + + + + diff --git a/content/tutorials/7.workflows/directus-n8n-advanced.md b/content/tutorials/7.workflows/directus-n8n-advanced.md new file mode 100644 index 00000000..c236bb7f --- /dev/null +++ b/content/tutorials/7.workflows/directus-n8n-advanced.md @@ -0,0 +1,264 @@ +--- +id: directus-n8n-advanced +title: Directus n8n Advanced Features +description: Advanced guide for using Directus raw CRUD operations in n8n, including raw JSON operations, complex filters, relational queries, and query parameters. +technologies: + - n8n +--- + +This guide covers advanced Directus features in n8n using raw CRUD operations, which give you full access to Directus's native filter syntax, query parameters, and complex query capabilities. + +**[← Back to Directus + n8n Overview](/tutorials/workflows/use-directus-with-n8n-for-automation)** + +## Raw CRUD Operations + +The Directus node provides raw versions of all CRUD operations that allow you to use Directus's native JSON syntax for filters, query parameters, and data manipulation. These operations give you full control over the API request. + +## Available Raw Operations + +Quick reference of all available raw operations organized by resource type: + +| Resource | Operation | Description | +|----------|-----------|-------------| +| **Items** | Create (Raw JSON) | Create items with full JSON control | +| **Items** | Get (Raw JSON) | Retrieve a single item with custom query parameters | +| **Items** | Get Many (Raw JSON) | Retrieve multiple items with advanced filters and query parameters | +| **Items** | Update (Raw JSON) | Update items with complex data structures | +| **Users** | Get (Raw JSON) | Retrieve a single user with custom query parameters | +| **Users** | Get Many (Raw JSON) | Retrieve multiple users with advanced filters and query parameters | +| **Users** | Update (Raw JSON) | Update users with complex data structures | +| **Files** | Get (Raw JSON) | Retrieve a single file with custom query parameters | +| **Files** | Get Many (Raw JSON) | Retrieve multiple files with advanced filters and query parameters | +| **Files** | Update (Raw JSON) | Update files with complex data structures | + +--- + +::callout{icon="heroicons-outline:light-bulb"} +**When to Use Raw Operations** +Use raw operations when you need complex filters with logical operators (`_and`, `_or`), relational field filtering, advanced query parameters (aggregation, search, etc.), or full control over the JSON payload structure. +:: + +## Using Raw Operations + +Raw operations work similarly to their standard counterparts, but instead of using the node's form fields, you provide all data in the **JSON Data** field as a JSON object. + +### Setting Up a Raw Operation + +1. Add a **Directus** node to your workflow +2. Set **Resource** to Item, User, or File +3. Select a **Raw JSON** operation (e.g., "Get Many (Raw JSON)", "Create (Raw JSON)") +4. For Items operations, select the **Collection** +5. Enter your JSON data in the **JSON Data** field +6. For Get and Update operations, provide the **Item ID** if needed + +::callout{icon="material-symbols:warning-rounded" color="warning"} +**Token Permissions** +Ensure your Directus API token has the correct permissions for the resource and operations you're using. Raw operations require the same permissions as their standard counterparts. +:: + +### Get Many (Raw JSON) + +Retrieve items with advanced filtering and query parameters: + +```json +{ + "filter": { + "status": {"_eq": "published"}, + "views": {"_gt": 1000} + }, + "fields": "title,author.name,views", + "sort": "-date_created", + "limit": 10 +} +``` + +### Get (Raw JSON) + +Retrieve a single item with custom query parameters: + +```json +{ + "fields": "title,content,author.name,author.email,comments.text" +} +``` + +### Create (Raw JSON) + +Create items with full control over the JSON structure: + +```json +{ + "title": "My New Post", + "content": "Post content here", + "status": "published", + "author": "author-uuid-here", + "categories": ["category-uuid-1", "category-uuid-2"] +} +``` + +### Update (Raw JSON) + +Update items with complex data structures: + +```json +{ + "title": "Updated Title", + "status": "archived", + "metadata": { + "tags": ["updated", "archived"], + "notes": "Item has been archived" + } +} +``` + +## Using Filters with Raw Operations + +Raw operations allow you to use Directus's complete filter syntax. Specify filters in the `filter` parameter of your **JSON Data** field. + +::callout{icon="material-symbols:info-outline"} +**Filter Documentation** +For complete filter syntax, operators, and examples, see the [Directus Filter Rules documentation](https://directus.io/docs/guides/connect/filter-rules). +:: + +**Example: Complex filter with logical operators** +```json +{ + "filter": { + "_and": [ + {"status": {"_eq": "published"}}, + { + "_or": [ + {"category": {"_eq": "tutorial"}}, + {"category": {"_eq": "guide"}} + ] + }, + {"views": {"_gt": 100}} + ] + } +} +``` + +**Example: Relational filtering** +```json +{ + "filter": { + "author": { + "name": {"_eq": "John Doe"} + }, + "comments": { + "_some": { + "status": {"_eq": "approved"} + } + } + } +} +``` + +## Query Parameters + +Raw operations support all Directus query parameters. Include them in your JSON Data alongside filters: + +**Common query parameters:** +```json +{ + "fields": "title,author.name,views", + "sort": "-date_created", + "limit": 10, + "offset": 0 +} +``` + +**Search:** +```json +{ + "search": "directus tutorial" +} +``` + +**Aggregation:** +```json +{ + "aggregate": { + "count": "id", + "sum": "views", + "avg": "rating" + }, + "groupBy": "category" +} +``` + +::callout{icon="material-symbols:info-outline"} +**Query Parameters Documentation** +For complete query parameter documentation, see the [Directus Query Parameters documentation](https://directus.io/docs/guides/connect/query-parameters). +:: + +## Working with Relations + +When using **Create (Raw JSON)** or **Update (Raw JSON)**, you can include related data directly in your JSON: + +```json +{ + "title": "My Post", + "author": "author-uuid-here", + "categories": ["category-uuid-1", "category-uuid-2"], + "comments": [ + {"text": "Great post!", "user": "user-uuid-here"} + ] +} +``` + +## Using Expressions in Raw Operations + +You can use n8n expressions in your raw JSON data for dynamic queries: + +```json +{ + "filter": { + "status": {"_eq": "{{ $json.status }}"}, + "views": {"_gt": {{ $json.min_views }}} + }, + "fields": "{{ $json.requested_fields }}", + "sort": "-{{ $json.sort_field }}", + "limit": {{ $json.limit }} +} +``` + +## Performance Tips + +- **Select only needed fields**: Use the `fields` parameter to reduce data transfer +- **Use pagination**: Use `limit` and `offset`/`page` for large datasets, process in batches with n8n's **Split In Batches** node +- **Filter in Directus**: Always use the `filter` parameter rather than processing all data in n8n + +**Example:** +```json +{ + "fields": "id,title,status", + "filter": { + "status": {"_eq": "published"}, + "date_created": {"_gte": "$NOW(-30 days)"} + }, + "limit": 100 +} +``` + + + +--- + +## Next Steps + +- **[← Back to Overview](/tutorials/workflows/use-directus-with-n8n-for-automation)** Return to the integration overview +- **[Learn about Directus Actions →](/tutorials/workflows/directus-n8n-actions)** Basic operations guide +- **[Learn about Directus Triggers →](/tutorials/workflows/directus-n8n-triggers)** Automation workflows + + + + + + + + + + + + diff --git a/content/tutorials/7.workflows/directus-n8n-triggers.md b/content/tutorials/7.workflows/directus-n8n-triggers.md new file mode 100644 index 00000000..8052b6ce --- /dev/null +++ b/content/tutorials/7.workflows/directus-n8n-triggers.md @@ -0,0 +1,136 @@ +--- +id: directus-n8n-triggers +title: Directus n8n Triggers +description: Complete guide for using Directus triggers in n8n workflows to automate workflows when events happen in Directus. +technologies: + - n8n +--- + +This guide covers how to use the Directus Trigger Node to automatically start your n8n workflows when something happens in Directus. + +**[← Back to Directus + n8n Overview](/tutorials/workflows/use-directus-with-n8n-for-automation)** + +## Using the Directus Trigger Node + +The Directus Trigger node automatically starts your workflow when something happens in Directus. This is perfect for automation! + +## Available Triggers + +Quick reference of all available triggers organized by resource type: + +| Resource | Event | Description | +|----------|-------|-------------| +| **Items** | Created | Triggers when a new item is added to a collection | +| **Items** | Updated | Triggers when an existing item is modified | +| **Items** | Deleted | Triggers when an item is removed from a collection | +| **Users** | Created | Triggers when a new user is added | +| **Users** | Updated | Triggers when a user is modified | +| **Users** | Deleted | Triggers when a user is removed | +| **Files** | Uploaded | Triggers when a file is uploaded to Directus | + +--- + +## Setting Up a Trigger + +1. Add a **Directus Trigger** node to your workflow (it should be the first node) +2. Select the **Resource** type (Item, User, or File) +3. Configure based on resource: + - **Items**: Select the **Collection** to watch, then choose the **Event** (Created, Updated, or Deleted) + - **Users**: Choose the **Event** (Created, Updated, or Deleted) + - **Files**: Choose **Uploaded** event +4. Activate your workflow + +The trigger creates a **Flow** in Directus with a webhook that automatically starts your workflow when the selected event occurs. + +### How Triggers Work + +When you activate a workflow with a Directus Trigger node: + +1. n8n automatically creates a Flow with a webhook in your Directus instance +2. Directus sends notifications to n8n when the selected event happens +3. Your workflow runs automatically with the data from Directus +4. When you deactivate the workflow, the Flow and webhook are automatically removed + +::callout{icon="material-symbols:info-outline" color="warning"} +**Public URL Required** +Your n8n instance needs to be accessible from the internet for triggers to work. If you're using n8n Cloud, this is already set up. If you're self-hosting, you'll need to modify the Flow in Directus to use a tunnel (like ngrok or Cloudflare Tunnel) to expose your n8n instance publicly. +:: + +--- + +## Tips and Best Practices + + + +### Using Trigger Data + +You can use data from the trigger in subsequent nodes. The trigger data contains the full item, user, or file object that triggered the workflow: + +- `{{ $json.id }}` - Get the ID from the trigger +- `{{ $json.title }}` - Get the title field +- `{{ $json.email }}` - Get the email field (for user triggers) + +This data is automatically available in all nodes that come after the trigger. Use expressions to access any field from the trigger data. + +### Filtering Trigger Events + +You can add conditions after the trigger to only process specific events: + +- Check if `status` equals `published` before sending notifications +- Filter by collection or field values +- Only process certain types of files + +::callout{icon="material-symbols:info-outline"} +**Filtering Tip** +Use n8n's **IF** node after the trigger to add conditional logic. For example, only send notifications when `{{ $json.status }}` equals `"published"`. +:: + +--- + +## Troubleshooting + +### Trigger Issues + +**Trigger Not Firing:** + +- Ensure your workflow is activated +- Verify your n8n instance is publicly accessible (required for webhooks) +- Check that the Directus instance can reach your n8n webhook URL +- Test by manually creating/updating an item in Directus +- Check Directus logs for any errors + +**Webhook Not Created:** + +- Verify your Directus API token has permission to create webhooks +- Ensure your n8n instance has a public URL +- Check that your Directus instance is accessible from the internet + +**Connection Issues:** + +- Make sure your Directus URL is correct and accessible +- Verify your API token is valid and has the right permissions + +### Getting Help + +If you encounter issues: + +1. **For Directus-specific questions:** Ask for help in the [Directus Community](https://community.directus.io/) +2. **For n8n-specific questions:** Visit the [n8n Community Forum](https://community.n8n.io/) or check [n8n Documentation](https://docs.n8n.io/) +3. **For trigger issues:** Check that both your Directus and n8n instances are accessible + +--- + +## Next Steps + +- **[← Back to Overview](/tutorials/workflows/use-directus-with-n8n-for-automation)** Return to the integration overview +- **[Learn about Directus Actions →](/tutorials/workflows/directus-n8n-actions)** Perform operations on your Directus data + + + + + + + + + + diff --git a/content/tutorials/7.workflows/use-directus-with-n8n-for-automation.md b/content/tutorials/7.workflows/use-directus-with-n8n-for-automation.md new file mode 100644 index 00000000..f02f8e80 --- /dev/null +++ b/content/tutorials/7.workflows/use-directus-with-n8n-for-automation.md @@ -0,0 +1,84 @@ +--- +id: use-directus-with-n8n-for-automation +title: Use Directus with n8n for Automation +description: Connect Directus with n8n to automate workflows, sync data, and integrate your CMS with other services using the Directus community node. +technologies: + - n8n +--- + +Connect your Directus instance with n8n to automate workflows, sync data between systems, and build powerful integrations. + +::callout{icon="heroicons-outline:rocket-launch"} +**Quick Start** + +1. **Install the node**: In n8n, go to **Settings** → **Community Nodes** → Install `@directus/n8n-nodes-directus` +2. **Configure credentials**: Add your Directus URL and API token +3. **Start building**: Use the **Directus** node for actions or **Directus Trigger** node for automation +:: +## Available Nodes + +The Directus community node provides two components: + +- **Directus Node**: Perform CRUD operations on items, users, and files +- **Directus Trigger Node**: Automatically start workflows when events occur in Directus + +## Installation + +### Install the Community Node + +1. In n8n, go to **Settings** → **Community Nodes** +2. Click **Install a community node** +3. Enter: `@directus/n8n-nodes-directus` +4. Click **Install** + +### Configure Credentials + +Before you can use the Directus nodes, you need to connect to your Directus instance: + +1. In any Directus node, click on **Credential to connect with** +2. Click **Create New Credential** (or select an existing one) +3. Fill in your connection details: + - **Directus URL**: Your Directus instance URL + - **Token**: Your Directus API token +4. Click **Save** to store your credentials + +#### Getting Your API Token + +1. In Directus, go to **Users** +2. Select or create a user for n8n integration +3. Open the user's detail page +4. Scroll to **Token** section +5. Click **Generate Token** +6. Copy the token and paste into n8n +7. **Important**: Click the checkmark (✓) to save + +::callout{icon="material-symbols:info-outline"} +**Permissions** +
+**Admin Token (Recommended for Getting Started)** +
+Many operations, including creating webhooks for triggers, require Administrator permissions. Assign the Administrator role to the user for the easiest setup and full access to all collections and features. + +
+ +**Custom Role (For Production)** +
+For better security, create a custom role with specific permissions. This allows you to limit access to only the collections and operations your workflows need. The token inherits the user's role permissions, so you can lock down access while still allowing necessary operations. +:: + + + +## Documentation + +**[Working with Directus Actions →](/tutorials/workflows/directus-n8n-actions)** + +Perform operations on your Directus data: create, read, update, and delete items, users, and files. + +**[Using Directus Triggers →](/tutorials/workflows/directus-n8n-triggers)** + +Set up automated workflows that trigger when events happen in Directus. + +**[Advanced Features →](/tutorials/workflows/directus-n8n-advanced)** + +Use raw CRUD operations with Directus filter syntax, complex queries, and advanced query parameters. + diff --git a/public/img/tutorials/n8n.png b/public/img/tutorials/n8n.png new file mode 100644 index 0000000000000000000000000000000000000000..0c27e3826b6089ecc8cbd334d2f32a28a1641d15 GIT binary patch literal 10187 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 Date: Thu, 11 Dec 2025 16:08:59 -0800 Subject: [PATCH 2/3] Move to new integrations section n8n and clay --- app/app.config.ts | 5 ++ app/assets/icons/products/integrations.svg | 18 ++++++ app/components/IntegrationsList.vue | 58 +++++++++++++++++++ app/pages/[...slug].vue | 12 ++++ .../guides/11.integrations/.navigation.yml | 4 ++ .../11.integrations/1.n8n/.navigation.yml | 3 + .../11.integrations/1.n8n/0.index.md} | 11 ++-- .../1.n8n}/directus-n8n-actions.md | 8 +-- .../1.n8n}/directus-n8n-advanced.md | 10 ++-- .../1.n8n}/directus-n8n-triggers.md | 8 +-- .../11.integrations/2.clay/.navigation.yml | 3 + .../11.integrations/2.clay/0.index.md} | 28 ++++++--- .../2.clay}/directus-clay-data-operations.md | 11 ++-- .../use-clay-templates-with-directus.md | 23 ++++++-- .../use-directus-webhooks-with-clay.md | 21 +++++-- content/guides/11.integrations/index.md | 7 +++ 16 files changed, 188 insertions(+), 42 deletions(-) create mode 100644 app/assets/icons/products/integrations.svg create mode 100644 app/components/IntegrationsList.vue create mode 100644 content/guides/11.integrations/.navigation.yml create mode 100644 content/guides/11.integrations/1.n8n/.navigation.yml rename content/{tutorials/7.workflows/use-directus-with-n8n-for-automation.md => guides/11.integrations/1.n8n/0.index.md} (89%) rename content/{tutorials/7.workflows => guides/11.integrations/1.n8n}/directus-n8n-actions.md (94%) rename content/{tutorials/7.workflows => guides/11.integrations/1.n8n}/directus-n8n-advanced.md (93%) rename content/{tutorials/7.workflows => guides/11.integrations/1.n8n}/directus-n8n-triggers.md (92%) create mode 100644 content/guides/11.integrations/2.clay/.navigation.yml rename content/{tutorials/2.projects/use-directus-with-clay-for-data-enrichment.md => guides/11.integrations/2.clay/0.index.md} (69%) rename content/{tutorials/2.projects => guides/11.integrations/2.clay}/directus-clay-data-operations.md (92%) rename content/{tutorials/2.projects => guides/11.integrations/2.clay}/use-clay-templates-with-directus.md (87%) rename content/{tutorials/2.projects => guides/11.integrations/2.clay}/use-directus-webhooks-with-clay.md (88%) create mode 100644 content/guides/11.integrations/index.md diff --git a/app/app.config.ts b/app/app.config.ts index d8c1ef1f..8d22089f 100644 --- a/app/app.config.ts +++ b/app/app.config.ts @@ -92,6 +92,11 @@ export default defineAppConfig({ to: '/guides/ai/mcp', icon: 'directus-ai', }, + { + label: 'Integrations', + to: '/guides/integrations', + icon: 'directus-integrations', + }, ], }, { diff --git a/app/assets/icons/products/integrations.svg b/app/assets/icons/products/integrations.svg new file mode 100644 index 00000000..387f866e --- /dev/null +++ b/app/assets/icons/products/integrations.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/app/components/IntegrationsList.vue b/app/components/IntegrationsList.vue new file mode 100644 index 00000000..78f13317 --- /dev/null +++ b/app/components/IntegrationsList.vue @@ -0,0 +1,58 @@ + + + + diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue index b006a39c..28118282 100644 --- a/app/pages/[...slug].vue +++ b/app/pages/[...slug].vue @@ -18,6 +18,13 @@ if (!page.value) { const headline = computed(() => findPageHeadline(navigation.value, page.value)); +const imageSrc = computed(() => { + if (!page.value?.technologies) return ''; + const technologies = page.value.technologies || ['directus']; + const techString = technologies.join(', '); + return `/docs/api/tutorialimg?logos=${techString}`; +}); + const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryCollectionItemSurroundings('content', route.path, { @@ -37,6 +44,11 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => qu + Generated Image + From 4cb125cf98b3b5ebdebf2f0abcf062f803a3a170 Mon Sep 17 00:00:00 2001 From: Lindsey Zylstra Date: Thu, 11 Dec 2025 17:19:07 -0800 Subject: [PATCH 3/3] Fix background in dark mode on cards and text sizing --- app/components/IntegrationsList.vue | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/app/components/IntegrationsList.vue b/app/components/IntegrationsList.vue index 78f13317..66f49af3 100644 --- a/app/components/IntegrationsList.vue +++ b/app/components/IntegrationsList.vue @@ -26,27 +26,29 @@ const integrations = [ class="hover:bg-primary/5 hover:ring-primary" :ui="{ title: 'font-bold text-pretty', - description: 'line-clamp-2', + description: '', container: 'p-0', }" >
- +
+ +
-
+
{{ integration.title }} - + {{ integration.description }}
@@ -55,4 +57,3 @@ const integrations = [
-