From 8d1926084590520dc93a9c86af48f271bcd9b19e Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Wed, 31 Jan 2024 11:25:38 +0100
Subject: [PATCH] new og image layout

---
 src/common/og-images.njk | 60 +++++++++++-----------------------------
 1 file changed, 16 insertions(+), 44 deletions(-)

diff --git a/src/common/og-images.njk b/src/common/og-images.njk
index b7f7ce5..06f9504 100644
--- a/src/common/og-images.njk
+++ b/src/common/og-images.njk
@@ -1,11 +1,8 @@
 ---
-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']
+font: "'Red Hat Display', Ubuntu" # These get created in development, you must have the font installed on your system.
+background: '#343434'
+text: '#FBFBFB'
+colors: ['#dd4462', '#c73d58', '#b1364e', '#9a3044']
 pagination:
   data: collections.posts
   size: 1
@@ -21,7 +18,7 @@ eleventyExcludeFromCollections: true
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 
-		{% set titleInLines = post.data.title | splitlines(20) %}
+		{% set titleInLines = post.data.title | splitlines(22) %}
 		{% set numberOfLines = titleInLines.length %}
 		{% if numberOfLines == 1 %}
 		{% set verticalStartingPoint = 340 %}
@@ -36,47 +33,22 @@ eleventyExcludeFromCollections: true
 		{% 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 id="visual" viewBox="0 0 1200 630" width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
+			<path d="M0 114L100 114L100 385L200 385L200 177L300 177L300 203L400 203L400 234L500 234L500 373L600 373L600 70L700 70L700 272L800 272L800 146L900 146L900 159L1000 159L1000 64L1100 64L1100 253L1200 253L1200 58L1200 0L1200 0L1100 0L1100 0L1000 0L1000 0L900 0L900 0L800 0L800 0L700 0L700 0L600 0L600 0L500 0L500 0L400 0L400 0L300 0L300 0L200 0L200 0L100 0L100 0L0 0Z" fill="{{ colors[0] }}"></path>
+			<path d="M0 442L100 442L100 499L200 499L200 366L300 366L300 398L400 398L400 404L500 404L500 467L600 467L600 329L700 329L700 455L800 455L800 341L900 341L900 310L1000 310L1000 366L1100 366L1100 392L1200 392L1200 348L1200 56L1200 251L1100 251L1100 62L1000 62L1000 157L900 157L900 144L800 144L800 270L700 270L700 68L600 68L600 371L500 371L500 232L400 232L400 201L300 201L300 175L200 175L200 383L100 383L100 112L0 112Z" fill="{{ colors[1] }}"></path>
+			<path d="M0 600L100 600L100 606L200 606L200 537L300 537L300 511L400 511L400 549L500 549L500 574L600 574L600 555L700 555L700 562L800 562L800 562L900 562L900 474L1000 474L1000 612L1100 612L1100 480L1200 480L1200 455L1200 346L1200 390L1100 390L1100 364L1000 364L1000 308L900 308L900 339L800 339L800 453L700 453L700 327L600 327L600 465L500 465L500 402L400 402L400 396L300 396L300 364L200 364L200 497L100 497L100 440L0 440Z" fill="{{ colors[2] }}"></path>
+			<path d="M0 631L100 631L100 631L200 631L200 631L300 631L300 631L400 631L400 631L500 631L500 631L600 631L600 631L700 631L700 631L800 631L800 631L900 631L900 631L1000 631L1000 631L1100 631L1100 631L1200 631L1200 631L1200 453L1200 478L1100 478L1100 610L1000 610L1000 472L900 472L900 560L800 560L800 560L700 560L700 553L600 553L600 572L500 572L500 547L400 547L400 509L300 509L300 535L200 535L200 604L100 604L100 598L0 598Z" fill="{{ colors[3] }}"></path>
 		</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)" />
+		<!-- if you need to darken or lighten your bg -->
+		<rect id="bg" width="100%" height="100%" opacity="0.1" fill="{{ background }}"/>
+		<rect id="name-bg" width="100%" height="42px" fill="{{ background }}" transform="translate(150,550)" />
 
 		<!-- date -->
 		<text
 			font-family="{{ font }}, sans-serif"
 			font-size="24"
-			font-weight="700"
+			font-weight="900"
 			fill="{{ text }}"
 			letter-spacing="-1"
 		>
@@ -90,7 +62,7 @@ eleventyExcludeFromCollections: true
 			id="text"
 			font-family="{{ font }}, sans-serif"
 			font-size="80"
-			font-weight="700"
+			font-weight="900"
 			fill="{{ text }}"
 			letter-spacing="-3"
 		>
@@ -105,7 +77,7 @@ eleventyExcludeFromCollections: true
 		<text
 		font-family="{{ font }}, sans-serif"
 			font-size="24"
-			font-weight="bold"
+			font-weight="700"
 			fill="{{ text }}"
 			letter-spacing="-0.5"
 		>