diff --git a/website/src/pages/plugins.astro b/website/src/pages/plugins.astro index 6e96a132..6119f834 100644 --- a/website/src/pages/plugins.astro +++ b/website/src/pages/plugins.astro @@ -69,6 +69,7 @@ const apiUrl = import.meta.env.DEV ? null : snapshotUrl;
Loading plugins…
+
@@ -94,6 +95,11 @@ const apiUrl = import.meta.env.DEV ? null : snapshotUrl; const searchInput = document.getElementById("plugins-search"); const sortSelect = document.getElementById("plugins-sort"); const metaEl = document.getElementById("plugins-meta"); + const moreButton = document.getElementById("plugins-more"); + + // 24 fills complete rows in both the 3-column and 2-column grid layouts. + const SHOW_LIMIT = 24; + let showAll = false; const LANG_COLORS = { TypeScript: "#3178c6", @@ -214,9 +220,16 @@ const apiUrl = import.meta.env.DEV ? null : snapshotUrl; function render() { const q = searchInput.value.trim().toLowerCase(); const visible = sortPlugins(plugins.filter((p) => matches(p, q)), sortSelect.value); + const shown = showAll ? visible : visible.slice(0, SHOW_LIMIT); grid.replaceChildren(); - for (const p of visible) grid.appendChild(buildCard(p)); + for (const p of shown) grid.appendChild(buildCard(p)); + + const hiddenCount = visible.length - shown.length; + moreButton.hidden = hiddenCount === 0; + if (hiddenCount > 0) { + moreButton.textContent = "show " + hiddenCount + " more"; + } if (visible.length === 0) { statusEl.textContent = q @@ -247,6 +260,7 @@ const apiUrl = import.meta.env.DEV ? null : snapshotUrl; plugins = []; metaEl.textContent = ""; grid.replaceChildren(); + moreButton.hidden = true; statusEl.textContent = "The plugin marketplace is warming up. Check back in a few minutes."; statusEl.hidden = false; @@ -276,6 +290,10 @@ const apiUrl = import.meta.env.DEV ? null : snapshotUrl; searchInput.addEventListener("input", render); sortSelect.addEventListener("change", render); + moreButton.addEventListener("click", () => { + showAll = true; + render(); + }); load(); @@ -556,6 +574,16 @@ const apiUrl = import.meta.env.DEV ? null : snapshotUrl; font-size: 0.85rem; } + .plugins-more { + display: flex; + margin: 2rem auto 0; + cursor: pointer; + } + + .plugins-more[hidden] { + display: none; + } + /* Publish */ .plugins-publish { margin-top: 3.5rem;