Merge pull request #44 from directus/screenshots-kl

Adding screenshots

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

@@ -14,7 +14,7 @@ Directus Cloud provides infrastructure from the team who builds Directus. Projec
 
 Create and login to your [Directus Cloud account](https://directus.cloud/). The very first time you log in to your Directus Cloud account, you will be prompted to create a team. Each Directus Cloud project exists within the scope of one team.
 
-<!-- TODO: Screenshot of prompt -->
+![Create a new project page on Directus Cloud. Fields include name, region, url, and project template. An area to the side shows Directus Cloud Starter tier is selected at $15 a month.](https://product-team.directus.app/assets/ed3ace98-6ee8-4b34-b2df-b109eb9bca17.png)
 
 :directus-cloud
 
@@ -57,7 +57,7 @@ Create a `docker-compose.yml` file in the `directus` directory:
 ```yaml [docker-compose.yml]
 services:
 	directus:
-		image: directus/directus:10.10.1
+		image: directus/directus:11.1.1
 		ports:
 			- 8055:8055
 		volumes:

content/11.configuration/14.theming.md

@@ -26,7 +26,7 @@ The Directus Theming Engine contains a few customizable themes including a Light
 
 Both themes can be updated for all users (in the Settings Module), or for specific users (in the Users Module).
 
-<!-- TODO: move to product-team ![Theming options showing a yellow color theme and serif font throughout.](https://marketing.directus.app/assets/6f4a2cb4-2998-4fcd-bac2-17e6bf8f81a4.png) -->
+![Theming options showing a yellow color theme and serif font throughout.](https://product-team.directus.app/assets/005783db-6a54-4aa9-b425-bc6e6092ff20.png)
 
 Any valid CSS values will be accepted by the Directus Theming Engine. The raw JSON values containing your changes can be seen by clicking the dropdown next to the theme customization labels. These can be saved and quickly applied between projects or users.
 

content/11.configuration/15.translations.md

@@ -16,15 +16,17 @@ As soon as a translation is edited on our translation platform, a pull request i
 
 ### Translation Strings
 
-<!-- TODO: Image of Translation Strings settings -->
+![Translation Strings show in a standard Directus Explore page.](https://product-team.directus.app/assets/f991854a-5abb-49a6-b6b4-2163b2ed27fe.png)
 
 Any strings can be translated in the Data Studio through the decicated translation strings section of the settings module. Each entry in the translation strings has a `key` that is used in the data studio, and any number of translations. 
 
+![Translation strings can be used anywhere the translation icon is shown..](https://product-team.directus.app/assets/1696e3b0-2ed0-4318-b209-cd7959326bef.png)
+
 Throughout the Data Studio, click the :icon{name="material-symbols:translate"} icon to assign a translation string to the field's value. The correct translation will now be shown based on the user language preference. If a language is chosen for which there is no translation string, the translation `key` will be displayed instead.
 
 ## Content Translations
 
-<!-- TODO: Image of Content Translations UI -->
+![Translations interface showing text in American English and German.](https://product-team.directus.app/assets/3e9a8108-169f-4df8-988b-e966b3809d1b.png)
 
 Content translations are used to translate the content of the database, which can be served via API to your external applications. The built-in translations interface handles much of the complexity in managing your data model for multilingual content. 
 

content/2.data-modeling/4.interfaces.md

@@ -539,8 +539,6 @@ User-controlled showing and hiding of fields within the group by clicking on eac
 | Accordion Mode | Toggle whether only one section can be open at a time. |
 | Start          | `All Closed`, `First Opened`                           |
 
-<!-- TODO: Type Alias? Not in UI -->
-
 ### Detail Group
 
 ![A group of form fields that are currently hidden behind a toggle.](https://product-team.directus.app/assets/f1d62298-5cce-41b5-9655-1014b97a6aac.webp)

content/4.auth/2.tokens-cookies.md

@@ -26,7 +26,7 @@ Session tokens are returned when a user logs in, and combine both an access and
 
 ### Static Tokens
 
-<!-- TODO: Add image of data studio static token generation pre-save. -->
+![A user profile in the data studio with a newly-generated static token before saving. A notice reads "Make sure to backup and copy the token above. For security reasons, you will not be able to view the token again after saving and navigate off this page."](https://product-team.directus.app/assets/0df2a7cc-53c8-4f89-acee-476caf877270.png)
 
 Each user can have one static token that does not expire. This can be generated in the Data Studio within the user page. It is stored in plain text in the `directus_users` collection, and can be manually set via the Data Studio or the [Users API](/api#tag/users).
 
@@ -49,9 +49,9 @@ When a request is made to the same Directus domain, the cookie will be automatic
 To perform actions that are not available to the public role, a valid token must be included in the request.
 
 ::tabs
-::tab{label="Authorization Header"}
-Add the following header: `Authorization: Bearer <token>`
-::
+    ::tab{label="Authorization Header"}
+    Add the following header: `Authorization: Bearer <token>`
+    ::
 
     ::tab{label="Session Cookies"}
     You do not need to set anything. The `directus_session_token` is used automatically.

content/4.auth/3.access-control.md

@@ -8,15 +8,15 @@ Access control is a critical part of managing data - what different users in the
 
 You can find Access Control in the Settings module.
 
-<!-- TODO: IMAGE - DIAGRAM WITH CONCEPTS BETWEEN PERMISSIONS, ROLES, POLICIES, USERS -->
+![A diagram showing the relationship between permissions, policies, roles, and users.](https://product-team.directus.app/assets/9c4b55ec-5402-4460-a091-f22406f524e1.jpg)
 
 ## Users
 
 A user is an item in the `directus_users` collection and typically referring to a person, application, or service that needs access to a Directus project.
 
 ## Permissions
 
-<!-- TODO: IMAGE - single permission set for a collection. -->
+![A single permission set for a collection. The collection is posts, and the actions are create, read, update, delete, and share.](https://product-team.directus.app/assets/e19b7b11-bf9b-4588-bbcb-17671f6aafb0.png)
 
 A permission is set on a collection and an action. The available actions in Directus are create, read, update, delete, and share. Permissions can provide all access, no access, or use custom permissions.
 
@@ -26,25 +26,25 @@ Custom permissions provide more granularity than 'all' or 'none'. They impact wh
 
 #### Item Permissions
 
-<!-- TODO: IMAGE - item permissions showing user_created Equals $CURRENT_USER -->
+![Item permissions with a filter rule that limits access to update items where user_created equals the current user.](https://product-team.directus.app/assets/ca52a0bc-65a4-4b9a-92cc-86a71c3d4de6.png)
 
 Use [filter rules](/connect/filter-rules) to define which items in a collection a user can access.
 
 #### Field Permissions
 
-<!-- TODO: Image - Field permissions with limited access -->
+![Field permissions with limited update access to only the content field.](https://product-team.directus.app/assets/80ffe7d7-9a5e-4516-8768-a00c03d28613.png)
 
 Define which fields the role is included in this permission. As a permission is scoped to both a collection and an action, a different set of fiends can be provided to each action.
 
 #### Field Validation
 
-<!-- TODO: Image - Field validation - some fields not empty. -->
+![Field validation with some fields not empty and are at least 3 characters long via a regular expression.](https://product-team.directus.app/assets/3bf61316-edf3-4e87-848d-7f5225dd3ada.png)
 
 Use [filter rules](/connect/filter-rules) to validate field values when an item is created or updated.
 
 #### Field Presets
 
-<!-- TODO: Image - field preset for role. -->
+![Field presets with a default value for the visibility field.](https://product-team.directus.app/assets/44e001a8-e369-43a9-82e7-b75cb74d5bff.png)
 
 Define default field values when an item is created or updated. The value will appear in :product-link{product="editor"}, and can later be updated.
 
@@ -56,8 +56,6 @@ You must treat `null` as both a value and an indication of restricted permission
 
 :header-with-badge{h="2" text="Policies" badge="New in Directus 11"}
 
-<!-- TODO: image of policy interface -->
-
 Policies are a group of permissions that can be applied to users or roles.
 
 As a user starts with no permissions, and multiple policies can set a permission on the same collection and actions. Applying policies is additive - each policy can add to existing permissions, but not take them away.

content/4.auth/4.creating-users.md

@@ -6,7 +6,7 @@ description: Learn about creating users in directus, including API creation, inv
 
 A user is an item in the `directus_users` collection. There are no required fields by default, although you may choose to require values for any system or user-created fields.
 
-<!-- TODO: IMAGE - user detail page -->
+![A user profile for Ben Haynes, showing an image, email, role, and various other pieces of metadata in an editable form.](https://product-team.directus.app/assets/c933f8ef-ed2d-43e0-a95a-700978611568.png)
 
 To log in with an `email` and `password` they must be set on the user item. A user can also have a [role](/auth/access-control) and any number of policies that can be assigned in the user detail page.
 

content/4.auth/5.email-login.md

@@ -245,7 +245,7 @@ Requesting a password reset will send an email to the user with a URL to the Dat
 }
 ```
 
-TODO: Fix broken link
+<!-- TODO: Fix broken link -->
 
 ::callout{type="dev-docs" url="/configuration/email"}
 An email service must be configured to send password reset requests.

content/4.auth/8.accountability.md

@@ -1,24 +1,26 @@
 ---
-description: Learn to audit user activity and enforce accountability using the activity log.
+description: Learn to audit user activity and enforce accountability using the activity feed.
 ---
 
 # Accountability
 
-<!-- TODO: Image -->
+![The activity feed shows action, collection, timestamp, and user.](https://product-team.directus.app/assets/805d75be-45bd-4ba5-ac63-69ba2d928842.png)
 
-The activity log module provides a collective timeline of all data-changing actions taken within your project. It is accessed via the notifications tray of the sidebar, and has the same filtering and search features as the [Collection Page](/data-modeling/collections).
+The activity feed provides a collective timeline of all data-changing actions taken within your project. It is accessed via the notifications tray of the sidebar, and has the same filtering and search features as the [Collection Page](/data-modeling/collections).
+
+You can access the activity feed from the bottom of the right-hand sidebar.
 
 ::callout{type="warning" title="External Changes"}
 
-Directus can only track the events which actually pass through its platform. Therefore, any changes directly made to the database are not tracked in the activity log.
+Directus can only track the events which actually pass through its platform. Therefore, any changes directly made to the database are not tracked in the activity feed.
 
 ::
 
 ## View an Activity Log Item
 
-<!-- TODO: ![Activity Log Default Fields](https://cdn.directus.io/docs/v9/configuration/activity-log/activity-log-20220816/activity-log-default-fields-20220816A.webp) -->
+![The activity feed item details drawer showing user, action, timestamp, IP address, user agent, collection, and item.](https://product-team.directus.app/assets/d9f6749f-304e-4b8d-b086-6c17a447371c.png)
 
-Click on any item in the activity log and a side drawer will open, displaying its logged details. The following information
+Click on any item in the activity feed and a side drawer will open, displaying its logged details. The following information
 is stored for each item:
 
 - **User** — The user that performed the action.
@@ -32,20 +34,14 @@ is stored for each item:
 
 ## Filter by Activity
 
-<!-- TODO: <video title="Filter by Activity" autoplay playsinline muted loop controls>
-	<source src="https://cdn.directus.io/docs/v9/configuration/activity-log/activity-log-20220816/filter-by-activity-20220817A.mp4" type="video/mp4" />
-</video> -->
+![The filter UI is the same as the collection page - the action is being filtered to only show updates.](https://product-team.directus.app/assets/149adb98-7b9f-4ea9-ad24-c1d00c3c153b.png)
 
 In addition to the filter and display functionality inherited from the
 [Collection Page](/data-modeling/collections), you can also filter items by activity from the
 navigation bar.
 
 ## Modify an Activity
 
-<!-- <video title="Filter by Activity" autoplay playsinline muted loop controls>
-	<source src="https://cdn.directus.io/docs/v9/configuration/activity-log/activity-log-20220816/modify-an-activity-20220817A.mp4" type="video/mp4" />
-</video> -->
-
 To ensure proper accountability, system collections are read only by design. However, users with an Admin role have
 the ability to reopen, view, and modify an item's values in activities from non-system collections (where the name does
 not begin with `directus_`).

content/6.files/2.upload.md

@@ -8,12 +8,14 @@ Multiple files can be uploaded simultaneously via both the data studio and via t
 
 ## Data Studio
 
-<!-- TODO: Screenshot of the files module -->
+![The files module with a number of files visible in a gallery layout.](https://product-team.directus.app/assets/796eb265-bce2-4faa-93d0-118dac406457.png)
 
 By opening the files module on the left, you will see your file library, which acts as one big folder to store all uploaded files and sub-folders.
 
 Create a folder called `Images` and click on :icon{name="material-symbols:add-circle-outline-rounded"}.
 
+![The popup that appears when clicking on the upload button.](https://product-team.directus.app/assets/ec81bb5c-6dbf-4518-8684-0e5df99de013.png)
+
 You'll see a popup with options for uploading your file:
 
 - Dragging a file from your desktop.

content/6.files/3.manage.md

@@ -9,16 +9,14 @@ and embeds, with core fields included out-of-the-box (see below), and the abilit
 custom fields. This page has the same features and functionality as the
 item page.
 
-<!-- TODO: ![Files](https://cdn.directus.io/docs/v9/app-guide/file-library/file-library-20220305A/files-20220305A.webp) -->
-
-<!-- TODO: Bring over Data Studio icons -->
+![A file details page showing an image with editable fields for title and description. File metadata is shown in the sidebar.](https://product-team.directus.app/assets/5cf9a82c-5a4b-4feb-ab61-ff6e9d10455d.png)
 
 ## Action Buttons
 
 Notice the following buttons in the header:
 
 - :icon{name="material-symbols:check-circle"} – Saves any edits made to the file.
-- :icon{name="material-symbols:tune"} – Please see [Edit an Image](#edit-an-image) to learn more.
+- :icon{name="material-symbols:tune"} – Opens the image editor.
 - :icon{name="material-symbols:download"} – Downloads the file to your current device.
 - :icon{name="material-symbols:drive-file-move-outline"} – Moves selected file(s) to another folder.
 - :icon{name="material-symbols:delete-outline"} – Permanently removes the file and its metadata. This action is permanent and cannot be undone.
@@ -36,8 +34,6 @@ constraint of your file field to `SET NULL` or `CASCADE` when the file is delete
 The files collection comes pre-configured with the following fields out of the box. New fields can be created and
 customized as needed in **Settings > Data Model** under the `directus_files` collection. However the pre-configured Fields cannot be changed or deleted.
 
-<!-- TODO: ![File Details](https://cdn.directus.io/docs/v9/app-guide/file-library/file-library-20220305A/file-details-20220305A.webp) -->
-
 - **Preview**: a preview of the image or file.
 - **Title**: a title for the File.
 - **Description**: a description of the File.
@@ -51,8 +47,6 @@ customized as needed in **Settings > Data Model** under the `directus_files` col
 
 The file sidebar also includes the following details, which are not editable and serve as metadata.
 
-<!-- TODO: ![File Sidebar](https://cdn.directus.io/docs/v9/app-guide/file-library/file-library-20220305A/file-sidebar-20220305A.webp) -->
-
 - **Type**: the MIME type of the file, displayed in the App as a formatted media type.
 - **Dimensions**: _images only_. The width and height of the image in pixels.
 - **Size**: the file-size the asset takes up in the storage adapter.
@@ -65,6 +59,8 @@ The file sidebar also includes the following details, which are not editable and
 
 ## Edit an Image
 
+![The image editor with a number of options for editing an image, including cropping, focal points, and changing aspect ratios.](https://product-team.directus.app/assets/dc2929f8-7a5b-419f-8a31-c3ac7a45415e.png)
+
 Rotate, crop, flip, adjust aspect ratios, or set focal points of an image.
 
 1. From the **File Library**, click a file to open its detail page.

content/6.files/4.access.md

@@ -10,8 +10,8 @@ The location of your actual file originals is based on the project's configurati
 via the API using the following URL:
 
 ```
-example.com/assets/<file-id>
-example.com/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4
+https://example.com/assets/<file-id>
+https://example.com/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4
 ```
 
 ## Authentication
@@ -25,8 +25,8 @@ If no cookie is stored, you can use the `access_token` query parameter to authen
 You can provide an optional filename after the UUID to optimize for SEO, for example:
 
 ```
-example.com/assets/<file-id>/<filename>
-example.com/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4/directus-logo.png
+https://example.com/assets/<file-id>/<filename>
+https://example.com/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4/directus-logo.png
 ```
 
 This optional filename is also used in the `Content-Disposition` header when the `?download` query parameter is used.
@@ -39,9 +39,6 @@ permissions and other built-in features.
 
 ::
 
-<!-- TODO: ![Original File](https://cdn.directus.io/docs/v9/reference/files/original-20220216A.jpg) _Original File Used — 602KB and
-1800x1200_ -->
-
 ## Downloading a File
 
 To download an asset with the correct filename, you need to add the `?download` query parameter to the request and the

content/7.automate/1.quickstart.md

@@ -17,21 +17,21 @@ Create a `posts` collection with at least a `title` and `content` field. [Follow
 
 ## Create a Flow
 
-<!-- TODO: Image -->
+![Create a new flow pane - including name, metadata, and option to track activity and logs.](https://product-team.directus.app/assets/3c337848-a40f-4e62-9370-c943e8d5e761.png)
 
 Navigate to the Flows section in the Settings module. Click on :icon{name="material-symbols:add-circle"} in the page header and name the new flow "Post Created".
 
 ## Configure a Trigger
 
-<!-- TODO: Image -->
+![Create a new flow pane - trigger setup where the trigger is an event hook.](https://product-team.directus.app/assets/)
 
 Click on :icon{name="material-symbols:play-arrow"} to open trigger setup. Select "Event Hook" as the trigger type and select "Action (Non-Blocking)". This will allow you to set up this flow to respond to when an event takes place by running an action that doesn't interrupt.
 
 Select `items.create` as the scope, and then check the "Posts" collection. This combination means that the operation will be triggered when an post is created. 
 
 ## Configure an Operation
 
-<!-- TODO: Image -->
+![In the flow editor, the trigger connects to an operation. The operation configuration pane is open with a type of Send Notification.](https://product-team.directus.app/assets/4c072da6-b396-47ad-85ff-f300e3eb9661.png)
 
 Click on :icon{name="material-symbols:add-circle"} on the trigger panel.
 

content/7.automate/2.flows.md

@@ -17,7 +17,7 @@ Flows enable custom, event-driven data processing and task automation within Dir
 
 ## Logs
 
-<!-- TODO: Image -->
+![Logs from one flow execution. It shows the trigger payload and accountability, and the operation options and payload.](https://product-team.directus.app/assets/222e9acb-ae30-47be-b59f-0125c10fc58f.png)
 
 Accessible from the sidebar, logs store information for each flow execution. Each log will display information from
 triggers as well as each operation in the flow.