Merge branch 'main' into partners-catalog

Author: thejessewinton

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-bullseye as base
+FROM node:20-bullseye AS base
 
 ARG PUBLIC_APPWRITE_ENDPOINT
 ENV PUBLIC_APPWRITE_ENDPOINT ${PUBLIC_APPWRITE_ENDPOINT}
@@ -60,13 +60,13 @@ COPY pnpm-lock.yaml pnpm-lock.yaml
 RUN npm i -g corepack@latest
 RUN corepack enable
 
-FROM base as build
+FROM base AS build
 
 COPY . .
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 RUN NODE_OPTIONS=--max_old_space_size=16384 pnpm run build
 
-FROM base as final
+FROM base AS final
 
 # Install fontconfig
 COPY ./local-fonts /usr/share/fonts

package.json

@@ -115,6 +115,7 @@
     "pnpm": {
         "onlyBuiltDependencies": [
             "@parcel/watcher",
+            "@tailwindcss/oxide",
             "core-js",
             "esbuild",
             "sharp",

src/lib/components/MultiCodeContextless.svelte

@@ -3,7 +3,7 @@
     import { getCodeHtml, type Language } from '$lib/utils/code';
     import { copy } from '$lib/utils/copy';
     import { platformMap } from '$lib/utils/references';
-    import { writable } from 'svelte/store';
+    import { SvelteSet } from 'svelte/reactivity';
 
     interface Props {
         selected?: Language;
@@ -14,18 +14,26 @@
 
     let { selected = $bindable('js'), data = [], width = null, height = null }: Props = $props();
 
-    let snippets = $derived(writable(new Set(data.map((d) => d.language))));
-    const getSnippets = () => {
-        return snippets;
-    };
-
-    let content = $derived(data.find((d) => d.language === selected)?.content ?? '');
-
-    let platform = $derived(data.find((d) => d.language === selected)?.platform ?? '');
+    const snippets = $derived(new SvelteSet(data.map((d) => d.language)));
+    const content = $derived(data.find((d) => d.language === selected)?.content ?? '');
+    const platform = $derived(data.find((d) => d.language === selected)?.platform ?? '');
+    const result = $derived(
+        getCodeHtml({
+            content,
+            language: selected ?? 'sh',
+            withLineNumbers: true
+        })
+    );
+    const options = $derived(
+        Array.from(snippets).map((language) => ({
+            value: language,
+            label: platformMap[language]
+        }))
+    );
 
-    getSnippets().subscribe((n) => {
-        if (selected === null && n.size > 0) {
-            selected = Array.from(n)[0] as Language;
+    $effect(() => {
+        if (selected === null && snippets.size > 0) {
+            selected = Array.from(snippets)[0] as Language;
         }
     });
 
@@ -35,9 +43,7 @@
     } as const;
     type CopyStatusType = keyof typeof CopyStatus;
     type CopyStatusValue = (typeof CopyStatus)[CopyStatusType];
-
-    let copyText = $state<CopyStatusValue>(CopyStatus.Copy);
-
+    let copyText: CopyStatusValue = $state(CopyStatus.Copy);
     async function handleCopy() {
         await copy(content);
 
@@ -46,28 +52,13 @@
             copyText = CopyStatus.Copy;
         }, 1000);
     }
-
-    let result = $derived(
-        getCodeHtml({
-            content,
-            language: selected ?? 'sh',
-            withLineNumbers: true
-        })
-    );
-    let options = $derived(
-        Array.from($snippets).map((language) => ({
-            value: language,
-            label: platformMap[language]
-        }))
-    );
 </script>
 
 <section
     class="dark web-code-snippet mx-auto w-full lg:!max-w-[90vw]"
     aria-label="code-snippet panel"
-    style={`width: ${width ? width / 16 + 'rem' : 'inherit'}; height: ${
-        height ? height / 16 + 'rem' : 'inherit'
-    }`}
+    style:width={width ? width / 16 + 'rem' : 'inherit'}
+    style:height={height ? height / 16 + 'rem' : 'inherit'}
 >
     <header class="web-code-snippet-header">
         <div class="web-code-snippet-header-start">
@@ -79,9 +70,9 @@
         </div>
         <div class="web-code-snippet-header-end">
             <ul class="buttons-list flex gap-3">
-                {#if $snippets.entries.length}
+                {#if snippets.size}
                     <li class="buttons-list-item flex self-center">
-                        <Select bind:value={selected} bind:options />
+                        <Select bind:value={selected} {options} />
                     </li>
                 {/if}
                 <li class="buttons-list-item" style="padding-inline-start: 13px">
@@ -104,7 +95,7 @@
     </header>
     <div
         class="web-code-snippet-content overflow-auto"
-        style={`height: ${height ? height / 16 + 'rem' : 'inherit'}`}
+        style:height={height ? height / 16 + 'rem' : 'inherit'}
     >
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
         {@html result}

src/lib/components/PreFooter.svelte

@@ -116,6 +116,7 @@
                             {plan.description}
                         </p>
                         <Button
+                            href={plan.buttonLink}
                             event={plan.eventName}
                             variant={plan.buttonVariant}
                             class="w-full! flex-3 self-end md:w-fit"
@@ -135,29 +136,16 @@
         flex-basis: 5rem !important;
     }
 
-    .web-strip-plans-item-wrapper {
-        gap: 2.65rem;
-    }
-
     @media (min-width: 1024px) and (max-width: 1224px) {
         .web-strip-plans-info {
             flex-basis: 1rem !important;
         }
-
-        .web-strip-plans-item-wrapper {
-            gap: 1.25rem !important;
-            inline-size: 100% !important;
-        }
     }
 
     @media (max-width: 1024px) {
         .web-strip-plans-info {
             flex-basis: 3rem !important;
         }
-
-        .web-strip-plans-item-wrapper {
-            gap: 1.25rem !important;
-        }
     }
 
     .web-pre-footer-bg {

src/lib/components/shared/button.svelte

@@ -2,7 +2,7 @@
     import { classNames } from '$lib/utils/classnames';
     import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
     import { cva, type VariantProps } from 'cva';
-    import InlineTag from '../ui/InlineTag.svelte';
+    import InlineTag from '../ui/inline-tag.svelte';
 
     const button = cva(
         [

src/lib/components/shared/dialog.svelte

@@ -2,7 +2,6 @@
     import { fade, scale } from 'svelte/transition';
     import { createDialog, melt } from '@melt-ui/svelte';
     import type { Snippet } from 'svelte';
-    import { browser } from '$app/environment';
 
     type Props = {
         url: string;
@@ -12,7 +11,7 @@
     };
 
     const {
-        elements: { portalled, trigger, content, overlay },
+        elements: { trigger, content, overlay },
         states: { open }
     } = createDialog({
         forceVisible: true,
@@ -27,14 +26,9 @@
         {@render children()}
     </div>
 {:else}
-    <button
-        class="contents cursor-pointer"
-        onclick={() => {
-            if (browser && window) window.open(url, '_blank');
-        }}
-    >
+    <a href={url} target="_blank" rel="noopener noreferrer" class="contents cursor-pointer">
         {@render children()}
-    </button>
+    </a>
 {/if}
 
 {#if $open}

src/lib/components/ui/icon/icon.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-    import { classNames } from '$lib/utils/classnames';
-    import type { SvelteHTMLElements } from 'svelte/elements';
+    import type { SVGAttributes } from 'svelte/elements';
     import type { IconType } from './types';
 
-    type Props = SvelteHTMLElements['svg'] & {
+    type Props = SVGAttributes<SVGElement> & {
         class?: string;
-        name: IconType;
+        name?: IconType;
     };
-
     const {
         xmlns = 'http://www.w3.org/2000/svg',
         viewBox = '0 0 24 24',

src/lib/layouts/Docs.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { navigating } from '$app/stores';
     import { writable } from 'svelte/store';
 
     export type DocsLayoutVariant = 'default' | 'expanded' | 'two-side-navs';
@@ -40,15 +39,14 @@
 </script>
 
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { Search, IsLoggedIn } from '$lib/components';
     import { isMac } from '$lib/utils/platform';
     import { getContext, setContext } from 'svelte';
     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';
+    import { afterNavigate } from '$app/navigation';
 
     interface Props {
         variant?: DocsLayoutVariant;
@@ -70,7 +68,7 @@
         $layoutState.currentVariant = variant;
     });
 
-    navigating.subscribe(() => {
+    afterNavigate(() => {
         layoutState.update((n) => ({
             ...n,
             showReferences: false,

src/lib/layouts/Sidebar.svelte

@@ -138,7 +138,7 @@
                 rel="noopener noreferrer"
                 class="web-u-inline-width-100-percent-mobile"
             >
-                <Icon class="star" aria-hidden="true"></Icon>
+                <Icon class="star" aria-hidden />
                 <span class="text">Star on GitHub</span>
                 <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
             </Button>

src/routes/(init)/init/(components)/event-carousel.svelte

@@ -98,12 +98,12 @@
             on:emblaInit={onEmblaInit}
         >
             <div class="embla__container flex">
-                {#each events as _}
+                {#each events as { poster, title }}
                     <div
                         class="embla__slide bg-card/90 mr-4 min-w-0 [flex:0_0_33%] items-center rounded-lg p-4"
                     >
-                        <img src={_.poster} class="m-auto rounded-t" />
-                        <h3 class="mt-0.5 text-base font-medium">{_.title}</h3>
+                        <img alt={title} src={poster} class="m-auto rounded-t" />
+                        <h3 class="mt-0.5 text-base font-medium">{title}</h3>
                     </div>
                 {/each}
             </div>