From 2a5331959b78dd30ff3f84106348b4b0b3d4e8c8 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Tue, 1 Apr 2025 13:39:45 -0400 Subject: [PATCH 01/25] upgrade typescript --- package.json | 2 +- pnpm-lock.yaml | 2 +- src/lib/components/AppwriteIn100Seconds.svelte | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d7b115177e..eabd201543 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "tailwind-merge": "^3.0.2", "tailwindcss": "^4.0.17", "tslib": "^2.8.1", - "typescript": "^5.7.3", + "typescript": "^5.8.2", "typescript-eslint": "^8.21.0", "vite": "^6.2.4", "vite-plugin-dynamic-import": "^1.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc5978ff36..0596702e3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -196,7 +196,7 @@ importers: specifier: ^2.8.1 version: 2.8.1 typescript: - specifier: ^5.7.3 + specifier: ^5.8.2 version: 5.8.2 typescript-eslint: specifier: ^8.21.0 diff --git a/src/lib/components/AppwriteIn100Seconds.svelte b/src/lib/components/AppwriteIn100Seconds.svelte index 6f9db50374..1f5e5ec60d 100644 --- a/src/lib/components/AppwriteIn100Seconds.svelte +++ b/src/lib/components/AppwriteIn100Seconds.svelte @@ -1,7 +1,7 @@ - - + Appwrite in 100 seconds + {#if $open}
diff --git a/src/lib/components/BlogCta.svelte b/src/lib/components/BlogCta.svelte index a89c80db06..f89f085ebd 100644 --- a/src/lib/components/BlogCta.svelte +++ b/src/lib/components/BlogCta.svelte @@ -1,5 +1,6 @@ - + onclick={() => trackEvent({ plausible: { name: `${getTrackingEventName()} in header` }, ...(isLoggedIn ? {} : { posthog: { name: 'get-started-btn_nav_click' } }) })} > - - Start building - + + Start building + diff --git a/src/lib/components/MobileNav.svelte b/src/lib/components/MobileNav.svelte index 249cf4f1a6..984de07dac 100644 --- a/src/lib/components/MobileNav.svelte +++ b/src/lib/components/MobileNav.svelte @@ -21,7 +21,7 @@ Sign up - +
diff --git a/src/lib/components/MultiCodeContextless.svelte b/src/lib/components/MultiCodeContextless.svelte index 016492ce7e..fe932b2d83 100644 --- a/src/lib/components/MultiCodeContextless.svelte +++ b/src/lib/components/MultiCodeContextless.svelte @@ -5,16 +5,20 @@ import { platformMap } from '$lib/utils/references'; import { writable } from 'svelte/store'; - export let selected: Language = 'js'; - export let data: { language: string; content: string; platform?: string }[] = []; - export let width: number | null = null; - export let height: number | null = null; + interface Props { + selected?: Language; + data?: { language: string; content: string; platform?: string }[]; + width?: number | null; + height?: number | null; + } + + let { selected = $bindable('js'), data = [], width = null, height = null }: Props = $props(); - $: snippets = writable(new Set(data.map((d) => d.language))); + let snippets = $derived(writable(new Set(data.map((d) => d.language)))); - $: content = data.find((d) => d.language === selected)?.content ?? ''; + let content = $derived(data.find((d) => d.language === selected)?.content ?? ''); - $: platform = data.find((d) => d.language === selected)?.platform ?? ''; + let platform = $derived(data.find((d) => d.language === selected)?.platform ?? ''); snippets?.subscribe((n) => { if (selected === null && n.size > 0) { @@ -27,7 +31,10 @@ Copied: 'Copied!' } as const; - let copyText = CopyStatus.Copy; + type CopyStatusType = keyof typeof CopyStatus; + type CopyStatusValue = (typeof CopyStatus)[CopyStatusType]; + + let copyText = $state(CopyStatus.Copy); async function handleCopy() { await copy(content); @@ -37,15 +44,19 @@ }, 1000); } - $: result = getCodeHtml({ - content, - language: selected ?? 'sh', - withLineNumbers: true - }); - $: options = Array.from($snippets).map((language) => ({ - value: language, - label: platformMap[language] - })); + let result = $derived( + getCodeHtml({ + content, + language: selected ?? 'sh', + withLineNumbers: true + }) + ); + let options = $derived( + Array.from($snippets).map((language) => ({ + value: language, + label: platformMap[language] + })) + );
- + {#snippet tooltip()} {copyText} - + {/snippet} diff --git a/src/lib/components/ui/button.svelte b/src/lib/components/ui/button.svelte index 5d73315d70..04a1a6f764 100644 --- a/src/lib/components/ui/button.svelte +++ b/src/lib/components/ui/button.svelte @@ -4,8 +4,9 @@ import { cva, type VariantProps } from 'cva'; import type { Action } from 'svelte/action'; import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'; - import { createBubbler } from 'svelte/legacy'; import InlineTag from './inline-tag.svelte'; + import type { Snippet } from 'svelte'; + import { type IconType, Icon } from '$lib/components/ui'; // TODO: replace _button.scss with Tailwind classes for long-term maintainability const button = cva(['web-button'], { @@ -13,7 +14,8 @@ variant: { primary: [''], secondary: ['is-secondary'], - text: ['is-text'] + text: ['is-text'], + transparent: ['is-transparent'] } } }); @@ -29,31 +31,28 @@ | [Action, any]; } & { element?: AnyMeltElement }; - interface Props { - href?: $$Props['href']; + type Props = $$Props & { variant?: $$Props['variant']; use?: $$Props['use']; - element?: AnyMeltElement | undefined; - icon?: import('svelte').Snippet; - children: import('svelte').Snippet; - tag?: import('svelte').Snippet; - [key: string]: any; - } + element?: AnyMeltElement; + icon?: IconType; + children: Snippet; + tag?: Snippet; + }; const { - href = undefined, + href, variant = 'primary', use = undefined, - element = undefined, + element, icon, children, tag, + class: classes, ...rest }: Props = $props(); - let meltElement = $derived(element ?? emptyMeltElement); - - const { class: classes, href: _ } = rest; + let meltElement = $derived(element ?? emptyMeltElement); const buttonClasses = classNames(button({ variant }), classes); const applyAction = (node: HTMLButtonElement | HTMLAnchorElement) => { @@ -70,10 +69,20 @@ }; +{#snippet iconElement(type: IconType)} + +{/snippet} + {#if href} - + {#if icon} - {@render icon()} + {@render iconElement(icon)} {/if} {@render children()} {#if tag} @@ -83,9 +92,14 @@ {/if} {:else} -
A great fit for passion projects and small applications.

- + class="web-u-cross-child-end w-full! md:w-fit" + onclick={() => trackEvent({ plausible: { name: 'Get started Free plan' @@ -55,7 +62,7 @@ })} > Get started - +
  • @@ -77,21 +84,20 @@ For production applications that need powerful functionality and resources to scale.

    - + onclick={() => trackEvent({ plausible: { name: 'Get started Pro plan' } })} > - Start building - +
  • @@ -110,12 +116,13 @@ For teams that handle more complex and large projects and need more control and support.

    - + onclick={() => trackEvent({ plausible: { name: 'Get started Scale plan' @@ -123,7 +130,7 @@ })} > Start building - +
  • @@ -139,12 +146,13 @@

    For enterprises that need more power and premium support.

    - + onclick={() => trackEvent({ plausible: { name: 'Get started Scale plan' @@ -152,7 +160,7 @@ })} > Contact us - +
    • diff --git a/src/lib/components/ui/button.svelte b/src/lib/components/ui/button.svelte index 04a1a6f764..5f9bb3ea9f 100644 --- a/src/lib/components/ui/button.svelte +++ b/src/lib/components/ui/button.svelte @@ -1,12 +1,12 @@ -{#snippet iconElement(type: IconType)} - -{/snippet} - {#if href} - + {#if icon} - {@render iconElement(icon)} + {@render icon()} {/if} {@render children()} {#if tag} - - {@render tag()} - + {@render tag()} {/if} {:else} - {/if} diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte index 04ed3f0f89..d987066577 100644 --- a/src/lib/layouts/Docs.svelte +++ b/src/lib/layouts/Docs.svelte @@ -46,6 +46,7 @@ import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants'; import { page } from '$app/stores'; 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,19 @@
    - - Go to Console - - + +
    - - - Star on GitHub - {GITHUB_STARS} - +
    diff --git a/src/routes/threads/+page.svelte b/src/routes/threads/+page.svelte index 89c36c6a85..c8b5a06d06 100644 --- a/src/routes/threads/+page.svelte +++ b/src/routes/threads/+page.svelte @@ -1,14 +1,14 @@ +
    @@ -8,19 +12,17 @@

    Get community support by joining our Discord server.

    - - - Join Discord - +

    Get premium support

    Join Appwrite Pro and get email support from our team.

    - - Learn more - +
    From e720877da805402a1d3256919b7d45a456cbf531 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Fri, 4 Apr 2025 09:18:57 -0400 Subject: [PATCH 06/25] update --- package.json | 4 +- pnpm-lock.yaml | 132 ++++++++++++++-------------- src/lib/components/ui/select.svelte | 27 ++++++ 3 files changed, 95 insertions(+), 68 deletions(-) create mode 100644 src/lib/components/ui/select.svelte diff --git a/package.json b/package.json index cd96f5fd77..2b3eb00700 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "@sveltejs/enhanced-img": "^0.4.4", "@sveltejs/kit": "^2.20.2", "@sveltejs/vite-plugin-svelte": "^5.0.3", - "@tailwindcss/postcss": "^4.0.17", + "@tailwindcss/postcss": "^4.1.2", "@types/compression": "^1.7.5", "@types/glob": "^8.1.0", "@types/markdown-it": "^13.0.9", @@ -89,7 +89,7 @@ "svelte-markdown": "^0.4.1", "svgtofont": "^4.2.3", "tailwind-merge": "^3.0.2", - "tailwindcss": "^4.0.17", + "tailwindcss": "^4.1.2", "tslib": "^2.8.1", "typescript": "^5.8.2", "typescript-eslint": "^8.21.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26e76f7cec..f395f47651 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -70,8 +70,8 @@ importers: specifier: ^5.0.3 version: 5.0.3(svelte@5.25.6)(vite@6.2.4(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.85.1)(yaml@2.7.0)) '@tailwindcss/postcss': - specifier: ^4.0.17 - version: 4.0.17 + specifier: ^4.1.2 + version: 4.1.2 '@types/compression': specifier: ^1.7.5 version: 1.7.5 @@ -193,8 +193,8 @@ importers: specifier: ^3.0.2 version: 3.0.2 tailwindcss: - specifier: ^4.0.17 - version: 4.0.17 + specifier: ^4.1.2 + version: 4.1.2 tslib: specifier: ^2.8.1 version: 2.8.1 @@ -1316,81 +1316,81 @@ packages: '@swc/helpers@0.5.15': resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==} - '@tailwindcss/node@4.0.17': - resolution: {integrity: sha512-LIdNwcqyY7578VpofXyqjH6f+3fP4nrz7FBLki5HpzqjYfXdF2m/eW18ZfoKePtDGg90Bvvfpov9d2gy5XVCbg==} + '@tailwindcss/node@4.1.2': + resolution: {integrity: sha512-ZwFnxH+1z8Ehh8bNTMX3YFrYdzAv7JLY5X5X7XSFY+G9QGJVce/P9xb2mh+j5hKt8NceuHmdtllJvAHWKtsNrQ==} - '@tailwindcss/oxide-android-arm64@4.0.17': - resolution: {integrity: sha512-3RfO0ZK64WAhop+EbHeyxGThyDr/fYhxPzDbEQjD2+v7ZhKTb2svTWy+KK+J1PHATus2/CQGAGp7pHY/8M8ugg==} + '@tailwindcss/oxide-android-arm64@4.1.2': + resolution: {integrity: sha512-IxkXbntHX8lwGmwURUj4xTr6nezHhLYqeiJeqa179eihGv99pRlKV1W69WByPJDQgSf4qfmwx904H6MkQqTA8w==} engines: {node: '>= 10'} cpu: [arm64] os: [android] - '@tailwindcss/oxide-darwin-arm64@4.0.17': - resolution: {integrity: sha512-e1uayxFQCCDuzTk9s8q7MC5jFN42IY7nzcr5n0Mw/AcUHwD6JaBkXnATkD924ZsHyPDvddnusIEvkgLd2CiREg==} + '@tailwindcss/oxide-darwin-arm64@4.1.2': + resolution: {integrity: sha512-ZRtiHSnFYHb4jHKIdzxlFm6EDfijTCOT4qwUhJ3GWxfDoW2yT3z/y8xg0nE7e72unsmSj6dtfZ9Y5r75FIrlpA==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] - '@tailwindcss/oxide-darwin-x64@4.0.17': - resolution: {integrity: sha512-d6z7HSdOKfXQ0HPlVx1jduUf/YtBuCCtEDIEFeBCzgRRtDsUuRtofPqxIVaSCUTOk5+OfRLonje6n9dF6AH8wQ==} + '@tailwindcss/oxide-darwin-x64@4.1.2': + resolution: {integrity: sha512-BiKUNZf1A0pBNzndBvnPnBxonCY49mgbOsPfILhcCE5RM7pQlRoOgN7QnwNhY284bDbfQSEOWnFR0zbPo6IDTw==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] - '@tailwindcss/oxide-freebsd-x64@4.0.17': - resolution: {integrity: sha512-EjrVa6lx3wzXz3l5MsdOGtYIsRjgs5Mru6lDv4RuiXpguWeOb3UzGJ7vw7PEzcFadKNvNslEQqoAABeMezprxQ==} + '@tailwindcss/oxide-freebsd-x64@4.1.2': + resolution: {integrity: sha512-Z30VcpUfRGkiddj4l5NRCpzbSGjhmmklVoqkVQdkEC0MOelpY+fJrVhzSaXHmWrmSvnX8yiaEqAbdDScjVujYQ==} engines: {node: '>= 10'} cpu: [x64] os: [freebsd] - '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.17': - resolution: {integrity: sha512-65zXfCOdi8wuaY0Ye6qMR5LAXokHYtrGvo9t/NmxvSZtCCitXV/gzJ/WP5ksXPhff1SV5rov0S+ZIZU+/4eyCQ==} + '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.2': + resolution: {integrity: sha512-w3wsK1ChOLeQ3gFOiwabtWU5e8fY3P1Ss8jR3IFIn/V0va3ir//hZ8AwURveS4oK1Pu6b8i+yxesT4qWnLVUow==} engines: {node: '>= 10'} cpu: [arm] os: [linux] - '@tailwindcss/oxide-linux-arm64-gnu@4.0.17': - resolution: {integrity: sha512-+aaq6hJ8ioTdbJV5IA1WjWgLmun4T7eYLTvJIToiXLHy5JzUERRbIZjAcjgK9qXMwnvuu7rqpxzej+hGoEcG5g==} + '@tailwindcss/oxide-linux-arm64-gnu@4.1.2': + resolution: {integrity: sha512-oY/u+xJHpndTj7B5XwtmXGk8mQ1KALMfhjWMMpE8pdVAznjJsF5KkCceJ4Fmn5lS1nHMCwZum5M3/KzdmwDMdw==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@tailwindcss/oxide-linux-arm64-musl@4.0.17': - resolution: {integrity: sha512-/FhWgZCdUGAeYHYnZKekiOC0aXFiBIoNCA0bwzkICiMYS5Rtx2KxFfMUXQVnl4uZRblG5ypt5vpPhVaXgGk80w==} + '@tailwindcss/oxide-linux-arm64-musl@4.1.2': + resolution: {integrity: sha512-k7G6vcRK/D+JOWqnKzKN/yQq1q4dCkI49fMoLcfs2pVcaUAXEqCP9NmA8Jv+XahBv5DtDjSAY3HJbjosEdKczg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@tailwindcss/oxide-linux-x64-gnu@4.0.17': - resolution: {integrity: sha512-gELJzOHK6GDoIpm/539Golvk+QWZjxQcbkKq9eB2kzNkOvrP0xc5UPgO9bIMNt1M48mO8ZeNenCMGt6tfkvVBg==} + '@tailwindcss/oxide-linux-x64-gnu@4.1.2': + resolution: {integrity: sha512-fLL+c678TkYKgkDLLNxSjPPK/SzTec7q/E5pTwvpTqrth867dftV4ezRyhPM5PaiCqX651Y8Yk0wRQMcWUGnmQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@tailwindcss/oxide-linux-x64-musl@4.0.17': - resolution: {integrity: sha512-68NwxcJrZn94IOW4TysMIbYv5AlM6So1luTlbYUDIGnKma1yTFGBRNEJ+SacJ3PZE2rgcTBNRHX1TB4EQ/XEHw==} + '@tailwindcss/oxide-linux-x64-musl@4.1.2': + resolution: {integrity: sha512-0tU1Vjd1WucZ2ooq6y4nI9xyTSaH2g338bhrqk+2yzkMHskBm+pMsOCfY7nEIvALkA1PKPOycR4YVdlV7Czo+A==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@tailwindcss/oxide-win32-arm64-msvc@4.0.17': - resolution: {integrity: sha512-AkBO8efP2/7wkEXkNlXzRD4f/7WerqKHlc6PWb5v0jGbbm22DFBLbIM19IJQ3b+tNewQZa+WnPOaGm0SmwMNjw==} + '@tailwindcss/oxide-win32-arm64-msvc@4.1.2': + resolution: {integrity: sha512-r8QaMo3QKiHqUcn+vXYCypCEha+R0sfYxmaZSgZshx9NfkY+CHz91aS2xwNV/E4dmUDkTPUag7sSdiCHPzFVTg==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] - '@tailwindcss/oxide-win32-x64-msvc@4.0.17': - resolution: {integrity: sha512-7/DTEvXcoWlqX0dAlcN0zlmcEu9xSermuo7VNGX9tJ3nYMdo735SHvbrHDln1+LYfF6NhJ3hjbpbjkMOAGmkDg==} + '@tailwindcss/oxide-win32-x64-msvc@4.1.2': + resolution: {integrity: sha512-lYCdkPxh9JRHXoBsPE8Pu/mppUsC2xihYArNAESub41PKhHTnvn6++5RpmFM+GLSt3ewyS8fwCVvht7ulWm6cw==} engines: {node: '>= 10'} cpu: [x64] os: [win32] - '@tailwindcss/oxide@4.0.17': - resolution: {integrity: sha512-B4OaUIRD2uVrULpAD1Yksx2+wNarQr2rQh65nXqaqbLY1jCd8fO+3KLh/+TH4Hzh2NTHQvgxVbPdUDOtLk7vAw==} + '@tailwindcss/oxide@4.1.2': + resolution: {integrity: sha512-Zwz//1QKo6+KqnCKMT7lA4bspGfwEgcPAHlSthmahtgrpKDfwRGk8PKQrW8Zg/ofCDIlg6EtjSTKSxxSufC+CQ==} engines: {node: '>= 10'} - '@tailwindcss/postcss@4.0.17': - resolution: {integrity: sha512-qeJbRTB5FMZXmuJF+eePd235EGY6IyJZF0Bh0YM6uMcCI4L9Z7dy+lPuLAhxOJzxnajsbjPoDAKOuAqZRtf1PQ==} + '@tailwindcss/postcss@4.1.2': + resolution: {integrity: sha512-vgkMo6QRhG6uv97im6Y4ExDdq71y9v2IGZc+0wn7lauQFYJM/1KdUVhrOkexbUso8tUsMOWALxyHVkQEbsM7gw==} '@tokenizer/token@0.3.0': resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==} @@ -3518,8 +3518,8 @@ packages: tailwind-merge@3.0.2: resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==} - tailwindcss@4.0.17: - resolution: {integrity: sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw==} + tailwindcss@4.1.2: + resolution: {integrity: sha512-VCsK+fitIbQF7JlxXaibFhxrPq4E2hDcG8apzHUdWFMCQWD8uLdlHg4iSkZ53cgLCCcZ+FZK7vG8VjvLcnBgKw==} tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} @@ -4889,67 +4889,67 @@ snapshots: dependencies: tslib: 2.8.1 - '@tailwindcss/node@4.0.17': + '@tailwindcss/node@4.1.2': dependencies: enhanced-resolve: 5.18.1 jiti: 2.4.2 - tailwindcss: 4.0.17 + lightningcss: 1.29.2 + tailwindcss: 4.1.2 - '@tailwindcss/oxide-android-arm64@4.0.17': + '@tailwindcss/oxide-android-arm64@4.1.2': optional: true - '@tailwindcss/oxide-darwin-arm64@4.0.17': + '@tailwindcss/oxide-darwin-arm64@4.1.2': optional: true - '@tailwindcss/oxide-darwin-x64@4.0.17': + '@tailwindcss/oxide-darwin-x64@4.1.2': optional: true - '@tailwindcss/oxide-freebsd-x64@4.0.17': + '@tailwindcss/oxide-freebsd-x64@4.1.2': optional: true - '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.17': + '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.2': optional: true - '@tailwindcss/oxide-linux-arm64-gnu@4.0.17': + '@tailwindcss/oxide-linux-arm64-gnu@4.1.2': optional: true - '@tailwindcss/oxide-linux-arm64-musl@4.0.17': + '@tailwindcss/oxide-linux-arm64-musl@4.1.2': optional: true - '@tailwindcss/oxide-linux-x64-gnu@4.0.17': + '@tailwindcss/oxide-linux-x64-gnu@4.1.2': optional: true - '@tailwindcss/oxide-linux-x64-musl@4.0.17': + '@tailwindcss/oxide-linux-x64-musl@4.1.2': optional: true - '@tailwindcss/oxide-win32-arm64-msvc@4.0.17': + '@tailwindcss/oxide-win32-arm64-msvc@4.1.2': optional: true - '@tailwindcss/oxide-win32-x64-msvc@4.0.17': + '@tailwindcss/oxide-win32-x64-msvc@4.1.2': optional: true - '@tailwindcss/oxide@4.0.17': + '@tailwindcss/oxide@4.1.2': optionalDependencies: - '@tailwindcss/oxide-android-arm64': 4.0.17 - '@tailwindcss/oxide-darwin-arm64': 4.0.17 - '@tailwindcss/oxide-darwin-x64': 4.0.17 - '@tailwindcss/oxide-freebsd-x64': 4.0.17 - '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.17 - '@tailwindcss/oxide-linux-arm64-gnu': 4.0.17 - '@tailwindcss/oxide-linux-arm64-musl': 4.0.17 - '@tailwindcss/oxide-linux-x64-gnu': 4.0.17 - '@tailwindcss/oxide-linux-x64-musl': 4.0.17 - '@tailwindcss/oxide-win32-arm64-msvc': 4.0.17 - '@tailwindcss/oxide-win32-x64-msvc': 4.0.17 - - '@tailwindcss/postcss@4.0.17': + '@tailwindcss/oxide-android-arm64': 4.1.2 + '@tailwindcss/oxide-darwin-arm64': 4.1.2 + '@tailwindcss/oxide-darwin-x64': 4.1.2 + '@tailwindcss/oxide-freebsd-x64': 4.1.2 + '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.2 + '@tailwindcss/oxide-linux-arm64-gnu': 4.1.2 + '@tailwindcss/oxide-linux-arm64-musl': 4.1.2 + '@tailwindcss/oxide-linux-x64-gnu': 4.1.2 + '@tailwindcss/oxide-linux-x64-musl': 4.1.2 + '@tailwindcss/oxide-win32-arm64-msvc': 4.1.2 + '@tailwindcss/oxide-win32-x64-msvc': 4.1.2 + + '@tailwindcss/postcss@4.1.2': dependencies: '@alloc/quick-lru': 5.2.0 - '@tailwindcss/node': 4.0.17 - '@tailwindcss/oxide': 4.0.17 - lightningcss: 1.29.2 + '@tailwindcss/node': 4.1.2 + '@tailwindcss/oxide': 4.1.2 postcss: 8.5.3 - tailwindcss: 4.0.17 + tailwindcss: 4.1.2 '@tokenizer/token@0.3.0': {} @@ -7199,7 +7199,7 @@ snapshots: tailwind-merge@3.0.2: {} - tailwindcss@4.0.17: {} + tailwindcss@4.1.2: {} tapable@2.2.1: {} diff --git a/src/lib/components/ui/select.svelte b/src/lib/components/ui/select.svelte new file mode 100644 index 0000000000..481d65adae --- /dev/null +++ b/src/lib/components/ui/select.svelte @@ -0,0 +1,27 @@ + + + + +
    + {#each options as option} +
    + {option} +
    + {/each} +
    From 801176923cd6e8c4a90dd9450cd4edd3da3465b6 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Fri, 4 Apr 2025 10:33:12 -0400 Subject: [PATCH 07/25] update --- src/lib/components/ThemeSelect.svelte | 4 +++- src/lib/components/ui/index.ts | 1 + src/lib/components/ui/select.svelte | 21 ++++++++++++++++----- src/routes/+layout.svelte | 27 +++++---------------------- 4 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/lib/components/ThemeSelect.svelte b/src/lib/components/ThemeSelect.svelte index 3bb3f7ce96..f564c2c9ce 100644 --- a/src/lib/components/ThemeSelect.svelte +++ b/src/lib/components/ThemeSelect.svelte @@ -2,8 +2,9 @@ import { type Theme, currentTheme } from '$routes/+layout.svelte'; import Select, { type SelectOption } from './Select.svelte'; + import { Select as S } from '$lib/components/ui'; - const options: SelectOption[] = [ + const options = [ { value: 'dark', label: 'Dark', @@ -23,3 +24,4 @@ - + diff --git a/src/lib/components/ui/select.svelte b/src/lib/components/ui/select.svelte index 6022b2f194..64a548ee4e 100644 --- a/src/lib/components/ui/select.svelte +++ b/src/lib/components/ui/select.svelte @@ -1,5 +1,7 @@ - diff --git a/src/lib/providers/theme/constants.ts b/src/lib/providers/theme/constants.ts new file mode 100644 index 0000000000..12ce7442af --- /dev/null +++ b/src/lib/providers/theme/constants.ts @@ -0,0 +1,2 @@ +export const colorSchemes = ['light', 'dark']; +export const MEDIA = '(prefers-color-scheme: dark)'; diff --git a/src/lib/providers/theme/helpers.ts b/src/lib/providers/theme/helpers.ts new file mode 100644 index 0000000000..c6819aecc5 --- /dev/null +++ b/src/lib/providers/theme/helpers.ts @@ -0,0 +1,43 @@ +import type { Theme } from '.'; +import { MEDIA } from './constants'; + +export const getTheme = (key: string, fallback?: string): Theme | undefined => { + if (typeof window === 'undefined') return undefined; + let theme: Theme | undefined = undefined; + try { + theme = localStorage.getItem(key) as Theme || undefined; + } catch (e) { + // Unsupported + } + return theme || fallback as Theme; +}; + +export const disableAnimation = () => { + const css = document.createElement('style'); + css.appendChild( + document.createTextNode( + `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}` + ) + ); + document.head.appendChild(css); + + return () => { + // Force restyle + (() => window.getComputedStyle(document.body))(); + + // Wait for next tick before removing + setTimeout(() => { + document.head.removeChild(css); + }, 1); + }; +}; + +export const getSystemTheme = (e?: MediaQueryList): string => { + if (!e) { + e = window.matchMedia(MEDIA); + } + + const isDark = e.matches; + const systemTheme = isDark ? 'dark' : 'light'; + return systemTheme; +}; diff --git a/src/lib/providers/theme/index.ts b/src/lib/providers/theme/index.ts new file mode 100644 index 0000000000..e27d49c258 --- /dev/null +++ b/src/lib/providers/theme/index.ts @@ -0,0 +1,24 @@ +import { writable } from 'svelte/store'; + +export type Theme = 'dark' | 'light' | 'system'; + +export interface ThemeStore { + themes: string[]; + forcedTheme?: Theme; + theme?: Theme; + resolvedTheme?: string; + systemTheme?: Omit; +} + +export const setTheme = (theme?: Theme): void => + themeStore.update((store) => ({ ...store, theme })); + +export const themeStore = writable({ + themes: [], + forcedTheme: undefined, + theme: undefined, + resolvedTheme: undefined, + systemTheme: undefined +}); + +export { default as ThemeProvider } from './theme.svelte' \ No newline at end of file diff --git a/src/lib/providers/theme/theme-script.svelte b/src/lib/providers/theme/theme-script.svelte new file mode 100644 index 0000000000..2ba32988e9 --- /dev/null +++ b/src/lib/providers/theme/theme-script.svelte @@ -0,0 +1,70 @@ + + + + {@html themeScript} + diff --git a/src/lib/providers/theme/theme.svelte b/src/lib/providers/theme/theme.svelte new file mode 100644 index 0000000000..1d6564c0b3 --- /dev/null +++ b/src/lib/providers/theme/theme.svelte @@ -0,0 +1,143 @@ + + + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 502c84bf99..9c2fbf973e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,7 @@ - + { + setTheme(e as Theme); + }} +/> diff --git a/src/lib/providers/theme/index.ts b/src/lib/providers/theme/index.ts index e27d49c258..e4e5430e20 100644 --- a/src/lib/providers/theme/index.ts +++ b/src/lib/providers/theme/index.ts @@ -21,4 +21,5 @@ export const themeStore = writable({ systemTheme: undefined }); + export { default as ThemeProvider } from './theme.svelte' \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9c2fbf973e..6c04464196 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,48 +1,6 @@ diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6c04464196..ee1da29f90 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -132,7 +132,7 @@ > - + diff --git a/src/routes/init-0/tickets/customize/+page.svelte b/src/routes/init-0/tickets/customize/+page.svelte index f88e8d24c6..eca89572dc 100644 --- a/src/routes/init-0/tickets/customize/+page.svelte +++ b/src/routes/init-0/tickets/customize/+page.svelte @@ -10,6 +10,7 @@ import Ticket from '../../(components)/Ticket.svelte'; import Form from './form.svelte'; import type { TicketVariant } from '../constants'; + import { Button, Icon } from '$lib/components/ui'; let { data } = $props(); @@ -121,18 +122,19 @@
    - - +
    diff --git a/src/routes/init-0/tickets/customize/form.svelte b/src/routes/init-0/tickets/customize/form.svelte index 71ef88ec3c..0be89cbf66 100644 --- a/src/routes/init-0/tickets/customize/form.svelte +++ b/src/routes/init-0/tickets/customize/form.svelte @@ -34,6 +34,7 @@ import type { PageData } from './$types'; import TribeToggle from './tribe-toggle.svelte'; import { getAppwriteDashboardUrl } from '$lib/utils/dashboard'; + import { Button, Icon } from '$lib/components/ui'; export let name = ''; export let tribe: string | null = null; @@ -92,30 +93,28 @@ {#if dev} - + {/if} {:else}

    Integrate your GitHub account

    Sign in with your GitHub account and see the magic happen in your ticket.

    - + {/if}
    @@ -134,13 +133,14 @@

    Sign in with your Appwrite account and see the magic happen in your ticket.

    - -
    + Log in to Appwrite account -     + {/if}
    diff --git a/src/routes/integrations/+page.svelte b/src/routes/integrations/+page.svelte index 9a2c3ac1e7..f506b4093e 100644 --- a/src/routes/integrations/+page.svelte +++ b/src/routes/integrations/+page.svelte @@ -14,6 +14,7 @@ import { onDestroy, onMount } from 'svelte'; import { writable } from 'svelte/store'; import type { Integration } from './+page'; + import { Button } from '$lib/components/ui'; let { data } = $props(); @@ -388,12 +389,13 @@ {/if} {/each} - Show more - + {/if} @@ -429,12 +431,9 @@ Join our Technology Partners program to integrate your solutions with Appwrite’s API, enhancing functionality and expanding your reach.

    - + diff --git a/src/routes/integrations/technology-partner/+page.svelte b/src/routes/integrations/technology-partner/+page.svelte index 72e159ed16..2879794b72 100644 --- a/src/routes/integrations/technology-partner/+page.svelte +++ b/src/routes/integrations/technology-partner/+page.svelte @@ -9,6 +9,7 @@ import Pink from './bg.png'; import { getReferrerAndUtmSource } from '$lib/utils/utm'; import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public'; + import { Button } from '$lib/components/ui'; let email = ''; let name = ''; @@ -109,12 +110,13 @@ team will try to get back to you as soon as possible.

    - Back to integrations - + {:else}
    @@ -336,13 +338,13 @@ {error} {/if}

    - + {/if} diff --git a/src/routes/oss-program/+page.svelte b/src/routes/oss-program/+page.svelte index 3a2f0c7247..12105fdb3f 100644 --- a/src/routes/oss-program/+page.svelte +++ b/src/routes/oss-program/+page.svelte @@ -8,6 +8,7 @@ import GradientBackground from './bg.png'; import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public'; import { getReferrerAndUtmSource } from '$lib/utils/utm'; + import { Button } from '$lib/components/ui'; let personName = ''; let personEmail = ''; @@ -96,12 +97,9 @@ Your application has been sent. Our team will try to get back to you as soon as possible.

    - +
    {:else}
    @@ -242,13 +240,13 @@ {error} {/if}

    - + {/if} diff --git a/src/routes/partners/(components)/benefits.svelte b/src/routes/partners/(components)/benefits.svelte index a8adc99580..e1a65a48a8 100644 --- a/src/routes/partners/(components)/benefits.svelte +++ b/src/routes/partners/(components)/benefits.svelte @@ -8,6 +8,7 @@ import Experience from '../(assets)/icons/experience.svg'; import Expert from '../(assets)/icons/expert.svg'; import Ship from '../(assets)/icons/ship.svg'; + import { Button } from '$lib/components/ui'; const items = [ { @@ -172,7 +173,9 @@ - Become a partner +
    @@ -196,5 +199,7 @@
    - Become a partner + diff --git a/src/routes/partners/(components)/hero.svelte b/src/routes/partners/(components)/hero.svelte index 7ef6ff3f6e..3342c4329c 100644 --- a/src/routes/partners/(components)/hero.svelte +++ b/src/routes/partners/(components)/hero.svelte @@ -1,4 +1,5 @@ @@ -25,11 +26,8 @@

    - - Become a PartnerBecome a Partner
    diff --git a/src/routes/partners/(components)/partners.svelte b/src/routes/partners/(components)/partners.svelte index 407b9ebeac..605203aae4 100644 --- a/src/routes/partners/(components)/partners.svelte +++ b/src/routes/partners/(components)/partners.svelte @@ -6,6 +6,7 @@ import Gold from '../(assets)/icons/gold.png'; import Silver from '../(assets)/icons/silver.png'; import { clamp } from '$lib/utils/clamp'; + import { Button } from '$lib/components/ui'; let animate: boolean = false; @@ -57,8 +58,8 @@
    - Become a PartnerBecome a Partner
    diff --git a/src/routes/partners/(components)/submission-form.svelte b/src/routes/partners/(components)/submission-form.svelte index 58e79926c5..f831b60b9c 100644 --- a/src/routes/partners/(components)/submission-form.svelte +++ b/src/routes/partners/(components)/submission-form.svelte @@ -1,5 +1,6 @@ - - - Star on GitHub - {SOCIAL_STATS.GITHUB.STAT} - - - - Join Discord - + + diff --git a/src/routes/products/auth/(components)/SSR.svelte b/src/routes/products/auth/(components)/SSR.svelte index fef2312db5..2d936c1a3d 100644 --- a/src/routes/products/auth/(components)/SSR.svelte +++ b/src/routes/products/auth/(components)/SSR.svelte @@ -2,6 +2,7 @@ import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; import { trackEvent } from '$lib/actions/analytics'; import { Tooltip } from '$lib/components'; + import { Button } from '$lib/components/ui'; import { Framework, Platform } from '$lib/utils/references'; import MultiFrameworkCode from './MultiFrameworkCode.svelte'; @@ -176,7 +177,7 @@ async function getLoggedInUser(request) { {/each} - Learn more + diff --git a/src/routes/products/auth/(components)/UseCases.svelte b/src/routes/products/auth/(components)/UseCases.svelte index da2b9b41f9..d7ddebffa3 100644 --- a/src/routes/products/auth/(components)/UseCases.svelte +++ b/src/routes/products/auth/(components)/UseCases.svelte @@ -9,6 +9,7 @@ import Supabase from '../(assets)/platforms/supabase.svg'; import Firebase from '../(assets)/platforms/firebase.svg'; import { classNames } from '$lib/utils/classnames'; + import { Button } from '$lib/components/ui'; const platforms = [ { icon: Android, size: 24 }, @@ -26,7 +27,7 @@ class="container grid items-stretch gap-y-8 divide-[#19191C]/4 [grid-gap:initial] md:divide-x lg:grid-cols-2" >
    @@ -52,12 +53,12 @@

    Integrate Auth seamlessly into your projects with your favorite technology.

    - Learn moreLearn more
    {#each migrations as migration} @@ -80,9 +81,10 @@

    Use Appwrite's migration process to transfer your existing users with a few clicks.

    - Learn moreLearn more
    diff --git a/src/routes/products/functions/(components)/Bento.svelte b/src/routes/products/functions/(components)/Bento.svelte index 00f816ebd7..6bd4d5508f 100644 --- a/src/routes/products/functions/(components)/Bento.svelte +++ b/src/routes/products/functions/(components)/Bento.svelte @@ -5,6 +5,7 @@ import Events from './animations/Events.svelte'; import DelayedExecutions from './animations/DelayedExecutions.svelte'; import Logging from './animations/Logging.svelte'; + import { Button } from '$lib/components/ui';
    @@ -17,9 +18,10 @@

    Execute your functions effortlessly through the Appwrite console, SDKs, or API.

    - Learn moreLearn more
    diff --git a/src/routes/products/functions/(components)/DeploySeamlessly.svelte b/src/routes/products/functions/(components)/DeploySeamlessly.svelte index f7fcb823e6..d8f65021d6 100644 --- a/src/routes/products/functions/(components)/DeploySeamlessly.svelte +++ b/src/routes/products/functions/(components)/DeploySeamlessly.svelte @@ -1,4 +1,5 @@ @@ -16,9 +17,10 @@ within your development workflow seamlessly.

    - Learn moreLearn more diff --git a/src/routes/products/functions/(components)/DevelopLocally.svelte b/src/routes/products/functions/(components)/DevelopLocally.svelte index d84f436453..56aeacdc8f 100644 --- a/src/routes/products/functions/(components)/DevelopLocally.svelte +++ b/src/routes/products/functions/(components)/DevelopLocally.svelte @@ -3,6 +3,7 @@ import Hat from '../(assets)/hat.png'; import Shirt from '../(assets)/shirt.png'; import Window from '../(assets)/checkout-window.png'; + import { Button } from '$lib/components/ui'; const products = [ { @@ -176,9 +177,10 @@ over your development.

    - Learn moreLearn more diff --git a/src/routes/products/functions/(components)/Languages.svelte b/src/routes/products/functions/(components)/Languages.svelte index ecd7bce9a3..86559c94c4 100644 --- a/src/routes/products/functions/(components)/Languages.svelte +++ b/src/routes/products/functions/(components)/Languages.svelte @@ -1,4 +1,5 @@ diff --git a/src/lib/components/shared/github-stats.svelte b/src/lib/components/shared/github-stats.svelte index 1704334473..fb58f749f6 100644 --- a/src/lib/components/shared/github-stats.svelte +++ b/src/lib/components/shared/github-stats.svelte @@ -16,7 +16,7 @@ class={className} variant="secondary" > -
    @@ -139,7 +139,7 @@ href="/assets/logotype/white.svg" download > - + SVG @@ -167,7 +167,7 @@ href="/assets/logotype/black.svg" download > - + SVG @@ -236,7 +236,7 @@ href="/assets/logomark/logo.svg" download > - + SVG @@ -264,7 +264,7 @@ href="/assets/logomark/logo.svg" download > - + SVG @@ -373,7 +373,7 @@ href="/assets/visuals/dashboard.jpg" download > - + JPG @@ -398,7 +398,7 @@ href="/assets/visuals/auth.jpg" download > - + JPG @@ -423,7 +423,7 @@ href="/assets/visuals/databases.jpg" download > - + JPG @@ -449,7 +449,7 @@ href="/assets/visuals/storage.jpg" download > - + JPG @@ -475,7 +475,7 @@ href="/assets/visuals/functions.jpg" download > - + JPG @@ -500,7 +500,7 @@ href="/assets/visuals/messaging.jpg" download > - + JPG diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte index 3a4be7abbb..1a174e16ad 100644 --- a/src/routes/community/+page.svelte +++ b/src/routes/community/+page.svelte @@ -184,7 +184,7 @@ rel="noopener noreferrer" class="is-full-width-mobile" > -