---
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: 40 %}
  {% assign numberOfLines = titleInLines.length %}
  {% if numberOfLines == 1 %}
    {% assign verticalStartingPoint = 340 %}
  {% elsif numberOfLines == 2 %}
    {% assign verticalStartingPoint = 290 %}
  {% elsif numberOfLines == 3 %}
    {% assign verticalStartingPoint = 250 %}
  {% elsif numberOfLines == 4 %}
    {% assign verticalStartingPoint = 210 %}
  {% elsif numberOfLines == 5 %}
    {% assign verticalStartingPoint = 170 %}
  {% endif %}

  <!-- background -->
  <svg height="628" viewBox="0 0 1200 628" width="1200" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h1200v628h-1200z"/><path d="m0 482 33.3-3.2c33.4-3.1 100-9.5 166.7-9.6 66.7-.2 133.3 5.8 200 14.3s133.3 19.5 200 30.5 133.3 22 200 20 133.3-17 200-30.2c66.7-13.1 133.3-24.5 166.7-30.1l33.3-5.7v161h-33.3c-33.4 0-100 0-166.7 0s-133.3 0-200 0-133.3 0-200 0-133.3 0-200 0-133.3 0-200 0-133.3 0-166.7 0h-33.3z" fill="#3b82f6" stroke-linecap="round"/></svg>

  <!-- date -->
  <text
    font-family="-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif"
    font-size="24"
    font-weight="bold"
    fill="#fff"
  >
    <tspan x="80" y="{{ verticalStartingPoint | minus: 120 }}">
      {{ preview.date | date: "%B %e, %Y" }}
    </tspan>
  </text>

  <!-- title -->
  <text
    id="text"
    font-family="-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif"
    font-size="40"
    font-weight="900"
    fill="#fff"
  >
    {% for line in titleInLines %}
    {% capture spacing %}{{ forloop.index0 | times: 50 }}{% endcapture %}
    <tspan x="80" y="{{ verticalStartingPoint | minus: 20 | plus: spacing }}">
      {{ line }}
    </tspan>
    {% endfor %}
  </text>
</svg>