Skip to content

Add OG meta tags for social sharing #7

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
wavekat-eason merged 3 commits into from
Mar 30, 2026
Merged

Add OG meta tags for social sharing #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e27dbe
feat: add Open Graph meta tags for social sharing
wavekat-eason Mar 30, 2026
e5cdfea
fix: convert og.svg to PNG at build time with resvg
wavekat-eason Mar 30, 2026
384648a
fix: bump wavekat-brand submodule to include og.svg
wavekat-eason Mar 30, 2026
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ dist/

# Generated from vendor/wavekat-brand submodule (run `make sync`)
/public/logos/
/public/og.png

# Environment
.env
Expand Down
2 changes: 1 addition & 1 deletion Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ cf-build:

# Remove build artifacts and synced assets
clean:
rm -rf dist/ .astro/ public/logos/
rm -rf dist/ .astro/ public/logos/ public/og.png

help:
@echo "Usage: make <target>"
Expand Down
1 change: 1 addition & 0 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import tailwindcss from '@tailwindcss/vite';

// https://astro.build/config
export default defineConfig({
site: 'https://wavekat.com',
output: 'static',
vite: {
plugins: [tailwindcss()],
Expand Down
216 changes: 216 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"astro": "astro"
},
"dependencies": {
"@resvg/resvg-js": "^2.6.2",
"@tailwindcss/vite": "^4.2.2",
"astro": "^6.1.1",
"tailwindcss": "^4.2.2"
Expand Down
22 changes: 15 additions & 7 deletions scripts/sync-brand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@
// npm run cf:build
// as the Pages build command.

import { cpSync, mkdirSync } from "fs";
import { cpSync, mkdirSync, readFileSync, writeFileSync } from "fs";
import { execSync } from "child_process";
import { join } from "path";
import { fileURLToPath } from "url";
import { Resvg } from "@resvg/resvg-js";

const root = join(fileURLToPath(import.meta.url), "../..");
const src = join(root, "vendor/wavekat-brand/assets/logos");
const dest = join(root, "public/logos");
const brandDir = join(root, "vendor/wavekat-brand/assets");
const logoSrc = join(brandDir, "logos");
const logoDest = join(root, "public/logos");

const assets = [
const logos = [
"wavekat-tight-light.svg",
"wavekat-tight-dark.svg",
"wavekat-icon-light.svg",
Expand All @@ -30,9 +32,15 @@ try {
// Not a fatal error — submodule may already be present
}

mkdirSync(dest, { recursive: true });
mkdirSync(logoDest, { recursive: true });

for (const file of assets) {
cpSync(join(src, file), join(dest, file));
for (const file of logos) {
cpSync(join(logoSrc, file), join(logoDest, file));
console.log(`synced ${file}`);
}

// Convert og.svg → og.png (social platforms require raster images)
const ogSvg = readFileSync(join(brandDir, "og.svg"), "utf8");
const resvg = new Resvg(ogSvg, { fitTo: { mode: "width", value: 1200 } });
writeFileSync(join(root, "public/og.png"), resvg.render().asPng());
console.log("synced og.svg → og.png");
21 changes: 21 additions & 0 deletions src/layouts/Base.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,17 @@ import '../styles/global.css';
interface Props {
title?: string;
description?: string;
ogImage?: string;
}

const {
title = 'WaveKat',
description = 'Give every small business the voice of a big one.',
ogImage = '/og.png',
} = Astro.props;

const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const ogImageURL = new URL(ogImage, Astro.site);
---

<!doctype html>
Expand All @@ -18,8 +23,24 @@ const {
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />
<link rel="icon" type="image/svg+xml" href="/logos/wavekat-icon-light.svg" />
<title>{title}</title>

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImageURL} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImageURL} />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
Expand Down
2 changes: 1 addition & 1 deletion vendor/wavekat-brand
Open in desktop
Submodule wavekat-brand updated 4 files
+6 −1 Makefile
+20 −1 README.md
+197 −0 assets/og.svg
+131 −0 src/og.svg
Loading