Skip to content

Fix dark social card framing for square previews #2

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 1, 2026
Merged

Fix dark social card framing for square previews #2

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
7 changes: 5 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,11 @@ publishing or deployment step.

`favicon.ico` contains 16px, 32px and 48px icons. PNG favicons and a 180px Apple touch icon use the
original SQLStack mark on white backing for legibility in light and dark browser chrome.
`assets/og-sqlstack.png` is an opaque 1200 × 630 sharing card using the original SQLStack wordmark
and the site's Inter typography. These are raster derivatives, not replacement logos or SVG originals.
`assets/og-sqlstack-dark.png` is an opaque 1200 × 630 sharing card using the original SQLStack
wordmark and the site's Inter typography on a near-black background. Its branding and text fit
inside the central 630px square so small thumbnail crops retain the complete message. The previous
`assets/og-sqlstack.png` remains available for cached metadata. These are raster derivatives, not
replacement logos or SVG originals.

Canonical and Open Graph/Twitter URLs target `https://sqlstack.io/`. Local previews can verify the
metadata and assets, but public social-crawler validation requires a separately authorized deployment.
Binary file added assets/og-sqlstack-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@
<meta property="og:title" content="SQLStack | Your data stack. Engineered to change.">
<meta property="og:description" content="Rust-backed SQL and Python tools for data engineers. Compile-time checks, tested behaviour and enforceable architecture.">
<meta property="og:url" content="https://sqlstack.io/">
<meta property="og:image" content="https://sqlstack.io/assets/og-sqlstack.png">
<meta property="og:image" content="https://sqlstack.io/assets/og-sqlstack-dark.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="SQLStack. Your data stack. Engineered to change. Rust-backed SQL and Python tools for data engineers.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SQLStack | Your data stack. Engineered to change.">
<meta name="twitter:description" content="Rust-backed SQL and Python tools for data engineers. Compile-time checks, tested behaviour and enforceable architecture.">
<meta name="twitter:image" content="https://sqlstack.io/assets/og-sqlstack.png">
<meta name="twitter:image" content="https://sqlstack.io/assets/og-sqlstack-dark.png">
<meta name="twitter:image:alt" content="SQLStack. Your data stack. Engineered to change. Rust-backed SQL and Python tools for data engineers.">
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16 32x32 48x48">
<link rel="icon" href="assets/favicon-16.png" type="image/png" sizes="16x16">
Expand Down
4 changes: 2 additions & 2 deletions tests/website.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,10 @@ test('approved products, sharing assets and responsive navigation work in both t
await expect(page.locator('meta[property="og:url"]')).toHaveAttribute('content', 'https://sqlstack.io/');
await expect(page.locator('meta[name="twitter:card"]')).toHaveAttribute('content', 'summary_large_image');
for (const selector of ['meta[property="og:image"]', 'meta[name="twitter:image"]']) {
await expect(page.locator(selector)).toHaveAttribute('content', 'https://sqlstack.io/assets/og-sqlstack.png');
await expect(page.locator(selector)).toHaveAttribute('content', 'https://sqlstack.io/assets/og-sqlstack-dark.png');
}
for (const [path, width, height] of [
['/assets/og-sqlstack.png', 1200, 630],
['/assets/og-sqlstack-dark.png', 1200, 630],
['/assets/favicon-16.png', 16, 16],
['/assets/favicon-32.png', 32, 32],
['/assets/apple-touch-icon.png', 180, 180],
Expand Down
Loading