feat(website): add Open Graph and Twitter Card meta tags for social sharing

- Add og:type, og:url, og:title, og:description, og:image, og:site_name meta tags
- Add twitter:card, twitter:title, twitter:description, twitter:image meta tags
- Add canonical URL link element
- Use social-image.png for social preview image
- Update document.title dynamically when modal opens/closes
- Resolve resource titles from JSON data files instead of raw filenames
- Handle skill/hook folder path mismatches for title lookup
- Change title separator from '-' to '|' for consistency

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Aaron Powell
2026-02-25 19:28:01 +11:00
parent 14cd2baf3a
commit f4c080b8bf
3 changed files with 97 additions and 2 deletions

View File

@@ -13,6 +13,8 @@ const {
activeNav = "",
} = Astro.props;
const base = import.meta.env.BASE_URL;
const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
const socialImageUrl = new URL(`${base}images/social-image.png`, Astro.site);
// Get git commit SHA and build date at build time
let commitSha = "unknown";
@@ -35,8 +37,24 @@ try {
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title} - Awesome GitHub Copilot</title>
<title>{title} | Awesome GitHub Copilot</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalUrl} />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalUrl.toString()} />
<meta property="og:title" content={`${title} | Awesome GitHub Copilot`} />
<meta property="og:description" content={description} />
<meta property="og:image" content={socialImageUrl.toString()} />
<meta property="og:site_name" content="Awesome GitHub Copilot" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`${title} | Awesome GitHub Copilot`} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={socialImageUrl.toString()} />
<link rel="stylesheet" href={`${base}styles/global.css`} />
<link
rel="icon"