cloudinary

package.json

@@ -6,8 +6,10 @@
   },
   "dependencies": {
     "axios": "^0.20.0",
+    "cloudinary-core": "^2.11.3",
     "compression": "^1.7.1",
     "dayjs": "^1.8.36",
+    "lodash": "^4.17.20",
     "polka": "next",
     "sirv": "^1.0.0"
   },

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>

static/global.css

@@ -11,6 +11,7 @@
   --ff-alt: 'Playfair Display', serif;
   --clr-primary: hsl(219, 90%, 80%);
   --clr-secondary: hsl(64, 93%, 51%);
+  --clr-error: hsl(0, 73.9%, 65.5%);
   --animation: all 250ms ease;
 }
 

yarn.lock

@@ -167,6 +167,11 @@ clean-css@^4.2.1:
   dependencies:
     source-map "~0.6.0"
 
+cloudinary-core@^2.11.3:
+  version "2.11.3"
+  resolved "https://registry.yarnpkg.com/cloudinary-core/-/cloudinary-core-2.11.3.tgz#1440f61c6280485094aac87021b7e10f746dc69e"
+  integrity sha512-ZRnpjSgvx+LbSf+aEz5NKzxDB4Z0436aY/0BSDa90kAHiwAyd84VyEi95I74SE80e15Ri9t5S2xtksTXpzk9Xw==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -505,6 +510,11 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+lodash@^4.17.20:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
 lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"