cloudinary

src/components/Image.svelte

@@ -0,0 +1,36 @@
+<script context="module">
+  const defaultOptions = {
+    fetchFormat: 'auto',
+    quality: 'auto:good',
+  }
+</script>
+
+<script>
+  import { Cloudinary } from 'cloudinary-core'
+  import { onMount } from 'svelte'
+
+  export let src = ''
+  export let options = {}
+  export let alt = ''
+  export let crop = false
+
+  let img
+  let attrs = {}
+
+  onMount(() => {
+    if (crop) {
+      let { width, height } = window.getComputedStyle(img)
+      width = (parseInt(width) * window.devicePixelRatio) | 0
+      height = (parseInt(height) * window.devicePixelRatio) | 0
+      options = { ...options, width, gravity: 'auto', crop: 'fill' }
+    }
+    const cl = Cloudinary.new({ cloud_name: 'cupcakearmy' })
+    const cleaned = src.replace('https://api.nicco.io', '/nicco')
+    const all = { ...defaultOptions, ...options }
+    console.log(all)
+    attrs = cl.imageTag(cleaned, all).attributes()
+    console.log(attrs)
+  })
+</script>
+
+<img bind:this={img} {...$$restProps} {alt} {...attrs} />

src/components/ImageFrame.svelte

@@ -1,10 +1,12 @@
 <script>
+  import Image from './Image.svelte'
+
   export let src
   export let alt
 </script>
 
 <style>
-  img {
+  :global(img.cdn) {
     width: calc(100% - 0.25em);
     object-fit: cover;
     object-position: center;
@@ -14,10 +16,10 @@
     margin: 0;
   }
 
-  img:hover {
+  :global(img.cdn:hover) {
     transform: scale(1.1);
     margin: 1em 0;
   }
 </style>
 
-<img {src} {alt} />
+<Image crop class="cdn" {src} {alt} />

src/components/PostPreview.svelte

@@ -37,7 +37,7 @@
 
 <a href={`blog/${post.slug}`}>
   {#if post.featured}
-    <ImageFrame src={post.featured.sizes.medium_large} alt={post.featured.description} />
+    <ImageFrame src={post.featured.url} alt={post.featured.description} />
   {/if}
   <PostAttributes {post} />
   <h2>