Redesign the resource detail card for Software/SaaS/Services

Structured detail page (hero, actions row, sticky "Details" panel,
About + tags) replacing the plain generic single-page template for
these three catalog sections, per the OurSQL Universe catalog-card
mockups. The reviews/testimonials block from the mockup is deliberately
left out of this change — it needs real auth (GitHub/Google/X) and a
place to store submissions, neither of which this static site has yet;
that stays a separate, later piece of work.

- New layouts/partials/resources/detail-card.html, wired up via
  layouts/resources/{software,saas,services}/single.html (Hugo's
  path-based template lookup, verified against this Hugo version —
  layouts/resources/single.html keeps serving every other section
  unchanged).
- Hero: logo (leaf-bundle image if present, else auto-generated
  initials — first two uppercase letters of the title, falling back
  to the first two characters), title, an "OurSQL Member" badge that
  only ever renders when a resource's front matter explicitly sets
  member: true (never assumed).
- Actions row: Visit website, View on GitHub (only when a `github`
  front-matter field is set), and "Suggest an update", which links
  straight to editing that resource's own file on GitHub — no new
  issue template needed.
- Sticky "Details" panel: Category, Subcategory, Website, Repository,
  OurSQL Member, Last reviewed — each row is optional and simply
  omitted when the underlying field isn't set, no placeholder text.
- New optional front matter: `github`, `member`, `last_reviewed`
  (documented in RESOURCES.md). Added `github` to three entries whose
  repos are public, well-known facts (ProxySQL, Vitess, Percona
  Server for MySQL) as a real demo of the new field; left `member`/
  `last_reviewed` unset everywhere since neither is something I can
  verify — the row/badge just doesn't render for those, as designed.
  Also gave proxysql.md a real About paragraph so the new "About"
  section and mobile "Read more" truncation had real content to
  clamp against.
- Mobile: Details panel reflows above About (CSS Grid area reorder,
  no JS), actions stack full-width, About clamps to 3 lines with a
  "Read more"/"Read less" toggle (static/js/resources.js) that only
  activates the clamp state that's actually in effect.
- Full light-theme coverage for every new class, plus a couple of
  pre-existing gaps this change touched anyway (.resource-suggest-btn
  had no light-theme override before).
- Extracted the subcategory/facet tag-chip logic (previously inlined
  in layouts/resources/single.html) into
  layouts/partials/resources/tag-chips.html so both the old generic
  template and the new detail card share one implementation.

Testing: full local hugo --minify build (164 pages, 0 errors).
Verified in-browser on desktop and mobile, dark and light: ProxySQL
(github + About text), PlanetScale and Pythian (no github/About —
confirmed every optional row/button is cleanly omitted, not left
blank), and a regression check on an unrelated section (books) to
confirm the tag-chips.html extraction didn't change its output.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: Mazizova

RESOURCES.md

@@ -75,6 +75,20 @@ deployment: ["Self-Hosted"]     # Self-Hosted, Kubernetes, Docker, Cloud-Native,
 pricing: ["Open Source"]        # Open Source, Commercial, Free, Paid, Enterprise, Open Source & Open Core
 ```
 
+**Software & Tools / SaaS & Cloud Solutions / Services also get a structured detail page** (hero, actions row, sticky "Details" panel) with a few extra optional fields on top of the usual ones:
+```yaml
+github: "owner/repo"          # optional — shorthand, or a full https://github.com/... URL. Adds
+                               # a "View on GitHub" button and a Repository row. Only set it when
+                               # it's a genuinely separate URL from `link` — skip it if `link`
+                               # already points at the repo.
+member: true                  # optional — shows the "OurSQL Member" badge. Only set this when the
+                               # resource's org is an actual OurSQL Foundation member/sponsor/partner;
+                               # leave it unset otherwise (the row/badge is just omitted, no placeholder).
+last_reviewed: 2026-08-14     # optional — shows a "Last reviewed" row, credited to the editorial
+                               # team. Only set it once someone has actually reviewed the listing.
+```
+The full description (Markdown body, under the front matter) renders as the "About" section — plain-text `description` still serves as the short hero subtitle. "Suggest an update" always appears (top-right and in the Details panel) and links straight to editing the resource's own file on GitHub.
+
 **`content/resources/saas/`** — subcategories: Managed Databases · Monitoring SaaS · Backup & Recovery SaaS · Migration & Replication SaaS · Developer Platforms · Security & Compliance SaaS
 ```yaml
 cloud-providers: ["AWS"]        # AWS, Azure, GCP, Multi-Cloud, Private Cloud

assets/scss/_light-theme.scss

@@ -195,6 +195,62 @@
     &:hover { color: #0272a5; border-color: rgba(0,200,255,0.4); }
   }
 
+  // Resource detail card (Software & Tools / SaaS & Cloud Solutions / Services)
+  .resource-detail-logo {
+    background: #f1f5f9;
+    border-color: #dde3ed;
+    color: #0272a5;
+
+    &--img { background: #ffffff; }
+  }
+
+  .resource-detail-title { color: #0f172a; }
+  .resource-detail-desc { color: #64748b; }
+
+  .resource-detail-member-badge,
+  .resource-detail-panel-yes {
+    color: #0272a5;
+    background: rgba(0, 200, 255, 0.08);
+    border-color: rgba(0, 200, 255, 0.3);
+  }
+
+  .resource-detail-btn {
+    &--primary {
+      background: #0ea5e9;
+      border-color: #0ea5e9;
+      color: #ffffff;
+      &:hover { background: #0284c7; }
+    }
+    &--secondary {
+      color: #0f172a;
+      border-color: #dde3ed;
+      &:hover { color: #0272a5; border-color: rgba(0, 200, 255, 0.4); }
+    }
+  }
+
+  .resource-detail-divider { border-top-color: #dde3ed; }
+
+  .resource-detail-content { color: #334155; }
+
+  .resource-detail-readmore-btn { color: #0272a5; }
+
+  .resource-detail-panel {
+    background: #ffffff;
+    border-color: #dde3ed;
+  }
+
+  .resource-detail-panel-row { border-bottom-color: #dde3ed; }
+  .resource-detail-panel-label { color: #94a3b8; }
+  .resource-detail-panel-value { color: #0f172a; }
+  .resource-detail-panel-subvalue { color: #94a3b8; }
+  .resource-detail-panel-link { color: #0272a5; }
+
+  .resource-suggest-btn {
+    color: #64748b;
+    border-color: #dde3ed;
+    &:hover { color: #0f172a; border-color: rgba(0, 200, 255, 0.4); }
+  }
+
   // Contribute page
   .contribute-method {
     background: #ffffff;

assets/scss/_resources.scss

@@ -1503,3 +1503,280 @@ body.sheet-open {
     gap: 0.375rem;
   }
 }
+
+// ── Resource detail card (Software & Tools / SaaS & Cloud Solutions / Services) ──
+
+.resource-detail {
+  max-width: $container-max;
+  margin: 0 auto;
+  padding: 120px 2rem $section-pad;
+}
+
+.resource-detail-hero {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.25rem;
+  margin: 2rem 0 1.5rem;
+}
+
+.resource-detail-logo {
+  flex-shrink: 0;
+  width: 72px;
+  height: 72px;
+  border-radius: 14px;
+  background: $dark-surface;
+  border: 1px solid $dark-border;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.375rem;
+  font-weight: 700;
+  color: $accent;
+  letter-spacing: 0.02em;
+
+  &--img {
+    object-fit: contain;
+    padding: 10px;
+    background: $white;
+  }
+}
+
+.resource-detail-titlerow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.resource-detail-title {
+  font-size: clamp(1.5rem, 3.5vw, 2rem);
+  font-weight: 700;
+  color: $off-white;
+  margin: 0;
+}
+
+.resource-detail-member-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: $accent;
+  border: 1px solid rgba($accent, 0.35);
+  background: $accent-glow;
+  border-radius: 100px;
+  padding: 0.25rem 0.7rem;
+  white-space: nowrap;
+
+  svg { flex-shrink: 0; }
+}
+
+.resource-detail-desc {
+  font-size: 1.0625rem;
+  color: $muted;
+  line-height: 1.65;
+  margin: 0.5rem 0 0;
+}
+
+.resource-detail-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.875rem;
+  margin-bottom: 2rem;
+}
+
+.resource-detail-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: 8px;
+  padding: 0.75rem 1.5rem;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+
+  &--primary {
+    background: $accent;
+    color: $black;
+    border: 1px solid $accent;
+
+    &:hover { background: lighten($accent, 8%); transform: translateY(-1px); }
+  }
+
+  &--secondary {
+    background: transparent;
+    color: $off-white;
+    border: 1px solid $dark-border;
+
+    &:hover { border-color: rgba($accent, 0.4); color: $accent; }
+
+    svg { flex-shrink: 0; }
+  }
+}
+
+.resource-detail-suggest-link {
+  margin-left: auto;
+}
+
+.resource-detail-divider {
+  border: 0;
+  border-top: 1px solid $dark-border;
+  margin: 0 0 2.5rem;
+}
+
+.resource-detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  grid-template-areas: "about details";
+  gap: 3rem;
+  align-items: start;
+}
+
+.resource-detail-about {
+  grid-area: about;
+}
+
+.resource-detail-content {
+  color: $off-white;
+  line-height: 1.75;
+  margin: 0.75rem 0 1.25rem;
+
+  p + p { margin-top: 1rem; }
+}
+
+.resource-detail-readmore-btn {
+  display: inline-block;
+  background: none;
+  border: 0;
+  padding: 0 0 1.25rem;
+  margin: -0.75rem 0 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: $accent;
+  cursor: pointer;
+
+  &:hover { text-decoration: underline; }
+  &[hidden] { display: none; }
+}
+
+.resource-detail-panel {
+  grid-area: details;
+  position: sticky;
+  top: 100px;
+  background: $dark-card;
+  border: 1px solid $dark-border;
+  border-radius: 16px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.resource-detail-panel-row {
+  padding: 0.85rem 0;
+  border-bottom: 1px solid $dark-border;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+
+  &:first-child { padding-top: 0; }
+  &:last-of-type { border-bottom: 0; }
+}
+
+.resource-detail-panel-label {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: $muted;
+}
+
+.resource-detail-panel-value {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: $off-white;
+}
+
+.resource-detail-panel-subvalue {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: $muted;
+  margin-top: 0.15rem;
+}
+
+.resource-detail-panel-link {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: $accent;
+  text-decoration: none;
+  word-break: break-word;
+
+  &:hover { text-decoration: underline; }
+}
+
+.resource-detail-panel-yes {
+  display: inline-flex;
+  align-self: flex-start;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: $accent;
+  background: $accent-glow;
+  border: 1px solid rgba($accent, 0.35);
+  border-radius: 100px;
+  padding: 0.15rem 0.65rem;
+}
+
+.resource-detail-panel-suggest {
+  margin-top: 1.25rem;
+  width: 100%;
+  justify-content: center;
+  text-align: center;
+}
+
+@media (max-width: $break-md) {
+  .resource-detail {
+    padding: 30px 1rem $section-pad;
+  }
+
+  .resource-detail-logo {
+    width: 56px;
+    height: 56px;
+    font-size: 1.125rem;
+    border-radius: 12px;
+  }
+
+  .resource-detail-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .resource-detail-btn {
+    justify-content: center;
+  }
+
+  .resource-detail-suggest-link {
+    margin-left: 0;
+    align-self: center;
+  }
+
+  .resource-detail-grid {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "details"
+      "about";
+    gap: 2rem;
+  }
+
+  .resource-detail-panel {
+    position: static;
+  }
+
+  .resource-detail-content:not(.resource-detail-content--expanded) {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}

content/resources/software/percona-server-for-mysql.md

@@ -2,6 +2,7 @@
 description: A drop-in replacement for MySQL with enhanced performance, observability,
   and security features.
 link: https://www.percona.com/mysql/software/percona-server-for-mysql
+github: percona/percona-server
 subcategories:
 - Database Software
 compatibility:

content/resources/software/proxysql.md

@@ -2,6 +2,7 @@
 description: A high-performance MySQL proxy with query routing, load balancing, and
   failover support.
 link: https://www.proxysql.com/
+github: sysown/proxysql
 subcategories:
 - Proxies & Traffic Management
 compatibility:
@@ -14,3 +15,13 @@ pricing:
 - Open Source
 title: ProxySQL
 ---
+
+ProxySQL sits between applications and MySQL-compatible backends, routing reads
+and writes, caching query results, and failing over automatically when a
+backend goes down. It is protocol-aware, meaning it can inspect and rewrite
+SQL as it passes through, which makes it a common choice for sharding, query
+firewalling, and connection multiplexing at scale.
+
+It supports native replication topologies, Group Replication, and Galera, and
+integrates with Orchestrator and its own admin interface for runtime
+reconfiguration without restarts.