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')" />

BIN
src/img/jarek/og.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
src/img/og.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 748 KiB

BIN
src/img/sebin/og.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 141 KiB

BIN
src/img/viktor/og.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 137 KiB

4
src/index.11tydata.js
View file

@ -2,5 +2,7 @@ export default {
eleventyNavigation: {
key: "Home"
},
layout: 'base.webc'
layout: 'base.webc',
language: 'en_US',
description: 'Your go to place to learn all about the characters of Sebin!'
};

3
src/jarek/jarek.11tydata.json
View file

@ -1,3 +1,4 @@
{
"layout": "character.webc"
"layout": "character.webc",
"language": "en_US"
}

3
src/layouts/base.webc
View file

@ -3,14 +3,13 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title webc:if="$data.fullName" @text="`${$data.fullName} — Character Reference`"></title>
<title webc:else>Choose Your Character!</title>
<template webc:is="page-head-base" webc:nokeep></template>
<template webc:is="page-head-fonts" webc:nokeep></template>
<template webc:is="page-head-colors" webc:nokeep></template>
<template webc:is="page-head-style" webc:nokeep></template>
<template webc:is="page-head-script" webc:nokeep></template>
<template webc:is="page-head-meta" webc:nokeep></template>
<link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
<script type="module" :src="getBundleFileUrl('js')" webc:keep></script>

1
src/sebin/sebin.11tydata.json
View file

@ -1,5 +1,6 @@
{
"layout": "character.webc",
"language": "en_US",
"galleryMuscle": [
{
"alt": "Sebin looking aloof (but chill)",

1
src/viktor/viktor.11tydata.json
View file

@ -1,5 +1,6 @@
{
"layout": "character.webc",
"language": "en_US",
"jobs": [
{
"title": "Bartender",