Skip to content

Commit 7058a7f

Browse files
MazizovaMazizova
authored
Merge pull request #27 from Mazizova/resource-detail-card-redesign
Redesign the resource detail card for Software/SaaS/Services
2 parents e8ab379 + fb3605f commit 7058a7f

13 files changed

Lines changed: 589 additions & 35 deletions

File tree

‎RESOURCES.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,20 @@ deployment: ["Self-Hosted"] # Self-Hosted, Kubernetes, Docker, Cloud-Native,
7575
pricing: ["Open Source"] # Open Source, Commercial, Free, Paid, Enterprise, Open Source & Open Core
7676
```
7777
78+
**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:
79+
```yaml
80+
github: "owner/repo" # optional — shorthand, or a full https://github.com/... URL. Adds
81+
# a "View on GitHub" button and a Repository row. Only set it when
82+
# it's a genuinely separate URL from `link` — skip it if `link`
83+
# already points at the repo.
84+
member: true # optional — shows the "OurSQL Member" badge. Only set this when the
85+
# resource's org is an actual OurSQL Foundation member/sponsor/partner;
86+
# leave it unset otherwise (the row/badge is just omitted, no placeholder).
87+
last_reviewed: 2026-08-14 # optional — shows a "Last reviewed" row, credited to the editorial
88+
# team. Only set it once someone has actually reviewed the listing.
89+
```
90+
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.
91+
7892
**`content/resources/saas/`** — subcategories: Managed Databases · Monitoring SaaS · Backup & Recovery SaaS · Migration & Replication SaaS · Developer Platforms · Security & Compliance SaaS
7993
```yaml
8094
cloud-providers: ["AWS"] # AWS, Azure, GCP, Multi-Cloud, Private Cloud

‎assets/scss/_light-theme.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,62 @@
195195
&:hover { color: #0272a5; border-color: rgba(0,200,255,0.4); }
196196
}
197197

198+
// Resource detail card (Software & Tools / SaaS & Cloud Solutions / Services)
199+
.resource-detail-logo {
200+
background: #f1f5f9;
201+
border-color: #dde3ed;
202+
color: #0272a5;
203+
204+
&--img { background: #ffffff; }
205+
}
206+
207+
.resource-detail-title { color: #0f172a; }
208+
.resource-detail-desc { color: #64748b; }
209+
210+
.resource-detail-member-badge,
211+
.resource-detail-panel-yes {
212+
color: #0272a5;
213+
background: rgba(0, 200, 255, 0.08);
214+
border-color: rgba(0, 200, 255, 0.3);
215+
}
216+
217+
.resource-detail-btn {
218+
&--primary {
219+
background: #0ea5e9;
220+
border-color: #0ea5e9;
221+
color: #ffffff;
222+
&:hover { background: #0284c7; }
223+
}
224+
&--secondary {
225+
color: #0f172a;
226+
border-color: #dde3ed;
227+
&:hover { color: #0272a5; border-color: rgba(0, 200, 255, 0.4); }
228+
}
229+
}
230+
231+
.resource-detail-divider { border-top-color: #dde3ed; }
232+
233+
.resource-detail-content { color: #334155; }
234+
235+
.resource-detail-readmore-btn { color: #0272a5; }
236+
237+
.resource-detail-panel {
238+
background: #ffffff;
239+
border-color: #dde3ed;
240+
}
241+
242+
.resource-detail-panel-row { border-bottom-color: #dde3ed; }
243+
.resource-detail-panel-label { color: #94a3b8; }
244+
.resource-detail-panel-value { color: #0f172a; }
245+
.resource-detail-panel-subvalue { color: #94a3b8; }
246+
.resource-detail-panel-link { color: #0272a5; }
247+
248+
.resource-suggest-btn {
249+
color: #64748b;
250+
border-color: #dde3ed;
251+
&:hover { color: #0f172a; border-color: rgba(0, 200, 255, 0.4); }
252+
}
253+
198254
// Contribute page
199255
.contribute-method {
200256
background: #ffffff;

‎assets/scss/_resources.scss‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1503,3 +1503,280 @@ body.sheet-open {
15031503
gap: 0.375rem;
15041504
}
15051505
}
1506+
1507+
// ── Resource detail card (Software & Tools / SaaS & Cloud Solutions / Services) ──
1508+
1509+
.resource-detail {
1510+
max-width: $container-max;
1511+
margin: 0 auto;
1512+
padding: 120px 2rem $section-pad;
1513+
}
1514+
1515+
.resource-detail-hero {
1516+
display: flex;
1517+
align-items: flex-start;
1518+
gap: 1.25rem;
1519+
margin: 2rem 0 1.5rem;
1520+
}
1521+
1522+
.resource-detail-logo {
1523+
flex-shrink: 0;
1524+
width: 72px;
1525+
height: 72px;
1526+
border-radius: 14px;
1527+
background: $dark-surface;
1528+
border: 1px solid $dark-border;
1529+
display: flex;
1530+
align-items: center;
1531+
justify-content: center;
1532+
font-size: 1.375rem;
1533+
font-weight: 700;
1534+
color: $accent;
1535+
letter-spacing: 0.02em;
1536+
1537+
&--img {
1538+
object-fit: contain;
1539+
padding: 10px;
1540+
background: $white;
1541+
}
1542+
}
1543+
1544+
.resource-detail-titlerow {
1545+
display: flex;
1546+
align-items: center;
1547+
flex-wrap: wrap;
1548+
gap: 0.75rem;
1549+
}
1550+
1551+
.resource-detail-title {
1552+
font-size: clamp(1.5rem, 3.5vw, 2rem);
1553+
font-weight: 700;
1554+
color: $off-white;
1555+
margin: 0;
1556+
}
1557+
1558+
.resource-detail-member-badge {
1559+
display: inline-flex;
1560+
align-items: center;
1561+
gap: 0.3rem;
1562+
font-size: 0.75rem;
1563+
font-weight: 600;
1564+
color: $accent;
1565+
border: 1px solid rgba($accent, 0.35);
1566+
background: $accent-glow;
1567+
border-radius: 100px;
1568+
padding: 0.25rem 0.7rem;
1569+
white-space: nowrap;
1570+
1571+
svg { flex-shrink: 0; }
1572+
}
1573+
1574+
.resource-detail-desc {
1575+
font-size: 1.0625rem;
1576+
color: $muted;
1577+
line-height: 1.65;
1578+
margin: 0.5rem 0 0;
1579+
}
1580+
1581+
.resource-detail-actions {
1582+
display: flex;
1583+
align-items: center;
1584+
flex-wrap: wrap;
1585+
gap: 0.875rem;
1586+
margin-bottom: 2rem;
1587+
}
1588+
1589+
.resource-detail-btn {
1590+
display: inline-flex;
1591+
align-items: center;
1592+
gap: 0.5rem;
1593+
font-size: 0.9375rem;
1594+
font-weight: 600;
1595+
text-decoration: none;
1596+
border-radius: 8px;
1597+
padding: 0.75rem 1.5rem;
1598+
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
1599+
1600+
&--primary {
1601+
background: $accent;
1602+
color: $black;
1603+
border: 1px solid $accent;
1604+
1605+
&:hover { background: lighten($accent, 8%); transform: translateY(-1px); }
1606+
}
1607+
1608+
&--secondary {
1609+
background: transparent;
1610+
color: $off-white;
1611+
border: 1px solid $dark-border;
1612+
1613+
&:hover { border-color: rgba($accent, 0.4); color: $accent; }
1614+
1615+
svg { flex-shrink: 0; }
1616+
}
1617+
}
1618+
1619+
.resource-detail-suggest-link {
1620+
margin-left: auto;
1621+
}
1622+
1623+
.resource-detail-divider {
1624+
border: 0;
1625+
border-top: 1px solid $dark-border;
1626+
margin: 0 0 2.5rem;
1627+
}
1628+
1629+
.resource-detail-grid {
1630+
display: grid;
1631+
grid-template-columns: 1fr 320px;
1632+
grid-template-areas: "about details";
1633+
gap: 3rem;
1634+
align-items: start;
1635+
}
1636+
1637+
.resource-detail-about {
1638+
grid-area: about;
1639+
}
1640+
1641+
.resource-detail-content {
1642+
color: $off-white;
1643+
line-height: 1.75;
1644+
margin: 0.75rem 0 1.25rem;
1645+
1646+
p + p { margin-top: 1rem; }
1647+
}
1648+
1649+
.resource-detail-readmore-btn {
1650+
display: inline-block;
1651+
background: none;
1652+
border: 0;
1653+
padding: 0 0 1.25rem;
1654+
margin: -0.75rem 0 0;
1655+
font-size: 0.875rem;
1656+
font-weight: 600;
1657+
color: $accent;
1658+
cursor: pointer;
1659+
1660+
&:hover { text-decoration: underline; }
1661+
&[hidden] { display: none; }
1662+
}
1663+
1664+
.resource-detail-panel {
1665+
grid-area: details;
1666+
position: sticky;
1667+
top: 100px;
1668+
background: $dark-card;
1669+
border: 1px solid $dark-border;
1670+
border-radius: 16px;
1671+
padding: 1.5rem;
1672+
display: flex;
1673+
flex-direction: column;
1674+
}
1675+
1676+
.resource-detail-panel-row {
1677+
padding: 0.85rem 0;
1678+
border-bottom: 1px solid $dark-border;
1679+
display: flex;
1680+
flex-direction: column;
1681+
gap: 0.3rem;
1682+
1683+
&:first-child { padding-top: 0; }
1684+
&:last-of-type { border-bottom: 0; }
1685+
}
1686+
1687+
.resource-detail-panel-label {
1688+
font-size: 0.6875rem;
1689+
font-weight: 700;
1690+
letter-spacing: 0.06em;
1691+
text-transform: uppercase;
1692+
color: $muted;
1693+
}
1694+
1695+
.resource-detail-panel-value {
1696+
font-size: 0.9375rem;
1697+
font-weight: 500;
1698+
color: $off-white;
1699+
}
1700+
1701+
.resource-detail-panel-subvalue {
1702+
display: block;
1703+
font-size: 0.75rem;
1704+
font-weight: 400;
1705+
color: $muted;
1706+
margin-top: 0.15rem;
1707+
}
1708+
1709+
.resource-detail-panel-link {
1710+
font-size: 0.9375rem;
1711+
font-weight: 500;
1712+
color: $accent;
1713+
text-decoration: none;
1714+
word-break: break-word;
1715+
1716+
&:hover { text-decoration: underline; }
1717+
}
1718+
1719+
.resource-detail-panel-yes {
1720+
display: inline-flex;
1721+
align-self: flex-start;
1722+
font-size: 0.8125rem;
1723+
font-weight: 600;
1724+
color: $accent;
1725+
background: $accent-glow;
1726+
border: 1px solid rgba($accent, 0.35);
1727+
border-radius: 100px;
1728+
padding: 0.15rem 0.65rem;
1729+
}
1730+
1731+
.resource-detail-panel-suggest {
1732+
margin-top: 1.25rem;
1733+
width: 100%;
1734+
justify-content: center;
1735+
text-align: center;
1736+
}
1737+
1738+
@media (max-width: $break-md) {
1739+
.resource-detail {
1740+
padding: 30px 1rem $section-pad;
1741+
}
1742+
1743+
.resource-detail-logo {
1744+
width: 56px;
1745+
height: 56px;
1746+
font-size: 1.125rem;
1747+
border-radius: 12px;
1748+
}
1749+
1750+
.resource-detail-actions {
1751+
flex-direction: column;
1752+
align-items: stretch;
1753+
}
1754+
1755+
.resource-detail-btn {
1756+
justify-content: center;
1757+
}
1758+
1759+
.resource-detail-suggest-link {
1760+
margin-left: 0;
1761+
align-self: center;
1762+
}
1763+
1764+
.resource-detail-grid {
1765+
grid-template-columns: 1fr;
1766+
grid-template-areas:
1767+
"details"
1768+
"about";
1769+
gap: 2rem;
1770+
}
1771+
1772+
.resource-detail-panel {
1773+
position: static;
1774+
}
1775+
1776+
.resource-detail-content:not(.resource-detail-content--expanded) {
1777+
display: -webkit-box;
1778+
-webkit-line-clamp: 3;
1779+
-webkit-box-orient: vertical;
1780+
overflow: hidden;
1781+
}
1782+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
description: A drop-in replacement for MySQL with enhanced performance, observability,
33
and security features.
44
link: https://www.percona.com/mysql/software/percona-server-for-mysql
5+
github: percona/percona-server
56
subcategories:
67
- Database Software
78
compatibility:

‎content/resources/software/proxysql.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
description: A high-performance MySQL proxy with query routing, load balancing, and
33
failover support.
44
link: https://www.proxysql.com/
5+
github: sysown/proxysql
56
subcategories:
67
- Proxies & Traffic Management
78
compatibility:
@@ -14,3 +15,13 @@ pricing:
1415
- Open Source
1516
title: ProxySQL
1617
---
18+
19+
ProxySQL sits between applications and MySQL-compatible backends, routing reads
20+
and writes, caching query results, and failing over automatically when a
21+
backend goes down. It is protocol-aware, meaning it can inspect and rewrite
22+
SQL as it passes through, which makes it a common choice for sharding, query
23+
firewalling, and connection multiplexing at scale.
24+
25+
It supports native replication topologies, Group Replication, and Galera, and
26+
integrates with Orchestrator and its own admin interface for runtime
27+
reconfiguration without restarts.

0 commit comments

Comments
 (0)