LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 12:57:48 +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: on:
schedule: schedule:
- cron: "0 0 * * *" # Midnight Runtime - cron: '0 0 * * *' # Midnight Runtime
jobs: jobs:
stale: stale:
@@ -13,11 +13,11 @@ jobs:
with: with:
repo-token: ${{ secrets.GITHUB_TOKEN }} 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-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-stale: 7
days-before-close: 14 days-before-close: 14
remove-stale-when-updated: true 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-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-reason: 'not_planned'
operations-per-run: 100 operations-per-run: 100
only-labels: "question" only-labels: 'question'

2
.gitpod.yml
View File

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

24
CONTENT.md
View File

@@ -129,15 +129,20 @@ Alternatively, use markdoc tables.
```md ```md
{% table %} {% 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 - Row 2 Cell 1
{% /table %} - Row 2 cell 2
{% /table %}
``` ```
#### Block Quotes #### Block Quotes
@@ -186,7 +191,9 @@ print('test');
</pre> </pre>
#### Sections #### Sections
Use sections when there is a clear step-by-step format to a page. This is used mainly in journey pages and tutorials. Use sections when there is a clear step-by-step format to a page. This is used mainly in journey pages and tutorials.
```md ```md
{% section #featured-products-1 step=1 title="Title" %} {% section #featured-products-1 step=1 title="Title" %}
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
@@ -243,6 +250,7 @@ Available sizes are `s`, `m`, `l` and `xl`. Default: `s`.
``` ```
#### Cards #### Cards
We use cards when we reference a list of links for navigation 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 #### Cards with icons
We use cards when we reference a list of links for navigation, this variation has icons for extra hints visually. 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 #### Accordions
Use accordions to reduce page size and collapse information that's not important when a reader is skilling the page. 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 ```md
# page 1 # page 1
## heading a ## heading a
## heading b ## heading b
... ...
# page 2 # page 2
## heading a ## heading a
## heading b ## heading b
... ...
# page 3 # page 3
## heading a ## heading a
## heading b ## heading b
... ...
... ...
``` ```
@@ -283,9 +289,11 @@ Like sentences, important information always comes first.
This makes it easier to scan through the page. This makes it easier to scan through the page.
✅ Clear, important information such as actions come first ✅ 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. > 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 ❌ 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! > 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**. 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", "openapi-types": "^12.1.3",
"oslllo-svg-fixer": "^3.0.0", "oslllo-svg-fixer": "^3.0.0",
"postcss": "^8.4.39", "postcss": "^8.4.39",
"prettier": "^3.3.2", "prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.5", "prettier-plugin-svelte": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.6.5", "prettier-plugin-tailwindcss": "^0.6.5",
"sass": "^1.77.6", "sass": "^1.77.6",

24
pnpm-lock.yaml generated
View File

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

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

@@ -4,11 +4,13 @@ const perPage = 100;
const outputFile = `./src/lib/contributors.ts`; const outputFile = `./src/lib/contributors.ts`;
const headers = process.env.GITHUB_TOKEN ? { const headers = process.env.GITHUB_TOKEN
? {
Authorization: `token ${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() { async function fetchRepositories() {
let page = 1; let page = 1;

4
src/app.html
View File

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

8
src/hooks.client.ts
View File

@@ -18,11 +18,13 @@ Sentry.init({
replaysOnErrorSampleRate: 1.0, replaysOnErrorSampleRate: 1.0,
// If you don't want to use Session Replay, just remove the line below: // If you don't want to use Session Replay, just remove the line below:
integrations: [replayIntegration({ integrations: [
replayIntegration({
maskAllInputs: true, maskAllInputs: true,
maskAllText: false, maskAllText: false,
blockAllMedia: false, blockAllMedia: false
})] })
]
}); });
// If you have a custom error handler, pass it to `handleErrorWithSentry` // 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, dsn: SENTRY_DSN,
tracesSampleRate: 1, tracesSampleRate: 1,
allowUrls: [/appwrite\.io/] allowUrls: [/appwrite\.io/]
}) });
const redirectMap = new Map(redirects.map(({ link, redirect }) => [link, redirect])); 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(); generateIcons();

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

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

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

@@ -247,7 +247,7 @@
Your backend, minus the hassle Your backend, minus the hassle
</h2> </h2>
<p <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={{ transition:fly={{
y: 16, y: 16,
delay: 400 delay: 400

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

@@ -54,7 +54,7 @@
out:fly={{ duration: 100, x: -16 }} out:fly={{ duration: 100, x: -16 }}
animate:flip={{ duration: 150 }} 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> <div class="avatar is-size-small">{user.avatar}</div>
<span class="truncated">{user.name}</span> <span class="truncated">{user.name}</span>
</div> </div>

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

@@ -9,7 +9,7 @@
$: controlsEnabled = $state.showControls && Object.values($state.controls).some(Boolean); $: controlsEnabled = $state.showControls && Object.values($state.controls).some(Boolean);
</script> </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="title">Create an Account</p>
<p class="subtitle">Please enter your details</p> <p class="subtitle">Please enter your details</p>
<div class="inputs"> <div class="inputs">
@@ -19,7 +19,12 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
<label for="email">Your Email</label> <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>
<fieldset> <fieldset>
<label for="password">Create Password</label> <label for="password">Create Password</label>
@@ -36,7 +41,11 @@
<span class="with-sep" transition:fade={{ duration: 100 }}>or sign up with</span> <span class="with-sep" transition:fade={{ duration: 100 }}>or sign up with</span>
<div class="oauth-btns" transition:fade={{ duration: 100 }}> <div class="oauth-btns" transition:fade={{ duration: 100 }}>
{#each objectKeys($state.controls).filter((p) => $state.controls[p]) as provider (provider)} {#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"> <div class="inner">
<span class="web-icon-{provider.toLowerCase()}" /> <span class="web-icon-{provider.toLowerCase()}" />
<span>{provider}</span> <span>{provider}</span>

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

@@ -6,7 +6,7 @@
const { state } = databasesController; const { state } = databasesController;
</script> </script>
<div data-theme-ignore class="inner-phone theme-light"> <div data-theme-ignore class="inner-phone light">
<div class="header"> <div class="header">
<p class="title">Your tasks</p> <p class="title">Your tasks</p>
<span class="icon-menu" aria-label="menu" /> <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[]; ].filter(Boolean) as Method[];
</script> </script>
<div data-theme-ignore class="inner-phone theme-light"> <div data-theme-ignore class="inner-phone light">
<div class="header"> <div class="header">
<p class="title">Upgrade plan</p> <p class="title">Upgrade plan</p>
<span class="icon-menu" aria-label="menu" /> <span class="icon-menu" aria-label="menu" />

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

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

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

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

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

@@ -43,7 +43,7 @@
</script> </script>
<div class="wrapper"> <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="header">
<div class="row"> <div class="row">
<p class="title">My Team's tasks</p> <p class="title">My Team's tasks</p>
@@ -89,7 +89,11 @@
<span class="text">New Task</span> <span class="text">New Task</span>
</button> </button>
{#each tasks as task (task.title)} {#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} {#if task.images}
<ul class="flow gap-8"> <ul class="flow gap-8">
{#each task.images as image} {#each task.images as image}
@@ -609,9 +613,13 @@
bottom: -10rem; bottom: -10rem;
background: var(--card, rgba(35, 35, 37, 0.9)); 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), box-shadow:
-8px 15px 17px 0px rgba(0, 0, 0, 0.05), -19px 34px 23px 0px rgba(0, 0, 0, 0.03), 0px 0px 0px 0px rgba(0, 0, 0, 0.06),
-33px 60px 27px 0px rgba(0, 0, 0, 0.01), -52px 94px 30px 0px rgba(0, 0, 0, 0); -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); backdrop-filter: blur(8px);
padding-block: 1.5rem; 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 safeAnimate(box, { x: 300, y: 300 }, { duration: 0 })?.finished;
await Promise.all([ 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 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; const { state } = storageController;
</script> </script>
<div data-theme-ignore class="inner-phone theme-light"> <div data-theme-ignore class="inner-phone light">
<div class="header"> <div class="header">
<p class="title">Your tasks</p> <p class="title">Your tasks</p>
<span class="icon-menu" aria-label="menu" /> <span class="icon-menu" aria-label="menu" />

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

@@ -25,34 +25,21 @@
</script> </script>
<div <div
class="scroll-indicator" class="scroll-indicator relative h-full w-px shrink-0 rounded-full"
use:rect={elRect} use:rect={elRect}
style:--y={`${y}px`} style:--y={`${y}px`}
style:--percentage={`${easedPercentage * 100}%`} style:--percentage={`${easedPercentage * 100}%`}
> >
<div class="web-dot" /> <div class="0)] absolute -top-[8px] left-1/2 translate-[-50%_var(--y," />
</div> </div>
<style lang="scss"> <style lang="scss">
.scroll-indicator { .scroll-indicator {
position: relative;
width: 1px;
flex-shrink: 0;
height: 100%;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
hsl(var(--web-color-accent)) 0%, hsl(var(--web-color-accent)) 0%,
hsl(var(--web-color-greyscale-700)) var(--percentage), hsl(var(--web-color-greyscale-700)) var(--percentage),
hsl(var(--web-color-greyscale-700)) 100% hsl(var(--web-color-greyscale-700)) 100%
); );
border-radius: 100%;
}
.web-dot {
position: absolute;
left: 50%;
translate: -50% var(--y, 0);
top: -8px;
} }
</style> </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'; import { Client, Account } from '@appwrite.io/console';
const client = new Client(); const client = new Client();
client client.setEndpoint('https://cloud.appwrite.io/v1').setProject(PUBLIC_APPWRITE_PROJECT_INIT_ID);
.setEndpoint('https://cloud.appwrite.io/v1')
.setProject(PUBLIC_APPWRITE_PROJECT_INIT_ID);
export const appwriteInit = { export const appwriteInit = {
client, client,

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

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

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

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

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

@@ -42,9 +42,9 @@
</script> </script>
<div> <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" /> <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 <button
class="web-icon-button" class="web-icon-button"
aria-label="Move carousel backward" aria-label="Move carousel backward"
@@ -108,7 +108,11 @@
&::after { &::after {
right: 0; 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 { &[data-state='end']::after {

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

@@ -49,12 +49,12 @@
<section class="web-content-footer"> <section class="web-content-footer">
<header class="web-content-footer-header u-width-full-line"> <header class="web-content-footer-header u-width-full-line">
<div <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;" 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> <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 <button
class="web-radio-button" class="web-radio-button"
aria-label="helpful" aria-label="helpful"
@@ -88,7 +88,7 @@
href="https://github.com/appwrite/website" href="https://github.com/appwrite/website"
target="_blank" target="_blank"
rel="noopener noreferrer" 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 class="icon-pencil-alt u-contents" aria-hidden="true" />
<span>Update on GitHub</span> <span>Update on GitHub</span>
@@ -104,7 +104,7 @@
class="web-card is-normal" class="web-card is-normal"
style="--card-padding:1rem" style="--card-padding:1rem"
> >
<div class="u-flex-vertical u-gap-8"> <div class="u-flex-vertical gap-2">
<label for="message"> <label for="message">
<span class="web-u-color-text-primary"> <span class="web-u-color-text-primary">
What did you {feedbackType === 'negative' ? 'dislike' : 'like'}? (optional) What did you {feedbackType === 'negative' ? 'dislike' : 'like'}? (optional)
@@ -139,7 +139,7 @@
</p> </p>
{/if} {/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)}> <button class="web-button is-text" on:click={() => (showFeedback = false)}>
<span>Cancel</span> <span>Cancel</span>
</button> </button>

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

@@ -23,7 +23,7 @@
export let images: Array<string>; export let images: Array<string>;
</script> </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} {#each headPositions as [size, top, left], i}
{@const image = clamp(0, images.length - 1, i % images.length)} {@const image = clamp(0, images.length - 1, i % images.length)}
<FloatingHead <FloatingHead
@@ -33,7 +33,7 @@
{size} {size}
/> />
<div style:margin-block-end="0" style:padding="10%"> <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> </div>
{/each} {/each}
</div> </div>

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

@@ -37,7 +37,7 @@
{ label: 'Functions', href: '/docs/products/functions' }, { label: 'Functions', href: '/docs/products/functions' },
{ label: 'Messaging', href: '/products/messaging' }, { label: 'Messaging', href: '/products/messaging' },
{ label: 'Storage', href: '/docs/products/storage' }, { label: 'Storage', href: '/docs/products/storage' },
{ label: 'Realtime', href: '/docs/apis/realtime' }, { label: 'Realtime', href: '/docs/apis/realtime' }
], ],
Learn: [ Learn: [
{ label: 'Docs', href: '/docs' }, { label: 'Docs', href: '/docs' },
@@ -92,7 +92,7 @@
<nav <nav
aria-label="Footer" 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} class:web-u-sep-block-start={!noBorder}
> >
<img class="web-logo" src="/images/logos/appwrite.svg" alt="appwrite" height="24" width="130" /> <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'; export let variant: 'homepage' | 'docs' = 'homepage';
const year = new Date().getFullYear() const year = new Date().getFullYear();
</script> </script>
{#if variant === 'homepage'} {#if variant === 'homepage'}
<footer class="web-main-footer u-position-relative u-margin-block-start-48"> <footer class="web-main-footer relative u-margin-block-start-48">
<ul class="u-flex u-gap-8"> <ul class="flex gap-2">
{#each socials as social} {#each socials as social}
<li> <li>
<a <a
@@ -24,8 +24,8 @@
</li> </li>
{/each} {/each}
</ul> </ul>
<div class="u-flex u-gap-16"> <div class="flex gap-4">
<ul class="u-flex u-gap-8"> <ul class="flex gap-2">
<li><a class="web-link" href="/terms">Terms</a></li> <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="/privacy">Privacy</a></li>
<li><a class="web-link" href="/cookies">Cookies</a></li> <li><a class="web-link" href="/cookies">Cookies</a></li>
@@ -34,11 +34,9 @@
</div> </div>
</footer> </footer>
{:else if variant === 'docs'} {:else if variant === 'docs'}
<footer <footer class="web-main-footer is-with-bg-color u-margin-block-start-32 u-small relative">
class="web-main-footer is-with-bg-color u-margin-block-start-32 u-small u-position-relative"
>
<div class="web-main-footer-grid-1"> <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} {#each socials as social}
<li> <li>
<a <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}> <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="web-side-nav-wrapper web-u-padding-inline-16">
<div class="u-flex items-center u-gap-8"> <div class="flex items-center gap-2">
<a href="https://cloud.appwrite.io/register" class="web-button is-secondary web-u-flex-1"> <a
href="https://cloud.appwrite.io/register"
class="web-button is-secondary web-u-flex-1"
>
Sign up Sign up
</a> </a>
<IsLoggedIn classes="web-u-flex-1" /> <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-1">
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="web-container"> <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="">
<div class="web-u-max-inline-size-none-mobile" class:web-u-max-width-380={!submitted}> <div
<section class="u-flex-vertical web-u-gap-20"> class="web-u-max-inline-size-none-mobile"
<h1 class="web-title web-u-color-text-primary">Subscribe to our newsletter</h1> 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"> <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 Sign up to our company blog and get the latest insights from
about engineering, product design, building community, and tips & tricks for using Appwrite. Learn more about engineering, product design, building
Appwrite. community, and tips & tricks for using Appwrite.
</p> </p>
</section> </section>
</div> </div>
</div> </div>
{#if submitted} {#if submitted}
<div class="u-flex u-gap-8 u-cross-center"> <div class="flex gap-2 u-cross-center">
<svg <svg
width="18" width="18"
height="18" height="18"
@@ -130,8 +135,12 @@
</span> </span>
</div> </div>
{:else} {:else}
<form method="post" on:submit|preventDefault={submit} class="u-flex-vertical u-gap-16"> <form
<div class="u-flex u-flex-vertical u-gap-4"> 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> <label for="name">Your name</label>
<input <input
class="web-input-text" class="web-input-text"
@@ -143,7 +152,7 @@
bind:value={name} bind:value={name}
/> />
</div> </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> <label for="email">Your email</label>
<input <input
class="web-input-text" class="web-input-text"
@@ -155,9 +164,13 @@
bind:value={email} bind:value={email}
/> />
</div> </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} {#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} {/if}
</form> </form>
{/if} {/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" /> <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"> <div class="grid grid-cols-2 gap-8 web-u-row-gap-80 relative">
<section class="web-hero u-flex web-u-row-gap-32 u-main-center u-cross-center"> <section class="web-hero 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"> <h2 class="web-display u-max-width-500 text-center web-u-color-text-primary">
Start building today Start building today
</h2> </h2>
<a <a
@@ -16,7 +16,7 @@
</a> </a>
</section> </section>
<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"> <header class="web-strip-plans-header">
<div class="web-strip-plans-header-wrapper web-u-row-gap-24"> <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 { function createHref(hit: Hit<Props>): string {
const anchor = hit.anchor === '#' ? '' : hit.anchor ?? ''; const anchor = hit.anchor === '#' ? '' : (hit.anchor ?? '');
const target = hit.url + anchor; const target = hit.url + anchor;
return target.toString(); return target.toString();
@@ -147,7 +147,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div <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} data-visible={open ? true : undefined}
style:z-index="100" style:z-index="100"
style:background="hsl(var(--web-color-black) / 0.3)" style:background="hsl(var(--web-color-black) / 0.3)"
@@ -159,15 +159,11 @@
<div <div
class="web-input-text-search-wrapper web-u-max-width-680 web-u-margin-inline-20 u-width-full-line" class="web-input-text-search-wrapper web-u-max-width-680 web-u-margin-inline-20 u-width-full-line"
> >
<span <span class="web-icon-search z-[5]" aria-hidden="true" style="inset-block-start:0.9rem" />
class="web-icon-search u-z-index-5"
aria-hidden="true"
style="inset-block-start:0.9rem"
/>
<div id="searchbox" /> <div id="searchbox" />
<input <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" type="text"
id="search" id="search"
bind:value bind:value
@@ -184,7 +180,7 @@
}} }}
/> />
<div <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} use:melt={$menu}
style="--card-padding-mobile:1rem; border-radius:0 0 0.5rem 0.5rem;" style="--card-padding-mobile:1rem; border-radius:0 0 0.5rem 0.5rem;"
> >
@@ -192,15 +188,15 @@
<section> <section>
{#if results.length > 0} {#if results.length > 0}
<h6 class="web-eyebrow">{results.length} results found</h6> <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)} {#each results as hit, i (hit.uid)}
{@const relevantSubtitle = getRelevantSubtitle(hit)} {@const relevantSubtitle = getRelevantSubtitle(hit)}
<li> <li>
<a <a
data-hit={i} data-hit={i}
href={createHref(hit)} href={createHref(hit)}
class="web-button web-caption-400 is-text u-flex-vertical u-gap-8 u-min-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-u-padding-block-8 web-padding-inline-12 web-u-cross-start u-max-width-100-percent" web-padding-inline-12 web-u-cross-start u-max-width-100-percent gap-2"
use:melt={$option({ use:melt={$option({
value: hit, value: hit,
label: hit.title ?? i.toString() label: hit.title ?? i.toString()
@@ -216,9 +212,7 @@
{/if} {/if}
</div> </div>
{#if hit.p} {#if hit.p}
<div <div class="web-u-color-text-secondary web-u-trim-1">
class="web-u-color-text-secondary web-u-trim-1"
>
{hit.p} {hit.p}
</div> </div>
{/if} {/if}
@@ -235,7 +229,7 @@
{/if} {/if}
<section> <section>
<h6 class="web-eyebrow">Recommended</h6> <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)} {#each recommended as hit, i (hit.uid)}
{@const index = i + (results.length ? results.length : 0)} {@const index = i + (results.length ? results.length : 0)}
<li> <li>
@@ -246,7 +240,7 @@
value: hit, value: hit,
label: hit.title ?? i.toString() 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"> <div class="web-u-trim-1">
<span class="web-u-color-text-secondary">{hit.h1}</span> <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} {#each groups as group}
{@const isDefault = group.label === DEFAULT_GROUP} {@const isDefault = group.label === DEFAULT_GROUP}
{#if isDefault} {#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} {#each group.options as option}
<button class="web-select-option" use:melt={$optionEl(option)}> <button class="web-select-option" use:melt={$optionEl(option)}>
{#if option.icon} {#if option.icon}

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

@@ -57,8 +57,7 @@
name: 'React Native', name: 'React Native',
href: '/docs/quick-starts/react-native', href: '/docs/quick-starts/react-native',
image: `/images/platforms/${$themeInUse}/react-native.svg` image: `/images/platforms/${$themeInUse}/react-native.svg`
}, }
] as Array<{ ] as Array<{
name: string; name: string;
href: string; href: string;
@@ -66,12 +65,17 @@
}>; }>;
</script> </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} {#each platforms as platform}
<Tooltip> <Tooltip>
<li> <li>
<a href={platform.href} class="web-icon-button web-box-icon has-border-gradient"> <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> </a>
</li> </li>
<svelte:fragment slot="tooltip">{platform.name}</svelte:fragment> <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}> <aside class="web-grid-120-1fr-auto-side" class:web-is-mobile-closed={!showToc}>
<div class="web-page-steps"> <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"> <span class="web-page-steps-location-button">
<svg <svg
xmlns="http://www.w3.org/2000/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 GITHUB_STARS = '41.9K';
export const BANNER_KEY = 'discord-banner-01'; // Change key to force banner to show again 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: * History:

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

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

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

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

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

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

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

@@ -68,7 +68,7 @@
} }
function getVisibleTheme() { function getVisibleTheme() {
const themes = Array.from(document.querySelectorAll('.theme-dark, .theme-light')).filter( const themes = Array.from(document.querySelectorAll('.theme-dark, .light')).filter(
(element) => { (element) => {
const { classList, dataset } = element as HTMLElement; const { classList, dataset } = element as HTMLElement;
if ( if (
@@ -85,7 +85,7 @@
for (const theme of themes) { for (const theme of themes) {
if (isInViewport(theme)) { if (isInViewport(theme)) {
return theme.classList.contains('theme-light') ? 'light' : 'dark'; return theme.classList.contains('light') ? 'light' : 'dark';
} }
} }
@@ -144,7 +144,7 @@
}; };
</script> </script>
<div class="u-position-relative"> <div class="relative">
<section <section
class="web-mobile-header theme-{resolvedTheme}" class="web-mobile-header theme-{resolvedTheme}"
class:is-transparent={browser && !$isMobileNavOpen} 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"> <a href={parent.href} aria-label="go back">
<span class="icon-cheveron-left" aria-hidden="true" /> <span class="icon-cheveron-left" aria-hidden="true" />
</a> </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> </section>
{/if} {/if}
{#each navigation as navGroup} {#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_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 { export function buildOpenGraphImage(title: string, description: string): string {
return `https://og.appwrite.global/image.png?title=${encodeURIComponent( return `https://og.appwrite.global/image.png?title=${encodeURIComponent(
title title

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

@@ -2,7 +2,16 @@ import { writable } from 'svelte/store';
import type { Language } from './code'; import type { Language } from './code';
import { browser } from '$app/environment'; 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]; export type Version = (typeof allVersions)[number];
@@ -20,7 +29,7 @@ export enum Service {
Locale = 'locale', Locale = 'locale',
Storage = 'storage', Storage = 'storage',
Teams = 'teams', Teams = 'teams',
Users = 'users', Users = 'users'
} }
export enum Platform { export enum Platform {
@@ -114,7 +123,7 @@ export const serviceMap: Record<Service, string> = {
[Service.Locale]: 'Locale', [Service.Locale]: 'Locale',
[Service.Storage]: 'Storage', [Service.Storage]: 'Storage',
[Service.Teams]: 'Teams', [Service.Teams]: 'Teams',
[Service.Users]: 'Users', [Service.Users]: 'Users'
}; };
export const preferredVersion = writable<Version | null>( 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) { if (schema) {
return 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( const specs = import.meta.glob(
'$appwrite/app/config/specs/open-api3*-(client|server|console).json', '$appwrite/app/config/specs/open-api3*-(client|server|console).json',
@@ -354,15 +355,18 @@ export function resolveReference(
throw new Error("Schema doesn't exist"); throw new Error("Schema doesn't exist");
} }
export const generateExample = (schema: OpenAPIV3.SchemaObject, api: OpenAPIV3.Document<{}>, modelType: ModelType = ModelType.REST): Object => { export const generateExample = (
schema: OpenAPIV3.SchemaObject,
const properties = Object.keys(schema.properties ?? {}).map((key) =>{ api: OpenAPIV3.Document<{}>,
modelType: ModelType = ModelType.REST
): Object => {
const properties = Object.keys(schema.properties ?? {}).map((key) => {
const name = key; const name = key;
const fields = schema.properties?.[key]; const fields = schema.properties?.[key];
return { return {
name, name,
...fields ...fields
} };
}); });
const example = properties.reduce((carry, currentValue) => { const example = properties.reduce((carry, currentValue) => {
@@ -382,17 +386,20 @@ export const generateExample = (schema: OpenAPIV3.SchemaObject, api: OpenAPIV3.D
if (property.type === 'array') { if (property.type === 'array') {
// If it's an array type containing primatives // If it's an array type containing primatives
if (property.items?.type){ if (property.items?.type) {
return { return {
...carry, ...carry,
[propertyName]: property['x-example'] [propertyName]: property['x-example']
} };
} }
if (property.items && 'anyOf' in property.items) { if (property.items && 'anyOf' in property.items) {
// default to first child type if multiple available // default to first child type if multiple available
const firstSchema = (property.items as unknown as AppwriteSchemaObject)?.anyOf?.[0]; 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 { return {
...carry, ...carry,
@@ -401,37 +408,43 @@ export const generateExample = (schema: OpenAPIV3.SchemaObject, api: OpenAPIV3.D
} }
// if an array of objects without child types // 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 { return {
...carry, ...carry,
[propertyName]: [generateExample(schema, api, modelType)] [propertyName]: [generateExample(schema, api, modelType)]
} };
} }
// If it's an object type, but not in an array. // If it's an object type, but not in an array.
if (property.type === 'object') { if (property.type === 'object') {
if (property.items?.oneOf){ if (property.items?.oneOf) {
// default to first child type if multiple available // 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 { return {
...carry, ...carry,
[propertyName]: generateExample(schema, api, modelType) [propertyName]: generateExample(schema, api, modelType)
} };
} }
if (property.items){ if (property.items) {
const schema = getSchema(getIdFromReference(property.items), api); const schema = getSchema(getIdFromReference(property.items), api);
return { return {
...carry, ...carry,
[propertyName]: generateExample(schema, api, modelType) [propertyName]: generateExample(schema, api, modelType)
} };
} }
} }
return { return {
...carry, ...carry,
[propertyName]: property['x-example'] [propertyName]: property['x-example']
} };
}, {}); }, {});
return example; return example;
} };

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

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

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

@@ -53,7 +53,7 @@
</div> </div>
<!-- <div class="web-input-text-search-wrapper u-inline-width-100-percent-mobile"> <!-- <div class="web-input-text-search-wrapper u-inline-width-100-percent-mobile">
<span class="icon-search" aria-hidden="true" /> <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> </div>
@@ -76,7 +76,7 @@
</ul> </ul>
</div> </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"> <div class="web-container">
<FooterNav /> <FooterNav />

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

@@ -72,7 +72,7 @@
<h1 class="web-title web-u-color-text-primary">{title}</h1> <h1 class="web-title web-u-color-text-primary">{title}</h1>
</header> </header>
<button <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 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" u-margin-block-start-24 web-u-sep-block web-u-filter-blur-8"
style:--inset-block-start="4.5rem" style:--inset-block-start="4.5rem"

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

@@ -88,10 +88,7 @@
{/if} {/if}
{#if authorData} {#if authorData}
<div class="web-author u-margin-block-start-16"> <div class="web-author u-margin-block-start-16">
<a <a href={authorData.href} class="flex u-cross-center gap-2">
href={authorData.href}
class="u-flex u-cross-center u-gap-8"
>
{#if authorData.avatar} {#if authorData.avatar}
<img <img
class="web-author-image" class="web-author-image"
@@ -103,13 +100,15 @@
/> />
{/if} {/if}
<div class="u-flex-vertical"> <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} {authorData.name}
</h4> </h4>
<p class="web-caption-400">{authorData.role}</p> <p class="web-caption-400">{authorData.role}</p>
</div> </div>
</a> </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} {#if authorData.twitter}
<li> <li>
<a <a
@@ -155,7 +154,7 @@
</header> </header>
{#if cover} {#if cover}
<div class="web-media-container"> <div class="web-media-container">
<Media class="u-block" src={cover} /> <Media class="block" src={cover} />
</div> </div>
{/if} {/if}
@@ -164,7 +163,7 @@
</div> </div>
</article> </article>
<!-- {#if categories?.length} <!-- {#if categories?.length}
<div class="u-flex u-gap-16"> <div class="flex gap-4">
{#each categories as cat} {#each categories as cat}
<a href={cat.href} class="web-tag">{cat.name}</a> <a href={cat.href} class="web-tag">{cat.name}</a>
{/each} {/each}
@@ -200,7 +199,7 @@
</section> </section>
</div> </div>
</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"> <div class="web-container">
<Newsletter /> <Newsletter />
<FooterNav /> <FooterNav />

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

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

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

@@ -65,13 +65,13 @@
<header class="web-code-snippet-header"> <header class="web-code-snippet-header">
<div class="web-code-snippet-header-start"> <div class="web-code-snippet-header-start">
{#if badgeValue} {#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 class="web-tag"><span class="text">{badgeValue}</span></div>
</div> </div>
{/if} {/if}
</div> </div>
<div class="web-code-snippet-header-end"> <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"> <li class="buttons-list-item web-u-padding-inline-start-20">
<Tooltip> <Tooltip>
<button <button

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

@@ -10,12 +10,9 @@
<li> <li>
<a {href} class="web-card is-normal" style:margin-block-end="0"> <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} {#if icon}
<span <span class="{icon} web-u-font-size-24" aria-hidden="true" />
class="{icon} web-u-font-size-24"
aria-hidden="true"
/>
{/if} {/if}
<h4 class="web-sub-body-500 web-u-color-text-primary"> <h4 class="web-sub-body-500 web-u-color-text-primary">
{title} {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"> <section class="theme-dark web-code-snippet" aria-label="code-snippet panel">
<header class="web-code-snippet-header"> <header class="web-code-snippet-header">
<div class="web-code-snippet-header-start"> <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 class="web-tag"><span class="text">Default</span></div> -->
</div> </div>
</div> </div>
<div class="web-code-snippet-header-end"> <div class="web-code-snippet-header-end">
<ul class="buttons-list u-flex u-gap-12"> <ul class="buttons-list flex gap-3">
<li class="buttons-list-item u-flex u-cross-child-scenter"> <li class="buttons-list-item flex u-cross-child-scenter">
<Select <Select
bind:value={$selected} bind:value={$selected}
options={Array.from($snippets).map((language) => ({ options={Array.from($snippets).map((language) => ({

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

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

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

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

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

@@ -1,4 +1,3 @@
{% info title="Account vs Users API" %} {% 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. 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). 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 %} {% table %}
* Name
* Description - Name
- Description
--- ---
* `teams.*`
* - `teams.*`
This event triggers on any teams event. - This event triggers on any teams event.
Returns [Team Object](/docs/references/cloud/models/team) Returns [Team Object](/docs/references/cloud/models/team)
--- ---
* `teams.*.create`
* - `teams.*.create`
This event triggers when a team is created. - This event triggers when a team is created.
Returns [Team Object](/docs/references/cloud/models/team) Returns [Team Object](/docs/references/cloud/models/team)
--- ---
* `teams.*.delete`
* - `teams.*.delete`
This event triggers when a team is deleted. - This event triggers when a team is deleted.
Returns [Team Object](/docs/references/cloud/models/team) Returns [Team Object](/docs/references/cloud/models/team)
--- ---
* `teams.*.memberships.*`
* - `teams.*.memberships.*`
This event triggers on any team memberships event. - This event triggers on any team memberships event.
Returns [Membership Object](/docs/references/cloud/models/membership) Returns [Membership Object](/docs/references/cloud/models/membership)
--- ---
* `teams.*.memberships.*.create`
* - `teams.*.memberships.*.create`
This event triggers when a membership is created. - This event triggers when a membership is created.
Returns [Membership Object](/docs/references/cloud/models/membership) Returns [Membership Object](/docs/references/cloud/models/membership)
--- ---
* `teams.*.memberships.*.delete`
* - `teams.*.memberships.*.delete`
This event triggers when a membership is deleted. - This event triggers when a membership is deleted.
Returns [Membership Object](/docs/references/cloud/models/membership) Returns [Membership Object](/docs/references/cloud/models/membership)
--- ---
* `teams.*.memberships.*.update`
* - `teams.*.memberships.*.update`
This event triggers when a membership is updated. - This event triggers when a membership is updated.
Returns [Membership Object](/docs/references/cloud/models/membership) Returns [Membership Object](/docs/references/cloud/models/membership)
--- ---
* `teams.*.memberships.*.update.status`
* - `teams.*.memberships.*.update.status`
This event triggers when a team memberships status is updated. - This event triggers when a team memberships status is updated.
Returns [Membership Object](/docs/references/cloud/models/membership) Returns [Membership Object](/docs/references/cloud/models/membership)
--- ---
* `teams.*.update`
* - `teams.*.update`
This event triggers when a team is updated. - This event triggers when a team is updated.
Returns [Team Object](/docs/references/cloud/models/team) Returns [Team Object](/docs/references/cloud/models/team)
--- ---
* `teams.*.update.prefs`
* - `teams.*.update.prefs`
This event triggers when a team's preferences are updated. - This event triggers when a team's preferences are updated.
Returns [Team Object](/docs/references/cloud/models/team) Returns [Team Object](/docs/references/cloud/models/team)
--- ---
* `users.*`
* - `users.*`
This event triggers on any user's event. - This event triggers on any user's event.
Returns [User Object](/docs/references/cloud/models/user) Returns [User Object](/docs/references/cloud/models/user)
--- ---
* `users.*.create`
* - `users.*.create`
This event triggers when a user is created. - This event triggers when a user is created.
Returns [User Object](/docs/references/cloud/models/user) Returns [User Object](/docs/references/cloud/models/user)
--- ---
* `users.*.delete`
* - `users.*.delete`
This event triggers when a user is deleted. - This event triggers when a user is deleted.
Returns [User Object](/docs/references/cloud/models/user) Returns [User Object](/docs/references/cloud/models/user)
--- ---
* `users.*.recovery.*`
* - `users.*.recovery.*`
This event triggers on any user's recovery token event. - This event triggers on any user's recovery token event.
Returns [Token Object](/docs/references/cloud/models/token) Returns [Token Object](/docs/references/cloud/models/token)
--- ---
* `users.*.recovery.*.create`
* - `users.*.recovery.*.create`
This event triggers when a recovery token for a user is created. - This event triggers when a recovery token for a user is created.
Returns [Token Object](/docs/references/cloud/models/token) Returns [Token Object](/docs/references/cloud/models/token)
--- ---
* `users.*.recovery.*.update`
* - `users.*.recovery.*.update`
This event triggers when a recovery token for a user is validated. - This event triggers when a recovery token for a user is validated.
Returns [Token Object](/docs/references/cloud/models/token) Returns [Token Object](/docs/references/cloud/models/token)
--- ---
* `users.*.sessions.*`
* - `users.*.sessions.*`
This event triggers on any user's sessions event. - This event triggers on any user's sessions event.
Returns [Session Object](/docs/references/cloud/models/session) Returns [Session Object](/docs/references/cloud/models/session)
--- ---
* `users.*.sessions.*.create`
* - `users.*.sessions.*.create`
This event triggers when a session for a user is created. - This event triggers when a session for a user is created.
Returns [Session Object](/docs/references/cloud/models/session) Returns [Session Object](/docs/references/cloud/models/session)
--- ---
* `users.*.sessions.*.delete`
* - `users.*.sessions.*.delete`
This event triggers when a session for a user is deleted. - This event triggers when a session for a user is deleted.
Returns [Session Object](/docs/references/cloud/models/session) Returns [Session Object](/docs/references/cloud/models/session)
--- ---
* `users.*.update`
* - `users.*.update`
This event triggers when a user is updated. - This event triggers when a user is updated.
Returns [User Object](/docs/references/cloud/models/user) Returns [User Object](/docs/references/cloud/models/user)
--- ---
* `users.*.update.email`
* - `users.*.update.email`
This event triggers when a user's email address is updated. - This event triggers when a user's email address is updated.
Returns [User Object](/docs/references/cloud/models/user) Returns [User Object](/docs/references/cloud/models/user)
--- ---
* `users.*.update.name`
* - `users.*.update.name`
This event triggers when a user's name is updated. - This event triggers when a user's name is updated.
Returns [User Object](/docs/references/cloud/models/user) Returns [User Object](/docs/references/cloud/models/user)
--- ---
* `users.*.update.password`
* - `users.*.update.password`
This event triggers when a user's password is updated. - This event triggers when a user's password is updated.
Returns [User Object](/docs/references/cloud/models/user) Returns [User Object](/docs/references/cloud/models/user)
--- ---
* `users.*.update.prefs`
* - `users.*.update.prefs`
This event triggers when a user's preferences is updated. - This event triggers when a user's preferences is updated.
Returns [User Object](/docs/references/cloud/models/user) Returns [User Object](/docs/references/cloud/models/user)
--- ---
* `users.*.update.status`
* - `users.*.update.status`
This event triggers when a user's status is updated. - This event triggers when a user's status is updated.
Returns [User Object](/docs/references/cloud/models/user) Returns [User Object](/docs/references/cloud/models/user)
--- ---
* `users.*.verification.*`
* - `users.*.verification.*`
This event triggers on any user's verification token event. - This event triggers on any user's verification token event.
Returns [Token Object](/docs/references/cloud/models/token) Returns [Token Object](/docs/references/cloud/models/token)
--- ---
* `users.*.verification.*.create`
* - `users.*.verification.*.create`
This event triggers when a verification token for a user is created. - This event triggers when a verification token for a user is created.
Returns [Token Object](/docs/references/cloud/models/token) Returns [Token Object](/docs/references/cloud/models/token)
--- ---
* `users.*.verification.*.update`
* - `users.*.verification.*.update`
This event triggers when a verification token for a user is validated. - This event triggers when a verification token for a user is validated.
Returns [Token Object](/docs/references/cloud/models/token) 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 dictionary can be enabled in the Auth service's **Security** tab on the Appwrite Console.
# Password hashing {% #password-hashing %} # Password hashing {% #password-hashing %}
Appwrite protects passwords by using the [Argon2](https://github.com/P-H-C/phc-winner-argon2) password-hashing algorithm. 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/). 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 %} {% table %}
* Name
* Description - Name
- Description
--- ---
* `databases.*`
* - `databases.*`
This event triggers on any database event. - This event triggers on any database event.
Returns [Database Object](/docs/references/cloud/models/database) Returns [Database Object](/docs/references/cloud/models/database)
--- ---
* `databases.*.collections.*`
* - `databases.*.collections.*`
This event triggers on any collection event. - This event triggers on any collection event.
Returns [Collection Object](/docs/references/cloud/models/collection) Returns [Collection Object](/docs/references/cloud/models/collection)
--- ---
* `databases.*.collections.*.attributes.*`
* - `databases.*.collections.*.attributes.*`
This event triggers on any attributes event. - This event triggers on any attributes event.
Returns [Attribute Object](/docs/references/cloud/models/attributeList) Returns [Attribute Object](/docs/references/cloud/models/attributeList)
--- ---
* `databases.*.collections.*.attributes.*.create`
* - `databases.*.collections.*.attributes.*.create`
This event triggers when an attribute is created. - This event triggers when an attribute is created.
Returns [Attribute Object](/docs/references/cloud/models/attributeList) Returns [Attribute Object](/docs/references/cloud/models/attributeList)
--- ---
* `databases.*.collections.*.attributes.*.delete`
* - `databases.*.collections.*.attributes.*.delete`
This event triggers when an attribute is deleted. - This event triggers when an attribute is deleted.
Returns [Attribute Object](/docs/references/cloud/models/attributeList) Returns [Attribute Object](/docs/references/cloud/models/attributeList)
--- ---
* `databases.*.collections.*.create`
* - `databases.*.collections.*.create`
This event triggers when a collection is created. - This event triggers when a collection is created.
Returns [Collection Object](/docs/references/cloud/models/collection) Returns [Collection Object](/docs/references/cloud/models/collection)
--- ---
* `databases.*.collections.*.delete`
* - `databases.*.collections.*.delete`
This event triggers when a collection is deleted. - This event triggers when a collection is deleted.
Returns [Collection Object](/docs/references/cloud/models/collection) Returns [Collection Object](/docs/references/cloud/models/collection)
--- ---
* `databases.*.collections.*.documents.*`
* - `databases.*.collections.*.documents.*`
This event triggers on any documents event. - This event triggers on any documents event.
Returns [Document Object](/docs/references/cloud/models/document) Returns [Document Object](/docs/references/cloud/models/document)
--- ---
* `databases.*.collections.*.documents.*.create`
* - `databases.*.collections.*.documents.*.create`
This event triggers when a document is created. - This event triggers when a document is created.
Returns [Document Object](/docs/references/cloud/models/document) Returns [Document Object](/docs/references/cloud/models/document)
--- ---
* `databases.*.collections.*.documents.*.delete`
* - `databases.*.collections.*.documents.*.delete`
This event triggers when a document is deleted. - This event triggers when a document is deleted.
Returns [Document Object](/docs/references/cloud/models/document) Returns [Document Object](/docs/references/cloud/models/document)
--- ---
* `databases.*.collections.*.documents.*.update`
* - `databases.*.collections.*.documents.*.update`
This event triggers when a document is updated. - This event triggers when a document is updated.
Returns [Document Object](/docs/references/cloud/models/document) Returns [Document Object](/docs/references/cloud/models/document)
--- ---
* `databases.*.collections.*.indexes.*`
* - `databases.*.collections.*.indexes.*`
This event triggers on any indexes event. - This event triggers on any indexes event.
Returns [Index Object](/docs/references/cloud/models/index) Returns [Index Object](/docs/references/cloud/models/index)
--- ---
* `databases.*.collections.*.indexes.*.create`
* - `databases.*.collections.*.indexes.*.create`
This event triggers when an index is created. - This event triggers when an index is created.
Returns [Index Object](/docs/references/cloud/models/index) Returns [Index Object](/docs/references/cloud/models/index)
--- ---
* `databases.*.collections.*.indexes.*.delete`
* - `databases.*.collections.*.indexes.*.delete`
This event triggers when an index is deleted. - This event triggers when an index is deleted.
Returns [Index Object](/docs/references/cloud/models/index) Returns [Index Object](/docs/references/cloud/models/index)
--- ---
* `databases.*.collections.*.update`
* - `databases.*.collections.*.update`
This event triggers when a collection is updated. - This event triggers when a collection is updated.
Returns [Collection Object](/docs/references/cloud/models/collection) Returns [Collection Object](/docs/references/cloud/models/collection)
--- ---
* `databases.*.create`
* - `databases.*.create`
This event triggers when a database is created. - This event triggers when a database is created.
Returns [Database Object](/docs/references/cloud/models/database) Returns [Database Object](/docs/references/cloud/models/database)
--- ---
* `databases.*.delete`
* - `databases.*.delete`
This event triggers when a database is deleted. - This event triggers when a database is deleted.
Returns [Database Object](/docs/references/cloud/models/database) Returns [Database Object](/docs/references/cloud/models/database)
--- ---
* `databases.*.update`
* - `databases.*.update`
This event triggers when a database is updated. - This event triggers when a database is updated.
Returns [Database Object](/docs/references/cloud/models/database){% /table %} Returns [Database Object](/docs/references/cloud/models/database){% /table %}

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

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

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

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

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

@@ -1,44 +1,53 @@
{% table %} {% table %}
* Name
* Description - Name
- Description
--- ---
* `buckets.*`
* - `buckets.*`
This event triggers on any buckets event. - This event triggers on any buckets event.
Returns [Bucket Object](/docs/references/cloud/models/bucket) Returns [Bucket Object](/docs/references/cloud/models/bucket)
--- ---
* `buckets.*.create`
* - `buckets.*.create`
This event triggers when a bucket is created. - This event triggers when a bucket is created.
Returns [Bucket Object](/docs/references/cloud/models/bucket) Returns [Bucket Object](/docs/references/cloud/models/bucket)
--- ---
* `buckets.*.delete`
* - `buckets.*.delete`
This event triggers when a bucket is deleted. - This event triggers when a bucket is deleted.
Returns [Bucket Object](/docs/references/cloud/models/bucket) Returns [Bucket Object](/docs/references/cloud/models/bucket)
--- ---
* `buckets.*.files.*`
* - `buckets.*.files.*`
This event triggers on any files event. - This event triggers on any files event.
Returns [File Object](/docs/references/cloud/models/file) Returns [File Object](/docs/references/cloud/models/file)
--- ---
* `buckets.*.files.*.create`
* - `buckets.*.files.*.create`
This event triggers when a file is created. - This event triggers when a file is created.
Returns [File Object](/docs/references/cloud/models/file) Returns [File Object](/docs/references/cloud/models/file)
--- ---
* `buckets.*.files.*.delete`
* - `buckets.*.files.*.delete`
This event triggers when a file is deleted. - This event triggers when a file is deleted.
Returns [File Object](/docs/references/cloud/models/file) Returns [File Object](/docs/references/cloud/models/file)
--- ---
* `buckets.*.files.*.update`
* - `buckets.*.files.*.update`
This event triggers when a file is updated. - This event triggers when a file is updated.
Returns [File Object](/docs/references/cloud/models/file) Returns [File Object](/docs/references/cloud/models/file)
--- ---
* `buckets.*.update`
* - `buckets.*.update`
This event triggers when a bucket is updated. - This event triggers when a bucket is updated.
Returns [Bucket Object](/docs/references/cloud/models/bucket) 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" %} {% 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. 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 ```sh
docker compose up -d docker compose up -d
``` ```
You can verify if the changes have been successfully applied by running this command: You can verify if the changes have been successfully applied by running this command:
```sh ```sh
docker compose exec appwrite vars docker compose exec appwrite vars
``` ```
{% /info %} {% /info %}

12
src/routes/+error.svelte
View File

@@ -21,17 +21,21 @@
</h1> </h1>
{#if $page.status === 404} {#if $page.status === 404}
<p class="web-description"> <p class="web-description">
Sorry, it seems that the page you are looking for does not exist. Feel free to use Sorry, it seems that the page you are looking for does not exist.
our navigation menu or the button below to explore more of Appwrite's documentation. Feel free to use our navigation menu or the button below to explore
more of Appwrite's documentation.
</p> </p>
{/if} {/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> <span>Back to homepage</span>
</a> </a>
</div> </div>
</div> </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"> <div class="web-container">
<FooterNav /> <FooterNav />
<MainFooter /> <MainFooter />

2
src/routes/+layout.svelte
View File

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

38
src/routes/+page.svelte
View File

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

10
src/routes/DeveloperCard.svelte
View File

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

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

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

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

@@ -32,9 +32,9 @@
<Main> <Main>
<div class="web-big-padding-section" style:overflow-x="hidden"> <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 <div
class="u-position-absolute" class="absolute"
style="pointer-events:none;inset-inline-start:0; inset-block-end:0;" style="pointer-events:none;inset-inline-start:0; inset-block-end:0;"
> >
<svg <svg
@@ -90,14 +90,21 @@
</svg> </svg>
</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"> <div class="web-container">
<h1 class="web-display web-u-color-text-primary">Blog</h1> <h1 class="web-display web-u-color-text-primary">Blog</h1>
{#if featured} {#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"> <article class="web-feature-article u-margin-block-start-48">
<a href={featured.href} class="web-feature-article-image"> <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> </a>
<div class="web-feature-article-content"> <div class="web-feature-article-content">
<header class="web-feature-article-header"> <header class="web-feature-article-header">
@@ -114,7 +121,7 @@
{featured.description} {featured.description}
</p> </p>
<div class="web-author"> <div class="web-author">
<div class="u-flex u-cross-center u-gap-8"> <div class="flex u-cross-center gap-2">
<img <img
class="web-author-image" class="web-author-image"
src={author?.avatar} src={author?.avatar}
@@ -128,7 +135,9 @@
>{author?.name}</a >{author?.name}</a
> >
<p class="web-caption-400 u-hide">{author?.bio}</p> <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> <li>{featured.timeToRead} min</li>
</ul> </ul>
</div> </div>

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

@@ -1,7 +1,6 @@
import { base } from '$app/paths'; import { base } from '$app/paths';
import type { AuthorData, PostsData } from './content'; import type { AuthorData, PostsData } from './content';
export function load() { export function load() {
const postsGlob = import.meta.glob('./post/**/*.markdoc', { const postsGlob = import.meta.glob('./post/**/*.markdoc', {
eager: true 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**: Each collection contained two **attributes**:
| Key | Type | Size | Required | | Key | Type | Size | Required |
| --- | --- | --- | --- | | ----------- | ----------- | ----------- | ----------- |
| discordName | String | 255 | Yes | | discordName | String | 255 | Yes |
| email | Email | - | 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. 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 | | Key | Type | Attribute | Order |
| --- | --- | --- | --- | | ----------- | ----------- | ----------- | ----------- |
| names | unique | discordName | ASC | | 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. 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 | | Role | Create | Read | Update | Delete |
| --- | --- | --- | --- | --- | | ------ | ------ | ------ | ------ | ------ |
| Any | | Yes | | | | Any | | Yes | | |
| Users | 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. 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. > 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 ### Prerequisites
@@ -366,7 +365,7 @@ Using the load function would ensure that this list would be available on our pa
}); });
</script> </script>
<section class="u-flex-vertical u-gap-16"> <section class="u-flex-vertical gap-4">
<InitHeading {heading} /> <InitHeading {heading} />
<div class="wheel u-flex-vertical"> <div class="wheel u-flex-vertical">
<div class="wheel-container u-flex-vertical"></div> <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). 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 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. 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 ## 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) ![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 ## 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: 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_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. 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="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <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> <h1 class="heading-level-1">Prompt ChatGPT demo</h1>
<code class="u-un-break-text"></code> <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" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }" x-data="{ prompt: '', answer: '', loading: false }"
> >
<div class="card u-flex u-gap-24 u-flex-vertical"> <div class="card flex gap-6 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8"> <div class="flex u-cross-center gap-2">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" 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> </button>
</div> </div>
<template x-if="answer"> <template x-if="answer">
<div class="u-flex u-flex-vertical u-gap-12"> <div class="flex u-flex-vertical gap-3">
<div class="u-flex u-flex-vertical u-gap-12 card"> <div class="flex u-flex-vertical gap-3 card">
<div class="u-flex u-gap-12"> <div class="flex gap-3">
<h5 class="eyebrow-heading-2">ChatGPT:</h5> <h5 class="eyebrow-heading-2">ChatGPT:</h5>
</div> </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) - 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) - 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 ```js
import path from 'path'; import path from 'path';
@@ -193,7 +193,7 @@ export function throwIfMissing(obj, keys) {
### Creating the function logic ### 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 ```bash
npm i openai 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 ## 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: 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 # 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) ![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 # 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) ![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 - `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 # 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="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <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> <h1 class="heading-level-1">Valentine's Day Sonnet Generator ❤️</h1>
<code class="u-un-break-text"></code> <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" class="container u-margin-block-start-negative-56"
x-data="{ name: '', sonnet: '', loading: false }" x-data="{ name: '', sonnet: '', loading: false }"
> >
<div class="card u-flex u-gap-24 u-flex-vertical"> <div class="card flex gap-6 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8"> <div class="flex u-cross-center gap-2">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" 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> </button>
</div> </div>
<template x-if="sonnet"> <template x-if="sonnet">
<div class="u-flex u-flex-vertical u-gap-12"> <div class="flex u-flex-vertical gap-3">
<div class="u-flex u-flex-vertical u-gap-12 card"> <div class="flex u-flex-vertical gap-3 card">
<div class="u-flex u-gap-12"> <div class="flex gap-3">
<h5 class="eyebrow-heading-2">Cupid:</h5> <h5 class="eyebrow-heading-2">Cupid:</h5>
</div> </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 { function encodeText(str: string | null): string {
if (str === null) return ''; if (str === null) return '';
return str.replace(/&/g, '&amp;') return str
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;') .replace(/</g, '&lt;')
.replace(/>/g, '&gt;') .replace(/>/g, '&gt;')
.replace(/"/g, '&quot;') .replace(/"/g, '&quot;')
@@ -14,7 +15,7 @@ function encodeText(str: string | null): string {
} }
function encodeUrl(href: string): string { function encodeUrl(href: string): string {
return encodeURI(`https://appwrite.io${href}`) return encodeURI(`https://appwrite.io${href}`);
} }
export const GET: RequestHandler = () => { export const GET: RequestHandler = () => {
@@ -25,14 +26,18 @@ export const GET: RequestHandler = () => {
<link>https://appwrite.io</link> <link>https://appwrite.io</link>
<atom:link href="https://appwrite.io/blog/rss.xml" rel="self" type="application/rss+xml" /> <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> <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> <title>${encodeText(post.title)}</title>
<pubDate>${post.date.toUTCString()}</pubDate> <pubDate>${post.date.toUTCString()}</pubDate>
<link>${encodeUrl(post.href)}</link> <link>${encodeUrl(post.href)}</link>
<guid>${encodeUrl(post.href)}</guid> <guid>${encodeUrl(post.href)}</guid>
<description>${encodeText(post.description)}</description> <description>${encodeText(post.description)}</description>
</item> </item>
`).join('')} `
)
.join('')}
</channel> </channel>
</rss>`; </rss>`;

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

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

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

@@ -61,12 +61,14 @@
</ul> </ul>
{#if data.nextPage} {#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} {/if}
</div> </div>
</div> </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-big-padding-section-level-2">
<div class="web-container"> <div class="web-container">
<PreFooter /> <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"> <div class="web-container wrapper" style="--container-size:42.5rem">
<article class="web-main-article"> <article class="web-main-article">
<header class="web-main-article-header"> <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 class="web-icon-chevron-left" aria-hidden="true" />
<span>Back to Changelog</span> <span>Back to Changelog</span>
</a> </a>
@@ -55,7 +58,7 @@
</header> </header>
{#if data.cover} {#if data.cover}
<div class="web-media-container"> <div class="web-media-container">
<img class="u-block" src={data.cover} alt="" /> <img class="block" src={data.cover} alt="" />
</div> </div>
{/if} {/if}
@@ -65,7 +68,7 @@
</article> </article>
</div> </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-big-padding-section-level-2">
<div class="web-container"> <div class="web-container">
<PreFooter /> <PreFooter />

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

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

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

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

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

@@ -18,8 +18,9 @@
export let image: $$Props['image']; export let image: $$Props['image'];
export let href: $$Props['href']; export let href: $$Props['href'];
</script> </script>
<a <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;" style="--card-padding: 0.5rem;"
{href} {href}
target="_blank" target="_blank"

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

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

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

@@ -57,7 +57,7 @@
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
</svelte:head> </svelte:head>
<div class="u-position-absolute" style="pointer-events:none;"> <div class="absolute" style="pointer-events:none;">
<enhanced:img src="./bg.png" alt="" /> <enhanced:img src="./bg.png" alt="" />
</div> </div>
@@ -66,14 +66,14 @@
<div class="web-big-padding-section-level-1"> <div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="web-container"> <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>
<div <div
class="web-u-max-inline-size-none-mobile" class="web-u-max-inline-size-none-mobile"
class:web-u-max-width-380={!submitted} class:web-u-max-width-380={!submitted}
> >
{#if 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"> <h1 class="web-display web-u-color-text-primary">
Thank you for your message Thank you for your message
</h1> </h1>
@@ -90,7 +90,7 @@
</a> </a>
</section> </section>
{:else} {: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"> <h1 class="web-display web-u-color-text-primary">
Contact Us Contact Us
</h1> </h1>
@@ -101,10 +101,10 @@
</section> </section>
{/if} {/if}
<section <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> <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} {#each socials as social}
<li> <li>
<a <a
@@ -129,11 +129,11 @@
<form <form
method="post" method="post"
on:submit|preventDefault={handleSubmit} 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 <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"> <li class="web-form-item">
<input <input
@@ -179,7 +179,7 @@
</ul> </ul>
</div> </div>
<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"> <p class="web-caption-400 web-u-max-width-380">
{#if error} {#if error}

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

@@ -8,7 +8,7 @@
<Docs variant="two-side-navs"> <Docs variant="two-side-navs">
<Sidebar /> <Sidebar />
<div <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-container">
<div class="web-hero" style="--hero-gap:1.25rem;"> <div class="web-hero" style="--hero-gap:1.25rem;">
@@ -18,11 +18,15 @@
</h1> </h1>
{#if $page.status === 404} {#if $page.status === 404}
<p class="web-description"> <p class="web-description">
Sorry, it seems that the page you are looking for does not exist. Feel free to use our Sorry, it seems that the page you are looking for does not exist. Feel free
navigation menu or the button below to explore more of Appwrite's documentation. to use our navigation menu or the button below to explore more of Appwrite's
documentation.
</p> </p>
{/if} {/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> <span>Back to docs</span>
</a> </a>
</div> </div>

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

@@ -66,22 +66,19 @@
<Docs variant="default"> <Docs variant="default">
<Sidebar /> <Sidebar />
<main <main class="web-main-section relative overflow-hidden-break1-to-break3" id="main">
class="web-main-section u-position-relative web-u-overflow-hidden-break1-to-break3" <div class="absolute web-u-opacity-40-mobile bg-blur">
id="main"
>
<div class="u-position-absolute web-u-opacity-40-mobile bg-blur">
<img src="/images/bgs/docs-blur-1.svg" alt="" /> <img src="/images/bgs/docs-blur-1.svg" alt="" />
</div> </div>
<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;" style=" margin-inline-start: -30px;"
> >
<enhanced:img src="./blur-2.png" alt="" /> <enhanced:img src="./blur-2.png" alt="" />
</div> </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"> <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" 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"> <a href="/docs/sdks" class="web-button is-secondary" style:align-self="start">
<span class="web-sub-body-500">Explore all technologies</span> <span class="web-sub-body-500">Explore all technologies</span>
</a> </a>
<div class="u-position-absolute web-is-not-mobile spline-wrapper"> <div class="absolute web-is-not-mobile spline-wrapper">
<img <img
class="u-only-dark" class="u-only-dark"
src="/images/animations/tech-dark-transparent.png" 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}> <a class="web-grid-articles-item is-full-color" {href}>
<div class="web-grid-articles-item-image"> <div class="web-grid-articles-item-image">
<img src={cover} alt='' loading="lazy" /> <img src={cover} alt="" loading="lazy" />
</div> </div>
<article class="web-grid-articles-item-content"> <article class="web-grid-articles-item-content">
<header class="web-articles-item-header"> <header class="web-articles-item-header">

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

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

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

@@ -35,7 +35,7 @@
{ {
label: 'PCI', label: 'PCI',
href: '/docs/advanced/security/pci' href: '/docs/advanced/security/pci'
}, }
] ]
}, },
{ {
@@ -76,7 +76,7 @@
{ {
label: 'Abuse protection', label: 'Abuse protection',
href: '/docs/advanced/security/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', label: 'Update',
href: '/docs/advanced/self-hosting/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="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <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> <h1 class="heading-level-1">Prompt Anyscale Demo</h1>
<code class="u-un-break-text"></code> <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" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }" x-data="{ prompt: '', answer: '', loading: false }"
> >
<div class="card u-flex u-gap-24 u-flex-vertical"> <div class="card flex gap-6 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8"> <div class="flex u-cross-center gap-2">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" 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> </button>
</div> </div>
<template x-if="answer"> <template x-if="answer">
<div class="u-flex u-flex-vertical u-gap-12"> <div class="flex u-flex-vertical gap-3">
<div class="u-flex u-flex-vertical u-gap-12 card"> <div class="flex u-flex-vertical gap-3 card">
<div class="u-flex u-gap-12"> <div class="flex gap-3">
<h5 class="eyebrow-heading-2">Anyscale:</h5> <h5 class="eyebrow-heading-2">Anyscale:</h5>
</div> </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="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <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> <h1 class="heading-level-1">ElevenLabs Demo</h1>
<code class="u-un-break-text"></code> <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" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', response: '', loading: false }" x-data="{ prompt: '', response: '', loading: false }"
> >
<div class="card u-flex u-gap-24 u-flex-vertical"> <div class="card flex gap-6 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8"> <div class="flex u-cross-center gap-2">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" 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> </button>
</div> </div>
<template x-if="response"> <template x-if="response">
<div class="u-flex u-flex-vertical u-gap-12"> <div class="flex u-flex-vertical gap-3">
<div class="u-flex u-flex-vertical u-gap-12 card"> <div class="flex u-flex-vertical gap-3 card">
<div class="u-flex u-gap-12"> <div class="flex gap-3">
<h5 class="eyebrow-heading-2">Output:</h5> <h5 class="eyebrow-heading-2">Output:</h5>
</div> </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"> <main class="main-content">
<div class="top-cover u-padding-block-end-56"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <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> <h1 class="heading-level-1">fal.ai demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
@@ -147,8 +147,8 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
</div> </div>
<div class="container u-margin-block-start-negative-56" <div class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', result: { src: '' }, loading: false }"> x-data="{ prompt: '', result: { src: '' }, loading: false }">
<div class="card u-flex u-gap-24 u-flex-vertical"> <div class="card flex gap-6 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8"> <div class="flex u-cross-center gap-2">
<div class="input-text-wrapper is-with-end-button u-width-full-line"> <div class="input-text-wrapper is-with-end-button u-width-full-line">
<input x-model="prompt" type="search" placeholder="Prompt" /> <input x-model="prompt" type="search" placeholder="Prompt" />
<div class="icon-search" aria-hidden="true"></div> <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> </button>
</div> </div>
<template x-if="answer.type"> <template x-if="answer.type">
<div class="u-flex u-flex-vertical u-gap-12"> <div class="flex u-flex-vertical gap-3">
<div class="u-flex u-flex-vertical u-gap-12 card"> <div class="flex u-flex-vertical gap-3 card">
<div class="u-flex u-gap-12"> <div class="flex gap-3">
<h5 class="eyebrow-heading-2">Result:</h5> <h5 class="eyebrow-heading-2">Result:</h5>
</div> </div>
<img class="u-max-width-400" x-bind:src="result.src" alt="fal.ai output" /> <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. 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 %}
{% section #step-6 step=6 title="Handle POST Request" %} {% 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. 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). Additional models can be found in the [fal.ai model catalogue](https://fal.ai/models).
{% /section %} {% /section %}
{% section #step-7 step=7 title="Test the function" %} {% 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="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <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> <h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code> <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-data="{ search: '', results: [ ] }"
x-init="$watch('search', async (value) => { results = await onSearch(value) })" 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 id="searchbox">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" 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 class="icon-search" aria-hidden="true"></div>
</div> </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"> <template x-for="result in results">
<div class="card"> <div class="card">
<pre x-text="JSON.stringify(result, null, '\t')"></pre> <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 %} {% /only_light %}
1. In the Appwrite Console's sidebar, click **Functions**. 1. In the Appwrite Console's sidebar, click **Functions**.
2. Click **Create function**. 1. Click **Create function**.
3. Under **Connect Git repository**, select your provider. 1. Under **Connect Git repository**, select your provider.
4. After connecting to GitHub, under **Quick start**, select the **Node.js** starter template. 1. 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**. 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**.
6. Follow the step-by-step wizard and create the Function. 1. Follow the step-by-step wizard and create the Function.
{% /section %} {% /section %}
{% section #step-2 step=2 title="Add dependencies" %} {% 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="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <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> <h1 class="heading-level-1">LMNT Demo</h1>
<code class="u-un-break-text"></code> <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" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', response: '', loading: false }" x-data="{ prompt: '', response: '', loading: false }"
> >
<div class="card u-flex u-gap-24 u-flex-vertical"> <div class="card flex gap-6 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8"> <div class="flex u-cross-center gap-2">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" 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> </button>
</div> </div>
<template x-if="response"> <template x-if="response">
<div class="u-flex u-flex-vertical u-gap-12"> <div class="flex u-flex-vertical gap-3">
<div class="u-flex u-flex-vertical u-gap-12 card"> <div class="flex u-flex-vertical gap-3 card">
<div class="u-flex u-gap-12"> <div class="flex gap-3">
<h5 class="eyebrow-heading-2">Output:</h5> <h5 class="eyebrow-heading-2">Output:</h5>
</div> </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. 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 %}
{% section #step-7 step=7 title="Store Audio in Appwrite Storage" %} {% 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="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <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> <h1 class="heading-level-1">Prompt ChatGPT Demo</h1>
<code class="u-un-break-text"></code> <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" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }" x-data="{ prompt: '', answer: '', loading: false }"
> >
<div class="card u-flex u-gap-24 u-flex-vertical"> <div class="card flex gap-6 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8"> <div class="flex u-cross-center gap-2">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" 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> </button>
</div> </div>
<template x-if="answer"> <template x-if="answer">
<div class="u-flex u-flex-vertical u-gap-12"> <div class="flex u-flex-vertical gap-3">
<div class="u-flex u-flex-vertical u-gap-12 card"> <div class="flex u-flex-vertical gap-3 card">
<div class="u-flex u-gap-12"> <div class="flex gap-3">
<h5 class="eyebrow-heading-2">ChatGPT:</h5> <h5 class="eyebrow-heading-2">ChatGPT:</h5>
</div> </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 %}
{% section #step-5 step=5 title="Create static page" %} {% 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="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <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> <h1 class="heading-level-1">Perplexity AI Demo</h1>
<code class="u-un-break-text"></code> <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" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }" x-data="{ prompt: '', answer: '', loading: false }"
> >
<div class="card u-flex u-gap-24 u-flex-vertical"> <div class="card flex gap-6 u-flex-vertical">
<div class="u-flex u-cross-center u-gap-8"> <div class="flex u-cross-center gap-2">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" 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> </button>
</div> </div>
<template x-if="answer"> <template x-if="answer">
<div class="u-flex u-flex-vertical u-gap-12"> <div class="flex u-flex-vertical gap-3">
<div class="u-flex u-flex-vertical u-gap-12 card"> <div class="flex u-flex-vertical gap-3 card">
<div class="u-flex u-gap-12"> <div class="flex gap-3">
<h5 class="eyebrow-heading-2">Perplexity AI:</h5> <h5 class="eyebrow-heading-2">Perplexity AI:</h5>
</div> </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="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <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> <h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code> <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-data="{ search: '', results: [ ] }"
x-init="$watch('search', async (value) => { results = await onSearch(value) })" 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 id="searchbox">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" 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 class="icon-search" aria-hidden="true"></div>
</div> </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"> <template x-for="result in results">
<div class="card"> <div class="card">
<pre x-text="JSON.stringify(result, null, '\t')"></pre> <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