From dab7641b71b73c3755eb6ce2fc5e89bd1c9c5d79 Mon Sep 17 00:00:00 2001 From: jycouet Date: Wed, 1 Oct 2025 19:45:01 +0200 Subject: [PATCH 01/14] more-less --- .../src/routes/packages/Category.svelte | 194 +++++------------- 1 file changed, 53 insertions(+), 141 deletions(-) diff --git a/apps/svelte.dev/src/routes/packages/Category.svelte b/apps/svelte.dev/src/routes/packages/Category.svelte index 9af1971a6c..dc2fc05aa6 100644 --- a/apps/svelte.dev/src/routes/packages/Category.svelte +++ b/apps/svelte.dev/src/routes/packages/Category.svelte @@ -1,6 +1,5 @@ - -

{title}

- - {#if !at_start || !at_end} -
- - - -
- {/if}
{#if description}

{@html description}

{/if} -
- -
-
- {#each packages as pkg} -
- -
- {/each} +
+ {#each visiblePackages as pkg} +
+
-
+ {/each} +
-
{ - const left = e.currentTarget.scrollLeft; - content.style.translate = `-${left}px`; - - update(); - }} - > -
- {#each packages as pkg} -
- -
- {/each} -
+ {#if packages.length > INITIAL_ITEMS} +
+
-
+ {/if}
From af99bcb325186c6d61fcff58df991f86daa57524 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 14:10:06 -0400 Subject: [PATCH 02/14] tweak styles --- .../src/routes/packages/Category.svelte | 52 +++++++++++-------- .../src/routes/packages/PackageCard.svelte | 4 +- packages/icons/icons/minus.svg | 1 + packages/icons/icons/plus.svg | 1 + 4 files changed, 33 insertions(+), 25 deletions(-) create mode 100644 packages/icons/icons/minus.svg create mode 100644 packages/icons/icons/plus.svg diff --git a/apps/svelte.dev/src/routes/packages/Category.svelte b/apps/svelte.dev/src/routes/packages/Category.svelte index dc2fc05aa6..24c1c70a1b 100644 --- a/apps/svelte.dev/src/routes/packages/Category.svelte +++ b/apps/svelte.dev/src/routes/packages/Category.svelte @@ -35,9 +35,16 @@ {#if packages.length > INITIAL_ITEMS}
- +
{/if} @@ -74,28 +81,27 @@ .show-more-container { display: flex; - justify-content: flex-end; - margin-top: 1rem; - } - - .show-more-btn { - background: var(--sk-bg-3); - border: 1px solid var(--sk-border); - border-radius: var(--sk-border-radius); - padding: 0.75rem 1.5rem; - font: var(--sk-font-ui-medium); - font-size: 1.2rem; - color: var(--sk-text-1); - cursor: pointer; - transition: all 0.2s ease; - - &:hover { - background: var(--sk-bg-4); - border-color: var(--sk-text-3); + justify-content: flex-start; + margin-top: 2rem; + + label { + font: var(--sk-font-ui-small); + display: flex; + align-items: center; + gap: 1rem; + + .icon { + mask-size: 2rem; + mask-image: url(icons/minus); + } + + button[aria-pressed='false'] .icon { + mask-image: url(icons/plus); + } } - &:active { - transform: translateY(1px); + button { + /* width: 10rem; */ } } diff --git a/apps/svelte.dev/src/routes/packages/PackageCard.svelte b/apps/svelte.dev/src/routes/packages/PackageCard.svelte index 5e4d6d51b5..1355c9ea43 100644 --- a/apps/svelte.dev/src/routes/packages/PackageCard.svelte +++ b/apps/svelte.dev/src/routes/packages/PackageCard.svelte @@ -130,10 +130,10 @@ height: 100%; min-height: 0; - background-color: var(--sk-bg-2); + background-color: var(--sk-bg-1); - border: 1px solid var(--sk-bg-4); border-radius: var(--sk-border-radius); + filter: drop-shadow(0.2rem 0.4rem 0.6rem rgb(0 0 0 / 0.1)); padding: 1rem; min-height: 16em; diff --git a/packages/icons/icons/minus.svg b/packages/icons/icons/minus.svg new file mode 100644 index 0000000000..39316d686e --- /dev/null +++ b/packages/icons/icons/minus.svg @@ -0,0 +1 @@ + diff --git a/packages/icons/icons/plus.svg b/packages/icons/icons/plus.svg new file mode 100644 index 0000000000..44adbb4b4b --- /dev/null +++ b/packages/icons/icons/plus.svg @@ -0,0 +1 @@ + From 0e4c1408d76b649fd2b1e0f9045d05e9e8c569be Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 14:13:05 -0400 Subject: [PATCH 03/14] style tweaks --- .../src/routes/packages/Category.svelte | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/apps/svelte.dev/src/routes/packages/Category.svelte b/apps/svelte.dev/src/routes/packages/Category.svelte index 24c1c70a1b..240ed014cf 100644 --- a/apps/svelte.dev/src/routes/packages/Category.svelte +++ b/apps/svelte.dev/src/routes/packages/Category.svelte @@ -69,9 +69,13 @@ .content { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 1fr; gap: 2rem; margin-top: 1rem; + + @media (min-width: 1024px) { + grid-template-columns: repeat(3, 1fr); + } } .item { @@ -81,7 +85,7 @@ .show-more-container { display: flex; - justify-content: flex-start; + justify-content: flex-end; margin-top: 2rem; label { @@ -101,13 +105,15 @@ } button { - /* width: 10rem; */ + order: 1; } - } - @media (max-width: 1024px) { - .content { - grid-template-columns: 1fr; + @media (min-width: 1024px) { + justify-content: flex-start; + + button { + order: 0; + } } } From fe0cf690629a33330412b61902fce8b64c12fac8 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 14:16:31 -0400 Subject: [PATCH 04/14] tweak --- apps/svelte.dev/src/routes/packages/PackageCard.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/src/routes/packages/PackageCard.svelte b/apps/svelte.dev/src/routes/packages/PackageCard.svelte index 1355c9ea43..6bd7f4ab41 100644 --- a/apps/svelte.dev/src/routes/packages/PackageCard.svelte +++ b/apps/svelte.dev/src/routes/packages/PackageCard.svelte @@ -133,13 +133,13 @@ background-color: var(--sk-bg-1); border-radius: var(--sk-border-radius); - filter: drop-shadow(0.2rem 0.4rem 0.6rem rgb(0 0 0 / 0.1)); + filter: drop-shadow(0.2rem 0.4rem 0.6rem rgb(0 0 0 / 0.07)); padding: 1rem; min-height: 16em; &:hover { - filter: drop-shadow(0.2rem, 0.4rem, 1rem rgb(0 0 0 / 0.1)); + filter: drop-shadow(0.3rem 0.5rem 0.7rem rgb(0 0 0 / 0.1)); } a { From f622bee24f2eb4db8e724710955da039e5835a30 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 14:28:04 -0400 Subject: [PATCH 05/14] fix scroll --- .../src/routes/packages/Category.svelte | 20 +++++++++++++++++-- packages/site-kit/src/lib/actions/utils.ts | 5 ++++- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/apps/svelte.dev/src/routes/packages/Category.svelte b/apps/svelte.dev/src/routes/packages/Category.svelte index 240ed014cf..3836b4c48d 100644 --- a/apps/svelte.dev/src/routes/packages/Category.svelte +++ b/apps/svelte.dev/src/routes/packages/Category.svelte @@ -1,5 +1,6 @@
-
+

{title}

@@ -40,7 +43,20 @@ class="raised" aria-label="Show more" aria-pressed={showAll} - onclick={() => (showAll = !showAll)}> { + const { bottom } = header.getBoundingClientRect(); + + // if the current section is wholly visible, don't muck about with the scroll position + if (bottom > 0) { + showAll = !showAll; + return; + } + + // otherwise, keep the button in the same position + fix_position(e.currentTarget, () => { + showAll = !showAll; + }); + }}> {showAll ? 'show less' : `show all (${packages.length})`} diff --git a/packages/site-kit/src/lib/actions/utils.ts b/packages/site-kit/src/lib/actions/utils.ts index 513dd0f5e9..cabcf380e0 100644 --- a/packages/site-kit/src/lib/actions/utils.ts +++ b/packages/site-kit/src/lib/actions/utils.ts @@ -1,4 +1,6 @@ -export function fix_position(element: HTMLElement, fn: Function) { +import { tick } from 'svelte'; + +export async function fix_position(element: HTMLElement, fn: Function) { let scroll_parent: HTMLElement | null = element; while ((scroll_parent = scroll_parent.parentElement)) { @@ -9,6 +11,7 @@ export function fix_position(element: HTMLElement, fn: Function) { const top = element.getBoundingClientRect().top; fn(); + await tick(); const delta = element.getBoundingClientRect().top - top; if (delta !== 0) { From 7db7c1c0e5953d43da762b62f3157b02594bcef1 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 14:53:49 -0400 Subject: [PATCH 06/14] dark mode --- apps/svelte.dev/src/routes/packages/PackageCard.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/svelte.dev/src/routes/packages/PackageCard.svelte b/apps/svelte.dev/src/routes/packages/PackageCard.svelte index 6bd7f4ab41..39333e70ba 100644 --- a/apps/svelte.dev/src/routes/packages/PackageCard.svelte +++ b/apps/svelte.dev/src/routes/packages/PackageCard.svelte @@ -138,6 +138,10 @@ min-height: 16em; + :root.dark & { + background-color: var(--sk-bg-3); + } + &:hover { filter: drop-shadow(0.3rem 0.5rem 0.7rem rgb(0 0 0 / 0.1)); } From de61946c7bfcdc4cf0fea27eb734feef7438a59c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 15:08:39 -0400 Subject: [PATCH 07/14] tweaks --- .../src/routes/packages/Category.svelte | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/apps/svelte.dev/src/routes/packages/Category.svelte b/apps/svelte.dev/src/routes/packages/Category.svelte index 3836b4c48d..4c532f646b 100644 --- a/apps/svelte.dev/src/routes/packages/Category.svelte +++ b/apps/svelte.dev/src/routes/packages/Category.svelte @@ -19,13 +19,12 @@
-
-

- {title} -

-
+

+ {title} +

+ {#if description} -

{@html description}

+

{@html description}

{/if}
@@ -47,7 +46,7 @@ const { bottom } = header.getBoundingClientRect(); // if the current section is wholly visible, don't muck about with the scroll position - if (bottom > 0) { + if (!showAll || bottom > 0) { showAll = !showAll; return; } @@ -70,12 +69,8 @@ margin-bottom: 3rem; } - header { - margin-bottom: 1rem; - - h2 { - margin: 0; - } + h2 { + margin: 0 0 1rem 0; } h3 { From e2e491c01f62ff8ed3b4238fd60b32d55dd26728 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 15:20:04 -0400 Subject: [PATCH 08/14] more useful title --- .../src/routes/packages/PackageCard.svelte | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/packages/PackageCard.svelte b/apps/svelte.dev/src/routes/packages/PackageCard.svelte index 39333e70ba..df2ad00bd4 100644 --- a/apps/svelte.dev/src/routes/packages/PackageCard.svelte +++ b/apps/svelte.dev/src/routes/packages/PackageCard.svelte @@ -8,6 +8,15 @@ }; let { pkg }: Props = $props(); + + const formatter = new Intl.DateTimeFormat(undefined, { + weekday: 'short', + year: 'numeric', + month: 'short', + day: 'numeric', + hour: 'numeric', + minute: 'numeric' + });
@@ -37,7 +46,10 @@ {/if} {pkg.version} - {ago(new Date(pkg.updated), true)} + + + {ago(new Date(pkg.updated), true)} +
From 8eb152efec0895b8f54134a3023695ec3ee4b241 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 15:30:31 -0400 Subject: [PATCH 09/14] make the entire card a link --- .../src/routes/packages/PackageCard.svelte | 121 +++++++++--------- 1 file changed, 63 insertions(+), 58 deletions(-) diff --git a/apps/svelte.dev/src/routes/packages/PackageCard.svelte b/apps/svelte.dev/src/routes/packages/PackageCard.svelte index df2ad00bd4..85005158f2 100644 --- a/apps/svelte.dev/src/routes/packages/PackageCard.svelte +++ b/apps/svelte.dev/src/routes/packages/PackageCard.svelte @@ -20,8 +20,8 @@
-
- {#snippet title()} + {#snippet contents()} +

{#if pkg.official} @@ -29,49 +29,56 @@ {pkg.name}

- {/snippet} - - {#if pkg.homepage} - e.stopPropagation()} - > - {@render title()} - - {:else} - {@render title()} - {/if} - - {pkg.version} - - - {ago(new Date(pkg.updated), true)} - - -
-

{pkg.description}

+ + {pkg.version} -

- {#if pkg.downloads} - - - {format_number(+pkg.downloads)} + + {ago(new Date(pkg.updated), true)} + - {/if} +

- {#if pkg.github_stars} - - - {format_number(pkg.github_stars)} - - {/if} +

{pkg.description}

- +

+ {#if pkg.downloads} + + + {format_number(+pkg.downloads)} + + {/if} + + {#if pkg.github_stars} + + + {format_number(pkg.github_stars)} + + {/if} + +

+ {/snippet} + + {#if pkg.homepage} + e.stopPropagation()} + > + {@render contents()} + + {:else} +
+ {@render contents()} +
+ {/if} + + +
{#if !pkg.svAlias} e.stopPropagation()} > {/if} - - {#if pkg.homepage} - e.stopPropagation()} - > - {/if} -

+
From 5cc6a8192b845e0b43c1a8be0d36c0d0667c5cb7 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 15:41:45 -0400 Subject: [PATCH 13/14] remove link to sveltesociety.dev --- apps/svelte.dev/src/routes/packages/+page.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/packages/+page.svelte b/apps/svelte.dev/src/routes/packages/+page.svelte index 7ef70ddaab..42039f21c0 100644 --- a/apps/svelte.dev/src/routes/packages/+page.svelte +++ b/apps/svelte.dev/src/routes/packages/+page.svelte @@ -17,7 +17,6 @@

Packages

We've collected a few of our favourite packages that work well with Svelte and SvelteKit apps. - Discover more at sveltesociety.dev.

From d6406c2132453eb5fc7422a96d6719accc194d6a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 1 Oct 2025 15:49:22 -0400 Subject: [PATCH 14/14] add note --- apps/svelte.dev/src/routes/packages/+page.svelte | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/apps/svelte.dev/src/routes/packages/+page.svelte b/apps/svelte.dev/src/routes/packages/+page.svelte index 42039f21c0..684ba79c50 100644 --- a/apps/svelte.dev/src/routes/packages/+page.svelte +++ b/apps/svelte.dev/src/routes/packages/+page.svelte @@ -17,6 +17,7 @@

Packages

We've collected a few of our favourite packages that work well with Svelte and SvelteKit apps. + Official packages are marked with the logo.

@@ -44,4 +45,17 @@ h1 { margin: 0 0 2rem 0; } + + .svelte-logo { + position: relative; + top: 0.15em; + display: inline-block; + width: 1em; + aspect-ratio: 1; + background: #ff3e00; + mask-size: contain; + mask-image: url(icons/svelte-cutout); + mask-repeat: no-repeat; + mask-position: 50% 50%; + }