The official Appwrite Documentation source code.
- Clone the repository
- Update, add, or fix current docs
- Once content is ready, raise a PR
- Use proper title hierarchy (h1-h6) and valid HTML
- All titles must follow the Chicago style of headline capitalization
- External links (not appwrite.io) should be opened in a new tab (
target="_blank"
) - External links should have an HTML attribute of
rel="noopener"
- All filenames should be dash-based and nested in a way that makes sense
- All images should be in PNG format and 2600x1400px. Do not include any sensitive data in images. All screenshot of the Appwrite dashboard should support light and dark mode.
- When creating new content or adjusting docs hierarchy, please consult the Appwrite team by opening a Github Issue in this repository
Use the following HTML structure to present code examples:
<div class="ide margin-top-small" data-lang="ruby" data-lang-label="Ruby SDK">
<pre class="line-numbers"><code class="prism language-ruby" data-prism>#ruby code here...</code></pre>
</div>
As of writing this, these are the supported languages for code examples:
- Markup
- CSS
- CLike
- JavaScript
- Bash
- C#
- Dart
- Go
- GraphQL
- HTTP
- Java
- JSON
- Kotlin
- Markup-templating
- PHP
- Powershell
- Python
- Ruby
- Swift
- TypeScript
- YAML
For showing examples in multiple languages use the list structure:
<ul class="phases clear" data-ui-phases>
<li>
<h3>Node.js</h3>
<div class="ide margin-top-small" data-lang="nodejs" data-lang-label="Node.js SDK">
<pre class="line-numbers"><code class="prism language-javascript" data-prism>// node code here...</code></pre>
</div>
</li>
<li>
<h3>PHP</h3>
<div class="ide margin-top-small" data-lang="php" data-lang-label="PHP SDK">
<pre class="line-numbers"><code class="prism language-php" data-prism>//php code here..</code></pre>
</div>
</li>
</ul>
Note Don't forget to use proper indenting for all code examples. The indenting of the code examples should be independent from the indentation of the surrounding HTML tags.
Use the following HTML structure to add important notes inside your docs:
<div class="notice">
<h2>Important Message</h2>
<p>Message content here.</p>
</div>
Use the following HTML structure to add images. You can also add support for dark and light mode versions (recommended!). If no dark mode is provided, light mode will be the fallback. Don't forget to provide alternative text for user accessibility and a description for each image.
<?php
$image = new View(__DIR__.'/../general/image.phtml');
echo $image
->setParam('srcLight', '/images-ee/docs/functions-light.png')
->setParam('srcDark', '/images-ee/docs/functions-dark.png')
->setParam('alt', 'Function settings page.')
->setParam('description', 'Function settings page.')
->render();
?>
At any point, if you are stuck, feel free to hop on our Discord server to ask questions or seek mentorship!
Join our growing community around the world! See our official Blog. Follow us on Twitter, Facebook Page, Facebook Group , DEV Community or join our live Discord server for more help, ideas, and discussions.