Cloud ga page

package.json

@@ -24,7 +24,7 @@
         "optimize": "node ./scripts/optimize-assets.js",
         "optimize:all": "node ./scripts/optimize-all.js"
     },
-    "packageManager": "pnpm@10.12.1",
+    "packageManager": "pnpm@10.14.0",
     "dependencies": {
         "h3": "^1.14.0",
         "posthog-js": "^1.210.2",

src/app.css

@@ -93,7 +93,7 @@
     --animate-scroll: scroll 60s linear infinite;
     --animate-scroll-x: scroll-x var(--speed, 30s) linear infinite var(--direction, forwards);
     --animate-scroll-y: scroll-y 30s linear infinite forwards;
-
+    --animate-drop: drop 18s linear infinite forwards;
     --animate-fade-in: fade-in 0.5s ease-in-out both;
     --animate-fade-out: fade-out 0.5s ease-in-out both;
     --animate-lighting: lighting 1.25s ease-out forwards;
@@ -285,6 +285,15 @@
         }
     }
 
+    @keyframes drop {
+        from {
+            top: calc(100vh * -1);
+        }
+        to {
+            top: 100vh;
+        }
+    }
+
     /* Fonts */
     --font-sans: 'Inter', arial, sans-serif;
     --font-mono: 'Fira Code', monospace;
@@ -319,8 +328,11 @@
     --text-description--letter-spacing: var(--tracking-tighter);
     --text-label: 1.5rem;
     --text-label--line-height: 1.75rem;
-    --text-title: clamp(2rem, 5vw, 2.5rem);
-    --text-title--line-height: clamp(2.125rem, 5.5vw, 2.75rem);
+    --text-subtitle: clamp(1.5rem, 3vw, 2rem);
+    --text-subtitle--line-height: clamp(1.75rem, 3.5vw, 2.25rem);
+    --text-subtitle--letter-spacing: var(--tracking-squeezed);
+    --text-title: clamp(2rem, 5vw, 3rem);
+    --text-title--line-height: clamp(2.125rem, 5.5vw, 3.25rem);
     --text-title--letter-spacing: var(--tracking-squeezed);
     --text-title-lg: clamp(2.85rem, 5vw, 3rem);
     --text-title-lg--line-height: clamp(2.75rem, 5.5vw, 3.5rem);
@@ -331,9 +343,9 @@
     --text-hero: clamp(3.2rem, 7vw, 4.5rem);
     --text-hero--line-height: clamp(3.125rem, 7.5vw, 4.25rem);
     --text-hero--letter-spacing: var(--tracking-compressed);
-    --text-headline: clamp(3.5rem, 8vw, 5.5rem);
-    --text-headline--line-height: clamp(3.5rem, 8.5vw, 5.75rem);
-    --text-headline--letter-spacing: var(--tracking-compressed);
+    --text-headline: clamp(3.5rem, 8vw, 4.5rem);
+    --text-headline--line-height: clamp(3.5rem, 8vw, 4.625rem);
+    --text-headline--letter-spacing: var(--tracking-squeezed);
 
     /* Letter spacing */
     --tracking-*: initial;

src/lib/actions/mouse-position.svelte.ts

@@ -13,12 +13,10 @@ export const useMousePosition = () => {
     });
 
     const action = (node: HTMLElement | SVGSVGElement) => {
-        const handleMouseMove = (event: MouseEvent) => {
-            const { clientX, clientY } = event;
-
+        const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
             position = {
-                x: clientX - 12, // Remove rect.left
-                y: clientY + -350 // Remove rect.top
+                x: clientX + 12,
+                y: clientY + 12
             };
         };
         hover(node, () => {

src/lib/components/animated/text-scramble.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { write } from '$lib/animations';
+    import { classNames } from '$lib/utils/classnames';
+    import { onDestroy, onMount } from 'svelte';
+
+    export let text: string = '';
+    export let delay: number = 0;
+    export let duration: number = 2500;
+
+    export let trigger: boolean = true;
+
+    let className: string = '';
+    export { className as class };
+
+    let displayText: string = '';
+
+    onMount(() => {
+        if (!trigger) return;
+        const delayTimeout = setTimeout(() => {
+            write(text, (v) => (displayText = v), duration);
+        }, delay);
+
+        return () => clearTimeout(delayTimeout);
+    });
+</script>
+
+<span class={classNames('inline-block w-full text-balance', className)}
+    >{displayText}<slot name="suffix" /></span
+>

src/lib/components/animated/text.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { classNames } from '$lib/utils/classnames';
+    import type { SvelteHTMLElements } from 'svelte/elements';
+
+    type Props = {
+        text: string;
+        splitBy?: 'words' | 'characters';
+        staggerBy?: number;
+    } & SvelteHTMLElements['span'];
+
+    const { text, splitBy = 'words', staggerBy = 75, class: className, ...rest }: Props = $props();
+
+    const words = splitBy === 'words' ? text.split(' ') : text.split('');
+</script>
+
+<span class="sr-only">{text}</span>
+<span class={classNames('relative', className)} {...rest}>
+    {#each words as word, i}
+        <span class="animate-text mr-2 inline-block" style:animation-delay={`${i * staggerBy}ms`}
+            >{word}</span
+        >
+    {/each}
+</span>

src/lib/components/appwrite-network/map-tooltip.svelte

@@ -79,14 +79,17 @@
     });
 </script>
 
-<div class={classNames('pointer-events-none absolute z-100 hidden md:block', theme)}>
+<div
+    class={classNames('pointer-events-none fixed z-100 hidden md:block', theme)}
+    style:left={`${x}px`}
+    style:top={`${y}px`}
+>
     {#if tooltipData.city}
         <div
             class={classNames(
                 'border-gradient relative z-100 flex w-[190px] flex-col gap-2 rounded-[10px] p-2 backdrop-blur-lg before:rounded-[10px] after:rounded-[10px]',
                 { 'bg-transparent': theme === 'dark', 'bg-white': theme === 'light' }
             )}
-            style:transform={`translateX(${x + 20}px) translateY(${y - 425}px)`}
         >
             {#key tooltipData.city}
                 <span class="text-primary text-caption w-fit" bind:this={city}>

src/lib/components/appwrite-network/map.svelte

@@ -11,52 +11,19 @@
     import { createMap } from 'svg-dotted-map';
     import { browser } from '$app/environment';
 
-    let activeSegment = $state<string>('pop-locations');
-    let activeMarkers = $derived(pins[activeSegment as PinSegment]);
-    let activeRegion = $state<string | null>(null);
-    let activeMarker: SVGGElement | null = null;
-
-    const { action: mousePosition, position } = useMousePosition();
-    const { action: inView } = useAnimateInView();
-
-    const scrollMarkerIntoView = (marker: SVGGElement) => {
-        return new Promise<void>((resolve) => {
-            marker.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-                inline: 'center'
-            });
-
-            const observer = new IntersectionObserver(
-                (entries) => {
-                    if (entries[0].intersectionRatio > 0.5) {
-                        observer.disconnect();
-                        resolve();
-                    }
-                },
-                { threshold: [0, 0.25, 0.5, 0.75, 1] }
-            );
-
-            observer.observe(marker);
-        });
+    type Props = {
+        theme: 'light' | 'dark';
+        navigable?: boolean;
+        defaultSet?: PinSegment;
     };
 
-    const handleSetActiveMarker = async (city: string) => {
-        const citySlug = slugify(city);
-
-        if (activeRegion === citySlug) {
-            activeMarker = null;
-            activeRegion = null;
-            return;
-        }
+    const { theme = 'dark', navigable = true, defaultSet = 'pop-locations' }: Props = $props();
 
-        activeMarker = document.querySelector(`[data-region="${citySlug}"]`);
+    let activeSegment = $state<string>(defaultSet);
+    let activeMarkers = $derived(pins[activeSegment as PinSegment]);
 
-        if (activeMarker) {
-            await scrollMarkerIntoView(activeMarker);
-            activeRegion = citySlug;
-        }
-    };
+    const { action: mousePosition, position } = useMousePosition();
+    const { action: inView } = useAnimateInView();
 
     const radius = 0.4;
     const height = 75;
@@ -72,12 +39,6 @@
             activeMarkers
         )
     );
-
-    type Props = {
-        theme: 'light' | 'dark';
-    };
-
-    const { theme = 'dark' }: Props = $props();
 </script>
 
 <div class="relative w-full overflow-x-scroll [scrollbar-width:none]">
@@ -135,4 +96,6 @@
 </div>
 <MapTooltip {theme} {...position()} />
 
-<MapNav {theme} onValueChange={(value) => (activeSegment = value)} />
+{#if navigable}
+    <MapNav {theme} onValueChange={(value) => (activeSegment = value)} />
+{/if}

src/lib/components/blog/article.svelte

@@ -2,13 +2,17 @@
     import Media from '$lib/UI/Media.svelte';
     import { formatDate } from '$lib/utils/date';
 
-    export let title: string;
-    export let cover: string;
-    export let href: string;
-    export let date: Date;
-    export let timeToRead: number;
-    export let author: string;
-    export let avatar: string;
+    interface Props {
+        title: string;
+        cover: string;
+        href: string;
+        date: Date;
+        timeToRead: number;
+        author: string;
+        avatar: string;
+    }
+
+    const { title, cover, href, date, timeToRead, author, avatar }: Props = $props();
 </script>
 
 <a class="group flex w-full flex-col gap-8 bg-transparent pb-3 transition" {href}>

src/lib/components/blog/breadcrumbs.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-    export let title: string;
+    interface Props {
+        title: string;
+    }
+
+    const { title }: Props = $props();
 </script>
 
 <div class="text-caption text-secondary flex gap-3 pt-8 pb-16">

src/lib/components/blog/newsletter.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
     import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
     import { Button } from '$lib/components/ui';
 
@@ -17,10 +17,12 @@
 </script>
 
 <script lang="ts">
-    let email = '';
-    let submitted = false;
-    let error: string | undefined;
-    let submitting = false;
+    import { preventDefault } from 'svelte/legacy';
+
+    let email = $state('');
+    let submitted = $state(false);
+    let error: string | undefined = $state();
+    let submitting = $state(false);
 
     const handleSubmit = async () => {
         submitting = true;
@@ -84,7 +86,7 @@
                     </span>
                 </div>
             {:else}
-                <form method="post" class="contents" on:submit|preventDefault={handleSubmit}>
+                <form method="post" class="contents" onsubmit={preventDefault(handleSubmit)}>
                     <div
                         class="border-primary/12 focus-within:border-primary/48 flex w-full max-w-sm justify-between gap-1 rounded-xl border bg-white/4 py-1 pr-1 pl-4 backdrop-blur-2xl transition-colors"
                     >

src/lib/components/blog/post-meta.svelte

@@ -4,12 +4,23 @@
     import { formatDate } from '$lib/utils/date';
     import type { AuthorData } from '$routes/blog/content';
 
-    export let date: string = new Date().toISOString();
-    export let timeToRead: string = '0';
-    export let title: string = '';
-    export let description: string = '';
-    export let authorData: Partial<AuthorData> = {};
-    export let currentURL: string = '';
+    interface Props {
+        date?: string;
+        timeToRead?: string;
+        title?: string;
+        description?: string;
+        authorData?: Partial<AuthorData>;
+        currentURL?: string;
+    }
+
+    const {
+        date = new Date().toISOString(),
+        timeToRead = '0',
+        title = '',
+        description = '',
+        authorData = {},
+        currentURL = ''
+    }: Props = $props();
 
     const getShareLink = (shareOption: SocialShareOption) => {
         const blogPostUrl = encodeURI(currentURL);
@@ -78,7 +89,7 @@
                         {:else}
                             <button
                                 aria-label={sharingOption.label}
-                                on:click={() => handleCopy(currentURL)}
+                                onclick={() => handleCopy(currentURL)}
                             >
                                 <span class={sharingOption.icon} aria-hidden="true"></span>
                             </button>

src/lib/components/blog/table-of-contents.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     export type TocItem = {
         title: string;
         href: string;
@@ -22,17 +22,21 @@
         window.scrollTo({ top: 0 });
     };
 
-    let isScrolled: boolean = false;
+    let isScrolled: boolean = $state(false);
 
     const handleIsScrolled = () => {
         isScrolled = !!window.scrollY;
     };
 
-    export let toc: Array<TocItem> = [];
-    export let heading: string = 'Table of Contents';
+    interface Props {
+        toc?: Array<TocItem>;
+        heading?: string;
+    }
+
+    let { toc = [], heading = 'Table of Contents' }: Props = $props();
 </script>
 
-<svelte:window on:scroll={handleIsScrolled} />
+<svelte:window onscroll={handleIsScrolled} />
 
 <nav class="sticky top-32 col-span-3 mt-2 -ml-4 hidden h-[800px] flex-col gap-6 lg:flex">
     <span class="text-micro tracking-loose text-primary font-aeonik-fono ps-6 uppercase"
@@ -88,7 +92,7 @@
     {#if isScrolled}
         <button
             class="text-primary group border-smooth text-caption ms-6 -mt-4 flex cursor-pointer items-center gap-2 border-t pt-10 font-medium transition-all"
-            on:click={backToTop}
+            onclick={backToTop}
             out:fade
             in:fade
         >