Skip to content

Commit 775b711

Browse files
kvlongekvlonge
authored
feat: list SQLQuack and SQLLoad as products (#11)
SQLLoad joins Transform and SQLQuack joins Check, each with a full product card: icon, a description taken from its own site, and Website and GitHub links. The On the horizon section and its Coming soon badge styles are removed now that it is empty. The tests check both cards' sections, descriptions and links.
1 parent 6764f1d commit 775b711

3 files changed

Lines changed: 25 additions & 41 deletions

File tree

‎index.html‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,17 @@ <h3 id="sqltide-name">SQLTide</h3>
8888
</div>
8989
</div>
9090
</article>
91+
<article class="product sqlload" aria-labelledby="sqlload-name">
92+
<img class="product-icon" src="assets/icons/sqlload.png" width="52" height="52" alt="">
93+
<div class="product-content">
94+
<h3 id="sqlload-name">SQLLoad</h3>
95+
<p><span class="text-line">Load data into your warehouse.</span> See how before anything changes.</p>
96+
<div class="product-links">
97+
<a href="https://sqlload.io" aria-label="SQLLoad website">Website <span aria-hidden="true">↗</span></a>
98+
<a href="https://github.com/sqlstack-io/sqlload" aria-label="SQLLoad on GitHub">GitHub <span aria-hidden="true">↗</span></a>
99+
</div>
100+
</div>
101+
</article>
91102
</div>
92103
</section>
93104

@@ -122,28 +133,15 @@ <h3 id="fensu-name">Fensu</h3>
122133
</div>
123134
</div>
124135
</article>
125-
</div>
126-
</section>
127-
128-
<section class="tool-row upcoming" aria-labelledby="upcoming-title">
129-
<div class="category">
130-
<p class="eyebrow">03 / On the horizon</p>
131-
<h2 id="upcoming-title">More to come.</h2>
132-
<p>Exploring what’s next<br class="desktop-break"> for data engineers.</p>
133-
</div>
134-
<div class="cards">
135136
<article class="product sqlquack" aria-labelledby="sqlquack-name">
136137
<img class="product-icon" src="assets/icons/sqlquack.png" width="52" height="52" alt="">
137-
<div class="upcoming-name">
138+
<div class="product-content">
138139
<h3 id="sqlquack-name">SQLQuack</h3>
139-
<span class="badge">Coming soon</span>
140-
</div>
141-
</article>
142-
<article class="product sqlload" aria-labelledby="sqlload-name">
143-
<img class="product-icon" src="assets/icons/sqlload.png" width="52" height="52" alt="">
144-
<div class="upcoming-name">
145-
<h3 id="sqlload-name">SQLLoad</h3>
146-
<span class="badge">Coming soon</span>
140+
<p><span class="text-line">Run Snowflake SQL locally.</span> Verified results, or a clear no.</p>
141+
<div class="product-links">
142+
<a href="https://sqlquack.io" aria-label="SQLQuack website">Website <span aria-hidden="true">↗</span></a>
143+
<a href="https://github.com/sqlstack-io/sqlquack" aria-label="SQLQuack on GitHub">GitHub <span aria-hidden="true">↗</span></a>
144+
</div>
147145
</div>
148146
</article>
149147
</div>

‎styles.css‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,6 @@
2323
--background: #ffffff;
2424
--panel: #ffffff;
2525
--focus: #1768ba;
26-
--gold-ink: #765600;
27-
--gold-bg: #fff3cb;
28-
--pink-ink: #a52138;
29-
--pink-bg: #ffe5e9;
3026
--gutter: clamp(20px, 4.35vw, 68px);
3127
font-family: Inter, sans-serif;
3228
color: var(--ink);
@@ -43,10 +39,6 @@
4339
--background: #0d0f12;
4440
--panel: #171a1f;
4541
--focus: #75b5ff;
46-
--gold-ink: #ffe07a;
47-
--gold-bg: #352b12;
48-
--pink-ink: #ffacba;
49-
--pink-bg: #3e2028;
5042
}
5143

5244
* { box-sizing: border-box; }
@@ -107,11 +99,6 @@ h3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 24.94308px;
10799
.fensu { --accent: #ff6b00; }
108100
.sqlquack { --accent: #ffe000; }
109101
.sqlload { --accent: #ff5268; }
110-
.upcoming .product { min-height: 128px; align-items: center; padding-block: 22px; }
111-
.upcoming .product-icon { margin-top: 0; }
112-
.upcoming-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
113-
.badge { display: inline-block; padding: 6px 10px; border-radius: 4px; font-size: 12px; line-height: 16px; color: var(--gold-ink); background: var(--gold-bg); white-space: nowrap; }
114-
.sqlload .badge { color: var(--pink-ink); background: var(--pink-bg); }
115102
.site-footer { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0 24px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
116103
.site-footer span:last-child { color: var(--muted); }
117104
#tools { scroll-margin-top: 20px; }
@@ -139,8 +126,5 @@ h3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 24.94308px;
139126
.category > p:last-child { margin-top: 8px; }
140127
.product { gap: 20px; padding: 22px 18px 18px; }
141128
.product-links a { min-height: 32px; }
142-
.upcoming .product { min-height: 116px; }
143-
.upcoming-name { gap: 8px; }
144-
.badge { padding-inline: 8px; }
145129
.site-footer { flex-wrap: wrap; }
146130
}

‎tests/website.spec.mjs‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ test('theme control remains usable when browser storage is blocked', async ({ pa
4343
});
4444

4545
test('approved products, sharing assets and responsive navigation work in both themes', async ({ page, request }) => {
46-
const names = ['SQLBuild', 'SQLTide', 'SQLClean', 'Fensu', 'SQLQuack', 'SQLLoad'];
46+
const names = ['SQLBuild', 'SQLTide', 'SQLLoad', 'SQLClean', 'Fensu', 'SQLQuack'];
4747
for (const theme of ['light', 'dark']) {
4848
await page.emulateMedia({ colorScheme: theme });
4949
await page.goto('/');
@@ -55,7 +55,7 @@ test('approved products, sharing assets and responsive navigation work in both t
5555
await expect(wordmark).toHaveCSS(property, value);
5656
}
5757
await expect(page.getByRole('link', { name: 'SQLStack on GitHub', exact: true })).toHaveAttribute('href', 'https://github.com/sqlstack-io');
58-
for (const [name, website] of [['SQLBuild', 'https://sqlbuild.com'], ['SQLTide', 'https://sqltide.io/'], ['SQLClean', 'https://sqlclean.io'], ['Fensu', 'https://fensu.io/']]) {
58+
for (const [name, website] of [['SQLBuild', 'https://sqlbuild.com'], ['SQLTide', 'https://sqltide.io/'], ['SQLClean', 'https://sqlclean.io'], ['Fensu', 'https://fensu.io/'], ['SQLLoad', 'https://sqlload.io'], ['SQLQuack', 'https://sqlquack.io']]) {
5959
const card = page.getByRole('article', { name, exact: true });
6060
await expect(card.getByRole('link', { name: `${name} website`, exact: true })).toHaveAttribute('href', website);
6161
await expect(card.getByRole('link', { name: `${name} on GitHub`, exact: true })).toHaveAttribute('href', `https://github.com/sqlstack-io/${name.toLowerCase()}`);
@@ -72,11 +72,13 @@ test('approved products, sharing assets and responsive navigation work in both t
7272
await expect(sqlclean.locator('p')).toHaveText('SQL linting and formatting. Lint 10,000 files in under a second.');
7373
await expect(sqlclean.getByRole('link', { name: 'under a second.', exact: true })).toHaveAttribute('href', 'https://sqlclean.io/docs/benchmarks/');
7474
await expect(page.getByText('Published benchmark:', { exact: false })).toHaveCount(0);
75-
for (const name of names.slice(4)) {
76-
const card = page.getByRole('article', { name, exact: true });
77-
await expect(card.getByText('Coming soon', { exact: true })).toBeVisible();
78-
await expect(card.getByRole('link')).toHaveCount(0);
75+
for (const [section, products] of [['Build your data.', ['SQLBuild', 'SQLTide', 'SQLLoad']], ['Keep it sound.', ['SQLClean', 'Fensu', 'SQLQuack']]]) {
76+
const row = page.getByRole('region', { name: section, exact: true });
77+
await expect(row.getByRole('heading', { level: 3 })).toHaveText(products);
7978
}
79+
await expect(page.getByRole('article', { name: 'SQLLoad', exact: true }).locator('p')).toHaveText('Load data into your warehouse. See how before anything changes.');
80+
await expect(page.getByRole('article', { name: 'SQLQuack', exact: true }).locator('p')).toHaveText('Run Snowflake SQL locally. Verified results, or a clear no.');
81+
await expect(page.getByText(/coming soon|on the horizon/i)).toHaveCount(0);
8082
await expect(page.getByRole('article', { name: 'Fensu', exact: true })).not.toContainText(/pre-release|coming soon/i);
8183
for (const width of [320, 390, 768, 1536]) {
8284
await page.setViewportSize({ width, height: 900 });

0 commit comments

Comments
 (0)