114 lines
No EOL
3.8 KiB
Text
114 lines
No EOL
3.8 KiB
Text
---
|
|
font: Ubuntu # TODO: find a way for the hosting provider to provide the font on build
|
|
background: 'white'
|
|
text: '#211715'
|
|
waveSteps: 10
|
|
amplitude: 35
|
|
waveHeight: 0.33
|
|
colors: ['#e7c803', '#f58050', '#f0505a', '#f050c8']
|
|
pagination:
|
|
data: collections.posts
|
|
size: 1
|
|
alias: post
|
|
permalink: '/assets/og-images/{{ post.data.title | slugify }}-preview.svg'
|
|
eleventyExcludeFromCollections: true
|
|
---
|
|
<svg
|
|
width="1200"
|
|
height="630"
|
|
viewBox="0 0 1200 630"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
{% set titleInLines = post.data.title | splitlines(20) %}
|
|
{% 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/ or https://pattern.monster/ -->
|
|
<svg id="patternId" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="a" patternUnits="userSpaceOnUse" width="40" height="80" patternTransform="scale(2) rotate(0)">
|
|
<rect x="0" y="0" width="100%" height="100%" fill="{{ background }}" />
|
|
<path
|
|
d="M-4.798 13.573C-3.149 12.533-1.446 11.306 0 10c2.812-2.758 6.18-4.974 10-5 4.183.336 7.193 2.456 10 5 2.86 2.687 6.216 4.952 10 5 4.185-.315 7.35-2.48 10-5 1.452-1.386 3.107-3.085 4.793-4.176"
|
|
stroke-width="2"
|
|
stroke="{{ colors[0] }}"
|
|
fill="none"
|
|
/>
|
|
<path
|
|
d="M-4.798 33.573C-3.149 32.533-1.446 31.306 0 30c2.812-2.758 6.18-4.974 10-5 4.183.336 7.193 2.456 10 5 2.86 2.687 6.216 4.952 10 5 4.185-.315 7.35-2.48 10-5 1.452-1.386 3.107-3.085 4.793-4.176"
|
|
stroke-width="2"
|
|
stroke="{{ colors[1] }}"
|
|
fill="none"
|
|
/>
|
|
<path
|
|
d="M-4.798 53.573C-3.149 52.533-1.446 51.306 0 50c2.812-2.758 6.18-4.974 10-5 4.183.336 7.193 2.456 10 5 2.86 2.687 6.216 4.952 10 5 4.185-.315 7.35-2.48 10-5 1.452-1.386 3.107-3.085 4.793-4.176"
|
|
stroke-width="2"
|
|
stroke="{{ colors[2] }}"
|
|
fill="none"
|
|
/>
|
|
<path
|
|
d="M-4.798 73.573C-3.149 72.533-1.446 71.306 0 70c2.812-2.758 6.18-4.974 10-5 4.183.336 7.193 2.456 10 5 2.86 2.687 6.216 4.952 10 5 4.185-.315 7.35-2.48 10-5 1.452-1.386 3.107-3.085 4.793-4.176"
|
|
stroke-width="2"
|
|
stroke="{{ colors[3] }}"
|
|
fill="none"
|
|
/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="800%" height="800%" transform="translate(0,0)" fill="url(#a)"/>
|
|
</svg>
|
|
|
|
<rect id="bg" width="100%" height="100%" opacity="0.7" fill="{{ background }}"/>
|
|
<rect id="name-bg" width="100%" height="42px" fill="{{ background }}" stroke="{{ text }}" stroke-width="0.1" transform="translate(150,550)" />
|
|
|
|
<!-- date -->
|
|
<text
|
|
font-family="{{ font }}, sans-serif"
|
|
font-size="24"
|
|
font-weight="700"
|
|
fill="{{ text }}"
|
|
letter-spacing="-1"
|
|
>
|
|
<tspan x="160" y="{{ verticalStartingPoint - 120 }}">
|
|
{{ post.date | formatDate('DD / MM / YYYY') }}
|
|
</tspan>
|
|
</text>
|
|
|
|
<!-- title -->
|
|
<text
|
|
id="text"
|
|
font-family="{{ font }}, sans-serif"
|
|
font-size="80"
|
|
font-weight="700"
|
|
fill="{{ text }}"
|
|
letter-spacing="-3"
|
|
>
|
|
{% for line in titleInLines %}
|
|
<tspan x="160" y="{{ verticalStartingPoint - 20 + loop.index0 * 85 }}">
|
|
{{ line }}
|
|
</tspan>
|
|
{% endfor %}
|
|
</text>
|
|
|
|
<!-- sitename -->
|
|
<text
|
|
font-family="{{ font }}, sans-serif"
|
|
font-size="24"
|
|
font-weight="bold"
|
|
fill="{{ text }}"
|
|
letter-spacing="-0.5"
|
|
>
|
|
<tspan x="160" y="580">{{ meta.siteName }} · {{ meta.url | replace("https://", "") | replace("http://", "") }}</tspan>
|
|
</text>
|
|
</svg> |