---
# 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>