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

Refactor CSS prefix

Browse Source 
- changed from AW to WEB
This commit is contained in:
Elad Shechter
2024-03-06 11:27:37 +01:00
parent 3fc05a6b6f
commit ec7025ab7d
225 changed files with 2694 additions and 3053 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/icons/output/_variables.scss
View File

@@ -1,50 +1,50 @@
$aw-icon-apple: "\ea01"; $web-icon-apple: "\ea01";
$aw-icon-appwrite: "\ea02"; $web-icon-appwrite: "\ea02";
$aw-icon-arrow-down: "\ea03"; $web-icon-arrow-down: "\ea03";
$aw-icon-arrow-ext-link: "\ea04"; $web-icon-arrow-ext-link: "\ea04";
$aw-icon-arrow-left: "\ea05"; $web-icon-arrow-left: "\ea05";
$aw-icon-arrow-right: "\ea06"; $web-icon-arrow-right: "\ea06";
$aw-icon-arrow-up: "\ea07"; $web-icon-arrow-up: "\ea07";
$aw-icon-calendar: "\ea08"; $web-icon-calendar: "\ea08";
$aw-icon-check: "\ea09"; $web-icon-check: "\ea09";
$aw-icon-chevron-down: "\ea0a"; $web-icon-chevron-down: "\ea0a";
$aw-icon-chevron-left: "\ea0b"; $web-icon-chevron-left: "\ea0b";
$aw-icon-chevron-right: "\ea0c"; $web-icon-chevron-right: "\ea0c";
$aw-icon-chevron-up: "\ea0d"; $web-icon-chevron-up: "\ea0d";
$aw-icon-close: "\ea0e"; $web-icon-close: "\ea0e";
$aw-icon-command: "\ea0f"; $web-icon-command: "\ea0f";
$aw-icon-copy: "\ea10"; $web-icon-copy: "\ea10";
$aw-icon-dark: "\ea11"; $web-icon-dark: "\ea11";
$aw-icon-discord: "\ea12"; $web-icon-discord: "\ea12";
$aw-icon-divider-vertical: "\ea13"; $web-icon-divider-vertical: "\ea13";
$aw-icon-download: "\ea14"; $web-icon-download: "\ea14";
$aw-icon-ext-link: "\ea15"; $web-icon-ext-link: "\ea15";
$aw-icon-firebase: "\ea16"; $web-icon-firebase: "\ea16";
$aw-icon-github: "\ea17"; $web-icon-github: "\ea17";
$aw-icon-google: "\ea18"; $web-icon-google: "\ea18";
$aw-icon-hamburger-menu: "\ea19"; $web-icon-hamburger-menu: "\ea19";
$aw-icon-light: "\ea1a"; $web-icon-light: "\ea1a";
$aw-icon-linkedin: "\ea1b"; $web-icon-linkedin: "\ea1b";
$aw-icon-location: "\ea1c"; $web-icon-location: "\ea1c";
$aw-icon-logout-left: "\ea1d"; $web-icon-logout-left: "\ea1d";
$aw-icon-logout-right: "\ea1e"; $web-icon-logout-right: "\ea1e";
$aw-icon-mailgun: "\ea1f"; $web-icon-mailgun: "\ea1f";
$aw-icon-message: "\ea20"; $web-icon-message: "\ea20";
$aw-icon-microsoft: "\ea21"; $web-icon-microsoft: "\ea21";
$aw-icon-minus: "\ea22"; $web-icon-minus: "\ea22";
$aw-icon-nuxt: "\ea23"; $web-icon-nuxt: "\ea23";
$aw-icon-platform: "\ea24"; $web-icon-platform: "\ea24";
$aw-icon-play: "\ea25"; $web-icon-play: "\ea25";
$aw-icon-plus: "\ea26"; $web-icon-plus: "\ea26";
$aw-icon-product-hunt: "\ea27"; $web-icon-product-hunt: "\ea27";
$aw-icon-refine: "\ea28"; $web-icon-refine: "\ea28";
$aw-icon-rest: "\ea29"; $web-icon-rest: "\ea29";
$aw-icon-search: "\ea2a"; $web-icon-search: "\ea2a";
$aw-icon-sendgrid: "\ea2b"; $web-icon-sendgrid: "\ea2b";
$aw-icon-star: "\ea2c"; $web-icon-star: "\ea2c";
$aw-icon-system: "\ea2d"; $web-icon-system: "\ea2d";
$aw-icon-textmagic: "\ea2e"; $web-icon-textmagic: "\ea2e";
$aw-icon-twitter: "\ea2f"; $web-icon-twitter: "\ea2f";
$aw-icon-vue: "\ea30"; $web-icon-vue: "\ea30";
$aw-icon-x: "\ea31"; $web-icon-x: "\ea31";
$aw-icon-youtube: "\ea32"; $web-icon-youtube: "\ea32";

69
src/icons/output/aw-icon.css
View File

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

BIN
src/icons/output/aw-icon.eot
View File

Binary file not shown.

119
src/icons/output/aw-icon.scss
View File

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

162
src/icons/output/aw-icon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 160 KiB

9
src/icons/output/aw-icon.symbol.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 68 KiB

BIN
src/icons/output/aw-icon.ttf
View File

Binary file not shown.

BIN
src/icons/output/aw-icon.woff
View File

Binary file not shown.

BIN
src/icons/output/aw-icon.woff2
View File

Binary file not shown.

200
src/icons/output/info.json
View File

@@ -1,302 +1,302 @@
{ {
"apple": { "apple": {
"encodedCode": "\\ea01", "encodedCode": "\\ea01",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-apple", "className": "web-icon-apple",
"unicode": "" "unicode": ""
}, },
"appwrite": { "appwrite": {
"encodedCode": "\\ea02", "encodedCode": "\\ea02",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-appwrite", "className": "web-icon-appwrite",
"unicode": "" "unicode": ""
}, },
"arrow-down": { "arrow-down": {
"encodedCode": "\\ea03", "encodedCode": "\\ea03",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-arrow-down", "className": "web-icon-arrow-down",
"unicode": "" "unicode": ""
}, },
"arrow-ext-link": { "arrow-ext-link": {
"encodedCode": "\\ea04", "encodedCode": "\\ea04",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-arrow-ext-link", "className": "web-icon-arrow-ext-link",
"unicode": "" "unicode": ""
}, },
"arrow-left": { "arrow-left": {
"encodedCode": "\\ea05", "encodedCode": "\\ea05",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-arrow-left", "className": "web-icon-arrow-left",
"unicode": "" "unicode": ""
}, },
"arrow-right": { "arrow-right": {
"encodedCode": "\\ea06", "encodedCode": "\\ea06",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-arrow-right", "className": "web-icon-arrow-right",
"unicode": "" "unicode": ""
}, },
"arrow-up": { "arrow-up": {
"encodedCode": "\\ea07", "encodedCode": "\\ea07",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-arrow-up", "className": "web-icon-arrow-up",
"unicode": "" "unicode": ""
}, },
"calendar": { "calendar": {
"encodedCode": "\\ea08", "encodedCode": "\\ea08",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-calendar", "className": "web-icon-calendar",
"unicode": "" "unicode": ""
}, },
"check": { "check": {
"encodedCode": "\\ea09", "encodedCode": "\\ea09",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-check", "className": "web-icon-check",
"unicode": "" "unicode": ""
}, },
"chevron-down": { "chevron-down": {
"encodedCode": "\\ea0a", "encodedCode": "\\ea0a",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-chevron-down", "className": "web-icon-chevron-down",
"unicode": "" "unicode": ""
}, },
"chevron-left": { "chevron-left": {
"encodedCode": "\\ea0b", "encodedCode": "\\ea0b",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-chevron-left", "className": "web-icon-chevron-left",
"unicode": "" "unicode": ""
}, },
"chevron-right": { "chevron-right": {
"encodedCode": "\\ea0c", "encodedCode": "\\ea0c",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-chevron-right", "className": "web-icon-chevron-right",
"unicode": "" "unicode": ""
}, },
"chevron-up": { "chevron-up": {
"encodedCode": "\\ea0d", "encodedCode": "\\ea0d",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-chevron-up", "className": "web-icon-chevron-up",
"unicode": "" "unicode": ""
}, },
"close": { "close": {
"encodedCode": "\\ea0e", "encodedCode": "\\ea0e",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-close", "className": "web-icon-close",
"unicode": "" "unicode": ""
}, },
"command": { "command": {
"encodedCode": "\\ea0f", "encodedCode": "\\ea0f",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-command", "className": "web-icon-command",
"unicode": "" "unicode": ""
}, },
"copy": { "copy": {
"encodedCode": "\\ea10", "encodedCode": "\\ea10",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-copy", "className": "web-icon-copy",
"unicode": "" "unicode": ""
}, },
"dark": { "dark": {
"encodedCode": "\\ea11", "encodedCode": "\\ea11",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-dark", "className": "web-icon-dark",
"unicode": "" "unicode": ""
}, },
"discord": { "discord": {
"encodedCode": "\\ea12", "encodedCode": "\\ea12",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-discord", "className": "web-icon-discord",
"unicode": "" "unicode": ""
}, },
"divider-vertical": { "divider-vertical": {
"encodedCode": "\\ea13", "encodedCode": "\\ea13",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-divider-vertical", "className": "web-icon-divider-vertical",
"unicode": "" "unicode": ""
}, },
"download": { "download": {
"encodedCode": "\\ea14", "encodedCode": "\\ea14",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-download", "className": "web-icon-download",
"unicode": "" "unicode": ""
}, },
"ext-link": { "ext-link": {
"encodedCode": "\\ea15", "encodedCode": "\\ea15",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-ext-link", "className": "web-icon-ext-link",
"unicode": "" "unicode": ""
}, },
"firebase": { "firebase": {
"encodedCode": "\\ea16", "encodedCode": "\\ea16",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-firebase", "className": "web-icon-firebase",
"unicode": "" "unicode": ""
}, },
"github": { "github": {
"encodedCode": "\\ea17", "encodedCode": "\\ea17",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-github", "className": "web-icon-github",
"unicode": "" "unicode": ""
}, },
"google": { "google": {
"encodedCode": "\\ea18", "encodedCode": "\\ea18",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-google", "className": "web-icon-google",
"unicode": "" "unicode": ""
}, },
"hamburger-menu": { "hamburger-menu": {
"encodedCode": "\\ea19", "encodedCode": "\\ea19",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-hamburger-menu", "className": "web-icon-hamburger-menu",
"unicode": "" "unicode": ""
}, },
"light": { "light": {
"encodedCode": "\\ea1a", "encodedCode": "\\ea1a",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-light", "className": "web-icon-light",
"unicode": "" "unicode": ""
}, },
"linkedin": { "linkedin": {
"encodedCode": "\\ea1b", "encodedCode": "\\ea1b",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-linkedin", "className": "web-icon-linkedin",
"unicode": "" "unicode": ""
}, },
"location": { "location": {
"encodedCode": "\\ea1c", "encodedCode": "\\ea1c",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-location", "className": "web-icon-location",
"unicode": "" "unicode": ""
}, },
"logout-left": { "logout-left": {
"encodedCode": "\\ea1d", "encodedCode": "\\ea1d",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-logout-left", "className": "web-icon-logout-left",
"unicode": "" "unicode": ""
}, },
"logout-right": { "logout-right": {
"encodedCode": "\\ea1e", "encodedCode": "\\ea1e",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-logout-right", "className": "web-icon-logout-right",
"unicode": "" "unicode": ""
}, },
"mailgun": { "mailgun": {
"encodedCode": "\\ea1f", "encodedCode": "\\ea1f",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-mailgun", "className": "web-icon-mailgun",
"unicode": "" "unicode": ""
}, },
"message": { "message": {
"encodedCode": "\\ea20", "encodedCode": "\\ea20",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-message", "className": "web-icon-message",
"unicode": "" "unicode": ""
}, },
"microsoft": { "microsoft": {
"encodedCode": "\\ea21", "encodedCode": "\\ea21",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-microsoft", "className": "web-icon-microsoft",
"unicode": "" "unicode": ""
}, },
"minus": { "minus": {
"encodedCode": "\\ea22", "encodedCode": "\\ea22",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-minus", "className": "web-icon-minus",
"unicode": "" "unicode": ""
}, },
"nuxt": { "nuxt": {
"encodedCode": "\\ea23", "encodedCode": "\\ea23",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-nuxt", "className": "web-icon-nuxt",
"unicode": "" "unicode": ""
}, },
"platform": { "platform": {
"encodedCode": "\\ea24", "encodedCode": "\\ea24",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-platform", "className": "web-icon-platform",
"unicode": "" "unicode": ""
}, },
"play": { "play": {
"encodedCode": "\\ea25", "encodedCode": "\\ea25",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-play", "className": "web-icon-play",
"unicode": "" "unicode": ""
}, },
"plus": { "plus": {
"encodedCode": "\\ea26", "encodedCode": "\\ea26",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-plus", "className": "web-icon-plus",
"unicode": "" "unicode": ""
}, },
"product-hunt": { "product-hunt": {
"encodedCode": "\\ea27", "encodedCode": "\\ea27",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-product-hunt", "className": "web-icon-product-hunt",
"unicode": "" "unicode": ""
}, },
"refine": { "refine": {
"encodedCode": "\\ea28", "encodedCode": "\\ea28",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-refine", "className": "web-icon-refine",
"unicode": "" "unicode": ""
}, },
"rest": { "rest": {
"encodedCode": "\\ea29", "encodedCode": "\\ea29",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-rest", "className": "web-icon-rest",
"unicode": "" "unicode": ""
}, },
"search": { "search": {
"encodedCode": "\\ea2a", "encodedCode": "\\ea2a",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-search", "className": "web-icon-search",
"unicode": "" "unicode": ""
}, },
"sendgrid": { "sendgrid": {
"encodedCode": "\\ea2b", "encodedCode": "\\ea2b",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-sendgrid", "className": "web-icon-sendgrid",
"unicode": "" "unicode": ""
}, },
"star": { "star": {
"encodedCode": "\\ea2c", "encodedCode": "\\ea2c",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-star", "className": "web-icon-star",
"unicode": "" "unicode": ""
}, },
"system": { "system": {
"encodedCode": "\\ea2d", "encodedCode": "\\ea2d",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-system", "className": "web-icon-system",
"unicode": "" "unicode": ""
}, },
"textmagic": { "textmagic": {
"encodedCode": "\\ea2e", "encodedCode": "\\ea2e",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-textmagic", "className": "web-icon-textmagic",
"unicode": "" "unicode": ""
}, },
"twitter": { "twitter": {
"encodedCode": "\\ea2f", "encodedCode": "\\ea2f",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-twitter", "className": "web-icon-twitter",
"unicode": "" "unicode": ""
}, },
"vue": { "vue": {
"encodedCode": "\\ea30", "encodedCode": "\\ea30",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-vue", "className": "web-icon-vue",
"unicode": "" "unicode": ""
}, },
"x": { "x": {
"encodedCode": "\\ea31", "encodedCode": "\\ea31",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-x", "className": "web-icon-x",
"unicode": "" "unicode": ""
}, },
"youtube": { "youtube": {
"encodedCode": "\\ea32", "encodedCode": "\\ea32",
"prefix": "aw-icon", "prefix": "web-icon",
"className": "aw-icon-youtube", "className": "web-icon-youtube",
"unicode": "" "unicode": ""
} }
} }

4
src/icons/scripts.js
View File

@@ -17,10 +17,10 @@ export const optimizeSVG = async () => {
export const generateIcons = async () => { export const generateIcons = async () => {
await svgtofont({ await svgtofont({
classNamePrefix: 'aw-icon', classNamePrefix: 'web-icon',
src: optimized, src: optimized,
dist: dist, dist: dist,
fontName: 'aw-icon', fontName: 'web-icon',
styleTemplates: resolve(process.cwd(), 'src/icons/templates'), styleTemplates: resolve(process.cwd(), 'src/icons/templates'),
css: { css: {
fontSize: '20px' fontSize: '20px'

8
src/lib/UI/Tabs/List.svelte
View File

@@ -14,16 +14,16 @@
export { className as class }; export { className as class };
</script> </script>
<ul class="aw-secondary-tabs {className}" use:melt={$list} {style}> <ul class="web-secondary-tabs {className}" use:melt={$list} {style}>
{#each tabs as tab} {#each tabs as tab}
<li class="aw-secondary-tabs-item" class:u-stretch={stretch}> <li class="web-secondary-tabs-item" class:u-stretch={stretch}>
<button <button
class="aw-secondary-tabs-button u-width-full-line" class="web-secondary-tabs-button u-width-full-line"
class:is-selected={$value === tab} class:is-selected={$value === tab}
use:melt={$trigger(tab)} use:melt={$trigger(tab)}
> >
<slot {tab}> <slot {tab}>
<span class="aw-main-body-500">{tab}</span> <span class="web-main-body-500">{tab}</span>
</slot> </slot>
</button> </button>
</li> </li>

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

@@ -27,7 +27,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: hsl(var(--aw-color-card)); background-color: hsl(var(--web-color-card));
border-radius: var(--p-radius); border-radius: var(--p-radius);
--m-border-radius: var(--p-radius); --m-border-radius: var(--p-radius);
--m-border-gradient-before: linear-gradient( --m-border-gradient-before: linear-gradient(

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

@@ -140,11 +140,11 @@
<div <div
id="open-source" id="open-source"
use:scroll use:scroll
on:aw-scroll={({ detail }) => { on:web-scroll={({ detail }) => {
const { percentage } = detail; const { percentage } = detail;
scrollHandler(percentage); scrollHandler(percentage);
}} }}
on:aw-resize={({ detail }) => { on:web-resize={({ detail }) => {
scrollHandler.reset(); scrollHandler.reset();
const { percentage } = detail; const { percentage } = detail;
@@ -152,84 +152,84 @@
}} }}
> >
<div class="sticky-wrapper"> <div class="sticky-wrapper">
<h3 class="aw-display aw-u-color-text-primary">Powered by Open Source</h3> <h3 class="web-display web-u-color-text-primary">Powered by Open Source</h3>
<div class="cards-wrapper"> <div class="cards-wrapper">
<a <a
href="/discord" href="/discord"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-card is-white aw-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 u-gap-32">
<span <span
class="aw-icon-discord aw-u-font-size-40" class="web-icon-discord web-u-font-size-40"
aria-hidden="true" aria-hidden="true"
aria-label="Discord" aria-label="Discord"
/> />
</div> </div>
<div class="aw-title u-margin-block-start-auto">17k+ Discord Members</div> <div class="web-title u-margin-block-start-auto">17k+ Discord Members</div>
</a> </a>
<a <a
class="aw-card is-white aw-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-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 u-gap-32">
<span <span
class="aw-icon-github aw-u-font-size-40" class="web-icon-github web-u-font-size-40"
aria-hidden="true" aria-hidden="true"
aria-label="GitHub" aria-label="GitHub"
/> />
</div> </div>
<div class="aw-title u-margin-block-start-auto">38k+ GitHub Stars</div> <div class="web-title u-margin-block-start-auto">38k+ GitHub Stars</div>
</a> </a>
<a <a
href="https://twitter.com/appwrite" href="https://twitter.com/appwrite"
class="aw-card is-white aw-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 u-gap-32">
<span <span
class="aw-icon-x aw-u-font-size-40" class="web-icon-x web-u-font-size-40"
aria-hidden="true" aria-hidden="true"
aria-label="Twitter" aria-label="Twitter"
/> />
</div> </div>
<div class="aw-title u-margin-block-start-auto">128k+ Twitter Followers</div> <div class="web-title u-margin-block-start-auto">128k+ Twitter Followers</div>
</a> </a>
<a <a
href="https://www.youtube.com/@Appwrite" href="https://www.youtube.com/@Appwrite"
class="aw-card is-white aw-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 u-gap-32">
<span <span
class="aw-icon-youtube aw-u-font-size-40" class="web-icon-youtube web-u-font-size-40"
aria-hidden="true" aria-hidden="true"
aria-label="YouTube" aria-label="YouTube"
/> />
</div> </div>
<div class="aw-title u-margin-block-start-auto">4k+ Youtube Subscribers</div> <div class="web-title u-margin-block-start-auto">4k+ Youtube Subscribers</div>
</a> </a>
<a <a
class="aw-card is-white aw-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-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 u-gap-32">
<span <span
class="aw-icon-github aw-u-font-size-40" class="web-icon-github web-u-font-size-40"
aria-hidden="true" aria-hidden="true"
aria-label="GitHub" aria-label="GitHub"
/> />
</div> </div>
<div class="aw-title u-margin-block-start-auto">18k+ Code Commits</div> <div class="web-title u-margin-block-start-auto">18k+ Code Commits</div>
</a> </a>
</div> </div>
</div> </div>
@@ -265,8 +265,8 @@
&::after { &::after {
background: linear-gradient( background: linear-gradient(
to top, to top,
hsl(var(--aw-color-background)) 0%, hsl(var(--web-color-background)) 0%,
hsl(var(--aw-color-background) / 0) 5% hsl(var(--web-color-background) / 0) 5%
); );
position: absolute; position: absolute;
inset: 0; inset: 0;

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

@@ -23,7 +23,7 @@
rgba(255, 255, 255, 0) 125.11% rgba(255, 255, 255, 0) 125.11%
); );
border-radius: var(--m-border-radius); border-radius: var(--m-border-radius);
background: hsl(var(--aw-color-card)); background: hsl(var(--web-color-card));
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
padding: 0.5rem; padding: 0.5rem;

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

@@ -193,7 +193,7 @@
<div <div
id="products" id="products"
use:scroll use:scroll
on:aw-scroll={({ detail }) => { on:web-scroll={({ detail }) => {
scrollInfo = detail; scrollInfo = detail;
}} }}
> >
@@ -208,18 +208,18 @@
in:fly={{ duration: 250, delay: 250, y: -300 }} in:fly={{ duration: 250, delay: 250, y: -300 }}
> >
{#if scrollInfo.percentage > -0.1} {#if scrollInfo.percentage > -0.1}
<span class="aw-badges aw-eyebrow" transition:slide={{ axis: 'x' }} <span class="web-badges web-eyebrow" transition:slide={{ axis: 'x' }}
>Products_</span >Products_</span
> >
<h2 <h2
class="aw-display aw-u-color-text-primary" class="web-display web-u-color-text-primary"
transition:fly={{ y: 16, delay: 250 }} transition:fly={{ y: 16, delay: 250 }}
> >
Your backend, minus the hassle Your backend, minus the hassle
</h2> </h2>
<p <p
class="aw-description aw-u-max-width-700 u-margin-inline-auto" class="web-description web-u-max-width-700 u-margin-inline-auto"
transition:fly={{ transition:fly={{
y: 16, y: 16,
delay: 400 delay: 400
@@ -255,11 +255,11 @@
width="32" width="32"
height="32" height="32"
/> />
<span class="aw-label">{copy.title}</span> <span class="web-label">{copy.title}</span>
</h3> </h3>
{#if isActive} {#if isActive}
<div transition:slide> <div transition:slide>
<h4 class="aw-title">{copy.subtitle}</h4> <h4 class="web-title">{copy.subtitle}</h4>
<p> <p>
{copy.description} {copy.description}
</p> </p>
@@ -458,7 +458,7 @@
&[data-active] { &[data-active] {
h3 { h3 {
color: hsl(var(--aw-color-primary)); color: hsl(var(--web-color-primary));
margin-block-end: 0.75rem; margin-block-end: 0.75rem;
} }
} }
@@ -469,13 +469,13 @@
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
.aw-label { .web-label {
margin-block-start: 0.25rem; margin-block-start: 0.25rem;
} }
} }
h4 { h4 {
color: hsl(var(--aw-color-primary)); color: hsl(var(--web-color-primary));
} }
p { p {
@@ -591,7 +591,7 @@
} }
:global(.header) { :global(.header) {
border-bottom: 1px solid hsl(var(--aw-color-greyscale-700)); border-bottom: 1px solid hsl(var(--web-color-greyscale-700));
color: var(--greyscale-400, #adadb1); color: var(--greyscale-400, #adadb1);
text-transform: uppercase; text-transform: uppercase;
@@ -611,8 +611,8 @@
} }
:global(.avatar) { :global(.avatar) {
background-color: hsl(var(--aw-color-greyscale-700)); background-color: hsl(var(--web-color-greyscale-700));
border-color: hsl(var(--aw-color-greyscale-700)); border-color: hsl(var(--web-color-greyscale-700));
} }
:global(.truncated) { :global(.truncated) {

16
src/lib/animations/Products/ProductsMobile.svelte
View File

@@ -5,13 +5,13 @@
<div class="outside"> <div class="outside">
<div class="wrapper"> <div class="wrapper">
<span class="aw-badges aw-eyebrow">Products_</span> <span class="web-badges web-eyebrow">Products_</span>
<h2 class="aw-display aw-u-color-text-primary u-margin-block-start-16"> <h2 class="web-display web-u-color-text-primary u-margin-block-start-16">
Your backend, minus the hassle Your backend, minus the hassle
</h2> </h2>
<p class="aw-description u-margin-block-start-16"> <p class="web-description u-margin-block-start-16">
Build secure and scalable applications with less code. Add authentication, databases, Build secure and scalable applications with less code. Add authentication, databases,
storage, and more using Appwrite's development platform. storage, and more using Appwrite's development platform.
</p> </p>
@@ -25,10 +25,10 @@
<div class="info"> <div class="info">
<h3> <h3>
<img src={info.icon.active} alt="" /> <img src={info.icon.active} alt="" />
<span class="aw-label aw-u-color-text-primary">{info.title}</span> <span class="web-label web-u-color-text-primary">{info.title}</span>
</h3> </h3>
<h4 class="aw-title">{info.subtitle}</h4> <h4 class="web-title">{info.subtitle}</h4>
<p> <p>
{info.description} {info.description}
</p> </p>
@@ -109,13 +109,13 @@
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
.aw-label { .web-label {
margin-block-start: 0.25rem; margin-block-start: 0.25rem;
} }
} }
h4 { h4 {
color: hsl(var(--aw-color-primary)); color: hsl(var(--web-color-primary));
margin-block-start: 0.75rem; margin-block-start: 0.75rem;
} }
@@ -159,7 +159,7 @@
} }
hr { hr {
border: 1px solid hsl(var(--aw-color-smooth)); border: 1px solid hsl(var(--web-color-smooth));
margin-inline: calc(var(--padding-inline) * -1); margin-inline: calc(var(--padding-inline) * -1);
} }
} }

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

@@ -22,7 +22,7 @@
<div class="wrapper"> <div class="wrapper">
<button use:melt={$root} class="anim-checkbox"> <button use:melt={$root} class="anim-checkbox">
{#if $isChecked} {#if $isChecked}
<span class="aw-icon-check" /> <span class="web-icon-check" />
{/if} {/if}
</button> </button>
</div> </div>

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

@@ -44,8 +44,8 @@
<div class="pseudo-table"> <div class="pseudo-table">
<div class="header"> <div class="header">
<span class="aw-eyebrow">Name</span> <span class="web-eyebrow">Name</span>
<span class="aw-eyebrow">Identifier</span> <span class="web-eyebrow">Identifier</span>
</div> </div>
{#each authData as user (user.id)} {#each authData as user (user.id)}
<div <div

6
src/lib/animations/Products/auth/controls.svelte
View File

@@ -6,7 +6,7 @@
const { state } = authController; const { state } = authController;
const getIcon = (provider: string) => { const getIcon = (provider: string) => {
return `aw-icon-${provider.toLowerCase()}`; return `web-icon-${provider.toLowerCase()}`;
}; };
</script> </script>
@@ -39,7 +39,7 @@
> :nth-child(2) { > :nth-child(2) {
margin-left: 0.75rem; margin-left: 0.75rem;
color: hsl(var(--aw-color-white)); color: hsl(var(--web-color-white));
font-family: Inter; font-family: Inter;
font-size: 0.875rem; font-size: 0.875rem;
@@ -66,7 +66,7 @@
font-size: var(--size); font-size: var(--size);
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
color: hsl(var(--aw-color-greayscale-50)); color: hsl(var(--web-color-greayscale-50));
position: relative; position: relative;

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

@@ -38,7 +38,7 @@
{#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="aw-icon-{provider.toLowerCase()}" /> <span class="web-icon-{provider.toLowerCase()}" />
<span>{provider}</span> <span>{provider}</span>
</div> </div>
</button> </button>
@@ -151,7 +151,7 @@
font-weight: 400; font-weight: 400;
line-height: 1.25rem; /* 166.667% */ line-height: 1.25rem; /* 166.667% */
letter-spacing: -0.0105rem; letter-spacing: -0.0105rem;
color: hsl(var(--aw-color-greyscale-500)); color: hsl(var(--web-color-greyscale-500));
margin-block-start: 0.75rem; margin-block-start: 0.75rem;
@@ -160,7 +160,7 @@
content: ''; content: '';
height: 1px; height: 1px;
flex-grow: 1; flex-grow: 1;
background-color: hsl(var(--aw-color-greyscale-200)); background-color: hsl(var(--web-color-greyscale-200));
} }
} }
@@ -179,7 +179,7 @@
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
color: hsl(var(--aw-color-greyscale-750)); color: hsl(var(--web-color-greyscale-750));
text-align: center; text-align: center;
/* Responsive/Caption-500 */ /* Responsive/Caption-500 */

8
src/lib/animations/Products/databases/box.svelte
View File

@@ -8,13 +8,13 @@
<div class="pseudo-table"> <div class="pseudo-table">
<div class="header"> <div class="header">
<span class="aw-eyebrow">Document ID</span> <span class="web-eyebrow">Document ID</span>
<span class="aw-eyebrow">Task</span> <span class="web-eyebrow">Task</span>
</div> </div>
{#each $state.tasks.slice(0, $state.tableSlice) as task (task.id)} {#each $state.tasks.slice(0, $state.tableSlice) as task (task.id)}
<div class="row" transition:slide={{ duration: 150 }} animate:flip={{ duration: 150 }}> <div class="row" transition:slide={{ duration: 150 }} animate:flip={{ duration: 150 }}>
<div class="copy-button"> <div class="copy-button">
<span class="aw-icon-copy" /> <span class="web-icon-copy" />
<span>{task.id}</span> <span>{task.id}</span>
</div> </div>
<span class="truncated">{task.title}</span> <span class="truncated">{task.title}</span>
@@ -36,7 +36,7 @@
[class*='icon-'] { [class*='icon-'] {
font-size: 1.25rem; font-size: 1.25rem;
color: hsl(var(--aw-color-greyscale-600)); color: hsl(var(--web-color-greyscale-600));
} }
span:not([class*='icon-']) { span:not([class*='icon-']) {

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

@@ -23,7 +23,7 @@
</div> </div>
<button class="add-btn"> <button class="add-btn">
<span class="aw-icon-plus" /> <span class="web-icon-plus" />
</button> </button>
</div> </div>
@@ -55,14 +55,14 @@
[class*='icon-'] { [class*='icon-'] {
font-size: 1.25rem; font-size: 1.25rem;
color: hsl(var(--aw-color-greyscale-500)); color: hsl(var(--web-color-greyscale-500));
} }
} }
.date { .date {
margin-block-start: 3rem; margin-block-start: 3rem;
color: hsl(var(--aw-color-greyscale-600)); color: hsl(var(--web-color-greyscale-600));
font-family: Inter; font-family: Inter;
font-size: 0.75rem; font-size: 0.75rem;
font-style: normal; font-style: normal;
@@ -83,8 +83,8 @@
gap: 0.75rem; gap: 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(var(--aw-color-greyscale-50)); border: 1px solid hsl(var(--web-color-greyscale-50));
background: hsl(var(--aw-color-white)); background: hsl(var(--web-color-white));
color: var(--greyscale-700, var(--color-greyscale-700, #56565c)); color: var(--greyscale-700, var(--color-greyscale-700, #56565c));
padding-block: 0.55rem; padding-block: 0.55rem;

4
src/lib/animations/Products/functions/code.svelte
View File

@@ -25,14 +25,14 @@ return res.json({ success: true });`.trim();
<div use:portal={{ target: '#code-bottom' }} class="bottom"> <div use:portal={{ target: '#code-bottom' }} class="bottom">
{#if $state.submit !== 'idle'} {#if $state.submit !== 'idle'}
<span class="aw-icon-github" in:fade /> <span class="web-icon-github" in:fade />
{/if} {/if}
{#if $state.submit === 'loading'} {#if $state.submit === 'loading'}
<span in:fade>Pushing to GitHub...</span> <span in:fade>Pushing to GitHub...</span>
<div class="loader is-small" in:fade /> <div class="loader is-small" in:fade />
{:else if $state.submit === 'success'} {:else if $state.submit === 'success'}
<span>Deployed to Appwrite Cloud</span> <span>Deployed to Appwrite Cloud</span>
<span class="aw-icon-check" /> <span class="web-icon-check" />
{/if} {/if}
</div> </div>

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

@@ -119,7 +119,7 @@
[class*='icon-'] { [class*='icon-'] {
font-size: 1.25rem; font-size: 1.25rem;
color: hsl(var(--aw-color-greyscale-500)); color: hsl(var(--web-color-greyscale-500));
} }
} }

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

@@ -61,7 +61,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="search"> <div class="search">
<span class="aw-icon-search" /> <span class="web-icon-search" />
<span class="text"> Search </span> <span class="text"> Search </span>
</div> </div>
<div class="flow gap-8"> <div class="flow gap-8">
@@ -392,7 +392,7 @@
} }
hr { hr {
border-bottom: 1px solid hsl(var(--aw-color-greyscale-50)); border-bottom: 1px solid hsl(var(--web-color-greyscale-50));
margin-block: 1rem; margin-block: 1rem;
} }
@@ -405,7 +405,7 @@
align-self: stretch; align-self: stretch;
border-radius: 0.625rem; border-radius: 0.625rem;
border: 1px dashed hsl(var(--aw-color-greyscale-50)); border: 1px dashed hsl(var(--web-color-greyscale-50));
color: #56565c; color: #56565c;
.text { .text {

6
src/lib/animations/Products/storage/box.svelte
View File

@@ -8,9 +8,9 @@
<div class="pseudo-table"> <div class="pseudo-table">
<div class="header"> <div class="header">
<span class="aw-eyebrow">Filename</span> <span class="web-eyebrow">Filename</span>
<span class="aw-eyebrow">Type</span> <span class="web-eyebrow">Type</span>
<span class="aw-eyebrow">Size</span> <span class="web-eyebrow">Size</span>
</div> </div>
{#each $state.files as file (file.src)} {#each $state.files as file (file.src)}
<div class="row" in:slide={{ duration: 150 }} animate:flip={{ duration: 150 }}> <div class="row" in:slide={{ duration: 150 }} animate:flip={{ duration: 150 }}>

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

@@ -28,7 +28,7 @@
</div> </div>
<button class="add-btn"> <button class="add-btn">
<span class="aw-icon-plus" /> <span class="web-icon-plus" />
</button> </button>
<div class="overlay" id="overlay-{$elId}"> <div class="overlay" id="overlay-{$elId}">
@@ -85,14 +85,14 @@
[class*='icon-'] { [class*='icon-'] {
font-size: 1.25rem; font-size: 1.25rem;
color: hsl(var(--aw-color-greyscale-500)); color: hsl(var(--web-color-greyscale-500));
} }
} }
.date { .date {
margin-block-start: 3rem; margin-block-start: 3rem;
color: hsl(var(--aw-color-greyscale-600)); color: hsl(var(--web-color-greyscale-600));
font-family: Inter; font-family: Inter;
font-size: 0.75rem; font-size: 0.75rem;
font-style: normal; font-style: normal;
@@ -113,8 +113,8 @@
gap: 0.75rem; gap: 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(var(--aw-color-greyscale-50)); border: 1px solid hsl(var(--web-color-greyscale-50));
background: hsl(var(--aw-color-white)); background: hsl(var(--web-color-white));
color: var(--greyscale-700, var(--color-greyscale-700, #56565c)); color: var(--greyscale-700, var(--color-greyscale-700, #56565c));
padding-block: 0.55rem; padding-block: 0.55rem;

10
src/lib/animations/index.ts
View File

@@ -107,8 +107,8 @@ export const scroll: Action<
HTMLElement, HTMLElement,
undefined, undefined,
{ {
'on:aw-scroll': (e: CustomEvent<ScrollInfo>) => void; 'on:web-scroll': (e: CustomEvent<ScrollInfo>) => void;
'on:aw-resize': (e: CustomEvent<ScrollInfo>) => void; 'on:web-resize': (e: CustomEvent<ScrollInfo>) => void;
} }
> = (node) => { > = (node) => {
function getScrollInfo(): ScrollInfo { function getScrollInfo(): ScrollInfo {
@@ -128,7 +128,7 @@ export const scroll: Action<
}; };
} }
const createHandler = (eventName: 'aw-scroll' | 'aw-resize') => { const createHandler = (eventName: 'web-scroll' | 'web-resize') => {
return () => { return () => {
node.dispatchEvent( node.dispatchEvent(
new CustomEvent<ScrollInfo>(eventName, { new CustomEvent<ScrollInfo>(eventName, {
@@ -138,8 +138,8 @@ export const scroll: Action<
}; };
}; };
const handleScroll = createHandler('aw-scroll'); const handleScroll = createHandler('web-scroll');
const handleResize = createHandler('aw-resize'); const handleResize = createHandler('web-resize');
handleScroll(); handleScroll();
handleResize(); handleResize();

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

@@ -30,7 +30,7 @@
style:--y={`${y}px`} style:--y={`${y}px`}
style:--percentage={`${easedPercentage * 100}%`} style:--percentage={`${easedPercentage * 100}%`}
> >
<div class="aw-dot" /> <div class="web-dot" />
</div> </div>
<style lang="scss"> <style lang="scss">
@@ -42,14 +42,14 @@
height: 100%; height: 100%;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
hsl(var(--aw-color-accent)) 0%, hsl(var(--web-color-accent)) 0%,
hsl(var(--aw-color-greyscale-700)) var(--percentage), hsl(var(--web-color-greyscale-700)) var(--percentage),
hsl(var(--aw-color-greyscale-700)) 100% hsl(var(--web-color-greyscale-700)) 100%
); );
border-radius: 100%; border-radius: 100%;
} }
.aw-dot { .web-dot {
position: absolute; position: absolute;
left: 50%; left: 50%;
translate: -50% var(--y, 0); translate: -50% var(--y, 0);

4
src/lib/components/Accordion/Item.svelte
View File

@@ -7,7 +7,7 @@
<details class="collapsible-wrapper" {open}> <details class="collapsible-wrapper" {open}>
<summary class="collapsible-button"> <summary class="collapsible-button">
<span class="text">{title}</span> <span class="text">{title}</span>
<div class="icon aw-u-color-text-primary"> <div class="icon web-u-color-text-primary">
<span class="icon-cheveron-down" aria-hidden="true" /> <span class="icon-cheveron-down" aria-hidden="true" />
</div> </div>
</summary> </summary>
@@ -19,7 +19,7 @@
<style> <style>
.collapsible-item { .collapsible-item {
border-block-end: 0.0625rem solid hsl(var(--aw-color-offset)); border-block-end: 0.0625rem solid hsl(var(--web-color-offset));
} }
.collapsible-button { .collapsible-button {

2
src/lib/components/Accordion/Root.svelte
View File

@@ -1,4 +1,4 @@
<ul class="collapsible u-width-full-line" style="--p-toggle-border-color: var(--aw-color-border);"> <ul class="collapsible u-width-full-line" style="--p-toggle-border-color: var(--web-color-border);">
<slot /> <slot />
</ul> </ul>

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

@@ -12,26 +12,26 @@
</script> </script>
<li> <li>
<a class="aw-grid-articles-item is-transparent" {href}> <a class="web-grid-articles-item is-transparent" {href}>
<div class="aw-grid-articles-item-image"> <div class="web-grid-articles-item-image">
<Media <Media
src={cover} src={cover}
class="aw-u-media-ratio-16-9" class="web-u-media-ratio-16-9"
alt={title} alt={title}
autoplay autoplay
controls={false} controls={false}
/> />
</div> </div>
<div class="aw-grid-articles-item-content"> <div class="web-grid-articles-item-content">
<h4 class="aw-label aw-u-color-text-primary"> <h4 class="web-label web-u-color-text-primary">
{title} {title}
</h4> </h4>
<div class="aw-author"> <div class="web-author">
<div class="u-flex u-cross-center u-gap-8"> <div class="u-flex u-cross-center u-gap-8">
<img class="aw-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="aw-author-info"> <div class="web-author-info">
<h4 class="aw-sub-body-400 aw-u-color-text-primary">{author}</h4> <h4 class="web-sub-body-400 web-u-color-text-primary">{author}</h4>
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile"> <ul class="web-metadata web-caption-400 web-is-not-mobile">
<li> <li>
{formatDate(date)} {formatDate(date)}
</li> </li>

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

@@ -46,27 +46,27 @@
<slot name="header" /> <slot name="header" />
<div class="u-flex u-gap-12 u-cross-end u-margin-inline-start-auto"> <div class="u-flex u-gap-12 u-cross-end u-margin-inline-start-auto">
<button <button
class="aw-icon-button" class="web-icon-button"
aria-label="Move carousel backward" aria-label="Move carousel backward"
disabled={isStart} disabled={isStart}
on:click={() => prev()} on:click={() => prev()}
> >
<span class="aw-icon-arrow-left" aria-hidden="true" /> <span class="web-icon-arrow-left" aria-hidden="true" />
</button> </button>
<button <button
class="aw-icon-button" class="web-icon-button"
aria-label="Move carousel forward" aria-label="Move carousel forward"
disabled={isEnd} disabled={isEnd}
on:click={() => next()} on:click={() => next()}
> >
<span class="aw-icon-arrow-right" aria-hidden="true" /> <span class="web-icon-arrow-right" aria-hidden="true" />
</button> </button>
</div> </div>
</div> </div>
<div class="carousel-wrapper" data-state={isStart ? 'start' : isEnd ? 'end' : 'middle'}> <div class="carousel-wrapper" data-state={isStart ? 'start' : isEnd ? 'end' : 'middle'}>
<ul <ul
class="aw-grid-articles u-margin-block-start-32 carousel" class="web-grid-articles u-margin-block-start-32 carousel"
class:is-medium={size === 'medium'} class:is-medium={size === 'medium'}
class:is-big={size === 'big'} class:is-big={size === 'big'}
style:gap="{gap}px" style:gap="{gap}px"
@@ -97,7 +97,7 @@
left: 0; left: 0;
background: linear-gradient( background: linear-gradient(
to right, to right,
hsl(var(--aw-color-background-docs)), hsl(var(--web-color-background-docs)),
transparent transparent
); );
} }
@@ -108,7 +108,7 @@
&::after { &::after {
right: 0; right: 0;
background: linear-gradient(to left, hsl(var(--aw-color-background-docs)), transparent); background: linear-gradient(to left, hsl(var(--web-color-background-docs)), transparent);
} }
&[data-state='end']::after { &[data-state='end']::after {

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

@@ -46,17 +46,17 @@
} }
</script> </script>
<section class="aw-content-footer"> <section class="web-content-footer">
<header class="aw-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="u-flex u-gap-32 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="u-flex u-gap-16 u-cross-center">
<h5 class="aw-main-body-600 aw-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="u-flex u-gap-8">
<button <button
class="aw-radio-button" class="web-radio-button"
aria-label="helpful" aria-label="helpful"
on:click={() => { on:click={() => {
showFeedback = feedbackType === 'positive' ? false : true; showFeedback = feedbackType === 'positive' ? false : true;
@@ -66,7 +66,7 @@
<span class="icon-thumb-up" /> <span class="icon-thumb-up" />
</button> </button>
<button <button
class="aw-radio-button" class="web-radio-button"
aria-label="unhelpful" aria-label="unhelpful"
on:click={() => { on:click={() => {
showFeedback = feedbackType === 'negative' ? false : true; showFeedback = feedbackType === 'negative' ? false : true;
@@ -78,8 +78,8 @@
</button> </button>
</div> </div>
</div> </div>
<div class="aw-content-footer-header-end"> <div class="web-content-footer-header-end">
<ul class="aw-metadata aw-caption-400"> <ul class="web-metadata web-caption-400">
{#if date} {#if date}
<li>Last updated on {new Date(date)?.toLocaleDateString()}</li> <li>Last updated on {new Date(date)?.toLocaleDateString()}</li>
{/if} {/if}
@@ -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="aw-link u-flex u-gap-4 u-cross-baseline" class="web-link u-flex u-gap-4 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>
@@ -101,26 +101,26 @@
{#if showFeedback} {#if showFeedback}
<form <form
on:submit|preventDefault={handleSubmit} on:submit|preventDefault={handleSubmit}
class="aw-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 u-gap-8">
<label for="message"> <label for="message">
<span class="aw-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)
</span> </span>
</label> </label>
<textarea <textarea
class="aw-input-text" class="web-input-text"
id="message" id="message"
placeholder="Write your message" placeholder="Write your message"
bind:value={comment} bind:value={comment}
/> />
<label for="message" class="u-margin-block-start-8"> <label for="message" class="u-margin-block-start-8">
<span class="aw-u-color-text-primary">Email</span> <span class="web-u-color-text-primary">Email</span>
</label> </label>
<input <input
class="aw-input-text" class="web-input-text"
placeholder="Enter your email" placeholder="Enter your email"
type="email" type="email"
name="email" name="email"
@@ -129,21 +129,21 @@
/> />
</div> </div>
{#if submitted} {#if submitted}
<p class="aw-u-color-text-primary u-margin-block-start-16"> <p class="web-u-color-text-primary u-margin-block-start-16">
Your message has been sent successfully. We appreciate your feedback. Your message has been sent successfully. We appreciate your feedback.
</p> </p>
{/if} {/if}
{#if error} {#if error}
<p class="aw-u-color-text-primary u-margin-block-start-16"> <p class="web-u-color-text-primary u-margin-block-start-16">
There was an error submitting your feedback. Please try again later. There was an error submitting your feedback. Please try again later.
</p> </p>
{/if} {/if}
<div class="u-flex u-main-end u-margin-block-start-16 u-gap-8"> <div class="u-flex u-main-end u-margin-block-start-16 u-gap-8">
<button class="aw-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>
<button type="submit" class="aw-button" disabled={submitting || !email}> <button type="submit" class="web-button" disabled={submitting || !email}>
<span>Submit</span> <span>Submit</span>
</button> </button>
</div> </div>

2
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 aw-u-hide-mobile root"> <div class="u-position-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

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

@@ -81,50 +81,50 @@
<nav <nav
aria-label="Footer" aria-label="Footer"
class="aw-footer-nav u-margin-block-start-100 u-position-relative" class="web-footer-nav u-margin-block-start-100 u-position-relative"
class:aw-u-sep-block-start={!noBorder} class:web-u-sep-block-start={!noBorder}
> >
<img class="aw-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" />
<ul class="aw-footer-nav-main-list" use:melt={$root}> <ul class="web-footer-nav-main-list" use:melt={$root}>
{#each Object.entries(links) as [title, items]} {#each Object.entries(links) as [title, items]}
<li class="aw-footer-nav-main-item aw-is-not-mobile"> <li class="web-footer-nav-main-item web-is-not-mobile">
<h2 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow"> <h2 class="web-footer-nav-main-title web-is-not-mobile web-caption-500 web-eyebrow">
{title} {title}
</h2> </h2>
<ul class="aw-footer-nav-secondary-list aw-sub-body-400"> <ul class="web-footer-nav-secondary-list web-sub-body-400">
{#each items as { href, label, target, rel }} {#each items as { href, label, target, rel }}
<li> <li>
<a class="aw-link" {href} {target} {rel}>{label}</a> <a class="web-link" {href} {target} {rel}>{label}</a>
</li> </li>
{/each} {/each}
</ul> </ul>
</li> </li>
<li <li
class="aw-footer-nav-main-item aw-is-only-mobile" class="web-footer-nav-main-item web-is-only-mobile"
use:melt={$item({ value: title })} use:melt={$item({ value: title })}
> >
<h5 use:melt={$heading({ level: 5 })}> <h5 use:melt={$heading({ level: 5 })}>
<button <button
class="aw-footer-nav-button aw-is-only-mobile" class="web-footer-nav-button web-is-only-mobile"
use:melt={$trigger({ value: title })} use:melt={$trigger({ value: title })}
> >
<span class="aw-caption-500 aw-eyebrow">{title}</span> <span class="web-caption-500 web-eyebrow">{title}</span>
<span <span
class="aw-icon-chevron-down aw-u-transition" class="web-icon-chevron-down web-u-transition"
class:aw-u-rotate-180={$isSelected(title)} class:web-u-rotate-180={$isSelected(title)}
style:font-size="1rem" style:font-size="1rem"
/> />
</button> </button>
</h5> </h5>
{#if $isSelected(title)} {#if $isSelected(title)}
<ul <ul
class="aw-footer-nav-secondary-list aw-sub-body-400" class="web-footer-nav-secondary-list web-sub-body-400"
use:melt={$content({ value: title })} use:melt={$content({ value: title })}
transition:slide={{ duration: 250 }} transition:slide={{ duration: 250 }}
> >
{#each items as { href, label, target, rel }} {#each items as { href, label, target, rel }}
<li> <li>
<a class="aw-link" {href} {target} {rel}>{label}</a> <a class="web-link" {href} {target} {rel}>{label}</a>
</li> </li>
{/each} {/each}
</ul> </ul>

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

@@ -2,7 +2,7 @@
export let classes = ''; export let classes = '';
</script> </script>
<a href="https://cloud.appwrite.io" class={`aw-button ${classes}`}> <a href="https://cloud.appwrite.io" class={`web-button ${classes}`}>
<span class="logged-in"><slot name="isLoggedIn">Go to Console</slot></span> <span class="logged-in"><slot name="isLoggedIn">Go to Console</slot></span>
<span class="not-logged-in"><slot name="isNotLoggedIn">Get started</slot></span> <span class="not-logged-in"><slot name="isNotLoggedIn">Get started</slot></span>
</a> </a>

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

@@ -8,13 +8,13 @@
</script> </script>
{#if variant === 'homepage'} {#if variant === 'homepage'}
<footer class="aw-main-footer u-position-relative u-margin-block-start-48"> <footer class="web-main-footer u-position-relative u-margin-block-start-48">
<ul class="u-flex u-gap-8"> <ul class="u-flex u-gap-8">
{#each socials as social} {#each socials as social}
<li> <li>
<a <a
href={social.link} href={social.link}
class="aw-icon-button" class="web-icon-button"
aria-label={social.label} aria-label={social.label}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -28,15 +28,15 @@
</footer> </footer>
{:else if variant === 'docs'} {:else if variant === 'docs'}
<footer <footer
class="aw-main-footer is-with-bg-color u-margin-block-start-32 u-small u-position-relative" class="web-main-footer is-with-bg-color u-margin-block-start-32 u-small u-position-relative"
> >
<div class="aw-main-footer-grid-1"> <div class="web-main-footer-grid-1">
<ul class="aw-main-footer-grid-1-column-1 u-flex u-gap-8"> <ul class="web-main-footer-grid-1-column-1 u-flex u-gap-8">
{#each socials as social} {#each socials as social}
<li> <li>
<a <a
href={social.link} href={social.link}
class="aw-icon-button" class="web-icon-button"
aria-label={social.label} aria-label={social.label}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -46,10 +46,10 @@
</li> </li>
{/each} {/each}
</ul> </ul>
<div class="aw-main-footer-grid-1-column-2"> <div class="web-main-footer-grid-1-column-2">
<ThemeSelect /> <ThemeSelect />
</div> </div>
<ul class="aw-main-footer-grid-1-column-3 aw-main-footer-links"> <ul class="web-main-footer-grid-1-column-3 web-main-footer-links">
<li> <li>
<a href="/discord" target="_blank" rel="noopener noreferrer">Support</a> <a href="/discord" target="_blank" rel="noopener noreferrer">Support</a>
</li> </li>
@@ -62,7 +62,7 @@
<a href="https://github.com/appwrite/appwrite/releases" target="_blank" rel="noopener noreferrer">Changelog</a> <a href="https://github.com/appwrite/appwrite/releases" target="_blank" rel="noopener noreferrer">Changelog</a>
</li> --> </li> -->
</ul> </ul>
<div class="aw-main-footer-grid-1-column-4 aw-main-footer-copyright"> <div class="web-main-footer-grid-1-column-4 web-main-footer-copyright">
Copyright © {year} Appwrite Copyright © {year} Appwrite
</div> </div>
</div> </div>
@@ -70,7 +70,7 @@
{/if} {/if}
<style lang="scss"> <style lang="scss">
.aw-icon-button { .web-icon-button {
display: grid; display: grid;
} }
</style> </style>

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

@@ -3,13 +3,13 @@
export let description: string; export let description: string;
</script> </script>
<div class="aw-card is-normal has-border-gradient"> <div class="web-card is-normal has-border-gradient">
<div class="aw-title aw-u-color-text-primary">{metric}</div> <div class="web-title web-u-color-text-primary">{metric}</div>
<div class="aw-description">{description}</div> <div class="web-description">{description}</div>
</div> </div>
<style lang="scss"> <style lang="scss">
.aw-card { .web-card {
padding: 1.25rem; padding: 1.25rem;
} }
</style> </style>

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

@@ -14,37 +14,37 @@
<svelte:window on:resize={() => open && (open = false)} /> <svelte:window on:resize={() => open && (open = false)} />
<nav class="aw-side-nav aw-is-not-desktop" class:u-hide={!open}> <nav class="web-side-nav web-is-not-desktop" class:u-hide={!open}>
<div class="aw-side-nav-wrapper aw-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="u-flex items-center u-gap-8">
<a href="https://cloud.appwrite.io/register" class="aw-button is-secondary aw-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="aw-u-flex-1" /> <IsLoggedIn classes="web-u-flex-1" />
</div> </div>
<div class="aw-side-nav-scroll"> <div class="web-side-nav-scroll">
<section> <section>
<ul> <ul>
{#each links as { href, label }} {#each links as { href, label }}
<li> <li>
<a class="aw-side-nav-button" {href}> <a class="web-side-nav-button" {href}>
<span class="aw-caption-400">{label}</span> <span class="web-caption-400">{label}</span>
</a> </a>
</li> </li>
{/each} {/each}
</ul> </ul>
</section> </section>
</div> </div>
<div class="aw-side-nav-mobile-footer-buttons"> <div class="web-side-nav-mobile-footer-buttons">
<a <a
href="https://github.com/appwrite/appwrite/stargazers" href="https://github.com/appwrite/appwrite/stargazers"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-button is-text aw-u-inline-width-100-percent-mobile" class="web-button is-text web-u-inline-width-100-percent-mobile"
> >
<span class="aw-icon-star" aria-hidden="true" /> <span class="web-icon-star" aria-hidden="true" />
<span class="text">Star on GitHub</span> <span class="text">Star on GitHub</span>
<span class="aw-inline-tag aw-sub-body-400">{GITHUB_STARS}</span> <span class="web-inline-tag web-sub-body-400">{GITHUB_STARS}</span>
</a> </a>
</div> </div>
</div> </div>

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

@@ -78,16 +78,16 @@
</svg> </svg>
</div> </div>
<div class="aw-big-padding-section"> <div class="web-big-padding-section">
<div class="aw-big-padding-section-level-1"> <div class="web-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<div class="aw-grid-1-1-opt-2 u-gap-32"> <div class="web-grid-1-1-opt-2 u-gap-32">
<div class=""> <div class="">
<div class="aw-u-max-inline-size-none-mobile" class:aw-u-max-width-380={!submitted}> <div class="web-u-max-inline-size-none-mobile" class:web-u-max-width-380={!submitted}>
<section class="u-flex-vertical aw-u-gap-20"> <section class="u-flex-vertical web-u-gap-20">
<h1 class="aw-title aw-u-color-text-primary">Subscribe to our newsletter</h1> <h1 class="web-title web-u-color-text-primary">Subscribe to our newsletter</h1>
<p class="aw-description aw-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 Appwrite. Learn more
about engineering, product design, building community, and tips & tricks for using about engineering, product design, building community, and tips & tricks for using
Appwrite. Appwrite.
@@ -134,7 +134,7 @@
<div class="u-flex u-flex-vertical u-gap-4"> <div class="u-flex u-flex-vertical u-gap-4">
<label for="name">Your name</label> <label for="name">Your name</label>
<input <input
class="aw-input-text" class="web-input-text"
type="text" type="text"
placeholder="Enter your name" placeholder="Enter your name"
id="name" id="name"
@@ -146,7 +146,7 @@
<div class="u-flex u-flex-vertical u-gap-4"> <div class="u-flex u-flex-vertical u-gap-4">
<label for="email">Your email</label> <label for="email">Your email</label>
<input <input
class="aw-input-text" class="web-input-text"
type="email" type="email"
placeholder="Enter your email" placeholder="Enter your email"
required required
@@ -155,7 +155,7 @@
bind:value={email} bind:value={email}
/> />
</div> </div>
<button type="submit" class="aw-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}

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

@@ -1,61 +1,61 @@
<script lang="ts"> <script lang="ts">
</script> </script>
<img src="/images/bgs/pre-footer.png" alt="" class="aw-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="aw-grid-1-1 u-gap-32 aw-u-row-gap-80 u-position-relative"> <div class="web-grid-1-1 u-gap-32 web-u-row-gap-80 u-position-relative">
<section class="aw-hero u-flex aw-u-row-gap-32 u-main-center u-cross-center"> <section class="web-hero u-flex web-u-row-gap-32 u-main-center u-cross-center">
<h2 class="aw-display u-max-width-500 aw-u-text-align-center aw-u-color-text-primary"> <h2 class="web-display u-max-width-500 web-u-text-align-center web-u-color-text-primary">
Start building today Start building today
</h2> </h2>
<a <a
href="https://cloud.appwrite.io" href="https://cloud.appwrite.io"
class="aw-button is-transparent aw-u-cross-child-center" class="web-button is-transparent web-u-cross-child-center"
> >
<span class="text">Get started</span> <span class="text">Get started</span>
</a> </a>
</section> </section>
<section <section
class="aw-card is-transparent has-border-gradient aw-u-max-inline-width-584-mobile aw-u-margin-inline-auto-mobile aw-u-inline-width-100-percent-mobile" 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"
> >
<header class="aw-strip-plans-header"> <header class="web-strip-plans-header">
<div class="aw-strip-plans-header-wrapper aw-u-row-gap-24"> <div class="web-strip-plans-header-wrapper web-u-row-gap-24">
<h3 class="aw-title aw-u-color-text-primary">Our plans</h3> <h3 class="web-title web-u-color-text-primary">Our plans</h3>
</div> </div>
</header> </header>
<ul class="aw-strip-plans"> <ul class="web-strip-plans">
<li class="aw-strip-plans-item aw-strip-plans-container-query"> <li class="web-strip-plans-item web-strip-plans-container-query">
<div class="aw-strip-plans-item-wrapper"> <div class="web-strip-plans-item-wrapper">
<div class="aw-strip-plans-plan"> <div class="web-strip-plans-plan">
<h4 class="title aw-description">Starter</h4> <h4 class="title web-description">Starter</h4>
<div class="aw-title aw-u-color-text-primary">$0</div> <div class="web-title web-u-color-text-primary">$0</div>
<div class="info aw-caption-500" /> <div class="info web-caption-500" />
</div> </div>
<p class="aw-strip-plans-info aw-caption-500"> <p class="web-strip-plans-info web-caption-500">
For personal hobby projects and students. For personal hobby projects and students.
</p> </p>
<a <a
href="https://cloud.appwrite.io/register" href="https://cloud.appwrite.io/register"
class="aw-button is-secondary is-full-width-mobile aw-u-cross-child-end" class="web-button is-secondary is-full-width-mobile web-u-cross-child-end"
> >
<span class="text">Get started</span> <span class="text">Get started</span>
</a> </a>
</div> </div>
</li> </li>
<li class="aw-strip-plans-item aw-strip-plans-container-query"> <li class="web-strip-plans-item web-strip-plans-container-query">
<div class="aw-strip-plans-item-wrapper"> <div class="web-strip-plans-item-wrapper">
<div class="aw-strip-plans-plan"> <div class="web-strip-plans-plan">
<h4 class="title aw-description">Pro</h4> <h4 class="title web-description">Pro</h4>
<div class="aw-title aw-u-color-text-primary">$15</div> <div class="web-title web-u-color-text-primary">$15</div>
<div class="info aw-caption-500">per member/month</div> <div class="info web-caption-500">per member/month</div>
</div> </div>
<p class="aw-strip-plans-info aw-caption-500"> <p class="web-strip-plans-info web-caption-500">
For pro developers and teams that need to scale their products. For pro developers and teams that need to scale their products.
</p> </p>
<a <a
href="https://cloud.appwrite.io/console?type=createPro" href="https://cloud.appwrite.io/console?type=createPro"
class="aw-button is-full-width-mobile aw-u-cross-child-end" class="web-button is-full-width-mobile web-u-cross-child-end"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -63,18 +63,18 @@
</a> </a>
</div> </div>
</li> </li>
<li class="aw-strip-plans-item aw-strip-plans-container-query"> <li class="web-strip-plans-item web-strip-plans-container-query">
<div class="aw-strip-plans-item-wrapper"> <div class="web-strip-plans-item-wrapper">
<div class="aw-strip-plans-plan"> <div class="web-strip-plans-plan">
<h4 class="title aw-description">Scale</h4> <h4 class="title web-description">Scale</h4>
<div class="aw-title aw-u-color-text-primary">$685</div> <div class="web-title web-u-color-text-primary">$685</div>
<div class="info aw-caption-500">per org/month</div> <div class="info web-caption-500">per org/month</div>
</div> </div>
<p class="aw-strip-plans-info aw-caption-500"> <p class="web-strip-plans-info web-caption-500">
For pro developers and production projects that need the ability to scale. For pro developers and production projects that need the ability to scale.
</p> </p>
<button <button
class="aw-button is-full-width-mobile is-secondary aw-u-cross-child-end" class="web-button is-full-width-mobile is-secondary web-u-cross-child-end"
disabled disabled
> >
<span class="text">Coming soon</span> <span class="text">Coming soon</span>
@@ -86,7 +86,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
.aw-pre-footer-bg { .web-pre-footer-bg {
position: absolute; position: absolute;
top: clamp(300px, 50vw, 50%); top: clamp(300px, 50vw, 50%);
left: clamp(300px, 50vw, 50%); left: clamp(300px, 50vw, 50%);

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

@@ -150,24 +150,24 @@
class="wrapper u-position-fixed u-padding-0 u-inset-0 u-flex u-main-center u-cross-center" class="wrapper u-position-fixed u-padding-0 u-inset-0 u-flex u-main-center u-cross-center"
data-visible={open ? true : undefined} data-visible={open ? true : undefined}
style:z-index="100" style:z-index="100"
style:background="hsl(var(--aw-color-black) / 0.3)" style:background="hsl(var(--web-color-black) / 0.3)"
style:backdrop-filter="blur(15px)" style:backdrop-filter="blur(15px)"
style:-webkit-backdrop-filter="blur(15px)" style:-webkit-backdrop-filter="blur(15px)"
bind:this={container} bind:this={container}
on:click={handleExit} on:click={handleExit}
> >
<div <div
class="aw-input-text-search-wrapper aw-u-max-width-680 aw-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="aw-icon-search u-z-index-5" class="web-icon-search u-z-index-5"
aria-hidden="true" aria-hidden="true"
style="inset-block-start:0.9rem" style="inset-block-start:0.9rem"
/> />
<div id="searchbox" /> <div id="searchbox" />
<input <input
class="aw-input-button -u-padding-block-0 u-position-relative u-z-index-1" class="web-input-button -u-padding-block-0 u-position-relative u-z-index-1"
type="text" type="text"
id="search" id="search"
bind:value bind:value
@@ -184,14 +184,14 @@
}} }}
/> />
<div <div
class="aw-card is-normal u-flex-vertical u-gap-24" class="web-card is-normal u-flex-vertical u-gap-24"
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;"
> >
{#if value} {#if value}
<section> <section>
{#if results.length > 0} {#if results.length > 0}
<h6 class="aw-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-gap-4 u-margin-block-start-8">
{#each results as hit, i (hit.uid)} {#each results as hit, i (hit.uid)}
{@const relevantSubtitle = getRelevantSubtitle(hit)} {@const relevantSubtitle = getRelevantSubtitle(hit)}
@@ -199,25 +199,25 @@
<a <a
data-hit={i} data-hit={i}
href={createHref(hit)} href={createHref(hit)}
class="aw-button aw-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-gap-8 u-min-width-100-percent
aw-u-padding-block-8 aw-padding-inline-12 aw-u-cross-start u-max-width-100-percent" web-u-padding-block-8 web-padding-inline-12 web-u-cross-start u-max-width-100-percent"
use:melt={$option({ use:melt={$option({
value: hit, value: hit,
label: hit.title ?? i.toString() label: hit.title ?? i.toString()
})} })}
> >
<div class="aw-u-trim-1"> <div class="web-u-trim-1">
<span class="aw-u-color-text-secondary">{hit.h1}</span> <span class="web-u-color-text-secondary">{hit.h1}</span>
{#if relevantSubtitle} {#if relevantSubtitle}
<span class="aw-u-color-text-secondary"> / </span> <span class="web-u-color-text-secondary"> / </span>
<span class="aw-u-color-text-primary"> <span class="web-u-color-text-primary">
{relevantSubtitle} {relevantSubtitle}
</span> </span>
{/if} {/if}
</div> </div>
{#if hit.p} {#if hit.p}
<div <div
class="u-inline aw-u-color-text-secondary aw-u-trim-1" class="u-inline web-u-color-text-secondary web-u-trim-1"
> >
{hit.p} {hit.p}
</div> </div>
@@ -227,14 +227,14 @@
{/each} {/each}
</ul> </ul>
{:else} {:else}
<p class="aw-caption-400"> <p class="web-caption-400">
No results found for <span class="u-bold">{value}</span> No results found for <span class="u-bold">{value}</span>
</p> </p>
{/if} {/if}
</section> </section>
{/if} {/if}
<section> <section>
<h6 class="aw-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-gap-4 u-margin-block-start-8">
{#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)}
@@ -246,13 +246,13 @@
value: hit, value: hit,
label: hit.title ?? i.toString() label: hit.title ?? i.toString()
})} })}
class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent aw-u-padding-block-4 aw-u-cross-start" 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"
> >
<div class="aw-u-trim-1"> <div class="web-u-trim-1">
<span class="aw-u-color-text-secondary">{hit.h1}</span> <span class="web-u-color-text-secondary">{hit.h1}</span>
{#if hit.h2} {#if hit.h2}
<span class="aw-u-color-text-secondary"> / </span> <span class="web-u-color-text-secondary"> / </span>
<span class="aw-u-color-text-primary">{hit.h2}</span> <span class="web-u-color-text-primary">{hit.h2}</span>
{/if} {/if}
</div> </div>
</a> </a>
@@ -276,11 +276,11 @@
pointer-events: auto; pointer-events: auto;
} }
a.aw-button { a.web-button {
scroll-margin-block: 1rem; scroll-margin-block: 1rem;
} }
.aw-card { .web-card {
margin-block-start: -0.0625rem; margin-block-start: -0.0625rem;
max-block-size: min(18.75rem, calc(100vh - 5.5rem)); max-block-size: min(18.75rem, calc(100vh - 5.5rem));
border-block-start-width: 0; border-block-start-width: 0;

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

@@ -80,9 +80,9 @@
</script> </script>
<button <button
class="aw-select is-colored" class="web-select is-colored"
{id} {id}
class:aw-is-not-mobile={nativeMobile} class:web-is-not-mobile={nativeMobile}
use:melt={$trigger} use:melt={$trigger}
aria-label="Select theme" aria-label="Select theme"
> >
@@ -97,8 +97,8 @@
{#if $open} {#if $open}
<div <div
class="aw-select-menu" class="web-select-menu"
class:aw-is-not-mobile={nativeMobile} class:web-is-not-mobile={nativeMobile}
style:z-index={10000} style:z-index={10000}
use:melt={$menu} use:melt={$menu}
transition:fly={flyParams} transition:fly={flyParams}
@@ -108,7 +108,7 @@
{#if isDefault} {#if isDefault}
<div class="u-flex u-flex-vertical u-gap-2"> <div class="u-flex u-flex-vertical u-gap-2">
{#each group.options as option} {#each group.options as option}
<button class="aw-select-option" use:melt={$optionEl(option)}> <button class="web-select-option" use:melt={$optionEl(option)}>
{#if option.icon} {#if option.icon}
<span class={option.icon} aria-hidden="true" /> <span class={option.icon} aria-hidden="true" />
{/if} {/if}
@@ -117,13 +117,13 @@
{/each} {/each}
</div> </div>
{:else} {:else}
<div class="aw-select-group" use:melt={$groupEl(group.label)}> <div class="web-select-group" use:melt={$groupEl(group.label)}>
<span class="aw-select-group-label" use:melt={$groupLabel(group.label)}> <span class="web-select-group-label" use:melt={$groupLabel(group.label)}>
{group.label} {group.label}
</span> </span>
{#each group.options as option} {#each group.options as option}
<button class="aw-select-option" use:melt={$optionEl(option)}> <button class="web-select-option" use:melt={$optionEl(option)}>
{#if option.icon} {#if option.icon}
<span class={option.icon} aria-hidden="true" /> <span class={option.icon} aria-hidden="true" />
{/if} {/if}
@@ -137,7 +137,7 @@
{/if} {/if}
<div <div
class="aw-select is-colored aw-is-only-mobile aw-u-inline-width-100-percent-mobile-break1" class="web-select is-colored web-is-only-mobile web-u-inline-width-100-percent-mobile-break1"
style:display={nativeMobile ? undefined : 'none'} style:display={nativeMobile ? undefined : 'none'}
> >
{#if selectedOption?.icon} {#if selectedOption?.icon}
@@ -167,7 +167,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
.aw-select { .web-select {
min-width: var(--min-width, var(--p-select-min-width)); min-width: var(--min-width, var(--p-select-min-width));
} }
</style> </style>

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

@@ -61,11 +61,11 @@
}>; }>;
</script> </script>
<ul class="u-flex u-flex-wrap u-gap-16 aw-u-margin-block-32-mobile aw-u-margin-block-40-not-mobile"> <ul class="u-flex u-flex-wrap u-gap-16 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="aw-icon-button aw-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>

6
src/lib/components/ThemeSelect.svelte
View File

@@ -7,17 +7,17 @@
{ {
value: 'dark', value: 'dark',
label: 'Dark', label: 'Dark',
icon: 'aw-icon-dark' icon: 'web-icon-dark'
}, },
{ {
value: 'light', value: 'light',
label: 'Light', label: 'Light',
icon: 'aw-icon-light' icon: 'web-icon-light'
}, },
{ {
value: 'system', value: 'system',
label: 'System', label: 'System',
icon: 'aw-icon-system' icon: 'web-icon-system'
} }
]; ];
</script> </script>

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

@@ -14,10 +14,10 @@
$: progress = Math.max(...$activeHeadingIdxs) / ($headingsTree.length - 1); $: progress = Math.max(...$activeHeadingIdxs) / ($headingsTree.length - 1);
</script> </script>
<aside class="aw-grid-120-1fr-auto-side" class:aw-is-mobile-closed={!showToc}> <aside class="web-grid-120-1fr-auto-side" class:web-is-mobile-closed={!showToc}>
<div class="aw-page-steps"> <div class="web-page-steps">
<div class="aw-page-steps-location aw-is-not-mobile" style="--location:{progress * 100}%;"> <div class="web-page-steps-location web-is-not-mobile" style="--location:{progress * 100}%;">
<span class="aw-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"
width="16" width="16"

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

@@ -14,7 +14,7 @@
} = getTocCtx(); } = getTocCtx();
</script> </script>
<ul class="aw-page-steps-list aw-sub-body-500"> <ul class="web-page-steps-list web-sub-body-500">
{#if tree && tree.length} {#if tree && tree.length}
{#each tree as heading, i (i)} {#each tree as heading, i (i)}
<li> <li>

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

@@ -63,7 +63,7 @@
{/if} {/if}
{#if $open && !disabled} {#if $open && !disabled}
<div use:melt={$content} class="aw-tooltip aw-sub-body-400" transition:fly={flyParams}> <div use:melt={$content} class="web-tooltip web-sub-body-400" transition:fly={flyParams}>
<div use:melt={$arrow} /> <div use:melt={$arrow} />
<slot name="tooltip" /> <slot name="tooltip" />
</div> </div>

10
src/lib/constants.ts
View File

@@ -15,27 +15,27 @@ export type Social = {
export const socials: Array<Social> = [ export const socials: Array<Social> = [
{ {
icon: 'aw-icon-discord', icon: 'web-icon-discord',
label: 'Discord', label: 'Discord',
link: 'https://appwrite.io/discord' link: 'https://appwrite.io/discord'
}, },
{ {
icon: 'aw-icon-github', icon: 'web-icon-github',
label: 'Github', label: 'Github',
link: 'https://github.com/appwrite' link: 'https://github.com/appwrite'
}, },
{ {
icon: 'aw-icon-x', icon: 'web-icon-x',
label: 'Twitter', label: 'Twitter',
link: 'https://twitter.com/intent/follow?screen_name=appwrite' link: 'https://twitter.com/intent/follow?screen_name=appwrite'
}, },
{ {
icon: 'aw-icon-linkedin', icon: 'web-icon-linkedin',
label: 'LinkedIn', label: 'LinkedIn',
link: 'https://www.linkedin.com/company/appwrite' link: 'https://www.linkedin.com/company/appwrite'
}, },
{ {
icon: 'aw-icon-youtube', icon: 'web-icon-youtube',
label: 'YouTube', label: 'YouTube',
link: 'https://www.youtube.com/c/appwrite?sub_confirmation=1' link: 'https://www.youtube.com/c/appwrite?sub_confirmation=1'
} }

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

@@ -47,9 +47,9 @@
export let isReferences = false; export let isReferences = false;
const variantClasses: Record<DocsLayoutVariant, string> = { const variantClasses: Record<DocsLayoutVariant, string> = {
default: 'aw-grid-side-nav aw-container u-padding-inline-0', default: 'web-grid-side-nav web-container u-padding-inline-0',
expanded: 'aw-grid-huge-navs', expanded: 'web-grid-huge-navs',
'two-side-navs': 'aw-grid-two-side-navs' 'two-side-navs': 'web-grid-two-side-navs'
}; };
$: variantClass = variantClasses[variant]; $: variantClass = variantClasses[variant];
@@ -79,18 +79,18 @@
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown} />
<div class="u-position-relative"> <div class="u-position-relative">
<section class="aw-mobile-header is-transparent"> <section class="web-mobile-header is-transparent">
<div class="aw-mobile-header-start"> <div class="web-mobile-header-start">
<a href="/" aria-label="homepage"> <a href="/" aria-label="homepage">
<img <img
class="aw-logo u-only-dark" class="web-logo u-only-dark"
src="/images/logos/appwrite.svg" src="/images/logos/appwrite.svg"
alt="appwrite" alt="appwrite"
height="24" height="24"
width="130" width="130"
/> />
<img <img
class="aw-logo u-only-light" class="web-logo u-only-light"
src="/images/logos/appwrite-light.svg" src="/images/logos/appwrite-light.svg"
alt="appwrite" alt="appwrite"
height="24" height="24"
@@ -98,78 +98,78 @@
/> />
</a> </a>
</div> </div>
<div class="aw-mobile-header-end"> <div class="web-mobile-header-end">
<a href="https://cloud.appwrite.io" class="aw-button aw-is-only-desktop"> <a href="https://cloud.appwrite.io" class="web-button web-is-only-desktop">
<span class="aw-sub-body-500">Go to Console</span> <span class="web-sub-body-500">Go to Console</span>
</a> </a>
<button class="aw-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="aw-icon-close" /> <span aria-hidden="true" class="web-icon-close" />
{:else} {:else}
<span aria-hidden="true" class="aw-icon-hamburger-menu" /> <span aria-hidden="true" class="web-icon-hamburger-menu" />
{/if} {/if}
</button> </button>
</div> </div>
</section> </section>
<header <header
class="aw-main-header {isReferences ? 'is-reference' : 'is-docs'}" class="web-main-header {isReferences ? 'is-reference' : 'is-docs'}"
class:is-transparent={variant !== 'expanded'} class:is-transparent={variant !== 'expanded'}
> >
<div class="aw-main-header-wrapper"> <div class="web-main-header-wrapper">
<div class="aw-main-header-start u-stretch"> <div class="web-main-header-start u-stretch">
<a href="/" aria-label="homepage"> <a href="/" aria-label="homepage">
<img <img
class="aw-logo u-only-dark" class="web-logo u-only-dark"
src="/images/logos/appwrite.svg" src="/images/logos/appwrite.svg"
alt="appwrite" alt="appwrite"
height="24" height="24"
width="130" width="130"
/> />
<img <img
class="aw-logo u-only-light" class="web-logo u-only-light"
src="/images/logos/appwrite-light.svg" src="/images/logos/appwrite-light.svg"
alt="appwrite" alt="appwrite"
height="24" height="24"
width="130" width="130"
/> />
</a> </a>
<nav class="aw-main-header-nav" aria-label="Top"> <nav class="web-main-header-nav" aria-label="Top">
<ul class="aw-main-header-nav-list"> <ul class="web-main-header-nav-list">
<li class="aw-main-header-nav-item"> <li class="web-main-header-nav-item">
<a class="aw-link" href="/docs">Docs</a> <a class="web-link" href="/docs">Docs</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="u-flex u-stretch aw-u-margin-inline-start-48"> <div class="u-flex u-stretch web-u-margin-inline-start-48">
<button <button
class="aw-input-button aw-u-flex-basis-400" class="web-input-button web-u-flex-basis-400"
on:click={() => ($layoutState.showSearch = true)} on:click={() => ($layoutState.showSearch = true)}
> >
<span class="aw-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="u-flex u-gap-4 u-margin-inline-start-auto">
{#if isMac()} {#if isMac()}
<span class="aw-kbd" aria-label="command">⌘</span> <span class="web-kbd" aria-label="command">⌘</span>
{:else} {:else}
<span class="aw-kbd" aria-label="control">Ctrl</span> <span class="web-kbd" aria-label="control">Ctrl</span>
{/if} {/if}
<span class="aw-kbd">K</span> <span class="web-kbd">K</span>
</div> </div>
</button> </button>
</div> </div>
</div> </div>
<div class="aw-main-header-end"> <div class="web-main-header-end">
<div class="u-flex u-gap-8"> <div class="u-flex u-gap-8">
<a <a
href="https://github.com/appwrite/appwrite/stargazers" href="https://github.com/appwrite/appwrite/stargazers"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-button is-text" class="web-button is-text"
> >
<span class="aw-icon-star" aria-hidden="true" /> <span class="web-icon-star" aria-hidden="true" />
<span class="text">Star on GitHub</span> <span class="text">Star on GitHub</span>
<span class="aw-inline-tag aw-sub-body-400">{GITHUB_STARS}</span> <span class="web-inline-tag web-sub-body-400">{GITHUB_STARS}</span>
</a> </a>
<IsLoggedIn /> <IsLoggedIn />
</div> </div>

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

@@ -24,21 +24,21 @@
</script> </script>
<main class="u-contents" id="main"> <main class="u-contents" id="main">
<article class="aw-article u-contents"> <article class="web-article u-contents">
<header class="aw-article-header"> <header class="web-article-header">
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start"> <div class="web-article-header-start u-flex-vertical web-u-cross-start">
{#if back} {#if back}
<a <a
href={back} href={back}
class=" class="
aw-button is-text aw-is-only-mobile web-button is-text web-is-only-mobile
aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12" web-u-padding-block-0 web-u-padding-inline-start-0 web-u-padding-inline-end-12"
aria-label="previous page" aria-label="previous page"
> >
<span class="icon-cheveron-left" aria-hidden="true" /> <span class="icon-cheveron-left" aria-hidden="true" />
</a> </a>
{/if} {/if}
<ul class="aw-metadata aw-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="u-position-relative u-flex u-cross-center">
@@ -46,58 +46,58 @@
<a <a
href={back} href={back}
class=" class="
aw-button is-text is-icon aw-u-cross-center aw-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 aw-u-translate-x-negative" u-position-absolute u-inset-inline-start-0 web-u-translate-x-negative"
aria-label="previous page" aria-label="previous page"
> >
<span <span
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile" class="icon-cheveron-left web-u-font-size-24 web-u-color-text-primary web-is-not-mobile"
aria-hidden="true" aria-hidden="true"
/> />
</a> </a>
{/if} {/if}
<h1 class="aw-title">{title}</h1> <h1 class="web-title">{title}</h1>
</div> </div>
</div> </div>
<div class="aw-article-header-end" /> <div class="web-article-header-end" />
</header> </header>
<div class="aw-article-content"> <div class="web-article-content">
<slot /> <slot />
<Feedback {date} /> <Feedback {date} />
</div> </div>
<aside class="aw-references-menu aw-u-padding-inline-start-24"> <aside class="web-references-menu web-u-padding-inline-start-24">
<div class="aw-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="u-flex u-main-space-between u-cross-center u-gap-16">
<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5> <h5 class="web-references-menu-title web-eyebrow">On This Page</h5>
</div> </div>
<ol class="aw-references-menu-list"> <ol class="web-references-menu-list">
{#each toc as parent (parent.href)} {#each toc as parent (parent.href)}
<li <li
class="aw-references-menu-item" class="web-references-menu-item"
class:article-scroll-indicator={parent.selected} class:article-scroll-indicator={parent.selected}
> >
<a <a
href={parent.href} href={parent.href}
class="aw-references-menu-link" class="web-references-menu-link"
class:is-selected={parent.selected} class:is-selected={parent.selected}
> >
{#if parent?.step} {#if parent?.step}
<span class="aw-numeric-badge">{parent.step}</span> <span class="web-numeric-badge">{parent.step}</span>
{/if} {/if}
<span class="aw-caption-400">{parent.title}</span> <span class="web-caption-400">{parent.title}</span>
</a> </a>
{#if parent.children} {#if parent.children}
<ol <ol
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32" class="web-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
> >
{#each parent.children as child} {#each parent.children as child}
<li class="aw-references-menu-item"> <li class="web-references-menu-item">
<a <a
href={child.href} href={child.href}
class="aw-references-menu-link" class="web-references-menu-link"
> >
<span class="aw-caption-400">{child.title}</span <span class="web-caption-400">{child.title}</span
> >
</a> </a>
</li> </li>
@@ -109,11 +109,11 @@
</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="aw-link u-inline-flex u-cross-center u-gap-8" class="web-link u-inline-flex u-cross-center u-gap-8"
use:scrollToTop use:scrollToTop
> >
<span class="aw-icon-arrow-up" aria-hidden="true" /> <span class="web-icon-arrow-up" aria-hidden="true" />
<span class="aw-caption-400">Back to top</span> <span class="web-caption-400">Back to top</span>
</button> </button>
</div> </div>
{/if} {/if}

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

@@ -17,18 +17,18 @@
</script> </script>
<main class="u-contents" id="main"> <main class="u-contents" id="main">
<article class="aw-article u-contents"> <article class="web-article u-contents">
<header class="aw-article-header"> <header class="web-article-header">
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start"> <div class="web-article-header-start u-flex-vertical web-u-cross-start">
<button <button
class=" class="
aw-button is-text aw-is-only-mobile web-button is-text web-is-only-mobile
aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12" web-u-padding-block-0 web-u-padding-inline-start-0 web-u-padding-inline-end-12"
aria-label="previous page" aria-label="previous page"
> >
<span class="icon-cheveron-left" aria-hidden="true" /> <span class="icon-cheveron-left" aria-hidden="true" />
</button> </button>
<ul class="aw-metadata aw-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="u-position-relative u-flex u-cross-center">
@@ -36,29 +36,29 @@
<a <a
href={back} href={back}
class=" class="
aw-button is-text is-only-icon aw-u-cross-center aw-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 aw-u-translate-x-negative" u-position-absolute u-inset-inline-start-0 web-u-translate-x-negative"
aria-label="previous page" aria-label="previous page"
> >
<span <span
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile" class="icon-cheveron-left web-u-font-size-24 web-u-color-text-primary web-is-not-mobile"
aria-hidden="true" aria-hidden="true"
/> />
</a> </a>
{/if} {/if}
<h1 class="aw-title">{title}</h1> <h1 class="web-title">{title}</h1>
</div> </div>
</div> </div>
<div class="aw-article-header-end" /> <div class="web-article-header-end" />
</header> </header>
<div class="aw-article-content"> <div class="web-article-content">
<slot /> <slot />
<div class="u-flex u-main-space-between"> <div class="u-flex u-main-space-between">
{#if prevStep} {#if prevStep}
<a href={prevStep.href} class="aw-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" />
<span class="aw-sub-body-500"> <span class="web-sub-body-500">
Step {prevStep.step}<span class="aw-is-not-mobile" Step {prevStep.step}<span class="web-is-not-mobile"
>: {prevStep.title}</span >: {prevStep.title}</span
> >
</span> </span>
@@ -67,11 +67,11 @@
{#if nextStep} {#if nextStep}
<a <a
href={nextStep.href} href={nextStep.href}
class="aw-button is-secondary" class="web-button is-secondary"
style:margin-left={prevStep ? undefined : 'auto'} style:margin-left={prevStep ? undefined : 'auto'}
> >
<span class="aw-sub-body-500"> <span class="web-sub-body-500">
Step {nextStep.step}<span class="aw-is-not-mobile" Step {nextStep.step}<span class="web-is-not-mobile"
>: {nextStep.title}</span >: {nextStep.title}</span
> >
</span> </span>
@@ -82,54 +82,54 @@
<Feedback {date} /> <Feedback {date} />
</div> </div>
<aside class="aw-references-menu aw-u-padding-inline-start-24"> <aside class="web-references-menu web-u-padding-inline-start-24">
<div class="aw-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="u-flex u-main-space-between u-cross-center u-gap-16">
<h5 class="aw-references-menu-title aw-eyebrow">Tutorial Steps</h5> <h5 class="web-references-menu-title web-eyebrow">Tutorial Steps</h5>
</div> </div>
<ol class="aw-references-menu-list"> <ol class="web-references-menu-list">
{#each tutorials as tutorial} {#each tutorials as tutorial}
{@const isCurrentStep = currentStep === tutorial.step} {@const isCurrentStep = currentStep === tutorial.step}
<li class="aw-references-menu-item"> <li class="web-references-menu-item">
<a <a
href={tutorial.href} href={tutorial.href}
class="aw-references-menu-link" class="web-references-menu-link"
class:tutorial-scroll-indicator={isCurrentStep && !toc.length} class:tutorial-scroll-indicator={isCurrentStep && !toc.length}
class:is-selected={isCurrentStep} class:is-selected={isCurrentStep}
> >
<span class="aw-numeric-badge">{tutorial.step}</span> <span class="web-numeric-badge">{tutorial.step}</span>
<span class="aw-caption-400">{tutorial.title}</span> <span class="web-caption-400">{tutorial.title}</span>
</a> </a>
{#if isCurrentStep} {#if isCurrentStep}
{#each toc as parent} {#each toc as parent}
<ol <ol
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32" class="web-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
> >
<li class="aw-references-menu-item"> <li class="web-references-menu-item">
<a <a
href={parent.href} href={parent.href}
class="aw-references-menu-link is-inner" class="web-references-menu-link is-inner"
class:tutorial-scroll-indicator={parent.selected} class:tutorial-scroll-indicator={parent.selected}
class:is-selected={parent.selected} class:is-selected={parent.selected}
> >
{#if parent?.step} {#if parent?.step}
<span class="aw-numeric-badge" <span class="web-numeric-badge"
>{parent.step}</span >{parent.step}</span
> >
{/if} {/if}
<span class="aw-caption-400">{parent.title}</span> <span class="web-caption-400">{parent.title}</span>
</a> </a>
{#if parent.children} {#if parent.children}
<ol <ol
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32" class="web-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
> >
{#each parent.children as child} {#each parent.children as child}
<li class="aw-references-menu-item"> <li class="web-references-menu-item">
<a <a
href={child.href} href={child.href}
class="aw-references-menu-link" class="web-references-menu-link"
> >
<span class="aw-caption-400" <span class="web-caption-400"
>{child.title}</span >{child.title}</span
> >
</a> </a>
@@ -145,9 +145,9 @@
{/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="aw-link u-inline-flex u-cross-center u-gap-8" use:scrollToTop> <button class="web-link u-inline-flex u-cross-center u-gap-8" use:scrollToTop>
<span class="aw-icon-arrow-up" aria-hidden="true" /> <span class="web-icon-arrow-up" aria-hidden="true" />
<span class="aw-caption-400">Back to top</span> <span class="web-caption-400">Back to top</span>
</button> </button>
</div> </div>
</div> </div>

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

@@ -59,8 +59,8 @@
(element) => { (element) => {
const { classList, dataset } = element as HTMLElement; const { classList, dataset } = element as HTMLElement;
if ( if (
classList.contains('aw-mobile-header') || classList.contains('web-mobile-header') ||
classList.contains('aw-main-header') || classList.contains('web-main-header') ||
element === document.body || element === document.body ||
typeof dataset['themeIgnore'] === 'string' typeof dataset['themeIgnore'] === 'string'
) { ) {
@@ -133,21 +133,21 @@
<div class="u-position-relative"> <div class="u-position-relative">
<section <section
class="aw-mobile-header theme-{resolvedTheme}" class="web-mobile-header theme-{resolvedTheme}"
class:is-transparent={browser && !$isMobileNavOpen} class:is-transparent={browser && !$isMobileNavOpen}
class:is-hidden={$isHeaderHidden} class:is-hidden={$isHeaderHidden}
> >
<div class="aw-mobile-header-start"> <div class="web-mobile-header-start">
<a href="/"> <a href="/">
<img <img
class="aw-logo aw-u-only-dark" class="web-logo web-u-only-dark"
src="/images/logos/appwrite.svg" src="/images/logos/appwrite.svg"
alt="appwrite" alt="appwrite"
height="24" height="24"
width="130" width="130"
/> />
<img <img
class="aw-logo aw-u-only-light" class="web-logo web-u-only-light"
src="/images/logos/appwrite-light.svg" src="/images/logos/appwrite-light.svg"
alt="appwrite" alt="appwrite"
height="24" height="24"
@@ -155,73 +155,73 @@
/> />
</a> </a>
</div> </div>
<div class="aw-mobile-header-end"> <div class="web-mobile-header-end">
{#if !$isMobileNavOpen} {#if !$isMobileNavOpen}
<a href="https://cloud.appwrite.io" class="aw-button"> <a href="https://cloud.appwrite.io" class="web-button">
<span class="text">Get started</span> <span class="text">Get started</span>
</a> </a>
{/if} {/if}
<button <button
class="aw-button is-text" class="web-button is-text"
aria-label="open navigation" aria-label="open navigation"
on:click={() => ($isMobileNavOpen = !$isMobileNavOpen)} on:click={() => ($isMobileNavOpen = !$isMobileNavOpen)}
> >
{#if $isMobileNavOpen} {#if $isMobileNavOpen}
<span aria-hidden="true" class="aw-icon-close" /> <span aria-hidden="true" class="web-icon-close" />
{:else} {:else}
<span aria-hidden="true" class="aw-icon-hamburger-menu" /> <span aria-hidden="true" class="web-icon-hamburger-menu" />
{/if} {/if}
</button> </button>
</div> </div>
</section> </section>
<header <header
class="aw-main-header is-special-padding theme-{resolvedTheme} is-transparent" class="web-main-header is-special-padding theme-{resolvedTheme} is-transparent"
class:is-hidden={$isHeaderHidden} class:is-hidden={$isHeaderHidden}
> >
<div class="aw-top-banner"> <div class="web-top-banner">
<div class="aw-top-banner-content aw-u-color-text-primary"> <div class="web-top-banner-content web-u-color-text-primary">
<a href="/discord" target="_blank" rel="noopener noreferrer"> <a href="/discord" target="_blank" rel="noopener noreferrer">
<span class="aw-caption-500">We are having lots of fun on</span> <span class="web-caption-500">We are having lots of fun on</span>
<span class="aw-icon-discord" aria-hidden="true" /> <span class="web-icon-discord" aria-hidden="true" />
<span class="aw-caption-500">Discord. Come and join us!</span> <span class="web-caption-500">Discord. Come and join us!</span>
</a> </a>
{#if browser} {#if browser}
<button <button
class="aw-top-banner-button" class="web-top-banner-button"
aria-label="close discord message" aria-label="close discord message"
on:click={hideTopBanner} on:click={hideTopBanner}
> >
<span class="aw-icon-close" aria-hidden="true" /> <span class="web-icon-close" aria-hidden="true" />
</button> </button>
{/if} {/if}
</div> </div>
</div> </div>
<div class="aw-main-header-wrapper"> <div class="web-main-header-wrapper">
<div class="aw-main-header-start"> <div class="web-main-header-start">
<a href="/"> <a href="/">
<img <img
class="aw-logo aw-u-only-dark" class="web-logo web-u-only-dark"
src="/images/logos/appwrite.svg" src="/images/logos/appwrite.svg"
alt="appwrite" alt="appwrite"
height="24" height="24"
width="130" width="130"
/> />
<img <img
class="aw-logo aw-u-only-light" class="web-logo web-u-only-light"
src="/images/logos/appwrite-light.svg" src="/images/logos/appwrite-light.svg"
alt="appwrite" alt="appwrite"
height="24" height="24"
width="130" width="130"
/> />
</a> </a>
<nav class="aw-main-header-nav" aria-label="Main"> <nav class="web-main-header-nav" aria-label="Main">
<ul class="aw-main-header-nav-list"> <ul class="web-main-header-nav-list">
{#each navLinks as navLink} {#each navLinks as navLink}
<li class="aw-main-header-nav-item"> <li class="web-main-header-nav-item">
<a <a
class="aw-link" class="web-link"
href={navLink.href} href={navLink.href}
data-initialized={$initialized ? '' : undefined} data-initialized={$initialized ? '' : undefined}
data-badge={navLink.showBadge ? '' : undefined} data-badge={navLink.showBadge ? '' : undefined}
@@ -232,16 +232,16 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="aw-main-header-end"> <div class="web-main-header-end">
<a <a
href="https://github.com/appwrite/appwrite/stargazers" href="https://github.com/appwrite/appwrite/stargazers"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-button is-text" class="web-button is-text"
> >
<span aria-hidden="true" class="aw-icon-star" /> <span aria-hidden="true" class="web-icon-star" />
<span class="text">Star on GitHub</span> <span class="text">Star on GitHub</span>
<span class="aw-inline-tag aw-sub-body-400">{GITHUB_STARS}</span> <span class="web-inline-tag web-sub-body-400">{GITHUB_STARS}</span>
</a> </a>
<IsLoggedIn /> <IsLoggedIn />
</div> </div>
@@ -250,8 +250,8 @@
<MobileNav bind:open={$isMobileNavOpen} links={navLinks} /> <MobileNav bind:open={$isMobileNavOpen} links={navLinks} />
<main <main
class="aw-main-section" class="web-main-section"
class:aw-u-hide-mobile={$isMobileNavOpen} class:web-u-hide-mobile={$isMobileNavOpen}
id={omitMainId ? undefined : 'main'} id={omitMainId ? undefined : 'main'}
> >
<slot /> <slot />
@@ -279,7 +279,7 @@
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
background-color: hsl(var(--aw-color-accent)); background-color: hsl(var(--web-color-accent));
border-radius: 100%; border-radius: 100%;
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;

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

@@ -36,30 +36,30 @@
</script> </script>
<nav <nav
class="aw-side-nav" class="web-side-nav"
use:clickOutside={(e) => { use:clickOutside={(e) => {
const el = e.target; const el = e.target;
if (!(el instanceof HTMLElement)) return; if (!(el instanceof HTMLElement)) return;
if (el.closest('.aw-main-header') || el.closest('.aw-mobile-header')) return; if (el.closest('.web-main-header') || el.closest('.web-mobile-header')) return;
$layoutState.showSidenav = false; $layoutState.showSidenav = false;
}} }}
aria-label="Side" aria-label="Side"
> >
<div class="aw-side-nav-wrapper"> <div class="web-side-nav-wrapper">
<button <button
class="aw-input-text aw-is-not-desktop" class="web-input-text web-is-not-desktop"
on:click={() => ($layoutState.showSearch = true)} on:click={() => ($layoutState.showSearch = true)}
> >
<span class="aw-icon-search" /> <span class="web-icon-search" />
<span class="text">Search in docs</span> <span class="text">Search in docs</span>
</button> </button>
<div class="aw-side-nav-scroll"> <div class="web-side-nav-scroll">
{#if parent} {#if parent}
<section class="aw-side-nav-wrapper-parent"> <section class="web-side-nav-wrapper-parent">
<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="aw-side-nav-wrapper-parent-title aw-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}
@@ -75,7 +75,7 @@
{/if} {/if}
{:else} {:else}
{#if navGroup.label} {#if navGroup.label}
<h2 class="aw-side-nav-header aw-eyebrow u-un-break-text"> <h2 class="web-side-nav-header web-eyebrow u-un-break-text">
{navGroup.label} {navGroup.label}
</h2> </h2>
{/if} {/if}
@@ -102,25 +102,25 @@
{#if expandable} {#if expandable}
<button <button
on:click={toggleSidenav} on:click={toggleSidenav}
class="aw-icon-button u-margin-inline-start-auto" class="web-icon-button u-margin-inline-start-auto"
style:margin-bottom="1rem" style:margin-bottom="1rem"
aria-label="toggle nav" aria-label="toggle nav"
> >
<span class="icon-cheveron-right" aria-hidden="true" /> <span class="icon-cheveron-right" aria-hidden="true" />
</button> </button>
{/if} {/if}
<div class="aw-side-nav-mobile-footer-buttons"> <div class="web-side-nav-mobile-footer-buttons">
<IsLoggedIn /> <IsLoggedIn />
<a <a
href="https://github.com/appwrite/appwrite/stargazers" href="https://github.com/appwrite/appwrite/stargazers"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-button is-text aw-u-inline-width-100-percent-mobile" class="web-button is-text web-u-inline-width-100-percent-mobile"
> >
<span class="aw-icon-star" aria-hidden="true" /> <span class="web-icon-star" aria-hidden="true" />
<span class="text">Star on GitHub</span> <span class="text">Star on GitHub</span>
<span class="aw-inline-tag aw-sub-body-400">{GITHUB_STARS}</span> <span class="web-inline-tag web-sub-body-400">{GITHUB_STARS}</span>
</a> </a>
</div> </div>
</div> </div>

4
src/lib/layouts/SidebarNavButton.svelte
View File

@@ -6,14 +6,14 @@
</script> </script>
<a <a
class="aw-side-nav-button" class="web-side-nav-button"
class:is-selected={$page.url?.pathname === groupItem.href} class:is-selected={$page.url?.pathname === groupItem.href}
href={groupItem.href} href={groupItem.href}
> >
{#if groupItem.icon} {#if groupItem.icon}
<span class="icon {groupItem.icon}" aria-hidden="true" /> <span class="icon {groupItem.icon}" aria-hidden="true" />
{/if} {/if}
<span class="aw-caption-400">{groupItem.label} </span> <span class="web-caption-400">{groupItem.label} </span>
{#if groupItem.isParent} {#if groupItem.isParent}
<span class="icon-cheveron-right u-margin-inline-start-auto" aria-hidden="true" /> <span class="icon-cheveron-right u-margin-inline-start-auto" aria-hidden="true" />
{/if} {/if}

2
src/lib/utils/code.ts
View File

@@ -119,7 +119,7 @@ export const getCodeHtml = (args: Args) => {
return carry; return carry;
}, ''); }, '');
return `<pre><code class="aw-code language-${language} ${ return `<pre><code class="web-code language-${language} ${
withLineNumbers ? 'line-numbers' : '' withLineNumbers ? 'line-numbers' : ''
}">${final}</code></pre>`; }">${final}</code></pre>`;
}; };

4
src/lib/utils/markdown.ts
View File

@@ -19,7 +19,7 @@ function transform_tokens(tokens: ReturnType<typeof md.parse>): ReturnType<typeo
} }
switch (token.type) { switch (token.type) {
case 'paragraph_open': case 'paragraph_open':
token.attrPush(['class', 'aw-paragraph']); token.attrPush(['class', 'web-paragraph']);
break; break;
case 'link_open': { case 'link_open': {
const href = token.attrGet('href'); const href = token.attrGet('href');
@@ -29,7 +29,7 @@ function transform_tokens(tokens: ReturnType<typeof md.parse>): ReturnType<typeo
token.attrPush(['target', '_blank']); token.attrPush(['target', '_blank']);
} }
} }
token.attrPush(['class', 'aw-link']); token.attrPush(['class', 'web-link']);
break; break;
} }
} }

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

@@ -45,9 +45,9 @@
</svelte:head> </svelte:head>
<Main> <Main>
<div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden"> <div class="web-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div <div
class="u-position-absolute u-inset-inline-start-0 u-inset-block-end-0 aw-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"
@@ -102,20 +102,20 @@
</svg> </svg>
</div> </div>
<div class="aw-big-padding-section-level-2 u-position-relative"> <div class="web-big-padding-section-level-2 u-position-relative">
<div class="aw-container"> <div class="web-container">
<div class="aw-author-section u-block"> <div class="web-author-section u-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}
<div> <div>
<h1 class="aw-title aw-u-color-text-primary">{name}</h1> <h1 class="web-title web-u-color-text-primary">{name}</h1>
{#if role} {#if role}
<div class="aw-label u-margin-block-start-8">{role}</div> <div class="web-label u-margin-block-start-8">{role}</div>
{/if} {/if}
</div> </div>
{#if bio} {#if bio}
<p class="aw-author-section-info aw-description"> <p class="web-author-section-info web-description">
{bio} {bio}
</p> </p>
{/if} {/if}
@@ -124,12 +124,12 @@
<li> <li>
<a <a
href={github} href={github}
class="aw-icon-button" class="web-icon-button"
aria-label="Author GitHub" aria-label="Author GitHub"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<span class="aw-icon-github" aria-hidden="true" /> <span class="web-icon-github" aria-hidden="true" />
</a> </a>
</li> </li>
{/if} {/if}
@@ -137,12 +137,12 @@
<li> <li>
<a <a
href={twitter} href={twitter}
class="aw-icon-button" class="web-icon-button"
aria-label="Author twitter" aria-label="Author twitter"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<span class="aw-icon-x" aria-hidden="true" /> <span class="web-icon-x" aria-hidden="true" />
</a> </a>
</li> </li>
{/if} {/if}
@@ -150,12 +150,12 @@
<li> <li>
<a <a
href={linkedin} href={linkedin}
class="aw-icon-button" class="web-icon-button"
aria-label="Author LinkedIn" aria-label="Author LinkedIn"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<span class="aw-icon-linkedin" aria-hidden="true" /> <span class="web-icon-linkedin" aria-hidden="true" />
</a> </a>
</li> </li>
{/if} {/if}
@@ -165,13 +165,13 @@
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-1"> <div class="web-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<h2 class="aw-title aw-u-color-text-primary">Articles</h2> <h2 class="web-title web-u-color-text-primary">Articles</h2>
<!-- <div class="aw-is-only-mobile u-margin-block-start-32"> <!-- <div class="web-is-only-mobile u-margin-block-start-32">
<label class="u-block aw-select is-colored" for="articles"> <label class="u-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>
@@ -182,18 +182,18 @@
<span class="icon-cheveron-down" aria-hidden="true" /> <span class="icon-cheveron-down" aria-hidden="true" />
</label> </label>
</div> --> </div> -->
<!--<div class="aw-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="u-flex u-main-space-between u-gap-16 u-margin-block-start-24">
<ul <ul
class="aw-secondary-tabs is-transparent" class="web-secondary-tabs is-transparent"
role="tablist" role="tablist"
aria-orientation="horizontal" aria-orientation="horizontal"
data-orientation="horizontal" data-orientation="horizontal"
data-melt-tabs-list="" data-melt-tabs-list=""
> >
<li class="aw-secondary-tabs-item"> <li class="web-secondary-tabs-item">
<button <button
class="aw-secondary-tabs-button u-width-full-line is-selected" class="web-secondary-tabs-button u-width-full-line is-selected"
type="button" type="button"
role="tab" role="tab"
data-state="active" data-state="active"
@@ -202,12 +202,12 @@
data-orientation="horizontal" data-orientation="horizontal"
data-melt-tabs-trigger="" data-melt-tabs-trigger=""
> >
<span class="aw-main-body-500">Latest</span> <span class="web-main-body-500">Latest</span>
</button> </button>
</li> </li>
<li class="aw-secondary-tabs-item"> <li class="web-secondary-tabs-item">
<button <button
class="aw-secondary-tabs-button u-width-full-line" class="web-secondary-tabs-button u-width-full-line"
type="button" type="button"
role="tab" role="tab"
data-state="inactive" data-state="inactive"
@@ -216,12 +216,12 @@
data-orientation="horizontal" data-orientation="horizontal"
data-melt-tabs-trigger="" data-melt-tabs-trigger=""
> >
<span class="aw-main-body-500">News</span> <span class="web-main-body-500">News</span>
</button> </button>
</li> </li>
<li class="aw-secondary-tabs-item"> <li class="web-secondary-tabs-item">
<button <button
class="aw-secondary-tabs-button u-width-full-line" class="web-secondary-tabs-button u-width-full-line"
type="button" type="button"
role="tab" role="tab"
data-state="inactive" data-state="inactive"
@@ -230,12 +230,12 @@
data-orientation="horizontal" data-orientation="horizontal"
data-melt-tabs-trigger="" data-melt-tabs-trigger=""
> >
<span class="aw-main-body-500">Insights</span> <span class="web-main-body-500">Insights</span>
</button> </button>
</li> </li>
<li class="aw-secondary-tabs-item"> <li class="web-secondary-tabs-item">
<button <button
class="aw-secondary-tabs-button u-width-full-line" class="web-secondary-tabs-button u-width-full-line"
type="button" type="button"
role="tab" role="tab"
data-state="inactive" data-state="inactive"
@@ -244,12 +244,12 @@
data-orientation="horizontal" data-orientation="horizontal"
data-melt-tabs-trigger="" data-melt-tabs-trigger=""
> >
<span class="aw-main-body-500">Tutorials</span> <span class="web-main-body-500">Tutorials</span>
</button> </button>
</li> </li>
<li class="aw-secondary-tabs-item"> <li class="web-secondary-tabs-item">
<button <button
class="aw-secondary-tabs-button u-width-full-line" class="web-secondary-tabs-button u-width-full-line"
type="button" type="button"
role="tab" role="tab"
data-state="inactive" data-state="inactive"
@@ -258,19 +258,19 @@
data-orientation="horizontal" data-orientation="horizontal"
data-melt-tabs-trigger="" data-melt-tabs-trigger=""
> >
<span class="aw-main-body-500">Changelog</span> <span class="web-main-body-500">Changelog</span>
</button> </button>
</li> </li>
</ul> --> </ul> -->
<!-- <div class="aw-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="aw-input-text aw-u-block-size-48" type="search" placeholder="Search" /> <input class="web-input-text web-u-block-size-48" type="search" placeholder="Search" />
</div> </div>
</div> </div>
</div>--> </div>-->
<div class="u-margin-block-start-48"> <div class="u-margin-block-start-48">
<ul class="aw-grid-articles"> <ul class="web-grid-articles">
{#each posts.filter((p) => p.author === author?.slug) as post} {#each posts.filter((p) => p.author === author?.slug) as post}
<Article <Article
title={post.title} title={post.title}
@@ -287,9 +287,9 @@
</div> </div>
</div> </div>
<div <div
class="aw-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 u-position-relative u-overflow-hidden"
> >
<div class="aw-container"> <div class="web-container">
<FooterNav /> <FooterNav />
<MainFooter /> <MainFooter />
</div> </div>

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

@@ -37,28 +37,28 @@
</svelte:head> </svelte:head>
<Main> <Main>
<div class="aw-big-padding-section-level-1"> <div class="web-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<a class="aw-link aw-u-color-text-secondary u-cross-baseline" href="/blog"> <a class="web-link web-u-color-text-secondary u-cross-baseline" href="/blog">
<span class="aw-icon-chevron-left" aria-hidden="true" /> <span class="web-icon-chevron-left" aria-hidden="true" />
<span>Back to blog</span> <span>Back to blog</span>
</a> </a>
<div class="aw-category-header u-margin-block-start-24"> <div class="web-category-header u-margin-block-start-24">
<div class="aw-category-header-content"> <div class="web-category-header-content">
<h1 class="aw-display aw-u-color-text-primary">{name}</h1> <h1 class="web-display web-u-color-text-primary">{name}</h1>
<p class="aw-category-header-description aw-description"> <p class="web-category-header-description web-description">
{description} {description}
</p> </p>
</div> </div>
<!-- <div class="aw-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="aw-input-text aw-u-block-size-48" type="search" placeholder="Search" /> <input class="web-input-text web-u-block-size-48" type="search" placeholder="Search" />
</div> --> </div> -->
</div> </div>
<div class="u-margin-block-start-48"> <div class="u-margin-block-start-48">
<ul class="aw-grid-articles"> <ul class="web-grid-articles">
{#each posts as post} {#each posts as post}
{@const author = authors.find((a) => a.slug.includes(post.author))} {@const author = authors.find((a) => a.slug.includes(post.author))}
{#if author} {#if author}
@@ -76,9 +76,9 @@
</ul> </ul>
</div> </div>
<div <div
class="aw-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 u-position-relative u-overflow-hidden"
> >
<div class="aw-container"> <div class="web-container">
<FooterNav /> <FooterNav />
<MainFooter /> <MainFooter />
</div> </div>

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

@@ -66,27 +66,27 @@
<Main omitMainId> <Main omitMainId>
<TocRoot> <TocRoot>
<div class="aw-container"> <div class="web-container">
<div class="aw-grid-120-1fr-auto"> <div class="web-grid-120-1fr-auto">
<header class="aw-grid-120-1fr-auto-header"> <header class="web-grid-120-1fr-auto-header">
<h1 class="aw-title aw-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 u-position-sticky u-flex u-width-full-line u-main-space-between u-cross-center
aw-u-padding-20 aw-u-margin-inline-20-negative aw-u-color-text-primary aw-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 aw-u-sep-block aw-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"
style:inline-size="100vw" style:inline-size="100vw"
style:background-color="hsl(var(--p-body-bg-color) / 0.1)" style:background-color="hsl(var(--p-body-bg-color) / 0.1)"
style:translate="0 {$isHeaderHidden ? '-4.5rem' : '0'}" style:translate="0 {$isHeaderHidden ? '-4.5rem' : '0'}"
on:click={() => (showToc = !showToc)} on:click={() => (showToc = !showToc)}
> >
<span class="aw-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" />
</button> </button>
<TocNav /> <TocNav />
<main class="aw-grid-120-1fr-auto-main /aw-is-mobile-closed" id="main"> <main class="web-grid-120-1fr-auto-main /web-is-mobile-closed" id="main">
<div class="aw-content is-count-headers" class:aw-is-mobile-closed={showToc}> <div class="web-content is-count-headers" class:web-is-mobile-closed={showToc}>
<!-- svelte-ignore a11y-hidden --> <!-- svelte-ignore a11y-hidden -->
<h2 aria-hidden="true">Introduction</h2> <h2 aria-hidden="true">Introduction</h2>
<slot /> <slot />

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

@@ -53,26 +53,26 @@
<Main> <Main>
<div <div
class="aw-big-padding-section" class="web-big-padding-section"
use:scroll use:scroll
on:aw-scroll={(e) => { on:web-scroll={(e) => {
readPercentage = e.detail.percentage; readPercentage = e.detail.percentage;
}} }}
> >
<div class="aw-big-padding-section"> <div class="web-big-padding-section">
<div class="aw-big-padding-section-level-1"> <div class="web-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container" style="--container-size:42.5rem"> <div class="web-container" style="--container-size:42.5rem">
<article class="aw-main-article"> <article class="web-main-article">
<header class="aw-main-article-header"> <header class="web-main-article-header">
<a <a
class="aw-link is-secondary aw-u-color-text-secondary u-cross-baseline" class="web-link is-secondary web-u-color-text-secondary u-cross-baseline"
href="/blog" href="/blog"
> >
<span class="aw-icon-chevron-left" aria-hidden="true" /> <span class="web-icon-chevron-left" aria-hidden="true" />
<span>Back to blog</span> <span>Back to blog</span>
</a> </a>
<ul class="aw-metadata aw-caption-400"> <ul class="web-metadata web-caption-400">
<li> <li>
<time datetime={date}>{formatDate(date)}</time> <time datetime={date}>{formatDate(date)}</time>
</li> </li>
@@ -80,21 +80,21 @@
<li>{timeToRead} min</li> <li>{timeToRead} min</li>
{/if} {/if}
</ul> </ul>
<h1 class="aw-title aw-u-color-text-primary">{title}</h1> <h1 class="web-title web-u-color-text-primary">{title}</h1>
{#if description} {#if description}
<p class="aw-description u-margin-block-start-8"> <p class="web-description u-margin-block-start-8">
{description} {description}
</p> </p>
{/if} {/if}
{#if authorData} {#if authorData}
<div class="aw-author u-margin-block-start-16"> <div class="web-author u-margin-block-start-16">
<a <a
href={authorData.href} href={authorData.href}
class="u-flex u-cross-center u-gap-8" class="u-flex u-cross-center u-gap-8"
> >
{#if authorData.avatar} {#if authorData.avatar}
<img <img
class="aw-author-image" class="web-author-image"
src={authorData.avatar} src={authorData.avatar}
width="44" width="44"
height="44" height="44"
@@ -102,10 +102,10 @@
/> />
{/if} {/if}
<div class="u-flex-vertical"> <div class="u-flex-vertical">
<h4 class="aw-sub-body-400 aw-u-color-text-primary"> <h4 class="web-sub-body-400 web-u-color-text-primary">
{authorData.name} {authorData.name}
</h4> </h4>
<p class="aw-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="u-flex u-gap-8 u-margin-inline-start-auto u-cross-child-center">
@@ -113,12 +113,12 @@
<li> <li>
<a <a
href={authorData.twitter} href={authorData.twitter}
class="aw-icon-button" class="web-icon-button"
aria-label="Author twitter" aria-label="Author twitter"
target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer"
> >
<span class="aw-icon-x" aria-hidden="true" /> <span class="web-icon-x" aria-hidden="true" />
</a> </a>
</li> </li>
{/if} {/if}
@@ -126,12 +126,12 @@
<li> <li>
<a <a
href={authorData.linkedin} href={authorData.linkedin}
class="aw-icon-button" class="web-icon-button"
aria-label="Author LinkedIn" aria-label="Author LinkedIn"
target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer"
> >
<span class="aw-icon-linkedin" aria-hidden="true" /> <span class="web-icon-linkedin" aria-hidden="true" />
</a> </a>
</li> </li>
{/if} {/if}
@@ -139,12 +139,12 @@
<li> <li>
<a <a
href={authorData.github} href={authorData.github}
class="aw-icon-button" class="web-icon-button"
aria-label="Author GitHub" aria-label="Author GitHub"
target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer"
> >
<span class="aw-icon-github" aria-hidden="true" /> <span class="web-icon-github" aria-hidden="true" />
</a> </a>
</li> </li>
{/if} {/if}
@@ -153,19 +153,19 @@
{/if} {/if}
</header> </header>
{#if cover} {#if cover}
<div class="aw-media-container"> <div class="web-media-container">
<Media class="u-block" src={cover} /> <Media class="u-block" src={cover} />
</div> </div>
{/if} {/if}
<div class="aw-article-content u-margin-block-start-32"> <div class="web-article-content u-margin-block-start-32">
<slot /> <slot />
</div> </div>
</article> </article>
<!-- {#if categories?.length} <!-- {#if categories?.length}
<div class="u-flex u-gap-16"> <div class="u-flex u-gap-16">
{#each categories as cat} {#each categories as cat}
<a href={cat.href} class="aw-tag">{cat.name}</a> <a href={cat.href} class="web-tag">{cat.name}</a>
{/each} {/each}
</div> </div>
{/if} --> {/if} -->
@@ -175,12 +175,12 @@
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-1 aw-u-sep-block-start"> <div class="web-big-padding-section-level-1 web-u-sep-block-start">
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<h3 class="aw-label aw-u-color-text-primary">Read next</h3> <h3 class="web-label web-u-color-text-primary">Read next</h3>
<section class="u-margin-block-start-32"> <section class="u-margin-block-start-32">
<ul class="aw-grid-articles"> <ul class="web-grid-articles">
{#each posts.filter((p) => p.title !== title).slice(0, 3) as post} {#each posts.filter((p) => p.title !== title).slice(0, 3) as post}
{@const author = authors.find((a) => a.slug === post.author)} {@const author = authors.find((a) => a.slug === post.author)}
{#if author} {#if author}
@@ -199,8 +199,8 @@
</section> </section>
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-2 u-position-relative u-overflow-hidden"> <div class="web-big-padding-section-level-2 u-position-relative u-overflow-hidden">
<div class="aw-container"> <div class="web-container">
<Newsletter /> <Newsletter />
<FooterNav /> <FooterNav />
<MainFooter /> <MainFooter />
@@ -217,7 +217,7 @@
top: 0; top: 0;
height: 2px; height: 2px;
width: var(--percentage); width: var(--percentage);
background: hsl(var(--aw-color-accent)); background: hsl(var(--web-color-accent));
z-index: 10000; z-index: 10000;
} }
</style> </style>

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

@@ -3,8 +3,8 @@
setContext("no-paragraph", true); setContext("no-paragraph", true);
</script> </script>
<blockquote class="aw-blockquote"> <blockquote class="web-blockquote">
<p class="aw-description"> <p class="web-description">
<slot /> <slot />
</p> </p>
</blockquote> </blockquote>

2
src/markdoc/nodes/Code.svelte
View File

@@ -2,4 +2,4 @@
export let content: string; export let content: string;
</script> </script>
<span class="aw-inline-code aw-code">{content}</span> <span class="web-inline-code web-code">{content}</span>

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

@@ -61,28 +61,28 @@
{@html result} {@html result}
{/if} {/if}
{:else} {:else}
<section class="theme-dark aw-code-snippet" aria-label="code-snippet panel"> <section class="theme-dark web-code-snippet" aria-label="code-snippet panel">
<header class="aw-code-snippet-header"> <header class="web-code-snippet-header">
<div class="aw-code-snippet-header-start"> <div class="web-code-snippet-header-start">
{#if badgeValue} {#if badgeValue}
<div class="u-flex u-gap-16"> <div class="u-flex u-gap-16">
<div class="aw-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="aw-code-snippet-header-end"> <div class="web-code-snippet-header-end">
<ul class="buttons-list u-flex u-gap-8"> <ul class="buttons-list u-flex u-gap-8">
<li class="buttons-list-item aw-u-padding-inline-start-20"> <li class="buttons-list-item web-u-padding-inline-start-20">
<Tooltip> <Tooltip>
<button <button
slot="asChild" slot="asChild"
let:trigger let:trigger
use:melt={trigger} use:melt={trigger}
on:click={handleCopy} on:click={handleCopy}
class="aw-icon-button" class="web-icon-button"
aria-label="copy code from code-snippet" aria-label="copy code from code-snippet"
> >
<span class="aw-icon-copy" aria-hidden="true" /> <span class="web-icon-copy" aria-hidden="true" />
</button> </button>
<svelte:fragment slot="tooltip"> <svelte:fragment slot="tooltip">
{copyText} {copyText}
@@ -92,7 +92,7 @@
</ul> </ul>
</div> </div>
</header> </header>
<div class="aw-code-snippet-content"> <div class="web-code-snippet-content">
<!-- eslint-disable-next-line svelte/no-at-html-tags --> <!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html result} {@html result}
</div> </div>

22
src/markdoc/nodes/Heading.svelte
View File

@@ -11,10 +11,10 @@
const tag = `h${level + 1}`; const tag = `h${level + 1}`;
const ctx = hasContext('headings') ? getContext<LayoutContext>('headings') : undefined; const ctx = hasContext('headings') ? getContext<LayoutContext>('headings') : undefined;
const classList: Record<typeof level, string> = { const classList: Record<typeof level, string> = {
1: 'aw-label', 1: 'web-label',
2: 'aw-description', 2: 'web-description',
3: 'aw-main-body-500', 3: 'web-main-body-500',
4: 'aw-sub-body-500' 4: 'web-sub-body-500'
}; };
let element: HTMLElement | undefined; let element: HTMLElement | undefined;
@@ -49,7 +49,7 @@
}); });
const inPolicy = isInPolicy(); const inPolicy = isInPolicy();
$: headingClass = inPolicy && level === 1 ? 'aw-title' : classList[level]; $: headingClass = inPolicy && level === 1 ? 'web-title' : classList[level];
</script> </script>
{#if id} {#if id}
@@ -57,9 +57,9 @@
this={tag} this={tag}
{id} {id}
bind:this={element} bind:this={element}
class:aw-snap-location={id && !inReferences} class:web-snap-location={id && !inReferences}
class:aw-snap-location-references={id && inReferences} class:web-snap-location-references={id && inReferences}
class="{headingClass} aw-u-color-text-primary" class="{headingClass} web-u-color-text-primary"
> >
<a href={`#${id}`} class=""><slot /></a> <a href={`#${id}`} class=""><slot /></a>
</svelte:element> </svelte:element>
@@ -67,7 +67,7 @@
<svelte:element <svelte:element
this={tag} this={tag}
bind:this={element} bind:this={element}
class="{headingClass} aw-u-color-text-primary" class="{headingClass} web-u-color-text-primary"
class:in-policy={inPolicy} class:in-policy={inPolicy}
> >
<slot /> <slot />
@@ -75,12 +75,12 @@
{/if} {/if}
<style> <style>
.aw-title { .web-title {
margin-block-end: 1rem; margin-block-end: 1rem;
margin-block-start: 2rem; margin-block-start: 2rem;
} }
.aw-sub-body-500.in-policy { .web-sub-body-500.in-policy {
margin-block-end: 1.25rem; margin-block-end: 1.25rem;
} }
</style> </style>

12
src/markdoc/nodes/Image.svelte
View File

@@ -22,12 +22,12 @@
{#if inTable} {#if inTable}
<img {src} {alt} {title} loading="lazy" style:vertical-align="middle" /> <img {src} {alt} {title} loading="lazy" style:vertical-align="middle" />
{:else} {:else}
<div class="aw-media main"> <div class="web-media main">
<img {src} {alt} {title} loading="lazy" class="aw-u-media-ratio-16-9 u-width-full-line" /> <img {src} {alt} {title} loading="lazy" class="web-u-media-ratio-16-9 u-width-full-line" />
<div class="abs"> <div class="abs">
<Tooltip closeOnPointerDown> <Tooltip closeOnPointerDown>
<button class="aw-button is-secondary" use:melt={$trigger}> <button class="web-button is-secondary" use:melt={$trigger}>
<span class="icon-arrow-expand" aria-hidden="true" /> <span class="icon-arrow-expand" aria-hidden="true" />
</button> </button>
<svelte:fragment slot="tooltip">Expand</svelte:fragment> <svelte:fragment slot="tooltip">Expand</svelte:fragment>
@@ -40,7 +40,7 @@
<div use:melt={$overlay} class="overlay" transition:fade={{ duration: 150 }} /> <div use:melt={$overlay} class="overlay" transition:fade={{ duration: 150 }} />
<img <img
class="aw-media content" class="web-media content"
use:melt={$content} use:melt={$content}
{src} {src}
{alt} {alt}
@@ -53,10 +53,10 @@
{/if} {/if}
<style lang="scss"> <style lang="scss">
.aw-button { .web-button {
padding: 0.6rem !important; padding: 0.6rem !important;
[class*='icon'] { [class*='icon'] {
color: hsl(var(--aw-color-primary)) !important; color: hsl(var(--web-color-primary)) !important;
} }
} }

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

@@ -9,9 +9,9 @@
$: classes = (() => { $: classes = (() => {
if (inDocs) return ''; if (inDocs) return '';
if (inChangelog) return 'aw-paragraph-lg'; if (inChangelog) return 'web-paragraph-lg';
if (inPolicy) return ''; if (inPolicy) return '';
return 'aw-paragraph-lg'; return 'web-paragraph-lg';
})(); })();
</script> </script>

6
src/markdoc/nodes/Link.svelte
View File

@@ -13,13 +13,13 @@
const inChangelog = isInChangelog(); const inChangelog = isInChangelog();
$: classes = (() => { $: classes = (() => {
if (inDocs) return 'aw-paragraph-md'; if (inDocs) return 'web-paragraph-md';
if (inChangelog) return 'aw-paragraph-lg in-changelog'; if (inChangelog) return 'web-paragraph-lg in-changelog';
return ''; return '';
})(); })();
</script> </script>
<a class="aw-link is-inline {classes}" {href} {title} {target} {rel}><slot /></a> <a class="web-link is-inline {classes}" {href} {title} {target} {rel}><slot /></a>
<style lang="scss"> <style lang="scss">
.in-changelog:last-child { .in-changelog:last-child {

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

@@ -13,8 +13,8 @@
<svelte:element <svelte:element
this={ordered ? 'ol' : 'ul'} this={ordered ? 'ol' : 'ul'}
class:aw-numeric-list={ordered} class:web-numeric-list={ordered}
class:aw-pink-dots={!ordered} class:web-pink-dots={!ordered}
class:in-policy={inPolicy} class:in-policy={inPolicy}
class:in-changelog={inChangelog}><slot /></svelte:element class:in-changelog={inChangelog}><slot /></svelte:element
> >

12
src/markdoc/nodes/Paragraph.svelte
View File

@@ -15,11 +15,11 @@
export { className as class }; export { className as class };
$: classes = (() => { $: classes = (() => {
if (inDocs) return 'aw-paragraph-md'; if (inDocs) return 'web-paragraph-md';
if (inPolicy) return 'aw-paragraph-md in-policy'; if (inPolicy) return 'web-paragraph-md in-policy';
if (inTable) return 'aw-paragraph-md'; if (inTable) return 'web-paragraph-md';
if (inChangelog) return 'aw-paragraph-lg in-changelog'; if (inChangelog) return 'web-paragraph-lg in-changelog';
return 'aw-paragraph-lg'; return 'web-paragraph-lg';
})(); })();
</script> </script>
@@ -30,7 +30,7 @@
{/if} {/if}
<style lang="scss"> <style lang="scss">
p.aw-paragraph-lg { p.web-paragraph-lg {
margin-block-end: 2rem; margin-block-end: 2rem;
} }

14
src/markdoc/nodes/Table.svelte
View File

@@ -14,9 +14,9 @@
const transparentCells = inPolicy ? getPolicyCtx().transparentTableCells : false; const transparentCells = inPolicy ? getPolicyCtx().transparentTableCells : false;
</script> </script>
<div class="aw-table-wrapper" class:in-policy={inPolicy} class:transparentCells> <div class="web-table-wrapper" class:in-policy={inPolicy} class:transparentCells>
<div class="aw-table-scroll"> <div class="web-table-scroll">
<table class="aw-table"> <table class="web-table">
<slot /> <slot />
</table> </table>
</div> </div>
@@ -33,7 +33,7 @@
:global(td) { :global(td) {
background-color: transparent; background-color: transparent;
border-right: 1px solid hsl(var(--aw-color-smooth)); border-right: 1px solid hsl(var(--web-color-smooth));
font-family: Inter; font-family: Inter;
font-size: 0.875rem; font-size: 0.875rem;
font-style: normal; font-style: normal;
@@ -43,13 +43,13 @@
text-transform: none; text-transform: none;
} }
:global(td .aw-eyebrow) { :global(td .web-eyebrow) {
all: unset; all: unset;
} }
:global(:is(td:first-child, thead td)) { :global(:is(td:first-child, thead td)) {
background-color: hsl(var(--aw-color-greyscale-850)); background-color: hsl(var(--web-color-greyscale-850));
color: hsl(var(--aw-color-primary)); color: hsl(var(--web-color-primary));
font-weight: 500; font-weight: 500;
} }

2
src/markdoc/nodes/Tbody.svelte
View File

@@ -1,3 +1,3 @@
<tbody class="aw-table-body"> <tbody class="web-table-body">
<slot /> <slot />
</tbody> </tbody>

2
src/markdoc/nodes/Td.svelte
View File

@@ -6,6 +6,6 @@
export let rowspan: HTMLTdAttributes['rowspan'] = undefined; export let rowspan: HTMLTdAttributes['rowspan'] = undefined;
</script> </script>
<td class="aw-table-col" {align} {colspan} {rowspan}> <td class="web-table-col" {align} {colspan} {rowspan}>
<slot /> <slot />
</td> </td>

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

@@ -9,10 +9,10 @@
style:width={width ? `${width}px` : undefined} style:width={width ? `${width}px` : undefined}
style:min-inline-size={width ? 'unset' : undefined} style:min-inline-size={width ? 'unset' : undefined}
role="columnheader" role="columnheader"
class="aw-table-head-col" class="web-table-head-col"
{align} {align}
> >
<span class="aw-eyebrow"> <span class="web-eyebrow">
<slot /> <slot />
</span> </span>
</td> </td>

2
src/markdoc/nodes/Thead.svelte
View File

@@ -1,3 +1,3 @@
<thead class="aw-table-header"> <thead class="web-table-header">
<slot /> <slot />
</thead> </thead>

2
src/markdoc/nodes/Tr.svelte
View File

@@ -1,3 +1,3 @@
<tr class="aw-table-row"> <tr class="web-table-row">
<slot /> <slot />
</tr> </tr>

4
src/markdoc/tags/Arrow_Link.svelte
View File

@@ -12,8 +12,8 @@
const inDocs = isInDocs(); const inDocs = isInDocs();
$: classes = (() => { $: classes = (() => {
if (inDocs) return 'aw-link aw-paragraph-md'; if (inDocs) return 'web-link web-paragraph-md';
if (inChangelog) return 'aw-link aw-paragraph-lg'; if (inChangelog) return 'web-link web-paragraph-lg';
return ''; return '';
})(); })();
</script> </script>

2
src/markdoc/tags/Cards.svelte
View File

@@ -1,5 +1,5 @@
<div style:margin-block="1.5rem"> <div style:margin-block="1.5rem">
<ul class="aw-grid-row-2"> <ul class="web-grid-row-2">
<slot /> <slot />
</ul> </ul>
</div> </div>

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

@@ -9,19 +9,19 @@
</script> </script>
<li> <li>
<a {href} class="aw-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="u-flex u-cross-baseline u-gap-4">
{#if icon} {#if icon}
<span <span
class="{icon} aw-u-font-size-24" class="{icon} web-u-font-size-24"
aria-hidden="true" aria-hidden="true"
/> />
{/if} {/if}
<h4 class="aw-sub-body-500 aw-u-color-text-primary"> <h4 class="web-sub-body-500 web-u-color-text-primary">
{title} {title}
</h4> </h4>
</header> </header>
<p class="aw-sub-body-400 u-margin-block-start-4" style:margin-block="0"> <p class="web-sub-body-400 u-margin-block-start-4" style:margin-block="0">
<slot /> <slot />
</p> </p>
</a> </a>

2
src/markdoc/tags/Count_Title.svelte
View File

@@ -4,6 +4,6 @@
const el = title ? 'h3' : 'span'; const el = title ? 'h3' : 'span';
</script> </script>
<svelte:element this={el} class="aw-sub-body-500 aw-u-color-text-primary"> <svelte:element this={el} class="web-sub-body-500 web-u-color-text-primary">
{title} {title}
</svelte:element> </svelte:element>

4
src/markdoc/tags/Info.svelte
View File

@@ -2,8 +2,8 @@
export let title: string; export let title: string;
</script> </script>
<div class="aw-inline-info"> <div class="web-inline-info">
<span class="icon-info" aria-hidden="true" /> <span class="icon-info" aria-hidden="true" />
<h5 class="aw-sub-body-500 aw-u-color-text-primary">{title}</h5> <h5 class="web-sub-body-500 web-u-color-text-primary">{title}</h5>
<slot /> <slot />
</div> </div>

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

@@ -44,17 +44,17 @@
} }
</script> </script>
<section class="theme-dark aw-code-snippet" aria-label="code-snippet panel"> <section class="theme-dark web-code-snippet" aria-label="code-snippet panel">
<header class="aw-code-snippet-header"> <header class="web-code-snippet-header">
<div class="aw-code-snippet-header-start"> <div class="web-code-snippet-header-start">
<div class="u-flex u-gap-16"> <div class="u-flex u-gap-16">
<!-- <div class="aw-tag"><span class="text">Default</span></div> --> <!-- <div class="web-tag"><span class="text">Default</span></div> -->
</div> </div>
</div> </div>
<div class="aw-code-snippet-header-end"> <div class="web-code-snippet-header-end">
<ul class="buttons-list u-flex u-gap-8"> <ul class="buttons-list u-flex u-gap-8">
<li class="buttons-list-item u-flex u-cross-child-scenter"> <li class="buttons-list-item u-flex u-cross-child-scenter">
<div class="aw-select"> <div class="web-select">
<select bind:value={$selected}> <select bind:value={$selected}>
{#each Array.from($snippets) as language} {#each Array.from($snippets) as language}
<option value={language}>{platformMap[language]}</option> <option value={language}>{platformMap[language]}</option>
@@ -63,13 +63,13 @@
<span class="icon-cheveron-down" aria-hidden="true" /> <span class="icon-cheveron-down" aria-hidden="true" />
</div> </div>
</li> </li>
<li class="buttons-list-item aw-u-padding-inline-start-20"> <li class="buttons-list-item web-u-padding-inline-start-20">
<Tooltip> <Tooltip>
<button <button
on:click={handleCopy} on:click={handleCopy}
class="aw-icon-button" class="web-icon-button"
aria-label="copy code from code-snippet" aria-label="copy code from code-snippet"
><span class="aw-icon-copy" aria-hidden="true" /></button ><span class="web-icon-copy" aria-hidden="true" /></button
> >
<svelte:fragment slot="tooltip"> <svelte:fragment slot="tooltip">
{copyText} {copyText}
@@ -79,5 +79,5 @@
</ul> </ul>
</div> </div>
</header> </header>
<div class="aw-code-snippet-content"><slot /></div> <div class="web-code-snippet-content"><slot /></div>
</section> </section>

8
src/markdoc/tags/Section.svelte
View File

@@ -6,10 +6,10 @@
export let title: string; export let title: string;
</script> </script>
<section class="aw-article-content-section is-with-line"> <section class="web-article-content-section is-with-line">
<section class="aw-article-content-sub-section"> <section class="web-article-content-sub-section">
<header class="aw-article-content-header"> <header class="web-article-content-header">
<span class="aw-numeric-badge">{step}</span> <span class="web-numeric-badge">{step}</span>
<Heading level={2} {id} {step}> <Heading level={2} {id} {step}>
{title} {title}
</Heading> </Heading>

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

@@ -25,7 +25,7 @@
); );
</script> </script>
<div class="aw-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 u-flex u-gap-16">
<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]}

2
src/markdoc/tags/TabsItem.svelte
View File

@@ -15,6 +15,6 @@
}); });
</script> </script>
<div class="aw-u-sep-block-start u-padding-block-start-16" {...$content(id)} use:content> <div class="web-u-sep-block-start u-padding-block-start-16" {...$content(id)} use:content>
<slot /> <slot />
</div> </div>

4
src/markdoc/tags/Video.svelte
View File

@@ -7,9 +7,9 @@
export let loop: boolean = false; export let loop: boolean = false;
</script> </script>
<div class="aw-media"> <div class="web-media">
<!-- svelte-ignore a11y-media-has-caption --> <!-- svelte-ignore a11y-media-has-caption -->
<video {src} class="aw-u-media-ratio-16-9 u-width-full-line" controls {autoplay} {loop}> <video {src} class="web-u-media-ratio-16-9 u-width-full-line" controls {autoplay} {loop}>
<source {src} {type} /> <source {src} {type} />
</video> </video>
</div> </div>

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

@@ -5,7 +5,7 @@
export let thumbnail: string; export let thumbnail: string;
</script> </script>
<div class="aw-media"> <div class="web-media">
<!-- svelte-ignore a11y-media-has-caption --> <!-- svelte-ignore a11y-media-has-caption -->
<Video <Video
{thumbnail} {thumbnail}

20
src/routes/+error.svelte
View File

@@ -11,28 +11,28 @@
<DocsError /> <DocsError />
{:else} {:else}
<Main> <Main>
<div class="aw-big-padding-section"> <div class="web-big-padding-section">
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<div class="aw-hero" style="--hero-gap:1.25rem;"> <div class="web-hero" style="--hero-gap:1.25rem;">
<span class="aw-badges aw-eyebrow">{$page.status}</span> <span class="web-badges web-eyebrow">{$page.status}</span>
<h1 class="aw-headline aw-u-color-text-primary"> <h1 class="web-headline web-u-color-text-primary">
{$page.error?.message ?? 'An error has occured'} {$page.error?.message ?? 'An error has occured'}
</h1> </h1>
{#if $page.status === 404} {#if $page.status === 404}
<p class="aw-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. Feel free to use
our navigation menu or the button below to explore more of Appwrite's documentation. our navigation menu or the button below to explore more of Appwrite's documentation.
</p> </p>
{/if} {/if}
<a href="/" class="aw-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="aw-big-padding-section-level-2 u-position-relative"> <div class="web-big-padding-section-level-2 u-position-relative">
<div class="aw-container"> <div class="web-container">
<FooterNav /> <FooterNav />
<MainFooter /> <MainFooter />
</div> </div>

6
src/routes/+layout.svelte
View File

@@ -42,7 +42,7 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import '$icons/output/aw-icon.css'; import '$icons/output/TEMP/web-icon.css';
import '$scss/index.scss'; import '$scss/index.scss';
import { browser, dev } from '$app/environment'; import { browser, dev } from '$app/environment';
@@ -114,8 +114,8 @@
z-index: 9999; z-index: 9999;
display: block; display: block;
background-color: hsl(var(--aw-color-mint-500)); background-color: hsl(var(--web-color-mint-500));
color: hsl(var(--aw-color-black)); color: hsl(var(--web-color-black));
text-decoration: underline; text-decoration: underline;
opacity: 0; opacity: 0;

188
src/routes/+page.svelte
View File

@@ -39,7 +39,7 @@
style:width="100vw" style:width="100vw"
style:height="100vh" style:height="100vh"
style:overflow="hidden" style:overflow="hidden"
class:aw-u-hide-mobile={$isMobileNavOpen} class:web-u-hide-mobile={$isMobileNavOpen}
> >
<div <div
class="u-position-absolute" class="u-position-absolute"
@@ -55,53 +55,53 @@
</div> </div>
<div <div
class="u-position-absolute aw-is-only-desktop" class="u-position-absolute web-is-only-desktop"
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:aw-u-hide-mobile={$isMobileNavOpen} class:web-u-hide-mobile={$isMobileNavOpen}
> >
<img src="/images/bgs/hero-lines-1.png" alt="" /> <img src="/images/bgs/hero-lines-1.png" alt="" />
</div> </div>
<div <div
class="u-position-absolute aw-is-only-desktop" class="u-position-absolute web-is-only-desktop"
style="top: 42rem; left: 49%; translate: calc(-50% + 800px); width: 60rem;" style="top: 42rem; left: 49%; translate: calc(-50% + 800px); width: 60rem;"
class:aw-u-hide-mobile={$isMobileNavOpen} class:web-u-hide-mobile={$isMobileNavOpen}
> >
<img src="/images/bgs/hero-lines-2.png" alt="" /> <img src="/images/bgs/hero-lines-2.png" alt="" />
</div> </div>
<Main> <Main>
<div class="aw-big-padding-section"> <div class="web-big-padding-section">
<div class="aw-big-padding-section-level-1"> <div class="web-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<section class="aw-container aw-u-padding-block-end-0"> <section class="web-container web-u-padding-block-end-0">
<a <a
href="/blog/post/announcing-init" href="/blog/post/announcing-init"
class="aw-hero-banner-button aw-u-margin-block-end-24" class="web-hero-banner-button web-u-margin-block-end-24"
> >
<span class="aw-icon-star" aria-hidden="true" /> <span class="web-icon-star" aria-hidden="true" />
<span class="aw-caption-500">New</span> <span class="web-caption-500">New</span>
<div class="aw-hero-banner-button-sep" /> <div class="web-hero-banner-button-sep" />
<span class="aw-caption-400">Announcing Init</span> <span class="web-caption-400">Announcing Init</span>
<span class="aw-icon-arrow-right" aria-hidden="true" /> <span class="web-icon-arrow-right" aria-hidden="true" />
</a> </a>
<div class="aw-hero is-horizontal"> <div class="web-hero is-horizontal">
<h1 class="aw-headline"> <h1 class="web-headline">
<span class="aw-gradient-text"> <span class="web-gradient-text">
Build like a team of hundreds<span class="aw-u-color-text-accent" Build like a team of hundreds<span class="web-u-color-text-accent"
>_</span >_</span
> >
</span> </span>
</h1> </h1>
<div class="u-cross-child-end"> <div class="u-cross-child-end">
<p class="aw-description"> <p class="web-description">
Appwrite's open-source platform lets you add Auth, DBs, Functions Appwrite's open-source platform lets you add Auth, DBs, Functions
and Storage to your product and build any application at any scale, and Storage to your product and build any application at any scale,
own your data, and use your preferred coding languages and tools. own your data, and use your preferred coding languages and tools.
</p> </p>
<a <a
href="https://cloud.appwrite.io" href="https://cloud.appwrite.io"
class="aw-button is-full-width-mobile u-margin-block-start-32" class="web-button is-full-width-mobile u-margin-block-start-32"
> >
<span class="text">Get started</span> <span class="text">Get started</span>
</a> </a>
@@ -109,12 +109,12 @@
</div> </div>
</section> </section>
</div> </div>
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<section <section
class="aw-container aw-u-padding-block-0" class="web-container web-u-padding-block-0"
style="--container-size:78.75rem" style="--container-size:78.75rem"
> >
<div class="aw-media-container"> <div class="web-media-container">
<img <img
class="u-block" class="u-block"
src="/images/pages/homepage/dashboard.png" src="/images/pages/homepage/dashboard.png"
@@ -124,14 +124,14 @@
</div> </div>
</section> </section>
</div> </div>
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<h2 <h2
class="aw-title aw-u-color-text-primary aw-u-text-align-center aw-u-max-width-600 u-margin-inline-auto" class="web-title web-u-color-text-primary web-u-text-align-center web-u-max-width-600 u-margin-inline-auto"
> >
Trusted by developers from the world's leading organizations Trusted by developers from the world's leading organizations
</h2> </h2>
<ul class="aw-grid-3c-4c-6c is-for-logos aw-u-padding-block-start-80"> <ul class="web-grid-3c-4c-6c is-for-logos web-u-padding-block-start-80">
<li> <li>
<img <img
src="/images/logos/trusted-by/apple.svg" src="/images/logos/trusted-by/apple.svg"
@@ -237,7 +237,7 @@
<ProductsMobile /> <ProductsMobile />
<div <div
class="aw-big-padding-section-level-1 u-position-relative aw-white-section theme-light" class="web-big-padding-section-level-1 u-position-relative web-white-section theme-light"
> >
<div <div
class="u-position-absolute u-inset-block-end-0 u-inset-inline-start u-width-full-line" class="u-position-absolute u-inset-block-end-0 u-inset-inline-start u-width-full-line"
@@ -250,108 +250,108 @@
/> />
</div> </div>
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<section class="aw-hero is-align-start"> <section class="web-hero is-align-start">
<span class="aw-badges aw-eyebrow">PRIVACY & SECURITY_</span> <span class="web-badges web-eyebrow">PRIVACY & SECURITY_</span>
<h2 class="aw-display aw-u-color-text-primary u-max-width-700"> <h2 class="web-display web-u-color-text-primary u-max-width-700">
Self-host your data or take it to the Cloud Self-host your data or take it to the Cloud
</h2> </h2>
<p class="aw-description u-max-width-700"> <p class="web-description u-max-width-700">
Migrate your data from and to any platform at any time with Appwrite Migrate your data from and to any platform at any time with Appwrite
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 aw-u-margin-block-start-80"> <div class="u-overflow-hidden web-u-margin-block-start-80">
<ul class="aw-info-boxes aw-sub-body-500"> <ul class="web-info-boxes web-sub-body-500">
<li class="aw-info-boxes-item"> <li class="web-info-boxes-item">
<img <img
src="/images/icons/gradients/self-hosted.svg" src="/images/icons/gradients/self-hosted.svg"
width="40" width="40"
height="40" height="40"
alt="" alt=""
/> />
<h3 class="aw-info-boxes-title">Self-Hosted</h3> <h3 class="web-info-boxes-title">Self-Hosted</h3>
<p class="aw-info-boxes-content"> <p class="web-info-boxes-content">
Own your data or host it on a cloud region of choice. Own your data or host it on a cloud region of choice.
</p> </p>
</li> </li>
<li class="aw-info-boxes-item"> <li class="web-info-boxes-item">
<img <img
src="/images/icons/gradients/lock.svg" src="/images/icons/gradients/lock.svg"
width="40" width="40"
height="40" height="40"
alt="" alt=""
/> />
<h3 class="aw-info-boxes-title">Encryption</h3> <h3 class="web-info-boxes-title">Encryption</h3>
<p class="aw-info-boxes-content"> <p class="web-info-boxes-content">
Built-in data encryption both in rest and in transit. Built-in data encryption both in rest and in transit.
</p> </p>
</li> </li>
<li class="aw-info-boxes-item"> <li class="web-info-boxes-item">
<img <img
src="/images/icons/gradients/shield.svg" src="/images/icons/gradients/shield.svg"
width="40" width="40"
height="40" height="40"
alt="" alt=""
/> />
<h3 class="aw-info-boxes-title">Abuse protection</h3> <h3 class="web-info-boxes-title">Abuse protection</h3>
<p class="aw-info-boxes-content"> <p class="web-info-boxes-content">
Protect your APIs from abuse with built-in protection. Protect your APIs from abuse with built-in protection.
</p> </p>
</li> </li>
<li class="aw-info-boxes-item"> <li class="web-info-boxes-item">
<img <img
src="/images/icons/gradients/database.svg" src="/images/icons/gradients/database.svg"
width="40" width="40"
height="40" height="40"
alt="" alt=""
/> />
<h3 class="aw-info-boxes-title">Data migrations</h3> <h3 class="web-info-boxes-title">Data migrations</h3>
<p class="aw-info-boxes-content"> <p class="web-info-boxes-content">
Easily transfer data from 3rd parties or between Cloud and Easily transfer data from 3rd parties or between Cloud and
self-hosted. self-hosted.
</p> </p>
</li> </li>
<li class="aw-info-boxes-item"> <li class="web-info-boxes-item">
<img <img
src="/images/icons/gradients/star.svg" src="/images/icons/gradients/star.svg"
width="40" width="40"
height="40" height="40"
alt="" alt=""
/> />
<h3 class="aw-info-boxes-title">GDPR</h3> <h3 class="web-info-boxes-title">GDPR</h3>
<p class="aw-info-boxes-content"> <p class="web-info-boxes-content">
Safeguard user data and privacy with provided GDPR regulations. Safeguard user data and privacy with provided GDPR regulations.
</p> </p>
</li> </li>
<li class="aw-info-boxes-item"> <li class="web-info-boxes-item">
<img <img
src="/images/icons/gradients/soc-2.svg" src="/images/icons/gradients/soc-2.svg"
width="40" width="40"
height="40" height="40"
alt="" alt=""
/> />
<h3 class="aw-info-boxes-title"> <h3 class="web-info-boxes-title">
<span>SOC-2</span> <span>SOC-2</span>
<span class="aw-inline-tag is-pink">Coming Soon</span> <span class="web-inline-tag is-pink">Coming Soon</span>
</h3> </h3>
<p class="aw-info-boxes-content"> <p class="web-info-boxes-content">
Ensure the highest level of security and privacy protection. Ensure the highest level of security and privacy protection.
</p> </p>
</li> </li>
<li class="aw-info-boxes-item"> <li class="web-info-boxes-item">
<img <img
src="/images/icons/gradients/hipaa.svg" src="/images/icons/gradients/hipaa.svg"
width="40" width="40"
height="40" height="40"
alt="" alt=""
/> />
<h3 class="aw-info-boxes-title"> <h3 class="web-info-boxes-title">
<span>HIPAA</span> <span>HIPAA</span>
<span class="aw-inline-tag is-pink">Coming Soon</span> <span class="web-inline-tag is-pink">Coming Soon</span>
</h3> </h3>
<p class="aw-info-boxes-content"> <p class="web-info-boxes-content">
Protect sensitive user health data. Protect sensitive user health data.
</p> </p>
</li> </li>
@@ -360,14 +360,14 @@
</div> </div>
</div> </div>
<OpenSource /> <OpenSource />
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<div class="aw-hero"> <div class="web-hero">
<div class="aw-display aw-u-color-text-primary"> <div class="web-display web-u-color-text-primary">
Loved by developers like you Loved by developers like you
</div> </div>
</div> </div>
<ul class="aw-multi-columns-1 aw-u-margin-block-start-80"> <ul class="web-multi-columns-1 web-u-margin-block-start-80">
<li> <li>
<DeveloperCard <DeveloperCard
name="Terry Lennon" name="Terry Lennon"
@@ -407,7 +407,7 @@
href="https://twitter.com/appwrite" href="https://twitter.com/appwrite"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-link is-inline">@appwrite</a class="web-link is-inline">@appwrite</a
> handle my authentication process while I focus on the business logic. > handle my authentication process while I focus on the business logic.
</DeveloperCard> </DeveloperCard>
</li> </li>
@@ -447,7 +447,7 @@
href="https://twitter.com/appwrite" href="https://twitter.com/appwrite"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="aw-link is-inline">@appwrite</a class="web-link is-inline">@appwrite</a
>. With its robust feature set and open-source nature, it's the >. With its robust feature set and open-source nature, it's the
perfect choice for developers who want to build secure and scalable perfect choice for developers who want to build secure and scalable
applications. applications.
@@ -458,9 +458,9 @@
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden"> <div class="web-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div <div
class="u-position-absolute aw-is-not-mobile" class="u-position-absolute web-is-not-mobile"
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"
@@ -475,31 +475,31 @@
style="position: absolute; display: block;" style="position: absolute; display: block;"
/> />
</div> </div>
<div class="aw-big-padding-section-level-2 is-margin-replace-padding"> <div class="web-big-padding-section-level-2 is-margin-replace-padding">
<div class="aw-container u-position-relative"> <div class="web-container u-position-relative">
<section class="aw-hero is-align-start"> <section class="web-hero is-align-start">
<span class="aw-badges aw-eyebrow">SDKs_</span> <span class="web-badges web-eyebrow">SDKs_</span>
<h2 class="aw-display aw-u-color-text-primary u-max-width-600"> <h2 class="web-display web-u-color-text-primary u-max-width-600">
Code the way you want Code the way you want
</h2> </h2>
<p class="aw-description u-max-width-600"> <p class="web-description u-max-width-600">
We support many SDKs making Appwrite flexible to your needs and ensuring We support many SDKs making Appwrite flexible to your needs and ensuring
you can code with the language you want at any time. you can code with the language you want at any time.
</p> </p>
<Technologies /> <Technologies />
<a <a
href="/docs/sdks" href="/docs/sdks"
class="aw-button is-secondary" class="web-button is-secondary"
style:align-self="start" style:align-self="start"
> >
<span class="aw-sub-body-500">Explore all SDKs</span> <span class="web-sub-body-500">Explore all SDKs</span>
</a> </a>
</section> </section>
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-2 u-position-relative u-overflow-hidden"> <div class="web-big-padding-section-level-2 u-position-relative u-overflow-hidden">
<div <div
class="u-position-absolute u-z-index-0 aw-is-not-mobile" class="u-position-absolute u-z-index-0 web-is-not-mobile"
style:width="50%" style:width="50%"
style:height="100%" style:height="100%"
style:left="0" style:left="0"
@@ -508,31 +508,31 @@
<img src="/images/bgs/diagonal-lines.png" alt="" width="512" /> <img src="/images/bgs/diagonal-lines.png" alt="" width="512" />
</div> </div>
</div> </div>
<div class="aw-container u-position-relative"> <div class="web-container u-position-relative">
<div class="grid-1-1"> <div class="grid-1-1">
<section class="aw-hero is-align-start"> <section class="web-hero is-align-start">
<span class="aw-badges aw-eyebrow">Scale_</span> <span class="web-badges web-eyebrow">Scale_</span>
<h2 class="aw-display u-max-width-600 aw-u-color-text-primary"> <h2 class="web-display u-max-width-600 web-u-color-text-primary">
We scale for you We scale for you
</h2> </h2>
</section> </section>
<ul <ul
class="aw-big-list-info u-margin-inline-start-auto aw-u-inline-width-100-percent-mobile-break1 aw-u-margin-block-start-48" class="web-big-list-info u-margin-inline-start-auto web-u-inline-width-100-percent-mobile-break1 web-u-margin-block-start-48"
> >
<li class="aw-big-list-info-item"> <li class="web-big-list-info-item">
<div class="aw-headline aw-u-color-text-primary">90K</div> <div class="web-headline web-u-color-text-primary">90K</div>
<div class="text">Projects</div> <div class="text">Projects</div>
</li> </li>
<li class="aw-big-list-info-item"> <li class="web-big-list-info-item">
<div class="aw-headline aw-u-color-text-primary">+1B</div> <div class="web-headline web-u-color-text-primary">+1B</div>
<div class="text">Requests served</div> <div class="text">Requests served</div>
</li> </li>
<li class="aw-big-list-info-item"> <li class="web-big-list-info-item">
<div class="aw-headline aw-u-color-text-primary">20K</div> <div class="web-headline web-u-color-text-primary">20K</div>
<div class="text">Organizations</div> <div class="text">Organizations</div>
</li> </li>
<li class="aw-big-list-info-item"> <li class="web-big-list-info-item">
<div class="aw-headline aw-u-color-text-primary">99.99%</div> <div class="web-headline web-u-color-text-primary">99.99%</div>
<div class="text">Guaranteed uptime</div> <div class="text">Guaranteed uptime</div>
</li> </li>
</ul> </ul>
@@ -540,9 +540,9 @@
</div> </div>
</div> </div>
<div <div
class="aw-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 u-position-relative u-overflow-hidden"
> >
<div class="aw-container"> <div class="web-container">
<PreFooter /> <PreFooter />
<FooterNav /> <FooterNav />
<MainFooter /> <MainFooter />

16
src/routes/DeveloperCard.svelte
View File

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

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

@@ -54,32 +54,32 @@
<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 aw-u-pointer-events-none"> <div class="u-position-absolute web-u-pointer-events-none">
<enhanced:img src="./bg.png" alt="" /> <enhanced:img src="./bg.png" alt="" />
</div> </div>
<Main> <Main>
<TocRoot activeType="highest"> <TocRoot activeType="highest">
<div class="aw-container"> <div class="web-container">
<div class="aw-grid-120-1fr-auto"> <div class="web-grid-120-1fr-auto">
<header class="aw-grid-120-1fr-auto-header"> <header class="web-grid-120-1fr-auto-header">
<h1 class="aw-display aw-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 aw-u-padding-block-20 class="u-flex u-width-full-line web-u-padding-block-20
aw-u-color-text-primary aw-is-only-mobile web-u-color-text-primary web-is-only-mobile
aw-u-margin-inline-32-negative u-margin-block-start-24 aw-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="aw-container u-flex u-width-full-line u-main-space-between u-cross-center" class="web-container u-flex u-width-full-line u-main-space-between u-cross-center"
> >
<span class="aw-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" />
</span> </span>
</button> </button>
</header> </header>
<TocNav /> <TocNav />
<main class="aw-grid-120-1fr-auto-main /aw-is-mobile-closed" id="main"> <main class="web-grid-120-1fr-auto-main /web-is-mobile-closed" id="main">
<div class="aw-content"> <div class="web-content">
<section> <section>
<p> <p>
Resources for presenting the Appwrite brand to maintain consistency Resources for presenting the Appwrite brand to maintain consistency
@@ -87,16 +87,16 @@
various platforms and materials. various platforms and materials.
</p> </p>
<a href="/assets.zip" download class="aw-button u-cross-child-start"> <a href="/assets.zip" download class="web-button u-cross-child-start">
<span class="aw-icon-download" aria-hidden="true" /> <span class="web-icon-download" aria-hidden="true" />
<span>Download assets</span> <span>Download assets</span>
</a> </a>
</section> </section>
<section id={getSectionId(Section.NAMING)}> <section id={getSectionId(Section.NAMING)}>
<div class="u-flex aw-u-flex-vertical u-gap-8"> <div class="u-flex web-u-flex-vertical u-gap-8">
<h2 <h2
class="aw-title aw-u-color-text-primary" class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.NAMING)} on:visible={handleVisibility(Section.NAMING)}
> >
@@ -111,9 +111,9 @@
</section> </section>
<section id={getSectionId(Section.LOGOTYPE)}> <section id={getSectionId(Section.LOGOTYPE)}>
<div class="u-flex aw-u-flex-vertical u-gap-8"> <div class="u-flex web-u-flex-vertical u-gap-8">
<h2 <h2
class="aw-title aw-u-color-text-primary" class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.LOGOTYPE)} on:visible={handleVisibility(Section.LOGOTYPE)}
> >
@@ -127,8 +127,8 @@
<div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12"> <div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12">
<div <div
class="media-wrapper | theme-light | class="media-wrapper | theme-light |
u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64 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
aw-u-bg-color-neutral-100 aw-u-block-size-320" web-u-bg-color-neutral-100 web-u-block-size-320"
> >
<img <img
src="/assets/logotype/white.svg" src="/assets/logotype/white.svg"
@@ -136,23 +136,23 @@
/> />
<div class="buttons"> <div class="buttons">
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/logotype/white.svg" href="/assets/logotype/white.svg"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>SVG</span> <span>SVG</span>
</a> </a>
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/logotype/white.png" href="/assets/logotype/white.png"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>PNG</span> <span>PNG</span>
@@ -161,8 +161,8 @@
</div> </div>
<div <div
class="media-wrapper | theme-dark | class="media-wrapper | theme-dark |
u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64 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
aw-u-bg-color-neutral-800 aw-u-block-size-320" web-u-bg-color-neutral-800 web-u-block-size-320"
> >
<img <img
src="/assets/logotype/black.svg" src="/assets/logotype/black.svg"
@@ -170,23 +170,23 @@
/> />
<div class="buttons"> <div class="buttons">
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/logotype/black.svg" href="/assets/logotype/black.svg"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>SVG</span> <span>SVG</span>
</a> </a>
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/logotype/black.png" href="/assets/logotype/black.png"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>PNG</span> <span>PNG</span>
@@ -196,8 +196,8 @@
</div> </div>
</div> </div>
<section> <section>
<div class="u-flex aw-u-flex-vertical u-gap-8"> <div class="u-flex web-u-flex-vertical u-gap-8">
<h3 class="aw-label aw-u-color-text-primary"> <h3 class="web-label web-u-color-text-primary">
Co-branding logotypes Co-branding logotypes
</h3> </h3>
<p> <p>
@@ -206,8 +206,8 @@
collection of shapes. collection of shapes.
</p> </p>
<div <div
class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16 class="u-flex u-main-center u-cross-center u-margin-block-start-12 web-u-border-radius-8 u-padding-inline-16
aw-u-bg-color-neutral-800 aw-u-block-size-320" web-u-bg-color-neutral-800 web-u-block-size-320"
> >
<img <img
src="/assets/logotype/co-brand.svg" src="/assets/logotype/co-brand.svg"
@@ -219,9 +219,9 @@
</section> </section>
<section id={getSectionId(Section.LOGOMARK)}> <section id={getSectionId(Section.LOGOMARK)}>
<div class="u-flex aw-u-flex-vertical u-gap-8"> <div class="u-flex web-u-flex-vertical u-gap-8">
<h3 <h3
class="aw-title aw-u-color-text-primary" class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.LOGOMARK)} on:visible={handleVisibility(Section.LOGOMARK)}
> >
@@ -236,8 +236,8 @@
<div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12"> <div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12">
<div <div
class="media-wrapper | theme-light | class="media-wrapper | theme-light |
u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64 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
aw-u-bg-color-neutral-100 aw-u-block-size-320" web-u-bg-color-neutral-100 web-u-block-size-320"
> >
<img <img
src="/assets/logomark/logo.svg" src="/assets/logomark/logo.svg"
@@ -245,23 +245,23 @@
/> />
<div class="buttons"> <div class="buttons">
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/logomark/logo.svg" href="/assets/logomark/logo.svg"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>SVG</span> <span>SVG</span>
</a> </a>
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/logomark/logo.png" href="/assets/logomark/logo.png"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>PNG</span> <span>PNG</span>
@@ -270,8 +270,8 @@
</div> </div>
<div <div
class="media-wrapper | theme-dark | class="media-wrapper | theme-dark |
u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64 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
aw-u-bg-color-neutral-800 aw-u-block-size-320" web-u-bg-color-neutral-800 web-u-block-size-320"
> >
<img <img
src="/assets/logomark/logo.svg" src="/assets/logomark/logo.svg"
@@ -279,23 +279,23 @@
/> />
<div class="buttons"> <div class="buttons">
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/logomark/logo.svg" href="/assets/logomark/logo.svg"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>SVG</span> <span>SVG</span>
</a> </a>
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/logomark/logo.png" href="/assets/logomark/logo.png"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>PNG</span> <span>PNG</span>
@@ -305,8 +305,8 @@
</div> </div>
</div> </div>
<section id=""> <section id="">
<div class="u-flex aw-u-flex-vertical u-gap-8"> <div class="u-flex web-u-flex-vertical u-gap-8">
<h3 class="aw-label aw-u-color-text-primary"> <h3 class="web-label web-u-color-text-primary">
Co-branding lockups Co-branding lockups
</h3> </h3>
<p> <p>
@@ -315,8 +315,8 @@
collection of shapes. collection of shapes.
</p> </p>
<div <div
class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16 class="u-flex u-main-center u-cross-center u-margin-block-start-12 web-u-border-radius-8 u-padding-inline-16
aw-u-bg-color-neutral-800 aw-u-block-size-320" web-u-bg-color-neutral-800 web-u-block-size-320"
> >
<img <img
src="/assets/logomark/co-brand.svg" src="/assets/logomark/co-brand.svg"
@@ -329,7 +329,7 @@
<section id={getSectionId(Section.COLORS)}> <section id={getSectionId(Section.COLORS)}>
<h2 <h2
class="aw-title aw-u-color-text-primary" class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.COLORS)} on:visible={handleVisibility(Section.COLORS)}
> >
@@ -337,34 +337,34 @@
</h2> </h2>
<div class="u-flex u-flex-wrap u-gap-32"> <div class="u-flex u-flex-wrap u-gap-32">
<div <div
class="media-wrapper | u-stretch aw-u-flex-basis-200 aw-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 u-gap-8
aw-u-border-radius-8 u-padding-inline-24 aw-u-text-color-neutral-900 aw-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
aw-u-media-ratio-1-1 aw-u-min-block-size-160" web-u-media-ratio-1-1 web-u-min-block-size-160"
> >
<h3 class="aw-label">Light Grey</h3> <h3 class="web-label">Light Grey</h3>
<p class="aw-caption-400">#EDEDF0</p> <p class="web-caption-400">#EDEDF0</p>
<div class="buttons | theme-light"> <div class="buttons | theme-light">
<Copy toCopy="#EDEDF0" /> <Copy toCopy="#EDEDF0" />
</div> </div>
</div> </div>
<div <div
class="media-wrapper | aw-u-sep u-stretch aw-u-flex-basis-200 aw-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 aw-u-border-radius-8 u-padding-inline-24 aw-u-media-ratio-1-1 aw-u-min-block-size-160 u-gap-8 web-u-border-radius-8 u-padding-inline-24 web-u-media-ratio-1-1 web-u-min-block-size-160
aw-u-text-color-neutral-50 aw-u-bg-color-neutral-900" web-u-text-color-neutral-50 web-u-bg-color-neutral-900"
> >
<h3 class="aw-label">Dark Grey</h3> <h3 class="web-label">Dark Grey</h3>
<p class="aw-caption-400">#19191D</p> <p class="web-caption-400">#19191D</p>
<div class="buttons"> <div class="buttons">
<Copy toCopy="#19191D" /> <Copy toCopy="#19191D" />
</div> </div>
</div> </div>
<div <div
class="media-wrapper | u-stretch aw-u-flex-basis-200 aw-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 u-gap-8
aw-u-border-radius-8 u-padding-inline-24 aw-u-text-color-neutral-50 aw-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
aw-u-aspect-ratio-1-1 aw-u-min-block-size-160" web-u-aspect-ratio-1-1 web-u-min-block-size-160"
> >
<h3 class="aw-label">Appwrite Pink</h3> <h3 class="web-label">Appwrite Pink</h3>
<p class="aw-caption-400">#FD366E</p> <p class="web-caption-400">#FD366E</p>
<div class="buttons"> <div class="buttons">
<Copy toCopy="#FD366E" /> <Copy toCopy="#FD366E" />
</div> </div>
@@ -373,9 +373,9 @@
</section> </section>
<section id={getSectionId(Section.VISUALS)}> <section id={getSectionId(Section.VISUALS)}>
<div class="u-flex aw-u-flex-vertical u-gap-8"> <div class="u-flex web-u-flex-vertical u-gap-8">
<h2 <h2
class="aw-title aw-u-color-text-primary" class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.VISUALS)} on:visible={handleVisibility(Section.VISUALS)}
> >
@@ -385,32 +385,32 @@
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="aw-grid-1-1-opt-2 u-gap-32 u-margin-block-start-12"> <div class="web-grid-1-1-opt-2 u-gap-32 u-margin-block-start-12">
<div class="media-wrapper"> <div class="media-wrapper">
<img <img
class="aw-u-border-radius-8 aw-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"
src="/assets/visuals/dashboard.png" src="/assets/visuals/dashboard.png"
alt="Dashboard" alt="Dashboard"
/> />
<div class="buttons"> <div class="buttons">
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/visuals/dashboard.jpg" href="/assets/visuals/dashboard.jpg"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>JPG</span> <span>JPG</span>
</a> </a>
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href={'/assets/visuals/dashboard.png'} href={'/assets/visuals/dashboard.png'}
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>PNG</span> <span>PNG</span>
@@ -419,29 +419,29 @@
</div> </div>
<div class="media-wrapper"> <div class="media-wrapper">
<img <img
class="aw-u-border-radius-8 aw-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"
src="/assets/visuals/auth.png" src="/assets/visuals/auth.png"
alt="Appwrite Auth" alt="Appwrite Auth"
/> />
<div class="buttons"> <div class="buttons">
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/visuals/auth.jpg" href="/assets/visuals/auth.jpg"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>JPG</span> <span>JPG</span>
</a> </a>
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href={'/assets/visuals/auth.png'} href={'/assets/visuals/auth.png'}
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>PNG</span> <span>PNG</span>
@@ -450,29 +450,29 @@
</div> </div>
<div class="media-wrapper"> <div class="media-wrapper">
<img <img
class="aw-u-border-radius-8 aw-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"
src="/assets/visuals/databases.png" src="/assets/visuals/databases.png"
alt="Appwrite Databases" alt="Appwrite Databases"
/> />
<div class="buttons"> <div class="buttons">
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/visuals/databases.jpg" href="/assets/visuals/databases.jpg"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>JPG</span> <span>JPG</span>
</a> </a>
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href={'/assets/visuals/databases.png'} href={'/assets/visuals/databases.png'}
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>PNG</span> <span>PNG</span>
@@ -482,29 +482,29 @@
<div class="media-wrapper"> <div class="media-wrapper">
<img <img
class="aw-u-border-radius-8 aw-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"
src="/assets/visuals/storage.png" src="/assets/visuals/storage.png"
alt="Appwrite Storage" alt="Appwrite Storage"
/> />
<div class="buttons"> <div class="buttons">
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/visuals/storage.jpg" href="/assets/visuals/storage.jpg"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>JPG</span> <span>JPG</span>
</a> </a>
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href={'/assets/visuals/storage.png'} href={'/assets/visuals/storage.png'}
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>PNG</span> <span>PNG</span>
@@ -514,29 +514,29 @@
<div class="media-wrapper"> <div class="media-wrapper">
<img <img
class="aw-u-border-radius-8 aw-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"
src="/assets/visuals/functions.png" src="/assets/visuals/functions.png"
alt="Appwrite Functions" alt="Appwrite Functions"
/> />
<div class="buttons"> <div class="buttons">
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href="/assets/visuals/functions.jpg" href="/assets/visuals/functions.jpg"
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>JPG</span> <span>JPG</span>
</a> </a>
<a <a
class="aw-button is-secondary" class="web-button is-secondary"
href={'/assets/visuals/functions.png'} href={'/assets/visuals/functions.png'}
download download
> >
<span <span
class="aw-icon-download" class="web-icon-download"
aria-label="download" aria-label="download"
/> />
<span>PNG</span> <span>PNG</span>
@@ -548,9 +548,9 @@
</section> </section>
<section id={getSectionId(Section.CONTACT)}> <section id={getSectionId(Section.CONTACT)}>
<div class="u-flex aw-u-flex-vertical u-gap-8"> <div class="u-flex web-u-flex-vertical u-gap-8">
<h2 <h2
class="aw-title aw-u-color-text-primary" class="web-title web-u-color-text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.CONTACT)} on:visible={handleVisibility(Section.CONTACT)}
> >
@@ -560,7 +560,7 @@
Should you require further assistance or have specific needs Should you require further assistance or have specific needs
beyond what's presented on this page, please don't hesitate to beyond what's presented on this page, please don't hesitate to
<a <a
class="aw-link" class="web-link"
href="/contact-us" href="/contact-us"
target="_blank" target="_blank"
rel="noopener noreferrer">contact us</a rel="noopener noreferrer">contact us</a

4
src/routes/assets/Copy.svelte
View File

@@ -11,7 +11,7 @@
}; };
</script> </script>
<button class="aw-button is-secondary" on:click={copyToClipboard}> <button class="web-button is-secondary" on:click={copyToClipboard}>
<span class="aw-icon-{copied ? 'check' : 'copy'}" aria-label={copied ? 'Copied' : 'Copy'} /> <span class="web-icon-{copied ? 'check' : 'copy'}" aria-label={copied ? 'Copied' : 'Copy'} />
<span>Copy</span> <span>Copy</span>
</button> </button>

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

@@ -31,8 +31,8 @@
</svelte:head> </svelte:head>
<Main> <Main>
<div class="aw-big-padding-section" style:overflow-x="hidden"> <div class="web-big-padding-section" style:overflow-x="hidden">
<div class="aw-big-padding-section-level-1 u-position-relative"> <div class="web-big-padding-section-level-1 u-position-relative">
<div <div
class="u-position-absolute" class="u-position-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;"
@@ -90,44 +90,44 @@
</svg> </svg>
</div> </div>
<div class="aw-big-padding-section-level-2 u-position-relative"> <div class="web-big-padding-section-level-2 u-position-relative">
<div class="aw-container"> <div class="web-container">
<h1 class="aw-display aw-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="aw-feature-article u-margin-block-start-48"> <article class="web-feature-article u-margin-block-start-48">
<a href={featured.href} class="aw-feature-article-image"> <a href={featured.href} class="web-feature-article-image">
<img src={featured.cover} class="aw-image-ratio-4/3" alt="cover" /> <img src={featured.cover} class="web-image-ratio-4/3" alt="cover" />
</a> </a>
<div class="aw-feature-article-content"> <div class="web-feature-article-content">
<header class="aw-feature-article-header"> <header class="web-feature-article-header">
<ul class="aw-metadata aw-caption-400 aw-is-only-mobile"> <ul class="web-metadata web-caption-400 web-is-only-mobile">
<li>{featured.timeToRead} min</li> <li>{featured.timeToRead} min</li>
</ul> </ul>
<a href={featured.href}> <a href={featured.href}>
<h2 class="aw-title aw-u-color-text-primary"> <h2 class="web-title web-u-color-text-primary">
{featured.title} {featured.title}
</h2> </h2>
</a> </a>
</header> </header>
<p class="aw-sub-body-400"> <p class="web-sub-body-400">
{featured.description} {featured.description}
</p> </p>
<div class="aw-author"> <div class="web-author">
<div class="u-flex u-cross-center u-gap-8"> <div class="u-flex u-cross-center u-gap-8">
<img <img
class="aw-author-image" class="web-author-image"
src={author?.avatar} src={author?.avatar}
width="24" width="24"
height="24" height="24"
alt="" alt=""
/> />
<div class="aw-author-info"> <div class="web-author-info">
<a href={author?.href} class="aw-sub-body-400 aw-link" <a href={author?.href} class="web-sub-body-400 web-link"
>{author?.name}</a >{author?.name}</a
> >
<p class="aw-caption-400 u-hide">{author?.bio}</p> <p class="web-caption-400 u-hide">{author?.bio}</p>
<ul class="aw-metadata aw-caption-400 aw-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>
@@ -136,30 +136,30 @@
<li> <li>
<a <a
href="https://twitter.com/appwrite" href="https://twitter.com/appwrite"
class="aw-icon-button" class="web-icon-button"
aria-label="Author twitter" aria-label="Author twitter"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<span class="aw-icon-x" aria-hidden="true" /> <span class="web-icon-x" aria-hidden="true" />
</a> </a>
</li> </li>
<li> <li>
<a <a
href="https://twitter.com/appwrite" href="https://twitter.com/appwrite"
class="aw-icon-button" class="web-icon-button"
aria-label="Author LinkedIn" aria-label="Author LinkedIn"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<span class="aw-icon-linkedin" aria-hidden="true" /> <span class="web-icon-linkedin" aria-hidden="true" />
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<a <a
href={featured.href} href={featured.href}
class="aw-button is-secondary u-margin-block-start-auto" class="web-button is-secondary u-margin-block-start-auto"
> >
<span>Read article</span> <span>Read article</span>
</a> </a>
@@ -169,13 +169,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-1"> <div class="web-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<h2 class="aw-title aw-u-color-text-primary">Articles</h2> <h2 class="web-title web-u-color-text-primary">Articles</h2>
<div class="u-margin-block-start-48"> <div class="u-margin-block-start-48">
<ul class="aw-grid-articles"> <ul class="web-grid-articles">
{#each data.posts as post} {#each data.posts as post}
{@const author = data.authors.find( {@const author = data.authors.find(
(author) => author.slug === post.author (author) => author.slug === post.author
@@ -196,8 +196,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<FooterNav /> <FooterNav />
<MainFooter /> <MainFooter />
</div> </div>

8
src/routes/blog/post/announcing-appwrite-messaging/+page.markdoc
View File

@@ -28,17 +28,17 @@ As mentioned, Messaging covers three communication channels under one unified AP
{% cards_item href="/docs/products/messaging/apns" title="APNS" icon="icon-apple" %} {% cards_item href="/docs/products/messaging/apns" title="APNS" icon="icon-apple" %}
Use APNs for push notification to Apple devices. Use APNs for push notification to Apple devices.
{% /cards_item %} {% /cards_item %}
{% cards_item href="/docs/products/messaging/fcm" title="FCM" icon="aw-icon-firebase" %} {% cards_item href="/docs/products/messaging/fcm" title="FCM" icon="web-icon-firebase" %}
Use FCM for push notification to Android and Apple devices. Use FCM for push notification to Android and Apple devices.
{% /cards_item %} {% /cards_item %}
{% /cards %} {% /cards %}
## Email ## Email
{% cards %} {% cards %}
{% cards_item href="/docs/products/messaging/mailgun" title="Mailgun" icon="aw-icon-mailgun" %} {% cards_item href="/docs/products/messaging/mailgun" title="Mailgun" icon="web-icon-mailgun" %}
Use Mailgun to send emails Use Mailgun to send emails
{% /cards_item %} {% /cards_item %}
{% cards_item href="/docs/products/messaging/sendgrid" title="Sendgrid" icon="aw-icon-sendgrid" %} {% cards_item href="/docs/products/messaging/sendgrid" title="Sendgrid" icon="web-icon-sendgrid" %}
Use Sendgrid to send emails Use Sendgrid to send emails
{% /cards_item %} {% /cards_item %}
{% cards_item href="/docs/products/messaging/smtp" title="SMTP" icon="icon-mail" %} {% cards_item href="/docs/products/messaging/smtp" title="SMTP" icon="icon-mail" %}
@@ -57,7 +57,7 @@ Use MSG91 for SMS notifications to mobile devices.
{% cards_item href="/docs/products/messaging/telesign" title="Telesign" icon="icon-telesign" %} {% cards_item href="/docs/products/messaging/telesign" title="Telesign" icon="icon-telesign" %}
Use Telesign for SMS notifications to mobile devices. Use Telesign for SMS notifications to mobile devices.
{% /cards_item %} {% /cards_item %}
{% cards_item href="/docs/products/messaging/textmagic" title="TextMagic" icon="aw-icon-textmagic" %} {% cards_item href="/docs/products/messaging/textmagic" title="TextMagic" icon="web-icon-textmagic" %}
Use TextMagic for SMS notifications to mobile devices. Use TextMagic for SMS notifications to mobile devices.
{% /cards_item %} {% /cards_item %}
{% cards_item href="/docs/products/messaging/vonage" title="Vonage" icon="icon-vonage" %} {% cards_item href="/docs/products/messaging/vonage" title="Vonage" icon="icon-vonage" %}

14
src/routes/blog/post/defying-the-laws-of-web-animations/+page.markdoc
View File

@@ -66,8 +66,8 @@ export const scroll: Action<
HTMLElement, HTMLElement,
undefined, undefined,
{ {
"on:aw-scroll": (e: CustomEvent<ScrollInfo>) => void; "on:web-scroll": (e: CustomEvent<ScrollInfo>) => void;
"on:aw-resize": (e: CustomEvent<ScrollInfo>) => void; "on:web-resize": (e: CustomEvent<ScrollInfo>) => void;
} }
> = (node) => { > = (node) => {
function getScrollInfo(): ScrollInfo { function getScrollInfo(): ScrollInfo {
@@ -87,7 +87,7 @@ export const scroll: Action<
}; };
} }
const createHandler = (eventName: "aw-scroll" | "aw-resize") => { const createHandler = (eventName: "web-scroll" | "web-resize") => {
return () => { return () => {
node.dispatchEvent( node.dispatchEvent(
new CustomEvent<ScrollInfo>(eventName, { new CustomEvent<ScrollInfo>(eventName, {
@@ -97,8 +97,8 @@ export const scroll: Action<
}; };
}; };
const handleScroll = createHandler("aw-scroll"); const handleScroll = createHandler("web-scroll");
const handleResize = createHandler("aw-resize"); const handleResize = createHandler("web-resize");
handleScroll(); handleScroll();
handleResize(); handleResize();
@@ -122,7 +122,7 @@ You'll notice however, that this is not **just** a regular function. It's a [Sve
In practice, what this means is, given this syntax: In practice, what this means is, given this syntax:
```html ```html
<div id="products" use:scroll on:aw-scroll={(e) => scrollInfo = e.detail}> <div id="products" use:scroll on:web-scroll={(e) => scrollInfo = e.detail}>
<!-- ... --> <!-- ... -->
</div> </div>
``` ```
@@ -164,7 +164,7 @@ The video above showcases both Motion and Svelte transitions in action. The tabl
{#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="aw-icon-{provider.toLowerCase()}" /> <span class="web-icon-{provider.toLowerCase()}" />
<span>{provider}</span> <span>{provider}</span>
</div> </div>
</button> </button>

120
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 aw-is-only-mobile u-inset-inline-0"> <div class="u-position-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"
@@ -40,7 +40,7 @@
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="u-position-absolute u-inset-inline-start-0 aw-u-inset-block-start-100 aw-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"
@@ -50,7 +50,7 @@
/> />
</div> </div>
<div <div
class="u-position-absolute u-inset-inline-end-0 aw-u-inset-block-start-100 aw-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"
@@ -61,7 +61,7 @@
</div> </div>
</div> </div>
<div class="u-position-absolute u-width-full-line aw-is-not-mobile"> <div class="u-position-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"
@@ -95,40 +95,40 @@
</div> </div>
<Main> <Main>
<div class="aw-big-padding-section"> <div class="web-big-padding-section">
<div class="aw-big-padding-section-level-1"> <div class="web-big-padding-section-level-1">
<div class="aw-container u-position-relative"> <div class="web-container u-position-relative">
<div <div
class="aw-big-padding-section-level-2 aw-u-max-width-800 u-flex u-main-center u-cross-center u-margin-inline-auto aw-u-margin-block-0" 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"
style="block-size:calc(100vh - 6.375rem)" style="block-size:calc(100vh - 6.375rem)"
> >
<div class="aw-hero aw-u-gap-20"> <div class="web-hero web-u-gap-20">
<h1 class="aw-headline aw-u-color-text-primary">Brand new Appwrite</h1> <h1 class="web-headline web-u-color-text-primary">Brand new Appwrite</h1>
<p class="aw-description aw-u-color-text-primary aw-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
diam augue. Praesent sagittis eget ipsum vitae eleifend. diam augue. Praesent sagittis eget ipsum vitae eleifend.
</p> </p>
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-2 aw-u-sep-block-start"> <div class="web-big-padding-section-level-2 web-u-sep-block-start">
<div class="u-stretch u-flex aw-u-flex-vertical-mobile"> <div class="u-stretch u-flex web-u-flex-vertical-mobile">
<div <div
class="aw-hero is-align-start aw-u-max-width-480 aw-u-padding-block-start-48" class="web-hero is-align-start web-u-max-width-480 web-u-padding-block-start-48"
> >
<h2 class="aw-title aw-u-color-text-primary"> <h2 class="web-title web-u-color-text-primary">
All the tools that developers need All the tools that developers need
</h2> </h2>
<p class="aw-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. Praesent sagittis eget ipsum vitae eleifend. diam augue. Praesent sagittis eget ipsum vitae eleifend.
</p> </p>
</div> </div>
<div <div
class="u-stretch u-flex aw-u-margin-inline-auto-mobile aw-u-margin-block-start-40-mobile" class="u-stretch u-flex web-u-margin-inline-auto-mobile web-u-margin-block-start-40-mobile"
> >
<img <img
class="aw-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"
src="/images/pages/brand-lunch/box.png" src="/images/pages/brand-lunch/box.png"
alt="" alt=""
/> />
@@ -136,11 +136,11 @@
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-2 aw-u-sep-block-start"> <div class="web-big-padding-section-level-2 web-u-sep-block-start">
<div class="aw-grid-1-1-opt-2"> <div class="web-grid-1-1-opt-2">
<div class="aw-hero is-align-start aw-u-padding-block-start-40"> <div class="web-hero is-align-start web-u-padding-block-start-40">
<h2 class="aw-title aw-u-color-text-primary">Eliminating complexity</h2> <h2 class="web-title web-u-color-text-primary">Eliminating complexity</h2>
<p class="aw-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.
</p> </p>
@@ -153,13 +153,13 @@
</div> </div>
</div> </div>
<div <div
class="aw-hero is-align-start class="web-hero is-align-start
aw-u-padding-block-start-40 aw-u-sep-inline-start-not-break1 aw-u-padding-inline-start-48-not-break1" web-u-padding-block-start-40 web-u-sep-inline-start-not-break1 web-u-padding-inline-start-48-not-break1"
> >
<h2 class="aw-title aw-u-color-text-primary"> <h2 class="web-title web-u-color-text-primary">
Allowing you to innovate without limits Allowing you to innovate without limits
</h2> </h2>
<p class="aw-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. Praesent sagittis eget ipsum vitae eleifend. diam augue. Praesent sagittis eget ipsum vitae eleifend.
</p> </p>
@@ -176,11 +176,11 @@
</div> </div>
</div> </div>
<div <div
class="aw-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 u-position-relative u-padding-0 u-full-screen-height u-flex u-main-center u-cross-center u-overflow-hidden"
> >
<div class="u-position-absolute u-inset-inline-start-0"> <div class="u-position-absolute u-inset-inline-start-0">
<svg <svg
class="aw-u-opacity-40-mobile u-max-width-100-percent aw-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"
width="698" width="698"
height="900" height="900"
@@ -321,7 +321,7 @@
</div> </div>
<div class="u-position-absolute u-inset-inline-end-0"> <div class="u-position-absolute u-inset-inline-end-0">
<svg <svg
class="aw-u-opacity-40-mobile u-max-width-100-percent aw-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"
width="874" width="874"
height="900" height="900"
@@ -456,11 +456,11 @@
</defs> </defs>
</svg> </svg>
</div> </div>
<div class="aw-big-padding-section-level-2 u-position-relative"> <div class="web-big-padding-section-level-2 u-position-relative">
<div class="aw-container"> <div class="web-container">
<div class="aw-hero"> <div class="web-hero">
<p <p
class="aw-headline aw-u-color-text-primary aw-u-max-width-610 u-margin-inline-auto" class="web-headline web-u-color-text-primary web-u-max-width-610 u-margin-inline-auto"
> >
Build like a team of hundreds Build like a team of hundreds
</p> </p>
@@ -469,11 +469,11 @@
</div> </div>
</div> </div>
<div <div
class="aw-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 u-position-relative u-padding-0 u-full-screen-height u-flex u-main-center u-cross-center u-overflow-hidden"
> >
<div class="u-position-absolute u-inset-inline-start-0"> <div class="u-position-absolute u-inset-inline-start-0">
<svg <svg
class="aw-u-opacity-40-mobile u-max-width-100-percent aw-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"
width="698" width="698"
height="900" height="900"
@@ -614,7 +614,7 @@
</div> </div>
<div class="u-position-absolute u-inset-inline-end-0"> <div class="u-position-absolute u-inset-inline-end-0">
<svg <svg
class="aw-u-opacity-40-mobile u-max-width-100-percent aw-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"
width="874" width="874"
height="900" height="900"
@@ -749,8 +749,8 @@
</defs> </defs>
</svg> </svg>
</div> </div>
<div class="aw-big-padding-section-level-2 u-position-relative"> <div class="web-big-padding-section-level-2 u-position-relative">
<div class="aw-container"> <div class="web-container">
<div class="u-flex u-main-center u-cross-center"> <div class="u-flex u-main-center u-cross-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -812,7 +812,7 @@
</div> </div>
</div> </div>
<div <div
class="aw-big-padding-section-level-1 aw-white-section theme-light class="web-big-padding-section-level-1 web-white-section theme-light
u-position-relative u-padding-0 u-overflow-hidden" u-position-relative u-padding-0 u-overflow-hidden"
> >
<div class="u-position-absolute u-inset-inline-end-0"> <div class="u-position-absolute u-inset-inline-end-0">
@@ -1083,10 +1083,10 @@
</defs> </defs>
</svg> </svg>
</div> </div>
<div class="aw-big-padding-section-level-2 u-position-relative"> <div class="web-big-padding-section-level-2 u-position-relative">
<div class="aw-container"> <div class="web-container">
<div <div
class="u-full-screen-height u-flex-vertical aw-u-gap-80 u-main-center u-cross-center" class="u-full-screen-height u-flex-vertical web-u-gap-80 u-main-center u-cross-center"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -1143,7 +1143,7 @@
fill="#FD366E" fill="#FD366E"
/> />
</svg> </svg>
<div class="u-flex aw-u-flex-vertical-mobile u-cross-center u-gap-32"> <div class="u-flex web-u-flex-vertical-mobile u-cross-center u-gap-32">
<div class="u-flex-vertical u-cross-center u-gap-12"> <div class="u-flex-vertical u-cross-center u-gap-12">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -1159,7 +1159,7 @@
fill="#C3C3C6" fill="#C3C3C6"
/> />
</svg> </svg>
<div class="aw-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 u-gap-12">
@@ -1192,32 +1192,32 @@
fill="#C3C3C6" fill="#C3C3C6"
/> />
</svg> </svg>
<div class="aw-caption-400">With a passion for coding</div> <div class="web-caption-400">With a passion for coding</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="aw-container"> <div class="web-container">
<img <img
src="/images/brand/new-brand-grid-mobile.png" src="/images/brand/new-brand-grid-mobile.png"
alt="brand visual stuff" alt="brand visual stuff"
class="aw-is-only-mobile" class="web-is-only-mobile"
width="100%" width="100%"
/> />
<img <img
src="/images/brand/new-brand-grid-desktop.png" src="/images/brand/new-brand-grid-desktop.png"
alt="brand visual stuff" alt="brand visual stuff"
class="aw-is-not-mobile" class="web-is-not-mobile"
width="100%" width="100%"
/> />
</div> </div>
</div> </div>
</div> </div>
<div class="aw-big-padding-section-level-1 u-position-relative u-padding-0"> <div class="web-big-padding-section-level-1 u-position-relative u-padding-0">
<div class="u-position-absolute u-inset-inline-start-0 u-width-full-line"> <div class="u-position-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"
@@ -1576,27 +1576,27 @@
</defs> </defs>
</svg> </svg>
</div> </div>
<div class="aw-big-padding-section-level-2 u-position-relative"> <div class="web-big-padding-section-level-2 u-position-relative">
<div class="aw-container"> <div class="web-container">
<div class="aw-grid-1-1-opt-2 u-gap-32 u-main-space-between"> <div class="web-grid-1-1-opt-2 u-gap-32 u-main-space-between">
<div class="aw-hero is-align-start aw-u-max-width-480"> <div class="web-hero is-align-start web-u-max-width-480">
<h4 class="aw-title aw-u-color-text-primary"> <h4 class="web-title web-u-color-text-primary">
Be a part of #Teamof100 Be a part of #Teamof100
</h4> </h4>
<p <p
class="aw-main-body-500 u-margin-block-start-4 aw-u-color-text-primary aw-u-opacity-64" class="web-main-body-500 u-margin-block-start-4 web-u-color-text-primary web-u-opacity-64"
> >
Join our rebrand celebration by sharing #teamof100 in your socials Join our rebrand celebration by sharing #teamof100 in your socials
for a chance to win brand-new Appwrite swag. for a chance to win brand-new Appwrite swag.
</p> </p>
<button <button
class="aw-button is-transparent u-margin-block-start-16 is-full-width-mobile" class="web-button is-transparent u-margin-block-start-16 is-full-width-mobile"
> >
<span class="aw-icon-star" aria-hidden="true" /> <span class="web-icon-star" aria-hidden="true" />
<span>Share</span> <span>Share</span>
</button> </button>
</div> </div>
<div class="aw-media-container u-flex-basis-250 u-stretch"> <div class="web-media-container u-flex-basis-250 u-stretch">
<img <img
src="/images/brand/t-shirts.png" src="/images/brand/t-shirts.png"
alt="brand visual stuff" alt="brand visual stuff"

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

@@ -6,15 +6,15 @@
</script> </script>
<div class="changelog-entry"> <div class="changelog-entry">
<time class="aw-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="aw-media"> <a href={entry.href} class="web-media">
<img src={entry.cover} alt="" class="aw-u-media-ratio-16-9 u-width-full-line" /> <img src={entry.cover} alt="" class="web-u-media-ratio-16-9 u-width-full-line" />
</a> </a>
{/if} {/if}
<div class="padded"> <div class="padded">
<h2 class="aw-title aw-u-color-text-primary"> <h2 class="web-title web-u-color-text-primary">
<a href={entry.href}> <a href={entry.href}>
{entry.title} {entry.title}
</a> </a>

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