From fae75cfd403ed0460c7285fd87bcb3fb13257b78 Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Thu, 16 Dec 2021 17:18:37 +0100
Subject: [PATCH] Change profile picture and make better netlify LM transforms

---
 src/lib/large-media.ts                       | 42 ++++++++++++++++++++
 src/markdown/renderer-extension.ts           | 13 ++----
 src/routes/index.svelte                      | 15 ++++++-
 static/images/profile-portugal-landscape.jpg |  3 ++
 static/images/profile-portugal-portrait.jpg  |  3 ++
 5 files changed, 64 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/large-media.ts
 create mode 100644 static/images/profile-portugal-landscape.jpg
 create mode 100644 static/images/profile-portugal-portrait.jpg

diff --git a/src/lib/large-media.ts b/src/lib/large-media.ts
new file mode 100644
index 0000000..58ee7ac
--- /dev/null
+++ b/src/lib/large-media.ts
@@ -0,0 +1,42 @@
+import { map, multiply } from 'ramda'
+
+export interface ImageOptions {
+  width?: number
+  height?: number
+}
+
+/**
+ * Get the URL for resource with specified parameters for Netlify Large Media trasformation
+ *
+ * @see https://docs.netlify.com/large-media/transform-images/
+ */
+export function getNFResize(href: string, { width, height }: ImageOptions) {
+  return `${href}?nf_resize=fit${height ? `&h=${height}` : ''}${
+    width ? `&w=${width}` : ''
+  }`
+}
+
+export const PIXEL_DENSITIES = [1, 1.5, 2, 3, 4]
+
+function multiplyImageOptions(
+  multiplier,
+  imageOptions: ImageOptions
+): ImageOptions {
+  return map(multiply(multiplier), imageOptions)
+}
+
+/**
+ * Generate `srcset` attribute for all `PIXEL_DENSITIES` to serve images in appropriate quality
+ * for each device with specific density
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
+ */
+export function generateSrcSet(href: string, imageOptions: ImageOptions) {
+  return PIXEL_DENSITIES.map(
+    (density) =>
+      `${getNFResize(
+        href,
+        multiplyImageOptions(density, imageOptions)
+      )} ${density}x`
+  ).join(',')
+}
diff --git a/src/markdown/renderer-extension.ts b/src/markdown/renderer-extension.ts
index 2354c13..1f848aa 100644
--- a/src/markdown/renderer-extension.ts
+++ b/src/markdown/renderer-extension.ts
@@ -1,12 +1,9 @@
+import { generateSrcSet, getNFResize } from '$lib/large-media'
 import Prism from 'prismjs'
 import loadLanguages from 'prismjs/components/index.js'
 
 loadLanguages(['bash', 'markdown', 'json', 'yaml', 'typescript'])
 
-function getNFResize(href: string, height: number, width: number) {
-  return `${href}?nf_resize=fit&h=${height}&w=${width}`
-}
-
 export const renderer = {
   heading(text: string, level: string) {
     const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-')
@@ -23,13 +20,9 @@ export const renderer = {
   image(href: string, title: string, text: string) {
     const figcaption = title ? `<figcaption>${title}</figcaption>` : ''
     const isLocal = !href.startsWith('http')
-    const src = isLocal ? getNFResize(href, 800, 800) : href
+    const src = isLocal ? getNFResize(href, { height: 800, width: 800 }) : href
     const srcset = isLocal
-      ? `srcset="${getNFResize(href, 800, 800)}, ${getNFResize(
-          href,
-          1200,
-          1200
-        )} 1.5x, ${getNFResize(href, 1600, 1600)} 2x"`
+      ? `srcset="${generateSrcSet(href, { width: 800, height: 800 })}"`
       : ''
 
     return `
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index d556719..45c9b41 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { generateSrcSet, getNFResize } from '$lib/large-media'
   import {
     citeOwnerClass,
     mottoClass,
@@ -16,9 +17,19 @@
     <picture>
       <source
         media="(max-width: 550px)"
-        srcset="images/profile-picture-portrait.jpg"
+        srcset={generateSrcSet('images/profile-portugal-portrait.jpg', {
+          width: 500,
+        })}
+      />
+      <img
+        alt="Portrait"
+        srcset={generateSrcSet('images/profile-portugal-landscape.jpg', {
+          width: 800,
+        })}
+        src={getNFResize('images/profile-portugal-landscape.jpg', {
+          width: 800,
+        })}
       />
-      <img alt="My profile" src="images/profile-picture2.jpg" />
     </picture>
   </figure>
 
diff --git a/static/images/profile-portugal-landscape.jpg b/static/images/profile-portugal-landscape.jpg
new file mode 100644
index 0000000..f453423
--- /dev/null
+++ b/static/images/profile-portugal-landscape.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:21fd8f15a924973dce1dc3dc5b7e1a44c8f8ff947e8f74d9ee7b742f408fc5e6
+size 777407
diff --git a/static/images/profile-portugal-portrait.jpg b/static/images/profile-portugal-portrait.jpg
new file mode 100644
index 0000000..f53b06b
--- /dev/null
+++ b/static/images/profile-portugal-portrait.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e1d332c1636cb314c0db2b4070183de7ca76549d04136e1effc28f8d5212330a
+size 681164