Add Changelog Page

package.json

@@ -11,6 +11,7 @@
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --plugin-search-dir . --check . && eslint .",
         "format": "prettier --plugin-search-dir . --write .",
+        "clean": "rm -rf node_modules && rm -rf .svelte_kit && pnpm i",
         "test:integration": "playwright test",
         "test:unit": "vitest",
         "icons:build": "node ./src/icons/build.js",

src/app.d.ts

@@ -1,12 +1,14 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface Platform {}
-	}
+    namespace App {
+        // interface Error {}
+        // interface Locals {}
+        interface PageData {
+            changelogEntries: number;
+        }
+        // interface Platform {}
+    }
 }
 
 export {};

src/lib/animations/scroll-indicator.svelte

@@ -1,82 +1,58 @@
 <script lang="ts">
-	import { rect } from '$lib/actions';
-	import { clamp } from '$lib/utils/clamp';
-	import { onMount } from 'svelte';
-	import { writable } from 'svelte/store';
-
-	export let percentage = 0;
-	let easedPercentage = 0;
-
-	const elRect = writable<DOMRect | null>(null);
-	$: y = $elRect ? clamp(0, easedPercentage, 1) * $elRect.height : 0;
-
-	onMount(() => {
-		let frame: number | null = null;
-		const ease = () => {
-			easedPercentage += (percentage - easedPercentage);
-			frame = window.requestAnimationFrame(ease);
-		};
-		ease();
-
-		return () => {
-			frame && window.cancelAnimationFrame(frame);
-		};
-	});
+    import { rect } from '$lib/actions';
+    import { clamp } from '$lib/utils/clamp';
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+
+    export let percentage = 0;
+    let easedPercentage = 0;
+
+    const elRect = writable<DOMRect | null>(null);
+    $: y = $elRect ? clamp(0, easedPercentage, 1) * $elRect.height : 0;
+
+    onMount(() => {
+        let frame: number | null = null;
+        const ease = () => {
+            easedPercentage += percentage - easedPercentage;
+            frame = window.requestAnimationFrame(ease);
+        };
+        ease();
+
+        return () => {
+            frame && window.cancelAnimationFrame(frame);
+        };
+    });
 </script>
 
 <div
-	class="scroll-indicator"
-	use:rect={elRect}
-	style:--y={`${y}px`}
-	style:--percentage={`${easedPercentage * 100}%`}
+    class="scroll-indicator"
+    use:rect={elRect}
+    style:--y={`${y}px`}
+    style:--percentage={`${easedPercentage * 100}%`}
 >
-	<div class="cursor" />
+    <div class="aw-dot" />
 </div>
 
 <style lang="scss">
-	.scroll-indicator {
-		position: relative;
-
-		width: 1px;
-		flex-shrink: 0;
-		height: 100%;
-		background: linear-gradient(
-			to bottom,
-			hsl(var(--aw-color-accent)) 0%,
-			hsl(var(--aw-color-greyscale-700)) var(--percentage),
-			hsl(var(--aw-color-greyscale-700)) 100%
-		);
-		border-radius: 100%;
-
-		.cursor {
-			border-radius: 16px;
-			border: 0.5px solid rgba(255, 255, 255, 0.16);
-			background: linear-gradient(
-				138deg,
-				rgba(255, 255, 255, 0.13) 9.61%,
-				rgba(255, 255, 255, 0) 105.41%
-			);
-			backdrop-filter: blur(100px);
-
-			width: 16px;
-			height: 16px;
-
-			position: absolute;
-			left: 50%;
-			translate: -50% var(--y, 0);
-			top: -8px;
-
-			&::after {
-				content: '';
-				background-color: white;
-				border-radius: 100%;
-				width: 4px;
-				height: 4px;
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				translate: -50% -50%;
-			}
-		}
-	}
+    .scroll-indicator {
+        position: relative;
+
+        width: 1px;
+        flex-shrink: 0;
+        height: 100%;
+        background: linear-gradient(
+            to bottom,
+            hsl(var(--aw-color-accent)) 0%,
+            hsl(var(--aw-color-greyscale-700)) var(--percentage),
+            hsl(var(--aw-color-greyscale-700)) 100%
+        );
+        border-radius: 100%;
+    }
+
+    .aw-dot {
+        position: absolute;
+        left: 50%;
+        translate: -50% var(--y, 0);
+        top: -8px;
+    }
 </style>

src/lib/components/Article.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { formatDate } from '$lib/utils/date';
+
     export let title: string;
     export let cover: string;
     export let href: string;
@@ -24,11 +26,7 @@
                         <h4 class="aw-sub-body-400 aw-u-color-text-primary">{author}</h4>
                         <ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
                             <li>
-                                {Intl.DateTimeFormat('en-US', {
-                                    day: '2-digit',
-                                    month: 'short',
-                                    year: 'numeric'
-                                }).format(date)}
+                                {formatDate(date)}
                             </li>
                             <li>{timeToRead} min</li>
                         </ul>

src/lib/components/FooterNav.svelte

@@ -68,7 +68,8 @@
                     rel: 'noopener noreferrer'
                 },
                 { label: 'Contact us', href: '/contact-us' },
-                { label: 'Assets', href: '/assets' }
+                { label: 'Assets', href: '/assets' },
+                { label: 'Changelog', href: '/changelog' }
             ],
             Policies: [
                 { label: 'Terms', href: '/terms' },

src/lib/layouts/Main.svelte

@@ -4,9 +4,12 @@
     export type NavLink = {
         label: string;
         href: string;
+        showBadge?: boolean;
     };
     export const isHeaderHidden = writable(false);
     export const isMobileNavOpen = writable(false);
+
+    const initialized = writable(false);
 </script>
 
 <script lang="ts">
@@ -15,8 +18,10 @@
     import { BANNER_KEY } from '$lib/constants';
     import { isVisible } from '$lib/utils/isVisible';
     import { createScrollInfo } from '$lib/utils/scroll';
+    import { hasNewChangelog } from '$routes/changelog/utils';
     import { addEventListener } from '@melt-ui/svelte/internal/helpers';
     import { onMount } from 'svelte';
+    import { page } from '$app/stores';
 
     export let omitMainId = false;
     let theme: 'light' | 'dark' | null = 'dark';
@@ -75,6 +80,9 @@
     }
 
     onMount(() => {
+        setTimeout(() => {
+            $initialized = true;
+        }, 1000);
         return setupThemeObserver();
     });
 
@@ -91,6 +99,11 @@
             label: 'Blog',
             href: '/blog'
         },
+        {
+            label: 'Changelog',
+            href: '/changelog',
+            showBadge: hasNewChangelog() && !$page.url.pathname.includes('/changelog')
+        },
         {
             label: 'Pricing',
             href: '/pricing'
@@ -204,9 +217,15 @@
                 </a>
                 <nav class="aw-main-header-nav" aria-label="Main">
                     <ul class="aw-main-header-nav-list">
-                        {#each navLinks as { label, href }}
+                        {#each navLinks as navLink}
                             <li class="aw-main-header-nav-item">
-                                <a class="aw-link" {href}>{label}</a>
+                                <a
+                                    class="aw-link"
+                                    href={navLink.href}
+                                    data-initialized={$initialized ? '' : undefined}
+                                    data-badge={navLink.showBadge ? '' : undefined}
+                                    >{navLink.label}
+                                </a>
                             </li>
                         {/each}
                     </ul>
@@ -242,3 +261,40 @@
         <slot />
     </main>
 </div>
+
+<style lang="scss">
+    .nav-badge {
+        margin-inline-start: 0.5rem;
+        padding-inline: 0.375rem;
+    }
+
+    @keyframes scale-in {
+        0% {
+            transform: scale(0);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+
+    [data-badge] {
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            background-color: hsl(var(--aw-color-accent));
+            border-radius: 100%;
+            width: 0.375rem;
+            height: 0.375rem;
+
+            inset-block-start: -2px;
+            inset-inline-end: -4px;
+            translate: 100%;
+        }
+
+        &:not([data-initialized])::after {
+            animation: scale-in 0.2s ease-out;
+        }
+    }
+</style>

src/lib/utils/date.ts

@@ -1,7 +1,7 @@
 export const formatDate = (date: string): string => {
-    const dt = new Date(date);
-    const month = dt.toLocaleString('default', { month: 'short' });
-    const day = dt.getDate();
-    const year = dt.getFullYear();
-    return `${month} ${day}, ${year}`;
+  const dt = new Date(date);
+  const month = dt.toLocaleString('default', { month: 'short' });
+  const day = dt.getDate();
+  const year = dt.getFullYear();
+  return `${month} ${day}, ${year}`;
 };

src/lib/utils/is.ts

@@ -0,0 +1,9 @@
+export function isNumeric(value: unknown): boolean {
+    if (typeof value === 'number' && !isNaN(value)) {
+        return true;
+    }
+    if (typeof value === 'string' && value.trim() !== '') {
+        return !isNaN(Number(value));
+    }
+    return false;
+}

src/markdoc/layouts/Changelog.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" context="module">
+    import { hasContext, setContext } from 'svelte';
+
+    export type ChangelogData = {
+        title: string;
+        description?: string;
+        date: string;
+        cover?: string;
+    };
+
+    const CONTEXT_KEY = Symbol('changelog');
+
+    function initContext() {
+        setContext(CONTEXT_KEY, null);
+    }
+
+    export function isInsideChangelog() {
+        return hasContext(CONTEXT_KEY);
+    }
+</script>
+
+<script lang="ts">
+    initContext();
+</script>
+
+<!-- Empty so it can be displayed inline -->
+<slot />

src/markdoc/nodes/Item.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+    import { isInsideChangelog } from '$markdoc/layouts/Changelog.svelte';
     import { getContext } from 'svelte';
 
     const isDocs = getContext('isDocs') ?? false;
+    const inChangelog = isInsideChangelog();
 </script>
 
-<li><p class:aw-paragraph-lg={!isDocs}><slot /></p></li>
+<li><p class:aw-paragraph-lg={!isDocs && !inChangelog}><slot /></p></li>

src/markdoc/nodes/Link.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { isInsideChangelog } from '$markdoc/layouts/Changelog.svelte';
     import { getContext } from 'svelte';
     import { TABLE_CTX_KEY } from './Table.svelte';
 
@@ -10,13 +11,21 @@
     const rel = isExternal ? 'noopener nofollow' : undefined;
 
     const isDocs = getContext('isDocs') ?? false;
+    const inChangelog = isInsideChangelog();
     const inTable = getContext(TABLE_CTX_KEY) ?? false;
 </script>
 
 <a
-    class="aw-link is-inline"
+    class="aw-link is-inline {isDocs || inChangelog ? 'aw-paragraph-md' : 'aw-paragraph-lg'}"
+    data-in-changelog={inChangelog ? '' : undefined}
     {href}
     {title}
     {target}
     {rel}><slot /></a
->
+>
+
+<style lang="scss">
+    [data-in-changelog]:last-child {
+        margin-block-start: 1rem;
+    }
+</style>