69 lines
2.5 KiB
Text
69 lines
2.5 KiB
Text
---
|
|
# https://github.com/bnijenhuis/bnijenhuis-nl/blob/main/social-preview.njk
|
|
pagination:
|
|
data: collections.posts
|
|
size: 1
|
|
alias: preview
|
|
permalink: '/assets/images/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"
|
|
>
|
|
{% set titleInLines = preview.data.title | splitlines(16) %}
|
|
{% set numberOfLines = titleInLines.length %}
|
|
{% if numberOfLines == 1 %}
|
|
{% set verticalStartingPoint = 340 %}
|
|
{% elseif numberOfLines == 2 %}
|
|
{% set verticalStartingPoint = 290 %}
|
|
{% elseif numberOfLines == 3 %}
|
|
{% set verticalStartingPoint = 250 %}
|
|
{% elseif numberOfLines == 4 %}
|
|
{% set verticalStartingPoint = 210 %}
|
|
{% elseif numberOfLines == 5 %}
|
|
{% set verticalStartingPoint = 170 %}
|
|
{% endif %}
|
|
|
|
<!-- SVG background, generate your own on: https://app.haikei.app/ -->
|
|
<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="#F3F3F3"></rect><path d="M0 100L50 92.7C100 85.3 200 70.7 300 70.7C400 70.7 500 85.3 600 94.3C700 103.3 800 106.7 900 107.5C1000 108.3 1100 106.7 1150 105.8L1200 105L1200 0L1150 0C1100 0 1000 0 900 0C800 0 700 0 600 0C500 0 400 0 300 0C200 0 100 0 50 0L0 0Z" fill="#DD4462" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
|
|
|
|
<!-- date -->
|
|
<text
|
|
font-family="Redhat, Roboto, 'Helvetica Neue', sans-serif"
|
|
font-size="24"
|
|
font-weight="bold"
|
|
fill="#DD4462"
|
|
letter-spacing="-1"
|
|
>
|
|
<tspan x="160" y="{{ verticalStartingPoint - 120 }}">
|
|
{{ preview.date | formatDate('DD / MM / YYYY') }}
|
|
</tspan>
|
|
</text>
|
|
|
|
<!-- title -->
|
|
<text
|
|
id="text"
|
|
font-family="Redhat, Roboto, 'Helvetica Neue', sans-serif"
|
|
font-size="80"
|
|
font-weight="900"
|
|
fill="#333333"
|
|
letter-spacing="-3"
|
|
>
|
|
{% for line in titleInLines %}
|
|
<tspan x="160" y="{{ verticalStartingPoint - 20 + loop.index0 * 80 }}">
|
|
{{ line }}
|
|
</tspan>
|
|
{% endfor %}
|
|
</text>
|
|
|
|
<!-- sitename -->
|
|
<text
|
|
font-family="Redhat, Roboto, 'Helvetica Neue', sans-serif"
|
|
font-size="24"
|
|
font-weight="bold"
|
|
fill="#DD4462"
|
|
letter-spacing="-0.5"
|
|
>
|
|
<tspan x="160" y="600">{{ meta.siteName }} · {{ meta.url | replace("https://", "") | replace("http://", "") }}</tspan>
|
|
</text>
|
|
</svg>
|