Skip to content

Commit 01258e9

Browse files
MazizovaMazizova
committed
Redesign /resources/ as OurSQL Universe hub
- Page heading becomes "OurSQL Universe" with a tagline (nav label and breadcrumbs stay "Resources" — only the page title changes). - Working client-side search: a JSON index of all catalog resources (/index.json) plus static/js/search.js filters live as you type, results link straight to the resource. - Category cards show a real resource count with a per-category unit ("N listings" / "N upcoming" for Events, filtered to future dates / "N spaces" for Community); Member Directory keeps its static label. - "Browse by category" eyebrow + heading above the card grid, left aligned, styled to match the Recently Added eyebrow below it. - Recently Added: the 3 most recently added resources site-wide, sorted by each file's first git commit date rather than any in-content date field (event/course dates mean something else entirely). The date lookup is generated by tools/generate-resource-dates.sh into data/resource_added.yaml (gitignored, regenerated on every build — see the added CI step and README). - Bottom CTA row: "Suggest a resource" + "Get listed as a member" (links to the OurSQL Foundation Slack invite), replacing the old single top-of-hub button. - Light theme: added missing overrides for all of the above (search bar/dropdown, category eyebrow, CTA cards) — they previously had no light-mode styling and rendered unreadable. CI: checkout now uses fetch-depth: 0 and runs the date-generator script before build, so Recently Added has real git history to read.
1 parent cd54d25 commit 01258e9

19 files changed

Lines changed: 517 additions & 12 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ jobs:
2424
steps:
2525
- name: Checkout
2626
uses: actions/checkout@v4
27+
with:
28+
fetch-depth: 0
2729

2830
- name: Setup Hugo
2931
uses: peaceiris/actions-hugo@v3
@@ -35,6 +37,9 @@ jobs:
3537
id: pages
3638
uses: actions/configure-pages@v5
3739

40+
- name: Generate resource "date added" data
41+
run: tools/generate-resource-dates.sh
42+
3843
- name: Build
3944
run: hugo --minify --baseURL "${{ steps.pages.outputs.base_url }}/"
4045

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ public/
33
/resources/
44
.hugo_build.lock
55
.DS_Store
6+
/data/resource_added.yaml

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,12 @@ Clone and start the dev server:
6767
```bash
6868
git clone git@github.com:OurSQLFoundation/OurSQLFoundation.github.io.git
6969
cd OurSQLFoundation.github.io
70+
tools/generate-resource-dates.sh
7071
hugo server -D
7172
```
7273

74+
`tools/generate-resource-dates.sh` builds `data/resource_added.yaml` — the "date added" for each resource, read from git history, used by the Recently Added section on `/resources/`. Re-run it any time you want that section to reflect the latest history; it also runs automatically in CI before every deploy.
75+
7376
Open [localhost:1313](http://localhost:1313) in your browser.
7477

7578
---

‎assets/scss/_light-theme.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,51 @@
283283
border-color: rgba(0, 200, 255, 0.15);
284284
}
285285

286+
// OurSQL Universe hub — search
287+
.resources-search-input {
288+
background: #ffffff;
289+
border-color: #dde3ed;
290+
color: #0f172a;
291+
292+
&::placeholder { color: #94a3b8; }
293+
294+
&:focus { border-color: rgba(0, 200, 255, 0.45); }
295+
}
296+
297+
.resources-search-results {
298+
background: #ffffff;
299+
border-color: #dde3ed;
300+
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
301+
}
302+
303+
.resources-search-result {
304+
border-bottom-color: #dde3ed;
305+
&:hover { background: #f8f9fc; }
306+
}
307+
308+
.resources-search-result-title { color: #0f172a; }
309+
.resources-search-result-desc { color: #64748b; }
310+
.resources-search-result-category,
311+
.resources-category-eyebrow,
312+
.resources-recent-eyebrow,
313+
.resources-recent-card-category { color: #0272a5; }
314+
315+
.resources-search-empty { color: #64748b; }
316+
317+
// OurSQL Universe hub — bottom CTA row
318+
.resources-cta-card {
319+
background: #ffffff;
320+
border-color: #dde3ed;
321+
322+
h3 { color: #0f172a; }
323+
p { color: #64748b; }
324+
325+
&--primary {
326+
background: linear-gradient(180deg, rgba(0, 200, 255, 0.05), #ffffff 60%);
327+
border-color: rgba(0, 200, 255, 0.3);
328+
}
329+
}
330+
286331
.resource-filter-select {
287332
background-color: #ffffff;
288333
border-color: #dde3ed;

‎assets/scss/_resources.scss‎

Lines changed: 213 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,117 @@
2828
line-height: 1.7;
2929
}
3030

31+
// ── Search ──────────────────────────────────────────────────────────────────
32+
.resources-search {
33+
position: relative;
34+
max-width: 640px;
35+
margin: 2.5rem auto 3rem;
36+
}
37+
38+
.resources-search-input {
39+
width: 100%;
40+
padding: 0.875rem 7.5rem 0.875rem 1.25rem;
41+
font-size: 1rem;
42+
font-family: inherit;
43+
color: $off-white;
44+
background: $dark-card;
45+
border: 1px solid $dark-border;
46+
border-radius: 10px;
47+
transition: border-color 0.2s ease;
48+
49+
&::placeholder { color: $muted; }
50+
51+
&:focus {
52+
outline: none;
53+
border-color: rgba($accent, 0.45);
54+
}
55+
}
56+
57+
.resources-search-btn {
58+
position: absolute;
59+
top: 6px;
60+
right: 6px;
61+
padding: 0.5rem 1.25rem;
62+
}
63+
64+
.resources-search-results {
65+
position: absolute;
66+
top: calc(100% + 0.5rem);
67+
left: 0;
68+
right: 0;
69+
z-index: 10;
70+
background: $dark-card;
71+
border: 1px solid $dark-border;
72+
border-radius: 10px;
73+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
74+
overflow: hidden;
75+
max-height: 400px;
76+
overflow-y: auto;
77+
text-align: left;
78+
}
79+
80+
.resources-search-result {
81+
display: flex;
82+
flex-direction: column;
83+
gap: 0.15rem;
84+
padding: 0.75rem 1.25rem;
85+
text-decoration: none;
86+
border-bottom: 1px solid $dark-border;
87+
transition: background 0.15s ease;
88+
89+
&:last-child { border-bottom: none; }
90+
&:hover { background: $dark-surface; }
91+
}
92+
93+
.resources-search-result-category {
94+
font-size: 0.6875rem;
95+
font-weight: 700;
96+
letter-spacing: 0.06em;
97+
text-transform: uppercase;
98+
color: $accent;
99+
}
100+
101+
.resources-search-result-title {
102+
font-size: 0.9375rem;
103+
font-weight: 600;
104+
color: $off-white;
105+
}
106+
107+
.resources-search-result-desc {
108+
font-size: 0.8125rem;
109+
color: $muted;
110+
line-height: 1.5;
111+
}
112+
113+
.resources-search-empty {
114+
padding: 1rem 1.25rem;
115+
font-size: 0.875rem;
116+
color: $muted;
117+
margin: 0;
118+
text-align: left;
119+
}
120+
121+
.resources-category-header {
122+
margin-bottom: 2rem;
123+
}
124+
125+
.resources-category-eyebrow {
126+
display: block;
127+
font-size: 0.75rem;
128+
font-weight: 700;
129+
letter-spacing: 0.08em;
130+
text-transform: uppercase;
131+
color: $accent;
132+
margin-bottom: 0.5rem;
133+
}
134+
135+
.resources-category-title {
136+
font-size: 1.5rem;
137+
font-weight: 700;
138+
color: $off-white;
139+
margin: 0;
140+
}
141+
31142
// Hub category card grid
32143
.resources-hub-grid {
33144
display: grid;
@@ -102,6 +213,94 @@
102213
padding: 0.2rem 0.6rem;
103214
align-self: flex-start;
104215
line-height: 1;
216+
217+
&--label {
218+
text-transform: none;
219+
letter-spacing: 0;
220+
}
221+
}
222+
223+
// ── Recently added ─────────────────────────────────────────────────────────
224+
.resources-recent {
225+
margin-top: 4rem;
226+
}
227+
228+
.resources-recent-header {
229+
margin-bottom: 1.5rem;
230+
231+
h2 {
232+
font-size: 1.5rem;
233+
font-weight: 700;
234+
color: $off-white;
235+
margin: 0.35rem 0 0;
236+
}
237+
}
238+
239+
.resources-recent-eyebrow {
240+
font-size: 0.75rem;
241+
font-weight: 700;
242+
letter-spacing: 0.08em;
243+
text-transform: uppercase;
244+
color: $accent;
245+
}
246+
247+
.resources-recent-grid {
248+
display: grid;
249+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
250+
gap: 1.25rem;
251+
252+
@media (min-width: $break-lg) {
253+
grid-template-columns: repeat(3, 1fr);
254+
}
255+
}
256+
257+
.resource-recent-card {
258+
text-decoration: none;
259+
color: inherit;
260+
}
261+
262+
.resources-recent-card-category {
263+
display: block;
264+
font-size: 0.6875rem;
265+
font-weight: 700;
266+
letter-spacing: 0.06em;
267+
text-transform: uppercase;
268+
color: $accent;
269+
margin-bottom: 0.5rem;
270+
}
271+
272+
// ── Bottom CTA ──────────────────────────────────────────────────────────────
273+
.resources-cta-row {
274+
display: grid;
275+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
276+
gap: 1.25rem;
277+
margin-top: 4rem;
278+
}
279+
280+
.resources-cta-card {
281+
padding: 2rem;
282+
background: $dark-card;
283+
border: 1px solid $dark-border;
284+
border-radius: 12px;
285+
286+
h3 {
287+
font-size: 1.125rem;
288+
font-weight: 600;
289+
color: $off-white;
290+
margin: 0 0 0.5rem;
291+
}
292+
293+
p {
294+
font-size: 0.9375rem;
295+
color: $muted;
296+
line-height: 1.6;
297+
margin: 0 0 1.5rem;
298+
}
299+
300+
&--primary {
301+
border-color: rgba($accent, 0.3);
302+
background: linear-gradient(180deg, rgba($accent, 0.06), $dark-card 60%);
303+
}
105304
}
106305

107306
// ── Subsection list page ───────────────────────────────────────────────────
@@ -640,14 +839,27 @@
640839
padding-right: 1rem;
641840
}
642841

643-
.resources-hub-grid {
842+
.resources-hub-grid,
843+
.resources-recent-grid,
844+
.resources-cta-row {
644845
grid-template-columns: 1fr;
645846
}
646847

647848
.resources-list-grid {
648849
grid-template-columns: 1fr;
649850
}
650851

852+
.resources-search-input {
853+
padding-right: 1.25rem;
854+
}
855+
856+
.resources-search-btn {
857+
position: static;
858+
display: block;
859+
width: 100%;
860+
margin-top: 0.75rem;
861+
}
862+
651863
.resource-single-card {
652864
padding: 1.5rem;
653865
}
@@ -672,10 +884,6 @@
672884
}
673885
}
674886

675-
.resources-hub-actions {
676-
text-align: right;
677-
margin-bottom: 1.5rem;
678-
}
679887

680888
// ── Contribute page ─────────────────────────────────────────────────────────
681889
.contribute-page {

‎content/resources/_index.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
description: A curated directory of MySQL ecosystem tools, services, learning materials,
3-
and community spaces — maintained by the OurSQL Foundation community.
2+
description: The MySQL ecosystem in one place. Tools, services, companies, events,
3+
and community — curated and connected.
44
image: images/og/resources-1200x630.png
5-
title: Resources
5+
title: OurSQL Universe
66
---

‎content/resources/books/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ image: images/og/resources-books-1200x630.png
66
sort: title
77
title: Books & Publications
88
weight: 5
9+
count_unit: listings
910
---

‎content/resources/community/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ image: images/og/resources-community-1200x630.png
66
sort: title
77
title: Community
88
weight: 7
9+
count_unit: spaces
910
---

‎content/resources/events/_index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@ image: images/og/resources-events-1200x630.png
66
sort: date
77
title: Events
88
weight: 6
9+
count_unit: upcoming
10+
count_mode: upcoming
911
---

‎content/resources/member-directory/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ url: /member-directory/
66
sort: title
77
title: Member Directory
88
weight: 8
9+
count_label: "Members · Adopters · People"
910
---

0 commit comments

Comments
 (0)