updates

src/lib/actions/analytics.ts

@@ -55,10 +55,12 @@ const analytics = Analytics({
     plugins: [plausible('appwrite.io')]
 });
 
-export const trackEvent = async (platforms: {
+export type TrackEventArgs = {
     plausible?: { name: string; data?: object };
     posthog?: { name: string };
-}) => {
+};
+
+export const trackEvent = async (platforms: TrackEventArgs) => {
     if (!isTrackingAllowed()) {
         return;
     }

src/lib/components/PreFooter.svelte

@@ -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! md:w-fit"
                         target="_blank"
                         rel="noopener noreferrer"
                         onclick={() =>

src/lib/components/blog/newsletter.svelte

@@ -1,5 +1,6 @@
 <script context="module" lang="ts">
     import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
+    import { Button } from '$lib/components/ui';
 
     export const subscribeToNewsletter = async (email: string) => {
         const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/newsletter/subscribe`, {
@@ -96,9 +97,7 @@
                             name="email"
                             bind:value={email}
                         />
-                        <button type="submit" class="web-button" disabled={submitting}
+                        <Button type="submit" disabled={submitting}>Sign up</Button>
-                            >Sign up</button
-                        >
                     </div>
 
                     {#if error}

src/lib/components/product-pages/hero.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { classNames } from '$lib/utils/classnames';
+    import Button from '$lib/components/ui/button.svelte';
 
     type $$Props = {
         eyebrow: {
@@ -56,13 +57,13 @@
             </p>
 
             <div class="flex flex-col items-center gap-2 md:flex-row">
-                <a href={cta.url} class="web-button !w-full md:!w-fit">
+                <Button href={cta.url} class="!w-full md:!w-fit">
                     {cta.label}
-                </a>
+                </Button>
                 {#if secondaryCta}
-                    <a href={secondaryCta.url} class="web-button is-secondary !w-full md:!w-fit">
+                    <Button variant="secondary" href={secondaryCta.url} class="!w-full md:!w-fit">
                         {secondaryCta.label}
-                    </a>
+                    </Button>
                 {/if}
             </div>
         </div>

src/lib/components/ui/button.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { Icon, type IconType } from '$lib/components/ui';
     import { classNames } from '$lib/utils/classnames';
-    import { type AnyMeltElement, emptyMeltElement, melt } from '@melt-ui/svelte';
     import { type VariantProps, cva } from 'cva';
     import type { Snippet } from 'svelte';
     import type { Action } from 'svelte/action';
     import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-    import { InlineTag } from '$lib/components/ui';
+    import { trackEvent, type TrackEventArgs } from '$lib/actions/analytics';
 
     // TODO: replace _button.scss with Tailwind classes for long-term maintainability
     const button = cva(['web-button'], {
@@ -20,55 +18,36 @@
         }
     });
 
-    type ButtonProps =
+    type ButtonOrAnchorProps =
         | (HTMLButtonAttributes & { href?: undefined })
         | (HTMLAnchorAttributes & { href: string });
 
-    type Props = ButtonProps &
+    type Props = {
-        VariantProps<typeof button> & {
+        action?: Action;
-            action?: Action;
+        children: Snippet;
-            element?: AnyMeltElement;
+        events?: TrackEventArgs;
-            icon?: Snippet;
+    } & VariantProps<typeof button> &
-            children: Snippet;
+        ButtonOrAnchorProps;
-            tag?: Snippet;
-        };
 
     const {
         href,
         variant,
         action = () => {},
-        element,
-        icon,
         children,
-        tag,
         class: classes,
+        events,
         ...rest
     }: Props = $props();
 
-    const meltElement = element ?? emptyMeltElement;
     const buttonClasses = classNames(button({ variant }), classes);
 </script>
 
 {#if href}
     <a use:action {href} class={buttonClasses} {...rest as HTMLAnchorAttributes}>
-        {#if icon}
-            {@render icon()}
-        {/if}
         {@render children()}
-        {#if tag}
-            {@render tag()}
-        {/if}
     </a>
 {:else}
     <button use:action class={buttonClasses} {...rest as HTMLButtonAttributes}>
-        {#if icon}
-            {@render icon()}
-        {/if}
         {@render children()}
-        {#if tag}
-            <InlineTag>
-                {@render tag()}
-            </InlineTag>
-        {/if}
     </button>
 {/if}

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 @@
             </a>
         </div>
         <div class="web-mobile-header-end">
-            <a href={getAppwriteDashboardUrl()} class="web-button web-is-only-desktop">
+            <Button
-                <span class="text-sub-body font-medium">Go to Console</span>
+                href={getAppwriteDashboardUrl()}
-            </a>
+                class="text-sub-body hidden font-medium md:flex"
-            <button
-                class="web-button is-text"
-                aria-label="open navigation"
-                on:click={toggleSidenav}
             >
+                Go to Console
+            </Button>
+            <Button variant="text" aria-label="open navigation" onclick={toggleSidenav}>
                 {#if $layoutState.showSidenav}
                     <span aria-hidden="true" class="web-icon-close"></span>
                 {:else}
                     <span aria-hidden="true" class="web-icon-hamburger-menu"></span>
                 {/if}
-            </button>
+            </Button>
         </div>
     </section>
     <header
@@ -171,16 +171,16 @@
             </div>
             <div class="web-main-header-end">
                 <div class="flex gap-2">
-                    <a
+                    <Button
                         href={GITHUB_REPO_LINK}
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="web-button is-text"
+                        variant="text"
                     >
-                        <span class="web-icon-star" aria-hidden="true"></span>
+                        <Icon icon="star" aria-hidden="true" />
-                        <span class="text">Star on GitHub</span>
+                        Star on GitHub
-                        <span class="web-inline-tag text-sub-body">{GITHUB_STARS}</span>
+                        <InlineTag>{GITHUB_STARS}</InlineTag>
-                    </a>
+                    </Button>
                     <IsLoggedIn />
                 </div>
             </div>

src/routes/threads/+page.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
     import { Main } from '$lib/layouts';
     import { createDebounce } from '$lib/utils/debounce';
-    import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
+    import { DEFAULT_HOST } from '$lib/utils/metadata';
     import { TITLE_SUFFIX } from '$routes/titles';
+    import { Button } from '$lib/components/ui';
 
     import FooterNav from '$lib/components/FooterNav.svelte';
     import MainFooter from '$lib/components/MainFooter.svelte';
     import ThreadCard from './ThreadCard.svelte';
 
-    import Input from '$lib/components/ui/input.svelte';
     import PreFooter from './PreFooter.svelte';
     import TagsDropdown from './TagsDropdown.svelte';
     import { getThreads } from './helpers';
@@ -198,12 +198,11 @@
                             <div class="web-card is-normal has-border-gradient empty-card">
                                 <enhanced:img class="img" src="./(assets)/empty-state.png" alt="" />
                                 <span class="text-body font-medium">No support threads found</span>
-                                <button
+                                <Button
-                                    class="web-button"
                                     onclick={() => {
                                         query = '';
                                         handleSearch('');
-                                    }}>Clear search</button
+                                    }}>Clear search</Button
                                 >
                             </div>
                         {/each}

src/routes/threads/[id]/+page.svelte

@@ -2,6 +2,7 @@
     import { Main } from '$lib/layouts';
     import { DEFAULT_DESCRIPTION } from '$lib/utils/metadata';
     import { TITLE_SUFFIX } from '$routes/titles';
+    import { Button, Icon } from '$lib/components/ui';
 
     import FooterNav from '$lib/components/FooterNav.svelte';
     import MainFooter from '$lib/components/MainFooter.svelte';
@@ -57,10 +58,10 @@
                 </ul>
             </div>
             <div class="buttons">
-                <a class="web-button" href={discordLink}>
+                <Button href={discordLink}>
-                    <span class="web-icon-discord"></span>
+                    <Icon icon="discord"></Icon>
-                    <span class="text">View on Discord</span>
+                    View on Discord
-                </a>
+                </Button>
             </div>
         </div>
 
@@ -82,10 +83,10 @@
                     <p class="text-sub-body mt-4 font-medium">
                         Reply to this thread by joining our Discord
                     </p>
-                    <a class="web-button mt-6" href={discordLink}>
+                    <Button class="mt-6" href={discordLink}>
-                        <span class="web-icon-discord"></span>
+                        <Icon icon="discord"></Icon>
-                        <span class="text">Reply on Discord</span>
+                        Reply on Discord
-                    </a>
+                    </Button>
                 </div>
             </div>
             <div class="related">