Redesign the ecosystem package registry as a filterable card grid#254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Zethson merged 14 commits into from
Aug 18, 2026
Merged

Redesign the ecosystem package registry as a filterable card grid #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
286c113
Redesign the ecosystem package registry as a filterable card grid
Zethson Aug 11, 2026
df9b1b3
Pin Netlify deploy previews to the Hugo version production builds with
Zethson Aug 11, 2026
166fecc
Restore the `try` guard around the registry fetch
Zethson Aug 11, 2026
fe44400
Drop the Hugo version note from the README
Zethson Aug 11, 2026
d8ea9ad
Revert the registry fetch to failing the build
Zethson Aug 11, 2026
adbd5fd
Merge remote-tracking branch 'origin/main' into redesign-ecosystem-re…
Zethson Aug 13, 2026
3b96ce4
Read the registry's controlled vocabulary instead of normalising tags
Zethson Aug 13, 2026
3e767c4
One sentence per line in the netlify.toml and template comments
Zethson Aug 14, 2026
8089f7a
Pin the deploy workflow to the same Hugo as previews
Zethson Aug 14, 2026
2515ba1
Stop caching the ecosystem registry JSON between builds
Zethson Aug 14, 2026
d6d2f44
Drop the work-in-progress caveat from the ecosystem intro
Zethson Aug 14, 2026
36c4ea1
Sort core packages first and tint them
Zethson Aug 14, 2026
daa16a0
Fix core cards being unstyled and unfilterable
Zethson Aug 14, 2026
3990c12
Merge main, keeping the card grid and the new contents sidebar
Zethson Aug 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/gh-pages.yml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ jobs:
- name: Setup Hugo
uses: peaceiris/actions-hugo@v3
with:
hugo-version: "latest"
hugo-version: "0.164.0" # keep in step with netlify.toml, so previews match production
extended: true

- name: Build
Expand Down
367 changes: 364 additions & 3 deletions assets/main.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1027,9 +1027,370 @@ body {
}
}

#eco-table tbody {
// TODO: I think this shouldn't be neccesary
border-top: 0px;
// Specific to /packages#ecosystem — the community package registry

$eco-radius: 0.75rem;
$eco-hues:
$anndataorange, $scanpycerise, $mudatagreen, $spatialdatablue, $squidpyviolet,
$scirpypurple, $scviyellow, $muonaquamarine;

#ecosystem-packages {
margin: 2rem 0 4rem;

.eco-sprite {
display: none;
}

svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.eco-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
}

.eco-search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 22rem;

.eco-search-icon {
position: absolute;
left: 1.1rem;
width: 1.1rem;
height: 1.1rem;
color: $greydesc;
pointer-events: none;
}

input {
width: 100%;
height: 3.25rem;
padding: 0 2.9rem;
font-size: 1rem;
color: $tiletext;
background-color: $backtickbg;
border: 1px solid $overline;
border-radius: 2rem;
outline: none;
transition: all 200ms ease-in-out;
text-overflow: ellipsis;

&::placeholder {
color: $greydesc;
}
&:focus {
background-color: white;
border-color: $greydesc;
box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.04);
}
// The native affordance duplicates our own clear button
&::-webkit-search-cancel-button {
display: none;
}
}
}

.eco-search-clear {
position: absolute;
right: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
padding: 0;
border: 0;
border-radius: 50%;
color: $tiletext2;
background-color: $tilebg;
cursor: pointer;
transition: all 200ms ease-in-out;

svg {
width: 0.7rem;
height: 0.7rem;
}
&:hover {
color: white;
background-color: $tiletext;
}
}

.eco-count {
margin: 0;
font-size: 0.95rem;
color: $greydesc;
white-space: nowrap;
}

.eco-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 1.25rem 0 2rem;
}

.eco-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.85rem;
font-size: 0.85rem;
color: $tiletext2;
background-color: white;
border: 1px solid $overline;
border-radius: 2rem;
cursor: pointer;
transition: all 200ms ease-in-out;

&:hover {
color: $tiletext3;
border-color: $tilebg2;
background-color: $tilebg4;
}
&.is-active {
color: white;
background-color: $tiletext;
border-color: $tiletext;
}
.eco-chip-count {
font-size: 0.75rem;
opacity: 0.55;
}
}

.eco-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
gap: 1.25rem;
}

.eco-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.8rem;
padding: 1.35rem;
background-color: white;
border: 1px solid $overline;
border-radius: $eco-radius;
transition: all 200ms ease-in-out;

&:hover {
border-color: $tilebg2;
box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
&[hidden] {
display: none;
}
}

// Packages maintained by the core team sort to the front and carry a wash of colour
.eco-card--core {
background-color: rgba($scviyellow, 0.08);
}

.eco-card-head {
display: flex;
align-items: center;
gap: 0.85rem;
}

.eco-logo {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
overflow: hidden;
border-radius: 0.6rem;
background-color: $tilebg4;

img {
width: 100%;
height: 100%;
padding: 0.3rem;
object-fit: contain;
}
}

.eco-logo--mono {
font-size: 1.3rem;
font-weight: 800;
color: $tiletext;

@each $hue in $eco-hues {
&[data-hue="#{index($eco-hues, $hue) - 1}"] {
background-color: rgba($hue, 0.18);
}
}
}

.eco-card-heading {
min-width: 0;
}

// Element selector included to beat the generic `#page-content .post h3` margins
.eco-card h3.eco-card-name {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
line-height: 1.3;
overflow-wrap: anywhere;

a {
color: black;
text-decoration: none;

// Make the whole card clickable without nesting interactive elements
&::after {
content: "";
position: absolute;
inset: 0;
border-radius: $eco-radius;
}
}
}

.eco-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0.25rem 0 0;
font-size: 0.75rem;
color: $greydesc;

.eco-badge {
padding: 0.05rem 0.35rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: white;
background-color: $tiletext;
border-radius: 0.25rem;
}
.eco-badge--lang {
color: $tiletext;
background-color: $tilebg2;
}
.eco-version {
font-family: "JetBrains Mono", Menlo, monospace;
}
.eco-version + .eco-license::before {
content: "·";
margin-right: 0.4rem;
}
}

.eco-card-desc {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: $tiletext2;
}

.eco-card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}

.eco-tag {
position: relative;
z-index: 1;
padding: 0.2rem 0.5rem;
font-size: 0.72rem;
color: $greydesc;
background-color: $tilebg4;
border: 0;
border-radius: 0.35rem;
cursor: pointer;
transition: all 200ms ease-in-out;

&:hover {
color: $tiletext3;
background-color: $tilebg;
}
&.is-active {
color: white;
background-color: $tiletext;
}
}

.eco-card-links {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: auto;
padding-top: 0.3rem;

a {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.6rem;
font-size: 0.78rem;
color: $tiletext2;
text-decoration: none;
background-color: $tilebg4;
border-radius: 0.4rem;
transition: all 200ms ease-in-out;

svg {
width: 0.85rem;
height: 0.85rem;
}
&:hover {
color: white;
background-color: $tiletext;
}
}
}

.eco-empty {
padding: 4rem 0;
text-align: center;
color: $greydesc;

.eco-empty-reset {
padding: 0;
color: $tiletext;
background: none;
border: 0;
text-decoration: underline;
cursor: pointer;
}
}

@media (max-width: 50rem) {
.eco-grid {
grid-template-columns: 1fr;
}
.eco-count {
order: -1;
}
}
}

// Specific to /tutorials
Expand Down
5 changes: 5 additions & 0 deletions config.toml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,3 +11,8 @@ images = ["img/scverse-social-card.png"]

[markup.goldmark.renderer]
unsafe= true

# The ecosystem registry rebuilds this site when packages.json changes, so a cached copy defeats the trigger.
# Hugo caches remote resources forever by default, and on Netlify that cache survives between builds.
[caches.getresource]
maxAge = 0
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Redesign the ecosystem package registry as a filterable card grid#254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Zethson
merged 14 commits into

from

Aug 18, 2026
 Merged


Redesign the ecosystem package registry as a filterable card grid
#254
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
286c113

Redesign the ecosystem package registry as a filterable card grid


Zethson Aug 11, 2026
df9b1b3

Pin Netlify deploy previews to the Hugo version production builds with


Zethson Aug 11, 2026
166fecc

Restore the `try` guard around the registry fetch


Zethson Aug 11, 2026
fe44400

Drop the Hugo version note from the README


Zethson Aug 11, 2026
d8ea9ad

Revert the registry fetch to failing the build


Zethson Aug 11, 2026
adbd5fd

Merge remote-tracking branch 'origin/main' into redesign-ecosystem-re…


Zethson Aug 13, 2026
3b96ce4

Read the registry's controlled vocabulary instead of normalising tags


Zethson Aug 13, 2026
3e767c4

One sentence per line in the netlify.toml and template comments


Zethson Aug 14, 2026
8089f7a

Pin the deploy workflow to the same Hugo as previews


Zethson Aug 14, 2026
2515ba1

Stop caching the ecosystem registry JSON between builds


Zethson Aug 14, 2026
d6d2f44

Drop the work-in-progress caveat from the ecosystem intro


Zethson Aug 14, 2026
36c4ea1

Sort core packages first and tint them


Zethson Aug 14, 2026
daa16a0

Fix core cards being unstyled and unfilterable


Zethson Aug 14, 2026
3990c12

Merge main, keeping the card grid and the new contents sidebar


Zethson Aug 14, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.github/workflows/gh-pages.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ jobs:
 - name: Setup Hugo
 uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: "latest"
 hugo-version: "0.164.0" # keep in step with netlify.toml, so previews match production
 extended: true

 - name: Build
Expand Down

367 changes: 364 additions & 3 deletions
assets/main.scss

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1027,9 +1027,370 @@ body {
 }
}

#eco-table tbody {
 // TODO: I think this shouldn't be neccesary
 border-top: 0px;
// Specific to /packages#ecosystem — the community package registry

$eco-radius: 0.75rem;
$eco-hues:
 $anndataorange, $scanpycerise, $mudatagreen, $spatialdatablue, $squidpyviolet,
 $scirpypurple, $scviyellow, $muonaquamarine;

#ecosystem-packages {
 margin: 2rem 0 4rem;

 .eco-sprite {
 display: none;
 }

 svg {
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 }

 .eco-toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.5rem 1.5rem;
 }

 .eco-search {
 position: relative;
 display: flex;
 align-items: center;
 flex: 1 1 22rem;

 .eco-search-icon {
 position: absolute;
 left: 1.1rem;
 width: 1.1rem;
 height: 1.1rem;
 color: $greydesc;
 pointer-events: none;
 }

 input {
 width: 100%;
 height: 3.25rem;
 padding: 0 2.9rem;
 font-size: 1rem;
 color: $tiletext;
 background-color: $backtickbg;
 border: 1px solid $overline;
 border-radius: 2rem;
 outline: none;
 transition: all 200ms ease-in-out;
 text-overflow: ellipsis;

 &::placeholder {
 color: $greydesc;
 }
 &:focus {
 background-color: white;
 border-color: $greydesc;
 box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.04);
 }
 // The native affordance duplicates our own clear button
 &::-webkit-search-cancel-button {
 display: none;
 }
 }
 }

 .eco-search-clear {
 position: absolute;
 right: 0.9rem;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 1.6rem;
 height: 1.6rem;
 padding: 0;
 border: 0;
 border-radius: 50%;
 color: $tiletext2;
 background-color: $tilebg;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.7rem;
 height: 0.7rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-count {
 margin: 0;
 font-size: 0.95rem;
 color: $greydesc;
 white-space: nowrap;
 }

 .eco-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin: 1.25rem 0 2rem;
 }

 .eco-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.35rem 0.85rem;
 font-size: 0.85rem;
 color: $tiletext2;
 background-color: white;
 border: 1px solid $overline;
 border-radius: 2rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 border-color: $tilebg2;
 background-color: $tilebg4;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 border-color: $tiletext;
 }
 .eco-chip-count {
 font-size: 0.75rem;
 opacity: 0.55;
 }
 }

 .eco-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
 gap: 1.25rem;
 }

 .eco-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 padding: 1.35rem;
 background-color: white;
 border: 1px solid $overline;
 border-radius: $eco-radius;
 transition: all 200ms ease-in-out;

 &:hover {
 border-color: $tilebg2;
 box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06);
 transform: translateY(-2px);
 }
 &[hidden] {
 display: none;
 }
 }

 // Packages maintained by the core team sort to the front and carry a wash of colour
 .eco-card--core {
 background-color: rgba($scviyellow, 0.08);
 }

 .eco-card-head {
 display: flex;
 align-items: center;
 gap: 0.85rem;
 }

 .eco-logo {
 display: grid;
 place-items: center;
 flex: 0 0 auto;
 width: 2.75rem;
 height: 2.75rem;
 overflow: hidden;
 border-radius: 0.6rem;
 background-color: $tilebg4;

 img {
 width: 100%;
 height: 100%;
 padding: 0.3rem;
 object-fit: contain;
 }
 }

 .eco-logo--mono {
 font-size: 1.3rem;
 font-weight: 800;
 color: $tiletext;

 @each $hue in $eco-hues {
 &[data-hue="#{index($eco-hues, $hue) - 1}"] {
 background-color: rgba($hue, 0.18);
 }
 }
 }

 .eco-card-heading {
 min-width: 0;
 }

 // Element selector included to beat the generic `#page-content .post h3` margins
 .eco-card h3.eco-card-name {
 margin: 0;
 font-size: 1.15rem;
 font-weight: 800;
 line-height: 1.3;
 overflow-wrap: anywhere;

 a {
 color: black;
 text-decoration: none;

 // Make the whole card clickable without nesting interactive elements
 &::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: $eco-radius;
 }
 }
 }

 .eco-card-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem;
 margin: 0.25rem 0 0;
 font-size: 0.75rem;
 color: $greydesc;

 .eco-badge {
 padding: 0.05rem 0.35rem;
 font-size: 0.65rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: white;
 background-color: $tiletext;
 border-radius: 0.25rem;
 }
 .eco-badge--lang {
 color: $tiletext;
 background-color: $tilebg2;
 }
 .eco-version {
 font-family: "JetBrains Mono", Menlo, monospace;
 }
 .eco-version + .eco-license::before {
 content: "·";
 margin-right: 0.4rem;
 }
 }

 .eco-card-desc {
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin: 0;
 font-size: 0.9rem;
 line-height: 1.55;
 color: $tiletext2;
 }

 .eco-card-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .eco-tag {
 position: relative;
 z-index: 1;
 padding: 0.2rem 0.5rem;
 font-size: 0.72rem;
 color: $greydesc;
 background-color: $tilebg4;
 border: 0;
 border-radius: 0.35rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 background-color: $tilebg;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-card-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin-top: auto;
 padding-top: 0.3rem;

 a {
 position: relative;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.3rem 0.6rem;
 font-size: 0.78rem;
 color: $tiletext2;
 text-decoration: none;
 background-color: $tilebg4;
 border-radius: 0.4rem;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.85rem;
 height: 0.85rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }
 }

 .eco-empty {
 padding: 4rem 0;
 text-align: center;
 color: $greydesc;

 .eco-empty-reset {
 padding: 0;
 color: $tiletext;
 background: none;
 border: 0;
 text-decoration: underline;
 cursor: pointer;
 }
 }

 @media (max-width: 50rem) {
 .eco-grid {
 grid-template-columns: 1fr;
 }
 .eco-count {
 order: -1;
 }
 }
}

// Specific to /tutorials
Expand Down

5 changes: 5 additions & 0 deletions
config.toml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,3 +11,8 @@ images = ["img/scverse-social-card.png"]

[markup.goldmark.renderer]
unsafe= true

# The ecosystem registry rebuilds this site when packages.json changes, so a cached copy defeats the trigger.
# Hugo caches remote resources forever by default, and on Netlify that cache survives between builds.
[caches.getresource]
maxAge = 0
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Redesign the ecosystem package registry as a filterable card grid#254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Zethson
merged 14 commits into

from

Aug 18, 2026
 Merged


Redesign the ecosystem package registry as a filterable card grid
#254
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
286c113

Redesign the ecosystem package registry as a filterable card grid


Zethson Aug 11, 2026
df9b1b3

Pin Netlify deploy previews to the Hugo version production builds with


Zethson Aug 11, 2026
166fecc

Restore the `try` guard around the registry fetch


Zethson Aug 11, 2026
fe44400

Drop the Hugo version note from the README


Zethson Aug 11, 2026
d8ea9ad

Revert the registry fetch to failing the build


Zethson Aug 11, 2026
adbd5fd

Merge remote-tracking branch 'origin/main' into redesign-ecosystem-re…


Zethson Aug 13, 2026
3b96ce4

Read the registry's controlled vocabulary instead of normalising tags


Zethson Aug 13, 2026
3e767c4

One sentence per line in the netlify.toml and template comments


Zethson Aug 14, 2026
8089f7a

Pin the deploy workflow to the same Hugo as previews


Zethson Aug 14, 2026
2515ba1

Stop caching the ecosystem registry JSON between builds


Zethson Aug 14, 2026
d6d2f44

Drop the work-in-progress caveat from the ecosystem intro


Zethson Aug 14, 2026
36c4ea1

Sort core packages first and tint them


Zethson Aug 14, 2026
daa16a0

Fix core cards being unstyled and unfilterable


Zethson Aug 14, 2026
3990c12

Merge main, keeping the card grid and the new contents sidebar


Zethson Aug 14, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.github/workflows/gh-pages.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ jobs:
 - name: Setup Hugo
 uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: "latest"
 hugo-version: "0.164.0" # keep in step with netlify.toml, so previews match production
 extended: true

 - name: Build
Expand Down

367 changes: 364 additions & 3 deletions
assets/main.scss

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1027,9 +1027,370 @@ body {
 }
}

#eco-table tbody {
 // TODO: I think this shouldn't be neccesary
 border-top: 0px;
// Specific to /packages#ecosystem — the community package registry

$eco-radius: 0.75rem;
$eco-hues:
 $anndataorange, $scanpycerise, $mudatagreen, $spatialdatablue, $squidpyviolet,
 $scirpypurple, $scviyellow, $muonaquamarine;

#ecosystem-packages {
 margin: 2rem 0 4rem;

 .eco-sprite {
 display: none;
 }

 svg {
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 }

 .eco-toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.5rem 1.5rem;
 }

 .eco-search {
 position: relative;
 display: flex;
 align-items: center;
 flex: 1 1 22rem;

 .eco-search-icon {
 position: absolute;
 left: 1.1rem;
 width: 1.1rem;
 height: 1.1rem;
 color: $greydesc;
 pointer-events: none;
 }

 input {
 width: 100%;
 height: 3.25rem;
 padding: 0 2.9rem;
 font-size: 1rem;
 color: $tiletext;
 background-color: $backtickbg;
 border: 1px solid $overline;
 border-radius: 2rem;
 outline: none;
 transition: all 200ms ease-in-out;
 text-overflow: ellipsis;

 &::placeholder {
 color: $greydesc;
 }
 &:focus {
 background-color: white;
 border-color: $greydesc;
 box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.04);
 }
 // The native affordance duplicates our own clear button
 &::-webkit-search-cancel-button {
 display: none;
 }
 }
 }

 .eco-search-clear {
 position: absolute;
 right: 0.9rem;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 1.6rem;
 height: 1.6rem;
 padding: 0;
 border: 0;
 border-radius: 50%;
 color: $tiletext2;
 background-color: $tilebg;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.7rem;
 height: 0.7rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-count {
 margin: 0;
 font-size: 0.95rem;
 color: $greydesc;
 white-space: nowrap;
 }

 .eco-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin: 1.25rem 0 2rem;
 }

 .eco-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.35rem 0.85rem;
 font-size: 0.85rem;
 color: $tiletext2;
 background-color: white;
 border: 1px solid $overline;
 border-radius: 2rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 border-color: $tilebg2;
 background-color: $tilebg4;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 border-color: $tiletext;
 }
 .eco-chip-count {
 font-size: 0.75rem;
 opacity: 0.55;
 }
 }

 .eco-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
 gap: 1.25rem;
 }

 .eco-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 padding: 1.35rem;
 background-color: white;
 border: 1px solid $overline;
 border-radius: $eco-radius;
 transition: all 200ms ease-in-out;

 &:hover {
 border-color: $tilebg2;
 box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06);
 transform: translateY(-2px);
 }
 &[hidden] {
 display: none;
 }
 }

 // Packages maintained by the core team sort to the front and carry a wash of colour
 .eco-card--core {
 background-color: rgba($scviyellow, 0.08);
 }

 .eco-card-head {
 display: flex;
 align-items: center;
 gap: 0.85rem;
 }

 .eco-logo {
 display: grid;
 place-items: center;
 flex: 0 0 auto;
 width: 2.75rem;
 height: 2.75rem;
 overflow: hidden;
 border-radius: 0.6rem;
 background-color: $tilebg4;

 img {
 width: 100%;
 height: 100%;
 padding: 0.3rem;
 object-fit: contain;
 }
 }

 .eco-logo--mono {
 font-size: 1.3rem;
 font-weight: 800;
 color: $tiletext;

 @each $hue in $eco-hues {
 &[data-hue="#{index($eco-hues, $hue) - 1}"] {
 background-color: rgba($hue, 0.18);
 }
 }
 }

 .eco-card-heading {
 min-width: 0;
 }

 // Element selector included to beat the generic `#page-content .post h3` margins
 .eco-card h3.eco-card-name {
 margin: 0;
 font-size: 1.15rem;
 font-weight: 800;
 line-height: 1.3;
 overflow-wrap: anywhere;

 a {
 color: black;
 text-decoration: none;

 // Make the whole card clickable without nesting interactive elements
 &::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: $eco-radius;
 }
 }
 }

 .eco-card-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem;
 margin: 0.25rem 0 0;
 font-size: 0.75rem;
 color: $greydesc;

 .eco-badge {
 padding: 0.05rem 0.35rem;
 font-size: 0.65rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: white;
 background-color: $tiletext;
 border-radius: 0.25rem;
 }
 .eco-badge--lang {
 color: $tiletext;
 background-color: $tilebg2;
 }
 .eco-version {
 font-family: "JetBrains Mono", Menlo, monospace;
 }
 .eco-version + .eco-license::before {
 content: "·";
 margin-right: 0.4rem;
 }
 }

 .eco-card-desc {
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin: 0;
 font-size: 0.9rem;
 line-height: 1.55;
 color: $tiletext2;
 }

 .eco-card-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .eco-tag {
 position: relative;
 z-index: 1;
 padding: 0.2rem 0.5rem;
 font-size: 0.72rem;
 color: $greydesc;
 background-color: $tilebg4;
 border: 0;
 border-radius: 0.35rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 background-color: $tilebg;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-card-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin-top: auto;
 padding-top: 0.3rem;

 a {
 position: relative;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.3rem 0.6rem;
 font-size: 0.78rem;
 color: $tiletext2;
 text-decoration: none;
 background-color: $tilebg4;
 border-radius: 0.4rem;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.85rem;
 height: 0.85rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }
 }

 .eco-empty {
 padding: 4rem 0;
 text-align: center;
 color: $greydesc;

 .eco-empty-reset {
 padding: 0;
 color: $tiletext;
 background: none;
 border: 0;
 text-decoration: underline;
 cursor: pointer;
 }
 }

 @media (max-width: 50rem) {
 .eco-grid {
 grid-template-columns: 1fr;
 }
 .eco-count {
 order: -1;
 }
 }
}

// Specific to /tutorials
Expand Down

5 changes: 5 additions & 0 deletions
config.toml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,3 +11,8 @@ images = ["img/scverse-social-card.png"]

[markup.goldmark.renderer]
unsafe= true

# The ecosystem registry rebuilds this site when packages.json changes, so a cached copy defeats the trigger.
# Hugo caches remote resources forever by default, and on Netlify that cache survives between builds.
[caches.getresource]
maxAge = 0
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Redesign the ecosystem package registry as a filterable card grid#254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Zethson
merged 14 commits into

from

Aug 18, 2026
 Merged


Redesign the ecosystem package registry as a filterable card grid
#254
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
286c113

Redesign the ecosystem package registry as a filterable card grid


Zethson Aug 11, 2026
df9b1b3

Pin Netlify deploy previews to the Hugo version production builds with


Zethson Aug 11, 2026
166fecc

Restore the `try` guard around the registry fetch


Zethson Aug 11, 2026
fe44400

Drop the Hugo version note from the README


Zethson Aug 11, 2026
d8ea9ad

Revert the registry fetch to failing the build


Zethson Aug 11, 2026
adbd5fd

Merge remote-tracking branch 'origin/main' into redesign-ecosystem-re…


Zethson Aug 13, 2026
3b96ce4

Read the registry's controlled vocabulary instead of normalising tags


Zethson Aug 13, 2026
3e767c4

One sentence per line in the netlify.toml and template comments


Zethson Aug 14, 2026
8089f7a

Pin the deploy workflow to the same Hugo as previews


Zethson Aug 14, 2026
2515ba1

Stop caching the ecosystem registry JSON between builds


Zethson Aug 14, 2026
d6d2f44

Drop the work-in-progress caveat from the ecosystem intro


Zethson Aug 14, 2026
36c4ea1

Sort core packages first and tint them


Zethson Aug 14, 2026
daa16a0

Fix core cards being unstyled and unfilterable


Zethson Aug 14, 2026
3990c12

Merge main, keeping the card grid and the new contents sidebar


Zethson Aug 14, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.github/workflows/gh-pages.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ jobs:
 - name: Setup Hugo
 uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: "latest"
 hugo-version: "0.164.0" # keep in step with netlify.toml, so previews match production
 extended: true

 - name: Build
Expand Down

367 changes: 364 additions & 3 deletions
assets/main.scss

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1027,9 +1027,370 @@ body {
 }
}

#eco-table tbody {
 // TODO: I think this shouldn't be neccesary
 border-top: 0px;
// Specific to /packages#ecosystem — the community package registry

$eco-radius: 0.75rem;
$eco-hues:
 $anndataorange, $scanpycerise, $mudatagreen, $spatialdatablue, $squidpyviolet,
 $scirpypurple, $scviyellow, $muonaquamarine;

#ecosystem-packages {
 margin: 2rem 0 4rem;

 .eco-sprite {
 display: none;
 }

 svg {
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 }

 .eco-toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.5rem 1.5rem;
 }

 .eco-search {
 position: relative;
 display: flex;
 align-items: center;
 flex: 1 1 22rem;

 .eco-search-icon {
 position: absolute;
 left: 1.1rem;
 width: 1.1rem;
 height: 1.1rem;
 color: $greydesc;
 pointer-events: none;
 }

 input {
 width: 100%;
 height: 3.25rem;
 padding: 0 2.9rem;
 font-size: 1rem;
 color: $tiletext;
 background-color: $backtickbg;
 border: 1px solid $overline;
 border-radius: 2rem;
 outline: none;
 transition: all 200ms ease-in-out;
 text-overflow: ellipsis;

 &::placeholder {
 color: $greydesc;
 }
 &:focus {
 background-color: white;
 border-color: $greydesc;
 box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.04);
 }
 // The native affordance duplicates our own clear button
 &::-webkit-search-cancel-button {
 display: none;
 }
 }
 }

 .eco-search-clear {
 position: absolute;
 right: 0.9rem;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 1.6rem;
 height: 1.6rem;
 padding: 0;
 border: 0;
 border-radius: 50%;
 color: $tiletext2;
 background-color: $tilebg;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.7rem;
 height: 0.7rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-count {
 margin: 0;
 font-size: 0.95rem;
 color: $greydesc;
 white-space: nowrap;
 }

 .eco-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin: 1.25rem 0 2rem;
 }

 .eco-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.35rem 0.85rem;
 font-size: 0.85rem;
 color: $tiletext2;
 background-color: white;
 border: 1px solid $overline;
 border-radius: 2rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 border-color: $tilebg2;
 background-color: $tilebg4;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 border-color: $tiletext;
 }
 .eco-chip-count {
 font-size: 0.75rem;
 opacity: 0.55;
 }
 }

 .eco-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
 gap: 1.25rem;
 }

 .eco-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 padding: 1.35rem;
 background-color: white;
 border: 1px solid $overline;
 border-radius: $eco-radius;
 transition: all 200ms ease-in-out;

 &:hover {
 border-color: $tilebg2;
 box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06);
 transform: translateY(-2px);
 }
 &[hidden] {
 display: none;
 }
 }

 // Packages maintained by the core team sort to the front and carry a wash of colour
 .eco-card--core {
 background-color: rgba($scviyellow, 0.08);
 }

 .eco-card-head {
 display: flex;
 align-items: center;
 gap: 0.85rem;
 }

 .eco-logo {
 display: grid;
 place-items: center;
 flex: 0 0 auto;
 width: 2.75rem;
 height: 2.75rem;
 overflow: hidden;
 border-radius: 0.6rem;
 background-color: $tilebg4;

 img {
 width: 100%;
 height: 100%;
 padding: 0.3rem;
 object-fit: contain;
 }
 }

 .eco-logo--mono {
 font-size: 1.3rem;
 font-weight: 800;
 color: $tiletext;

 @each $hue in $eco-hues {
 &[data-hue="#{index($eco-hues, $hue) - 1}"] {
 background-color: rgba($hue, 0.18);
 }
 }
 }

 .eco-card-heading {
 min-width: 0;
 }

 // Element selector included to beat the generic `#page-content .post h3` margins
 .eco-card h3.eco-card-name {
 margin: 0;
 font-size: 1.15rem;
 font-weight: 800;
 line-height: 1.3;
 overflow-wrap: anywhere;

 a {
 color: black;
 text-decoration: none;

 // Make the whole card clickable without nesting interactive elements
 &::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: $eco-radius;
 }
 }
 }

 .eco-card-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem;
 margin: 0.25rem 0 0;
 font-size: 0.75rem;
 color: $greydesc;

 .eco-badge {
 padding: 0.05rem 0.35rem;
 font-size: 0.65rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: white;
 background-color: $tiletext;
 border-radius: 0.25rem;
 }
 .eco-badge--lang {
 color: $tiletext;
 background-color: $tilebg2;
 }
 .eco-version {
 font-family: "JetBrains Mono", Menlo, monospace;
 }
 .eco-version + .eco-license::before {
 content: "·";
 margin-right: 0.4rem;
 }
 }

 .eco-card-desc {
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin: 0;
 font-size: 0.9rem;
 line-height: 1.55;
 color: $tiletext2;
 }

 .eco-card-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .eco-tag {
 position: relative;
 z-index: 1;
 padding: 0.2rem 0.5rem;
 font-size: 0.72rem;
 color: $greydesc;
 background-color: $tilebg4;
 border: 0;
 border-radius: 0.35rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 background-color: $tilebg;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-card-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin-top: auto;
 padding-top: 0.3rem;

 a {
 position: relative;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.3rem 0.6rem;
 font-size: 0.78rem;
 color: $tiletext2;
 text-decoration: none;
 background-color: $tilebg4;
 border-radius: 0.4rem;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.85rem;
 height: 0.85rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }
 }

 .eco-empty {
 padding: 4rem 0;
 text-align: center;
 color: $greydesc;

 .eco-empty-reset {
 padding: 0;
 color: $tiletext;
 background: none;
 border: 0;
 text-decoration: underline;
 cursor: pointer;
 }
 }

 @media (max-width: 50rem) {
 .eco-grid {
 grid-template-columns: 1fr;
 }
 .eco-count {
 order: -1;
 }
 }
}

// Specific to /tutorials
Expand Down

5 changes: 5 additions & 0 deletions
config.toml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,3 +11,8 @@ images = ["img/scverse-social-card.png"]

[markup.goldmark.renderer]
unsafe= true

# The ecosystem registry rebuilds this site when packages.json changes, so a cached copy defeats the trigger.
# Hugo caches remote resources forever by default, and on Netlify that cache survives between builds.
[caches.getresource]
maxAge = 0
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Redesign the ecosystem package registry as a filterable card grid#254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Zethson
merged 14 commits into

from

Aug 18, 2026
 Merged


Redesign the ecosystem package registry as a filterable card grid
#254
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
286c113

Redesign the ecosystem package registry as a filterable card grid


Zethson Aug 11, 2026
df9b1b3

Pin Netlify deploy previews to the Hugo version production builds with


Zethson Aug 11, 2026
166fecc

Restore the `try` guard around the registry fetch


Zethson Aug 11, 2026
fe44400

Drop the Hugo version note from the README


Zethson Aug 11, 2026
d8ea9ad

Revert the registry fetch to failing the build


Zethson Aug 11, 2026
adbd5fd

Merge remote-tracking branch 'origin/main' into redesign-ecosystem-re…


Zethson Aug 13, 2026
3b96ce4

Read the registry's controlled vocabulary instead of normalising tags


Zethson Aug 13, 2026
3e767c4

One sentence per line in the netlify.toml and template comments


Zethson Aug 14, 2026
8089f7a

Pin the deploy workflow to the same Hugo as previews


Zethson Aug 14, 2026
2515ba1

Stop caching the ecosystem registry JSON between builds


Zethson Aug 14, 2026
d6d2f44

Drop the work-in-progress caveat from the ecosystem intro


Zethson Aug 14, 2026
36c4ea1

Sort core packages first and tint them


Zethson Aug 14, 2026
daa16a0

Fix core cards being unstyled and unfilterable


Zethson Aug 14, 2026
3990c12

Merge main, keeping the card grid and the new contents sidebar


Zethson Aug 14, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.github/workflows/gh-pages.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ jobs:
 - name: Setup Hugo
 uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: "latest"
 hugo-version: "0.164.0" # keep in step with netlify.toml, so previews match production
 extended: true

 - name: Build
Expand Down

367 changes: 364 additions & 3 deletions
assets/main.scss

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1027,9 +1027,370 @@ body {
 }
}

#eco-table tbody {
 // TODO: I think this shouldn't be neccesary
 border-top: 0px;
// Specific to /packages#ecosystem — the community package registry

$eco-radius: 0.75rem;
$eco-hues:
 $anndataorange, $scanpycerise, $mudatagreen, $spatialdatablue, $squidpyviolet,
 $scirpypurple, $scviyellow, $muonaquamarine;

#ecosystem-packages {
 margin: 2rem 0 4rem;

 .eco-sprite {
 display: none;
 }

 svg {
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 }

 .eco-toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.5rem 1.5rem;
 }

 .eco-search {
 position: relative;
 display: flex;
 align-items: center;
 flex: 1 1 22rem;

 .eco-search-icon {
 position: absolute;
 left: 1.1rem;
 width: 1.1rem;
 height: 1.1rem;
 color: $greydesc;
 pointer-events: none;
 }

 input {
 width: 100%;
 height: 3.25rem;
 padding: 0 2.9rem;
 font-size: 1rem;
 color: $tiletext;
 background-color: $backtickbg;
 border: 1px solid $overline;
 border-radius: 2rem;
 outline: none;
 transition: all 200ms ease-in-out;
 text-overflow: ellipsis;

 &::placeholder {
 color: $greydesc;
 }
 &:focus {
 background-color: white;
 border-color: $greydesc;
 box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.04);
 }
 // The native affordance duplicates our own clear button
 &::-webkit-search-cancel-button {
 display: none;
 }
 }
 }

 .eco-search-clear {
 position: absolute;
 right: 0.9rem;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 1.6rem;
 height: 1.6rem;
 padding: 0;
 border: 0;
 border-radius: 50%;
 color: $tiletext2;
 background-color: $tilebg;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.7rem;
 height: 0.7rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-count {
 margin: 0;
 font-size: 0.95rem;
 color: $greydesc;
 white-space: nowrap;
 }

 .eco-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin: 1.25rem 0 2rem;
 }

 .eco-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.35rem 0.85rem;
 font-size: 0.85rem;
 color: $tiletext2;
 background-color: white;
 border: 1px solid $overline;
 border-radius: 2rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 border-color: $tilebg2;
 background-color: $tilebg4;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 border-color: $tiletext;
 }
 .eco-chip-count {
 font-size: 0.75rem;
 opacity: 0.55;
 }
 }

 .eco-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
 gap: 1.25rem;
 }

 .eco-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 padding: 1.35rem;
 background-color: white;
 border: 1px solid $overline;
 border-radius: $eco-radius;
 transition: all 200ms ease-in-out;

 &:hover {
 border-color: $tilebg2;
 box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06);
 transform: translateY(-2px);
 }
 &[hidden] {
 display: none;
 }
 }

 // Packages maintained by the core team sort to the front and carry a wash of colour
 .eco-card--core {
 background-color: rgba($scviyellow, 0.08);
 }

 .eco-card-head {
 display: flex;
 align-items: center;
 gap: 0.85rem;
 }

 .eco-logo {
 display: grid;
 place-items: center;
 flex: 0 0 auto;
 width: 2.75rem;
 height: 2.75rem;
 overflow: hidden;
 border-radius: 0.6rem;
 background-color: $tilebg4;

 img {
 width: 100%;
 height: 100%;
 padding: 0.3rem;
 object-fit: contain;
 }
 }

 .eco-logo--mono {
 font-size: 1.3rem;
 font-weight: 800;
 color: $tiletext;

 @each $hue in $eco-hues {
 &[data-hue="#{index($eco-hues, $hue) - 1}"] {
 background-color: rgba($hue, 0.18);
 }
 }
 }

 .eco-card-heading {
 min-width: 0;
 }

 // Element selector included to beat the generic `#page-content .post h3` margins
 .eco-card h3.eco-card-name {
 margin: 0;
 font-size: 1.15rem;
 font-weight: 800;
 line-height: 1.3;
 overflow-wrap: anywhere;

 a {
 color: black;
 text-decoration: none;

 // Make the whole card clickable without nesting interactive elements
 &::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: $eco-radius;
 }
 }
 }

 .eco-card-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem;
 margin: 0.25rem 0 0;
 font-size: 0.75rem;
 color: $greydesc;

 .eco-badge {
 padding: 0.05rem 0.35rem;
 font-size: 0.65rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: white;
 background-color: $tiletext;
 border-radius: 0.25rem;
 }
 .eco-badge--lang {
 color: $tiletext;
 background-color: $tilebg2;
 }
 .eco-version {
 font-family: "JetBrains Mono", Menlo, monospace;
 }
 .eco-version + .eco-license::before {
 content: "·";
 margin-right: 0.4rem;
 }
 }

 .eco-card-desc {
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin: 0;
 font-size: 0.9rem;
 line-height: 1.55;
 color: $tiletext2;
 }

 .eco-card-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .eco-tag {
 position: relative;
 z-index: 1;
 padding: 0.2rem 0.5rem;
 font-size: 0.72rem;
 color: $greydesc;
 background-color: $tilebg4;
 border: 0;
 border-radius: 0.35rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 background-color: $tilebg;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-card-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin-top: auto;
 padding-top: 0.3rem;

 a {
 position: relative;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.3rem 0.6rem;
 font-size: 0.78rem;
 color: $tiletext2;
 text-decoration: none;
 background-color: $tilebg4;
 border-radius: 0.4rem;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.85rem;
 height: 0.85rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }
 }

 .eco-empty {
 padding: 4rem 0;
 text-align: center;
 color: $greydesc;

 .eco-empty-reset {
 padding: 0;
 color: $tiletext;
 background: none;
 border: 0;
 text-decoration: underline;
 cursor: pointer;
 }
 }

 @media (max-width: 50rem) {
 .eco-grid {
 grid-template-columns: 1fr;
 }
 .eco-count {
 order: -1;
 }
 }
}

// Specific to /tutorials
Expand Down

5 changes: 5 additions & 0 deletions
config.toml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,3 +11,8 @@ images = ["img/scverse-social-card.png"]

[markup.goldmark.renderer]
unsafe= true

# The ecosystem registry rebuilds this site when packages.json changes, so a cached copy defeats the trigger.
# Hugo caches remote resources forever by default, and on Netlify that cache survives between builds.
[caches.getresource]
maxAge = 0
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Redesign the ecosystem package registry as a filterable card grid#254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Zethson
merged 14 commits into

from

Aug 18, 2026
 Merged


Redesign the ecosystem package registry as a filterable card grid
#254
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
286c113

Redesign the ecosystem package registry as a filterable card grid


Zethson Aug 11, 2026
df9b1b3

Pin Netlify deploy previews to the Hugo version production builds with


Zethson Aug 11, 2026
166fecc

Restore the `try` guard around the registry fetch


Zethson Aug 11, 2026
fe44400

Drop the Hugo version note from the README


Zethson Aug 11, 2026
d8ea9ad

Revert the registry fetch to failing the build


Zethson Aug 11, 2026
adbd5fd

Merge remote-tracking branch 'origin/main' into redesign-ecosystem-re…


Zethson Aug 13, 2026
3b96ce4

Read the registry's controlled vocabulary instead of normalising tags


Zethson Aug 13, 2026
3e767c4

One sentence per line in the netlify.toml and template comments


Zethson Aug 14, 2026
8089f7a

Pin the deploy workflow to the same Hugo as previews


Zethson Aug 14, 2026
2515ba1

Stop caching the ecosystem registry JSON between builds


Zethson Aug 14, 2026
d6d2f44

Drop the work-in-progress caveat from the ecosystem intro


Zethson Aug 14, 2026
36c4ea1

Sort core packages first and tint them


Zethson Aug 14, 2026
daa16a0

Fix core cards being unstyled and unfilterable


Zethson Aug 14, 2026
3990c12

Merge main, keeping the card grid and the new contents sidebar


Zethson Aug 14, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.github/workflows/gh-pages.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ jobs:
 - name: Setup Hugo
 uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: "latest"
 hugo-version: "0.164.0" # keep in step with netlify.toml, so previews match production
 extended: true

 - name: Build
Expand Down

367 changes: 364 additions & 3 deletions
assets/main.scss

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1027,9 +1027,370 @@ body {
 }
}

#eco-table tbody {
 // TODO: I think this shouldn't be neccesary
 border-top: 0px;
// Specific to /packages#ecosystem — the community package registry

$eco-radius: 0.75rem;
$eco-hues:
 $anndataorange, $scanpycerise, $mudatagreen, $spatialdatablue, $squidpyviolet,
 $scirpypurple, $scviyellow, $muonaquamarine;

#ecosystem-packages {
 margin: 2rem 0 4rem;

 .eco-sprite {
 display: none;
 }

 svg {
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 }

 .eco-toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.5rem 1.5rem;
 }

 .eco-search {
 position: relative;
 display: flex;
 align-items: center;
 flex: 1 1 22rem;

 .eco-search-icon {
 position: absolute;
 left: 1.1rem;
 width: 1.1rem;
 height: 1.1rem;
 color: $greydesc;
 pointer-events: none;
 }

 input {
 width: 100%;
 height: 3.25rem;
 padding: 0 2.9rem;
 font-size: 1rem;
 color: $tiletext;
 background-color: $backtickbg;
 border: 1px solid $overline;
 border-radius: 2rem;
 outline: none;
 transition: all 200ms ease-in-out;
 text-overflow: ellipsis;

 &::placeholder {
 color: $greydesc;
 }
 &:focus {
 background-color: white;
 border-color: $greydesc;
 box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.04);
 }
 // The native affordance duplicates our own clear button
 &::-webkit-search-cancel-button {
 display: none;
 }
 }
 }

 .eco-search-clear {
 position: absolute;
 right: 0.9rem;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 1.6rem;
 height: 1.6rem;
 padding: 0;
 border: 0;
 border-radius: 50%;
 color: $tiletext2;
 background-color: $tilebg;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.7rem;
 height: 0.7rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-count {
 margin: 0;
 font-size: 0.95rem;
 color: $greydesc;
 white-space: nowrap;
 }

 .eco-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin: 1.25rem 0 2rem;
 }

 .eco-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.35rem 0.85rem;
 font-size: 0.85rem;
 color: $tiletext2;
 background-color: white;
 border: 1px solid $overline;
 border-radius: 2rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 border-color: $tilebg2;
 background-color: $tilebg4;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 border-color: $tiletext;
 }
 .eco-chip-count {
 font-size: 0.75rem;
 opacity: 0.55;
 }
 }

 .eco-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
 gap: 1.25rem;
 }

 .eco-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 padding: 1.35rem;
 background-color: white;
 border: 1px solid $overline;
 border-radius: $eco-radius;
 transition: all 200ms ease-in-out;

 &:hover {
 border-color: $tilebg2;
 box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06);
 transform: translateY(-2px);
 }
 &[hidden] {
 display: none;
 }
 }

 // Packages maintained by the core team sort to the front and carry a wash of colour
 .eco-card--core {
 background-color: rgba($scviyellow, 0.08);
 }

 .eco-card-head {
 display: flex;
 align-items: center;
 gap: 0.85rem;
 }

 .eco-logo {
 display: grid;
 place-items: center;
 flex: 0 0 auto;
 width: 2.75rem;
 height: 2.75rem;
 overflow: hidden;
 border-radius: 0.6rem;
 background-color: $tilebg4;

 img {
 width: 100%;
 height: 100%;
 padding: 0.3rem;
 object-fit: contain;
 }
 }

 .eco-logo--mono {
 font-size: 1.3rem;
 font-weight: 800;
 color: $tiletext;

 @each $hue in $eco-hues {
 &[data-hue="#{index($eco-hues, $hue) - 1}"] {
 background-color: rgba($hue, 0.18);
 }
 }
 }

 .eco-card-heading {
 min-width: 0;
 }

 // Element selector included to beat the generic `#page-content .post h3` margins
 .eco-card h3.eco-card-name {
 margin: 0;
 font-size: 1.15rem;
 font-weight: 800;
 line-height: 1.3;
 overflow-wrap: anywhere;

 a {
 color: black;
 text-decoration: none;

 // Make the whole card clickable without nesting interactive elements
 &::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: $eco-radius;
 }
 }
 }

 .eco-card-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem;
 margin: 0.25rem 0 0;
 font-size: 0.75rem;
 color: $greydesc;

 .eco-badge {
 padding: 0.05rem 0.35rem;
 font-size: 0.65rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: white;
 background-color: $tiletext;
 border-radius: 0.25rem;
 }
 .eco-badge--lang {
 color: $tiletext;
 background-color: $tilebg2;
 }
 .eco-version {
 font-family: "JetBrains Mono", Menlo, monospace;
 }
 .eco-version + .eco-license::before {
 content: "·";
 margin-right: 0.4rem;
 }
 }

 .eco-card-desc {
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin: 0;
 font-size: 0.9rem;
 line-height: 1.55;
 color: $tiletext2;
 }

 .eco-card-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .eco-tag {
 position: relative;
 z-index: 1;
 padding: 0.2rem 0.5rem;
 font-size: 0.72rem;
 color: $greydesc;
 background-color: $tilebg4;
 border: 0;
 border-radius: 0.35rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 background-color: $tilebg;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-card-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin-top: auto;
 padding-top: 0.3rem;

 a {
 position: relative;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.3rem 0.6rem;
 font-size: 0.78rem;
 color: $tiletext2;
 text-decoration: none;
 background-color: $tilebg4;
 border-radius: 0.4rem;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.85rem;
 height: 0.85rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }
 }

 .eco-empty {
 padding: 4rem 0;
 text-align: center;
 color: $greydesc;

 .eco-empty-reset {
 padding: 0;
 color: $tiletext;
 background: none;
 border: 0;
 text-decoration: underline;
 cursor: pointer;
 }
 }

 @media (max-width: 50rem) {
 .eco-grid {
 grid-template-columns: 1fr;
 }
 .eco-count {
 order: -1;
 }
 }
}

// Specific to /tutorials
Expand Down

5 changes: 5 additions & 0 deletions
config.toml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,3 +11,8 @@ images = ["img/scverse-social-card.png"]

[markup.goldmark.renderer]
unsafe= true

# The ecosystem registry rebuilds this site when packages.json changes, so a cached copy defeats the trigger.
# Hugo caches remote resources forever by default, and on Netlify that cache survives between builds.
[caches.getresource]
maxAge = 0
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Redesign the ecosystem package registry as a filterable card grid#254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Zethson
merged 14 commits into

from

Aug 18, 2026
 Merged


Redesign the ecosystem package registry as a filterable card grid
#254
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
286c113

Redesign the ecosystem package registry as a filterable card grid


Zethson Aug 11, 2026
df9b1b3

Pin Netlify deploy previews to the Hugo version production builds with


Zethson Aug 11, 2026
166fecc

Restore the `try` guard around the registry fetch


Zethson Aug 11, 2026
fe44400

Drop the Hugo version note from the README


Zethson Aug 11, 2026
d8ea9ad

Revert the registry fetch to failing the build


Zethson Aug 11, 2026
adbd5fd

Merge remote-tracking branch 'origin/main' into redesign-ecosystem-re…


Zethson Aug 13, 2026
3b96ce4

Read the registry's controlled vocabulary instead of normalising tags


Zethson Aug 13, 2026
3e767c4

One sentence per line in the netlify.toml and template comments


Zethson Aug 14, 2026
8089f7a

Pin the deploy workflow to the same Hugo as previews


Zethson Aug 14, 2026
2515ba1

Stop caching the ecosystem registry JSON between builds


Zethson Aug 14, 2026
d6d2f44

Drop the work-in-progress caveat from the ecosystem intro


Zethson Aug 14, 2026
36c4ea1

Sort core packages first and tint them


Zethson Aug 14, 2026
daa16a0

Fix core cards being unstyled and unfilterable


Zethson Aug 14, 2026
3990c12

Merge main, keeping the card grid and the new contents sidebar


Zethson Aug 14, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.github/workflows/gh-pages.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ jobs:
 - name: Setup Hugo
 uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: "latest"
 hugo-version: "0.164.0" # keep in step with netlify.toml, so previews match production
 extended: true

 - name: Build
Expand Down

367 changes: 364 additions & 3 deletions
assets/main.scss

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1027,9 +1027,370 @@ body {
 }
}

#eco-table tbody {
 // TODO: I think this shouldn't be neccesary
 border-top: 0px;
// Specific to /packages#ecosystem — the community package registry

$eco-radius: 0.75rem;
$eco-hues:
 $anndataorange, $scanpycerise, $mudatagreen, $spatialdatablue, $squidpyviolet,
 $scirpypurple, $scviyellow, $muonaquamarine;

#ecosystem-packages {
 margin: 2rem 0 4rem;

 .eco-sprite {
 display: none;
 }

 svg {
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 }

 .eco-toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.5rem 1.5rem;
 }

 .eco-search {
 position: relative;
 display: flex;
 align-items: center;
 flex: 1 1 22rem;

 .eco-search-icon {
 position: absolute;
 left: 1.1rem;
 width: 1.1rem;
 height: 1.1rem;
 color: $greydesc;
 pointer-events: none;
 }

 input {
 width: 100%;
 height: 3.25rem;
 padding: 0 2.9rem;
 font-size: 1rem;
 color: $tiletext;
 background-color: $backtickbg;
 border: 1px solid $overline;
 border-radius: 2rem;
 outline: none;
 transition: all 200ms ease-in-out;
 text-overflow: ellipsis;

 &::placeholder {
 color: $greydesc;
 }
 &:focus {
 background-color: white;
 border-color: $greydesc;
 box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.04);
 }
 // The native affordance duplicates our own clear button
 &::-webkit-search-cancel-button {
 display: none;
 }
 }
 }

 .eco-search-clear {
 position: absolute;
 right: 0.9rem;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 1.6rem;
 height: 1.6rem;
 padding: 0;
 border: 0;
 border-radius: 50%;
 color: $tiletext2;
 background-color: $tilebg;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.7rem;
 height: 0.7rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-count {
 margin: 0;
 font-size: 0.95rem;
 color: $greydesc;
 white-space: nowrap;
 }

 .eco-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin: 1.25rem 0 2rem;
 }

 .eco-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.35rem 0.85rem;
 font-size: 0.85rem;
 color: $tiletext2;
 background-color: white;
 border: 1px solid $overline;
 border-radius: 2rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 border-color: $tilebg2;
 background-color: $tilebg4;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 border-color: $tiletext;
 }
 .eco-chip-count {
 font-size: 0.75rem;
 opacity: 0.55;
 }
 }

 .eco-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
 gap: 1.25rem;
 }

 .eco-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 padding: 1.35rem;
 background-color: white;
 border: 1px solid $overline;
 border-radius: $eco-radius;
 transition: all 200ms ease-in-out;

 &:hover {
 border-color: $tilebg2;
 box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06);
 transform: translateY(-2px);
 }
 &[hidden] {
 display: none;
 }
 }

 // Packages maintained by the core team sort to the front and carry a wash of colour
 .eco-card--core {
 background-color: rgba($scviyellow, 0.08);
 }

 .eco-card-head {
 display: flex;
 align-items: center;
 gap: 0.85rem;
 }

 .eco-logo {
 display: grid;
 place-items: center;
 flex: 0 0 auto;
 width: 2.75rem;
 height: 2.75rem;
 overflow: hidden;
 border-radius: 0.6rem;
 background-color: $tilebg4;

 img {
 width: 100%;
 height: 100%;
 padding: 0.3rem;
 object-fit: contain;
 }
 }

 .eco-logo--mono {
 font-size: 1.3rem;
 font-weight: 800;
 color: $tiletext;

 @each $hue in $eco-hues {
 &[data-hue="#{index($eco-hues, $hue) - 1}"] {
 background-color: rgba($hue, 0.18);
 }
 }
 }

 .eco-card-heading {
 min-width: 0;
 }

 // Element selector included to beat the generic `#page-content .post h3` margins
 .eco-card h3.eco-card-name {
 margin: 0;
 font-size: 1.15rem;
 font-weight: 800;
 line-height: 1.3;
 overflow-wrap: anywhere;

 a {
 color: black;
 text-decoration: none;

 // Make the whole card clickable without nesting interactive elements
 &::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: $eco-radius;
 }
 }
 }

 .eco-card-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem;
 margin: 0.25rem 0 0;
 font-size: 0.75rem;
 color: $greydesc;

 .eco-badge {
 padding: 0.05rem 0.35rem;
 font-size: 0.65rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: white;
 background-color: $tiletext;
 border-radius: 0.25rem;
 }
 .eco-badge--lang {
 color: $tiletext;
 background-color: $tilebg2;
 }
 .eco-version {
 font-family: "JetBrains Mono", Menlo, monospace;
 }
 .eco-version + .eco-license::before {
 content: "·";
 margin-right: 0.4rem;
 }
 }

 .eco-card-desc {
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin: 0;
 font-size: 0.9rem;
 line-height: 1.55;
 color: $tiletext2;
 }

 .eco-card-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .eco-tag {
 position: relative;
 z-index: 1;
 padding: 0.2rem 0.5rem;
 font-size: 0.72rem;
 color: $greydesc;
 background-color: $tilebg4;
 border: 0;
 border-radius: 0.35rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 background-color: $tilebg;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-card-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin-top: auto;
 padding-top: 0.3rem;

 a {
 position: relative;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.3rem 0.6rem;
 font-size: 0.78rem;
 color: $tiletext2;
 text-decoration: none;
 background-color: $tilebg4;
 border-radius: 0.4rem;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.85rem;
 height: 0.85rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }
 }

 .eco-empty {
 padding: 4rem 0;
 text-align: center;
 color: $greydesc;

 .eco-empty-reset {
 padding: 0;
 color: $tiletext;
 background: none;
 border: 0;
 text-decoration: underline;
 cursor: pointer;
 }
 }

 @media (max-width: 50rem) {
 .eco-grid {
 grid-template-columns: 1fr;
 }
 .eco-count {
 order: -1;
 }
 }
}

// Specific to /tutorials
Expand Down

5 changes: 5 additions & 0 deletions
config.toml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,3 +11,8 @@ images = ["img/scverse-social-card.png"]

[markup.goldmark.renderer]
unsafe= true

# The ecosystem registry rebuilds this site when packages.json changes, so a cached copy defeats the trigger.
# Hugo caches remote resources forever by default, and on Netlify that cache survives between builds.
[caches.getresource]
maxAge = 0
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Redesign the ecosystem package registry as a filterable card grid#254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Zethson
merged 14 commits into

from

Aug 18, 2026
 Merged


Redesign the ecosystem package registry as a filterable card grid
#254
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
286c113

Redesign the ecosystem package registry as a filterable card grid


Zethson Aug 11, 2026
df9b1b3

Pin Netlify deploy previews to the Hugo version production builds with


Zethson Aug 11, 2026
166fecc

Restore the `try` guard around the registry fetch


Zethson Aug 11, 2026
fe44400

Drop the Hugo version note from the README


Zethson Aug 11, 2026
d8ea9ad

Revert the registry fetch to failing the build


Zethson Aug 11, 2026
adbd5fd

Merge remote-tracking branch 'origin/main' into redesign-ecosystem-re…


Zethson Aug 13, 2026
3b96ce4

Read the registry's controlled vocabulary instead of normalising tags


Zethson Aug 13, 2026
3e767c4

One sentence per line in the netlify.toml and template comments


Zethson Aug 14, 2026
8089f7a

Pin the deploy workflow to the same Hugo as previews


Zethson Aug 14, 2026
2515ba1

Stop caching the ecosystem registry JSON between builds


Zethson Aug 14, 2026
d6d2f44

Drop the work-in-progress caveat from the ecosystem intro


Zethson Aug 14, 2026
36c4ea1

Sort core packages first and tint them


Zethson Aug 14, 2026
daa16a0

Fix core cards being unstyled and unfilterable


Zethson Aug 14, 2026
3990c12

Merge main, keeping the card grid and the new contents sidebar


Zethson Aug 14, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.github/workflows/gh-pages.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ jobs:
 - name: Setup Hugo
 uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: "latest"
 hugo-version: "0.164.0" # keep in step with netlify.toml, so previews match production
 extended: true

 - name: Build
Expand Down

367 changes: 364 additions & 3 deletions
assets/main.scss

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1027,9 +1027,370 @@ body {
 }
}

#eco-table tbody {
 // TODO: I think this shouldn't be neccesary
 border-top: 0px;
// Specific to /packages#ecosystem — the community package registry

$eco-radius: 0.75rem;
$eco-hues:
 $anndataorange, $scanpycerise, $mudatagreen, $spatialdatablue, $squidpyviolet,
 $scirpypurple, $scviyellow, $muonaquamarine;

#ecosystem-packages {
 margin: 2rem 0 4rem;

 .eco-sprite {
 display: none;
 }

 svg {
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 }

 .eco-toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.5rem 1.5rem;
 }

 .eco-search {
 position: relative;
 display: flex;
 align-items: center;
 flex: 1 1 22rem;

 .eco-search-icon {
 position: absolute;
 left: 1.1rem;
 width: 1.1rem;
 height: 1.1rem;
 color: $greydesc;
 pointer-events: none;
 }

 input {
 width: 100%;
 height: 3.25rem;
 padding: 0 2.9rem;
 font-size: 1rem;
 color: $tiletext;
 background-color: $backtickbg;
 border: 1px solid $overline;
 border-radius: 2rem;
 outline: none;
 transition: all 200ms ease-in-out;
 text-overflow: ellipsis;

 &::placeholder {
 color: $greydesc;
 }
 &:focus {
 background-color: white;
 border-color: $greydesc;
 box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.04);
 }
 // The native affordance duplicates our own clear button
 &::-webkit-search-cancel-button {
 display: none;
 }
 }
 }

 .eco-search-clear {
 position: absolute;
 right: 0.9rem;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 1.6rem;
 height: 1.6rem;
 padding: 0;
 border: 0;
 border-radius: 50%;
 color: $tiletext2;
 background-color: $tilebg;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.7rem;
 height: 0.7rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-count {
 margin: 0;
 font-size: 0.95rem;
 color: $greydesc;
 white-space: nowrap;
 }

 .eco-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin: 1.25rem 0 2rem;
 }

 .eco-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.35rem 0.85rem;
 font-size: 0.85rem;
 color: $tiletext2;
 background-color: white;
 border: 1px solid $overline;
 border-radius: 2rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 border-color: $tilebg2;
 background-color: $tilebg4;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 border-color: $tiletext;
 }
 .eco-chip-count {
 font-size: 0.75rem;
 opacity: 0.55;
 }
 }

 .eco-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
 gap: 1.25rem;
 }

 .eco-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 padding: 1.35rem;
 background-color: white;
 border: 1px solid $overline;
 border-radius: $eco-radius;
 transition: all 200ms ease-in-out;

 &:hover {
 border-color: $tilebg2;
 box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06);
 transform: translateY(-2px);
 }
 &[hidden] {
 display: none;
 }
 }

 // Packages maintained by the core team sort to the front and carry a wash of colour
 .eco-card--core {
 background-color: rgba($scviyellow, 0.08);
 }

 .eco-card-head {
 display: flex;
 align-items: center;
 gap: 0.85rem;
 }

 .eco-logo {
 display: grid;
 place-items: center;
 flex: 0 0 auto;
 width: 2.75rem;
 height: 2.75rem;
 overflow: hidden;
 border-radius: 0.6rem;
 background-color: $tilebg4;

 img {
 width: 100%;
 height: 100%;
 padding: 0.3rem;
 object-fit: contain;
 }
 }

 .eco-logo--mono {
 font-size: 1.3rem;
 font-weight: 800;
 color: $tiletext;

 @each $hue in $eco-hues {
 &[data-hue="#{index($eco-hues, $hue) - 1}"] {
 background-color: rgba($hue, 0.18);
 }
 }
 }

 .eco-card-heading {
 min-width: 0;
 }

 // Element selector included to beat the generic `#page-content .post h3` margins
 .eco-card h3.eco-card-name {
 margin: 0;
 font-size: 1.15rem;
 font-weight: 800;
 line-height: 1.3;
 overflow-wrap: anywhere;

 a {
 color: black;
 text-decoration: none;

 // Make the whole card clickable without nesting interactive elements
 &::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: $eco-radius;
 }
 }
 }

 .eco-card-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem;
 margin: 0.25rem 0 0;
 font-size: 0.75rem;
 color: $greydesc;

 .eco-badge {
 padding: 0.05rem 0.35rem;
 font-size: 0.65rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: white;
 background-color: $tiletext;
 border-radius: 0.25rem;
 }
 .eco-badge--lang {
 color: $tiletext;
 background-color: $tilebg2;
 }
 .eco-version {
 font-family: "JetBrains Mono", Menlo, monospace;
 }
 .eco-version + .eco-license::before {
 content: "·";
 margin-right: 0.4rem;
 }
 }

 .eco-card-desc {
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
 margin: 0;
 font-size: 0.9rem;
 line-height: 1.55;
 color: $tiletext2;
 }

 .eco-card-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .eco-tag {
 position: relative;
 z-index: 1;
 padding: 0.2rem 0.5rem;
 font-size: 0.72rem;
 color: $greydesc;
 background-color: $tilebg4;
 border: 0;
 border-radius: 0.35rem;
 cursor: pointer;
 transition: all 200ms ease-in-out;

 &:hover {
 color: $tiletext3;
 background-color: $tilebg;
 }
 &.is-active {
 color: white;
 background-color: $tiletext;
 }
 }

 .eco-card-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 margin-top: auto;
 padding-top: 0.3rem;

 a {
 position: relative;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.3rem 0.6rem;
 font-size: 0.78rem;
 color: $tiletext2;
 text-decoration: none;
 background-color: $tilebg4;
 border-radius: 0.4rem;
 transition: all 200ms ease-in-out;

 svg {
 width: 0.85rem;
 height: 0.85rem;
 }
 &:hover {
 color: white;
 background-color: $tiletext;
 }
 }
 }

 .eco-empty {
 padding: 4rem 0;
 text-align: center;
 color: $greydesc;

 .eco-empty-reset {
 padding: 0;
 color: $tiletext;
 background: none;
 border: 0;
 text-decoration: underline;
 cursor: pointer;
 }
 }

 @media (max-width: 50rem) {
 .eco-grid {
 grid-template-columns: 1fr;
 }
 .eco-count {
 order: -1;
 }
 }
}

// Specific to /tutorials
Expand Down

5 changes: 5 additions & 0 deletions
config.toml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,3 +11,8 @@ images = ["img/scverse-social-card.png"]

[markup.goldmark.renderer]
unsafe= true

# The ecosystem registry rebuilds this site when packages.json changes, so a cached copy defeats the trigger.
# Hugo caches remote resources forever by default, and on Netlify that cache survives between builds.
[caches.getresource]
maxAge = 0
Loading