Further content and clean-up

api-reference/ui-components.mdx

@@ -19,7 +19,7 @@ For example - this is a button that links to Stripe.
 and it looks like this:
 
 <Frame>
-  ![Example button linking to stripe](/public/images/ui-components/link-button-stripe.png)
+  ![Example button linking to stripe](/public/images/ui-component-link-button-stripe.png)
 </Frame>
 
 In the GraphQL API schema, we have two separate unions for Custom Timeline Entry Components and Customer Card

api-reference/ui-components/badge.mdx

@@ -3,7 +3,7 @@ title: 'Badge'
 description: 'Useful for statuses or when you need to attract attention to something.'
 ---
 
-<Frame>![Example badges](/public/images/ui-components/badge.png)</Frame>
+<Frame>![Example badges](/public/images/ui-component-badge.png)</Frame>
 
 A badge has the following properties:
 

api-reference/ui-components/copy-button.mdx

@@ -3,7 +3,7 @@ title: 'CopyButton'
 description: 'Useful if you have any IDs or other details you want to copy for use in messages or outside of Plain.'
 ---
 
-<Frame>![Example copy button](/public/images/ui-components/copy-button.png)</Frame>
+<Frame>![Example copy button](/public/images/ui-component-copy-button.png)</Frame>
 
 A copy button has the following properties:
 

api-reference/ui-components/divider.mdx

@@ -3,7 +3,7 @@ title: 'Divider'
 description: 'Useful when you need a bit of structure.'
 ---
 
-<Frame>![Example divider](/public/images/ui-components/divider.png)</Frame>
+<Frame>![Example divider](/public/images/ui-component-divider.png)</Frame>
 
 A divider has the following properties:
 

api-reference/ui-components/link-button.mdx

@@ -3,7 +3,7 @@ title: 'LinkButton'
 description: 'Useful when you want to link somewhere external (e.g. your own admin tool or payment provider)'
 ---
 
-<Frame>![Example link button](/public/images/ui-components/link-button.png)</Frame>
+<Frame>![Example link button](/public/images/ui-component-link-button.png)</Frame>
 
 A link button has the following properties:
 

api-reference/ui-components/plain-text.mdx

@@ -3,7 +3,7 @@ title: 'PlainText'
 description: 'Useful when you want to show any text that should not have any formatting (is not Markdown). If you want markdown please use [Text](/ui-components/text).'
 ---
 
-<Frame>![Example link button](/public/images/ui-components/plain-text.png)</Frame>
+<Frame>![Example link button](/public/images/ui-component-plain-text.png)</Frame>
 
 The plain text component has the following properties:
 

api-reference/ui-components/row.mdx

@@ -3,7 +3,7 @@ title: 'Row'
 description: 'Useful when you need to show two things next to each-other.'
 ---
 
-<Frame>![Example row](/public/images/ui-components/row.png)</Frame>
+<Frame>![Example row](/public/images/ui-component-row.png)</Frame>
 
 The row component has the following properties:
 

api-reference/ui-components/spacer.mdx

@@ -2,7 +2,7 @@
 title: 'Spacer'
 ---
 
-<Frame>![Example spacer](/public/images/ui-components/spacer.png)</Frame>
+<Frame>![Example spacer](/public/images/ui-component-spacer.png)</Frame>
 
 A link button has the following properties:
 

api-reference/ui-components/text.mdx

@@ -2,7 +2,7 @@
 title: 'Text'
 ---
 
-<Frame>![Example text](/public/images/ui-components/text.png)</Frame>
+<Frame>![Example text](/public/images/ui-component-text.png)</Frame>
 
 The text component has the following properties:
 

assignment.mdx

@@ -2,4 +2,18 @@
 title: 'Assignment'
 ---
 
-TODO
+<Frame>![Assignment within Plain](/public/images/assignment-introduction.png)</Frame>
+
+Threads can be assigned to any user or machine users in your workspace.
+
+When you start typing a message, Plain will automatically assign you so you typically don't really have to think about assigning yourself manually.
+
+If you want to assign a thread manually you can use the shortcut **A** or use **⌘ + K**
+
+By default in Plain once you are assigned to a thread, you will never be automatically un-assigned. This ensures that if you pick up a support request you can see it through. We call this behaviour "sticky assignment".
+
+If you'd like to change this behaviour you can do so in **Settings** → **Workflow**. Here you can choose to be automatically unassigned when a thread is marked as done or snoozed.
+
+We recommend turning sticky assignment off if your team has a shared support rotas. That way, whoever is on-call can pick up any threads you didn't finish.
+
+If you are interested in building fully automated bots using Plain, you can also programatically assign threads to machine users as a starting point. If this sounds like an interesting use-case to you please reach out to us on via [email protected].

contact-forms.mdx

@@ -19,18 +19,12 @@ This shows how you can build a very simple floating contact form (bottom right)
 
 [**View demo ↗**](https://example-nextjs-floating-form.vercel.app/) | [View source on Github↗](https://github.com/team-plain/example-nextjs-floating-form)
 
-<Frame>
-  ![Screenshot of the floating contact
-  form](/public/images/contact-forms/example-floating-contact-form.png)
-</Frame>
+<Frame>![Screenshot of the floating contact form](/public/images/contact-form-floating.png)</Frame>
 
 ### Example advanced contact form
 
 This shows a more advanced contact form in NextJS with structured inputs depending on the topic you are getting in touch about and categorization.
 
 [**View demo ↗**](https://example-nextjs-advanced-contact-form.vercel.app/) | [View source on Github↗](https://github.com/team-plain/example-nextjs-advanced-contact-form)
 
-<Frame>
-  ![Screenshot of the advanced contact
-  form](/public/images/contact-forms/example-advanced-contact-form.png)
-</Frame>
+<Frame>![Screenshot of the advanced contact form](/public/images/contact-form-advanced.png)</Frame>

custom.css

@@ -24,7 +24,7 @@
 
 /* Remove tight leading on titles within the content */
 .prose :where(h1, h2, h3):not(:where([class~='not-prose'] *)) {
-  letter-spacing: auto;
+  letter-spacing: initial;
 }
 
 /* Links that are in the content of the page */

customer-cards.mdx

@@ -3,10 +3,7 @@ title: 'Customer cards'
 description: 'Customer Cards are a powerful feature in Plain that let you show information from your own systems while looking at a customer in Plain. This makes sure you always have important context when helping customers.'
 ---
 
-<Frame>
-  ![Screenshot of the Customer Cards
-  feature](/public/images/customer-cards/customer-cards-introduction.png)
-</Frame>
+<Frame>![Customer Cards within Plain](/public/images/customer-cards-introduction.png)</Frame>
 
 Customer Cards are:
 

customer-groups.mdx

@@ -3,6 +3,8 @@ title: 'Customer groups'
 description: 'Organise and segment your customers.'
 ---
 
+<Frame>![Customer groups within Plain](/public/images/groups-introduction.png)</Frame>
+
 Customer groups can be used to organize and segment your customers. For example you could organise your customers by their tier "Free", "Growth, "Enterprise" or use temporary groups to keep track of customers trialing beta features.
 
 You can configure the groups in your workspace by going to **Settings** → **Customer Groups** where you can set a name and color per group.

email/receiving.mdx

@@ -21,15 +21,15 @@ If your email provider is not Google, you can still set up email forwarding in d
     Under "Default routing" click on "CONFIGURE" or "ADD ANOTHER RULE"
 
     <Frame>
-      ![Add new rule](/public/images/email-setup/email-setup-0.png)
+      ![Add new rule](/public/images/email-setup-0.png)
     </Frame>
 
   </Step>
   <Step title="Set the recipient">
     In the dropdown, select "Single recipient" and write your **support email address** under "Email address"
 
     <Frame>
-      ![Add your support email address](/public/images/email-setup/email-setup-1.png)
+      ![Add your support email address](/public/images/email-setup-1.png)
     </Frame>
 
   </Step>
@@ -39,15 +39,15 @@ If your email provider is not Google, you can still set up email forwarding in d
     Choose "Replace recipient" and paste the inbound email address (`@inbound.postmarkapp.com`)
 
     <Frame>
-      ![Replace recipient](/public/images/email-setup/email-setup-2.png)
+      ![Replace recipient](/public/images/email-setup-2.png)
     </Frame>
 
   </Step>
   <Step title="Set who the rule applies to">
     Scroll further down, and choose "Perform this action on non-recognised and recognised addresses"
 
     <Frame>
-      ![Apply to all addresses](/public/images/email-setup/email-setup-3.png)
+      ![Apply to all addresses](/public/images/email-setup-3.png)
     </Frame>
 
   </Step>

email/sending.mdx

@@ -7,7 +7,7 @@ To be able to send emails from Plain using your support email address, you will
 While setting up your email, you will see DNS settings that need to be
 configured for your domain:
 
-<Frame>![DNS settings](public/images/email-setup/email-setup-4.png)</Frame>
+<Frame>![DNS settings](public/images/email-setup-4.png)</Frame>
 
 The first record is the "DKIM". It is part of the available mechanisms that exist to authenticate
 emails: verifying that you're the actual sender of the email.

events.mdx

@@ -3,7 +3,7 @@ title: 'Events'
 description: "Events are a powerful API feature of Plain which let you log key events to have more context while you are helping a customer. This includes tracking a customer's usage of your product, latest invoice, error logs, etc."
 ---
 
-<Frame>![Screenshot of the Events](/public/images/events/events-introduction.png)</Frame>
+<Frame>![Screenshot of the Events](/public/images/events-introduction.png)</Frame>
 
 When you create an event in Plain, you can specify the content of the event using a simple GraphQL request and our [UI Components](/ui-components).
 

labels.mdx

@@ -1,9 +1,10 @@
 ---
 title: 'Labels'
-description: 'Labels are a light weight and powerful way to categorize threads in Plain.'
 ---
 
-<Frame>![Example labels](/public/images/labels/labels-introduction.png)</Frame>
+Labels are a light weight and powerful way to categorize threads in Plain.
+
+<Frame>![Example labels](/public/images/labels-introduction.png)</Frame>
 
 We recommend categorizing threads into topics so you immediately know, at a glance, what people are getting in touch about.
 

linear.mdx

@@ -1,14 +1,12 @@
 ---
 title: 'Linear integration'
-description: 'To easily keep track of feature requests and bugs reported in Plain, you can connect your Linear workspace with Plain.'
 ---
 
+To easily keep track of feature requests and bugs reported in Plain, you can connect your Linear workspace with Plain.
+
 This lets you easily link a Linear issue to a thread.
 
-<Frame>
-  ![Screenshot of the floating contact
-  form](/public/images/linear-integration/linear-integration.png)
-</Frame>
+<Frame>![Screenshot of the floating contact form](/public/images/linear-introduction.png)</Frame>
 
 To do this, head to **Settings** → **Linear integration** and connect your workspace.
 

mint.json

@@ -1,9 +1,5 @@
 {
-  "name": "Plain",
-  "modeToggle": {
-    "default": "light",
-    "isHidden": true
-  },
+  "name": "Plain Docs",
   "logo": {
     "light": "public/logo/light.png",
     "dark": "public/logo/dark.png",
@@ -15,6 +11,13 @@
     "light": "#94a3b8",
     "dark": "#3e7cff"
   },
+  "metadata": {
+    "og:image": "/docs/images/social-image.png",
+    "twitter:card": "summary_large_image",
+    "twitter:image": "/docs/images/social-image.png",
+    "twitter:site:domain": "plain.com",
+    "apple-mobile-web-app-title": "Plain Docs"
+  },
   "topbarCtaButton": {
     "name": "Sign in",
     "url": "https://app.plain.com/"

notifications.mdx

@@ -2,4 +2,22 @@
 title: 'Notifications'
 ---
 
-TODO
+<Frame>![Notifications within Plain](/public/images/notifications-introduction.png)</Frame>
+
+Plain supports Discord, Slack and Email notifications. Notifications are also divided into **Workspace Notifications** and **Personal Notifications**.
+
+### Workspace notifications
+
+Workspace notifications are global to your workspace via Slack and/or Discord. They are typically used to notify you as a team of a new support request or other activity.
+
+We recommend setting up a shared channel like #support and then having all workspace notifications go there.
+
+You can configure workspace notifications in **Settings** → **Workspace**.
+
+### Personal notifications
+
+Personal notifications are via Slack or Email. We recommend setting up notifications here to be notified of threads you are assigned to.
+
+You can configure personal notifications in **Settings** → **Workspace**.
+
+When you use personal Slack notifications they will be delivered in the Plain Slack App direct message channel with you.

priorities.mdx

@@ -2,4 +2,21 @@
 title: 'Priorities'
 ---
 
-TODO
+<Frame>![Priorities within Plain](/public/images/priority-introduction.png)</Frame>
+
+Every thread has a priority. Priorities help you manage your threads queue and identify which threads need attention first.
+
+The available priorities are:
+
+- **Urgent**
+- **High**
+- **Medium**
+- **Low**
+
+When you viewing a thread you can use the shortcut **P** to set the priority or use **⌘ + K**.
+
+When looking at your thread queue you can also filter and sort your thread by priority.
+
+Priorities can be useful in combination with contact forms. By asking questions such as "is this preventing you from using X?" you can determine whether bug reports or questions are high priority.
+
+Equally you can automatically set higher priorities for certain topics like security reports, if your contact form exposes a topic picker.

quickstart.mdx

@@ -3,7 +3,7 @@ title: 'Quickstart'
 description: 'Get started with Plain in 10 minutes.'
 ---
 
-TODO 2
+<Frame>![Plain.com](/public/images/quickstart.png)</Frame>
 
 ### Feedback & questions
 

reporting.mdx

@@ -2,4 +2,15 @@
 title: 'Reporting'
 ---
 
-TODO
+<Frame>![Reporting within Plain](/public/images/reporting-introduction.png)</Frame>
+
+When viewing your threads queue you can at a glance see key metrics on your current support queue.
+
+You can see:
+
+- The breakdown of why a thread is in Todo (whether it's new threads, replies, Linear issues, etc.)
+- Distribution of threads by priority
+- A preview of how many threads will be unsnoozed in next 24 hours
+- Counts of assigned vs. unassigned threads
+- Breakdown of threads by customer group
+- Count of threads by label

shortcuts.mdx

@@ -2,4 +2,39 @@
 title: 'Shortcuts'
 ---
 
-TODO
+Keyboard shortcuts within Plain make it really fast to help customers and stay in the flow.
+
+This is the list of available keyboard shortcuts in Plain:
+
+#### Global shortcuts
+
+- **⌘** + **K** - Open the command palette
+- **?** - The full list of available shortcuts
+
+#### On thread queues
+
+- **F** - Add filter
+- **/** - Search for customers or threads
+
+#### When viewing a thread
+
+- **A** - Assign the thread
+- **P** - Change thread priority
+- **N** - Add a note to a thread
+- **E** - Mark a thread as done
+- **Z** - Snooze a thread
+- **!** - Mark customer as spam
+- **⌘ + .** - Show/hide queue
+- **⌘ + /** - Show/hide customer sidebar
+- **R** - Focus composer to reply
+- **J**/**K** - Next/Previous thread
+- **Esc** - Go back to queue
+- **L** - Add label
+- **I** - Add linear issue
+
+#### When the composer is focused
+
+- **⌘ + Enter** - Send message
+- **⌘ + Shift + Enter** - Send message and mark thread as done
+- **[** - Insert snippet
+- **Esc** - Unfocus/blur composer