Skip to content

Commit 6d35c57

Browse files
SableRafSableRaf
committed
Add Open Graph image and metadata support
1 parent 691338c commit 6d35c57

4 files changed

Lines changed: 69 additions & 1 deletion

File tree

‎pcd-website/src/components/NodePanel.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,8 @@ function getDescPreview(node: Node): { text: string; hasMore: boolean } {
173173
}
174174
175175
function getShareUrl(node: Node): string {
176-
return `${window.location.origin}${window.location.pathname}?event=${node.id}`;
176+
const base = window.location.pathname.replace(/\/$/, '');
177+
return `${window.location.origin}${base}/event/${node.id}/`;
177178
}
178179
179180
async function copyLink(node: Node) {

‎pcd-website/src/images/og-image.png‎

493 KB
Loading

‎pcd-website/src/pages/event/[id].astro‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
import { loadNodes } from '../../lib/nodes';
3+
import type { Node } from '../../lib/nodes';
4+
import ogImage from '../../images/og-image.png';
5+
6+
export async function getStaticPaths() {
7+
const nodes = await loadNodes();
8+
return nodes.map((node) => ({ params: { id: node.id }, props: { node } }));
9+
}
10+
11+
interface Props { node: Node; }
12+
const { node } = Astro.props;
13+
14+
const siteUrl = Astro.site ? Astro.site.href.replace(/\/$/, '') : '';
15+
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
16+
const ogImageUrl = `${siteUrl}${ogImage.src}`;
17+
const spaUrl = `${siteUrl}${base}/?event=${node.id}`;
18+
19+
const title = `${node.event_name} — Processing Community Day 2026`;
20+
const description = node.event_short_description;
21+
---
22+
23+
<!DOCTYPE html>
24+
<html lang="en">
25+
<head>
26+
<meta charset="utf-8" />
27+
<meta name="viewport" content="width=device-width, initial-scale=1" />
28+
<title>{title}</title>
29+
<meta name="description" content={description} />
30+
<meta name="robots" content="noindex" />
31+
<meta http-equiv="refresh" content={`0;url=${spaUrl}`} />
32+
<link rel="canonical" href={spaUrl} />
33+
<meta property="og:title" content={title} />
34+
<meta property="og:description" content={description} />
35+
<meta property="og:type" content="website" />
36+
<meta property="og:url" content={spaUrl} />
37+
<meta property="og:image" content={ogImageUrl} />
38+
<meta property="og:image:width" content="1200" />
39+
<meta property="og:image:height" content="630" />
40+
<meta name="twitter:card" content="summary_large_image" />
41+
<meta name="twitter:title" content={title} />
42+
<meta name="twitter:description" content={description} />
43+
<meta name="twitter:image" content={ogImageUrl} />
44+
</head>
45+
<body>
46+
<script is:inline define:vars={{ spaUrl }}>
47+
window.location.replace(spaUrl);
48+
</script>
49+
<a href={spaUrl}>{`View ${node.event_name} on the PCD 2026 map`}</a>
50+
</body>
51+
</html>

‎pcd-website/src/pages/index.astro‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
import { loadNodes } from '../lib/nodes';
33
import MapView from '../components/MapView.vue';
44
import '../styles/global.css';
5+
import ogImage from '../images/og-image.png';
56
67
const nodes = await loadNodes();
8+
9+
const siteUrl = Astro.site ? Astro.site.href.replace(/\/$/, '') : '';
10+
const ogImageUrl = `${siteUrl}${ogImage.src}`;
11+
const pageUrl = Astro.url.href;
712
---
813

914
<!DOCTYPE html>
@@ -13,6 +18,17 @@ const nodes = await loadNodes();
1318
<meta name="viewport" content="width=device-width, initial-scale=1" />
1419
<title>Processing Community Day 2026</title>
1520
<meta name="description" content="Explore Processing Community Day 2026 nodes around the world. Find your local event on the interactive map." />
21+
<meta property="og:title" content="Processing Community Day 2026" />
22+
<meta property="og:description" content="Explore Processing Community Day 2026 nodes around the world. Find your local event on the interactive map." />
23+
<meta property="og:type" content="website" />
24+
<meta property="og:url" content={pageUrl} />
25+
<meta property="og:image" content={ogImageUrl} />
26+
<meta property="og:image:width" content="1200" />
27+
<meta property="og:image:height" content="630" />
28+
<meta name="twitter:card" content="summary_large_image" />
29+
<meta name="twitter:title" content="Processing Community Day 2026" />
30+
<meta name="twitter:description" content="Explore Processing Community Day 2026 nodes around the world. Find your local event on the interactive map." />
31+
<meta name="twitter:image" content={ogImageUrl} />
1632
<link rel="icon" type="image/x-icon" href={`${import.meta.env.BASE_URL}/favicon.ico`} />
1733
<link
1834
rel="stylesheet"

0 commit comments

Comments
 (0)