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

updates

Browse Source
This commit is contained in:
Jesse Winton
2025-04-07 13:47:12 -04:00
parent 76d4c795e9
commit cddc24eac0
27 changed files with 182 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@
import type { NavLink } from './MainNav.svelte';
import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
import { Button, InlineTag, Icon } from '$lib/components/ui';
import { GithubStats } from '$lib/components/shared';
export let open = false;
export let links: NavLink[];
@@ -42,17 +43,7 @@
</section>
</div>
<div class="web-side-nav-mobile-footer-buttons">
<Button
href={SOCIAL_STATS.GITHUB.LINK}
target="_blank"
rel="noopener noreferrer"
variant="text"
class="w-full! md:w-fit"
>
<Icon icon="star" aria-hidden="true" />
Star on GitHub
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button>
<GithubStats class="w-full! md:w-fit" />
</div>
</div>
</nav>

14
src/lib/components/shared/discord-link.svelte Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
import { Icon, Button } from '$lib/components/ui';
type Props = {
class?: string;
};
const { class: className }: Props = $props();
</script>
<Button variant="secondary" class={className} href="https://appwrite.io/discord">
<Icon icon="discord" />
<span class="text">Join Discord</span>
</Button>

22
src/lib/components/shared/github-stats.svelte Normal file
View File

@@ -0,0 +1,22 @@
<script lang="ts">
import { SOCIAL_STATS } from '$lib/constants';
import { Icon, InlineTag, Button } from '$lib/components/ui';
type Props = {
class?: string;
};
const { class: className }: Props = $props();
</script>
<Button
href={SOCIAL_STATS.GITHUB.LINK}
target="_blank"
rel="noopener noreferrer"
class={className}
variant="secondary"
>
<Icon icon="star" aria-hidden="true" />
<span class="text">Star on GitHub</span>
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button>

3
src/lib/components/shared/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { default as GithubStats} from './github-stats.svelte';
export { default as DiscordLink } from './discord-link.svelte';
export { default as SocialStats} from './social-stats.svelte';

3
src/lib/components/ui/index.ts
View File

@@ -1,4 +1,5 @@
export { default as Button } from './button.svelte';
export { default as InlineTag } from './inline-tag.svelte';
export { default as Icon, type IconType } from './icon';
export { default as Select } from './select.svelte';
export { default as Select } from './select.svelte';
export { default as SocialStats} from '../shared/social-stats.svelte'

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

@@ -6,6 +6,8 @@
import Heading from '$markdoc/nodes/Heading.svelte';
import { onMount, tick } from 'svelte';
import { page } from '$app/state';
import { Button, Icon } from '$lib/components/ui';
import { classNames } from '$lib/utils/classnames';
export let toc: Array<TocItem>;
export let back: string;
@@ -126,18 +128,18 @@
</ul>
<div class="u-cross-center relative flex">
{#if back}
<a
<Button
href={back}
class="
web-button is-text is-only-icon web-u-cross-center
web-is-not-mobile -translate-x-1/2"
variant="text"
class="is-only-icon web-u-cross-center web-is-not-mobile -translate-x-1/2"
aria-label="previous page"
>
<span
class="icon-cheveron-left web-u-font-size-24 web-u-color-text-primary"
<Icon
icon="chevron-left"
class="text-primary text-2xl"
aria-hidden="true"
></span>
</a>
/>
</Button>
{/if}
<h1 class="web-title {currentStep === 1 ? 'lg:-ml-5' : ''}">
{firstStepItem?.title}
@@ -164,20 +166,26 @@
<div class="web-u-padding-block-start-32 flex justify-between">
{#if prevStep}
<a href={prevStep.href} class="web-button is-text previous-step-anchor">
<span class="icon-cheveron-left" aria-hidden="true"></span>
<Button
variant="text"
href={prevStep.href}
class="previous-step-anchor"
>
<Icon icon="chevron-left" aria-hidden="true" />
<span class="web-sub-body-500">
Step {prevStep.step}<span class="web-is-not-mobile"
>: {getCorrectTitle(prevStep, 1)}</span
>
</span>
</a>
</Button>
{/if}
{#if nextStep}
<a
<Button
variant="secondary"
href={nextStep.href}
class="web-button is-secondary"
style:margin-left={prevStep ? undefined : 'auto'}
class={classNames({
'ml-auto': prevStep
})}
>
<span class="web-sub-body-500">
Step {nextStep.step}<span class="web-is-not-mobile"
@@ -185,7 +193,7 @@
>
</span>
<span class="icon-cheveron-right" aria-hidden="true"></span>
</a>
</Button>
{/if}
</div>
</section>

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

@@ -20,6 +20,7 @@
import MainNav from '$lib/components/MainNav.svelte';
import { page } from '$app/state';
import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
import { Button, Icon, InlineTag } from '$lib/components/ui';
export let omitMainId = false;
let theme: 'light' | 'dark' | null = 'dark';
@@ -168,21 +169,21 @@
</div>
<div class="web-mobile-header-end">
{#if !$isMobileNavOpen}
<a href={getAppwriteDashboardUrl()} class="web-button">
<Button href={getAppwriteDashboardUrl()}>
<span class="text">Start building</span>
</a>
</Button>
{/if}
<button
class="web-button is-text"
<Button
variant="text"
aria-label="open navigation"
on:click={() => ($isMobileNavOpen = !$isMobileNavOpen)}
onclick={() => ($isMobileNavOpen = !$isMobileNavOpen)}
>
{#if $isMobileNavOpen}
<span aria-hidden="true" class="web-icon-close"></span>
<Icon aria-hidden="true" icon="close" />
{:else}
<span aria-hidden="true" class="web-icon-hamburger-menu"></span>
<Icon aria-hidden="true" icon="hamburger-menu" />
{/if}
</button>
</Button>
</div>
</section>
<header
@@ -228,21 +229,22 @@
<MainNav initialized={$initialized} links={navLinks} />
</div>
<div class="web-main-header-end">
<a
<Button
variant="text"
href={SOCIAL_STATS.GITHUB.LINK}
target="_blank"
rel="noopener noreferrer"
class="web-button is-text web-u-inline-width-100-percent-mobile"
on:click={() =>
class="web-u-inline-width-100-percent-mobile"
onclick={() =>
trackEvent({
plausible: { name: 'Star on GitHub in header' },
posthog: { name: 'github-stars_nav_click' }
})}
>
<span class="web-icon-star" aria-hidden="true"></span>
<Icon icon="star" aria-hidden="true" />
<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>

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

@@ -24,6 +24,7 @@
<script lang="ts">
import { clickOutside } from '$lib/actions/clickOutside';
import { Tooltip, IsLoggedIn } from '$lib/components';
import { Button, Icon, InlineTag } from '$lib/components/ui';
import { SOCIAL_STATS } from '$lib/constants';
import { layoutState, toggleSidenav } from './Docs.svelte';
import SidebarNavButton from './SidebarNavButton.svelte';
@@ -122,16 +123,17 @@
<div class="web-side-nav-mobile-footer-buttons">
<IsLoggedIn />
<a
<Button
variant="text"
href={SOCIAL_STATS.GITHUB.LINK}
target="_blank"
rel="noopener noreferrer"
class="web-button is-text web-u-inline-width-100-percent-mobile"
class="web-u-inline-width-100-percent-mobile"
>
<span class="web-icon-star" aria-hidden="true"></span>
<Icon class="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>
</div>
</div>
</nav>

14
src/markdoc/layouts/Integration.svelte
View File

@@ -7,6 +7,7 @@
import type { Integration } from '$routes/integrations/+page';
import { isHeaderHidden } from '$lib/layouts/Main.svelte';
import { integrationCategoryDescriptions } from '$lib/constants';
import { Button, Icon } from '$lib/components/ui';
export let title: Integration['title'];
export let images: Integration['images'];
@@ -50,10 +51,10 @@
<div class="dark container">
<div class="web-integrations-top-section">
<div class="web-carousel-wrapper">
<a href="/integrations" class="web-button is-text mb-12">
<span class="icon-cheveron-left" aria-hidden="true"></span>
<Button variant="text" href="/integrations" class="mb-12">
<Icon icon="chevron-left" aria-hidden="true" />
<span>Back to catalog</span>
</a>
</Button>
{#if images.length > 1}
<Root>
@@ -168,12 +169,9 @@
Join our Technology Partners program to integrate your solutions with
Appwrite’s API, enhancing functionality and expanding your reach.
</p>
<a
href="/integrations/technology-partner"
class="web-button is-primary mt-4 self-center"
>
<Button href="/integrations/technology-partner" class="mt-4 self-center">
<span class="text">Get Started</span>
</a>
</Button>
</section>
</div>
</div>

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

@@ -1,5 +1,6 @@
<script lang="ts">
import Tooltip from '$lib/components/Tooltip.svelte';
import { Button, Icon } from '$lib/components/ui';
import { createDialog, melt } from '@melt-ui/svelte';
import { getContext, hasContext } from 'svelte';
import { quadInOut } from 'svelte/easing';
@@ -44,9 +45,9 @@
<img {src} {alt} {title} loading="lazy" class="aspect-video w-full" />
<div class="abs">
<Tooltip closeOnPointerDown>
<button class="web-button is-secondary cursor-pointer" use:melt={$trigger}>
<Button variant="secondary" class="cursor-pointer" action={trigger}>
<span class="icon-arrow-expand" aria-hidden="true"></span>
</button>
</Button>
{#snippet tooltip()}
Expand
{/snippet}

3
src/markdoc/tags/Call_To_Action.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { Button } from '$lib/components/ui';
import { classNames } from '$lib/utils/classnames';
interface Props {
@@ -52,6 +53,6 @@
{/each}
</ul>
<div class="flex flex-col gap-2 md:flex-row">
<a href={url} class="web-button max-sm:w-full!">{cta}</a>
<Button href={url} class="max-sm:w-full!">{cta}</Button>
</div>
</div>

3
src/routes/+error.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { page } from '$app/state';
import { FooterNav, MainFooter } from '$lib/components';
import { Button } from '$lib/components/ui';
import { Main } from '$lib/layouts';
import DocsError from './docs/+error.svelte';
@@ -28,7 +29,7 @@
more of Appwrite's documentation.
</p>
{/if}
<a href="/" class="web-button self-center">Back to homepage</a>
<Button href="/" class="self-center">Back to homepage</Button>
</div>
</div>
</div>

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

@@ -86,10 +86,10 @@
various platforms and materials.
</p>
<a href="/assets.zip" download class="web-button">
<span class="web-icon-download" aria-hidden="true"></span>
<Button href="/assets.zip" download>
<Icon icon="download" aria-hidden="true" />
<span>Download assets</span>
</a>
</Button>
</section>
<section id={getSectionId(Section.NAMING)}>

11
src/routes/blog/[[page]]/+page.svelte
View File

@@ -7,6 +7,7 @@
import { createDebounce } from '$lib/utils/debounce';
import { goto, onNavigate } from '$app/navigation';
import { Article, FooterNav, MainFooter } from '$lib/components';
import { Button } from '$lib/components/ui';
let { data } = $props();
@@ -238,9 +239,9 @@
</div>
</div>
</div>
<a href={featured.href} class="web-button is-secondary mt-auto">
<Button variant="secondary" href={featured.href} class="mt-auto">
<span>Read article</span>
</a>
</Button>
</div>
</article>
{/if}
@@ -344,15 +345,15 @@
No results found for "{query ? query : selectedCategory}"
</p>
<button
class="web-button is-secondary"
<Button
variant="secondary"
onclick={() => {
query = '';
selectedCategory = 'Latest';
handleSearch();
}}
>Clear search
</button>
</Button>
</div>
{/each}
</ul>

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

@@ -8,6 +8,7 @@
import { page } from '$app/state';
import { CHANGELOG_KEY } from '../utils';
import { TITLE_SUFFIX } from '$routes/titles';
import { Button } from '$lib/components/ui';
let { data } = $props();
@@ -62,7 +63,10 @@
</ul>
{#if data.nextPage}
<button class="web-button is-secondary" onclick={loadMore}>Load more</button
<Button
class="mx-auto mt-20 min-w-44"
variant="secondary"
onclick={loadMore}>Load more</Button
>
{/if}
</div>
@@ -127,12 +131,6 @@
}
}
button {
margin-block-start: 5rem;
margin-inline: auto;
min-inline-size: 10.9375rem;
}
@media screen and (max-width: 512px) {
ul {
padding-inline-start: 0;

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

@@ -56,6 +56,8 @@
import ProjectCard from './ProjectCard.svelte';
import { SOCIAL_STATS } from '$lib/constants';
import { Button, Icon } from '$lib/components/ui';
import InlineTag from '$lib/components/ui/inline-tag.svelte';
let { data } = $props();
@@ -167,26 +169,25 @@
worldwide.
</p>
<div class="mt-8 flex flex-wrap gap-3">
<a
<Button
href={SOCIAL_STATS.DISCORD.LINK}
target="_blank"
rel="noopener noreferrer"
class="web-button is-full-width-mobile"
class="is-full-width-mobile"
>
<span class="text">Join our Discord</span>
</a>
<a
</Button>
<Button
variant="secondary"
href={SOCIAL_STATS.GITHUB.LINK}
target="_blank"
rel="noopener noreferrer"
class="web-button is-secondary is-full-width-mobile"
class="is-full-width-mobile"
>
<span aria-hidden="true" class="web-icon-star"></span>
<Icon icon="star" aria-hidden="true" />
<span>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>
</div>
</div>
</div>

20
src/routes/products/functions/(components)/OpenSource.svelte
View File

@@ -5,6 +5,7 @@
import collaboration from '../(assets)/collaboration.svg';
import customization from '../(assets)/customization.svg';
import transparency from '../(assets)/transparency.svg';
import { GithubStats, DiscordLink } from '$lib/components/shared';
const items = [
{
@@ -66,23 +67,8 @@
<div
class="mx-auto mt-2 flex w-full flex-col items-center justify-center gap-2 md:flex-row"
>
<a
href={SOCIAL_STATS.GITHUB.LINK}
target="_blank"
rel="noopener noreferrer"
class="web-button is-secondary h-10 !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>
<a
class="web-button is-secondary h-10 !w-full md:!w-fit"
href="https://appwrite.io/discord"
>
<span class="web-icon-discord"></span>
<span class="text">Join Discord</span>
</a>
<GithubStats class="h-10 !w-full md:!w-fit" />
<DiscordLink class="h-10 !w-full md:!w-fit" />
</div>
</div>

12
src/routes/products/functions/(components)/Templates.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import Tooltip from '$lib/components/Tooltip.svelte';
import { Button } from '$lib/components/ui';
import { classNames } from '$lib/utils/classnames';
import Templates from '../(assets)/templates.png';
@@ -72,9 +73,10 @@
<div class="container mt-20 space-y-8">
<div class="flex items-center justify-between">
<h2 class="text-label text-primary font-aeonik-pro">Explore templates</h2>
<a
<Button
variant="secondary"
href="/docs/products/functions/templates"
class="web-button is-secondary !hidden md:!block">View all templates</a
class="!hidden md:!block">View all templates</Button
>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
@@ -119,10 +121,10 @@
</div>
{/each}
<a
<Button
variant="secondary"
href="/docs/products/functions/templates"
class="web-button is-secondary block !w-full md:!hidden md:!w-fit"
>View all templates</a
class="block !w-full md:!hidden md:!w-fit">View all templates</Button
>
</div>
</div>

9
src/routes/products/messaging/(components)/Schedule.svelte
View File

@@ -2,6 +2,7 @@
import { getLocalTimeZone, today } from '@internationalized/date';
import { createCalendar, melt } from '@melt-ui/svelte';
import Step from './Step.svelte';
import { Button } from '$lib/components/ui';
const curr = today(getLocalTimeZone());
@@ -29,13 +30,13 @@
<div class="text-label text-primary" use:melt={$heading}>
{$headingValue}
</div>
<button
class="web-button is-secondary"
on:click={() => value.set(curr)}
<Button
variant="secondary"
onclick={() => value.set(curr)}
style="height: min-content; padding-block: 0 !important;"
>
Today
</button>
</Button>
</div>
<button class="web-icon-button" use:melt={$nextButton}>
<div class="web-icon-chevron-right"></div>

3
src/routes/products/messaging/(components)/Target.svelte
View File

@@ -10,6 +10,7 @@
import { onMount } from 'svelte';
import { inView } from 'motion';
import { sleep } from '$lib/animations';
import { Button } from '$lib/components/ui';
/* Variables & Contstants */
const width = 2000;
@@ -361,7 +362,7 @@
<span style="font-size: 14px; color: #6C6C71;"
>{users.filter((u) => !!u.devices.some((d) => d.checked)).length} Users selected</span
>
<button class="web-button">Add</button>
<Button>Add</Button>
</div>
</div>
</div>

7
src/routes/products/messaging/+page.svelte
View File

@@ -10,6 +10,7 @@
import MultiCodeContextless from '$lib/components/MultiCodeContextless.svelte';
import { Platform } from '$lib/utils/references';
import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
import { Button } from '$lib/components/ui';
const title = 'Messaging' + TITLE_SUFFIX;
const description =
@@ -269,9 +270,9 @@ messaging.create_email(
directly to your users.
</p>
<div class="hero-buttons mt-8 flex items-center gap-2">
<a class="web-button" href={getAppwriteDashboardUrl()}>Get started</a>
<a class="web-button is-secondary" href="/docs/products/messaging"
>Documentation</a
<Button href={getAppwriteDashboardUrl()}>Get started</Button>
<Button variant="secondary" href="/docs/products/messaging"
>Documentation</Button
>
</div>
</div>

8
src/routes/products/storage/(components)/OpenSource.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import { Button } from '$lib/components/ui';
import { classNames } from '$lib/utils/classnames';
const items = [
@@ -28,14 +29,15 @@
Appwrite is a 100% open source project, giving you the flexibility and support you
need to get your project started.
</p>
<a
<Button
variant="secondary"
href="/"
target="_blank"
rel="noopener noreferrer"
class="web-button is-secondary mx-auto mt-4 !w-full md:!w-fit"
class="mx-auto mt-4 !w-full md:!w-fit"
>
<span>Join the community</span>
</a>
</Button>
</div>
</div>
</div>

11
src/routes/products/storage/(components)/Optimized.svelte
View File

@@ -1,3 +1,7 @@
<script>
import { Button } from '$lib/components/ui';
</script>
<section class="container grid grid-cols-1 place-items-center gap-16 pt-12 md:grid-cols-2 md:pt-20">
<div class="hidden md:block">
<img src="/images/pages/storage/product-shot-3.png" width="687" alt="" />
@@ -9,12 +13,13 @@
optimized upload times.
</p>
<div class="mt-8 flex gap-2">
<a
<Button
variant="secondary"
href="/docs/products/storage/images"
class="web-button is-secondary !w-full md:!w-fit"
class="!w-full md:!w-fit"
>
<span class="text">Learn more</span>
</a>
</Button>
</div>
</div>
<div class="block md:hidden">

6
src/routes/products/storage/(components)/Permissions.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import { Button } from '$lib/components/ui';
import ProductShot from './ProductShot.svelte';
</script>
@@ -13,9 +14,10 @@
<p class="text-body max-width-[380px] mx-auto font-medium">
Set up file encryption and granular user permissions in your storage infrastructure
</p>
<a
<Button
href="/docs/products/storage/permissions"
class="web-button is-secondary mx-auto mt-4 !w-full md:!w-fit">Learn more</a
variant="secondary"
class="mx-auto mt-4 !w-full md:!w-fit">Learn more</Button
>
</div>
</div>

8
src/routes/products/storage/(components)/PreviewFiles.svelte
View File

@@ -3,6 +3,7 @@
import ProductPreview from '../(assets)/product-preview.png';
import { Platform } from '$lib/utils/references';
import { Button } from '$lib/components/ui';
const snippet = [
{
@@ -35,12 +36,13 @@
managing different formats and compression algorithms.
</p>
<div class="mt-8 flex gap-2">
<a
<Button
variant="secondary"
href="/docs/products/storage/upload-download#get-file-preview"
class="web-button is-secondary !w-full md:!w-fit"
class="!w-full md:!w-fit"
>
<span class="text">Learn more</span>
</a>
</Button>
</div>
</div>
<div class="relative">

14
src/routes/products/storage/+page.svelte
View File

@@ -15,6 +15,7 @@
import HeroImage from './(assets)/hero-image.png';
import ProductCards from '$lib/components/product-pages/product-cards.svelte';
import Optimized from './(components)/Optimized.svelte';
import { Button } from '$lib/components/ui';
const title = 'Storage' + TITLE_SUFFIX;
const description =
@@ -83,14 +84,15 @@
Organize your buckets and files with ease in your dashboard, as well as
manage security, permissions, compression, and more.
</p>
<a
<Button
variant="secondary"
href="/docs/products/storage/buckets"
target="_blank"
rel="noopener noreferrer"
class="web-button is-secondary mx-auto mt-4 !w-full md:!w-fit"
class="mx-auto mt-4 !w-full md:!w-fit"
>
<span>Learn more</span>
</a>
</Button>
</div>
</div>
</div>
@@ -169,14 +171,14 @@
Appwrite's Storage APIs allow you to create and update your files,
apply image transformations, and more.
</p>
<a
<Button
href="/docs/references/cloud/client-web/storage"
target="_blank"
rel="noopener noreferrer"
class="web-button mt-4 !w-full md:!w-fit"
class="mt-4 !w-full md:!w-fit"
>
<span>View docs</span>
</a>
</Button>
</div>
<WhatYouCanDo />
</div>

6
src/routes/products/storage/EventCard.svelte
View File

@@ -15,6 +15,8 @@
</script>
<script lang="ts">
import { Button } from '$lib/components/ui';
type $$Props = EventCardProps;
export let href: $$Props['href'];
@@ -53,9 +55,9 @@
{description}
</p>
<div class="u-flex u-flex-wrap u-gap-8 u-padding-block-start-16 mbs-auto">
<button class="web-button is-secondary">
<Button variant="secondary">
<span>{buttonText}</span>
</button>
</Button>
</div>
</div>
</a>