lewis/lewisdale.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding og-images (hopefully)

Browse Source
This commit is contained in:
Lewis Dale 2024-01-02 12:32:41 +00:00
parent 97ecb0411c
commit 1d9bc704e2
7 changed files with 1335 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/plugins/index.js
View File

@ -3,6 +3,7 @@ const markdownPlugin = require('./markdown');
const rss = require('@11ty/eleventy-plugin-rss');
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const imagePlugin = require('./image');
const ogImagePlugin = require('./og-image');
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(syntaxHighlight);
@ -10,4 +11,5 @@ module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(markdownPlugin);
eleventyConfig.addPlugin(imagePlugin);
eleventyConfig.addPlugin(EleventyRenderPlugin);
eleventyConfig.addPlugin(ogImagePlugin);
}

17
config/plugins/og-image.js Normal file
View File

@ -0,0 +1,17 @@
const ogImagePlugin = require('eleventy-plugin-og-image');
const fs = require('node:fs');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(ogImagePlugin, {
satoriOptions: {
fonts: [
{
name: 'Space Grotesk',
data: fs.readFileSync('./src/assets/fonts/SpaceGrotesk-Regular.ttf'),
weight: 500,
style: 'normal',
},
],
},
});
}

1301
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -44,6 +44,7 @@
"tailwindcss": "^3.2.4"
},
"devDependencies": {
"@11ty/eleventy-plugin-rss": "^1.2.0"
"@11ty/eleventy-plugin-rss": "^1.2.0",
"eleventy-plugin-og-image": "^2.1.1"
}
}

3
src/_includes/base.njk
View File

@ -26,7 +26,7 @@
<link rel="alternate" type="application/json" title="LewisDale.Dev JSON Feed" href="{{ feed.json if feed.json else "/feed.json" }}">
<link rel="me" href="proven.lol/f730ca">
<link rel="me" href="https://social.lewisdale.dev/@lewis">
<link rel="me" href="https://social.lol/@lewis">
<link rel="me" href="https://github.com/LewisDaleUK">
<link rel="webmention" href="https://cms.lewisdale.dev/wp-json/webmention/1.0/endpoint">
@ -35,6 +35,7 @@
<meta name="author" content="{{ metadata.author.name }}">
<meta name="description" content="{{ description }}">
{% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %}
</head>
<body>
<header class="wrapper-lg row space-between">

12
src/_includes/components/ogImage.njk Normal file
View File

@ -0,0 +1,12 @@
<div style="height: 100%; width: 100%; display: flex; align-items: stretch; background-color: #262626;">
<div style="display: flex; flex-direction: column; flex-grow: 1; align-items: center; margin: 80px; background-color: #262626;">
<div style="display: flex; flex-grow: 1; flex-direction: column; align-items: center; justify-content: center; font-family: 'Space Grotesk'; font-weight: 500; color: #e5e5e5; text-align: center;">
<h1 style="font-size: 80px;">{{ title }}</h1>
<h2 style="font-size: 44px;">{{ subTitle }}</h2>
</div>
<div style="font-family: 'Space Grotesk'; font-weight: 500; color: #e5e5e5; letter-spacing: -0.8rem; font-size: 120px; justify-self: flex-end; flex-grow: 0; margin-bottom: 10px; display: flex;">LD</div>
<div style="display: flex; justify-self: flex-end; flex-grow: 0; font-family: 'Space Grotesk'; font-weight: 500; color: #e5e5e5; text-align: center;">
<h3 style="font-size: 20px;">LewisDale.dev</h3>
</div>
</div>
</div>

BIN
src/assets/fonts/SpaceGrotesk-Regular.ttf Normal file
View File

Binary file not shown.