4 files changed, 88 insertions, 10 deletions

diff --git a/Makefile b/Makefile
index 28ddbca..bab75f8 100644
--- a/Makefile
+++ b/Makefile
@@ -3,7 +3,7 @@ MAKEFLAGS += -j2
 dev: server watch
 
 watch:
-        find content/*.md | entr make generate
+        find content/* templates/* static/* | entr make generate
 
 server:
         browser-sync start --server ./public --watch --no-open --no-notify
diff --git a/content/2020-03-25-create-placeholder-images-with-sharp.md b/content/2020-03-25-create-placeholder-images-with-sharp.md
deleted file mode 100644
index 6d35d82..0000000
--- a/content/2020-03-25-create-placeholder-images-with-sharp.md
+++ /dev/null
@@ -1,9 +0,0 @@
-~ title: Create placeholder images with sharp Node.js image processing library
-~ description: Create placeholder images with sharp Node.js image processing library
-~ slug: /create-placeholder-images-with-sharp.html
-~ date: 2020-03-25
-~ template: post
-~ hide: true
-
-## Todo
-
diff --git a/content/2020-03-27-create-placeholder-images-with-sharp.md b/content/2020-03-27-create-placeholder-images-with-sharp.md
new file mode 100644
index 0000000..1386b2f
--- /dev/null
+++ b/content/2020-03-27-create-placeholder-images-with-sharp.md
@@ -0,0 +1,83 @@
+~ title: Create placeholder images with sharp Node.js image processing library
+~ description: Create placeholder images with sharp Node.js image processing library
+~ slug: /create-placeholder-images-with-sharp.html
+~ date: 2020-03-27
+~ template: post
+~ hide: false
+
+I have been searching for a solution to pre-generate some placeholder images for image server I needed to develop that resizes images on S3. I though this would be a 15min job and quickly found out how very mistaken I was.
+
+Even though Node.js is not really the best way to do this kind of things (surely something written in C or Rust or even Golang would be the correct way to do this but we didn't need the speed in our case) I found an excellent library [sharp - High performance Node.js image processing](https://github.com/lovell/sharp).
+
+Getting things running was a breeze.
+
+## Fetch image from S3 and save resized
+
+```js
+const sharp = require('sharp');
+const aws = require('aws-sdk');
+
+const x,y = 100;
+const s3 = new aws.S3({});
+
+aws.config.update({
+  secretAccessKey: 'secretAccessKey',
+  accessKeyId: 'accessKeyId',
+  region: 'region'
+});
+
+const originalImage = await s3.getObject({
+  Bucket: 'some-bucket-name',
+  Key: 'image.jpg',
+}).promise();
+
+const resizedImage = await sharp(originalImage.Body)
+  .resize(100, 100)
+  .jpeg({ progressive: true })
+  .toBuffer();
+
+s3.putObject({
+  Bucket: 'some-bucket-name',
+  Key: `optimized/${x}x${y}/image.jpg`,
+  Body: resizedImage,
+  ContentType: 'image/jpeg',
+  ACL: 'public-read'
+}).promise();
+```
+
+All this code was wrapped inside a web service with some additional security checks and defensive coding to detect if key is missing on S3.
+
+And at that point I needed to return placeholder images as a response in case key is missing or x,y are not allowed by the server etc. I could have created PNG in Gimp and just serve them but I wanted to respect aspect ratio and I didn't want to return some mangled images.
+
+**ⓘ** Main problem with finding a clean solution I could copy and paste and change a bit was a task. API is changing constantly and there weren't clear examples or I was unable to find them.
+
+## Generating placeholder images using SVG
+
+What I ended up was using SVG to generate text and created image with sharp and used composition to combine both layers. Response returned by this function is a buffer you can use to either upload to S3 or save to local file.
+
+```js
+const generatePlaceholderImageWithText = async (width, height, message) => {
+  const overlay = `<svg width="${width - 20}" height="${height - 20}">
+    <text x="50%" y="50%" font-family="sans-serif" font-size="16" text-anchor="middle">${message}</text>
+  </svg>`;
+
+  return await sharp({
+    create: {
+      width: width,
+      height: height,
+      channels: 4,
+      background: { r: 230, g: 230, b: 230, alpha: 1 }
+    }
+  })
+    .composite([{
+      input: Buffer.from(overlay),
+      gravity: 'center',
+    }])
+    .jpeg()
+    .toBuffer();
+}
+```
+
+That is about it. Nothing more to it. You can change the color of the image by changing `background` and if you want to change text styling you can adapt SVG to your needs.
+
+**ⓘ** Also be careful about the length of the text. This function positions text at the center and adds `20px` padding on all sides. If text is longer than the image it will get cut.
diff --git a/static/style.css b/static/style.css
index 5597f30..6c6d5e5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -23,6 +23,10 @@ nav a {
   margin-right: 20px;
 }
 
+header {
+  margin-block-end: 40px;
+}
+
 h1 {
   font-size: 280%;
   line-height: initial;