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

4
src/icons/scripts.js
View File

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

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

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

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

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

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

@@ -140,11 +140,11 @@
<div
id="open-source"
use:scroll
on:aw-scroll={({ detail }) => {
on:web-scroll={({ detail }) => {
const { percentage } = detail;
scrollHandler(percentage);
}}
on:aw-resize={({ detail }) => {
on:web-resize={({ detail }) => {
scrollHandler.reset();
const { percentage } = detail;
@@ -152,84 +152,84 @@
}}
>
<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">
<a
href="/discord"
target="_blank"
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"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span
class="aw-icon-discord aw-u-font-size-40"
class="web-icon-discord web-u-font-size-40"
aria-hidden="true"
aria-label="Discord"
/>
</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
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"
href="https://github.com/appwrite/appwrite"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span
class="aw-icon-github aw-u-font-size-40"
class="web-icon-github web-u-font-size-40"
aria-hidden="true"
aria-label="GitHub"
/>
</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
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"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span
class="aw-icon-x aw-u-font-size-40"
class="web-icon-x web-u-font-size-40"
aria-hidden="true"
aria-label="Twitter"
/>
</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
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"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span
class="aw-icon-youtube aw-u-font-size-40"
class="web-icon-youtube web-u-font-size-40"
aria-hidden="true"
aria-label="YouTube"
/>
</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
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"
href="https://github.com/appwrite/appwrite"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span
class="aw-icon-github aw-u-font-size-40"
class="web-icon-github web-u-font-size-40"
aria-hidden="true"
aria-label="GitHub"
/>
</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>
</div>
</div>
@@ -265,8 +265,8 @@
&::after {
background: linear-gradient(
to top,
hsl(var(--aw-color-background)) 0%,
hsl(var(--aw-color-background) / 0) 5%
hsl(var(--web-color-background)) 0%,
hsl(var(--web-color-background) / 0) 5%
);
position: absolute;
inset: 0;

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

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

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

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

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

@@ -5,13 +5,13 @@
<div class="outside">
<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
</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,
storage, and more using Appwrite's development platform.
</p>
@@ -25,10 +25,10 @@
<div class="info">
<h3>
<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>
<h4 class="aw-title">{info.subtitle}</h4>
<h4 class="web-title">{info.subtitle}</h4>
<p>
{info.description}
</p>
@@ -109,13 +109,13 @@
align-items: center;
gap: 0.75rem;
.aw-label {
.web-label {
margin-block-start: 0.25rem;
}
}
h4 {
color: hsl(var(--aw-color-primary));
color: hsl(var(--web-color-primary));
margin-block-start: 0.75rem;
}
@@ -159,7 +159,7 @@
}
hr {
border: 1px solid hsl(var(--aw-color-smooth));
border: 1px solid hsl(var(--web-color-smooth));
margin-inline: calc(var(--padding-inline) * -1);
}
}

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

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

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

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

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

@@ -6,7 +6,7 @@
const { state } = authController;
const getIcon = (provider: string) => {
return `aw-icon-${provider.toLowerCase()}`;
return `web-icon-${provider.toLowerCase()}`;
};
</script>
@@ -39,7 +39,7 @@
> :nth-child(2) {
margin-left: 0.75rem;
color: hsl(var(--aw-color-white));
color: hsl(var(--web-color-white));
font-family: Inter;
font-size: 0.875rem;
@@ -66,7 +66,7 @@
font-size: var(--size);
width: var(--size);
height: var(--size);
color: hsl(var(--aw-color-greayscale-50));
color: hsl(var(--web-color-greayscale-50));
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)}
<button class="oauth" transition:fade={{ duration: 100 }} animate:flip={{ duration: 250 }}>
<div class="inner">
<span class="aw-icon-{provider.toLowerCase()}" />
<span class="web-icon-{provider.toLowerCase()}" />
<span>{provider}</span>
</div>
</button>
@@ -151,7 +151,7 @@
font-weight: 400;
line-height: 1.25rem; /* 166.667% */
letter-spacing: -0.0105rem;
color: hsl(var(--aw-color-greyscale-500));
color: hsl(var(--web-color-greyscale-500));
margin-block-start: 0.75rem;
@@ -160,7 +160,7 @@
content: '';
height: 1px;
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: 1px solid #d9d9d9;
color: hsl(var(--aw-color-greyscale-750));
color: hsl(var(--web-color-greyscale-750));
text-align: center;
/* Responsive/Caption-500 */

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

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

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

@@ -23,7 +23,7 @@
</div>
<button class="add-btn">
<span class="aw-icon-plus" />
<span class="web-icon-plus" />
</button>
</div>
@@ -55,14 +55,14 @@
[class*='icon-'] {
font-size: 1.25rem;
color: hsl(var(--aw-color-greyscale-500));
color: hsl(var(--web-color-greyscale-500));
}
}
.date {
margin-block-start: 3rem;
color: hsl(var(--aw-color-greyscale-600));
color: hsl(var(--web-color-greyscale-600));
font-family: Inter;
font-size: 0.75rem;
font-style: normal;
@@ -83,8 +83,8 @@
gap: 0.75rem;
border-radius: 0.5rem;
border: 1px solid hsl(var(--aw-color-greyscale-50));
background: hsl(var(--aw-color-white));
border: 1px solid hsl(var(--web-color-greyscale-50));
background: hsl(var(--web-color-white));
color: var(--greyscale-700, var(--color-greyscale-700, #56565c));
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">
{#if $state.submit !== 'idle'}
<span class="aw-icon-github" in:fade />
<span class="web-icon-github" in:fade />
{/if}
{#if $state.submit === 'loading'}
<span in:fade>Pushing to GitHub...</span>
<div class="loader is-small" in:fade />
{:else if $state.submit === 'success'}
<span>Deployed to Appwrite Cloud</span>
<span class="aw-icon-check" />
<span class="web-icon-check" />
{/if}
</div>

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

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

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

@@ -8,9 +8,9 @@
<div class="pseudo-table">
<div class="header">
<span class="aw-eyebrow">Filename</span>
<span class="aw-eyebrow">Type</span>
<span class="aw-eyebrow">Size</span>
<span class="web-eyebrow">Filename</span>
<span class="web-eyebrow">Type</span>
<span class="web-eyebrow">Size</span>
</div>
{#each $state.files as file (file.src)}
<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>
<button class="add-btn">
<span class="aw-icon-plus" />
<span class="web-icon-plus" />
</button>
<div class="overlay" id="overlay-{$elId}">
@@ -85,14 +85,14 @@
[class*='icon-'] {
font-size: 1.25rem;
color: hsl(var(--aw-color-greyscale-500));
color: hsl(var(--web-color-greyscale-500));
}
}
.date {
margin-block-start: 3rem;
color: hsl(var(--aw-color-greyscale-600));
color: hsl(var(--web-color-greyscale-600));
font-family: Inter;
font-size: 0.75rem;
font-style: normal;
@@ -113,8 +113,8 @@
gap: 0.75rem;
border-radius: 0.5rem;
border: 1px solid hsl(var(--aw-color-greyscale-50));
background: hsl(var(--aw-color-white));
border: 1px solid hsl(var(--web-color-greyscale-50));
background: hsl(var(--web-color-white));
color: var(--greyscale-700, var(--color-greyscale-700, #56565c));
padding-block: 0.55rem;

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

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

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

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

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

@@ -7,7 +7,7 @@
<details class="collapsible-wrapper" {open}>
<summary class="collapsible-button">
<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" />
</div>
</summary>
@@ -19,7 +19,7 @@
<style>
.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 {

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 />
</ul>

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

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

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

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

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

@@ -46,17 +46,17 @@
}
</script>
<section class="aw-content-footer">
<header class="aw-content-footer-header u-width-full-line">
<section class="web-content-footer">
<header class="web-content-footer-header u-width-full-line">
<div
class="u-flex u-gap-32 u-main-space-between u-cross-center u-width-full-line"
style="flex-wrap: wrap-reverse;"
>
<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">
<button
class="aw-radio-button"
class="web-radio-button"
aria-label="helpful"
on:click={() => {
showFeedback = feedbackType === 'positive' ? false : true;
@@ -66,7 +66,7 @@
<span class="icon-thumb-up" />
</button>
<button
class="aw-radio-button"
class="web-radio-button"
aria-label="unhelpful"
on:click={() => {
showFeedback = feedbackType === 'negative' ? false : true;
@@ -78,8 +78,8 @@
</button>
</div>
</div>
<div class="aw-content-footer-header-end">
<ul class="aw-metadata aw-caption-400">
<div class="web-content-footer-header-end">
<ul class="web-metadata web-caption-400">
{#if date}
<li>Last updated on {new Date(date)?.toLocaleDateString()}</li>
{/if}
@@ -88,7 +88,7 @@
href="https://github.com/appwrite/website"
target="_blank"
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>Update on GitHub</span>
@@ -101,26 +101,26 @@
{#if showFeedback}
<form
on:submit|preventDefault={handleSubmit}
class="aw-card is-normal"
class="web-card is-normal"
style="--card-padding:1rem"
>
<div class="u-flex-vertical u-gap-8">
<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)
</span>
</label>
<textarea
class="aw-input-text"
class="web-input-text"
id="message"
placeholder="Write your message"
bind:value={comment}
/>
<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>
<input
class="aw-input-text"
class="web-input-text"
placeholder="Enter your email"
type="email"
name="email"
@@ -129,21 +129,21 @@
/>
</div>
{#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.
</p>
{/if}
{#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.
</p>
{/if}
<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>
</button>
<button type="submit" class="aw-button" disabled={submitting || !email}>
<button type="submit" class="web-button" disabled={submitting || !email}>
<span>Submit</span>
</button>
</div>

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

@@ -23,7 +23,7 @@
export let images: Array<string>;
</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}
{@const image = clamp(0, images.length - 1, i % images.length)}
<FloatingHead

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

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

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

@@ -2,7 +2,7 @@
export let classes = '';
</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="not-logged-in"><slot name="isNotLoggedIn">Get started</slot></span>
</a>

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

@@ -8,13 +8,13 @@
</script>
{#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">
{#each socials as social}
<li>
<a
href={social.link}
class="aw-icon-button"
class="web-icon-button"
aria-label={social.label}
target="_blank"
rel="noopener noreferrer"
@@ -28,15 +28,15 @@
</footer>
{:else if variant === 'docs'}
<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">
<ul class="aw-main-footer-grid-1-column-1 u-flex u-gap-8">
<div class="web-main-footer-grid-1">
<ul class="web-main-footer-grid-1-column-1 u-flex u-gap-8">
{#each socials as social}
<li>
<a
href={social.link}
class="aw-icon-button"
class="web-icon-button"
aria-label={social.label}
target="_blank"
rel="noopener noreferrer"
@@ -46,10 +46,10 @@
</li>
{/each}
</ul>
<div class="aw-main-footer-grid-1-column-2">
<div class="web-main-footer-grid-1-column-2">
<ThemeSelect />
</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>
<a href="/discord" target="_blank" rel="noopener noreferrer">Support</a>
</li>
@@ -62,7 +62,7 @@
<a href="https://github.com/appwrite/appwrite/releases" target="_blank" rel="noopener noreferrer">Changelog</a>
</li> -->
</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
</div>
</div>
@@ -70,7 +70,7 @@
{/if}
<style lang="scss">
.aw-icon-button {
.web-icon-button {
display: grid;
}
</style>

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

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

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

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

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

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

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

@@ -1,61 +1,61 @@
<script lang="ts">
</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">
<section class="aw-hero u-flex aw-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">
<div class="web-grid-1-1 u-gap-32 web-u-row-gap-80 u-position-relative">
<section class="web-hero u-flex web-u-row-gap-32 u-main-center u-cross-center">
<h2 class="web-display u-max-width-500 web-u-text-align-center web-u-color-text-primary">
Start building today
</h2>
<a
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>
</a>
</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">
<div class="aw-strip-plans-header-wrapper aw-u-row-gap-24">
<h3 class="aw-title aw-u-color-text-primary">Our plans</h3>
<header class="web-strip-plans-header">
<div class="web-strip-plans-header-wrapper web-u-row-gap-24">
<h3 class="web-title web-u-color-text-primary">Our plans</h3>
</div>
</header>
<ul class="aw-strip-plans">
<li class="aw-strip-plans-item aw-strip-plans-container-query">
<div class="aw-strip-plans-item-wrapper">
<div class="aw-strip-plans-plan">
<h4 class="title aw-description">Starter</h4>
<div class="aw-title aw-u-color-text-primary">$0</div>
<div class="info aw-caption-500" />
<ul class="web-strip-plans">
<li class="web-strip-plans-item web-strip-plans-container-query">
<div class="web-strip-plans-item-wrapper">
<div class="web-strip-plans-plan">
<h4 class="title web-description">Starter</h4>
<div class="web-title web-u-color-text-primary">$0</div>
<div class="info web-caption-500" />
</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.
</p>
<a
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>
</a>
</div>
</li>
<li class="aw-strip-plans-item aw-strip-plans-container-query">
<div class="aw-strip-plans-item-wrapper">
<div class="aw-strip-plans-plan">
<h4 class="title aw-description">Pro</h4>
<div class="aw-title aw-u-color-text-primary">$15</div>
<div class="info aw-caption-500">per member/month</div>
<li class="web-strip-plans-item web-strip-plans-container-query">
<div class="web-strip-plans-item-wrapper">
<div class="web-strip-plans-plan">
<h4 class="title web-description">Pro</h4>
<div class="web-title web-u-color-text-primary">$15</div>
<div class="info web-caption-500">per member/month</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.
</p>
<a
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"
rel="noopener noreferrer"
>
@@ -63,18 +63,18 @@
</a>
</div>
</li>
<li class="aw-strip-plans-item aw-strip-plans-container-query">
<div class="aw-strip-plans-item-wrapper">
<div class="aw-strip-plans-plan">
<h4 class="title aw-description">Scale</h4>
<div class="aw-title aw-u-color-text-primary">$685</div>
<div class="info aw-caption-500">per org/month</div>
<li class="web-strip-plans-item web-strip-plans-container-query">
<div class="web-strip-plans-item-wrapper">
<div class="web-strip-plans-plan">
<h4 class="title web-description">Scale</h4>
<div class="web-title web-u-color-text-primary">$685</div>
<div class="info web-caption-500">per org/month</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.
</p>
<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
>
<span class="text">Coming soon</span>
@@ -86,7 +86,7 @@
</div>
<style lang="scss">
.aw-pre-footer-bg {
.web-pre-footer-bg {
position: absolute;
top: 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"
data-visible={open ? true : undefined}
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:-webkit-backdrop-filter="blur(15px)"
bind:this={container}
on:click={handleExit}
>
<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
class="aw-icon-search u-z-index-5"
class="web-icon-search u-z-index-5"
aria-hidden="true"
style="inset-block-start:0.9rem"
/>
<div id="searchbox" />
<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"
id="search"
bind:value
@@ -184,14 +184,14 @@
}}
/>
<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}
style="--card-padding-mobile:1rem; border-radius:0 0 0.5rem 0.5rem;"
>
{#if value}
<section>
{#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">
{#each results as hit, i (hit.uid)}
{@const relevantSubtitle = getRelevantSubtitle(hit)}
@@ -199,25 +199,25 @@
<a
data-hit={i}
href={createHref(hit)}
class="aw-button aw-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"
class="web-button web-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent
web-u-padding-block-8 web-padding-inline-12 web-u-cross-start u-max-width-100-percent"
use:melt={$option({
value: hit,
label: hit.title ?? i.toString()
})}
>
<div class="aw-u-trim-1">
<span class="aw-u-color-text-secondary">{hit.h1}</span>
<div class="web-u-trim-1">
<span class="web-u-color-text-secondary">{hit.h1}</span>
{#if relevantSubtitle}
<span class="aw-u-color-text-secondary"> / </span>
<span class="aw-u-color-text-primary">
<span class="web-u-color-text-secondary"> / </span>
<span class="web-u-color-text-primary">
{relevantSubtitle}
</span>
{/if}
</div>
{#if hit.p}
<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}
</div>
@@ -227,14 +227,14 @@
{/each}
</ul>
{:else}
<p class="aw-caption-400">
<p class="web-caption-400">
No results found for <span class="u-bold">{value}</span>
</p>
{/if}
</section>
{/if}
<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">
{#each recommended as hit, i (hit.uid)}
{@const index = i + (results.length ? results.length : 0)}
@@ -246,13 +246,13 @@
value: hit,
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">
<span class="aw-u-color-text-secondary">{hit.h1}</span>
<div class="web-u-trim-1">
<span class="web-u-color-text-secondary">{hit.h1}</span>
{#if hit.h2}
<span class="aw-u-color-text-secondary"> / </span>
<span class="aw-u-color-text-primary">{hit.h2}</span>
<span class="web-u-color-text-secondary"> / </span>
<span class="web-u-color-text-primary">{hit.h2}</span>
{/if}
</div>
</a>
@@ -276,11 +276,11 @@
pointer-events: auto;
}
a.aw-button {
a.web-button {
scroll-margin-block: 1rem;
}
.aw-card {
.web-card {
margin-block-start: -0.0625rem;
max-block-size: min(18.75rem, calc(100vh - 5.5rem));
border-block-start-width: 0;

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

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

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

@@ -61,11 +61,11 @@
}>;
</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}
<Tooltip>
<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" />
</a>
</li>

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

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

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

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

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

@@ -14,7 +14,7 @@
} = getTocCtx();
</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}
{#each tree as heading, i (i)}
<li>

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

@@ -63,7 +63,7 @@
{/if}
{#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} />
<slot name="tooltip" />
</div>

10
src/lib/constants.ts
View File

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

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

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

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

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

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

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

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

@@ -36,30 +36,30 @@
</script>
<nav
class="aw-side-nav"
class="web-side-nav"
use:clickOutside={(e) => {
const el = e.target;
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;
}}
aria-label="Side"
>
<div class="aw-side-nav-wrapper">
<div class="web-side-nav-wrapper">
<button
class="aw-input-text aw-is-not-desktop"
class="web-input-text web-is-not-desktop"
on:click={() => ($layoutState.showSearch = true)}
>
<span class="aw-icon-search" />
<span class="web-icon-search" />
<span class="text">Search in docs</span>
</button>
<div class="aw-side-nav-scroll">
<div class="web-side-nav-scroll">
{#if parent}
<section class="aw-side-nav-wrapper-parent">
<section class="web-side-nav-wrapper-parent">
<a href={parent.href} aria-label="go back">
<span class="icon-cheveron-left" aria-hidden="true" />
</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>
{/if}
{#each navigation as navGroup}
@@ -75,7 +75,7 @@
{/if}
{:else}
{#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}
</h2>
{/if}
@@ -102,25 +102,25 @@
{#if expandable}
<button
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"
aria-label="toggle nav"
>
<span class="icon-cheveron-right" aria-hidden="true" />
</button>
{/if}
<div class="aw-side-nav-mobile-footer-buttons">
<div class="web-side-nav-mobile-footer-buttons">
<IsLoggedIn />
<a
href="https://github.com/appwrite/appwrite/stargazers"
target="_blank"
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="aw-inline-tag aw-sub-body-400">{GITHUB_STARS}</span>
<span class="web-inline-tag web-sub-body-400">{GITHUB_STARS}</span>
</a>
</div>
</div>

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

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

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

@@ -119,7 +119,7 @@ export const getCodeHtml = (args: Args) => {
return carry;
}, '');
return `<pre><code class="aw-code language-${language} ${
return `<pre><code class="web-code language-${language} ${
withLineNumbers ? 'line-numbers' : ''
}">${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) {
case 'paragraph_open':
token.attrPush(['class', 'aw-paragraph']);
token.attrPush(['class', 'web-paragraph']);
break;
case 'link_open': {
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(['class', 'aw-link']);
token.attrPush(['class', 'web-link']);
break;
}
}

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

@@ -45,9 +45,9 @@
</svelte:head>
<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
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
xmlns="http://www.w3.org/2000/svg"
@@ -102,20 +102,20 @@
</svg>
</div>
<div class="aw-big-padding-section-level-2 u-position-relative">
<div class="aw-container">
<div class="aw-author-section u-block">
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-container">
<div class="web-author-section u-block">
{#if avatar}
<FloatingHead --position="relative" src={avatar} alt={name} size={112} />
{/if}
<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}
<div class="aw-label u-margin-block-start-8">{role}</div>
<div class="web-label u-margin-block-start-8">{role}</div>
{/if}
</div>
{#if bio}
<p class="aw-author-section-info aw-description">
<p class="web-author-section-info web-description">
{bio}
</p>
{/if}
@@ -124,12 +124,12 @@
<li>
<a
href={github}
class="aw-icon-button"
class="web-icon-button"
aria-label="Author GitHub"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-github" aria-hidden="true" />
<span class="web-icon-github" aria-hidden="true" />
</a>
</li>
{/if}
@@ -137,12 +137,12 @@
<li>
<a
href={twitter}
class="aw-icon-button"
class="web-icon-button"
aria-label="Author twitter"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-x" aria-hidden="true" />
<span class="web-icon-x" aria-hidden="true" />
</a>
</li>
{/if}
@@ -150,12 +150,12 @@
<li>
<a
href={linkedin}
class="aw-icon-button"
class="web-icon-button"
aria-label="Author LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-linkedin" aria-hidden="true" />
<span class="web-icon-linkedin" aria-hidden="true" />
</a>
</li>
{/if}
@@ -165,13 +165,13 @@
</div>
</div>
<div class="aw-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<h2 class="aw-title aw-u-color-text-primary">Articles</h2>
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<h2 class="web-title web-u-color-text-primary">Articles</h2>
<!-- <div class="aw-is-only-mobile u-margin-block-start-32">
<label class="u-block aw-select is-colored" for="articles">
<!-- <div class="web-is-only-mobile u-margin-block-start-32">
<label class="u-block web-select is-colored" for="articles">
<select id="articles">
<option>Latest</option>
<option>News</option>
@@ -182,18 +182,18 @@
<span class="icon-cheveron-down" aria-hidden="true" />
</label>
</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">
<ul
class="aw-secondary-tabs is-transparent"
class="web-secondary-tabs is-transparent"
role="tablist"
aria-orientation="horizontal"
data-orientation="horizontal"
data-melt-tabs-list=""
>
<li class="aw-secondary-tabs-item">
<li class="web-secondary-tabs-item">
<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"
role="tab"
data-state="active"
@@ -202,12 +202,12 @@
data-orientation="horizontal"
data-melt-tabs-trigger=""
>
<span class="aw-main-body-500">Latest</span>
<span class="web-main-body-500">Latest</span>
</button>
</li>
<li class="aw-secondary-tabs-item">
<li class="web-secondary-tabs-item">
<button
class="aw-secondary-tabs-button u-width-full-line"
class="web-secondary-tabs-button u-width-full-line"
type="button"
role="tab"
data-state="inactive"
@@ -216,12 +216,12 @@
data-orientation="horizontal"
data-melt-tabs-trigger=""
>
<span class="aw-main-body-500">News</span>
<span class="web-main-body-500">News</span>
</button>
</li>
<li class="aw-secondary-tabs-item">
<li class="web-secondary-tabs-item">
<button
class="aw-secondary-tabs-button u-width-full-line"
class="web-secondary-tabs-button u-width-full-line"
type="button"
role="tab"
data-state="inactive"
@@ -230,12 +230,12 @@
data-orientation="horizontal"
data-melt-tabs-trigger=""
>
<span class="aw-main-body-500">Insights</span>
<span class="web-main-body-500">Insights</span>
</button>
</li>
<li class="aw-secondary-tabs-item">
<li class="web-secondary-tabs-item">
<button
class="aw-secondary-tabs-button u-width-full-line"
class="web-secondary-tabs-button u-width-full-line"
type="button"
role="tab"
data-state="inactive"
@@ -244,12 +244,12 @@
data-orientation="horizontal"
data-melt-tabs-trigger=""
>
<span class="aw-main-body-500">Tutorials</span>
<span class="web-main-body-500">Tutorials</span>
</button>
</li>
<li class="aw-secondary-tabs-item">
<li class="web-secondary-tabs-item">
<button
class="aw-secondary-tabs-button u-width-full-line"
class="web-secondary-tabs-button u-width-full-line"
type="button"
role="tab"
data-state="inactive"
@@ -258,19 +258,19 @@
data-orientation="horizontal"
data-melt-tabs-trigger=""
>
<span class="aw-main-body-500">Changelog</span>
<span class="web-main-body-500">Changelog</span>
</button>
</li>
</ul> -->
<!-- <div class="aw-input-text-search-wrapper">
<!-- <div class="web-input-text-search-wrapper">
<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 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}
<Article
title={post.title}
@@ -287,9 +287,9 @@
</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 />
<MainFooter />
</div>

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

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

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

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

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

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

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

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

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

@@ -2,4 +2,4 @@
export let content: string;
</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}
{/if}
{:else}
<section class="theme-dark aw-code-snippet" aria-label="code-snippet panel">
<header class="aw-code-snippet-header">
<div class="aw-code-snippet-header-start">
<section class="theme-dark web-code-snippet" aria-label="code-snippet panel">
<header class="web-code-snippet-header">
<div class="web-code-snippet-header-start">
{#if badgeValue}
<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>
{/if}
</div>
<div class="aw-code-snippet-header-end">
<div class="web-code-snippet-header-end">
<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>
<button
slot="asChild"
let:trigger
use:melt={trigger}
on:click={handleCopy}
class="aw-icon-button"
class="web-icon-button"
aria-label="copy code from code-snippet"
>
<span class="aw-icon-copy" aria-hidden="true" />
<span class="web-icon-copy" aria-hidden="true" />
</button>
<svelte:fragment slot="tooltip">
{copyText}
@@ -92,7 +92,7 @@
</ul>
</div>
</header>
<div class="aw-code-snippet-content">
<div class="web-code-snippet-content">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html result}
</div>

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

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

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

@@ -22,12 +22,12 @@
{#if inTable}
<img {src} {alt} {title} loading="lazy" style:vertical-align="middle" />
{:else}
<div class="aw-media main">
<img {src} {alt} {title} loading="lazy" class="aw-u-media-ratio-16-9 u-width-full-line" />
<div class="web-media main">
<img {src} {alt} {title} loading="lazy" class="web-u-media-ratio-16-9 u-width-full-line" />
<div class="abs">
<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" />
</button>
<svelte:fragment slot="tooltip">Expand</svelte:fragment>
@@ -40,7 +40,7 @@
<div use:melt={$overlay} class="overlay" transition:fade={{ duration: 150 }} />
<img
class="aw-media content"
class="web-media content"
use:melt={$content}
{src}
{alt}
@@ -53,10 +53,10 @@
{/if}
<style lang="scss">
.aw-button {
.web-button {
padding: 0.6rem !important;
[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 = (() => {
if (inDocs) return '';
if (inChangelog) return 'aw-paragraph-lg';
if (inChangelog) return 'web-paragraph-lg';
if (inPolicy) return '';
return 'aw-paragraph-lg';
return 'web-paragraph-lg';
})();
</script>

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

@@ -13,13 +13,13 @@
const inChangelog = isInChangelog();
$: classes = (() => {
if (inDocs) return 'aw-paragraph-md';
if (inChangelog) return 'aw-paragraph-lg in-changelog';
if (inDocs) return 'web-paragraph-md';
if (inChangelog) return 'web-paragraph-lg in-changelog';
return '';
})();
</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">
.in-changelog:last-child {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -9,19 +9,19 @@
</script>
<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">
{#if icon}
<span
class="{icon} aw-u-font-size-24"
class="{icon} web-u-font-size-24"
aria-hidden="true"
/>
{/if}
<h4 class="aw-sub-body-500 aw-u-color-text-primary">
<h4 class="web-sub-body-500 web-u-color-text-primary">
{title}
</h4>
</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 />
</p>
</a>

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

@@ -4,6 +4,6 @@
const el = title ? 'h3' : 'span';
</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}
</svelte:element>

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

@@ -2,8 +2,8 @@
export let title: string;
</script>
<div class="aw-inline-info">
<div class="web-inline-info">
<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 />
</div>

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

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

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

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

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

@@ -25,7 +25,7 @@
);
</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">
<ul class="tabs-list" {...$list} use:list>
{#each $ctx.triggers.entries() as [id, title]}

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

@@ -15,6 +15,6 @@
});
</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 />
</div>

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

@@ -7,9 +7,9 @@
export let loop: boolean = false;
</script>
<div class="aw-media">
<div class="web-media">
<!-- 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} />
</video>
</div>

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

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

20
src/routes/+error.svelte
View File

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

6
src/routes/+layout.svelte
View File

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

188
src/routes/+page.svelte
View File

@@ -39,7 +39,7 @@
style:width="100vw"
style:height="100vh"
style:overflow="hidden"
class:aw-u-hide-mobile={$isMobileNavOpen}
class:web-u-hide-mobile={$isMobileNavOpen}
>
<div
class="u-position-absolute"
@@ -55,53 +55,53 @@
</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;"
class:aw-u-hide-mobile={$isMobileNavOpen}
class:web-u-hide-mobile={$isMobileNavOpen}
>
<img src="/images/bgs/hero-lines-1.png" alt="" />
</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;"
class:aw-u-hide-mobile={$isMobileNavOpen}
class:web-u-hide-mobile={$isMobileNavOpen}
>
<img src="/images/bgs/hero-lines-2.png" alt="" />
</div>
<Main>
<div class="aw-big-padding-section">
<div class="aw-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2">
<section class="aw-container aw-u-padding-block-end-0">
<div class="web-big-padding-section">
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<section class="web-container web-u-padding-block-end-0">
<a
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="aw-caption-500">New</span>
<div class="aw-hero-banner-button-sep" />
<span class="aw-caption-400">Announcing Init</span>
<span class="aw-icon-arrow-right" aria-hidden="true" />
<span class="web-icon-star" aria-hidden="true" />
<span class="web-caption-500">New</span>
<div class="web-hero-banner-button-sep" />
<span class="web-caption-400">Announcing Init</span>
<span class="web-icon-arrow-right" aria-hidden="true" />
</a>
<div class="aw-hero is-horizontal">
<h1 class="aw-headline">
<span class="aw-gradient-text">
Build like a team of hundreds<span class="aw-u-color-text-accent"
<div class="web-hero is-horizontal">
<h1 class="web-headline">
<span class="web-gradient-text">
Build like a team of hundreds<span class="web-u-color-text-accent"
>_</span
>
</span>
</h1>
<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
and Storage to your product and build any application at any scale,
own your data, and use your preferred coding languages and tools.
</p>
<a
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>
</a>
@@ -109,12 +109,12 @@
</div>
</section>
</div>
<div class="aw-big-padding-section-level-2">
<div class="web-big-padding-section-level-2">
<section
class="aw-container aw-u-padding-block-0"
class="web-container web-u-padding-block-0"
style="--container-size:78.75rem"
>
<div class="aw-media-container">
<div class="web-media-container">
<img
class="u-block"
src="/images/pages/homepage/dashboard.png"
@@ -124,14 +124,14 @@
</div>
</section>
</div>
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<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
</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>
<img
src="/images/logos/trusted-by/apple.svg"
@@ -237,7 +237,7 @@
<ProductsMobile />
<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
class="u-position-absolute u-inset-block-end-0 u-inset-inline-start u-width-full-line"
@@ -250,108 +250,108 @@
/>
</div>
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<section class="aw-hero is-align-start">
<span class="aw-badges aw-eyebrow">PRIVACY & SECURITY_</span>
<h2 class="aw-display aw-u-color-text-primary u-max-width-700">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<section class="web-hero is-align-start">
<span class="web-badges web-eyebrow">PRIVACY & SECURITY_</span>
<h2 class="web-display web-u-color-text-primary u-max-width-700">
Self-host your data or take it to the Cloud
</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
Migrations. With built-in security and privacy for peace of mind.
</p>
</section>
<div class="u-overflow-hidden aw-u-margin-block-start-80">
<ul class="aw-info-boxes aw-sub-body-500">
<li class="aw-info-boxes-item">
<div class="u-overflow-hidden web-u-margin-block-start-80">
<ul class="web-info-boxes web-sub-body-500">
<li class="web-info-boxes-item">
<img
src="/images/icons/gradients/self-hosted.svg"
width="40"
height="40"
alt=""
/>
<h3 class="aw-info-boxes-title">Self-Hosted</h3>
<p class="aw-info-boxes-content">
<h3 class="web-info-boxes-title">Self-Hosted</h3>
<p class="web-info-boxes-content">
Own your data or host it on a cloud region of choice.
</p>
</li>
<li class="aw-info-boxes-item">
<li class="web-info-boxes-item">
<img
src="/images/icons/gradients/lock.svg"
width="40"
height="40"
alt=""
/>
<h3 class="aw-info-boxes-title">Encryption</h3>
<p class="aw-info-boxes-content">
<h3 class="web-info-boxes-title">Encryption</h3>
<p class="web-info-boxes-content">
Built-in data encryption both in rest and in transit.
</p>
</li>
<li class="aw-info-boxes-item">
<li class="web-info-boxes-item">
<img
src="/images/icons/gradients/shield.svg"
width="40"
height="40"
alt=""
/>
<h3 class="aw-info-boxes-title">Abuse protection</h3>
<p class="aw-info-boxes-content">
<h3 class="web-info-boxes-title">Abuse protection</h3>
<p class="web-info-boxes-content">
Protect your APIs from abuse with built-in protection.
</p>
</li>
<li class="aw-info-boxes-item">
<li class="web-info-boxes-item">
<img
src="/images/icons/gradients/database.svg"
width="40"
height="40"
alt=""
/>
<h3 class="aw-info-boxes-title">Data migrations</h3>
<p class="aw-info-boxes-content">
<h3 class="web-info-boxes-title">Data migrations</h3>
<p class="web-info-boxes-content">
Easily transfer data from 3rd parties or between Cloud and
self-hosted.
</p>
</li>
<li class="aw-info-boxes-item">
<li class="web-info-boxes-item">
<img
src="/images/icons/gradients/star.svg"
width="40"
height="40"
alt=""
/>
<h3 class="aw-info-boxes-title">GDPR</h3>
<p class="aw-info-boxes-content">
<h3 class="web-info-boxes-title">GDPR</h3>
<p class="web-info-boxes-content">
Safeguard user data and privacy with provided GDPR regulations.
</p>
</li>
<li class="aw-info-boxes-item">
<li class="web-info-boxes-item">
<img
src="/images/icons/gradients/soc-2.svg"
width="40"
height="40"
alt=""
/>
<h3 class="aw-info-boxes-title">
<h3 class="web-info-boxes-title">
<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>
<p class="aw-info-boxes-content">
<p class="web-info-boxes-content">
Ensure the highest level of security and privacy protection.
</p>
</li>
<li class="aw-info-boxes-item">
<li class="web-info-boxes-item">
<img
src="/images/icons/gradients/hipaa.svg"
width="40"
height="40"
alt=""
/>
<h3 class="aw-info-boxes-title">
<h3 class="web-info-boxes-title">
<span>HIPAA</span>
<span class="aw-inline-tag is-pink">Coming Soon</span>
<span class="web-inline-tag is-pink">Coming Soon</span>
</h3>
<p class="aw-info-boxes-content">
<p class="web-info-boxes-content">
Protect sensitive user health data.
</p>
</li>
@@ -360,14 +360,14 @@
</div>
</div>
<OpenSource />
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<div class="aw-hero">
<div class="aw-display aw-u-color-text-primary">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-hero">
<div class="web-display web-u-color-text-primary">
Loved by developers like you
</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>
<DeveloperCard
name="Terry Lennon"
@@ -407,7 +407,7 @@
href="https://twitter.com/appwrite"
target="_blank"
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.
</DeveloperCard>
</li>
@@ -447,7 +447,7 @@
href="https://twitter.com/appwrite"
target="_blank"
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
perfect choice for developers who want to build secure and scalable
applications.
@@ -458,9 +458,9 @@
</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
class="u-position-absolute aw-is-not-mobile"
class="u-position-absolute web-is-not-mobile"
style:inline-size="768px"
style:block-size="768px"
style:inset-block-start="0rem"
@@ -475,31 +475,31 @@
style="position: absolute; display: block;"
/>
</div>
<div class="aw-big-padding-section-level-2 is-margin-replace-padding">
<div class="aw-container u-position-relative">
<section class="aw-hero is-align-start">
<span class="aw-badges aw-eyebrow">SDKs_</span>
<h2 class="aw-display aw-u-color-text-primary u-max-width-600">
<div class="web-big-padding-section-level-2 is-margin-replace-padding">
<div class="web-container u-position-relative">
<section class="web-hero is-align-start">
<span class="web-badges web-eyebrow">SDKs_</span>
<h2 class="web-display web-u-color-text-primary u-max-width-600">
Code the way you want
</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
you can code with the language you want at any time.
</p>
<Technologies />
<a
href="/docs/sdks"
class="aw-button is-secondary"
class="web-button is-secondary"
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>
</section>
</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="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:height="100%"
style:left="0"
@@ -508,31 +508,31 @@
<img src="/images/bgs/diagonal-lines.png" alt="" width="512" />
</div>
</div>
<div class="aw-container u-position-relative">
<div class="web-container u-position-relative">
<div class="grid-1-1">
<section class="aw-hero is-align-start">
<span class="aw-badges aw-eyebrow">Scale_</span>
<h2 class="aw-display u-max-width-600 aw-u-color-text-primary">
<section class="web-hero is-align-start">
<span class="web-badges web-eyebrow">Scale_</span>
<h2 class="web-display u-max-width-600 web-u-color-text-primary">
We scale for you
</h2>
</section>
<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">
<div class="aw-headline aw-u-color-text-primary">90K</div>
<li class="web-big-list-info-item">
<div class="web-headline web-u-color-text-primary">90K</div>
<div class="text">Projects</div>
</li>
<li class="aw-big-list-info-item">
<div class="aw-headline aw-u-color-text-primary">+1B</div>
<li class="web-big-list-info-item">
<div class="web-headline web-u-color-text-primary">+1B</div>
<div class="text">Requests served</div>
</li>
<li class="aw-big-list-info-item">
<div class="aw-headline aw-u-color-text-primary">20K</div>
<li class="web-big-list-info-item">
<div class="web-headline web-u-color-text-primary">20K</div>
<div class="text">Organizations</div>
</li>
<li class="aw-big-list-info-item">
<div class="aw-headline aw-u-color-text-primary">99.99%</div>
<li class="web-big-list-info-item">
<div class="web-headline web-u-color-text-primary">99.99%</div>
<div class="text">Guaranteed uptime</div>
</li>
</ul>
@@ -540,9 +540,9 @@
</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 />
<FooterNav />
<MainFooter />

16
src/routes/DeveloperCard.svelte
View File

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

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

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

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

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

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

@@ -31,8 +31,8 @@
</svelte:head>
<Main>
<div class="aw-big-padding-section" style:overflow-x="hidden">
<div class="aw-big-padding-section-level-1 u-position-relative">
<div class="web-big-padding-section" style:overflow-x="hidden">
<div class="web-big-padding-section-level-1 u-position-relative">
<div
class="u-position-absolute"
style="pointer-events:none;inset-inline-start:0; inset-block-end:0;"
@@ -90,44 +90,44 @@
</svg>
</div>
<div class="aw-big-padding-section-level-2 u-position-relative">
<div class="aw-container">
<h1 class="aw-display aw-u-color-text-primary">Blog</h1>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-container">
<h1 class="web-display web-u-color-text-primary">Blog</h1>
{#if featured}
{@const author = data.authors.find((author) => author.slug === featured.author)}
<article class="aw-feature-article u-margin-block-start-48">
<a href={featured.href} class="aw-feature-article-image">
<img src={featured.cover} class="aw-image-ratio-4/3" alt="cover" />
<article class="web-feature-article u-margin-block-start-48">
<a href={featured.href} class="web-feature-article-image">
<img src={featured.cover} class="web-image-ratio-4/3" alt="cover" />
</a>
<div class="aw-feature-article-content">
<header class="aw-feature-article-header">
<ul class="aw-metadata aw-caption-400 aw-is-only-mobile">
<div class="web-feature-article-content">
<header class="web-feature-article-header">
<ul class="web-metadata web-caption-400 web-is-only-mobile">
<li>{featured.timeToRead} min</li>
</ul>
<a href={featured.href}>
<h2 class="aw-title aw-u-color-text-primary">
<h2 class="web-title web-u-color-text-primary">
{featured.title}
</h2>
</a>
</header>
<p class="aw-sub-body-400">
<p class="web-sub-body-400">
{featured.description}
</p>
<div class="aw-author">
<div class="web-author">
<div class="u-flex u-cross-center u-gap-8">
<img
class="aw-author-image"
class="web-author-image"
src={author?.avatar}
width="24"
height="24"
alt=""
/>
<div class="aw-author-info">
<a href={author?.href} class="aw-sub-body-400 aw-link"
<div class="web-author-info">
<a href={author?.href} class="web-sub-body-400 web-link"
>{author?.name}</a
>
<p class="aw-caption-400 u-hide">{author?.bio}</p>
<ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
<p class="web-caption-400 u-hide">{author?.bio}</p>
<ul class="web-metadata web-caption-400 web-is-not-mobile">
<li>{featured.timeToRead} min</li>
</ul>
</div>
@@ -136,30 +136,30 @@
<li>
<a
href="https://twitter.com/appwrite"
class="aw-icon-button"
class="web-icon-button"
aria-label="Author twitter"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-x" aria-hidden="true" />
<span class="web-icon-x" aria-hidden="true" />
</a>
</li>
<li>
<a
href="https://twitter.com/appwrite"
class="aw-icon-button"
class="web-icon-button"
aria-label="Author LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-linkedin" aria-hidden="true" />
<span class="web-icon-linkedin" aria-hidden="true" />
</a>
</li>
</ul>
</div>
<a
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>
</a>
@@ -169,13 +169,13 @@
</div>
</div>
</div>
<div class="aw-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<h2 class="aw-title aw-u-color-text-primary">Articles</h2>
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<h2 class="web-title web-u-color-text-primary">Articles</h2>
<div class="u-margin-block-start-48">
<ul class="aw-grid-articles">
<ul class="web-grid-articles">
{#each data.posts as post}
{@const author = data.authors.find(
(author) => author.slug === post.author
@@ -196,8 +196,8 @@
</div>
</div>
</div>
<div class="aw-big-padding-section-level-2">
<div class="aw-container">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<FooterNav />
<MainFooter />
</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" %}
Use APNs for push notification to Apple devices.
{% /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.
{% /cards_item %}
{% /cards %}
## Email
{% 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
{% /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
{% /cards_item %}
{% 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" %}
Use Telesign for SMS notifications to mobile devices.
{% /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.
{% /cards_item %}
{% 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,
undefined,
{
"on:aw-scroll": (e: CustomEvent<ScrollInfo>) => void;
"on:aw-resize": (e: CustomEvent<ScrollInfo>) => void;
"on:web-scroll": (e: CustomEvent<ScrollInfo>) => void;
"on:web-resize": (e: CustomEvent<ScrollInfo>) => void;
}
> = (node) => {
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 () => {
node.dispatchEvent(
new CustomEvent<ScrollInfo>(eventName, {
@@ -97,8 +97,8 @@ export const scroll: Action<
};
};
const handleScroll = createHandler("aw-scroll");
const handleResize = createHandler("aw-resize");
const handleScroll = createHandler("web-scroll");
const handleResize = createHandler("web-resize");
handleScroll();
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:
```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>
```
@@ -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)}
<button class="oauth" transition:fade={{ duration: 100 }} animate:flip={{ duration: 250 }}>
<div class="inner">
<span class="aw-icon-{provider.toLowerCase()}" />
<span class="web-icon-{provider.toLowerCase()}" />
<span>{provider}</span>
</div>
</button>

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

@@ -2,7 +2,7 @@
import { Main } from '$lib/layouts';
</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
class="u-width-full-line"
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%);"
>
<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
src="/images/pages/brand-lunch/left-side-top-brand.png"
@@ -50,7 +50,7 @@
/>
</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
src="/images/pages/brand-lunch/right-side-top-brand.png"
@@ -61,7 +61,7 @@
</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
xmlns="http://www.w3.org/2000/svg"
width="1728"
@@ -95,40 +95,40 @@
</div>
<Main>
<div class="aw-big-padding-section">
<div class="aw-big-padding-section-level-1">
<div class="aw-container u-position-relative">
<div class="web-big-padding-section">
<div class="web-big-padding-section-level-1">
<div class="web-container u-position-relative">
<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)"
>
<div class="aw-hero aw-u-gap-20">
<h1 class="aw-headline aw-u-color-text-primary">Brand new Appwrite</h1>
<p class="aw-description aw-u-color-text-primary aw-u-opacity-64">
<div class="web-hero web-u-gap-20">
<h1 class="web-headline web-u-color-text-primary">Brand new Appwrite</h1>
<p class="web-description web-u-color-text-primary web-u-opacity-64">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
diam augue. Praesent sagittis eget ipsum vitae eleifend.
</p>
</div>
</div>
<div class="aw-big-padding-section-level-2 aw-u-sep-block-start">
<div class="u-stretch u-flex aw-u-flex-vertical-mobile">
<div class="web-big-padding-section-level-2 web-u-sep-block-start">
<div class="u-stretch u-flex web-u-flex-vertical-mobile">
<div
class="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
</h2>
<p class="aw-main-body-500">
<p class="web-main-body-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
diam augue. Praesent sagittis eget ipsum vitae eleifend.
</p>
</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
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"
alt=""
/>
@@ -136,11 +136,11 @@
</div>
</div>
<div class="aw-big-padding-section-level-2 aw-u-sep-block-start">
<div class="aw-grid-1-1-opt-2">
<div class="aw-hero is-align-start aw-u-padding-block-start-40">
<h2 class="aw-title aw-u-color-text-primary">Eliminating complexity</h2>
<p class="aw-main-body-500">
<div class="web-big-padding-section-level-2 web-u-sep-block-start">
<div class="web-grid-1-1-opt-2">
<div class="web-hero is-align-start web-u-padding-block-start-40">
<h2 class="web-title web-u-color-text-primary">Eliminating complexity</h2>
<p class="web-main-body-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
diam augue.
</p>
@@ -153,13 +153,13 @@
</div>
</div>
<div
class="aw-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"
class="web-hero is-align-start
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
</h2>
<p class="aw-main-body-500">
<p class="web-main-body-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
diam augue. Praesent sagittis eget ipsum vitae eleifend.
</p>
@@ -176,11 +176,11 @@
</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">
<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"
width="698"
height="900"
@@ -321,7 +321,7 @@
</div>
<div class="u-position-absolute u-inset-inline-end-0">
<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"
width="874"
height="900"
@@ -456,11 +456,11 @@
</defs>
</svg>
</div>
<div class="aw-big-padding-section-level-2 u-position-relative">
<div class="aw-container">
<div class="aw-hero">
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-container">
<div class="web-hero">
<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
</p>
@@ -469,11 +469,11 @@
</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">
<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"
width="698"
height="900"
@@ -614,7 +614,7 @@
</div>
<div class="u-position-absolute u-inset-inline-end-0">
<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"
width="874"
height="900"
@@ -749,8 +749,8 @@
</defs>
</svg>
</div>
<div class="aw-big-padding-section-level-2 u-position-relative">
<div class="aw-container">
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-container">
<div class="u-flex u-main-center u-cross-center">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -812,7 +812,7 @@
</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"
>
<div class="u-position-absolute u-inset-inline-end-0">
@@ -1083,10 +1083,10 @@
</defs>
</svg>
</div>
<div class="aw-big-padding-section-level-2 u-position-relative">
<div class="aw-container">
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-container">
<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
xmlns="http://www.w3.org/2000/svg"
@@ -1143,7 +1143,7 @@
fill="#FD366E"
/>
</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">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -1159,7 +1159,7 @@
fill="#C3C3C6"
/>
</svg>
<div class="aw-caption-400">Our global community</div>
<div class="web-caption-400">Our global community</div>
</div>
<div>+</div>
<div class="u-flex-vertical u-cross-center u-gap-12">
@@ -1192,32 +1192,32 @@
fill="#C3C3C6"
/>
</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 class="aw-big-padding-section-level-2">
<div class="aw-container">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<img
src="/images/brand/new-brand-grid-mobile.png"
alt="brand visual stuff"
class="aw-is-only-mobile"
class="web-is-only-mobile"
width="100%"
/>
<img
src="/images/brand/new-brand-grid-desktop.png"
alt="brand visual stuff"
class="aw-is-not-mobile"
class="web-is-not-mobile"
width="100%"
/>
</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">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -1576,27 +1576,27 @@
</defs>
</svg>
</div>
<div class="aw-big-padding-section-level-2 u-position-relative">
<div class="aw-container">
<div class="aw-grid-1-1-opt-2 u-gap-32 u-main-space-between">
<div class="aw-hero is-align-start aw-u-max-width-480">
<h4 class="aw-title aw-u-color-text-primary">
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-container">
<div class="web-grid-1-1-opt-2 u-gap-32 u-main-space-between">
<div class="web-hero is-align-start web-u-max-width-480">
<h4 class="web-title web-u-color-text-primary">
Be a part of #Teamof100
</h4>
<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
for a chance to win brand-new Appwrite swag.
</p>
<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>
</button>
</div>
<div class="aw-media-container u-flex-basis-250 u-stretch">
<div class="web-media-container u-flex-basis-250 u-stretch">
<img
src="/images/brand/t-shirts.png"
alt="brand visual stuff"

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

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

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