SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ add OpenGraph and Twitter Card metadata and image generation

Browse source
This commit is contained in:
Sebin Nyshkim 2025-06-27 19:58:14 +02:00
parent fcb4b092db
commit 9552e4713f
11 changed files with 69 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/head/page-head-meta.webc Normal file
View file

@ -0,0 +1,36 @@
<script webc:setup>
const getTitle = (fullName) => {
if (fullName) {
return `${fullName} — Character Reference`;
}
return 'Choose Your Character!';
};
const getImageUrl = (char) => (char ? `src/img/${char.toLowerCase()}/og.png` : 'src/img/og.png');
</script>
<title @text="getTitle($data.fullName)"></title>
<meta webc:if="$data.description" name="description" :content="$data.description" />
<meta name="generator" :content="$data.eleventy.generator" />
<meta property="fediverse:creator" content="@SebinNyshkim@meow.social" />
<meta property="og:site_name" content="Sebin's Characters" />
<meta property="og:type" content="website" />
<meta property="og:url" :content="$data.base + $data.page.url" />
<meta property="og:title" :content="getTitle($data.fullName)" />
<meta property="og:description" :content="$data.description" />
<meta property="og:locale" :content="$data.language" />
<meta property="og:image" :content="getOgImage(getImageUrl($data.firstName), 'url')" />
<meta property="og:image:type" :content="getOgImage(getImageUrl($data.firstName), 'sourceType')" />
<meta property="og:image:width" :content="getOgImage(getImageUrl($data.firstName), 'width')" />
<meta property="og:image:height" :content="getOgImage(getImageUrl($data.firstName), 'height')" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" :content="$data.base + $data.page.url" />
<meta name="twitter:title" :content="getTitle($data.fullName)" />
<meta name="twitter:description" :content="$data.description" />
<meta name="twitter:image" :content="getOgImage(getImageUrl($data.firstName), 'url')" />