Merge branch 'master' of https://github.com/cupcakearmy/svelte-cloudinary

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: cupcakearmy

README.md

@@ -1,7 +1,7 @@
 # svelte-cloudinary
 
 This is a little library that aims at integrating and making it easier to use the svelte with [Cloudinary](https://cloudinary.com/).
-There is an official integration comming, but it's not ready and for not does not work great.
+There is an [official integration coming](https://github.com/cloudinary/cloudinary-svelte), but it's not ready and for not does not work great for now (SSR e.g.).
 
 ## 🌈 Features
 
@@ -47,7 +47,21 @@ yarn add svelte-cloudinary
 This will formulate the Cloudinary url and insert it into the `img.src` property.
 Also it will resize to the `img` object itself because we set `bind: true`.
 
-## Key Concepts
+## 🤔 Why an [action](https://svelte.dev/docs#use_action) and not component?
+
+Well components are great of course, but when we only need to set a `src` tags we can leverage the upsides of a svelte [action](https://svelte.dev/docs#use_action)
+
+What are benefits?
+
+- Native styling (Svelte for now does not allow easy styling of child components) <br> With an action we can easily use local styling beacuse we still have access to the `<img />` element
+- Lightweight
+- Reusable and composable
+
+Downsides:
+
+- The src will not be set serverside, so also not in the initial server response. Which I believe is not that bad though for images.
+
+## 🤓 Key Concepts
 
 ### `step`
 
@@ -55,26 +69,26 @@ The `step` property (defaults to `200`) helps reducing the amounts of transforma
 
 How? Basically whenever we calculate the dynamic size of the image rendered on the DOM we will get very specific numbers depending on the device.
 
-With `step` we approximate the size needed to a multiple of `step`.
+With `step` we approximate the size needed to the nearset bigger multiple of `step`.
 
 ###### Example
 
-Immagine the same `<img />` has the width of `420`,`470` and `1080` on an iPhone, Android and Laptop respectively.
+Imagine the same `<img />` has the width of `420`,`470` and `1080` on an iPhone, Android and Laptop respectively.
 
 With a `step` size of e.g. `100` (`<img use:image={{ ..., step: 100 }} />`) they will become `500`, `500`, and `1100`. This will limit the ammount of transformations needed.
 
 ### `bind`
 
-With bind we can dynamically set the width and/or height of the transformet image depending of the rendered size.
+With bind we can dynamically set the width and/or height of the transformed image depending of the rendered size.
 
 - `bind: this` The size of the `<img />` element
-- `bind: el` The computed size of another element in the dom (usefull for a carousell e.g.)
+- `bind: el` The computed size of another element in the dom (useful for a carousel e.g.)
 - `bind: { width: this }` Only bind the width, leaving the height free. Also works with height of course
 - `bind: { width: '.wrapper' }` Finds the closest element that matches the selector and uses it for width.
 
 ##### Note
 
-If you provide a `bind` options (`<img use:image={{..., bind: true }} />`) but no crop option, we will automcatically add `crop: 'fill'` otherwise the image will not be resized by cloudinary.
+If you provide a `bind` options (`<img use:image={{..., bind: true }} />`) but no crop option, we will automatically add `crop: 'fill'` otherwise the image will not be resized by cloudinary.
 
 ###### TLDR;
 ```svelte