Skip to content

feat: list SQLQuack and SQLLoad as products #11

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
kvlonge merged 1 commit into from
Nov 7, 2026
Merged

feat: list SQLQuack and SQLLoad as products #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 17 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,17 @@ <h3 id="sqltide-name">SQLTide</h3>
</div>
</div>
</article>
<article class="product sqlload" aria-labelledby="sqlload-name">
<img class="product-icon" src="assets/icons/sqlload.png" width="52" height="52" alt="">
<div class="product-content">
<h3 id="sqlload-name">SQLLoad</h3>
<p><span class="text-line">Load data into your warehouse.</span> See how before anything changes.</p>
<div class="product-links">
<a href="https://sqlload.io" aria-label="SQLLoad website">Website <span aria-hidden="true">↗</span></a>
<a href="https://github.com/sqlstack-io/sqlload" aria-label="SQLLoad on GitHub">GitHub <span aria-hidden="true">↗</span></a>
</div>
</div>
</article>
</div>
</section>

Expand Down Expand Up @@ -122,28 +133,15 @@ <h3 id="fensu-name">Fensu</h3>
</div>
</div>
</article>
</div>
</section>

<section class="tool-row upcoming" aria-labelledby="upcoming-title">
<div class="category">
<p class="eyebrow">03 / On the horizon</p>
<h2 id="upcoming-title">More to come.</h2>
<p>Exploring what’s next<br class="desktop-break"> for data engineers.</p>
</div>
<div class="cards">
<article class="product sqlquack" aria-labelledby="sqlquack-name">
<img class="product-icon" src="assets/icons/sqlquack.png" width="52" height="52" alt="">
<div class="upcoming-name">
<div class="product-content">
<h3 id="sqlquack-name">SQLQuack</h3>
<span class="badge">Coming soon</span>
</div>
</article>
<article class="product sqlload" aria-labelledby="sqlload-name">
<img class="product-icon" src="assets/icons/sqlload.png" width="52" height="52" alt="">
<div class="upcoming-name">
<h3 id="sqlload-name">SQLLoad</h3>
<span class="badge">Coming soon</span>
<p><span class="text-line">Run Snowflake SQL locally.</span> Verified results, or a clear no.</p>
<div class="product-links">
<a href="https://sqlquack.io" aria-label="SQLQuack website">Website <span aria-hidden="true">↗</span></a>
<a href="https://github.com/sqlstack-io/sqlquack" aria-label="SQLQuack on GitHub">GitHub <span aria-hidden="true">↗</span></a>
</div>
</div>
</article>
</div>
Expand Down
16 changes: 0 additions & 16 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@
--background: #ffffff;
--panel: #ffffff;
--focus: #1768ba;
--gold-ink: #765600;
--gold-bg: #fff3cb;
--pink-ink: #a52138;
--pink-bg: #ffe5e9;
--gutter: clamp(20px, 4.35vw, 68px);
font-family: Inter, sans-serif;
color: var(--ink);
Expand All @@ -43,10 +39,6 @@
--background: #0d0f12;
--panel: #171a1f;
--focus: #75b5ff;
--gold-ink: #ffe07a;
--gold-bg: #352b12;
--pink-ink: #ffacba;
--pink-bg: #3e2028;
}

* { box-sizing: border-box; }
Expand Down Expand Up @@ -107,11 +99,6 @@ h3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 24.94308px;
.fensu { --accent: #ff6b00; }
.sqlquack { --accent: #ffe000; }
.sqlload { --accent: #ff5268; }
.upcoming .product { min-height: 128px; align-items: center; padding-block: 22px; }
.upcoming .product-icon { margin-top: 0; }
.upcoming-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.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; }
.sqlload .badge { color: var(--pink-ink); background: var(--pink-bg); }
.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; }
.site-footer span:last-child { color: var(--muted); }
#tools { scroll-margin-top: 20px; }
Expand Down Expand Up @@ -139,8 +126,5 @@ h3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 24.94308px;
.category > p:last-child { margin-top: 8px; }
.product { gap: 20px; padding: 22px 18px 18px; }
.product-links a { min-height: 32px; }
.upcoming .product { min-height: 116px; }
.upcoming-name { gap: 8px; }
.badge { padding-inline: 8px; }
.site-footer { flex-wrap: wrap; }
}
14 changes: 8 additions & 6 deletions tests/website.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ test('theme control remains usable when browser storage is blocked', async ({ pa
});

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