This commit is contained in:
Jesse Winton
2025-04-07 13:13:18 -04:00
parent cb09712daf
commit 76d4c795e9
6 changed files with 114 additions and 176 deletions

View File

@@ -4,6 +4,7 @@
import { SOCIAL_STATS } from '$lib/constants';
import type { NavLink } from './MainNav.svelte';
import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
import { Button, InlineTag, Icon } from '$lib/components/ui';
export let open = false;
export let links: NavLink[];
@@ -18,10 +19,10 @@
<nav class="web-side-nav web-is-not-desktop" class:hidden={!open}>
<div class="web-side-nav-wrapper ps-4 pe-4">
<div class="flex items-center gap-2 px-4">
<a href={getAppwriteDashboardUrl('/register')} class="web-button is-secondary flex-1">
<Button href={getAppwriteDashboardUrl('/register')} variant="secondary" class="flex-1">
Sign up
</a>
<IsLoggedIn classes="flex-1" />
</Button>
<IsLoggedIn class="flex-1" />
</div>
<div class="web-side-nav-scroll">
<section>
@@ -41,16 +42,17 @@
</section>
</div>
<div class="web-side-nav-mobile-footer-buttons">
<a
<Button
href={SOCIAL_STATS.GITHUB.LINK}
target="_blank"
rel="noopener noreferrer"
class="web-button is-text web-u-inline-width-100-percent-mobile"
variant="text"
class="w-full! md:w-fit"
>
<span class="web-icon-star" aria-hidden="true"></span>
<span class="text">Star on GitHub</span>
<span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
</a>
<Icon icon="star" aria-hidden="true" />
Star on GitHub
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button>
</div>
</div>
</nav>

View File

@@ -53,7 +53,7 @@
<Button
variant="secondary"
href={getAppwriteDashboardUrl('/register')}
class="web-u-cross-child-end w-full! md:w-fit"
class="web-u-cross-child-end w-full! flex-3 md:w-fit"
onclick={() =>
trackEvent({
plausible: {
@@ -119,7 +119,7 @@
<Button
variant="secondary"
href={getAppwriteDashboardUrl('/console?type=create&plan=tier-2')}
class="web-u-cross-child-end w-full! md:w-fit"
class="web-u-cross-child-end w-full! flex-3 md:w-fit"
target="_blank"
rel="noopener noreferrer"
onclick={() =>
@@ -149,7 +149,7 @@
<Button
href="/contact-us/enterprise"
variant="secondary"
class="web-u-cross-child-end w-full! md:w-fit"
class="web-u-cross-child-end w-full! flex-3 md:w-fit"
target="_blank"
rel="noopener noreferrer"
onclick={() =>
@@ -172,10 +172,6 @@
flex-basis: 5rem !important;
}
.web-strip-plans .web-button {
flex: 3;
}
.web-strip-plans-item-wrapper {
gap: 2.65rem;
}

View File

@@ -1,5 +1,5 @@
<div
class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 -mr-0.5 rounded-[.25rem] bg-black/8 px-1 py-0.25 dark:bg-white/[0.12]"
class="web-inline-tag tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 -mr-0.5 rounded-[.25rem] bg-black/8 px-1 py-0.25 dark:bg-white/[0.12]"
>
<slot />
</div>

View File

@@ -46,6 +46,7 @@
import { SOCIAL_STATS } from '$lib/constants';
import { page } from '$app/state';
import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
import { Button, Icon, InlineTag } from '$lib/components/ui';
export let variant: DocsLayoutVariant = 'default';
export let isReferences = false;
@@ -105,20 +106,16 @@
</a>
</div>
<div class="web-mobile-header-end">
<a href={getAppwriteDashboardUrl()} class="web-button web-is-only-desktop">
<Button href={getAppwriteDashboardUrl()} class="hidden md:flex">
<span class="text-sub-body font-medium">Go to Console</span>
</a>
<button
class="web-button is-text"
aria-label="open navigation"
on:click={toggleSidenav}
>
</Button>
<Button variant="text" aria-label="open navigation" onclick={toggleSidenav}>
{#if $layoutState.showSidenav}
<span aria-hidden="true" class="web-icon-close"></span>
<Icon aria-hidden="true" icon="close"></Icon>
{:else}
<span aria-hidden="true" class="web-icon-hamburger-menu"></span>
<Icon aria-hidden="true" icon="hamburger-menu"></Icon>
{/if}
</button>
</Button>
</div>
</section>
<header
@@ -171,16 +168,16 @@
</div>
<div class="web-main-header-end">
<div class="flex gap-2">
<a
<Button
variant="text"
href={SOCIAL_STATS.GITHUB.LINK}
target="_blank"
rel="noopener noreferrer"
class="web-button is-text"
>
<span class="web-icon-star" aria-hidden="true"></span>
<Icon icon="star" aria-hidden="true"></Icon>
<span class="text">Star on GitHub</span>
<span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
</a>
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button>
<IsLoggedIn />
</div>
</div>

View File

@@ -6,7 +6,7 @@
icon?: string;
image?: string;
title: string;
children: Snippet;
children?: Snippet;
}
const { href, icon = '', image = '', title, children }: Props = $props();
@@ -27,9 +27,11 @@
{title}
</h4>
</header>
{#if children}
<p class="text-sub-body mt-1" style:margin-block="0">
{@render children()}
</p>
{/if}
</a>
</li>

View File

@@ -2,6 +2,7 @@
import { visible } from '$lib/actions';
import TocNav from '$lib/components/TocNav.svelte';
import TocRoot from '$lib/components/TocRoot.svelte';
import { Button, Icon } from '$lib/components/ui';
import { Main } from '$lib/layouts';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
@@ -133,28 +134,22 @@
alt="Appwrite logo with black text"
/>
<div class="buttons">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/logotype/white.svg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>SVG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href="/assets/logotype/white.png"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
<div
@@ -167,28 +162,22 @@
alt="Appwrite logo with white text"
/>
<div class="buttons">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/logotype/black.svg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>SVG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href="/assets/logotype/black.png"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
</div>
@@ -242,28 +231,22 @@
alt="Appwrite's logomark"
/>
<div class="buttons">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/logomark/logo.svg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>SVG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href="/assets/logomark/logo.png"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
<div
@@ -276,28 +259,22 @@
alt="Appwrite's logomark"
/>
<div class="buttons">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/logomark/logo.svg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>SVG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href="/assets/logomark/logo.png"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
</div>
@@ -391,28 +368,22 @@
alt="Dashboard"
/>
<div class="buttons visuals">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/visuals/dashboard.jpg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>JPG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href={'/assets/visuals/dashboard.png'}
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
<div class="media-wrapper">
@@ -422,28 +393,22 @@
alt="Appwrite Auth"
/>
<div class="buttons visuals">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/visuals/auth.jpg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>JPG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href={'/assets/visuals/auth.png'}
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
<div class="media-wrapper">
@@ -453,28 +418,22 @@
alt="Appwrite Databases"
/>
<div class="buttons visuals">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/visuals/databases.jpg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>JPG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href={'/assets/visuals/databases.png'}
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
@@ -485,28 +444,22 @@
alt="Appwrite Storage"
/>
<div class="buttons visuals">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/visuals/storage.jpg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>JPG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href={'/assets/visuals/storage.png'}
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
@@ -517,28 +470,22 @@
alt="Appwrite Functions"
/>
<div class="buttons visuals">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/visuals/functions.jpg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>JPG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href={'/assets/visuals/functions.png'}
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
<div class="media-wrapper">
@@ -548,28 +495,22 @@
alt="Appwrite Messaging"
/>
<div class="buttons visuals">
<a
class="web-button is-secondary"
<Button
variant="secondary"
href="/assets/visuals/messaging.jpg"
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>JPG</span>
</a>
<a
class="web-button is-secondary"
</Button>
<Button
variant="secondary"
href={'/assets/visuals/messaging.png'}
download
>
<span
class="web-icon-download"
aria-label="download"
></span>
<Icon icon="download" aria-label="download" />
<span>PNG</span>
</a>
</Button>
</div>
</div>
</div>