docs: move the appwrite and keyboard shortcuts pages under command center articles, add active keyboard shortcuts table, move paragraphs around a bit in the appwriter article

This commit is contained in:
choir27
2024-06-14 13:48:29 -04:00
parent 0cceb364dd
commit cf7d199492
9 changed files with 131 additions and 34 deletions

View File

@@ -661,7 +661,7 @@
}, },
{ {
"link": "/keyboard", "link": "/keyboard",
"redirect": "/docs/tooling/assistant/appwriter" "redirect": "/docs/tooling/command-center/the-appwriter"
}, },
{ {
"link": "/careers", "link": "/careers",

View File

@@ -104,7 +104,7 @@
}, },
{ {
label: 'Command Center', label: 'Command Center',
href: '/docs/tooling/command-center', href: '/docs/tooling/command-center/command-center',
icon: 'web-icon-command' icon: 'web-icon-command'
}, },
{ {

View File

@@ -14,10 +14,6 @@
{ {
label: 'Overview', label: 'Overview',
href: '/docs/advanced/platform' href: '/docs/advanced/platform'
},
{
label: 'Shortcuts',
href: '/docs/advanced/platform/shortcuts'
} }
] ]
}, },

View File

@@ -1,30 +1,9 @@
<script lang="ts"> <script lang="ts">
import Docs from '$lib/layouts/Docs.svelte'; import Docs from '$lib/layouts/Docs.svelte';
import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte'; import Sidebar from '../../Sidebar.svelte';
const parent: NavParent = {
href: '/docs',
label: 'Assistant'
};
const navigation: NavTree = [
{
label: 'Guides',
items: [
{
label: 'Assistant',
href: '/docs/tooling/assistant/assistant'
},
{
label: 'Appwriter',
href: '/docs/tooling/assistant/appwriter'
}
]
}
];
</script> </script>
<Docs variant="two-side-navs"> <Docs variant="two-side-navs">
<Sidebar {navigation} {parent} /> <Sidebar />
<slot /> <slot />
</Docs> </Docs>

View File

@@ -1,9 +1,32 @@
<script lang="ts"> <script lang="ts">
import Docs from '$lib/layouts/Docs.svelte'; import Docs from '$lib/layouts/Docs.svelte';
import Sidebar from '../../Sidebar.svelte'; import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
const parent: NavParent = {
href: '/docs',
label: 'Command Center'
};
const navigation: NavTree = [
{
label: 'Guides',
items: [
{
label: 'Command Center',
href: '/docs/tooling/command-center/command-center'
},{
label: 'Keyboard Shortcuts',
href: '/docs/tooling/command-center/keyboard-shortcuts'
},{
label: 'The Appwriter',
href: '/docs/tooling/command-center/the-appwriter'
}
]
}
];
</script> </script>
<Docs variant="two-side-navs"> <Docs variant="two-side-navs">
<Sidebar /> <Sidebar {navigation} {parent} />
<slot /> <slot />
</Docs> </Docs>

View File

@@ -0,0 +1,64 @@
---
layout: article
title: Keyboard Shortcuts
description: Learn to navigate the Appwrite Console efficiently and effectively with your keyboard
---
The Appwrite Console was designed with a keyboard first approach. Developer experience is greatly improved by virtue of the keyboard's ease of use, quick and seamless execution of essential actions and the consistency of shortcut keys to traverse the Appwrite Console.
# Shortcuts {% #shortcuts %}
The Appwrite Console supports keyboard shortcuts that make it easier to navigate and perform common actions quicker. The shortcuts use the following pattern: use the first letter from the call to action followed by the resource, product, service, or page you're targeting. For example, the shortcut keys `G` + `S` navigates to the project's Storage screen. Similarly, the shortcut `G` + `F` navigates to the project's Functions screen. However, there are some exceptions. The shortcut `G` + `E` navigates to project Settings, because `G` + `S` is in use for Storage. This pattern is used to make usage of shortcuts consistent and predictable.
## Global shortcuts {% #global-shortcuts %}
Developers can also utilize global shortcuts anywhere in the Appwrite Console, allowing instant access to these features from any page on the Console.
|PC (Windows / Linux)|macOS|Action|
|----|----|----|
|`Ctrl` + `K`|`⌘` + `K`|Access Command Center|
|Shortcut|Action|
|----|----|
|Set theme to light|`T` then `L`|
|Set theme to dark|`T` then `D`|
|Set theme to dark|`T` then `A`|
|Open Appwrite Assistant|`A` then `I`|
## Project shortcuts {% #project-shortcuts %}
Within the context of a project, developers can utilize project shortcuts. These shortcuts are automatically enabled once a project is selected on the Console. These shortcuts allow quick access to the project's database, storage, messaging, auth, settings, and overview pages.
|Shortcut|Action|
|----|----|
|Go to Auth|`G` then `A`|
|Go to Storage|`G` then `S`|
|Go to Databases|`G` then `D`|
|Go to Functions|`G` then `F`|
|Go to Projects|`G` then `P`|
|Go to Overview|`G` then `O`|
|Go to Messaging|`G` then `M`|
|Go to Settings|`G` then `E`|
# Primary Actions
Each screen on the console has a concept of a primary action.
For example, in the Functions screen, the primary action would be creating a function, in the Databases screen, it would be creating a database and so on.
The primary actions are usually triggered using the `C` key as seen in the table below.
|Shortcut|Action|
|----|----|
|Create project (on projects screen)| `C` then `P`|
|Create organization|`C` then `O`|
|Create API key (on overview screen)|`C` then `K`|
|Create database (on database screen)|`C` then `A`|
|Create collection (on collection screen)|`C`|
|Create document (on documents screen)|`C` then `D`|
|Create attribute (on documents screen)|`C` then `T`|
# Accessibility {% #accessibility %}
We are committed to making the Appwrite Console accessible to all developers by following the AA-level standards of the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG22/Understanding/conformance#levels). Following these standards ensures that the Console is usable by people with visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.
Good contrast between text and backgrounds, resizable text without loss of content or functionality, and navigable interfaces via keyboard and screen readers guarantee an inclusive environment and allow developers to perform their tasks efficiently. Adhering to these guidelines ensures that the Appwrite Console complies with legal requirements and promotes a positive developer experience for everyone.

View File

@@ -0,0 +1,35 @@
---
layout: article
title: The Appwriter
description: Learn about the custom Appwriter mechanical keyboard and its specifications
---
The Appwriter is an exclusive keyboard custom-designed by the Appwrite team. It is optimized to improve developer productivity and is specially tuned to use with the Appwrite Console.
{% only_dark %}
![The Appwriter](/images/docs/keyboard/dark/appwriter.png)
{% /only_dark %}
{% only_light %}
![The Appwriter](/images/docs/keyboard/appwriter.png)
{% /only_light %}
The Appwriter uses icons from the Appwrite Console and Docs on specific keys, making memorizing keyboard shortcuts easier. For example, `G` then `D` is the shortcut for navigating to your project's databases, and the icon on the `D` key matches the icon for Appwrite Databases.
The box includes the Appwriter keyboard, a USB-C data/charging cable, a 2-in-1 keycap and switch puller, extra PC layout keycaps, and an information card with a QR code. The keyboard comes with Mac layout keys pre-installed for MacOS which can also be swapped with the included PC keycaps.
## Specifications
|Specification|Details|
|----|----|
|Battery|3000mAh Rechargeable battery|
|Design|75% Compact design keyboard|
|Keycaps|84 Custom dye sublimated PBT keycaps|
|Switches|Gateron g pro yellow pre-lubed switches|
|Connections|Tri-mode connectivity (2.4Ghz wireless / bluetooth / wired USB-C)|
|Case|Noise dampening case-foam|
|RGB Backlight|16 Million colors & multiple lighting effects|
|Switch Support|Hot-swappable switches with 3 & 5 pin|
|N-Key|N-key rollover|
The Appwriter is currently exclusive to Appwrite events and giveaways. To get your hands on an Appwriter, look out for events & giveaways on our social media: [Discord](https://discord.com/invite/GSeTUeA), [Github](https://github.com/appwrite/appwrite), [X](https://x.com/intent/follow?screen_name=appwrite) and [YouTube](https://www.youtube.com/c/appwrite). Later this year, the Appwriter will be available for purchase in the [Appwrite Store](https://appwrite.store/).