feat: programmatically generate open graph cards
This commit is contained in:
Cory Dransfeldt
parent
e34ad2cb0e
commit
0b47dc7747
15 changed files with 144 additions and 35 deletions
|
|
@ -10,6 +10,8 @@ const markdownItAnchor = require('markdown-it-anchor')
|
|||
const markdownItFootnote = require('markdown-it-footnote')
|
||||
|
||||
const filters = require('./config/filters/index.js')
|
||||
const { slugifyString } = require('./config/utils')
|
||||
const { svgToJpeg } = require('./config/events/index.js')
|
||||
|
||||
const CleanCSS = require('clean-css')
|
||||
const { execSync } = require('child_process')
|
||||
|
|
@ -128,10 +130,13 @@ module.exports = function (eleventyConfig) {
|
|||
eleventyConfig.addLiquidFilter('dateToRfc822', pluginRss.dateToRfc822)
|
||||
eleventyConfig.addLiquidFilter('absoluteUrl', pluginRss.absoluteUrl)
|
||||
eleventyConfig.addFilter('cssmin', (code) => new CleanCSS({}).minify(code).styles)
|
||||
eleventyConfig.addFilter('slugify', slugifyString)
|
||||
|
||||
// shortcodes
|
||||
eleventyConfig.addShortcode('image', img)
|
||||
|
||||
// events
|
||||
eleventyConfig.on('afterBuild', svgToJpeg)
|
||||
eleventyConfig.on('eleventy.after', () => {
|
||||
execSync(`npx pagefind --site _site --glob "**/*.html"`, { encoding: 'utf-8' })
|
||||
})
|
||||
|
|
|
|||
29
config/events/index.js
Normal file
29
config/events/index.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
const fs = require('fs')
|
||||
const Image = require('@11ty/eleventy-img')
|
||||
|
||||
const svgToJpeg = function () {
|
||||
const socialPreviewImagesDir = '_site/assets/img/social-preview/'
|
||||
fs.readdir(socialPreviewImagesDir, (err, files) => {
|
||||
if (!!files && files.length > 0) {
|
||||
files.forEach((fileName) => {
|
||||
if (fileName.endsWith('.svg')) {
|
||||
let imageUrl = socialPreviewImagesDir + fileName
|
||||
Image(imageUrl, {
|
||||
formats: ['jpeg'],
|
||||
outputDir: './' + socialPreviewImagesDir,
|
||||
filenameFormat: function (id, src, width, format) {
|
||||
let outputFileName = fileName.substring(0, fileName.length - 4)
|
||||
return `${outputFileName}.${format}`
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('⚠ No social images found')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
svgToJpeg,
|
||||
}
|
||||
|
|
@ -20,6 +20,17 @@ module.exports = {
|
|||
const replacement = '&'
|
||||
return string.replace(pattern, replacement)
|
||||
},
|
||||
splitlines: (input, maxCharLength) => {
|
||||
const parts = input.split(' ')
|
||||
const lines = parts.reduce(function (acc, cur) {
|
||||
if (!acc.length) return [cur]
|
||||
let lastOne = acc[acc.length - 1]
|
||||
if (lastOne.length + cur.length > maxCharLength) return [...acc, cur]
|
||||
acc[acc.length - 1] = lastOne + ' ' + cur
|
||||
return acc
|
||||
}, [])
|
||||
return lines
|
||||
},
|
||||
stripUtm: (string) => {
|
||||
if (!string) return
|
||||
return string.replace(utmPattern, '')
|
||||
|
|
@ -99,9 +110,15 @@ module.exports = {
|
|||
readableDate: (date) => {
|
||||
return DateTime.fromISO(date).toFormat('LLLL d, yyyy')
|
||||
},
|
||||
dateToReadableDate: (date) => {
|
||||
return new Date(date)
|
||||
.toLocaleString('en-US', {
|
||||
timeZone: 'America/Los_Angeles',
|
||||
})
|
||||
.split(',')[0]
|
||||
},
|
||||
toDateTime: (date) => {
|
||||
const formatted = DateTime.fromISO(date)
|
||||
|
||||
const trail = (number) => {
|
||||
return parseInt(number, 10) < 10 ? `0${number}` : number
|
||||
}
|
||||
|
|
|
|||
13
config/utils/index.js
Normal file
13
config/utils/index.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
const slugify = require('slugify')
|
||||
|
||||
const slugifyString = (str) => {
|
||||
return slugify(str, {
|
||||
replacement: '-',
|
||||
remove: /[#,&,+()$~%.'":*?<>{}]/g,
|
||||
lower: true,
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
slugifyString,
|
||||
}
|
||||
1
package-lock.json
generated
1
package-lock.json
generated
|
|
@ -52,6 +52,7 @@
|
|||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-tailwindcss": "^0.5.9",
|
||||
"sanitize-html": "^2.11.0",
|
||||
"slugify": "^1.6.6",
|
||||
"striptags": "^3.2.0",
|
||||
"tailwind-scrollbar": "^3.0.5",
|
||||
"tailwindcss": "^3.3.6"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "2.6.0",
|
||||
"version": "2.7.0",
|
||||
"description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
|
|
@ -61,6 +61,7 @@
|
|||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-tailwindcss": "^0.5.9",
|
||||
"sanitize-html": "^2.11.0",
|
||||
"slugify": "^1.6.6",
|
||||
"striptags": "^3.2.0",
|
||||
"tailwind-scrollbar": "^3.0.5",
|
||||
"tailwindcss": "^3.3.6"
|
||||
|
|
|
|||
|
|
@ -12,6 +12,12 @@
|
|||
<meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="{{ fullUrl }}" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{%- if schema == 'blog' %}{{ meta.url }}/assets/img/social-preview/{{
|
||||
title | slugify
|
||||
}}-preview.jpeg{%- else -%}{{ meta.meta_data.opengraph_default }}{% endif -%}"
|
||||
/>
|
||||
<meta property="og:image" content="{{ image | getPostImage }}">
|
||||
<meta name="theme-color" content="{{ meta.themeColor }}" />
|
||||
<meta name="generator" content="{{ eleventy.generator }}">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
date: '2013-09-04'
|
||||
title: 'Arcade Fire - Reflektor 9/9/9'
|
||||
title: 'Arcade Fire - Reflektor'
|
||||
description: "This sample sounds promising. I can't wait to hear more from Reflektor on the 9th."
|
||||
draft: false
|
||||
tags: ['music']
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
date: '2017-03-19'
|
||||
title: 'Installing HTTP/2 on Ubuntu 16.04 with virtual hosts'
|
||||
title: 'Installing HTTP2 on Ubuntu 16.04 with virtual hosts'
|
||||
description: "Now that HTTP/2 is fairly stable and widely available, I decided to try and install and run it on this server. I'm currently running the Ubuntu 16.04.2 LTS with virtual hosts configured, so I can serve a number of sites beyond this one. All the sites this server hosts are also served securely using certificates from LetsEncrypt."
|
||||
draft: false
|
||||
tags: ['Apache', 'development']
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
date: '2018-06-25'
|
||||
title: 'AT&T buying web-based ad targeting company'
|
||||
description: "AT&T controlling your internet connection, the media you use it to consume and the means to target ads at you based on those habits is truly a nightmare."
|
||||
draft: false
|
||||
tags: ['net neutrality', 'privacy']
|
||||
---
|
||||
|
||||
AT&T controlling your internet connection, the media you use it to consume and the means to target ads at you based on those habits is truly a nightmare.<!-- excerpt -->
|
||||
|
||||
Run an adblocker. Run a VPN. Skip as much of their media as you can.
|
||||
|
||||
_[Via Ars Technica:](https://arstechnica.com/?p=1336343)_
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
---
|
||||
date: '2018-11-13'
|
||||
title: 'AT&T CEO criticizes disparate state net neutrality regulations after helping to dismantle unified, national rules'
|
||||
description: 'AT&T CEO Randall Stephenson yesterday urged Congress to pass net neutrality and consumer data privacy laws that would prevent states from issuing their own stricter laws.'
|
||||
draft: false
|
||||
tags: ['politics', 'net neutrality']
|
||||
---
|
||||
|
||||
**[Jon Brodkin:](https://arstechnica.com/?p=1410725)**
|
||||
|
||||
> "We've got a mess coming at us, literally states independently going out and designing their own privacy regulation," [Randall] Stephenson said. "How do you do business in a world where you have 50 different regulations and rules around privacy?"<!-- excerpt -->
|
||||
|
||||
If Stephenson was actually concerned about the impact of a fractured regulatory landscape on his company, he could have left existing net neutrality rules in place. Rather he and other telecoms elected to force through a roughshod repeal of national rules without any consideration of public opinion or possible consequences.
|
||||
|
||||
Any new national legislation backed by AT&T is likely to seriously disadvantage consumers and competitors and support net neutrality in name only.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
date: '2023-02-06'
|
||||
title: 'Automating (and probably overengineering) my /now page'
|
||||
title: 'Automating (and probably overengineering) my now page'
|
||||
description: "omg.lol (where I point my domain) and host most of my site content recently launched support for /now pages."
|
||||
draft: false
|
||||
tags: ['automation', 'development', 'Next.js', 'JavaScript']
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
date: '2023-03-18'
|
||||
title: 'Building my /now page using Eleventy'
|
||||
title: 'Building my now page using Eleventy'
|
||||
description: "As part of my commitment to writing about things I've written in other frameworks in Eleventy, this is how I re-engineered my /now page in Eleventy."
|
||||
draft: false
|
||||
tags: ['Eleventy', 'JavaScript', 'Last.fm', 'Oku', 'Trakt', 'Letterboxd', 'API']
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
date: '2023-04-24'
|
||||
title: 'Talk: Building a /now page with Eleventy'
|
||||
title: 'Talk: Building a now page with Eleventy'
|
||||
description: "My talk from the Eleventy meetup about building my now page (you even get to see how much I resemble my avatar)."
|
||||
draft: false
|
||||
tags: ['Eleventy', 'JavaScript', 'automation']
|
||||
|
|
|
|||
65
src/social-preview.liquid
Normal file
65
src/social-preview.liquid
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
---
|
||||
pagination:
|
||||
data: collections.posts
|
||||
size: 1
|
||||
alias: preview
|
||||
permalink: '/assets/img/social-preview/{{ preview.data.title | slugify }}-preview.svg'
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="1200" height="628" viewBox="0 0 1200 628" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
{% assign titleInLines = preview.data.title | splitlines: 36 %}
|
||||
{% assign numberOfLines = titleInLines.length %}
|
||||
{% if numberOfLines == 2 %}
|
||||
{% assign verticalStartingPoint = 250 %}
|
||||
{% elsif numberOfLines == 3 %}
|
||||
{% assign verticalStartingPoint = 210 %}
|
||||
{% elsif numberOfLines == 4 %}
|
||||
{% assign verticalStartingPoint = 170 %}
|
||||
{% elsif numberOfLines == 5 %}
|
||||
{% assign verticalStartingPoint = 130 %}
|
||||
{% else %}
|
||||
{% assign verticalStartingPoint = 290 %}
|
||||
{% endif %}
|
||||
|
||||
<svg id="visual" viewBox="0 0 1200 628" width="1200" height="628" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="1200" height="628" fill="#111827"></rect><path d="M0 525L28.5 508C57 491 114 457 171.2 460.2C228.3 463.3 285.7 503.7 342.8 507.8C400 512 457 480 514.2 469.3C571.3 458.7 628.7 469.3 685.8 462C743 454.7 800 429.3 857.2 422.7C914.3 416 971.7 428 1028.8 439C1086 450 1143 460 1171.5 465L1200 470L1200 629L1171.5 629C1143 629 1086 629 1028.8 629C971.7 629 914.3 629 857.2 629C800 629 743 629 685.8 629C628.7 629 571.3 629 514.2 629C457 629 400 629 342.8 629C285.7 629 228.3 629 171.2 629C114 629 57 629 28.5 629L0 629Z" fill="#3b82f6" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
|
||||
|
||||
<!-- date -->
|
||||
<text
|
||||
font-family="silka, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
|
||||
font-size="24"
|
||||
font-weight="bold"
|
||||
fill="#fff"
|
||||
>
|
||||
<tspan x="160" y="{{ verticalStartingPoint | minus: 120 }}">
|
||||
{{ preview.date | dateToReadableDate}}
|
||||
</tspan>
|
||||
</text>
|
||||
|
||||
<!-- title -->
|
||||
<text
|
||||
id="text"
|
||||
font-family="silka, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
|
||||
font-size="40"
|
||||
font-weight="900"
|
||||
fill="#fff"
|
||||
>
|
||||
{% for line in titleInLines %}
|
||||
{% capture spacing %}{{ forloop.index0 | times: 50 }}{% endcapture %}
|
||||
<tspan x="160" y="{{ verticalStartingPoint | minus: 20 | plus: spacing }}">
|
||||
{{ line }}
|
||||
</tspan>
|
||||
{% endfor %}
|
||||
</text>
|
||||
|
||||
<!-- sitename -->
|
||||
<text
|
||||
font-family="silka, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif"
|
||||
font-size="24"
|
||||
font-weight="bold"
|
||||
fill="#fff"
|
||||
>
|
||||
<tspan x="160" y="600">{{ meta.siteName }} • {{ meta.url | replace: "https://", "" | replace: "http://", "" }}</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
Reference in a new issue