Image optimization and rendering

.gitignore

@@ -15,3 +15,5 @@ dist/
 node_modules/
 aws-exports.js
 awsconfiguration.json
+
+/static/**/optimized/

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.1",
   "scripts": {
     "dev": "sapper dev",
+    "prebuild": "node src/",
     "build": "sapper build --legacy",
     "export": "sapper export",
     "start": "node __sapper__/build",
@@ -47,9 +48,11 @@
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "sapper": "^0.28.10",
+    "sharp": "^0.26.1",
     "svelte": "^3.30.1",
     "svelte-check": "^1.1.17",
     "svelte-preprocess": "^4.6.1",
+    "ts-node": "^9.1.1",
     "tslib": "^2.0.3",
     "typescript": "^4.1.2"
   }

src/image-optimization/image-optimization.ts

@@ -0,0 +1,46 @@
+import path from 'path'
+import sharp from 'sharp'
+
+const outputOptions = {
+  jpeg: {
+    quality: 90,
+    mozjpeg: true,
+  },
+  png: {},
+  webp: {
+    quality: 90,
+    // lossless: true,
+  },
+}
+/**
+ * Transform image into multiple optimized version for web browsing
+ * Create a optimized image of same filetype and extra `webp`
+ */
+export async function optimizeImage(imgPath: string) {
+  const imgPathProps = path.parse(imgPath)
+  const image = sharp(imgPath)
+  const metadata = await image.metadata()
+
+  const formats = [metadata.format, 'webp']
+
+  const results = await Promise.all(
+    formats.map((format) =>
+      image
+        .toFormat(format, outputOptions[format])
+        .resize({ width: 640, height: 640, fit: 'inside' })
+        .toFile(
+          `${path.join(imgPathProps.dir, 'optimized', imgPathProps.name)}.${
+            format === 'jpeg' ? 'jpg' : format
+          }`
+        )
+    )
+  )
+  console.log(results)
+}
+
+/** Transform all uploaded images into optimized versions */
+// TODO Optimize all uploaded images
+// Think of a strategy which would be the best
+// Upload 3MB images to git ?
+// Have the script be run on the build? or be good person and upload optimized images by yourself?
+// What about images smaller then 640? they should not be resized right?

src/image-optimization/optimize-image.ts

@@ -0,0 +1,5 @@
+import { optimizeImage } from './image-optimization'
+
+const args = process.argv.slice(2)
+
+args.forEach((file) => optimizeImage(file))

src/markdown/parse-markdown.ts

@@ -1,4 +1,7 @@
 import marked from 'marked'
+import { renderer } from './renderer-extension'
+
+marked.use({ renderer })
 
 export function parseField<T>(field: string) {
   return (item: T) => ({

src/markdown/renderer-extension.ts

@@ -0,0 +1,30 @@
+import path from 'path'
+
+export const renderer = {
+  heading(text: string, level: string) {
+    const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-')
+
+    return `
+      <h${level}>
+        <a name="${escapedText}" class="anchor" href="#${escapedText}">
+          <span class="header-link"></span>
+        </a>
+        ${text}
+      </h${level}>
+    `
+  },
+  image(href: string, title: string, text: string) {
+    const file = path.parse(href)
+    const figcaption = title ? `<figcaption>${title}</figcaption>` : ''
+
+    return `
+      <figure>
+        <picture>
+          <source srcset="${file.dir}/optimized/${file.name}.webp" type="image/webp" />
+          <img alt="${text}" src="${href}" />
+        </picture>
+        ${figcaption}
+      </figure>
+    `
+  },
+}