LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 04:22:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettier updates

Browse Source
This commit is contained in:
Jesse Winton
2024-07-23 16:08:38 -04:00
parent 79f84f74a0
commit 7cd6ca33d0
278 changed files with 6228 additions and 5966 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.github/workflows/stale.yml vendored
View File

@@ -2,7 +2,7 @@ name: Mark stale issues
on:
schedule:
- cron: "0 0 * * *" # Midnight Runtime
- cron: '0 0 * * *' # Midnight Runtime
jobs:
stale:
@@ -13,11 +13,11 @@ jobs:
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
stale-issue-message: "This issue has been labeled as a 'question', indicating that it requires additional information from the requestor. It has been inactive for 7 days. If no further activity occurs, this issue will be closed in 14 days."
stale-issue-label: "stale"
stale-issue-label: 'stale'
days-before-stale: 7
days-before-close: 14
remove-stale-when-updated: true
close-issue-message: "This issue has been closed due to inactivity. If you still require assistance, please provide the requested information."
close-issue-reason: "not_planned"
close-issue-message: 'This issue has been closed due to inactivity. If you still require assistance, please provide the requested information.'
close-issue-reason: 'not_planned'
operations-per-run: 100
only-labels: "question"
only-labels: 'question'

2
.gitpod.yml
View File

@@ -7,5 +7,3 @@
tasks:
- init: pnpm install && pnpm run build
command: pnpm run dev

24
CONTENT.md
View File

@@ -129,15 +129,20 @@ Alternatively, use markdoc tables.
```md
{% table %}
* Heading 1
* Heading 2
- Heading 1
- Heading 2
---
* Row 1 Cell 1
* Row 1 Cell 2
- Row 1 Cell 1
- Row 1 Cell 2
---
* Row 2 Cell 1
* Row 2 cell 2
{% /table %}
- Row 2 Cell 1
- Row 2 cell 2
{% /table %}
```
#### Block Quotes
@@ -186,7 +191,9 @@ print('test');
</pre>
#### Sections
Use sections when there is a clear step-by-step format to a page. This is used mainly in journey pages and tutorials.
```md
{% section #featured-products-1 step=1 title="Title" %}
Lorem ipsum dolor sit amet consectetur.
@@ -243,6 +250,7 @@ Available sizes are `s`, `m`, `l` and `xl`. Default: `s`.
```
#### Cards
We use cards when we reference a list of links for navigation
```
@@ -268,6 +276,7 @@ Get started with Appwrite and SvelteKit
```
#### Cards with icons
We use cards when we reference a list of links for navigation, this variation has icons for extra hints visually.
```
@@ -285,6 +294,7 @@ Configure FCM for push notification to Android and Apple devices.
```
#### Accordions
Use accordions to reduce page size and collapse information that's not important when a reader is skilling the page.
```

8
STYLE.md
View File

@@ -180,17 +180,23 @@ It should contain all the pages and headings with in them, maintainers may reque
```md
# page 1
## heading a
## heading b
...
# page 2
## heading a
## heading b
...
# page 3
## heading a
## heading b
...
...
```
@@ -283,9 +289,11 @@ Like sentences, important information always comes first.
This makes it easier to scan through the page.
✅ Clear, important information such as actions come first
> Store secrets as environment variables in vaults by navigating to **settings** > **security** > **vault**. Your secrets should never be shared. You must ensure data privacy, sharing secrets can compromise security during development.
❌ Unclear, important information is in the middle of the paragraph
> Security is important in development. That's why you should take care to protect secrets. Secrets should be safely stored as a environment variable in a vault. You can find vaults under **settings** > **security** > **vault**. Don't share this with anyone!
If there are multiple important actions or pieces of information, **break up the paragraph**.

2
package.json
View File

@@ -57,7 +57,7 @@
"openapi-types": "^12.1.3",
"oslllo-svg-fixer": "^3.0.0",
"postcss": "^8.4.39",
"prettier": "^3.3.2",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.6.5",
"sass": "^1.77.6",

24
pnpm-lock.yaml generated
View File

@@ -109,14 +109,14 @@ importers:
specifier: ^8.4.39
version: 8.4.39
prettier:
specifier: ^3.3.2
version: 3.3.2
specifier: ^3.3.3
version: 3.3.3
prettier-plugin-svelte:
specifier: ^3.2.5
version: 3.2.5(prettier@3.3.2)(svelte@4.2.18)
version: 3.2.5(prettier@3.3.3)(svelte@4.2.18)
prettier-plugin-tailwindcss:
specifier: ^0.6.5
version: 0.6.5(prettier-plugin-svelte@3.2.5(prettier@3.3.2)(svelte@4.2.18))(prettier@3.3.2)
version: 0.6.5(prettier-plugin-svelte@3.2.5(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3)
sass:
specifier: ^1.77.6
version: 1.77.6
@@ -3388,8 +3388,8 @@ packages:
prettier-plugin-svelte:
optional: true
prettier@3.3.2:
resolution: {integrity: sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==}
prettier@3.3.3:
resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
engines: {node: '>=14'}
hasBin: true
@@ -7552,18 +7552,18 @@ snapshots:
prelude-ls@1.2.1: {}
prettier-plugin-svelte@3.2.5(prettier@3.3.2)(svelte@4.2.18):
prettier-plugin-svelte@3.2.5(prettier@3.3.3)(svelte@4.2.18):
dependencies:
prettier: 3.3.2
prettier: 3.3.3
svelte: 4.2.18
prettier-plugin-tailwindcss@0.6.5(prettier-plugin-svelte@3.2.5(prettier@3.3.2)(svelte@4.2.18))(prettier@3.3.2):
prettier-plugin-tailwindcss@0.6.5(prettier-plugin-svelte@3.2.5(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3):
dependencies:
prettier: 3.3.2
prettier: 3.3.3
optionalDependencies:
prettier-plugin-svelte: 3.2.5(prettier@3.3.2)(svelte@4.2.18)
prettier-plugin-svelte: 3.2.5(prettier@3.3.3)(svelte@4.2.18)
prettier@3.3.2: {}
prettier@3.3.3: {}
pretty-format@29.7.0:
dependencies:

8
scripts/download-contributor-data.js
View File

@@ -4,11 +4,13 @@ const perPage = 100;
const outputFile = `./src/lib/contributors.ts`;
const headers = process.env.GITHUB_TOKEN ? {
const headers = process.env.GITHUB_TOKEN
? {
Authorization: `token ${process.env.GITHUB_TOKEN}`
} : {}
}
: {};
console.log(`using github token: ${!!process.env.GITHUB_TOKEN}`)
console.log(`using github token: ${!!process.env.GITHUB_TOKEN}`);
async function fetchRepositories() {
let page = 1;

4
src/app.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -24,7 +24,7 @@
if (isDocs) {
const theme = localStorage.getItem('theme');
if (theme) {
document.body.classList.remove('theme-dark', 'theme-light');
document.body.classList.remove('theme-dark', 'light');
if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
.matches

8
src/hooks.client.ts
View File

@@ -18,11 +18,13 @@ Sentry.init({
replaysOnErrorSampleRate: 1.0,
// If you don't want to use Session Replay, just remove the line below:
integrations: [replayIntegration({
integrations: [
replayIntegration({
maskAllInputs: true,
maskAllText: false,
blockAllMedia: false,
})]
blockAllMedia: false
})
]
});
// If you have a custom error handler, pass it to `handleErrorWithSentry`

2
src/hooks.server.ts
View File

@@ -10,7 +10,7 @@ Sentry.init({
dsn: SENTRY_DSN,
tracesSampleRate: 1,
allowUrls: [/appwrite\.io/]
})
});
const redirectMap = new Map(redirects.map(({ link, redirect }) => [link, redirect]));

2
src/icons/build.js
View File

@@ -1,3 +1,3 @@
import { generateIcons } from "./scripts.js";
import { generateIcons } from './scripts.js';
generateIcons();

217
src/icons/output/web-icon.css
View File

@@ -1,15 +1,18 @@
@font-face {
font-family: "web-icon";
font-family: 'web-icon';
font-display: swap;
src: url('web-icon.eot'); /* IE9*/
src: url('web-icon.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("web-icon.woff2") format("woff2"),
url("web-icon.woff") format("woff"),
url('web-icon.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('web-icon.svg#web-icon') format('svg'); /* iOS 4.1- */
src:
url('web-icon.eot#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('web-icon.woff2') format('woff2'),
url('web-icon.woff') format('woff'),
url('web-icon.ttf') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('web-icon.svg#web-icon')
format('svg'); /* iOS 4.1- */
}
[class^="web-icon-"], [class*=" web-icon-"] {
[class^='web-icon-'],
[class*=' web-icon-'] {
font-family: 'web-icon' !important;
font-size: 20px;
font-style: normal;
@@ -17,53 +20,153 @@
-moz-osx-font-smoothing: grayscale;
}
.web-icon-apple:before { content: "\ea01"; }
.web-icon-appwrite:before { content: "\ea02"; }
.web-icon-arrow-down:before { content: "\ea03"; }
.web-icon-arrow-ext-link:before { content: "\ea04"; }
.web-icon-arrow-left:before { content: "\ea05"; }
.web-icon-arrow-right:before { content: "\ea06"; }
.web-icon-arrow-up:before { content: "\ea07"; }
.web-icon-calendar:before { content: "\ea08"; }
.web-icon-check:before { content: "\ea09"; }
.web-icon-chevron-down:before { content: "\ea0a"; }
.web-icon-chevron-left:before { content: "\ea0b"; }
.web-icon-chevron-right:before { content: "\ea0c"; }
.web-icon-chevron-up:before { content: "\ea0d"; }
.web-icon-close:before { content: "\ea0e"; }
.web-icon-command:before { content: "\ea0f"; }
.web-icon-copy:before { content: "\ea10"; }
.web-icon-dark:before { content: "\ea11"; }
.web-icon-discord:before { content: "\ea12"; }
.web-icon-divider-vertical:before { content: "\ea13"; }
.web-icon-download:before { content: "\ea14"; }
.web-icon-ext-link:before { content: "\ea15"; }
.web-icon-firebase:before { content: "\ea16"; }
.web-icon-github:before { content: "\ea17"; }
.web-icon-google:before { content: "\ea18"; }
.web-icon-hamburger-menu:before { content: "\ea19"; }
.web-icon-light:before { content: "\ea1a"; }
.web-icon-linkedin:before { content: "\ea1b"; }
.web-icon-location:before { content: "\ea1c"; }
.web-icon-logout-left:before { content: "\ea1d"; }
.web-icon-logout-right:before { content: "\ea1e"; }
.web-icon-mailgun:before { content: "\ea1f"; }
.web-icon-message:before { content: "\ea20"; }
.web-icon-microsoft:before { content: "\ea21"; }
.web-icon-minus:before { content: "\ea22"; }
.web-icon-nuxt:before { content: "\ea23"; }
.web-icon-platform:before { content: "\ea24"; }
.web-icon-play:before { content: "\ea25"; }
.web-icon-plus:before { content: "\ea26"; }
.web-icon-product-hunt:before { content: "\ea27"; }
.web-icon-refine:before { content: "\ea28"; }
.web-icon-rest:before { content: "\ea29"; }
.web-icon-search:before { content: "\ea2a"; }
.web-icon-sendgrid:before { content: "\ea2b"; }
.web-icon-star:before { content: "\ea2c"; }
.web-icon-system:before { content: "\ea2d"; }
.web-icon-textmagic:before { content: "\ea2e"; }
.web-icon-twitter:before { content: "\ea2f"; }
.web-icon-vue:before { content: "\ea30"; }
.web-icon-x:before { content: "\ea31"; }
.web-icon-youtube:before { content: "\ea32"; }
.web-icon-apple:before {
content: '\ea01';
}
.web-icon-appwrite:before {
content: '\ea02';
}
.web-icon-arrow-down:before {
content: '\ea03';
}
.web-icon-arrow-ext-link:before {
content: '\ea04';
}
.web-icon-arrow-left:before {
content: '\ea05';
}
.web-icon-arrow-right:before {
content: '\ea06';
}
.web-icon-arrow-up:before {
content: '\ea07';
}
.web-icon-calendar:before {
content: '\ea08';
}
.web-icon-check:before {
content: '\ea09';
}
.web-icon-chevron-down:before {
content: '\ea0a';
}
.web-icon-chevron-left:before {
content: '\ea0b';
}
.web-icon-chevron-right:before {
content: '\ea0c';
}
.web-icon-chevron-up:before {
content: '\ea0d';
}
.web-icon-close:before {
content: '\ea0e';
}
.web-icon-command:before {
content: '\ea0f';
}
.web-icon-copy:before {
content: '\ea10';
}
.web-icon-dark:before {
content: '\ea11';
}
.web-icon-discord:before {
content: '\ea12';
}
.web-icon-divider-vertical:before {
content: '\ea13';
}
.web-icon-download:before {
content: '\ea14';
}
.web-icon-ext-link:before {
content: '\ea15';
}
.web-icon-firebase:before {
content: '\ea16';
}
.web-icon-github:before {
content: '\ea17';
}
.web-icon-google:before {
content: '\ea18';
}
.web-icon-hamburger-menu:before {
content: '\ea19';
}
.web-icon-light:before {
content: '\ea1a';
}
.web-icon-linkedin:before {
content: '\ea1b';
}
.web-icon-location:before {
content: '\ea1c';
}
.web-icon-logout-left:before {
content: '\ea1d';
}
.web-icon-logout-right:before {
content: '\ea1e';
}
.web-icon-mailgun:before {
content: '\ea1f';
}
.web-icon-message:before {
content: '\ea20';
}
.web-icon-microsoft:before {
content: '\ea21';
}
.web-icon-minus:before {
content: '\ea22';
}
.web-icon-nuxt:before {
content: '\ea23';
}
.web-icon-platform:before {
content: '\ea24';
}
.web-icon-play:before {
content: '\ea25';
}
.web-icon-plus:before {
content: '\ea26';
}
.web-icon-product-hunt:before {
content: '\ea27';
}
.web-icon-refine:before {
content: '\ea28';
}
.web-icon-rest:before {
content: '\ea29';
}
.web-icon-search:before {
content: '\ea2a';
}
.web-icon-sendgrid:before {
content: '\ea2b';
}
.web-icon-star:before {
content: '\ea2c';
}
.web-icon-system:before {
content: '\ea2d';
}
.web-icon-textmagic:before {
content: '\ea2e';
}
.web-icon-twitter:before {
content: '\ea2f';
}
.web-icon-vue:before {
content: '\ea30';
}
.web-icon-x:before {
content: '\ea31';
}
.web-icon-youtube:before {
content: '\ea32';
}

10
src/lib/animations/OpenSource.svelte
View File

@@ -182,7 +182,7 @@
class="web-card is-white web-u-min-block-size-320 u-flex-vertical oss-card"
id="oss-discord"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-flex-vertical u-main-space-between gap-8">
<span
class="web-icon-discord web-u-font-size-40"
aria-hidden="true"
@@ -197,7 +197,7 @@
id="oss-github"
href="https://github.com/appwrite/appwrite"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-flex-vertical u-main-space-between gap-8">
<span
class="web-icon-github web-u-font-size-40"
aria-hidden="true"
@@ -212,7 +212,7 @@
class="web-card is-white web-u-min-block-size-320 u-flex-vertical oss-card"
id="oss-twitter"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-flex-vertical u-main-space-between gap-8">
<span
class="web-icon-x web-u-font-size-40"
aria-hidden="true"
@@ -227,7 +227,7 @@
class="web-card is-white web-u-min-block-size-320 u-flex-vertical oss-card"
id="oss-youtube"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-flex-vertical u-main-space-between gap-8">
<span
class="web-icon-youtube web-u-font-size-40"
aria-hidden="true"
@@ -242,7 +242,7 @@
id="oss-commits"
href="https://github.com/appwrite/appwrite"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-flex-vertical u-main-space-between gap-8">
<span
class="web-icon-github web-u-font-size-40"
aria-hidden="true"

2
src/lib/animations/Products/Products.svelte
View File

@@ -247,7 +247,7 @@
Your backend, minus the hassle
</h2>
<p
class="web-description web-u-max-width-700 u-margin-inline-auto"
class="web-description web-u-max-width-700 mx-auto"
transition:fly={{
y: 16,
delay: 400

2
src/lib/animations/Products/auth/box.svelte
View File

@@ -54,7 +54,7 @@
out:fly={{ duration: 100, x: -16 }}
animate:flip={{ duration: 150 }}
>
<div class="u-flex u-cross-center u-gap-12">
<div class="flex u-cross-center gap-3">
<div class="avatar is-size-small">{user.avatar}</div>
<span class="truncated">{user.name}</span>
</div>

15
src/lib/animations/Products/auth/phone.svelte
View File

@@ -9,7 +9,7 @@
$: controlsEnabled = $state.showControls && Object.values($state.controls).some(Boolean);
</script>
<div data-theme-ignore class="inner-phone theme-light">
<div data-theme-ignore class="inner-phone light">
<p class="title">Create an Account</p>
<p class="subtitle">Please enter your details</p>
<div class="inputs">
@@ -19,7 +19,12 @@
</fieldset>
<fieldset>
<label for="email">Your Email</label>
<input type="email" id="email" placeholder="Enter your email" bind:value={$state.email} />
<input
type="email"
id="email"
placeholder="Enter your email"
bind:value={$state.email}
/>
</fieldset>
<fieldset>
<label for="password">Create Password</label>
@@ -36,7 +41,11 @@
<span class="with-sep" transition:fade={{ duration: 100 }}>or sign up with</span>
<div class="oauth-btns" transition:fade={{ duration: 100 }}>
{#each objectKeys($state.controls).filter((p) => $state.controls[p]) as provider (provider)}
<button class="oauth" transition:fade={{ duration: 100 }} animate:flip={{ duration: 250 }}>
<button
class="oauth"
transition:fade={{ duration: 100 }}
animate:flip={{ duration: 250 }}
>
<div class="inner">
<span class="web-icon-{provider.toLowerCase()}" />
<span>{provider}</span>

2
src/lib/animations/Products/databases/phone.svelte
View File

@@ -6,7 +6,7 @@
const { state } = databasesController;
</script>
<div data-theme-ignore class="inner-phone theme-light">
<div data-theme-ignore class="inner-phone light">
<div class="header">
<p class="title">Your tasks</p>
<span class="icon-menu" aria-label="menu" />

2
src/lib/animations/Products/functions/phone.svelte
View File

@@ -30,7 +30,7 @@
].filter(Boolean) as Method[];
</script>
<div data-theme-ignore class="inner-phone theme-light">
<div data-theme-ignore class="inner-phone light">
<div class="header">
<p class="title">Upgrade plan</p>
<span class="icon-menu" aria-label="menu" />

2
src/lib/animations/Products/messaging/phone.svelte
View File

@@ -19,7 +19,7 @@
</div>
{/if}
<div data-theme-ignore class="inner-phone theme-light">
<div data-theme-ignore class="inner-phone light">
<div class="header">
<p class="title">Your tasks</p>
<span class="icon-menu" aria-label="menu" />

29
src/lib/animations/Products/post/post.svelte
View File

@@ -16,26 +16,26 @@
</script>
<div class="gradient-box auth" id="post-auth-{$elId}">
<div class="u-flex u-cross-center u-gap-8">
<div class="flex u-cross-center gap-2">
<p class="icon-user-group" />
<p class="f-eyebrow">Authentication</p>
</div>
<p class="f-display mbs-16">{formatK(toScale($authentication, [0, 1], [0, 4000]))}</p>
<div class="u-flex u-cross-center justify-between mbs-4">
<div class="flex u-cross-center justify-between mbs-4">
<p class="f-sub">Users</p>
<p class="f-idk">Sessions: 20K</p>
</div>
</div>
<div class="gradient-box storage" id="post-storage-{$elId}">
<div class="u-flex u-cross-center u-gap-8">
<div class="flex u-cross-center gap-2">
<p class="icon-folder" />
<p class="f-eyebrow">Storage</p>
</div>
<p class="f-display mbs-16">
{toScale($storage, [0, 1], [0, 8]).toFixed(1)} <span class="f-tiny-display">GB</span>
</p>
<div class="u-flex u-cross-center justify-between mbs-4">
<div class="flex u-cross-center justify-between mbs-4">
<p class="f-sub">Storage</p>
<p class="f-idk">Buckets: 44</p>
</div>
@@ -50,23 +50,23 @@
</div>
<div class="gradient-box functions" id="post-functions-{$elId}">
<div class="u-flex u-cross-center u-gap-8">
<div class="flex u-cross-center gap-2">
<p class="icon-lightning-bolt" />
<p class="f-eyebrow">Functions</p>
</div>
<p class="f-display mbs-16">{toScale($executions, [0, 1], [0, 846]).toFixed(0)}</p>
<div class="u-flex u-cross-center justify-between mbs-4">
<div class="flex u-cross-center justify-between mbs-4">
<p class="f-sub">Executions</p>
</div>
</div>
<div class="gradient-box databases" id="post-databases-{$elId}">
<div class="u-flex u-cross-center u-gap-8">
<div class="flex u-cross-center gap-2">
<p class="icon-database" />
<p class="f-eyebrow">Databases</p>
</div>
<p class="f-display mbs-16">{toScale($databases, [0, 1], [0, 8]).toFixed(0)}</p>
<div class="u-flex u-cross-center justify-between mbs-4">
<div class="flex u-cross-center justify-between mbs-4">
<p class="f-sub">Databases</p>
<p class="f-idk">Documents: 20</p>
</div>
@@ -84,7 +84,7 @@
<img class="mbs-16" src="./images/animations/realtime-graph.svg" alt="" />
</div>
<div class="gradient-overlay u-flex u-flex-vertical">
<div class="gradient-overlay flex u-flex-vertical">
<h3>See your products grow</h3>
<p>
Keep track of your projects progress on the Appwrite Console and see them grow into products
@@ -171,9 +171,13 @@
position: absolute;
background: var(--card, rgba(35, 35, 37, 0.9));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), -2px 4px 9px 0px rgba(0, 0, 0, 0.06),
-8px 15px 17px 0px rgba(0, 0, 0, 0.05), -19px 34px 23px 0px rgba(0, 0, 0, 0.03),
-33px 60px 27px 0px rgba(0, 0, 0, 0.01), -52px 94px 30px 0px rgba(0, 0, 0, 0);
box-shadow:
0px 0px 0px 0px rgba(0, 0, 0, 0.06),
-2px 4px 9px 0px rgba(0, 0, 0, 0.06),
-8px 15px 17px 0px rgba(0, 0, 0, 0.05),
-19px 34px 23px 0px rgba(0, 0, 0, 0.03),
-33px 60px 27px 0px rgba(0, 0, 0, 0.01),
-52px 94px 30px 0px rgba(0, 0, 0, 0);
backdrop-filter: blur(8px);
padding: 1.5rem;
@@ -217,7 +221,6 @@
//filter: blur(125px); // break Safari
background: #19191dcc;
filter: blur(67px);
}
h3 {

18
src/lib/animations/Products/realtime/phone.svelte
View File

@@ -43,7 +43,7 @@
</script>
<div class="wrapper">
<div data-theme-ignore class="inner-phone theme-light">
<div data-theme-ignore class="inner-phone light">
<div class="header">
<div class="row">
<p class="title">My Team's tasks</p>
@@ -89,7 +89,11 @@
<span class="text">New Task</span>
</button>
{#each tasks as task (task.title)}
<div class="task" animate:flip={{ duration: 250 }} in:scale={{ delay: 150 }}>
<div
class="task"
animate:flip={{ duration: 250 }}
in:scale={{ delay: 150 }}
>
{#if task.images}
<ul class="flow gap-8">
{#each task.images as image}
@@ -609,9 +613,13 @@
bottom: -10rem;
background: var(--card, rgba(35, 35, 37, 0.9));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), -2px 4px 9px 0px rgba(0, 0, 0, 0.06),
-8px 15px 17px 0px rgba(0, 0, 0, 0.05), -19px 34px 23px 0px rgba(0, 0, 0, 0.03),
-33px 60px 27px 0px rgba(0, 0, 0, 0.01), -52px 94px 30px 0px rgba(0, 0, 0, 0);
box-shadow:
0px 0px 0px 0px rgba(0, 0, 0, 0.06),
-2px 4px 9px 0px rgba(0, 0, 0, 0.06),
-8px 15px 17px 0px rgba(0, 0, 0, 0.05),
-19px 34px 23px 0px rgba(0, 0, 0, 0.03),
-33px 60px 27px 0px rgba(0, 0, 0, 0.01),
-52px 94px 30px 0px rgba(0, 0, 0, 0);
backdrop-filter: blur(8px);
padding-block: 1.5rem;

3
src/lib/animations/Products/storage/index.ts
View File

@@ -80,7 +80,8 @@ const execute = async () => {
await safeAnimate(box, { x: 300, y: 300 }, { duration: 0 })?.finished;
await Promise.all([
safeAnimate(uploadImg, { x: [64, 48], y: [80, 64], opacity: 1 }, { duration: 0.5 })?.finished,
safeAnimate(uploadImg, { x: [64, 48], y: [80, 64], opacity: 1 }, { duration: 0.5 })
?.finished,
safeAnimate(box, { y: [300 - 16, 300], opacity: 1 }, { duration: 1 })?.finished
]);

2
src/lib/animations/Products/storage/phone.svelte
View File

@@ -11,7 +11,7 @@
const { state } = storageController;
</script>
<div data-theme-ignore class="inner-phone theme-light">
<div data-theme-ignore class="inner-phone light">
<div class="header">
<p class="title">Your tasks</p>
<span class="icon-menu" aria-label="menu" />

17
src/lib/animations/scroll-indicator.svelte
View File

@@ -25,34 +25,21 @@
</script>
<div
class="scroll-indicator"
class="scroll-indicator relative h-full w-px shrink-0 rounded-full"
use:rect={elRect}
style:--y={`${y}px`}
style:--percentage={`${easedPercentage * 100}%`}
>
<div class="web-dot" />
<div class="0)] absolute -top-[8px] left-1/2 translate-[-50%_var(--y," />
</div>
<style lang="scss">
.scroll-indicator {
position: relative;
width: 1px;
flex-shrink: 0;
height: 100%;
background: linear-gradient(
to bottom,
hsl(var(--web-color-accent)) 0%,
hsl(var(--web-color-greyscale-700)) var(--percentage),
hsl(var(--web-color-greyscale-700)) 100%
);
border-radius: 100%;
}
.web-dot {
position: absolute;
left: 50%;
translate: -50% var(--y, 0);
top: -8px;
}
</style>

4
src/lib/appwrite/init.ts
View File

@@ -2,9 +2,7 @@ import { PUBLIC_APPWRITE_PROJECT_INIT_ID } from '$env/static/public';
import { Client, Account } from '@appwrite.io/console';
const client = new Client();
client
.setEndpoint('https://cloud.appwrite.io/v1')
.setProject(PUBLIC_APPWRITE_PROJECT_INIT_ID);
client.setEndpoint('https://cloud.appwrite.io/v1').setProject(PUBLIC_APPWRITE_PROJECT_INIT_ID);
export const appwriteInit = {
client,

9
src/lib/components/Accordion/index.ts
View File

@@ -1,7 +1,4 @@
import Root from "./Root.svelte";
import Item from "./Item.svelte";
import Root from './Root.svelte';
import Item from './Item.svelte';
export {
Root as Accordion,
Item as AccordionItem
}
export { Root as Accordion, Item as AccordionItem };

10
src/lib/components/Article.svelte
View File

@@ -27,8 +27,14 @@
{title}
</h4>
<div class="web-author">
<div class="u-flex u-cross-center u-gap-8">
<img class="web-author-image" src={avatar} width="24" height="24" alt={author} />
<div class="flex u-cross-center gap-2">
<img
class="web-author-image"
src={avatar}
width="24"
height="24"
alt={author}
/>
<div class="web-author-info">
<h4 class="web-sub-body-400 web-u-color-text-primary">{author}</h4>
<ul class="web-metadata web-caption-400 web-is-not-mobile">

10
src/lib/components/Carousel.svelte
View File

@@ -42,9 +42,9 @@
</script>
<div>
<div class="u-flex u-flex-wrap u-cross-center u-margin-block-start-8">
<div class="flex flex-wrap u-cross-center u-margin-block-start-8">
<slot name="header" />
<div class="u-flex u-gap-12 u-cross-end u-margin-inline-start-auto">
<div class="flex gap-3 u-cross-end u-margin-inline-start-auto">
<button
class="web-icon-button"
aria-label="Move carousel backward"
@@ -108,7 +108,11 @@
&::after {
right: 0;
background: linear-gradient(to left, hsl(var(--web-color-background-docs)), transparent);
background: linear-gradient(
to left,
hsl(var(--web-color-background-docs)),
transparent
);
}
&[data-state='end']::after {

12
src/lib/components/Feedback.svelte
View File

@@ -49,12 +49,12 @@
<section class="web-content-footer">
<header class="web-content-footer-header u-width-full-line">
<div
class="u-flex u-gap-32 u-main-space-between u-cross-center u-width-full-line"
class="flex gap-8 u-main-space-between u-cross-center u-width-full-line"
style="flex-wrap: wrap-reverse;"
>
<div class="u-flex u-gap-16 u-cross-center">
<div class="flex gap-4 u-cross-center">
<h5 class="web-main-body-600 web-u-color-text-primary">Was this page helpful?</h5>
<div class="u-flex u-gap-8">
<div class="flex gap-2">
<button
class="web-radio-button"
aria-label="helpful"
@@ -88,7 +88,7 @@
href="https://github.com/appwrite/website"
target="_blank"
rel="noopener noreferrer"
class="web-link u-flex u-gap-4 u-cross-baseline"
class="web-link flex gap-1 u-cross-baseline"
>
<span class="icon-pencil-alt u-contents" aria-hidden="true" />
<span>Update on GitHub</span>
@@ -104,7 +104,7 @@
class="web-card is-normal"
style="--card-padding:1rem"
>
<div class="u-flex-vertical u-gap-8">
<div class="u-flex-vertical gap-2">
<label for="message">
<span class="web-u-color-text-primary">
What did you {feedbackType === 'negative' ? 'dislike' : 'like'}? (optional)
@@ -139,7 +139,7 @@
</p>
{/if}
<div class="u-flex u-main-end u-margin-block-start-16 u-gap-8">
<div class="flex u-main-end u-margin-block-start-16 gap-2">
<button class="web-button is-text" on:click={() => (showFeedback = false)}>
<span>Cancel</span>
</button>

4
src/lib/components/FloatingHeads.svelte
View File

@@ -23,7 +23,7 @@
export let images: Array<string>;
</script>
<div class="u-position-absolute web-u-hide-mobile root">
<div class="absolute web-u-hide-mobile root">
{#each headPositions as [size, top, left], i}
{@const image = clamp(0, images.length - 1, i % images.length)}
<FloatingHead
@@ -33,7 +33,7 @@
{size}
/>
<div style:margin-block-end="0" style:padding="10%">
<img style:border-radius="50%" class="u-block" alt="" />
<img style:border-radius="50%" class="block" alt="" />
</div>
{/each}
</div>

4
src/lib/components/FooterNav.svelte
View File

@@ -37,7 +37,7 @@
{ label: 'Functions', href: '/docs/products/functions' },
{ label: 'Messaging', href: '/products/messaging' },
{ label: 'Storage', href: '/docs/products/storage' },
{ label: 'Realtime', href: '/docs/apis/realtime' },
{ label: 'Realtime', href: '/docs/apis/realtime' }
],
Learn: [
{ label: 'Docs', href: '/docs' },
@@ -92,7 +92,7 @@
<nav
aria-label="Footer"
class="web-footer-nav u-margin-block-start-100 u-position-relative"
class="web-footer-nav u-margin-block-start-100 relative"
class:web-u-sep-block-start={!noBorder}
>
<img class="web-logo" src="/images/logos/appwrite.svg" alt="appwrite" height="24" width="130" />

16
src/lib/components/MainFooter.svelte
View File

@@ -4,12 +4,12 @@
export let variant: 'homepage' | 'docs' = 'homepage';
const year = new Date().getFullYear()
const year = new Date().getFullYear();
</script>
{#if variant === 'homepage'}
<footer class="web-main-footer u-position-relative u-margin-block-start-48">
<ul class="u-flex u-gap-8">
<footer class="web-main-footer relative u-margin-block-start-48">
<ul class="flex gap-2">
{#each socials as social}
<li>
<a
@@ -24,8 +24,8 @@
</li>
{/each}
</ul>
<div class="u-flex u-gap-16">
<ul class="u-flex u-gap-8">
<div class="flex gap-4">
<ul class="flex gap-2">
<li><a class="web-link" href="/terms">Terms</a></li>
<li><a class="web-link" href="/privacy">Privacy</a></li>
<li><a class="web-link" href="/cookies">Cookies</a></li>
@@ -34,11 +34,9 @@
</div>
</footer>
{:else if variant === 'docs'}
<footer
class="web-main-footer is-with-bg-color u-margin-block-start-32 u-small u-position-relative"
>
<footer class="web-main-footer is-with-bg-color u-margin-block-start-32 u-small relative">
<div class="web-main-footer-grid-1">
<ul class="web-main-footer-grid-1-column-1 u-flex u-gap-8">
<ul class="web-main-footer-grid-1-column-1 flex gap-2">
{#each socials as social}
<li>
<a

7
src/lib/components/MobileNav.svelte
View File

@@ -16,8 +16,11 @@
<nav class="web-side-nav web-is-not-desktop" class:u-hide={!open}>
<div class="web-side-nav-wrapper web-u-padding-inline-16">
<div class="u-flex items-center u-gap-8">
<a href="https://cloud.appwrite.io/register" class="web-button is-secondary web-u-flex-1">
<div class="flex items-center gap-2">
<a
href="https://cloud.appwrite.io/register"
class="web-button is-secondary web-u-flex-1"
>
Sign up
</a>
<IsLoggedIn classes="web-u-flex-1" />

39
src/lib/components/Newsletter.svelte
View File

@@ -82,21 +82,26 @@
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-grid-1-1-opt-2 u-gap-32">
<div class="grid grid-cols-2-opt-2 gap-8">
<div class="">
<div class="web-u-max-inline-size-none-mobile" class:web-u-max-width-380={!submitted}>
<section class="u-flex-vertical web-u-gap-20">
<h1 class="web-title web-u-color-text-primary">Subscribe to our newsletter</h1>
<div
class="web-u-max-inline-size-none-mobile"
class:web-u-max-width-380={!submitted}
>
<section class="u-flex-vertical web-gap-5">
<h1 class="web-title web-u-color-text-primary">
Subscribe to our newsletter
</h1>
<p class="web-description web-u-padding-block-end-40">
Sign up to our company blog and get the latest insights from Appwrite. Learn more
about engineering, product design, building community, and tips & tricks for using
Appwrite.
Sign up to our company blog and get the latest insights from
Appwrite. Learn more about engineering, product design, building
community, and tips & tricks for using Appwrite.
</p>
</section>
</div>
</div>
{#if submitted}
<div class="u-flex u-gap-8 u-cross-center">
<div class="flex gap-2 u-cross-center">
<svg
width="18"
height="18"
@@ -130,8 +135,12 @@
</span>
</div>
{:else}
<form method="post" on:submit|preventDefault={submit} class="u-flex-vertical u-gap-16">
<div class="u-flex u-flex-vertical u-gap-4">
<form
method="post"
on:submit|preventDefault={submit}
class="u-flex-vertical gap-4"
>
<div class="flex u-flex-vertical gap-1">
<label for="name">Your name</label>
<input
class="web-input-text"
@@ -143,7 +152,7 @@
bind:value={name}
/>
</div>
<div class="u-flex u-flex-vertical u-gap-4">
<div class="flex u-flex-vertical gap-1">
<label for="email">Your email</label>
<input
class="web-input-text"
@@ -155,9 +164,13 @@
bind:value={email}
/>
</div>
<button type="submit" class="web-button" disabled={submitting}>Sign up</button>
<button type="submit" class="web-button" disabled={submitting}
>Sign up</button
>
{#if error}
<span class="text"> Something went wrong. Please try again later. </span>
<span class="text">
Something went wrong. Please try again later.
</span>
{/if}
</form>
{/if}

8
src/lib/components/PreFooter.svelte
View File

@@ -3,9 +3,9 @@
<img src="/images/bgs/pre-footer.png" alt="" class="web-pre-footer-bg" style="z-index:-1" />
<div class="web-grid-1-1 u-gap-32 web-u-row-gap-80 u-position-relative">
<section class="web-hero u-flex web-u-row-gap-32 u-main-center u-cross-center">
<h2 class="web-display u-max-width-500 web-u-text-align-center web-u-color-text-primary">
<div class="grid grid-cols-2 gap-8 web-u-row-gap-80 relative">
<section class="web-hero flex web-u-row-gap-32 u-main-center u-cross-center">
<h2 class="web-display u-max-width-500 text-center web-u-color-text-primary">
Start building today
</h2>
<a
@@ -16,7 +16,7 @@
</a>
</section>
<section
class="web-card is-transparent has-border-gradient web-u-max-inline-width-584-mobile web-u-margin-inline-auto-mobile web-u-inline-width-100-percent-mobile"
class="web-card is-transparent has-border-gradient web-u-max-inline-width-584-mobile web-mx-auto-mobile web-u-inline-width-100-percent-mobile"
>
<header class="web-strip-plans-header">
<div class="web-strip-plans-header-wrapper web-u-row-gap-24">

28
src/lib/components/Search.svelte
View File

@@ -61,7 +61,7 @@
}
function createHref(hit: Hit<Props>): string {
const anchor = hit.anchor === '#' ? '' : hit.anchor ?? '';
const anchor = hit.anchor === '#' ? '' : (hit.anchor ?? '');
const target = hit.url + anchor;
return target.toString();
@@ -147,7 +147,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="wrapper u-position-fixed u-padding-0 u-inset-0 u-flex u-main-center u-cross-center"
class="wrapper u-padding-0 u-inset-0 u-main-center u-cross-center fixed flex"
data-visible={open ? true : undefined}
style:z-index="100"
style:background="hsl(var(--web-color-black) / 0.3)"
@@ -159,15 +159,11 @@
<div
class="web-input-text-search-wrapper web-u-max-width-680 web-u-margin-inline-20 u-width-full-line"
>
<span
class="web-icon-search u-z-index-5"
aria-hidden="true"
style="inset-block-start:0.9rem"
/>
<span class="web-icon-search z-[5]" aria-hidden="true" style="inset-block-start:0.9rem" />
<div id="searchbox" />
<input
class="web-input-button -u-padding-block-0 u-position-relative u-z-index-1"
class="web-input-button -u-padding-block-0 relative z-1"
type="text"
id="search"
bind:value
@@ -184,7 +180,7 @@
}}
/>
<div
class="web-card is-normal u-flex-vertical u-gap-24"
class="web-card is-normal u-flex-vertical gap-6"
use:melt={$menu}
style="--card-padding-mobile:1rem; border-radius:0 0 0.5rem 0.5rem;"
>
@@ -192,15 +188,15 @@
<section>
{#if results.length > 0}
<h6 class="web-eyebrow">{results.length} results found</h6>
<ul class="u-flex-vertical u-gap-4 u-margin-block-start-8">
<ul class="u-flex-vertical u-margin-block-start-8 gap-1">
{#each results as hit, i (hit.uid)}
{@const relevantSubtitle = getRelevantSubtitle(hit)}
<li>
<a
data-hit={i}
href={createHref(hit)}
class="web-button web-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent
web-u-padding-block-8 web-padding-inline-12 web-u-cross-start u-max-width-100-percent"
class="web-button web-caption-400 is-text u-flex-vertical u-min-width-100-percent web-u-padding-block-8
web-padding-inline-12 web-u-cross-start u-max-width-100-percent gap-2"
use:melt={$option({
value: hit,
label: hit.title ?? i.toString()
@@ -216,9 +212,7 @@
{/if}
</div>
{#if hit.p}
<div
class="web-u-color-text-secondary web-u-trim-1"
>
<div class="web-u-color-text-secondary web-u-trim-1">
{hit.p}
</div>
{/if}
@@ -235,7 +229,7 @@
{/if}
<section>
<h6 class="web-eyebrow">Recommended</h6>
<ul class="u-flex-vertical u-gap-4 u-margin-block-start-8">
<ul class="u-flex-vertical u-margin-block-start-8 gap-1">
{#each recommended as hit, i (hit.uid)}
{@const index = i + (results.length ? results.length : 0)}
<li>
@@ -246,7 +240,7 @@
value: hit,
label: hit.title ?? i.toString()
})}
class="web-button web-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent web-u-padding-block-4 web-u-cross-start"
class="web-button web-caption-400 is-text u-flex-vertical u-min-width-100-percent web-u-padding-block-4 web-u-cross-start gap-2"
>
<div class="web-u-trim-1">
<span class="web-u-color-text-secondary">{hit.h1}</span>

2
src/lib/components/Select.svelte
View File

@@ -106,7 +106,7 @@
{#each groups as group}
{@const isDefault = group.label === DEFAULT_GROUP}
{#if isDefault}
<div class="u-flex u-flex-vertical u-gap-2">
<div class="flex u-flex-vertical gap-0.5">
{#each group.options as option}
<button class="web-select-option" use:melt={$optionEl(option)}>
{#if option.icon}

12
src/lib/components/Technologies.svelte
View File

@@ -57,8 +57,7 @@
name: 'React Native',
href: '/docs/quick-starts/react-native',
image: `/images/platforms/${$themeInUse}/react-native.svg`
},
}
] as Array<{
name: string;
href: string;
@@ -66,12 +65,17 @@
}>;
</script>
<ul class="u-flex u-flex-wrap u-gap-16 web-u-margin-block-32-mobile web-u-margin-block-40-not-mobile">
<ul class="flex flex-wrap gap-4 web-u-margin-block-32-mobile web-u-margin-block-40-not-mobile">
{#each platforms as platform}
<Tooltip>
<li>
<a href={platform.href} class="web-icon-button web-box-icon has-border-gradient">
<img src={platform.image} alt="{platform.name} quick start" width="32" height="32" />
<img
src={platform.image}
alt="{platform.name} quick start"
width="32"
height="32"
/>
</a>
</li>
<svelte:fragment slot="tooltip">{platform.name}</svelte:fragment>

5
src/lib/components/TocNav.svelte
View File

@@ -16,7 +16,10 @@
<aside class="web-grid-120-1fr-auto-side" class:web-is-mobile-closed={!showToc}>
<div class="web-page-steps">
<div class="web-page-steps-location web-is-not-mobile" style="--location:{progress * 100}%;">
<div
class="web-page-steps-location web-is-not-mobile"
style="--location:{progress * 100}%;"
>
<span class="web-page-steps-location-button">
<svg
xmlns="http://www.w3.org/2000/svg"

3
src/lib/constants.ts
View File

@@ -1,6 +1,7 @@
export const GITHUB_STARS = '41.9K';
export const BANNER_KEY = 'discord-banner-01'; // Change key to force banner to show again
export const SENTRY_DSN = 'https://27d41dc8bb67b596f137924ab8599e59@o1063647.ingest.us.sentry.io/4507497727000576'
export const SENTRY_DSN =
'https://27d41dc8bb67b596f137924ab8599e59@o1063647.ingest.us.sentry.io/4507497727000576';
/**
* History:

14
src/lib/layouts/Docs.svelte
View File

@@ -78,7 +78,7 @@
<svelte:window on:keydown={handleKeydown} />
<div class="u-position-relative">
<div class="relative">
<section class="web-mobile-header is-transparent">
<div class="web-mobile-header-start">
<a href="/" aria-label="homepage">
@@ -102,7 +102,11 @@
<a href="https://cloud.appwrite.io" class="web-button web-is-only-desktop">
<span class="web-sub-body-500">Go to Console</span>
</a>
<button class="web-button is-text" aria-label="open navigation" on:click={toggleSidenav}>
<button
class="web-button is-text"
aria-label="open navigation"
on:click={toggleSidenav}
>
{#if $layoutState.showSidenav}
<span aria-hidden="true" class="web-icon-close" />
{:else}
@@ -140,7 +144,7 @@
</li>
</ul>
</nav>
<div class="u-flex u-stretch web-u-margin-inline-start-48">
<div class="flex u-stretch web-u-margin-inline-start-48">
<button
class="web-input-button web-u-flex-basis-400"
on:click={() => ($layoutState.showSearch = true)}
@@ -148,7 +152,7 @@
<span class="web-icon-search" aria-hidden="true" />
<span class="text">Search in docs</span>
<div class="u-flex u-gap-4 u-margin-inline-start-auto">
<div class="flex gap-1 u-margin-inline-start-auto">
{#if isMac()}
<span class="web-kbd" aria-label="command">⌘</span>
{:else}
@@ -160,7 +164,7 @@
</div>
</div>
<div class="web-main-header-end">
<div class="u-flex u-gap-8">
<div class="flex gap-2">
<a
href="https://github.com/appwrite/appwrite/stargazers"
target="_blank"

18
src/lib/layouts/DocsArticle.svelte
View File

@@ -39,13 +39,13 @@
<ul class="web-metadata web-caption-400">
<slot name="metadata" />
</ul>
<div class="u-position-relative u-flex u-cross-center">
<div class="relative flex u-cross-center">
{#if back}
<a
href={back}
class="
web-button is-text is-icon web-u-cross-center web-u-size-40
u-position-absolute u-inset-inline-start-0 web-u-translate-x-negative"
absolute u-inset-inline-start-0 web-u-translate-x-negative"
aria-label="previous page"
>
<span
@@ -66,14 +66,12 @@
<aside class="web-references-menu web-u-padding-inline-start-24">
<div class="web-references-menu-content">
{#if toc && toc.length > 0}
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
<div class="flex u-main-space-between u-cross-center gap-4">
<h5 class="web-references-menu-title web-eyebrow">On This Page</h5>
</div>
<ol class="web-references-menu-list">
{#each toc as parent (parent.href)}
<li
class="web-references-menu-item"
>
<li class="web-references-menu-item">
<a
href={parent.href}
class="web-references-menu-link"
@@ -94,7 +92,8 @@
href={child.href}
class="web-references-menu-link"
>
<span class="web-caption-400">{child.title}</span
<span class="web-caption-400"
>{child.title}</span
>
</a>
</li>
@@ -105,10 +104,7 @@
{/each}
</ol>
<div class="u-sep-block-start u-padding-block-start-20">
<button
class="web-link u-inline-flex u-cross-center u-gap-8"
use:scrollToTop
>
<button class="web-link u-inline-flex u-cross-center gap-2" use:scrollToTop>
<span class="web-icon-arrow-up" aria-hidden="true" />
<span class="web-caption-400">Back to top</span>
</button>

17
src/lib/layouts/DocsTutorial.svelte
View File

@@ -20,22 +20,19 @@
<article class="web-article u-contents">
<header class="web-article-header">
<div class="web-article-header-start u-flex-vertical web-u-cross-start">
<button
class="web-icon-button web-is-only-mobile"
aria-label="previous page"
>
<button class="web-icon-button web-is-only-mobile" aria-label="previous page">
<span class="icon-cheveron-left" aria-hidden="true" />
</button>
<ul class="web-metadata web-caption-400">
<slot name="metadata" />
</ul>
<div class="u-position-relative u-flex u-cross-center">
<div class="relative flex u-cross-center">
{#if back}
<a
href={back}
class="
web-button is-text is-only-icon web-u-cross-center web-u-size-40
u-position-absolute u-inset-inline-start-0 web-u-translate-x-negative"
absolute u-inset-inline-start-0 web-u-translate-x-negative"
aria-label="previous page"
>
<span
@@ -51,7 +48,7 @@
</header>
<div class="web-article-content">
<slot />
<div class="u-flex u-main-space-between">
<div class="flex u-main-space-between">
{#if prevStep}
<a href={prevStep.href} class="web-button is-text">
<span class="icon-cheveron-left" aria-hidden="true" />
@@ -82,7 +79,7 @@
</div>
<aside class="web-references-menu web-u-padding-inline-start-24">
<div class="web-references-menu-content">
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
<div class="flex u-main-space-between u-cross-center gap-4">
<h5 class="web-references-menu-title web-eyebrow">Tutorial Steps</h5>
</div>
<ol class="web-references-menu-list">
@@ -143,7 +140,7 @@
{/each}
</ol>
<div class="u-sep-block-start u-padding-block-start-20">
<button class="web-link u-inline-flex u-cross-center u-gap-8" use:scrollToTop>
<button class="web-link u-inline-flex u-cross-center gap-2" use:scrollToTop>
<span class="web-icon-arrow-up" aria-hidden="true" />
<span class="web-caption-400">Back to top</span>
</button>
@@ -152,5 +149,3 @@
</aside>
</article>
</main>

6
src/lib/layouts/Main.svelte
View File

@@ -68,7 +68,7 @@
}
function getVisibleTheme() {
const themes = Array.from(document.querySelectorAll('.theme-dark, .theme-light')).filter(
const themes = Array.from(document.querySelectorAll('.theme-dark, .light')).filter(
(element) => {
const { classList, dataset } = element as HTMLElement;
if (
@@ -85,7 +85,7 @@
for (const theme of themes) {
if (isInViewport(theme)) {
return theme.classList.contains('theme-light') ? 'light' : 'dark';
return theme.classList.contains('light') ? 'light' : 'dark';
}
}
@@ -144,7 +144,7 @@
};
</script>
<div class="u-position-relative">
<div class="relative">
<section
class="web-mobile-header theme-{resolvedTheme}"
class:is-transparent={browser && !$isMobileNavOpen}

3
src/lib/layouts/Sidebar.svelte
View File

@@ -59,7 +59,8 @@
<a href={parent.href} aria-label="go back">
<span class="icon-cheveron-left" aria-hidden="true" />
</a>
<span class="web-side-nav-wrapper-parent-title web-eyebrow">{parent.label}</span>
<span class="web-side-nav-wrapper-parent-title web-eyebrow">{parent.label}</span
>
</section>
{/if}
{#each navigation as navGroup}

5
src/lib/utils/metadata.ts
View File

@@ -1,7 +1,8 @@
import type { AuthorData, PostsData } from "$routes/blog/content";
import type { AuthorData, PostsData } from '$routes/blog/content';
export const DEFAULT_HOST = 'https://appwrite.io';
export const DEFAULT_DESCRIPTION = 'Appwrite is an open-source platform for building applications at any scale, using your preferred programming languages and tools.';
export const DEFAULT_DESCRIPTION =
'Appwrite is an open-source platform for building applications at any scale, using your preferred programming languages and tools.';
export function buildOpenGraphImage(title: string, description: string): string {
return `https://og.appwrite.global/image.png?title=${encodeURIComponent(
title

15
src/lib/utils/references.ts
View File

@@ -2,7 +2,16 @@ import { writable } from 'svelte/store';
import type { Language } from './code';
import { browser } from '$app/environment';
const allVersions = ['1.5.x', '1.4.x', '1.3.x', '1.2.x', '1.1.x', '1.0.x', '0.15.x', 'cloud'] as const;
const allVersions = [
'1.5.x',
'1.4.x',
'1.3.x',
'1.2.x',
'1.1.x',
'1.0.x',
'0.15.x',
'cloud'
] as const;
export type Version = (typeof allVersions)[number];
@@ -20,7 +29,7 @@ export enum Service {
Locale = 'locale',
Storage = 'storage',
Teams = 'teams',
Users = 'users',
Users = 'users'
}
export enum Platform {
@@ -114,7 +123,7 @@ export const serviceMap: Record<Service, string> = {
[Service.Locale]: 'Locale',
[Service.Storage]: 'Storage',
[Service.Teams]: 'Teams',
[Service.Users]: 'Users',
[Service.Users]: 'Users'
};
export const preferredVersion = writable<Version | null>(

47
src/lib/utils/specs.ts
View File

@@ -182,7 +182,8 @@ export function getSchema(id: string, api: OpenAPIV3.Document): OpenAPIV3.Schema
if (schema) {
return schema;
}
throw new Error(`Schema doesn't exist for id: ${id}`);}
throw new Error(`Schema doesn't exist for id: ${id}`);
}
const specs = import.meta.glob(
'$appwrite/app/config/specs/open-api3*-(client|server|console).json',
@@ -354,15 +355,18 @@ export function resolveReference(
throw new Error("Schema doesn't exist");
}
export const generateExample = (schema: OpenAPIV3.SchemaObject, api: OpenAPIV3.Document<{}>, modelType: ModelType = ModelType.REST): Object => {
const properties = Object.keys(schema.properties ?? {}).map((key) =>{
export const generateExample = (
schema: OpenAPIV3.SchemaObject,
api: OpenAPIV3.Document<{}>,
modelType: ModelType = ModelType.REST
): Object => {
const properties = Object.keys(schema.properties ?? {}).map((key) => {
const name = key;
const fields = schema.properties?.[key];
return {
name,
...fields
}
};
});
const example = properties.reduce((carry, currentValue) => {
@@ -382,17 +386,20 @@ export const generateExample = (schema: OpenAPIV3.SchemaObject, api: OpenAPIV3.D
if (property.type === 'array') {
// If it's an array type containing primatives
if (property.items?.type){
if (property.items?.type) {
return {
...carry,
[propertyName]: property['x-example']
}
};
}
if (property.items && 'anyOf' in property.items) {
// default to first child type if multiple available
const firstSchema = (property.items as unknown as AppwriteSchemaObject)?.anyOf?.[0];
const schema = getSchema(getIdFromReference(firstSchema as OpenAPIV3.ReferenceObject), api)
const schema = getSchema(
getIdFromReference(firstSchema as OpenAPIV3.ReferenceObject),
api
);
return {
...carry,
@@ -401,37 +408,43 @@ export const generateExample = (schema: OpenAPIV3.SchemaObject, api: OpenAPIV3.D
}
// if an array of objects without child types
const schema = getSchema(getIdFromReference(property.items as OpenAPIV3.ReferenceObject), api);
const schema = getSchema(
getIdFromReference(property.items as OpenAPIV3.ReferenceObject),
api
);
return {
...carry,
[propertyName]: [generateExample(schema, api, modelType)]
}
};
}
// If it's an object type, but not in an array.
if (property.type === 'object') {
if (property.items?.oneOf){
if (property.items?.oneOf) {
// default to first child type if multiple available
const schema = getSchema(getIdFromReference(property.items.oneOf[0] as OpenAPIV3.ReferenceObject), api);
const schema = getSchema(
getIdFromReference(property.items.oneOf[0] as OpenAPIV3.ReferenceObject),
api
);
return {
...carry,
[propertyName]: generateExample(schema, api, modelType)
}
};
}
if (property.items){
if (property.items) {
const schema = getSchema(getIdFromReference(property.items), api);
return {
...carry,
[propertyName]: generateExample(schema, api, modelType)
}
};
}
}
return {
...carry,
[propertyName]: property['x-example']
}
};
}, {});
return example;
}
};

20
src/markdoc/layouts/Author.svelte
View File

@@ -45,10 +45,8 @@
</svelte:head>
<Main>
<div class="web-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div
class="u-position-absolute u-inset-inline-start-0 u-inset-block-end-0 web-u-pointer-events-none"
>
<div class="web-big-padding-section-level-1 relative overflow-hidden">
<div class="absolute u-inset-inline-start-0 u-inset-block-end-0 web-u-pointer-events-none">
<svg
xmlns="http://www.w3.org/2000/svg"
width="660"
@@ -102,9 +100,9 @@
</svg>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<div class="web-author-section u-block">
<div class="web-author-section block">
{#if avatar}
<FloatingHead --position="relative" src={avatar} alt={name} size={112} />
{/if}
@@ -119,7 +117,7 @@
{bio}
</p>
{/if}
<ul class="u-flex u-main-center u-gap-8 u-margin-block-start-16">
<ul class="flex u-main-center gap-2 u-margin-block-start-16">
{#if github}
<li>
<a
@@ -171,7 +169,7 @@
<h2 class="web-title web-u-color-text-primary">Articles</h2>
<!-- <div class="web-is-only-mobile u-margin-block-start-32">
<label class="u-block web-select is-colored" for="articles">
<label class="block web-select is-colored" for="articles">
<select id="articles">
<option>Latest</option>
<option>News</option>
@@ -183,7 +181,7 @@
</label>
</div> -->
<!--<div class="web-is-not-mobile">
<div class="u-flex u-main-space-between u-gap-16 u-margin-block-start-24">
<div class="flex u-main-space-between gap-4 u-margin-block-start-24">
<ul
class="web-secondary-tabs is-transparent"
role="tablist"
@@ -264,7 +262,7 @@
</ul> -->
<!-- <div class="web-input-text-search-wrapper">
<span class="icon-search" aria-hidden="true" />
<input class="web-input-text web-u-block-size-48" type="search" placeholder="Search" />
<input class="web-input-text web-block-size-48" type="search" placeholder="Search" />
</div>
</div>
</div>-->
@@ -287,7 +285,7 @@
</div>
</div>
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative u-overflow-hidden"
class="web-big-padding-section-level-2 is-margin-replace-padding relative overflow-hidden"
>
<div class="web-container">
<FooterNav />

4
src/markdoc/layouts/Category.svelte
View File

@@ -53,7 +53,7 @@
</div>
<!-- <div class="web-input-text-search-wrapper u-inline-width-100-percent-mobile">
<span class="icon-search" aria-hidden="true" />
<input class="web-input-text web-u-block-size-48" type="search" placeholder="Search" />
<input class="web-input-text web-block-size-48" type="search" placeholder="Search" />
</div> -->
</div>
@@ -76,7 +76,7 @@
</ul>
</div>
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative u-overflow-hidden"
class="web-big-padding-section-level-2 is-margin-replace-padding relative overflow-hidden"
>
<div class="web-container">
<FooterNav />

2
src/markdoc/layouts/Policy.svelte
View File

@@ -72,7 +72,7 @@
<h1 class="web-title web-u-color-text-primary">{title}</h1>
</header>
<button
class="toc-btn u-position-sticky u-flex u-width-full-line u-main-space-between u-cross-center
class="toc-btn sticky flex u-width-full-line u-main-space-between u-cross-center
web-u-padding-20 web-u-margin-inline-20-negative web-u-color-text-primary web-is-only-mobile
u-margin-block-start-24 web-u-sep-block web-u-filter-blur-8"
style:--inset-block-start="4.5rem"

17
src/markdoc/layouts/Post.svelte
View File

@@ -88,10 +88,7 @@
{/if}
{#if authorData}
<div class="web-author u-margin-block-start-16">
<a
href={authorData.href}
class="u-flex u-cross-center u-gap-8"
>
<a href={authorData.href} class="flex u-cross-center gap-2">
{#if authorData.avatar}
<img
class="web-author-image"
@@ -103,13 +100,15 @@
/>
{/if}
<div class="u-flex-vertical">
<h4 class="web-sub-body-400 web-u-color-text-primary">
<h4
class="web-sub-body-400 web-u-color-text-primary"
>
{authorData.name}
</h4>
<p class="web-caption-400">{authorData.role}</p>
</div>
</a>
<!-- <ul class="u-flex u-gap-8 u-margin-inline-start-auto u-cross-child-center">
<!-- <ul class="flex gap-2 u-margin-inline-start-auto u-cross-child-center">
{#if authorData.twitter}
<li>
<a
@@ -155,7 +154,7 @@
</header>
{#if cover}
<div class="web-media-container">
<Media class="u-block" src={cover} />
<Media class="block" src={cover} />
</div>
{/if}
@@ -164,7 +163,7 @@
</div>
</article>
<!-- {#if categories?.length}
<div class="u-flex u-gap-16">
<div class="flex gap-4">
{#each categories as cat}
<a href={cat.href} class="web-tag">{cat.name}</a>
{/each}
@@ -200,7 +199,7 @@
</section>
</div>
</div>
<div class="web-big-padding-section-level-2 u-position-relative u-overflow-hidden">
<div class="web-big-padding-section-level-2 relative overflow-hidden">
<div class="web-container">
<Newsletter />
<FooterNav />

5
src/markdoc/nodes/Blockquote.svelte
View File

@@ -1,8 +1,9 @@
<script lang="ts">
import { setContext } from "svelte";
import { setContext } from 'svelte';
setContext("no-paragraph", true);
setContext('no-paragraph', true);
</script>
<blockquote class="web-blockquote">
<p class="web-description">
<slot />

4
src/markdoc/nodes/Fence.svelte
View File

@@ -65,13 +65,13 @@
<header class="web-code-snippet-header">
<div class="web-code-snippet-header-start">
{#if badgeValue}
<div class="u-flex u-gap-16">
<div class="flex gap-4">
<div class="web-tag"><span class="text">{badgeValue}</span></div>
</div>
{/if}
</div>
<div class="web-code-snippet-header-end">
<ul class="buttons-list u-flex u-gap-8">
<ul class="buttons-list flex gap-2">
<li class="buttons-list-item web-u-padding-inline-start-20">
<Tooltip>
<button

7
src/markdoc/tags/Cards_Item.svelte
View File

@@ -10,12 +10,9 @@
<li>
<a {href} class="web-card is-normal" style:margin-block-end="0">
<header class="u-flex u-cross-baseline u-gap-4">
<header class="flex u-cross-baseline gap-1">
{#if icon}
<span
class="{icon} web-u-font-size-24"
aria-hidden="true"
/>
<span class="{icon} web-u-font-size-24" aria-hidden="true" />
{/if}
<h4 class="web-sub-body-500 web-u-color-text-primary">
{title}

6
src/markdoc/tags/MultiCode.svelte
View File

@@ -47,13 +47,13 @@
<section class="theme-dark web-code-snippet" aria-label="code-snippet panel">
<header class="web-code-snippet-header">
<div class="web-code-snippet-header-start">
<div class="u-flex u-gap-16">
<div class="flex gap-4">
<!-- <div class="web-tag"><span class="text">Default</span></div> -->
</div>
</div>
<div class="web-code-snippet-header-end">
<ul class="buttons-list u-flex u-gap-12">
<li class="buttons-list-item u-flex u-cross-child-scenter">
<ul class="buttons-list flex gap-3">
<li class="buttons-list-item flex u-cross-child-scenter">
<Select
bind:value={$selected}
options={Array.from($snippets).map((language) => ({

5
src/markdoc/tags/Tabs.svelte
View File

@@ -26,7 +26,7 @@
</script>
<div class="web-card is-normal u-margin-block-start-16" {...$root} use:root>
<div class="tabs u-flex u-gap-16">
<div class="tabs flex gap-4">
<ul class="tabs-list" {...$list} use:list>
{#each $ctx.triggers.entries() as [id, title]}
<li class="tabs-item">
@@ -36,10 +36,9 @@
{...$trigger(id)}
use:trigger>{title}</button
>
</li>
{/each}
</ul>
</div>
</div>
<slot />
</div>

5
src/markdoc/tags/Youtube.svelte
View File

@@ -7,8 +7,5 @@
<div class="web-media">
<!-- svelte-ignore a11y-media-has-caption -->
<Video
{thumbnail}
src={src}
/>
<Video {thumbnail} {src} />
</div>

1
src/partials/account-vs-user.md
View File

@@ -1,4 +1,3 @@
{% info title="Account vs Users API" %}
The Account API is the API you should use in your **client applications** with [Client SDKs](/docs/sdks#client) like web, Flutter, mobile, and native apps.
Account API creates sessions, which represent an authenticated user and is attached to a user's [account](/docs/products/auth/accounts).

203
src/partials/auth-events.md
View File

@@ -1,144 +1,173 @@
{% table %}
* Name
* Description
- Name
- Description
---
* `teams.*`
*
This event triggers on any teams event.
- `teams.*`
- This event triggers on any teams event.
Returns [Team Object](/docs/references/cloud/models/team)
---
* `teams.*.create`
*
This event triggers when a team is created.
- `teams.*.create`
- This event triggers when a team is created.
Returns [Team Object](/docs/references/cloud/models/team)
---
* `teams.*.delete`
*
This event triggers when a team is deleted.
- `teams.*.delete`
- This event triggers when a team is deleted.
Returns [Team Object](/docs/references/cloud/models/team)
---
* `teams.*.memberships.*`
*
This event triggers on any team memberships event.
- `teams.*.memberships.*`
- This event triggers on any team memberships event.
Returns [Membership Object](/docs/references/cloud/models/membership)
---
* `teams.*.memberships.*.create`
*
This event triggers when a membership is created.
- `teams.*.memberships.*.create`
- This event triggers when a membership is created.
Returns [Membership Object](/docs/references/cloud/models/membership)
---
* `teams.*.memberships.*.delete`
*
This event triggers when a membership is deleted.
- `teams.*.memberships.*.delete`
- This event triggers when a membership is deleted.
Returns [Membership Object](/docs/references/cloud/models/membership)
---
* `teams.*.memberships.*.update`
*
This event triggers when a membership is updated.
- `teams.*.memberships.*.update`
- This event triggers when a membership is updated.
Returns [Membership Object](/docs/references/cloud/models/membership)
---
* `teams.*.memberships.*.update.status`
*
This event triggers when a team memberships status is updated.
- `teams.*.memberships.*.update.status`
- This event triggers when a team memberships status is updated.
Returns [Membership Object](/docs/references/cloud/models/membership)
---
* `teams.*.update`
*
This event triggers when a team is updated.
- `teams.*.update`
- This event triggers when a team is updated.
Returns [Team Object](/docs/references/cloud/models/team)
---
* `teams.*.update.prefs`
*
This event triggers when a team's preferences are updated.
- `teams.*.update.prefs`
- This event triggers when a team's preferences are updated.
Returns [Team Object](/docs/references/cloud/models/team)
---
* `users.*`
*
This event triggers on any user's event.
- `users.*`
- This event triggers on any user's event.
Returns [User Object](/docs/references/cloud/models/user)
---
* `users.*.create`
*
This event triggers when a user is created.
- `users.*.create`
- This event triggers when a user is created.
Returns [User Object](/docs/references/cloud/models/user)
---
* `users.*.delete`
*
This event triggers when a user is deleted.
- `users.*.delete`
- This event triggers when a user is deleted.
Returns [User Object](/docs/references/cloud/models/user)
---
* `users.*.recovery.*`
*
This event triggers on any user's recovery token event.
- `users.*.recovery.*`
- This event triggers on any user's recovery token event.
Returns [Token Object](/docs/references/cloud/models/token)
---
* `users.*.recovery.*.create`
*
This event triggers when a recovery token for a user is created.
- `users.*.recovery.*.create`
- This event triggers when a recovery token for a user is created.
Returns [Token Object](/docs/references/cloud/models/token)
---
* `users.*.recovery.*.update`
*
This event triggers when a recovery token for a user is validated.
- `users.*.recovery.*.update`
- This event triggers when a recovery token for a user is validated.
Returns [Token Object](/docs/references/cloud/models/token)
---
* `users.*.sessions.*`
*
This event triggers on any user's sessions event.
- `users.*.sessions.*`
- This event triggers on any user's sessions event.
Returns [Session Object](/docs/references/cloud/models/session)
---
* `users.*.sessions.*.create`
*
This event triggers when a session for a user is created.
- `users.*.sessions.*.create`
- This event triggers when a session for a user is created.
Returns [Session Object](/docs/references/cloud/models/session)
---
* `users.*.sessions.*.delete`
*
This event triggers when a session for a user is deleted.
- `users.*.sessions.*.delete`
- This event triggers when a session for a user is deleted.
Returns [Session Object](/docs/references/cloud/models/session)
---
* `users.*.update`
*
This event triggers when a user is updated.
- `users.*.update`
- This event triggers when a user is updated.
Returns [User Object](/docs/references/cloud/models/user)
---
* `users.*.update.email`
*
This event triggers when a user's email address is updated.
- `users.*.update.email`
- This event triggers when a user's email address is updated.
Returns [User Object](/docs/references/cloud/models/user)
---
* `users.*.update.name`
*
This event triggers when a user's name is updated.
- `users.*.update.name`
- This event triggers when a user's name is updated.
Returns [User Object](/docs/references/cloud/models/user)
---
* `users.*.update.password`
*
This event triggers when a user's password is updated.
- `users.*.update.password`
- This event triggers when a user's password is updated.
Returns [User Object](/docs/references/cloud/models/user)
---
* `users.*.update.prefs`
*
This event triggers when a user's preferences is updated.
- `users.*.update.prefs`
- This event triggers when a user's preferences is updated.
Returns [User Object](/docs/references/cloud/models/user)
---
* `users.*.update.status`
*
This event triggers when a user's status is updated.
- `users.*.update.status`
- This event triggers when a user's status is updated.
Returns [User Object](/docs/references/cloud/models/user)
---
* `users.*.verification.*`
*
This event triggers on any user's verification token event.
- `users.*.verification.*`
- This event triggers on any user's verification token event.
Returns [Token Object](/docs/references/cloud/models/token)
---
* `users.*.verification.*.create`
*
This event triggers when a verification token for a user is created.
- `users.*.verification.*.create`
- This event triggers when a verification token for a user is created.
Returns [Token Object](/docs/references/cloud/models/token)
---
* `users.*.verification.*.update`
*
This event triggers when a verification token for a user is validated.
- `users.*.verification.*.update`
- This event triggers when a verification token for a user is validated.
Returns [Token Object](/docs/references/cloud/models/token)
{% /table %}
{% /table %}

1
src/partials/auth-security.md
View File

@@ -11,6 +11,7 @@ Password dictionary protects users from using bad passwords. It compares the use
Password dictionary can be enabled in the Auth service's **Security** tab on the Appwrite Console.
# Password hashing {% #password-hashing %}
Appwrite protects passwords by using the [Argon2](https://github.com/P-H-C/phc-winner-argon2) password-hashing algorithm.
Argon 2 is a resilient and secure password hashing algorithm that is also the winner of the [Password Hashing Competition](https://www.password-hashing.net/).

131
src/partials/databases-events.md
View File

@@ -1,93 +1,112 @@
{% table %}
* Name
* Description
- Name
- Description
---
* `databases.*`
*
This event triggers on any database event.
- `databases.*`
- This event triggers on any database event.
Returns [Database Object](/docs/references/cloud/models/database)
---
* `databases.*.collections.*`
*
This event triggers on any collection event.
- `databases.*.collections.*`
- This event triggers on any collection event.
Returns [Collection Object](/docs/references/cloud/models/collection)
---
* `databases.*.collections.*.attributes.*`
*
This event triggers on any attributes event.
- `databases.*.collections.*.attributes.*`
- This event triggers on any attributes event.
Returns [Attribute Object](/docs/references/cloud/models/attributeList)
---
* `databases.*.collections.*.attributes.*.create`
*
This event triggers when an attribute is created.
- `databases.*.collections.*.attributes.*.create`
- This event triggers when an attribute is created.
Returns [Attribute Object](/docs/references/cloud/models/attributeList)
---
* `databases.*.collections.*.attributes.*.delete`
*
This event triggers when an attribute is deleted.
- `databases.*.collections.*.attributes.*.delete`
- This event triggers when an attribute is deleted.
Returns [Attribute Object](/docs/references/cloud/models/attributeList)
---
* `databases.*.collections.*.create`
*
This event triggers when a collection is created.
- `databases.*.collections.*.create`
- This event triggers when a collection is created.
Returns [Collection Object](/docs/references/cloud/models/collection)
---
* `databases.*.collections.*.delete`
*
This event triggers when a collection is deleted.
- `databases.*.collections.*.delete`
- This event triggers when a collection is deleted.
Returns [Collection Object](/docs/references/cloud/models/collection)
---
* `databases.*.collections.*.documents.*`
*
This event triggers on any documents event.
- `databases.*.collections.*.documents.*`
- This event triggers on any documents event.
Returns [Document Object](/docs/references/cloud/models/document)
---
* `databases.*.collections.*.documents.*.create`
*
This event triggers when a document is created.
- `databases.*.collections.*.documents.*.create`
- This event triggers when a document is created.
Returns [Document Object](/docs/references/cloud/models/document)
---
* `databases.*.collections.*.documents.*.delete`
*
This event triggers when a document is deleted.
- `databases.*.collections.*.documents.*.delete`
- This event triggers when a document is deleted.
Returns [Document Object](/docs/references/cloud/models/document)
---
* `databases.*.collections.*.documents.*.update`
*
This event triggers when a document is updated.
- `databases.*.collections.*.documents.*.update`
- This event triggers when a document is updated.
Returns [Document Object](/docs/references/cloud/models/document)
---
* `databases.*.collections.*.indexes.*`
*
This event triggers on any indexes event.
- `databases.*.collections.*.indexes.*`
- This event triggers on any indexes event.
Returns [Index Object](/docs/references/cloud/models/index)
---
* `databases.*.collections.*.indexes.*.create`
*
This event triggers when an index is created.
- `databases.*.collections.*.indexes.*.create`
- This event triggers when an index is created.
Returns [Index Object](/docs/references/cloud/models/index)
---
* `databases.*.collections.*.indexes.*.delete`
*
This event triggers when an index is deleted.
- `databases.*.collections.*.indexes.*.delete`
- This event triggers when an index is deleted.
Returns [Index Object](/docs/references/cloud/models/index)
---
* `databases.*.collections.*.update`
*
This event triggers when a collection is updated.
- `databases.*.collections.*.update`
- This event triggers when a collection is updated.
Returns [Collection Object](/docs/references/cloud/models/collection)
---
* `databases.*.create`
*
This event triggers when a database is created.
- `databases.*.create`
- This event triggers when a database is created.
Returns [Database Object](/docs/references/cloud/models/database)
---
* `databases.*.delete`
*
This event triggers when a database is deleted.
- `databases.*.delete`
- This event triggers when a database is deleted.
Returns [Database Object](/docs/references/cloud/models/database)
---
* `databases.*.update`
*
This event triggers when a database is updated.
- `databases.*.update`
- This event triggers when a database is updated.
Returns [Database Object](/docs/references/cloud/models/database){% /table %}

91
src/partials/functions-events.md
View File

@@ -1,64 +1,77 @@
{% table %}
* Name
* Description
- Name
- Description
---
* `functions.*`
*
This event triggers on any functions event.
- `functions.*`
- This event triggers on any functions event.
Returns [Function Object](/docs/references/cloud/models/function)
---
* `functions.*.create`
*
This event triggers when a function is created.
- `functions.*.create`
- This event triggers when a function is created.
Returns [Function Object](/docs/references/cloud/models/function)
---
* `functions.*.delete`
*
This event triggers when a function is deleted.
- `functions.*.delete`
- This event triggers when a function is deleted.
Returns [Function Object](/docs/references/cloud/models/function)
---
* `functions.*.deployments.*`
*
This event triggers on any deployments event.
- `functions.*.deployments.*`
- This event triggers on any deployments event.
Returns [Deployment Object](/docs/references/cloud/models/deployment)
---
* `functions.*.deployments.*.create`
*
This event triggers when a deployment is created.
- `functions.*.deployments.*.create`
- This event triggers when a deployment is created.
Returns [Deployment Object](/docs/references/cloud/models/deployment)
---
* `functions.*.deployments.*.delete`
*
This event triggers when a deployment is deleted.
- `functions.*.deployments.*.delete`
- This event triggers when a deployment is deleted.
Returns [Deployment Object](/docs/references/cloud/models/deployment)
---
* `functions.*.deployments.*.update`
*
This event triggers when a deployment is updated.
- `functions.*.deployments.*.update`
- This event triggers when a deployment is updated.
Returns [Deployment Object](/docs/references/cloud/models/deployment)
---
* `functions.*.executions.*`
*
This event triggers on any executions event.
- `functions.*.executions.*`
- This event triggers on any executions event.
Returns [Execution Object](/docs/references/cloud/models/execution)
---
* `functions.*.executions.*.create`
*
This event triggers when an execution is created.
- `functions.*.executions.*.create`
- This event triggers when an execution is created.
Returns [Execution Object](/docs/references/cloud/models/execution)
---
* `functions.*.executions.*.delete`
*
This event triggers when an execution is deleted.
- `functions.*.executions.*.delete`
- This event triggers when an execution is deleted.
Returns [Execution Object](/docs/references/cloud/models/execution)
---
* `functions.*.executions.*.update`
*
This event triggers when an execution is updated.
- `functions.*.executions.*.update`
- This event triggers when an execution is updated.
Returns [Execution Object](/docs/references/cloud/models/execution)
---
* `functions.*.update`
*
This event triggers when a function is updated.
- `functions.*.update`
- This event triggers when a function is updated.
Returns [Function Object](/docs/references/cloud/models/function)
{% /table %}
{% /table %}

105
src/partials/messaging-events.md
View File

@@ -1,74 +1,89 @@
{% table %}
* Name
* Description
- Name
- Description
---
* `providers.*`
*
This event triggers on any providers event.
- `providers.*`
- This event triggers on any providers event.
Returns [Provider Object](/docs/references/cloud/models/provider)
---
* `providers.*.create`
*
This event triggers when a provider is created.
- `providers.*.create`
- This event triggers when a provider is created.
Returns [Provider Object](/docs/references/cloud/models/provider)
---
* `providers.*.delete`
*
This event triggers when a provider is deleted.
- `providers.*.delete`
- This event triggers when a provider is deleted.
Returns [Provider Object](/docs/references/cloud/models/provider)
---
* `providers.*.update`
*
This event triggers when a provider is updated.
- `providers.*.update`
- This event triggers when a provider is updated.
Returns [Provider Object](/docs/references/cloud/models/provider)
---
* `topics.*`
*
This event triggers on any topic event.
- `topics.*`
- This event triggers on any topic event.
Returns [Topic Object](/docs/references/cloud/models/topic)
---
* `topics.*.create`
*
This event triggers when a topic is created.
- `topics.*.create`
- This event triggers when a topic is created.
Returns [Topic Object](/docs/references/cloud/models/topic)
---
* `topics.*.delete`
*
This event triggers when a topic is deleted.
- `topics.*.delete`
- This event triggers when a topic is deleted.
Returns [Topic Object](/docs/references/cloud/models/topic)
---
* `topics.*.update`
*
This event triggers when a topic is updated.
- `topics.*.update`
- This event triggers when a topic is updated.
Returns [Topic Object](/docs/references/cloud/models/topic)
---
* `topics.*.subscribers.*.create`
*
This event triggers when a subscriber to a topic is created.
- `topics.*.subscribers.*.create`
- This event triggers when a subscriber to a topic is created.
Returns [Topic Object](/docs/references/cloud/models/topic)
---
* `topics.*.subscribers.*.delete`
*
This event triggers when a subscriber to a topic is deleted.
- `topics.*.subscribers.*.delete`
- This event triggers when a subscriber to a topic is deleted.
Returns [Topic Object](/docs/references/cloud/models/topic)
---
* `messages.*`
*
This event triggers on any message event.
- `messages.*`
- This event triggers on any message event.
Returns [Message Object](/docs/references/cloud/models/message)
---
* `messages.*.create`
*
This event triggers when a message is created.
- `messages.*.create`
- This event triggers when a message is created.
Returns [Message Object](/docs/references/cloud/models/message)
---
* `messages.*.delete`
*
This event triggers when a message is deleted.
- `messages.*.delete`
- This event triggers when a message is deleted.
Returns [Message Object](/docs/references/cloud/models/message)
---
* `messages.*.update`
*
This event triggers when a message is updated.
- `messages.*.update`
- This event triggers when a message is updated.
Returns [Message Object](/docs/references/cloud/models/message)
{% /table %}
{% /table %}

63
src/partials/storage-events.md
View File

@@ -1,44 +1,53 @@
{% table %}
* Name
* Description
- Name
- Description
---
* `buckets.*`
*
This event triggers on any buckets event.
- `buckets.*`
- This event triggers on any buckets event.
Returns [Bucket Object](/docs/references/cloud/models/bucket)
---
* `buckets.*.create`
*
This event triggers when a bucket is created.
- `buckets.*.create`
- This event triggers when a bucket is created.
Returns [Bucket Object](/docs/references/cloud/models/bucket)
---
* `buckets.*.delete`
*
This event triggers when a bucket is deleted.
- `buckets.*.delete`
- This event triggers when a bucket is deleted.
Returns [Bucket Object](/docs/references/cloud/models/bucket)
---
* `buckets.*.files.*`
*
This event triggers on any files event.
- `buckets.*.files.*`
- This event triggers on any files event.
Returns [File Object](/docs/references/cloud/models/file)
---
* `buckets.*.files.*.create`
*
This event triggers when a file is created.
- `buckets.*.files.*.create`
- This event triggers when a file is created.
Returns [File Object](/docs/references/cloud/models/file)
---
* `buckets.*.files.*.delete`
*
This event triggers when a file is deleted.
- `buckets.*.files.*.delete`
- This event triggers when a file is deleted.
Returns [File Object](/docs/references/cloud/models/file)
---
* `buckets.*.files.*.update`
*
This event triggers when a file is updated.
- `buckets.*.files.*.update`
- This event triggers when a file is updated.
Returns [File Object](/docs/references/cloud/models/file)
---
* `buckets.*.update`
*
This event triggers when a bucket is updated.
- `buckets.*.update`
- This event triggers when a bucket is updated.
Returns [Bucket Object](/docs/references/cloud/models/bucket)
{% /table %}
{% /table %}

3
src/partials/update-variables.md
View File

@@ -1,12 +1,15 @@
{% info title="Applying changes" %}
After editing your `docker-compose.yml` or `.env` files, you will need to recreate your Appwrite stack by running the following compose command in your terminal.
```sh
docker compose up -d
```
You can verify if the changes have been successfully applied by running this command:
```sh
docker compose exec appwrite vars
```
{% /info %}

12
src/routes/+error.svelte
View File

@@ -21,17 +21,21 @@
</h1>
{#if $page.status === 404}
<p class="web-description">
Sorry, it seems that the page you are looking for does not exist. Feel free to use
our navigation menu or the button below to explore more of Appwrite's documentation.
Sorry, it seems that the page you are looking for does not exist.
Feel free to use our navigation menu or the button below to explore
more of Appwrite's documentation.
</p>
{/if}
<a href="/" class="web-button is-secondary u-cross-child-center u-margin-block-start-12">
<a
href="/"
class="web-button is-secondary u-cross-child-center u-margin-block-start-12"
>
<span>Back to homepage</span>
</a>
</div>
</div>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<FooterNav />
<MainFooter />

2
src/routes/+layout.svelte
View File

@@ -56,7 +56,7 @@
function applyTheme(theme: Theme) {
const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
const className = `theme-${resolvedTheme}`;
document.body.classList.remove('theme-dark', 'theme-light');
document.body.classList.remove('theme-dark', 'light');
document.body.classList.add(className);
}

38
src/routes/+page.svelte
View File

@@ -42,7 +42,7 @@
class:web-u-hide-mobile={$isMobileNavOpen}
>
<div
class="u-position-absolute"
class="absolute"
style="top: -800px; left: 50%; translate: -50%; pointer-events:none; z-index: 10"
>
<enhanced:img
@@ -55,7 +55,7 @@
</div>
<div
class="u-position-absolute web-is-only-desktop"
class="web-is-only-desktop absolute"
style="top: 22rem; left: 54%; translate: calc(-50% - 900px); width: 75.9375rem;"
class:web-u-hide-mobile={$isMobileNavOpen}
>
@@ -63,7 +63,7 @@
</div>
<div
class="u-position-absolute web-is-only-desktop"
class="web-is-only-desktop absolute"
style="top: 42rem; left: 49%; translate: calc(-50% + 800px); width: 60rem;"
class:web-u-hide-mobile={$isMobileNavOpen}
>
@@ -119,7 +119,7 @@
>
<div class="web-media-container">
<img
class="u-block"
class="block"
src="/images/pages/homepage/dashboard.png"
alt="console dashboard"
style:aspect-ratio="1244 / 717"
@@ -130,7 +130,7 @@
<div class="web-big-padding-section-level-2">
<div class="web-container">
<h2
class="web-title web-u-color-text-primary web-u-text-align-center web-u-max-width-600 u-margin-inline-auto"
class="web-title web-u-color-text-primary web-u-max-width-600 mx-auto text-center"
>
Trusted by developers from the world's leading organizations
</h2>
@@ -239,14 +239,10 @@
<Products />
<ProductsMobile />
<div
class="web-big-padding-section-level-1 u-position-relative web-white-section theme-light"
>
<div
class="u-position-absolute u-inset-block-end-0 u-inset-inline-start u-width-full-line"
>
<div class="web-big-padding-section-level-1 web-white-section light relative">
<div class="u-inset-block-end-0 u-inset-inline-start u-width-full-line absolute">
<img
class="u-block u-width-full-line"
class="u-width-full-line block"
src="/images/bgs/padding-section-1.svg"
alt=""
style:max-height="48rem"
@@ -265,7 +261,7 @@
Migrations. With built-in security and privacy for peace of mind.
</p>
</section>
<div class="u-overflow-hidden web-u-margin-block-start-80">
<div class="web-u-margin-block-start-80 overflow-hidden">
<ul class="web-info-boxes web-sub-body-500">
<li class="web-info-boxes-item">
<img
@@ -459,9 +455,9 @@
</div>
</div>
<div class="web-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div class="web-big-padding-section-level-1 relative overflow-hidden">
<div
class="u-position-absolute web-is-not-mobile"
class="web-is-not-mobile absolute"
style:inline-size="768px"
style:block-size="768px"
style:inset-block-start="0rem"
@@ -477,7 +473,7 @@
/>
</div>
<div class="web-big-padding-section-level-2 is-margin-replace-padding">
<div class="web-container u-position-relative">
<div class="web-container relative">
<section class="web-hero is-align-start">
<span class="web-badges web-eyebrow">SDKs_</span>
<h2 class="web-display web-u-color-text-primary u-max-width-600">
@@ -498,9 +494,9 @@
</section>
</div>
</div>
<div class="web-big-padding-section-level-2 u-position-relative u-overflow-hidden">
<div class="web-big-padding-section-level-2 relative overflow-hidden">
<div
class="u-position-absolute u-z-index-0 web-is-not-mobile"
class="web-is-not-mobile absolute z-0"
style:width="50%"
style:height="100%"
style:left="0"
@@ -514,8 +510,8 @@
/>
</div>
</div>
<div class="web-container u-position-relative">
<div class="grid-1-1">
<div class="web-container relative">
<div class="grid grid-cols-2">
<section class="web-hero is-align-start">
<span class="web-badges web-eyebrow">Scale_</span>
<h2 class="web-display u-max-width-600 web-u-color-text-primary">
@@ -546,7 +542,7 @@
</div>
</div>
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative u-overflow-hidden"
class="web-big-padding-section-level-2 is-margin-replace-padding relative overflow-hidden"
>
<div class="web-container">
<PreFooter />

10
src/routes/DeveloperCard.svelte
View File

@@ -6,14 +6,18 @@
</script>
<div class="web-card is-white">
<div class="web-social-item u-flex-vertical u-gap-24">
<div class="u-flex u-gap-16 u-main-space-between">
<div class="web-social-item u-flex-vertical gap-6">
<div class="flex gap-4 u-main-space-between">
<div class="web-user-box">
<img class="web-user-box-image" src={avatarSrc} alt="Avatar of {name}" />
<div class="web-user-box-name web-sub-body-500">{name}</div>
<div class="web-user-box-username web-sub-body-400">{tag}</div>
</div>
<span class="web-social-item-icon web-icon-{icon}" aria-label={icon} aria-hidden="true" />
<span
class="web-social-item-icon web-icon-{icon}"
aria-label={icon}
aria-hidden="true"
/>
</div>
<p class="web-sub-body-500 web-u-text-color-neutral-700">
<slot />

52
src/routes/assets/+page.svelte
View File

@@ -54,7 +54,7 @@
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute web-u-pointer-events-none">
<div class="absolute web-u-pointer-events-none">
<enhanced:img src="./bg.png" alt="" />
</div>
@@ -65,12 +65,12 @@
<header class="web-grid-120-1fr-auto-header">
<h1 class="web-display web-u-color-text-primary">Brand assets</h1>
<button
class="u-flex u-width-full-line web-u-padding-block-20
class="flex u-width-full-line web-u-padding-block-20
web-u-color-text-primary web-is-only-mobile
web-u-margin-inline-32-negative u-margin-block-start-24 web-u-sep-block u-width-full-line"
>
<span
class="web-container u-flex u-width-full-line u-main-space-between u-cross-center"
class="web-container flex u-width-full-line u-main-space-between u-cross-center"
>
<span class="web-description">Table of contents</span>
<span class="icon-menu-alt-4" aria-hidden="true" />
@@ -94,7 +94,7 @@
</section>
<section id={getSectionId(Section.NAMING)}>
<div class="u-flex web-u-flex-vertical u-gap-8">
<div class="flex web-u-flex-vertical gap-2">
<h2
class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }}
@@ -111,7 +111,7 @@
</section>
<section id={getSectionId(Section.LOGOTYPE)}>
<div class="u-flex web-u-flex-vertical u-gap-8">
<div class="flex web-u-flex-vertical gap-2">
<h2
class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }}
@@ -125,11 +125,11 @@
logo on a neutral background.
</p>
<div
class="u-flex u-flex-wrap web-u-flex-vertical-mobile u-gap-32 u-margin-block-start-12"
class="flex flex-wrap web-u-flex-vertical-mobile gap-8 u-margin-block-start-12"
>
<div
class="media-wrapper | theme-light |
u-stretch web-u-flex-basis-300 u-flex u-main-center u-cross-center web-u-border-radius-8 web-u-padding-inline-64
class="media-wrapper | light |
u-stretch web-u-flex-basis-300 flex u-main-center u-cross-center web-u-border-radius-8 web-u-padding-inline-64
web-u-bg-color-neutral-100 web-u-min-block-size-320"
>
<img
@@ -163,7 +163,7 @@
</div>
<div
class="media-wrapper | theme-dark |
u-stretch web-u-flex-basis-300 u-flex u-main-center u-cross-center web-u-border-radius-8 web-u-padding-inline-64
u-stretch web-u-flex-basis-300 flex u-main-center u-cross-center web-u-border-radius-8 web-u-padding-inline-64
web-u-bg-color-neutral-800 web-u-min-block-size-320"
>
<img
@@ -198,7 +198,7 @@
</div>
</div>
<section>
<div class="u-flex web-u-flex-vertical u-gap-8">
<div class="flex web-u-flex-vertical gap-2">
<h3 class="web-label web-u-color-text-primary">
Co-branding logotypes
</h3>
@@ -208,7 +208,7 @@
collection of shapes.
</p>
<div
class="u-flex u-main-center u-cross-center u-margin-block-start-12 web-u-border-radius-8 u-padding-inline-16
class="flex u-main-center u-cross-center u-margin-block-start-12 web-u-border-radius-8 u-padding-inline-16
web-u-bg-color-neutral-800 web-u-min-block-size-320"
>
<img
@@ -221,7 +221,7 @@
</section>
<section id={getSectionId(Section.LOGOMARK)}>
<div class="u-flex web-u-flex-vertical u-gap-8">
<div class="flex web-u-flex-vertical gap-2">
<h3
class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }}
@@ -236,11 +236,11 @@
showcase the complete logotype.
</p>
<div
class="u-flex u-flex-wrap web-u-flex-vertical-mobile u-gap-32 u-margin-block-start-12"
class="flex flex-wrap web-u-flex-vertical-mobile gap-8 u-margin-block-start-12"
>
<div
class="media-wrapper | theme-light |
u-stretch web-u-flex-basis-300 u-flex u-main-center u-cross-center web-u-border-radius-8 web-u-padding-inline-64
class="media-wrapper | light |
u-stretch web-u-flex-basis-300 flex u-main-center u-cross-center web-u-border-radius-8 web-u-padding-inline-64
web-u-bg-color-neutral-100 web-u-min-block-size-320"
>
<img
@@ -274,7 +274,7 @@
</div>
<div
class="media-wrapper | theme-dark |
u-stretch web-u-flex-basis-300 u-flex u-main-center u-cross-center web-u-border-radius-8 web-u-padding-inline-64
u-stretch web-u-flex-basis-300 flex u-main-center u-cross-center web-u-border-radius-8 web-u-padding-inline-64
web-u-bg-color-neutral-800 web-u-min-block-size-320"
>
<img
@@ -309,7 +309,7 @@
</div>
</div>
<section id="">
<div class="u-flex web-u-flex-vertical u-gap-8">
<div class="flex web-u-flex-vertical gap-2">
<h3 class="web-label web-u-color-text-primary">
Co-branding lockups
</h3>
@@ -319,7 +319,7 @@
collection of shapes.
</p>
<div
class="u-flex u-main-center u-cross-center u-margin-block-start-12 web-u-border-radius-8 u-padding-inline-16
class="flex u-main-center u-cross-center u-margin-block-start-12 web-u-border-radius-8 u-padding-inline-16
web-u-bg-color-neutral-800 web-u-min-block-size-320"
>
<img
@@ -339,21 +339,21 @@
>
Brand colors
</h2>
<div class="u-flex u-flex-wrap u-gap-32">
<div class="flex flex-wrap gap-8">
<div
class="media-wrapper | u-stretch web-u-flex-basis-200 web-u-flex-vertical u-main-center u-gap-8
class="media-wrapper | u-stretch web-u-flex-basis-200 web-u-flex-vertical u-main-center gap-2
web-u-border-radius-8 u-padding-inline-24 web-u-text-color-neutral-900 web-u-bg-color-neutral-50
web-u-media-ratio-1-1 web-u-min-block-size-160"
>
<h3 class="web-label">Light Grey</h3>
<p class="web-caption-400">#EDEDF0</p>
<div class="buttons | theme-light">
<div class="buttons | light">
<Copy toCopy="#EDEDF0" />
</div>
</div>
<div
class="media-wrapper | web-u-sep u-stretch web-u-flex-basis-200 web-u-flex-vertical u-main-center
u-gap-8 web-u-border-radius-8 u-padding-inline-24 web-u-media-ratio-1-1 web-u-min-block-size-160
gap-2 web-u-border-radius-8 u-padding-inline-24 web-u-media-ratio-1-1 web-u-min-block-size-160
web-u-text-color-neutral-50 web-u-bg-color-neutral-900"
>
<h3 class="web-label">Dark Grey</h3>
@@ -363,7 +363,7 @@
</div>
</div>
<div
class="media-wrapper | u-stretch web-u-flex-basis-200 web-u-flex-vertical u-main-center u-gap-8
class="media-wrapper | u-stretch web-u-flex-basis-200 web-u-flex-vertical u-main-center gap-2
web-u-border-radius-8 u-padding-inline-24 web-u-text-color-neutral-50 web-u-bg-color-primary-500
web-u-aspect-ratio-1-1 web-u-min-block-size-160"
>
@@ -377,7 +377,7 @@
</section>
<section id={getSectionId(Section.VISUALS)}>
<div class="u-flex web-u-flex-vertical u-gap-8">
<div class="flex web-u-flex-vertical gap-2">
<h2
class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }}
@@ -389,7 +389,7 @@
Use these product visuals to enhance your articles,
presentations, and content related to Appwrite.
</p>
<div class="web-grid-1-1-opt-2 u-gap-32 u-margin-block-start-12">
<div class="grid grid-cols-2-opt-2 gap-8 u-margin-block-start-12">
<div class="media-wrapper">
<img
class="web-u-border-radius-8 web-u-media-ratio-16-9 u-width-full-line"
@@ -583,7 +583,7 @@
</section>
<section id={getSectionId(Section.CONTACT)}>
<div class="u-flex web-u-flex-vertical u-gap-8">
<div class="flex web-u-flex-vertical gap-2">
<h2
class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }}

23
src/routes/blog/+page.svelte
View File

@@ -32,9 +32,9 @@
<Main>
<div class="web-big-padding-section" style:overflow-x="hidden">
<div class="web-big-padding-section-level-1 u-position-relative">
<div class="web-big-padding-section-level-1 relative">
<div
class="u-position-absolute"
class="absolute"
style="pointer-events:none;inset-inline-start:0; inset-block-end:0;"
>
<svg
@@ -90,14 +90,21 @@
</svg>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<h1 class="web-display web-u-color-text-primary">Blog</h1>
{#if featured}
{@const author = data.authors.find((author) => author.slug === featured.author)}
{@const author = data.authors.find(
(author) => author.slug === featured.author
)}
<article class="web-feature-article u-margin-block-start-48">
<a href={featured.href} class="web-feature-article-image">
<img src={featured.cover} class="web-image-ratio-4/3" loading="lazy" alt="cover" />
<img
src={featured.cover}
class="web-image-ratio-4/3"
loading="lazy"
alt="cover"
/>
</a>
<div class="web-feature-article-content">
<header class="web-feature-article-header">
@@ -114,7 +121,7 @@
{featured.description}
</p>
<div class="web-author">
<div class="u-flex u-cross-center u-gap-8">
<div class="flex u-cross-center gap-2">
<img
class="web-author-image"
src={author?.avatar}
@@ -128,7 +135,9 @@
>{author?.name}</a
>
<p class="web-caption-400 u-hide">{author?.bio}</p>
<ul class="web-metadata web-caption-400 web-is-not-mobile">
<ul
class="web-metadata web-caption-400 web-is-not-mobile"
>
<li>{featured.timeToRead} min</li>
</ul>
</div>

1
src/routes/blog/+page.ts
View File

@@ -1,7 +1,6 @@
import { base } from '$app/paths';
import type { AuthorData, PostsData } from './content';
export function load() {
const postsGlob = import.meta.glob('./post/**/*.markdoc', {
eager: true

11
src/routes/blog/post/building-init-giveaway-app/+page.markdoc
View File

@@ -52,20 +52,20 @@ We created a **database** and a **collection** for each day of the giveaway in o
Each collection contained two **attributes**:
| Key | Type | Size | Required |
| --- | --- | --- | --- |
| ----------- | ----------- | ----------- | ----------- |
| discordName | String | 255 | Yes |
| email | Email | - | Yes |
To ensure that one user could only be added once for a day’s giveaway, we created an **index** of the `unique` type.
| Key | Type | Attribute | Order |
| --- | --- | --- | --- |
| ----------- | ----------- | ----------- | ----------- |
| names | unique | discordName | ASC |
Lastly, we added **collection-level permissions** to allow anyone to read data (since the giveaway page was meant to be publicly accessible) and only authenticated users to add data (their Discord username and email address) to the collection.
| Role | Create | Read | Update | Delete |
| --- | --- | --- | --- | --- |
| ------ | ------ | ------ | ------ | ------ |
| Any | | Yes | | |
| Users | Yes | | | |
@@ -74,7 +74,6 @@ Lastly, we added **collection-level permissions** to allow anyone to read data (
Looking at the two primary features, there were three primary challenges we needed to solve to develop this app. To build this app, we used SvelteKit, a framework to build web applications using JavaScript. There are some prerequisites, however, that must be completed before building out the features themselves.
> Note: The code snippets will focus only on the application logic. All CSS and styling-related information will be accessible in the final project repository at the end of the blog.
>
### Prerequisites
@@ -366,7 +365,7 @@ Using the load function would ensure that this list would be available on our pa
});
</script>
<section class="u-flex-vertical u-gap-16">
<section class="u-flex-vertical gap-4">
<InitHeading {heading} />
<div class="wheel u-flex-vertical">
<div class="wheel-container u-flex-vertical"></div>
@@ -384,4 +383,4 @@ The giveaway roulette app was used over 450 times by 230+ different users across
You can find the application’s complete source code at this [GitHub Repo](https://github.com/adityaoberai/InitGiveawayRoulette).
[Join us on Discord](https://appwrite.io/discord) to be the first to get updates and to be part of a vibrant community!
[Join us on Discord](https://appwrite.io/discord)&nbsp;to be the first to get updates and to be part of a vibrant community!

26
src/routes/blog/post/personal-chatbot-gpt-4o/+page.markdoc
View File

@@ -9,17 +9,17 @@ author: aditya-oberai
category: functions
---
Recently, at the OpenAI Spring Update, OpenAI CTO Mira Murati announced the launch of their new flagship model, **GPT-4o**. GPT-4o happens to be OpenAI's fastest and most affordable model so far, which led us to wonder if we could use it to build our very own chatbot.
Recently, at the OpenAI Spring Update, OpenAI CTO Mira Murati announced the launch of their new flagship model,&nbsp;**GPT-4o**. GPT-4o happens to be OpenAI's fastest and most affordable model so far, which led us to wonder if we could use it to build our very own chatbot.
Therefore, in this blog, we will learn how to use Appwrite Functions and the OpenAI GPT-4o API to build a personal chatbot.
## Setting up the OpenAI Platform
To use the OpenAI GPT-4o API, we must first create an API key on their platform. To do that, we must first create an account on the [OpenAI platform](https://platform.openai.com/). Once the account is set up and a project is created, we can visit their [API keys](https://platform.openai.com/account/api-keys) page and create an API key. Ensure you copy and save this key in a safe place, as the OpenAI platform will not let you view the key after it is created.
To use the OpenAI GPT-4o API, we must first create an API key on their platform. To do that, we must first create an account on the&nbsp;[OpenAI platform](https://platform.openai.com/). Once the account is set up and a project is created, we can visit their&nbsp;[API keys](https://platform.openai.com/account/api-keys)&nbsp;page and create an&nbsp;API key. Ensure you copy and save this key in a safe place, as the OpenAI platform will not let you view the key after it is created.
![Create an OpenAI API Key](/images/blog/personal-chatbot-gpt-4o/openai.png)
> Note: To use the GPT-4o API, your account must be upgraded to Usage tier 1 (you must purchase at least $5 worth of credits). To learn more, visit their [Usage tiers documentation](https://platform.openai.com/docs/guides/rate-limits/usage-tiers?context=tier-one).
> Note: To use the GPT-4o API, your account must be upgraded to&nbsp;Usage tier 1 (you must purchase at least $5 worth of credits). To learn more, visit their&nbsp;[Usage tiers documentation](https://platform.openai.com/docs/guides/rate-limits/usage-tiers?context=tier-one).
## Initializing the Appwrite Function
@@ -30,7 +30,7 @@ Now that we have our OpenAI API Key, let's prepare the function on [Appwrite](ht
Once the function is ready, we must visit the Settings tab on the Function page and add the following environment variables:
- `OPENAI_API_KEY`: API Key from our OpenAI account
- `OPENAI_MAX_TOKENS`: Maximum number of tokens that the OpenAI response should contain (we'll set this as `512`)
- `OPENAI_MAX_TOKENS`: Maximum number of tokens that the OpenAI response should contain (we'll set this as&nbsp;`512`)
Once that is done, visit the function's GitHub repository and clone the project.
@@ -90,7 +90,7 @@ To get our chatbot up and running, we must first develop a UI you can interact w
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Prompt ChatGPT demo</h1>
<code class="u-un-break-text"></code>
@@ -108,8 +108,8 @@ To get our chatbot up and running, we must first develop a UI you can interact w
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }"
>
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="card flex gap-6 u-flex-vertical">
<div class="flex u-cross-center gap-2">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -126,9 +126,9 @@ To get our chatbot up and running, we must first develop a UI you can interact w
</button>
</div>
<template x-if="answer">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<div class="flex u-flex-vertical gap-3">
<div class="flex u-flex-vertical gap-3 card">
<div class="flex gap-3">
<h5 class="eyebrow-heading-2">ChatGPT:</h5>
</div>
@@ -152,7 +152,7 @@ To simplify the function logic, we create additional utility functions to
- return the contents of a file in the static folder as a string (to send our UI to the client browser)
- throw an error if any of the keys are missing from the object (to check for missing environment variables)
For that, we shall enter the `src` folder and create a file `utils.js` with the following code:
For that, we shall enter the&nbsp;`src`&nbsp;folder and create a file&nbsp;`utils.js`&nbsp;with the following code:
```js
import path from 'path';
@@ -193,7 +193,7 @@ export function throwIfMissing(obj, keys) {
### Creating the function logic
Now that our chatbot UI and utility functions are ready, we can develop our final function logic. For that, we must first install the `openai` NPM package. Open your terminal in the project directory and run the following command:
Now that our chatbot UI and utility functions are ready, we can develop our final function logic. For that, we must first install the&nbsp;`openai`&nbsp;NPM package. Open your terminal in the project directory and run the following command:
```bash
npm i openai
@@ -267,7 +267,7 @@ Here is what an example of this looks like: [apwr.dev/gpt-4o-demo](https://apwr.
## Next steps
And with that, you have successfully deployed your personal chatbot powered by GPT-4o and Appwrite Functions. If you liked this project or want to investigate the full project code, visit our [GitHub repository](https://github.com/appwrite-community/gpt-4o-function).
And with that, you have successfully deployed your personal chatbot powered by GPT-4o and Appwrite Functions. If you liked this project or want to investigate the full project code, visit our&nbsp;[GitHub repository](https://github.com/appwrite-community/gpt-4o-function).
Additionally, if you would like to learn more about Appwrite Functions, here are some resources:

20
src/routes/blog/post/valentines-day-sonnet-generator/+page.markdoc
View File

@@ -15,7 +15,7 @@ In this blog, we will share how we developed our Valentine’s Day Sonnet Genera
# Setting up the OpenAI platform
To get an OpenAI API Key, you must create an account on the [OpenAI platform](https://platform.openai.com/). Once your account is set up, visit their [API keys](https://platform.openai.com/account/api-keys) page and create an API Key. Ensure you copy and save this key in a safe place, as the OpenAI platform will not let you view the key after it is created.
To get an OpenAI API Key, you must create an account on the&nbsp;[OpenAI platform](https://platform.openai.com/). Once your account is set up, visit their&nbsp;[API keys](https://platform.openai.com/account/api-keys)&nbsp;page and create an&nbsp;API Key. Ensure you copy and save this key in a safe place, as the OpenAI platform will not let you view the key after it is created.
![OpenAI API Keys](/images/blog/valentines-day-sonnet-generator/openai.png)
@@ -23,15 +23,15 @@ To get an OpenAI API Key, you must create an account on the [OpenAI platform](h
# Preparing the Appwrite Function
Now that we have our OpenAI API Key, let us get the function ready on [Appwrite](https://cloud.appwrite.io/). Head over to your Appwrite project and visit the Functions page. From there, we will select the Templates tab, search for and select the Prompt ChatGPT function template.
Now that we have our OpenAI API Key, let us get the function ready on&nbsp;[Appwrite](https://cloud.appwrite.io/). Head over to your Appwrite project and visit the&nbsp;Functions&nbsp;page. From there, we will select the&nbsp;Templates&nbsp;tab, search for and select the&nbsp;Prompt ChatGPT&nbsp;function template.
![Appwrite Function Templates](/images/blog/valentines-day-sonnet-generator/templates.png)
This function requires **1 environment variable** to setup:
This function requires&nbsp;**1 environment variable**&nbsp;to setup:
- `OPENAI_API_KEY`: API Key from our OpenAI account
After you have configured the environment variables, you must connect your Appwrite account with GitHub, select **Create a new repository** (this will generate a GitHub repository for you with the function), and leave the production branch and root settings as default to create this function.
After you have configured the environment variables, you must connect your Appwrite account with GitHub, select&nbsp;**Create a new repository**&nbsp;(this will generate a GitHub repository for you with the function), and leave the production branch and root settings as default to create this function.
# Developing the project
@@ -80,7 +80,7 @@ In the project directory, visit `static/index.html` and replace the existing cod
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Valentine's Day Sonnet Generator ❤️</h1>
<code class="u-un-break-text"></code>
@@ -97,8 +97,8 @@ In the project directory, visit `static/index.html` and replace the existing cod
class="container u-margin-block-start-negative-56"
x-data="{ name: '', sonnet: '', loading: false }"
>
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="card flex gap-6 u-flex-vertical">
<div class="flex u-cross-center gap-2">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -115,9 +115,9 @@ In the project directory, visit `static/index.html` and replace the existing cod
</button>
</div>
<template x-if="sonnet">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<div class="flex u-flex-vertical gap-3">
<div class="flex u-flex-vertical gap-3 card">
<div class="flex gap-3">
<h5 class="eyebrow-heading-2">Cupid:</h5>
</div>

13
src/routes/blog/rss.xml/+server.ts
View File

@@ -6,7 +6,8 @@ export const prerender = true;
function encodeText(str: string | null): string {
if (str === null) return '';
return str.replace(/&/g, '&amp;')
return str
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
@@ -14,7 +15,7 @@ function encodeText(str: string | null): string {
}
function encodeUrl(href: string): string {
return encodeURI(`https://appwrite.io${href}`)
return encodeURI(`https://appwrite.io${href}`);
}
export const GET: RequestHandler = () => {
@@ -25,14 +26,18 @@ export const GET: RequestHandler = () => {
<link>https://appwrite.io</link>
<atom:link href="https://appwrite.io/blog/rss.xml" rel="self" type="application/rss+xml" />
<description>Appwrite is an open-source platform for building applications at any scale, using your preferred programming languages and tools.</description>
${posts.map((post) => `<item>
${posts
.map(
(post) => `<item>
<title>${encodeText(post.title)}</title>
<pubDate>${post.date.toUTCString()}</pubDate>
<link>${encodeUrl(post.href)}</link>
<guid>${encodeUrl(post.href)}</guid>
<description>${encodeText(post.description)}</description>
</item>
`).join('')}
`
)
.join('')}
</channel>
</rss>`;

74
src/routes/brand-launch/+page.svelte
View File

@@ -2,7 +2,7 @@
import { Main } from '$lib/layouts';
</script>
<div class="u-position-absolute web-is-only-mobile u-inset-inline-0">
<div class="absolute web-is-only-mobile u-inset-inline-0">
<svg
class="u-width-full-line"
xmlns="http://www.w3.org/2000/svg"
@@ -36,12 +36,10 @@
</div>
<div
class="u-position-absolute"
class="absolute"
style="inline-size:100rem; inset-block-start:calc(50% - 250px); inset-inline-start:50%; transform:translateX(-50%);"
>
<div
class="u-position-absolute u-inset-inline-start-0 web-u-inset-block-start-100 web-is-not-mobile"
>
<div class="absolute u-inset-inline-start-0 web-u-inset-block-start-100 web-is-not-mobile">
<img
src="/images/pages/brand-lunch/left-side-top-brand.png"
alt=""
@@ -49,9 +47,7 @@
style="transform:translateX(-35%)"
/>
</div>
<div
class="u-position-absolute u-inset-inline-end-0 web-u-inset-block-start-100 web-is-not-mobile"
>
<div class="absolute u-inset-inline-end-0 web-u-inset-block-start-100 web-is-not-mobile">
<img
src="/images/pages/brand-lunch/right-side-top-brand.png"
alt=""
@@ -61,7 +57,7 @@
</div>
</div>
<div class="u-position-absolute u-width-full-line web-is-not-mobile">
<div class="absolute u-width-full-line web-is-not-mobile">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1728"
@@ -97,12 +93,12 @@
<Main>
<div class="web-big-padding-section">
<div class="web-big-padding-section-level-1">
<div class="web-container u-position-relative">
<div class="web-container relative">
<div
class="web-big-padding-section-level-2 web-u-max-width-800 u-flex u-main-center u-cross-center u-margin-inline-auto web-u-margin-block-0"
class="web-big-padding-section-level-2 web-u-max-width-800 flex u-main-center u-cross-center mx-auto web-u-margin-block-0"
style="block-size:calc(100vh - 6.375rem)"
>
<div class="web-hero web-u-gap-20">
<div class="web-hero web-gap-5">
<h1 class="web-headline web-u-color-text-primary">Brand new Appwrite</h1>
<p class="web-description web-u-color-text-primary web-u-opacity-64">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
@@ -112,7 +108,7 @@
</div>
<div class="web-big-padding-section-level-2 web-u-sep-block-start">
<div class="u-stretch u-flex web-u-flex-vertical-mobile">
<div class="u-stretch flex web-u-flex-vertical-mobile">
<div
class="web-hero is-align-start web-u-max-width-480 web-u-padding-block-start-48"
>
@@ -125,7 +121,7 @@
</p>
</div>
<div
class="u-stretch u-flex web-u-margin-inline-auto-mobile web-u-margin-block-start-40-mobile"
class="u-stretch flex web-mx-auto-mobile web-u-margin-block-start-40-mobile"
>
<img
class="web-u-margin-block-start-8-negative u-margin-inline-start-auto u-width-full-line u-max-width-500"
@@ -137,9 +133,11 @@
</div>
<div class="web-big-padding-section-level-2 web-u-sep-block-start">
<div class="web-grid-1-1-opt-2">
<div class="grid grid-cols-2-opt-2">
<div class="web-hero is-align-start web-u-padding-block-start-40">
<h2 class="web-title web-u-color-text-primary">Eliminating complexity</h2>
<h2 class="web-title web-u-color-text-primary">
Eliminating complexity
</h2>
<p class="web-main-body-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
diam augue.
@@ -176,9 +174,9 @@
</div>
</div>
<div
class="web-big-padding-section-level-1 u-position-relative u-padding-0 u-full-screen-height u-flex u-main-center u-cross-center u-overflow-hidden"
class="web-big-padding-section-level-1 relative u-padding-0 u-full-screen-height flex u-main-center u-cross-center overflow-hidden"
>
<div class="u-position-absolute u-inset-inline-start-0">
<div class="absolute u-inset-inline-start-0">
<svg
class="web-u-opacity-40-mobile u-max-width-100-percent web-u-max-height-100-percent"
xmlns="http://www.w3.org/2000/svg"
@@ -319,7 +317,7 @@
</defs>
</svg>
</div>
<div class="u-position-absolute u-inset-inline-end-0">
<div class="absolute u-inset-inline-end-0">
<svg
class="web-u-opacity-40-mobile u-max-width-100-percent web-u-max-height-100-percent"
xmlns="http://www.w3.org/2000/svg"
@@ -456,11 +454,11 @@
</defs>
</svg>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<div class="web-hero">
<p
class="web-headline web-u-color-text-primary web-u-max-width-610 u-margin-inline-auto"
class="web-headline web-u-color-text-primary web-u-max-width-610 mx-auto"
>
Build like a team of hundreds
</p>
@@ -469,9 +467,9 @@
</div>
</div>
<div
class="web-big-padding-section-level-1 u-position-relative u-padding-0 u-full-screen-height u-flex u-main-center u-cross-center u-overflow-hidden"
class="web-big-padding-section-level-1 relative u-padding-0 u-full-screen-height flex u-main-center u-cross-center overflow-hidden"
>
<div class="u-position-absolute u-inset-inline-start-0">
<div class="absolute u-inset-inline-start-0">
<svg
class="web-u-opacity-40-mobile u-max-width-100-percent web-u-max-height-100-percent"
xmlns="http://www.w3.org/2000/svg"
@@ -612,7 +610,7 @@
</defs>
</svg>
</div>
<div class="u-position-absolute u-inset-inline-end-0">
<div class="absolute u-inset-inline-end-0">
<svg
class="web-u-opacity-40-mobile u-max-width-100-percent web-u-max-height-100-percent"
xmlns="http://www.w3.org/2000/svg"
@@ -749,9 +747,9 @@
</defs>
</svg>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<div class="u-flex u-main-center u-cross-center">
<div class="flex u-main-center u-cross-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="584"
@@ -812,10 +810,10 @@
</div>
</div>
<div
class="web-big-padding-section-level-1 web-white-section theme-light
u-position-relative u-padding-0 u-overflow-hidden"
class="web-big-padding-section-level-1 web-white-section light
relative u-padding-0 overflow-hidden"
>
<div class="u-position-absolute u-inset-inline-end-0">
<div class="absolute u-inset-inline-end-0">
<svg
style="max-inline-size:100%;"
xmlns="http://www.w3.org/2000/svg"
@@ -1083,10 +1081,10 @@
</defs>
</svg>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<div
class="u-full-screen-height u-flex-vertical web-u-gap-80 u-main-center u-cross-center"
class="u-full-screen-height u-flex-vertical web-gap-20 u-main-center u-cross-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -1143,8 +1141,8 @@
fill="#FD366E"
/>
</svg>
<div class="u-flex web-u-flex-vertical-mobile u-cross-center u-gap-32">
<div class="u-flex-vertical u-cross-center u-gap-12">
<div class="flex web-u-flex-vertical-mobile u-cross-center gap-8">
<div class="u-flex-vertical u-cross-center gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
@@ -1162,7 +1160,7 @@
<div class="web-caption-400">Our global community</div>
</div>
<div>+</div>
<div class="u-flex-vertical u-cross-center u-gap-12">
<div class="u-flex-vertical u-cross-center gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="65"
@@ -1217,8 +1215,8 @@
</div>
</div>
<div class="web-big-padding-section-level-1 u-position-relative u-padding-0">
<div class="u-position-absolute u-inset-inline-start-0 u-width-full-line">
<div class="web-big-padding-section-level-1 relative u-padding-0">
<div class="absolute u-inset-inline-start-0 u-width-full-line">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1280"
@@ -1576,9 +1574,9 @@
</defs>
</svg>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<div class="web-grid-1-1-opt-2 u-gap-32 u-main-space-between">
<div class="grid grid-cols-2-opt-2 gap-8 u-main-space-between">
<div class="web-hero is-align-start web-u-max-width-480">
<h4 class="web-title web-u-color-text-primary">
Be a part of #Teamof100

7
src/routes/changelog/ChangelogEntry.svelte
View File

@@ -9,7 +9,12 @@
<time class="web-caption-400 padded" datetime={entry.date}>{formatDate(entry.date)}</time>
{#if entry.cover}
<a href={entry.href} class="web-media">
<img src={entry.cover} alt="" loading="lazy" class="web-u-media-ratio-16-9 u-width-full-line" />
<img
src={entry.cover}
alt=""
loading="lazy"
class="web-u-media-ratio-16-9 u-width-full-line"
/>
</a>
{/if}

6
src/routes/changelog/[[page]]/+page.svelte
View File

@@ -61,12 +61,14 @@
</ul>
{#if data.nextPage}
<button class="web-button is-secondary" on:click={loadMore}>Load more</button>
<button class="web-button is-secondary" on:click={loadMore}
>Load more</button
>
{/if}
</div>
</div>
</div>
<div class="web-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div class="web-big-padding-section-level-1 relative overflow-hidden">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<PreFooter />

9
src/routes/changelog/entry/[entry]/+page.svelte
View File

@@ -42,7 +42,10 @@
<div class="web-container wrapper" style="--container-size:42.5rem">
<article class="web-main-article">
<header class="web-main-article-header">
<a class="web-link web-u-color-text-secondary u-cross-baseline" href="/changelog">
<a
class="web-link web-u-color-text-secondary u-cross-baseline"
href="/changelog"
>
<span class="web-icon-chevron-left" aria-hidden="true" />
<span>Back to Changelog</span>
</a>
@@ -55,7 +58,7 @@
</header>
{#if data.cover}
<div class="web-media-container">
<img class="u-block" src={data.cover} alt="" />
<img class="block" src={data.cover} alt="" />
</div>
{/if}
@@ -65,7 +68,7 @@
</article>
</div>
</div>
<div class="web-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div class="web-big-padding-section-level-1 relative overflow-hidden">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<PreFooter />

70
src/routes/community/+page.svelte
View File

@@ -144,10 +144,10 @@
</svelte:head>
<Main>
<div class="web-big-padding-section u-overflow-hidden">
<div class="web-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div class="web-big-padding-section overflow-hidden">
<div class="web-big-padding-section-level-1 relative overflow-hidden">
<div
class="u-position-absolute web-u-z-index-1-negative web-u-hide-mobile"
class="absolute web-z-1-negative web-u-hide-mobile"
style:inline-size="704px"
style:block-size="670px"
style:left="calc((50% - 704px / 2) + 18rem)"
@@ -156,7 +156,7 @@
<img src="/images/community/sphere.png" alt="" />
</div>
<div class="web-big-padding-section-level-2">
<section class="web-container web-u-padding-block-end-0 u-position-relative">
<section class="web-container web-u-padding-block-end-0 relative">
<div class="web-hero is-align-start web-u-max-width-580">
<h1 class="web-display web-u-color-text-primary">
Built by a community of 800+ contributors
@@ -167,7 +167,7 @@
and contributors and help us make Appwrite better for developers
worldwide.
</p>
<div class="u-flex u-flex-wrap u-gap-12 u-margin-block-start-32">
<div class="flex flex-wrap gap-3 u-margin-block-start-32">
<a
href="/discord"
target="_blank"
@@ -206,7 +206,7 @@
</div>
</div>
<div class="web-big-padding-section-level-1 u-position-relative">
<div class="web-big-padding-section-level-1 relative">
<div class="absolute-container">
<div class="green-gradient" />
<div class="pink-gradient" />
@@ -227,8 +227,8 @@
</div>
<div class="web-big-padding-section-level-2">
<div class="web-container u-position-relative">
<div class="web-hero is-mobile-center web-u-gap-20 web-u-max-width-900">
<div class="web-container relative">
<div class="web-hero is-mobile-center web-gap-5 web-u-max-width-900">
<h1 class="web-headline web-u-color-text-primary">
The power of open source benefits us all
</h1>
@@ -237,9 +237,7 @@
See contributors of Appwrite since 2019 and discover how you can
start contributing.
</p>
<div
class="u-flex u-flex-wrap u-main-center u-gap-12 u-margin-block-start-32"
>
<div class="flex flex-wrap u-main-center gap-3 u-margin-block-start-32">
<a
href="https://github.com/appwrite/appwrite/graphs/contributors"
target="_blank"
@@ -273,8 +271,8 @@
style="--card-padding:2rem; --card-padding-mobile:1.25rem;"
>
<div
class="u-flex web-u-flex-direction-column-mobile
web-u-gap-96 web-u-row-gap-48"
class="flex web-u-flex-direction-column-mobile
web-gap-24 web-u-row-gap-48"
>
<div>
<h3 class="web-label web-u-color-text-primary">
@@ -327,7 +325,7 @@
<span>({issue.repository})</span>
</div>
<ul
class="u-flex u-flex-wrap u-gap-8 u-margin-block-start-8"
class="flex flex-wrap gap-2 u-margin-block-start-8"
>
{#each issue.tags as tag}
<li>
@@ -349,12 +347,12 @@
<section class="web-container">
<h4 class="web-label web-u-color-text-primary">Other ways to help</h4>
<ul
class="grid-box u-gap-32 web-u-gap-20-mobile u-margin-block-start-20"
class="grid-box gap-8 web-gap-5-mobile u-margin-block-start-20"
style="--grid-item-size:15rem"
>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient u-flex-vertical web-gap-2"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Create content
@@ -366,7 +364,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient u-flex-vertical web-gap-2"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Present at meetups
@@ -378,7 +376,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient u-flex-vertical web-gap-2"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Report bugs
@@ -390,7 +388,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient u-flex-vertical web-gap-2"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Submit new ideas
@@ -402,7 +400,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient u-flex-vertical web-gap-2"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Improve documentation
@@ -414,7 +412,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient u-flex-vertical web-gap-2"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Helping others
@@ -451,9 +449,7 @@
</div>
</div>
<div
class="web-big-padding-section-level-1 u-position-relative web-white-section theme-light"
>
<div class="web-big-padding-section-level-1 relative web-white-section light">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-hero is-center">
@@ -483,7 +479,7 @@
</div>
</div>
</div>
<div class="web-big-padding-section-level-1 web-white-section theme-light">
<div class="web-big-padding-section-level-1 web-white-section light">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-grid-15-25-desktop web-u-row-gap-48 web-u-column-gap-96">
@@ -504,7 +500,7 @@
class="web-card is-white web-u-min-block-size-320 u-flex-vertical"
style="--card-padding:2rem;rotate: 6deg"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-flex-vertical u-main-space-between gap-8">
<span
class="icon-discord web-u-font-size-40"
aria-hidden="true"
@@ -524,7 +520,7 @@
class="web-card is-white web-u-min-block-size-320 u-flex-vertical"
style="--card-padding:2rem; rotate: 2deg"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-flex-vertical u-main-space-between gap-8">
<span
class="web-icon-x web-u-font-size-40"
aria-hidden="true"
@@ -544,7 +540,7 @@
class="web-card is-white web-u-min-block-size-320 u-flex-vertical"
style="--card-padding:2rem; rotate: -10deg"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-flex-vertical u-main-space-between gap-8">
<span
class="icon-github web-u-font-size-40"
aria-hidden="true"
@@ -564,7 +560,7 @@
class="web-card is-white web-u-min-block-size-320 u-flex-vertical"
style="--card-padding:2rem; rotate: -6deg"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-flex-vertical u-main-space-between gap-8">
<span
class="icon-youtube web-u-font-size-40"
aria-hidden="true"
@@ -584,13 +580,13 @@
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-grid-1-1-opt-2 u-gap-32">
<div class="grid grid-cols-2-opt-2 gap-8">
<div class="">
<div
class="web-u-max-inline-size-none-mobile"
class:web-u-max-width-380={!submitted}
>
<section class="u-flex-vertical web-u-gap-20">
<section class="u-flex-vertical web-gap-5">
<h1 class="web-title web-u-color-text-primary">
Appwrite insights
</h1>
@@ -603,7 +599,7 @@
</div>
</div>
{#if submitted}
<div class="u-flex u-gap-8 u-cross-center">
<div class="flex gap-2 u-cross-center">
<svg
width="18"
height="18"
@@ -640,9 +636,9 @@
<form
method="post"
on:submit|preventDefault={submit}
class="u-flex-vertical u-gap-16"
class="u-flex-vertical gap-4"
>
<div class="u-flex u-flex-vertical u-gap-4">
<div class="flex u-flex-vertical gap-1">
<label for="name">Your name</label>
<input
class="web-input-text"
@@ -654,7 +650,7 @@
bind:value={name}
/>
</div>
<div class="u-flex u-flex-vertical u-gap-4">
<div class="flex u-flex-vertical gap-1">
<label for="email">Your email</label>
<input
class="web-input-text"
@@ -680,9 +676,7 @@
</div>
</div>
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative"
>
<div class="web-big-padding-section-level-2 is-margin-replace-padding relative">
<div class="web-container">
<PreFooter />
<FooterNav />

12
src/routes/community/EventCard.svelte
View File

@@ -25,11 +25,11 @@
export let description: $$Props['description'];
export let buttonText: $$Props['buttonText'];
export let headingLevel: $$Props['headingLevel'] = 5;
const hasPast: boolean = (new Date()) > (new Date(date));
const hasPast: boolean = new Date() > new Date(date);
const dateString: string = new Date(date).toLocaleDateString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
year: 'numeric'
});
$: headingTag = `h${headingLevel}`;
</script>
@@ -39,12 +39,12 @@
<img src={cover.src} alt={cover.alt} class="web-u-media-ratio-16-9" loading="lazy" />
</div>
<div class="web-grid-articles-item-content is-no-gap">
<ul class="u-flex u-flex-wrap web-u-list-inline-dot-sep">
<li class="u-flex u-cross-baseline u-gap-4">
<ul class="flex flex-wrap web-u-list-inline-dot-sep">
<li class="flex u-cross-baseline gap-1">
<span class="web-icon-calendar web-u-color-text-tertiary" aria-hidden="true" />
<time class="">{dateString}</time>
</li>
<li class="u-flex u-cross-baseline u-gap-4">
<li class="flex u-cross-baseline gap-1">
<span class="web-icon-location web-u-color-text-tertiary" aria-hidden="true" />
<span class="">{location}</span>
</li>
@@ -58,7 +58,7 @@
<p class="web-sub-body-500">
{description}
</p>
<div class="u-flex u-flex-wrap u-gap-8 u-padding-block-start-16 mbs-auto">
<div class="flex flex-wrap gap-2 u-padding-block-start-16 mbs-auto">
<button class="web-button is-secondary" disabled={hasPast}>
<span>{buttonText}</span>
</button>

3
src/routes/community/ProjectCard.svelte
View File

@@ -18,8 +18,9 @@
export let image: $$Props['image'];
export let href: $$Props['href'];
</script>
<a
class="web-card is-white web-u-flex-vertical u-gap-8"
class="web-card is-white web-u-flex-vertical gap-2"
style="--card-padding: 0.5rem;"
{href}
target="_blank"

90
src/routes/company/+page.svelte
View File

@@ -29,17 +29,17 @@
<Main>
<enhanced:img
class="u-position-absolute u-inset-inline-start-0 u-inset-block-start-0"
class="absolute u-inset-inline-start-0 u-inset-block-start-0"
src="./bg-left.png"
alt=""
/>
<enhanced:img
class="u-position-absolute u-inset-inline-end-0 u-inset-block-start-0"
class="absolute u-inset-inline-end-0 u-inset-block-start-0"
src="./bg-right.png"
alt=""
/>
<div class="web-big-padding-section u-position-relative">
<div class="web-big-padding-section-level-1 u-position-relative">
<div class="web-big-padding-section relative">
<div class="web-big-padding-section-level-1 relative">
<div class="web-big-padding-section-level-2" style:margin-block="8rem">
<section class="web-container web-u-padding-block-end-0">
<div
@@ -61,14 +61,14 @@
</section>
</div>
</div>
<div class="web-big-padding-section-level-1 u-position-relative">
<div class="web-big-padding-section-level-1 relative">
<div class="web-big-padding-section-level-2">
<section class="web-container">
<section
class="web-grid-1-1"
class="grid grid-cols-2"
style="--grid-1-1-gap:2rem; --grid-1-1-gap-desktop:6.25rem;"
>
<div class="u-flex-vertical u-gap-32">
<div class="u-flex-vertical gap-8">
<h2 class="web-display web-u-color-text-primary">
Designed for and by developers
</h2>
@@ -82,7 +82,7 @@
</a>
</div>
<div class="web-description u-flex-vertical u-gap-16">
<div class="web-description u-flex-vertical gap-4">
<p>
At Appwrite it is our mission to eliminate friction and abstract
complexity for every creator. Giving developers all the tools they
@@ -104,7 +104,7 @@
</div>
</div>
<!-- <div class="web-big-padding-section-level-1 u-position-relative web-white-section theme-light">
<!-- <div class="web-big-padding-section-level-1 relative web-white-section light">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-hero is-center">
@@ -119,9 +119,9 @@
<div class="web-timeline-content">
<ol class="web-timeline-content-list">
<li class="web-timeline-content-item">
<div class="web-timeline-content-item-top web-grid-1-1"
<div class="web-timeline-content-item-top grid grid-cols-2"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="u-flex-vertical gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
A passion project called Appwrite
@@ -138,7 +138,7 @@
</div>
<div class="web-timeline-content-item-bottom web-grid-1-1 is-not-mobile"
<div class="web-timeline-content-item-bottom grid grid-cols-2 is-not-mobile"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div>
[CONTENT-left]
@@ -152,9 +152,9 @@
</div>
</li>
<li class="web-timeline-content-item">
<div class="web-grid-1-1"
<div class="grid grid-cols-2"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="u-flex-vertical gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
Building the team
@@ -166,7 +166,7 @@
<div>[image]</div>
</div>
<div class="web-timeline-content-item-bottom web-grid-1-1 is-not-mobile"
<div class="web-timeline-content-item-bottom grid grid-cols-2 is-not-mobile"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div>
<div class="web-card is-white web-u-max-width-168">
@@ -180,9 +180,9 @@
</div>
</li>
<li class="web-timeline-content-item">
<div class="web-grid-1-1"
<div class="grid grid-cols-2"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="u-flex-vertical gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
Community validation
@@ -196,12 +196,12 @@
</div>
</div>
<div class="web-timeline-content-item-bottom web-grid-1-1 is-not-mobile"
<div class="web-timeline-content-item-bottom grid grid-cols-2 is-not-mobile"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div>
<div class="web-card is-white">
<div class="web-social-item u-flex-vertical u-gap-24">
<div class="u-flex u-gap-16 u-main-space-between">
<div class="web-social-item u-flex-vertical gap-6">
<div class="flex gap-4 u-main-space-between">
<div class="web-user-box">
<img class="web-user-box-image" src="/images/avatars/eldad.png" alt="Avatar of Eldad Fux">
<div class="web-user-box-name web-sub-body-500">Eldad Fux</div>
@@ -222,9 +222,9 @@
</div>
</li>
<li class="web-timeline-content-item">
<div class="web-grid-1-1"
<div class="grid grid-cols-2"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="u-flex-vertical gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
Continuous improvement
@@ -239,7 +239,7 @@
</div>
<div class="web-timeline-content-item-bottom web-grid-1-1 is-not-mobile"
<div class="web-timeline-content-item-bottom grid grid-cols-2 is-not-mobile"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div>
[CONTENT-left]
@@ -251,9 +251,9 @@
</li>
<li class="web-timeline-content-item">
<div class="web-grid-1-1"
<div class="grid grid-cols-2"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="u-flex-vertical gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
Taking it to the Cloud
@@ -265,7 +265,7 @@
<div>[image]</div>
</div>
<div class="web-timeline-content-item-bottom web-grid-1-1 is-not-mobile"
<div class="web-timeline-content-item-bottom grid grid-cols-2 is-not-mobile"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div>
[CONTENT-left]
@@ -282,12 +282,14 @@
</div>
</div>
</div> -->
<div class="web-big-padding-section-level-1 web-white-section theme-light">
<div class="web-big-padding-section-level-1 web-white-section light">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-hero web-u-max-width-800">
<h4 class="web-display web-u-color-text-primary">Backed by top investors</h4>
<p class="web-description web-u-max-width-480 u-margin-inline-auto">
<h4 class="web-display web-u-color-text-primary">
Backed by top investors
</h4>
<p class="web-description web-u-max-width-480 mx-auto">
Appwrite is proudly backed by some of the top investors in the industry.
</p>
</div>
@@ -377,7 +379,9 @@
</div>
<div class="web-big-padding-section-level-2">
<div class="web-container">
<h5 class="web-title web-u-color-text-primary u-text-center">Angel Investors</h5>
<h5 class="web-title web-u-color-text-primary u-text-center">
Angel Investors
</h5>
<ul class="web-grid-2c-4c u-margin-block-start-48">
<li class="u-flex-vertical">
<h6 class="web-main-body-500 web-u-color-text-primary">
@@ -386,7 +390,7 @@
<p class="web-main-body-500">Partner</p>
<p class="web-main-body-500">MizMaa</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="flex gap-2 u-padding-block-start-16 u-margin-block-start-auto"
>
<li>
<a
@@ -413,11 +417,13 @@
</ul>
</li>
<li class="u-flex-vertical">
<h6 class="web-main-body-500 web-u-color-text-primary">Ariel Maislos</h6>
<h6 class="web-main-body-500 web-u-color-text-primary">
Ariel Maislos
</h6>
<p class="web-main-body-500">Angel Investor</p>
<p class="web-main-body-500">Former Apple IL CEO</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="flex gap-2 u-padding-block-start-16 u-margin-block-start-auto"
>
<li>
<a
@@ -447,7 +453,7 @@
<h6 class="web-main-body-500 web-u-color-text-primary">Gilad Engel</h6>
<p class="web-main-body-500">Angel Investor</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="flex gap-2 u-padding-block-start-16 u-margin-block-start-auto"
/>
</li>
<li class="u-flex-vertical">
@@ -457,7 +463,7 @@
<p class="web-main-body-500">Co-founder & Partner</p>
<p class="web-main-body-500">Crane Venture Partners</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="flex gap-2 u-padding-block-start-16 u-margin-block-start-auto"
>
<li>
<a
@@ -476,7 +482,7 @@
<h6 class="web-main-body-500 web-u-color-text-primary">Ameet Patel</h6>
<p class="web-main-body-500">Angel Investor</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="flex gap-2 u-padding-block-start-16 u-margin-block-start-auto"
>
<li>
<a
@@ -496,7 +502,7 @@
<p class="web-main-body-500">Partner</p>
<p class="web-main-body-500">Redline Capital</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="flex gap-2 u-padding-block-start-16 u-margin-block-start-auto"
>
<li>
<a
@@ -518,7 +524,7 @@
<p class="web-main-body-500">Co-founder</p>
<p class="web-main-body-500">Heroku</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="flex gap-2 u-padding-block-start-16 u-margin-block-start-auto"
>
<li>
<a
@@ -538,7 +544,7 @@
<p class="web-main-body-500">Co-Founder</p>
<p class="web-main-body-500">Elastic</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="flex gap-2 u-padding-block-start-16 u-margin-block-start-auto"
>
<li>
<a
@@ -558,10 +564,8 @@
</div>
</div>
<div class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative"
>
<div class="web-big-padding-section-level-1 u-padding-0 overflow-hidden">
<div class="web-big-padding-section-level-2 is-margin-replace-padding relative">
<img
src="/images/bgs/pre-footer.png"
alt=""

20
src/routes/contact-us/+page.svelte
View File

@@ -57,7 +57,7 @@
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute" style="pointer-events:none;">
<div class="absolute" style="pointer-events:none;">
<enhanced:img src="./bg.png" alt="" />
</div>
@@ -66,14 +66,14 @@
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-grid-1-1-opt-2 u-gap-32">
<div class="grid grid-cols-2-opt-2 gap-8">
<div>
<div
class="web-u-max-inline-size-none-mobile"
class:web-u-max-width-380={!submitted}
>
{#if submitted}
<section class="u-flex-vertical web-u-gap-20">
<section class="u-flex-vertical web-gap-5">
<h1 class="web-display web-u-color-text-primary">
Thank you for your message
</h1>
@@ -90,7 +90,7 @@
</a>
</section>
{:else}
<section class="u-flex-vertical web-u-gap-20">
<section class="u-flex-vertical web-gap-5">
<h1 class="web-display web-u-color-text-primary">
Contact Us
</h1>
@@ -101,10 +101,10 @@
</section>
{/if}
<section
class="u-flex-vertical u-gap-12 web-u-padding-block-start-40 web-u-sep-block-start"
class="u-flex-vertical gap-3 web-u-padding-block-start-40 web-u-sep-block-start"
>
<h2 class="web-label web-u-color-text-primary">Follow us</h2>
<ul class="u-flex u-gap-8">
<ul class="flex gap-2">
{#each socials as social}
<li>
<a
@@ -129,11 +129,11 @@
<form
method="post"
on:submit|preventDefault={handleSubmit}
class="u-flex-vertical u-gap-16"
class="u-flex-vertical gap-4"
>
<div class="u-flex u-main-end">
<div class="flex u-main-end">
<ul
class="web-form-list is-two-columns u-gap-16 u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile"
class="web-form-list is-two-columns gap-4 u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile"
>
<li class="web-form-item">
<input
@@ -179,7 +179,7 @@
</ul>
</div>
<div
class="u-flex u-gap-16 u-main-space-between web-u-flex-vertical-reverse-mobile"
class="flex gap-4 u-main-space-between web-u-flex-vertical-reverse-mobile"
>
<p class="web-caption-400 web-u-max-width-380">
{#if error}

12
src/routes/docs/+error.svelte
View File

@@ -8,7 +8,7 @@
<Docs variant="two-side-navs">
<Sidebar />
<div
class="web-article u-flex u-main-center u-cross-center u-padding-block-16 u-max-width-700 u-margin-inline-auto"
class="web-article flex u-main-center u-cross-center u-padding-block-16 u-max-width-700 mx-auto"
>
<div class="web-container">
<div class="web-hero" style="--hero-gap:1.25rem;">
@@ -18,11 +18,15 @@
</h1>
{#if $page.status === 404}
<p class="web-description">
Sorry, it seems that the page you are looking for does not exist. Feel free to use our
navigation menu or the button below to explore more of Appwrite's documentation.
Sorry, it seems that the page you are looking for does not exist. Feel free
to use our navigation menu or the button below to explore more of Appwrite's
documentation.
</p>
{/if}
<a href="/docs" class="web-button is-secondary u-cross-child-center u-margin-block-start-12">
<a
href="/docs"
class="web-button is-secondary u-cross-child-center u-margin-block-start-12"
>
<span>Back to docs</span>
</a>
</div>

13
src/routes/docs/+page.svelte
View File

@@ -66,22 +66,19 @@
<Docs variant="default">
<Sidebar />
<main
class="web-main-section u-position-relative web-u-overflow-hidden-break1-to-break3"
id="main"
>
<div class="u-position-absolute web-u-opacity-40-mobile bg-blur">
<main class="web-main-section relative overflow-hidden-break1-to-break3" id="main">
<div class="absolute web-u-opacity-40-mobile bg-blur">
<img src="/images/bgs/docs-blur-1.svg" alt="" />
</div>
<div
class="u-position-absolute u-inset-inline-start-0 u-inset-block-start-16 web-u-opacity-40-mobile"
class="absolute u-inset-inline-start-0 u-inset-block-start-16 web-u-opacity-40-mobile"
style=" margin-inline-start: -30px;"
>
<enhanced:img src="./blur-2.png" alt="" />
</div>
<section class="web-hero is-align-start u-position-relative e-hero-docs">
<section class="web-hero is-align-start relative e-hero-docs">
<h1 class="web-display web-u-color-text-primary u-max-width-600">
Learn how to build like a team of hundreds<span class="web-u-color-text-accent"
>_
@@ -104,7 +101,7 @@
<a href="/docs/sdks" class="web-button is-secondary" style:align-self="start">
<span class="web-sub-body-500">Explore all technologies</span>
</a>
<div class="u-position-absolute web-is-not-mobile spline-wrapper">
<div class="absolute web-is-not-mobile spline-wrapper">
<img
class="u-only-dark"
src="/images/animations/tech-dark-transparent.png"

2
src/routes/docs/CodeCard.svelte
View File

@@ -17,7 +17,7 @@
<a class="web-grid-articles-item is-full-color" {href}>
<div class="web-grid-articles-item-image">
<img src={cover} alt='' loading="lazy" />
<img src={cover} alt="" loading="lazy" />
</div>
<article class="web-grid-articles-item-content">
<header class="web-articles-item-header">

2
src/routes/docs/Sidebar.svelte
View File

@@ -113,7 +113,7 @@
icon: 'icon-sparkles'
},
{
label: "The Appwriter",
label: 'The Appwriter',
href: '/docs/tooling/appwriter',
icon: 'icon-text'
}

4
src/routes/docs/advanced/security/+layout.svelte
View File

@@ -35,7 +35,7 @@
{
label: 'PCI',
href: '/docs/advanced/security/pci'
},
}
]
},
{
@@ -76,7 +76,7 @@
{
label: 'Abuse protection',
href: '/docs/advanced/security/abuse-protection'
},
}
]
}
];

2
src/routes/docs/advanced/self-hosting/+layout.svelte
View File

@@ -55,7 +55,7 @@
{
label: 'Update',
href: '/docs/advanced/self-hosting/update'
},
}
]
}
];

12
src/routes/docs/products/ai/integrations/anyscale/+page.markdoc
View File

@@ -135,7 +135,7 @@ After the `</head>` tag add a `<body>` containing the visible form:
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Prompt Anyscale Demo</h1>
<code class="u-un-break-text"></code>
@@ -153,8 +153,8 @@ After the `</head>` tag add a `<body>` containing the visible form:
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }"
>
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="card flex gap-6 u-flex-vertical">
<div class="flex u-cross-center gap-2">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -171,9 +171,9 @@ After the `</head>` tag add a `<body>` containing the visible form:
</button>
</div>
<template x-if="answer">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<div class="flex u-flex-vertical gap-3">
<div class="flex u-flex-vertical gap-3 card">
<div class="flex gap-3">
<h5 class="eyebrow-heading-2">Anyscale:</h5>
</div>

12
src/routes/docs/products/ai/integrations/elevenlabs/+page.markdoc
View File

@@ -138,7 +138,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">ElevenLabs Demo</h1>
<code class="u-un-break-text"></code>
@@ -156,8 +156,8 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', response: '', loading: false }"
>
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="card flex gap-6 u-flex-vertical">
<div class="flex u-cross-center gap-2">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -174,9 +174,9 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
</button>
</div>
<template x-if="response">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<div class="flex u-flex-vertical gap-3">
<div class="flex u-flex-vertical gap-3 card">
<div class="flex gap-3">
<h5 class="eyebrow-heading-2">Output:</h5>
</div>

14
src/routes/docs/products/ai/integrations/fal-ai/+page.markdoc
View File

@@ -135,7 +135,7 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
<main class="main-content">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16">
<div class="flex gap-4 u-flex-justify-center u-margin-block-start-16">
<h1 class="heading-level-1">fal.ai demo</h1>
<code class="u-un-break-text"></code>
</div>
@@ -147,8 +147,8 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
</div>
<div class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', result: { src: '' }, loading: false }">
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="card flex gap-6 u-flex-vertical">
<div class="flex u-cross-center gap-2">
<div class="input-text-wrapper is-with-end-button u-width-full-line">
<input x-model="prompt" type="search" placeholder="Prompt" />
<div class="icon-search" aria-hidden="true"></div>
@@ -159,9 +159,9 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
</button>
</div>
<template x-if="answer.type">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<div class="flex u-flex-vertical gap-3">
<div class="flex u-flex-vertical gap-3 card">
<div class="flex gap-3">
<h5 class="eyebrow-heading-2">Result:</h5>
</div>
<img class="u-max-width-400" x-bind:src="result.src" alt="fal.ai output" />
@@ -175,7 +175,6 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
```
This HTML form will allow users to input a prompt and generate an image using the fal.ai API. The AlpineJS script handles the form submission and display the result.
{% /section %}
{% section #step-6 step=6 title="Handle POST Request" %}
@@ -207,7 +206,6 @@ return res.json({ ok: true, src: result.images[0].url });
With the function complete, deploy it to Appwrite by pushing the changes to your repository.
Additional models can be found in the [fal.ai model catalogue](https://fal.ai/models).
{% /section %}
{% section #step-7 step=7 title="Test the function" %}

6
src/routes/docs/products/ai/integrations/langchain/+page.markdoc
View File

@@ -118,7 +118,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code>
@@ -138,7 +138,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
x-data="{ search: '', results: [ ] }"
x-init="$watch('search', async (value) => { results = await onSearch(value) })"
>
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="card flex gap-6 u-flex-vertical">
<div id="searchbox">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
@@ -147,7 +147,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="icon-search" aria-hidden="true"></div>
</div>
</div>
<div id="hits" class="u-flex u-flex-vertical u-gap-12">
<div id="hits" class="flex u-flex-vertical gap-3">
<template x-for="result in results">
<div class="card">
<pre x-text="JSON.stringify(result, null, '\t')"></pre>

23
src/routes/docs/products/ai/integrations/lmnt/+page.markdoc
View File

@@ -28,11 +28,11 @@ Head to the [Appwrite Console](https://cloud.appwrite.io/console), click on **Fu
{% /only_light %}
1. In the Appwrite Console's sidebar, click **Functions**.
2. Click **Create function**.
3. Under **Connect Git repository**, select your provider.
4. After connecting to GitHub, under **Quick start**, select the **Node.js** starter template.
5. In the **Variables** step, add `APPWRITE_BUCKET_ID`, `LMNT_API_KEY`. Generate your LMNT Key [here](https://app.lmnt.com/account). For the `APPWRITE_API_KEY`, tick the box to **Generate API key on completion**.
6. Follow the step-by-step wizard and create the Function.
1. Click **Create function**.
1. Under **Connect Git repository**, select your provider.
1. After connecting to GitHub, under **Quick start**, select the **Node.js** starter template.
1. In the **Variables** step, add `APPWRITE_BUCKET_ID`, `LMNT_API_KEY`. Generate your LMNT Key [here](https://app.lmnt.com/account). For the `APPWRITE_API_KEY`, tick the box to **Generate API key on completion**.
1. Follow the step-by-step wizard and create the Function.
{% /section %}
{% section #step-2 step=2 title="Add dependencies" %}
@@ -146,7 +146,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">LMNT Demo</h1>
<code class="u-un-break-text"></code>
@@ -164,8 +164,8 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', response: '', loading: false }"
>
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="card flex gap-6 u-flex-vertical">
<div class="flex u-cross-center gap-2">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -182,9 +182,9 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
</button>
</div>
<template x-if="response">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<div class="flex u-flex-vertical gap-3">
<div class="flex u-flex-vertical gap-3 card">
<div class="flex gap-3">
<h5 class="eyebrow-heading-2">Output:</h5>
</div>
@@ -236,7 +236,6 @@ const response = await lmnt.synthesize(req.body.text, 'lily', { format: 'mp3' })
```
This code will send the prompt to the LMNT API and return the audio as a blob. Additionally, any errors will be caught and reported for easy debugging.
{% /section %}
{% section #step-7 step=7 title="Store Audio in Appwrite Storage" %}

12
src/routes/docs/products/ai/integrations/openai/+page.markdoc
View File

@@ -135,7 +135,7 @@ After the `</head>` tag add a `<body>` containing the visible form:
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Prompt ChatGPT Demo</h1>
<code class="u-un-break-text"></code>
@@ -153,8 +153,8 @@ After the `</head>` tag add a `<body>` containing the visible form:
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }"
>
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="card flex gap-6 u-flex-vertical">
<div class="flex u-cross-center gap-2">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -171,9 +171,9 @@ After the `</head>` tag add a `<body>` containing the visible form:
</button>
</div>
<template x-if="answer">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<div class="flex u-flex-vertical gap-3">
<div class="flex u-flex-vertical gap-3 card">
<div class="flex gap-3">
<h5 class="eyebrow-heading-2">ChatGPT:</h5>
</div>

13
src/routes/docs/products/ai/integrations/perplexity/+page.markdoc
View File

@@ -82,7 +82,6 @@ export default async ({ req, res, error }) => {
}
};
```
{% /section %}
{% section #step-5 step=5 title="Create static page" %}
@@ -138,7 +137,7 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Perplexity AI Demo</h1>
<code class="u-un-break-text"></code>
@@ -156,8 +155,8 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }"
>
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8">
<div class="card flex gap-6 u-flex-vertical">
<div class="flex u-cross-center gap-2">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
>
@@ -174,9 +173,9 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
</button>
</div>
<template x-if="answer">
<div class="u-flex u-flex-vertical u-gap-12">
<div class="u-flex u-flex-vertical u-gap-12 card">
<div class="u-flex u-gap-12">
<div class="flex u-flex-vertical gap-3">
<div class="flex u-flex-vertical gap-3 card">
<div class="flex gap-3">
<h5 class="eyebrow-heading-2">Perplexity AI:</h5>
</div>

6
src/routes/docs/products/ai/integrations/pinecone/+page.markdoc
View File

@@ -119,7 +119,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code>
@@ -139,7 +139,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
x-data="{ search: '', results: [ ] }"
x-init="$watch('search', async (value) => { results = await onSearch(value) })"
>
<div class="card u-flex u-gap-24 u-flex-vertical">
<div class="card flex gap-6 u-flex-vertical">
<div id="searchbox">
<div
class="input-text-wrapper is-with-end-button u-width-full-line"
@@ -148,7 +148,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="icon-search" aria-hidden="true"></div>
</div>
</div>
<div id="hits" class="u-flex u-flex-vertical u-gap-12">
<div id="hits" class="flex u-flex-vertical gap-3">
<template x-for="result in results">
<div class="card">
<pre x-text="JSON.stringify(result, null, '\t')"></pre>

Some files were not shown because too many files have changed in this diff Show More