mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-09 12:57:48 +00:00
componentize pages
This commit is contained in:
tglide
124
src/lib/layouts/Docs.svelte
Normal file
124
src/lib/layouts/Docs.svelte
Normal file
@@ -0,0 +1,124 @@
|
||||
<script lang="ts">
|
||||
export let expanded = false;
|
||||
|
||||
const handleMenuClick = () => {
|
||||
const gridHugeNavs = document.querySelector('.aw-grid-huge-navs');
|
||||
const gridSideNavs = document.querySelector('.aw-grid-side-nav');
|
||||
const referencesMenu = document.querySelector('.aw-references-menu');
|
||||
|
||||
gridHugeNavs?.classList.toggle('is-open');
|
||||
gridSideNavs?.classList.toggle('is-open');
|
||||
referencesMenu?.classList.remove('is-open');
|
||||
};
|
||||
</script>
|
||||
|
||||
<div id="app" class="u-position-relative">
|
||||
<div
|
||||
class={expanded ? 'aw-grid-huge-navs' : 'aw-grid-side-nav aw-container'}
|
||||
style:--container-size={expanded ? undefined : 'var(--container-size-large)'}
|
||||
>
|
||||
<section class="aw-mobile-header is-transparent">
|
||||
<div class="aw-mobile-header-start">
|
||||
<a href="">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="aw-mobile-header-end">
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
<button on:click={handleMenuClick} class="aw-button is-text" aria-label="open navigation">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M3 5.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
<path d="M3 14.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<header class="aw-main-header is-transparent" class:is-transparent={!expanded}>
|
||||
<div class="aw-main-header-wrapper">
|
||||
<div class="aw-main-header-row">
|
||||
<div class="aw-main-header-start u-stretch">
|
||||
<a href="/">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
<nav class="aw-main-header-nav">
|
||||
<ul class="aw-main-header-nav-list">
|
||||
<li class="aw-main-header-nav-item">
|
||||
<a class="aw-main-header-nav-link is-selected" href="/docs">Docs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="u-flex u-stretch aw-u-margin-inline-start-48">
|
||||
<button class="aw-input-text aw-u-flex-basis-400">
|
||||
<span class="icon-search" />
|
||||
<span class="text">Search in docs</span>
|
||||
|
||||
<div class="u-flex u-gap-4 u-margin-inline-start-auto">
|
||||
<span class="aw-kbd" aria-label="command">⌘</span>
|
||||
<span class="aw-kbd">k</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-main-header-end">
|
||||
<div class="u-flex u-gap-8">
|
||||
<button class="aw-button is-text">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="16"
|
||||
viewBox="0 0 18 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
|
||||
stroke="white"
|
||||
stroke-opacity="0.48"
|
||||
stroke-width="1.20208"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text">Star on GitHub</span>
|
||||
<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,7 +34,7 @@
|
||||
<nav class="aw-main-header-nav">
|
||||
<ul class="aw-main-header-nav-list">
|
||||
<li class="aw-main-header-nav-item"><a href="">Community</a></li>
|
||||
<li class="aw-main-header-nav-item"><a href="">Docs</a></li>
|
||||
<li class="aw-main-header-nav-item"><a href="/docs">Docs</a></li>
|
||||
<li class="aw-main-header-nav-item"><a href="">Blog</a></li>
|
||||
<li class="aw-main-header-nav-item"><a href="">Pricing</a></li>
|
||||
</ul>
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export { default as Homepage } from './Homepage.svelte';
|
||||
export { default as Docs } from './Docs.svelte';
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { portal } from '$lib/actions/portal';
|
||||
import Homepage from '$lib/layouts/Homepage.svelte';
|
||||
import { Homepage } from '$lib/layouts';
|
||||
</script>
|
||||
|
||||
<div class="u-position-absolute" style="margin-block-start:-36%;pointer-events:none;">
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<slot />
|
||||
@@ -1,3 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { Docs } from '$lib/layouts';
|
||||
import Sidebar from './Sidebar.svelte';
|
||||
</script>
|
||||
|
||||
<div class="u-position-absolute" style="margin-block-start:-36%; margin-inline-start:0;">
|
||||
<svg
|
||||
style="width:1466.685px; height:804.009px; transform:rotate(150.348deg); fill: var(--appwrite-pink, #FD366E); opacity: 0.6499999761581421; filter: blur(127.51104736328125px);"
|
||||
@@ -30,242 +35,16 @@
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="u-position-absolute aw-is-not-mobile"
|
||||
style="inline-size:647px; inset-block-start:24rem; inset-inline-start:calc(100% - 400px)"
|
||||
>
|
||||
<img src="/images/temp/bg-side.png" width="647" alt="" />
|
||||
</div>
|
||||
<div id="app" class="u-position-relative">
|
||||
<div class="aw-grid-side-nav aw-container" style="--container-size:var(--container-size-large);">
|
||||
<section class="aw-mobile-header is-transparent">
|
||||
<div class="aw-mobile-header-start">
|
||||
<a href="">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="aw-mobile-header-end">
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
<button id="MenuButton" class="aw-button is-text" aria-label="open navigation">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M3 5.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
<path d="M3 14.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<header class="aw-main-header is-transparent">
|
||||
<div class="aw-main-header-wrapper">
|
||||
<div class="aw-main-header-row">
|
||||
<div class="aw-main-header-start u-stretch">
|
||||
<a href="/">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
<nav class="aw-main-header-nav">
|
||||
<ul class="aw-main-header-nav-list">
|
||||
<li class="aw-main-header-nav-item">
|
||||
<a class="aw-main-header-nav-link is-selected" href="docs-homepage.html">Docs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="u-flex u-stretch aw-u-margin-inline-start-48">
|
||||
<button class="aw-input-text aw-u-flex-basis-400">
|
||||
<span class="icon-search" />
|
||||
<span class="text">Search in docs</span>
|
||||
|
||||
<div class="u-flex u-gap-4 u-margin-inline-start-auto">
|
||||
<span class="aw-kbd" aria-label="command">⌘</span>
|
||||
<span class="aw-kbd">k</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-main-header-end">
|
||||
<div class="u-flex u-gap-8">
|
||||
<button class="aw-button is-text">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="16"
|
||||
viewBox="0 0 18 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
|
||||
stroke="white"
|
||||
stroke-opacity="0.48"
|
||||
stroke-width="1.20208"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text">Star on GitHub</span>
|
||||
<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav class="aw-side-nav is-transparent">
|
||||
<div class="aw-side-nav-wrapper">
|
||||
<button class="aw-input-text aw-is-not-desktop">
|
||||
<span class="icon-search" />
|
||||
<span class="text">Search in docs</span>
|
||||
</button>
|
||||
<div class="aw-side-nav-scroll">
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Quick Start</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-book-open" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Tutorials</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-cog" aria-hidden="true" />
|
||||
<span class="aw-caption-400">SDKs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-terminal" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Command Line</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-document" aria-hidden="true" />
|
||||
<span class="aw-caption-400">References</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Products</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-user-group" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Auth</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-database" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Databases</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-lightning-bolt" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Functions</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-folder" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Storage</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">APIS</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-clock" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Realtime</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">REST</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">GraphQL</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Advanced</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-puzzle" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Integration</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Platform</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-refresh" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Migrations</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<Docs>
|
||||
<Sidebar />
|
||||
<main class="aw-main-section">
|
||||
<section class="aw-hero is-align-start">
|
||||
<h1 class="aw-display u-max-width-600">Run on any provider or through Appwrite Cloud</h1>
|
||||
@@ -768,15 +547,4 @@
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <script type="module" src="/src/main.ts"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#MenuButton, #ToggleMenu").on("click", function(){
|
||||
$(".aw-grid-side-nav").toggleClass("is-open");
|
||||
});
|
||||
});
|
||||
</script> -->
|
||||
</Docs>
|
||||
|
||||
147
src/routes/docs/Sidebar.svelte
Normal file
147
src/routes/docs/Sidebar.svelte
Normal file
@@ -0,0 +1,147 @@
|
||||
<script lang="ts">
|
||||
export let expandable = false;
|
||||
|
||||
const handleMenuClick = () => {
|
||||
const gridHugeNavs = document.querySelector('.aw-grid-huge-navs');
|
||||
const referencesMenu = document.querySelector('.aw-references-menu');
|
||||
|
||||
gridHugeNavs?.classList.toggle('is-open');
|
||||
referencesMenu?.classList.remove('is-open');
|
||||
};
|
||||
</script>
|
||||
|
||||
<nav class="aw-side-nav" class:is-transparent={!expandable}>
|
||||
<div class="aw-side-nav-wrapper">
|
||||
<button class="aw-input-text aw-is-not-desktop">
|
||||
<span class="icon-search" />
|
||||
<span class="text">Search in docs</span>
|
||||
</button>
|
||||
<div class="aw-side-nav-scroll">
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="/docs/quick-start">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Quick Start</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="/docs/tutorials">
|
||||
<span class="icon-book-open" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Tutorials</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-cog" aria-hidden="true" />
|
||||
<span class="aw-caption-400">SDKs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-terminal" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Command Line</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="/docs/reference">
|
||||
<span class="icon-document" aria-hidden="true" />
|
||||
<span class="aw-caption-400">References</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Products</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-user-group" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Auth</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-database" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Databases</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-lightning-bolt" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Functions</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-folder" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Storage</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">APIS</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-clock" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Realtime</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">REST</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">GraphQL</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Advanced</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-puzzle" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Integration</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Platform</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-refresh" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Migrations</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
{#if expandable}
|
||||
<button
|
||||
on:click={handleMenuClick}
|
||||
class="aw-icon-button u-margin-inline-start-auto"
|
||||
aria-label="toggle nav"
|
||||
>
|
||||
<span class="icon-cheveron-right" aria-hidden="true" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1 +1,9 @@
|
||||
<div>DOCS Quick Start</div>
|
||||
<script lang="ts">
|
||||
import { Docs } from '$lib/layouts';
|
||||
import Sidebar from '../Sidebar.svelte';
|
||||
</script>
|
||||
|
||||
<Docs>
|
||||
<Sidebar />
|
||||
<div>DOCS Quick Start</div>
|
||||
</Docs>
|
||||
|
||||
@@ -1,237 +1,10 @@
|
||||
<div id="app">
|
||||
<div class="aw-grid-huge-navs">
|
||||
<section class="aw-mobile-header">
|
||||
<div class="aw-mobile-header-start">
|
||||
<a href="">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="aw-mobile-header-end">
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
<button id="MenuButton" class="aw-button is-text" aria-label="open navigation">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M3 5.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
<path d="M3 14.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<header class="aw-main-header">
|
||||
<div class="aw-main-header-wrapper">
|
||||
<div class="aw-main-header-row">
|
||||
<div class="aw-main-header-start u-stretch">
|
||||
<a href="/">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
<nav class="aw-main-header-nav">
|
||||
<ul class="aw-main-header-nav-list">
|
||||
<li class="aw-main-header-nav-item">
|
||||
<a class="aw-main-header-nav-link is-selected" href="docs-homepage.html">Docs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="u-flex u-stretch aw-u-margin-inline-start-48">
|
||||
<button class="aw-input-text aw-u-flex-basis-400">
|
||||
<span class="icon-search" />
|
||||
<span class="text">Search in docs</span>
|
||||
<script>
|
||||
import { Docs } from '$lib/layouts';
|
||||
import Sidebar from '../Sidebar.svelte';
|
||||
</script>
|
||||
|
||||
<div class="u-flex u-gap-4 u-margin-inline-start-auto">
|
||||
<span class="aw-kbd" aria-label="command">⌘</span>
|
||||
<span class="aw-kbd">k</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-main-header-end">
|
||||
<div class="u-flex u-gap-8">
|
||||
<button class="aw-button is-text">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="16"
|
||||
viewBox="0 0 18 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
|
||||
stroke="white"
|
||||
stroke-opacity="0.48"
|
||||
stroke-width="1.20208"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text">Star on GitHub</span>
|
||||
<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav class="aw-side-nav">
|
||||
<div class="aw-side-nav-wrapper">
|
||||
<div class="aw-side-nav-scroll">
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Quick Start</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-book-open" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Tutorials</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-cog" aria-hidden="true" />
|
||||
<span class="aw-caption-400">SDKs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-terminal" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Command Line</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-document" aria-hidden="true" />
|
||||
<span class="aw-caption-400">References</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Products</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-user-group" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Auth</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-database" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Databases</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-lightning-bolt" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Functions</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-folder" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Storage</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">APIS</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-clock" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Realtime</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">REST</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">GraphQL</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Advanced</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-puzzle" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Integration</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Platform</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-refresh" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Migrations</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="ToggleMenu"
|
||||
class="aw-icon-button u-margin-inline-start-auto"
|
||||
aria-label="toggle nav"
|
||||
>
|
||||
<span class="icon-cheveron-right" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<Docs expanded>
|
||||
<Sidebar expandable />
|
||||
<main class="u-contents">
|
||||
<article class="aw-article u-contents">
|
||||
<header class="aw-article-header">
|
||||
@@ -266,19 +39,18 @@
|
||||
<section class="aw-article-content-grid-6-4">
|
||||
<div class="aw-article-content-grid-6-4-column-1 u-flex-vertical u-gap-32">
|
||||
<p class="aw-paragraph-md">
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel
|
||||
posuere arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna
|
||||
pulvinar nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui
|
||||
feugiat. Neque nunc elit cursus dignissim ornare sem lectus.
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel posuere
|
||||
arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna pulvinar
|
||||
nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui feugiat. Neque
|
||||
nunc elit cursus dignissim ornare sem lectus.
|
||||
</p>
|
||||
<p class="aw-paragraph-md">
|
||||
In viverra at ultrices sit. Vitae pulvinar tincidunt sed et eleifend nunc dictumst.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat.
|
||||
Turpis amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis
|
||||
semper aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis
|
||||
sem. Purus tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut
|
||||
arcu malesuada lectus sed. Non viverra volutpat sit turpis lorem urna at eget
|
||||
hendrerit.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat. Turpis
|
||||
amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis semper
|
||||
aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis sem. Purus
|
||||
tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut arcu malesuada
|
||||
lectus sed. Non viverra volutpat sit turpis lorem urna at eget hendrerit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="aw-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32">
|
||||
@@ -322,19 +94,18 @@
|
||||
<section class="aw-article-content-grid-6-4">
|
||||
<div class="aw-article-content-grid-6-4-column-1 u-flex-vertical u-gap-32">
|
||||
<p class="aw-paragraph-md">
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel
|
||||
posuere arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna
|
||||
pulvinar nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui
|
||||
feugiat. Neque nunc elit cursus dignissim ornare sem lectus.
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel posuere
|
||||
arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna pulvinar
|
||||
nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui feugiat. Neque
|
||||
nunc elit cursus dignissim ornare sem lectus.
|
||||
</p>
|
||||
<p class="aw-paragraph-md">
|
||||
In viverra at ultrices sit. Vitae pulvinar tincidunt sed et eleifend nunc dictumst.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat.
|
||||
Turpis amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis
|
||||
semper aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis
|
||||
sem. Purus tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut
|
||||
arcu malesuada lectus sed. Non viverra volutpat sit turpis lorem urna at eget
|
||||
hendrerit.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat. Turpis
|
||||
amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis semper
|
||||
aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis sem. Purus
|
||||
tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut arcu malesuada
|
||||
lectus sed. Non viverra volutpat sit turpis lorem urna at eget hendrerit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="aw-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32">
|
||||
@@ -379,19 +150,18 @@
|
||||
<section class="aw-article-content-grid-6-4">
|
||||
<div class="aw-article-content-grid-6-4-column-1 u-flex-vertical u-gap-32">
|
||||
<p class="aw-paragraph-md">
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel
|
||||
posuere arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna
|
||||
pulvinar nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui
|
||||
feugiat. Neque nunc elit cursus dignissim ornare sem lectus.
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel posuere
|
||||
arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna pulvinar
|
||||
nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui feugiat. Neque
|
||||
nunc elit cursus dignissim ornare sem lectus.
|
||||
</p>
|
||||
<p class="aw-paragraph-md">
|
||||
In viverra at ultrices sit. Vitae pulvinar tincidunt sed et eleifend nunc dictumst.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat.
|
||||
Turpis amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis
|
||||
semper aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis
|
||||
sem. Purus tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut
|
||||
arcu malesuada lectus sed. Non viverra volutpat sit turpis lorem urna at eget
|
||||
hendrerit.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat. Turpis
|
||||
amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis semper
|
||||
aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis sem. Purus
|
||||
tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut arcu malesuada
|
||||
lectus sed. Non viverra volutpat sit turpis lorem urna at eget hendrerit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="aw-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32">
|
||||
@@ -436,19 +206,18 @@
|
||||
<section class="aw-article-content-grid-6-4">
|
||||
<div class="aw-article-content-grid-6-4-column-1 u-flex-vertical u-gap-32">
|
||||
<p class="aw-paragraph-md">
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel
|
||||
posuere arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna
|
||||
pulvinar nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui
|
||||
feugiat. Neque nunc elit cursus dignissim ornare sem lectus.
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel posuere
|
||||
arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna pulvinar
|
||||
nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui feugiat. Neque
|
||||
nunc elit cursus dignissim ornare sem lectus.
|
||||
</p>
|
||||
<p class="aw-paragraph-md">
|
||||
In viverra at ultrices sit. Vitae pulvinar tincidunt sed et eleifend nunc dictumst.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat.
|
||||
Turpis amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis
|
||||
semper aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis
|
||||
sem. Purus tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut
|
||||
arcu malesuada lectus sed. Non viverra volutpat sit turpis lorem urna at eget
|
||||
hendrerit.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat. Turpis
|
||||
amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis semper
|
||||
aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis sem. Purus
|
||||
tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut arcu malesuada
|
||||
lectus sed. Non viverra volutpat sit turpis lorem urna at eget hendrerit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="aw-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32">
|
||||
@@ -493,19 +262,18 @@
|
||||
<section class="aw-article-content-grid-6-4">
|
||||
<div class="aw-article-content-grid-6-4-column-1 u-flex-vertical u-gap-32">
|
||||
<p class="aw-paragraph-md">
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel
|
||||
posuere arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna
|
||||
pulvinar nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui
|
||||
feugiat. Neque nunc elit cursus dignissim ornare sem lectus.
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel posuere
|
||||
arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna pulvinar
|
||||
nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui feugiat. Neque
|
||||
nunc elit cursus dignissim ornare sem lectus.
|
||||
</p>
|
||||
<p class="aw-paragraph-md">
|
||||
In viverra at ultrices sit. Vitae pulvinar tincidunt sed et eleifend nunc dictumst.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat.
|
||||
Turpis amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis
|
||||
semper aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis
|
||||
sem. Purus tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut
|
||||
arcu malesuada lectus sed. Non viverra volutpat sit turpis lorem urna at eget
|
||||
hendrerit.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat. Turpis
|
||||
amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis semper
|
||||
aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis sem. Purus
|
||||
tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut arcu malesuada
|
||||
lectus sed. Non viverra volutpat sit turpis lorem urna at eget hendrerit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="aw-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32">
|
||||
@@ -550,19 +318,18 @@
|
||||
<section class="aw-article-content-grid-6-4">
|
||||
<div class="aw-article-content-grid-6-4-column-1 u-flex-vertical u-gap-32">
|
||||
<p class="aw-paragraph-md">
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel
|
||||
posuere arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna
|
||||
pulvinar nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui
|
||||
feugiat. Neque nunc elit cursus dignissim ornare sem lectus.
|
||||
Lorem ipsum dolor sit amet consectetur. Bibendum sed ultrices sit aenean. Vel posuere
|
||||
arcu venenatis hendrerit at facilisis. Consequat consectetur phasellus magna pulvinar
|
||||
nisi mi aliquam. Id non imperdiet fringilla duis eu neque fames dui feugiat. Neque
|
||||
nunc elit cursus dignissim ornare sem lectus.
|
||||
</p>
|
||||
<p class="aw-paragraph-md">
|
||||
In viverra at ultrices sit. Vitae pulvinar tincidunt sed et eleifend nunc dictumst.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat.
|
||||
Turpis amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis
|
||||
semper aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis
|
||||
sem. Purus tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut
|
||||
arcu malesuada lectus sed. Non viverra volutpat sit turpis lorem urna at eget
|
||||
hendrerit.
|
||||
Nulla ullamcorper praesent cursus orci enim. Sed ut nibh consequat id volutpat. Turpis
|
||||
amet tincidunt purus consequat nibh in varius ipsum. Aenean pellentesque duis semper
|
||||
aenean eget ac morbi dictum in. In amet mollis consequat neque turpis duis sem. Purus
|
||||
tincidunt amet curabitur nibh adipiscing quis duis. Duis cras elit ut arcu malesuada
|
||||
lectus sed. Non viverra volutpat sit turpis lorem urna at eget hendrerit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="aw-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32">
|
||||
@@ -694,22 +461,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <script type="module" src="/src/main.ts"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#MenuButton, #ToggleMenu").on("click", function(){
|
||||
$(".aw-grid-huge-navs").toggleClass("is-open");
|
||||
$(".aw-references-menu").removeClass("is-open");
|
||||
});
|
||||
|
||||
|
||||
$("#refOpen, #refClose").on("click", function(){
|
||||
$(".aw-references-menu").toggleClass("is-open");
|
||||
$(".aw-grid-huge-navs").removeClass("is-open");
|
||||
});
|
||||
});
|
||||
</script> -->
|
||||
</Docs>
|
||||
|
||||
@@ -1,520 +1,187 @@
|
||||
<div id="app">
|
||||
<div class="aw-grid-two-side-navs">
|
||||
<section class="aw-mobile-header">
|
||||
<div class="aw-mobile-header-start">
|
||||
<a href="">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="aw-mobile-header-end">
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
<button id="MenuButton" class="aw-button is-text" aria-label="open navigation">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M3 5.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
<path d="M3 14.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<header class="aw-main-header">
|
||||
<div class="aw-main-header-wrapper">
|
||||
<div class="aw-main-header-row">
|
||||
<div class="aw-main-header-start u-stretch">
|
||||
<a href="/">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
<nav class="aw-main-header-nav">
|
||||
<ul class="aw-main-header-nav-list">
|
||||
<li class="aw-main-header-nav-item">
|
||||
<a class="aw-main-header-nav-link is-selected" href="docs-homepage.html">Docs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="u-flex u-stretch aw-u-margin-inline-start-48">
|
||||
<button class="aw-input-text aw-u-flex-basis-400">
|
||||
<span class="icon-search" />
|
||||
<span class="text">Search in docs</span>
|
||||
<script lang="ts">
|
||||
import { Docs } from '$lib/layouts';
|
||||
import Sidebar from '../Sidebar.svelte';
|
||||
</script>
|
||||
|
||||
<div class="u-flex u-gap-4 u-margin-inline-start-auto">
|
||||
<span class="aw-kbd" aria-label="command">⌘</span>
|
||||
<span class="aw-kbd">k</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-main-header-end">
|
||||
<div class="u-flex u-gap-8">
|
||||
<button class="aw-button is-text">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="16"
|
||||
viewBox="0 0 18 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
|
||||
stroke="white"
|
||||
stroke-opacity="0.48"
|
||||
stroke-width="1.20208"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text">Star on GitHub</span>
|
||||
<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav class="aw-side-nav">
|
||||
<div class="aw-side-nav-wrapper">
|
||||
<div class="aw-side-nav-scroll">
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Quick Start</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-book-open" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Tutorials</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-cog" aria-hidden="true" />
|
||||
<span class="aw-caption-400">SDKs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-terminal" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Command Line</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-document" aria-hidden="true" />
|
||||
<span class="aw-caption-400">References</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Products</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-user-group" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Auth</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-database" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Databases</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-lightning-bolt" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Functions</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-folder" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Storage</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">APIS</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-clock" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Realtime</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">REST</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">GraphQL</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Advanced</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-puzzle" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Integration</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Platform</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-refresh" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Migrations</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="u-contents">
|
||||
<article class="aw-article u-contents">
|
||||
<Docs>
|
||||
<Sidebar />
|
||||
<main class="aw-main-section">
|
||||
<article class="aw-article">
|
||||
<header class="aw-article-header">
|
||||
<div class="aw-article-header-start u-flex-vertical aw-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"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span class="icon-cheveron-left" aria-hidden="true" />
|
||||
</button>
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
<li>[level-of-difficulty]</li>
|
||||
<li>[time-to-read] min</li>
|
||||
</ul>
|
||||
<div class="u-position-relative u-flex u-cross-center">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text u-height-100-percent aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12
|
||||
u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span class="icon-cheveron-left aw-u-font-size-24" aria-hidden="true" />
|
||||
</button>
|
||||
<h1 class="aw-title">Header</h1>
|
||||
<h1 class="aw-title">Quick start</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-article-header-end" />
|
||||
</header>
|
||||
<div class="aw-article-content">
|
||||
<section class="aw-article-content-section">
|
||||
<header class="aw-article-content-header">
|
||||
<h2 class="aw-main-body-500">Prerequisites</h2>
|
||||
<div class="aw-article-content aw-u-gap-80">
|
||||
<section class="u-flex-vertical u-gap-24">
|
||||
<h2 class="aw-eyebrow">Client</h2>
|
||||
<ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<ul class="aw-list">
|
||||
<li>Lorem ipsum dolor sit amet consectetur.</li>
|
||||
<li>Lorem ipsum dolor sit amet consectetur. Cras laoreet dolor ultrices ligula.</li>
|
||||
<li>
|
||||
Quam pretium blandit egestas nec diam lacus volutpat a lorem. Porta augue proin.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-media">
|
||||
<img
|
||||
class=""
|
||||
src="https://pink.appwrite.io/articles/announcement.png"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="aw-article-content-section">
|
||||
<header class="aw-article-content-header">
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
<ul class="u-flex u-flex-wrap u-gap-8">
|
||||
<li><div class="aw-tag">product</div></li>
|
||||
<li><div class="aw-tag">product</div></li>
|
||||
<li><div class="aw-tag">product</div></li>
|
||||
</ul>
|
||||
</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Ullamcorper tincidunt ut egestas mauris
|
||||
rhoncus arcu. Habitant est leo maecenas et. Tempus elementum eget rutrum eget semper.
|
||||
Vulputate quis odio velit fames tristique sit magna nec ut.
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="aw-article-content-section is-with-line">
|
||||
<header class="aw-article-content-header">
|
||||
<span class="aw-numeric-badge">1</span>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
|
||||
<header class="aw-code-snippet-header">
|
||||
<div class="aw-code-snippet-header-start">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="aw-tag">
|
||||
<span class="text">Default</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-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">
|
||||
<select>
|
||||
<option>Web SDK</option>
|
||||
<option>Android SDK</option>
|
||||
</select>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="buttons-list-item aw-u-padding-inline-start-20">
|
||||
<button class="aw-icon-button" aria-label="copy code from code-snippet">
|
||||
<span class="icon-duplicate" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-code-snippet-content">CONTENT</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="aw-article-content-section is-with-line">
|
||||
<header class="aw-article-content-header">
|
||||
<span class="aw-numeric-badge">2</span>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
|
||||
<header class="aw-code-snippet-header">
|
||||
<div class="aw-code-snippet-header-start">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="aw-tag">
|
||||
<span class="text">Default</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-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">
|
||||
<select>
|
||||
<option>Web SDK</option>
|
||||
<option>Android SDK</option>
|
||||
</select>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="buttons-list-item aw-u-padding-inline-start-20">
|
||||
<button class="aw-icon-button" aria-label="copy code from code-snippet">
|
||||
<span class="icon-duplicate" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-code-snippet-content">CONTENT</div>
|
||||
</section>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
|
||||
<header class="aw-code-snippet-header">
|
||||
<div class="aw-code-snippet-header-start">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="aw-tag">
|
||||
<span class="text">Default</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-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">
|
||||
<select>
|
||||
<option>Web SDK</option>
|
||||
<option>Android SDK</option>
|
||||
</select>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="buttons-list-item aw-u-padding-inline-start-20">
|
||||
<button class="aw-icon-button" aria-label="copy code from code-snippet">
|
||||
<span class="icon-duplicate" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-code-snippet-content">CONTENT</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="aw-article-content-section">
|
||||
<header class="aw-article-content-header">
|
||||
<span class="aw-numeric-badge">3</span>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
|
||||
<header class="aw-code-snippet-header">
|
||||
<div class="aw-code-snippet-header-start">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="aw-tag">
|
||||
<span class="text">Default</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-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">
|
||||
<select>
|
||||
<option>Web SDK</option>
|
||||
<option>Android SDK</option>
|
||||
</select>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="buttons-list-item aw-u-padding-inline-start-20">
|
||||
<button class="aw-icon-button" aria-label="copy code from code-snippet">
|
||||
<span class="icon-duplicate" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-code-snippet-content">CONTENT</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<aside class="aw-references-menu aw-u-padding-inline-start-24">
|
||||
<div class="aw-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">On This Page</h5>
|
||||
</div>
|
||||
<ol class="aw-references-menu-list">
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link is-selected">
|
||||
<span class="aw-caption-400">Prerequisites</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-caption-400">Featured products</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-numeric-badge">1</span>
|
||||
<span class="aw-caption-400">Title</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-numeric-badge">2</span>
|
||||
<span class="aw-caption-400">Title</span>
|
||||
</a>
|
||||
<ol
|
||||
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
|
||||
>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-caption-400">Subtitle</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-caption-400">Subtitle</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-numeric-badge">3</span>
|
||||
<span class="aw-caption-400">Title</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="u-sep-block-start u-padding-block-start-20">
|
||||
<a class="aw-button is-text" href="#">
|
||||
<span class="icon-arrow-up" aria-hidden="true" />
|
||||
<span class="aw-sub-body-500">Back to top</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</main>
|
||||
<footer class="aw-main-footer u-margin-block-start-48 u-small">
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="u-flex-vertical u-gap-24">
|
||||
<h2 class="aw-eyebrow">Server</h2>
|
||||
<ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true" />
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<footer class="aw-main-footer is-with-bg-color u-margin-block-start-48 u-small">
|
||||
<div class="aw-main-footer-grid-1">
|
||||
<ul class="aw-main-footer-grid-1-column-1 u-flex u-gap-8">
|
||||
<li>
|
||||
@@ -568,22 +235,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <script type="module" src="/src/main.ts"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#MenuButton, #ToggleMenu").on("click", function(){
|
||||
$(".aw-grid-two-side-navs").toggleClass("is-open");
|
||||
$(".aw-references-menu").removeClass("is-open");
|
||||
});
|
||||
|
||||
|
||||
$("#refOpen, #refClose").on("click", function(){
|
||||
$(".aw-references-menu").toggleClass("is-open");
|
||||
$(".aw-grid-two-side-navs").removeClass("is-open");
|
||||
});
|
||||
});
|
||||
</script> -->
|
||||
</main>
|
||||
</Docs>
|
||||
|
||||
572
src/routes/docs/tutorials/example/+page.svelte
Normal file
572
src/routes/docs/tutorials/example/+page.svelte
Normal file
@@ -0,0 +1,572 @@
|
||||
<div id="app">
|
||||
<div class="aw-grid-two-side-navs">
|
||||
<section class="aw-mobile-header">
|
||||
<div class="aw-mobile-header-start">
|
||||
<a href="">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="aw-mobile-header-end">
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
<button id="MenuButton" class="aw-button is-text" aria-label="open navigation">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M3 5.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
<path d="M3 14.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<header class="aw-main-header">
|
||||
<div class="aw-main-header-wrapper">
|
||||
<div class="aw-main-header-row">
|
||||
<div class="aw-main-header-start u-stretch">
|
||||
<a href="/">
|
||||
<img
|
||||
class="aw-logo u-only-dark"
|
||||
src="/images/logos/appwrite.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
<img
|
||||
class="aw-logo u-only-light"
|
||||
src="/images/logos/appwrite-light.svg"
|
||||
alt="appwrite"
|
||||
width="130"
|
||||
/>
|
||||
</a>
|
||||
<nav class="aw-main-header-nav">
|
||||
<ul class="aw-main-header-nav-list">
|
||||
<li class="aw-main-header-nav-item">
|
||||
<a class="aw-main-header-nav-link is-selected" href="docs-homepage.html">Docs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="u-flex u-stretch aw-u-margin-inline-start-48">
|
||||
<button class="aw-input-text aw-u-flex-basis-400">
|
||||
<span class="icon-search" />
|
||||
<span class="text">Search in docs</span>
|
||||
|
||||
<div class="u-flex u-gap-4 u-margin-inline-start-auto">
|
||||
<span class="aw-kbd" aria-label="command">⌘</span>
|
||||
<span class="aw-kbd">k</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-main-header-end">
|
||||
<div class="u-flex u-gap-8">
|
||||
<button class="aw-button is-text">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="16"
|
||||
viewBox="0 0 18 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
|
||||
stroke="white"
|
||||
stroke-opacity="0.48"
|
||||
stroke-width="1.20208"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text">Star on GitHub</span>
|
||||
<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav class="aw-side-nav">
|
||||
<div class="aw-side-nav-wrapper">
|
||||
<div class="aw-side-nav-scroll">
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Quick Start</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-book-open" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Tutorials</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-cog" aria-hidden="true" />
|
||||
<span class="aw-caption-400">SDKs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-terminal" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Command Line</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-document" aria-hidden="true" />
|
||||
<span class="aw-caption-400">References</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Products</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-user-group" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Auth</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-database" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Databases</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-lightning-bolt" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Functions</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-folder" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Storage</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">APIS</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-clock" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Realtime</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">REST</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">GraphQL</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Advanced</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-puzzle" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Integration</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-play" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Platform</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-refresh" aria-hidden="true" />
|
||||
<span class="aw-caption-400">Migrations</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="u-contents">
|
||||
<article class="aw-article u-contents">
|
||||
<header class="aw-article-header">
|
||||
<div class="aw-article-header-start u-flex-vertical aw-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"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span class="icon-cheveron-left" aria-hidden="true" />
|
||||
</button>
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
<li>[level-of-difficulty]</li>
|
||||
<li>[time-to-read] min</li>
|
||||
</ul>
|
||||
<div class="u-position-relative u-flex u-cross-center">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text u-height-100-percent aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12
|
||||
u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span class="icon-cheveron-left aw-u-font-size-24" aria-hidden="true" />
|
||||
</button>
|
||||
<h1 class="aw-title">Header</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-article-header-end" />
|
||||
</header>
|
||||
<div class="aw-article-content">
|
||||
<section class="aw-article-content-section">
|
||||
<header class="aw-article-content-header">
|
||||
<h2 class="aw-main-body-500">Prerequisites</h2>
|
||||
</header>
|
||||
<ul class="aw-list">
|
||||
<li>Lorem ipsum dolor sit amet consectetur.</li>
|
||||
<li>Lorem ipsum dolor sit amet consectetur. Cras laoreet dolor ultrices ligula.</li>
|
||||
<li>
|
||||
Quam pretium blandit egestas nec diam lacus volutpat a lorem. Porta augue proin.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-media">
|
||||
<img
|
||||
class=""
|
||||
src="https://pink.appwrite.io/articles/announcement.png"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="aw-article-content-section">
|
||||
<header class="aw-article-content-header">
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
<ul class="u-flex u-flex-wrap u-gap-8">
|
||||
<li><div class="aw-tag">product</div></li>
|
||||
<li><div class="aw-tag">product</div></li>
|
||||
<li><div class="aw-tag">product</div></li>
|
||||
</ul>
|
||||
</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Ullamcorper tincidunt ut egestas mauris
|
||||
rhoncus arcu. Habitant est leo maecenas et. Tempus elementum eget rutrum eget semper.
|
||||
Vulputate quis odio velit fames tristique sit magna nec ut.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="aw-article-content-section is-with-line">
|
||||
<header class="aw-article-content-header">
|
||||
<span class="aw-numeric-badge">1</span>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
|
||||
<header class="aw-code-snippet-header">
|
||||
<div class="aw-code-snippet-header-start">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="aw-tag">
|
||||
<span class="text">Default</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-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">
|
||||
<select>
|
||||
<option>Web SDK</option>
|
||||
<option>Android SDK</option>
|
||||
</select>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="buttons-list-item aw-u-padding-inline-start-20">
|
||||
<button class="aw-icon-button" aria-label="copy code from code-snippet">
|
||||
<span class="icon-duplicate" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-code-snippet-content">CONTENT</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="aw-article-content-section is-with-line">
|
||||
<header class="aw-article-content-header">
|
||||
<span class="aw-numeric-badge">2</span>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
|
||||
<header class="aw-code-snippet-header">
|
||||
<div class="aw-code-snippet-header-start">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="aw-tag">
|
||||
<span class="text">Default</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-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">
|
||||
<select>
|
||||
<option>Web SDK</option>
|
||||
<option>Android SDK</option>
|
||||
</select>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="buttons-list-item aw-u-padding-inline-start-20">
|
||||
<button class="aw-icon-button" aria-label="copy code from code-snippet">
|
||||
<span class="icon-duplicate" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-code-snippet-content">CONTENT</div>
|
||||
</section>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
|
||||
<header class="aw-code-snippet-header">
|
||||
<div class="aw-code-snippet-header-start">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="aw-tag">
|
||||
<span class="text">Default</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-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">
|
||||
<select>
|
||||
<option>Web SDK</option>
|
||||
<option>Android SDK</option>
|
||||
</select>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="buttons-list-item aw-u-padding-inline-start-20">
|
||||
<button class="aw-icon-button" aria-label="copy code from code-snippet">
|
||||
<span class="icon-duplicate" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-code-snippet-content">CONTENT</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="aw-article-content-section">
|
||||
<header class="aw-article-content-header">
|
||||
<span class="aw-numeric-badge">3</span>
|
||||
<h2 class="aw-main-body-500">Featured products</h2>
|
||||
</header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
|
||||
ut. Dictum tortor arcu feugiat metus pellentesque posuere.
|
||||
</p>
|
||||
<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
|
||||
<header class="aw-code-snippet-header">
|
||||
<div class="aw-code-snippet-header-start">
|
||||
<div class="u-flex u-gap-16">
|
||||
<div class="aw-tag">
|
||||
<span class="text">Default</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-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">
|
||||
<select>
|
||||
<option>Web SDK</option>
|
||||
<option>Android SDK</option>
|
||||
</select>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="buttons-list-item aw-u-padding-inline-start-20">
|
||||
<button class="aw-icon-button" aria-label="copy code from code-snippet">
|
||||
<span class="icon-duplicate" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-code-snippet-content">CONTENT</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<aside class="aw-references-menu aw-u-padding-inline-start-24">
|
||||
<div class="aw-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">On This Page</h5>
|
||||
</div>
|
||||
<ol class="aw-references-menu-list">
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link is-selected">
|
||||
<span class="aw-caption-400">Prerequisites</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-caption-400">Featured products</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-numeric-badge">1</span>
|
||||
<span class="aw-caption-400">Title</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-numeric-badge">2</span>
|
||||
<span class="aw-caption-400">Title</span>
|
||||
</a>
|
||||
<ol
|
||||
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
|
||||
>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-caption-400">Subtitle</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-caption-400">Subtitle</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="" class="aw-references-menu-link">
|
||||
<span class="aw-numeric-badge">3</span>
|
||||
<span class="aw-caption-400">Title</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="u-sep-block-start u-padding-block-start-20">
|
||||
<a class="aw-button is-text" href="#">
|
||||
<span class="icon-arrow-up" aria-hidden="true" />
|
||||
<span class="aw-sub-body-500">Back to top</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</main>
|
||||
<footer class="aw-main-footer u-margin-block-start-48 u-small">
|
||||
<div class="aw-main-footer-grid-1">
|
||||
<ul class="aw-main-footer-grid-1-column-1 u-flex u-gap-8">
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on Discord">
|
||||
<span class="icon-discord" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite GitHub">
|
||||
<span class="icon-github" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on Twitter">
|
||||
<span class="icon-twitter" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on LinkedIn">
|
||||
<span class="icon-linkedin" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite YouTube">
|
||||
<span class="icon-youtube" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-main-footer-grid-1-column-2">
|
||||
<div class="aw-select is-colored">
|
||||
<button class="physical-select">
|
||||
<span class="icon-moon" aria-hidden="true" />
|
||||
<span>Dark</span>
|
||||
</button>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="aw-main-footer-grid-1-column-3 aw-main-footer-links">
|
||||
<li>
|
||||
<a href="">Supports</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Status</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Changelog</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-main-footer-grid-1-column-4 aw-main-footer-copyright">
|
||||
Copyright © 2023 Appwrite • Version 0.30.13.504
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,421 +0,0 @@
|
||||
|
||||
<div id="app" class="u-position-relative">
|
||||
<div class="aw-grid-side-nav aw-container" style="--container-size:var(--container-size-large);">
|
||||
<section class="aw-mobile-header is-transparent">
|
||||
<div class="aw-mobile-header-start">
|
||||
<a href="">
|
||||
<img class="aw-logo u-only-dark" src="/images/logos/appwrite.svg" alt="appwrite" width="130" />
|
||||
<img class="aw-logo u-only-light" src="/images/logos/appwrite-light.svg" alt="appwrite" width="130" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="aw-mobile-header-end">
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
<button id="MenuButton" class="aw-button is-text" aria-label="open navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M3 5.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M3 14.5H17" stroke="#E4E4E7" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<header class="aw-main-header is-transparent">
|
||||
<div class="aw-main-header-wrapper">
|
||||
<div class="aw-main-header-row">
|
||||
<div class="aw-main-header-start u-stretch">
|
||||
<a href="/">
|
||||
<img class="aw-logo u-only-dark" src="/images/logos/appwrite.svg" alt="appwrite" width="130" />
|
||||
<img class="aw-logo u-only-light" src="/images/logos/appwrite-light.svg" alt="appwrite" width="130" />
|
||||
</a>
|
||||
<nav class="aw-main-header-nav">
|
||||
<ul class="aw-main-header-nav-list">
|
||||
<li class="aw-main-header-nav-item">
|
||||
<a class="aw-main-header-nav-link is-selected" href="docs-homepage.html">Docs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="u-flex u-stretch aw-u-margin-inline-start-48">
|
||||
<button class="aw-input-text aw-u-flex-basis-400">
|
||||
<span class="icon-search"></span>
|
||||
<span class="text">Search in docs</span>
|
||||
|
||||
<div class="u-flex u-gap-4 u-margin-inline-start-auto">
|
||||
<span class="aw-kbd" aria-label="command">⌘</span>
|
||||
<span class="aw-kbd">k</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-main-header-end">
|
||||
<div class="u-flex u-gap-8">
|
||||
<button class="aw-button is-text">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16" fill="none">
|
||||
<path d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z" stroke="white" stroke-opacity="0.48" stroke-width="1.20208" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
<span class="text">Star on GitHub</span>
|
||||
<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="aw-sub-body-500">Go to console</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav class="aw-side-nav is-transparent">
|
||||
<div class="aw-side-nav-wrapper">
|
||||
<button class="aw-input-text aw-is-not-desktop">
|
||||
<span class="icon-search"></span>
|
||||
<span class="text">Search in docs</span>
|
||||
</button>
|
||||
<div class="aw-side-nav-scroll">
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Quick Start</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-book-open" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Tutorials</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-cog" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">SDKs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-terminal" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Command Line</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-document" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">References</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Products</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-user-group" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Auth</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-database" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Databases</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-lightning-bolt" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Functions</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-folder" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Storage</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">APIS</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-clock" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Realtime</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">REST</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="aw-side-nav-button" href="">
|
||||
<span class="icon-play" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">GraphQL</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="aw-side-nav-header aw-eyebrow">Advanced</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-puzzle" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Integration</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-play" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Platform</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-side-nav-button">
|
||||
<span class="icon-refresh" aria-hidden="true"></span>
|
||||
<span class="aw-caption-400">Migrations</span>
|
||||
<span class="icon-cheveron-down u-margin-inline-start-auto" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="aw-main-section">
|
||||
|
||||
<article class="aw-article">
|
||||
<header class="aw-article-header">
|
||||
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
|
||||
<div class="u-position-relative u-flex u-cross-center">
|
||||
<h1 class="aw-title">Quick start</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="aw-article-header-end"></div>
|
||||
</header>
|
||||
<div class="aw-article-content aw-u-gap-80">
|
||||
|
||||
<section class="u-flex-vertical u-gap-24">
|
||||
<h2 class="aw-eyebrow">Client</h2>
|
||||
<ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="u-flex-vertical u-gap-24">
|
||||
<h2 class="aw-eyebrow">Server</h2>
|
||||
<ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="is-mobile-col-span-2">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
<li class="">
|
||||
<article class="aw-card is-full-color">
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span class="icon-node_js aw-u-font-size-24" aria-hidden="true"></span>
|
||||
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Node.js</h4>
|
||||
</header>
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<footer class="aw-main-footer is-with-bg-color u-margin-block-start-48 u-small">
|
||||
<div class="aw-main-footer-grid-1">
|
||||
<ul class="aw-main-footer-grid-1-column-1 u-flex u-gap-8">
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on Discord">
|
||||
<span class="icon-discord" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite GitHub">
|
||||
<span class="icon-github" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on Twitter">
|
||||
<span class="icon-twitter" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on LinkedIn">
|
||||
<span class="icon-linkedin" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite YouTube">
|
||||
<span class="icon-youtube" aria-hidden="true"></span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-main-footer-grid-1-column-2">
|
||||
<div class="aw-select is-colored">
|
||||
<button class="physical-select">
|
||||
<span class="icon-moon" aria-hidden="true"></span>
|
||||
<span>Dark</span>
|
||||
</button>
|
||||
<span class="icon-cheveron-down" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="aw-main-footer-grid-1-column-3 aw-main-footer-links">
|
||||
<li>
|
||||
<a href="">Supports</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Status</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Changelog</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-main-footer-grid-1-column-4 aw-main-footer-copyright">Copyright © 2023 Appwrite • Version 0.30.13.504</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <script type="module" src="/src/main.ts"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#MenuButton, #ToggleMenu").on("click", function(){
|
||||
$(".aw-grid-side-nav").toggleClass("is-open");
|
||||
});
|
||||
});
|
||||
</script> -->
|
||||
Reference in New Issue
Block a user