docs: tweaks

Author: colbyfayock

docs/env.example

@@ -1 +1 @@
-VITE_PUBLIC_CLOUDINARY_CLOUD_NAME=colbycloud-next-cloudinary
+VITE_PUBLIC_CLOUDINARY_CLOUD_NAME=

docs/src/routes/+page.svx

@@ -21,6 +21,7 @@ images
 * Generate Open Graph Social Media cards on the fly
 * Drop-in Upload Widget
 * ...all at scale with Cloudinary
+
 <ImageGrid>
 	<li>
 		<CldImage
@@ -31,16 +32,15 @@ images
 		/>
 	</li>
 	<li>
-	<CldImage
+	  <CldImage
       width="987"
       height="987"
-      src={`images/woman-headphones`}
-      sizes="50vw"
+      src="images/woman-headphones"
       crop="thumb"
       gravity="faces"
-      removeBackground
-  tint="40:253f8c"
-  underlay="images/city-skyline"
+      removeBackground="true"
+      tint="40:253f8c"
+      underlay="images/city-skyline"
       overlays={[
         {
           position: {
@@ -84,51 +84,51 @@ images
 
 ```svelte
 <CldImage
-      width="987"
-      height="987"
-      src={`${import.meta.env.IMAGES_DIRECTORY}/woman-headphones`}
-      sizes="50vw"
-      crop="thumb"
-      gravity="faces"
-      removeBackground
-      tint="40:253f8c"
-      underlay={`${import.meta.env.IMAGES_DIRECTORY}/city-skyline`}
-      overlays={[
-        {
-          position: {
-            gravity: 'north',
-            y: 60
-          },
-          text: {
-            color: 'rgb:52a4ff80',
-            fontFamily: 'Source Sans Pro',
-            fontSize: 320,
-            fontWeight: 'black',
-            text: 'MUSIC',
-            letterSpacing: -10,
-            lineSpacing: -100,
-            stroke: true,
-            border: '20px_solid_rgb:2d0eff99',
-          }
-        },
-        {
-          position: {
-            gravity: 'south',
-            y: 60
-          },
-          text: {
-            color: 'rgb:52a4ff80',
-            fontFamily: 'Source Sans Pro',
-            fontSize: 320,
-            fontWeight: 'black',
-            text: 'IS LIFE',
-            letterSpacing: -10,
-            lineSpacing: -100,
-            stroke: true,
-            border: '20px_solid_rgb:2d0eff99',
-          }
-        }
-      ]}
-      alt="Image of woman with headphones transformed with Cloudinary"
-    />
+  width="987"
+  height="987"
+  src={`images/woman-headphones`}
+  sizes="50vw"
+  crop="thumb"
+  gravity="faces"
+  removeBackground
+  tint="40:253f8c"
+  underlay={`images/city-skyline`}
+  overlays={[
+    {
+      position: {
+        gravity: 'north',
+        y: 60
+      },
+      text: {
+        color: 'rgb:52a4ff80',
+        fontFamily: 'Source Sans Pro',
+        fontSize: 320,
+        fontWeight: 'black',
+        text: 'MUSIC',
+        letterSpacing: -10,
+        lineSpacing: -100,
+        stroke: true,
+        border: '20px_solid_rgb:2d0eff99',
+      }
+    },
+    {
+      position: {
+        gravity: 'south',
+        y: 60
+      },
+      text: {
+        color: 'rgb:52a4ff80',
+        fontFamily: 'Source Sans Pro',
+        fontSize: 320,
+        fontWeight: 'black',
+        text: 'IS LIFE',
+        letterSpacing: -10,
+        lineSpacing: -100,
+        stroke: true,
+        border: '20px_solid_rgb:2d0eff99',
+      }
+    }
+  ]}
+  alt="Image of woman with headphones transformed with Cloudinary"
+/>
 ```

docs/src/routes/components/CldImage/examples/+page.svx

@@ -12,7 +12,7 @@ import { CldImage } from 'svelte-cloudinary'
 <svelte:head>
   <title>CldImage Examples - Svelte Cloudinary</title>
   <meta name="og:title" content="CldImage Examples - Svelte Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.vercel.app/components/cldimage/examples`} />
+  <meta name="og:url" content={`https://svelte-cloudinary.vercel.app/components/cldimage/examples`} />
 </svelte:head>
 
 
@@ -655,7 +655,7 @@ overlays={[{
   src="images/turtle"
   sizes="(max-width: 480px) 100vw, 50vw"
   transformations={[
-    'next-cloudinary-named-transformation'
+    'svelte-cloudinary-named-transformation'
   ]}
   alt=""
 />
@@ -664,7 +664,7 @@ overlays={[{
 
 ```jsx
 transformations={[
-  'next-cloudinary-named-transformation'
+  'svelte-cloudinary-named-transformation'
 ]}
 ```
 </li>

docs/src/routes/components/CldImage/usage/+page.svx

@@ -20,27 +20,28 @@ With it comes access to more advanced features like dynamic cropping, background
 The basic required props include width, height, src, and alt:
 
 ```js
-    import { CldImage } from 'svelte-cloudinary';
-
-    <CldImage
-      width={960}
-      height={600}
-      src="<Public ID>"
-      alt="Description of my image"
-      sizes="100vw"
-    />
+import { CldImage } from 'svelte-cloudinary';
+
+<CldImage
+  width={960}
+  height={600}
+  src="<Public ID>"
+  alt="Description of my image"
+  sizes="100vw"
+/>
 ```
 
 *Note: A Cloud Name must be first be configured. See [Installation](/installation) for more details.*
 
 
 The sizes prop is optional.
-    <CldImage
-      width={960}
-      height={600}
-      src={`images/turtle`}
-      sizes="100vw"
-    />
+
+<CldImage
+  width={960}
+  height={600}
+  src={`images/turtle`}
+  sizes="100vw"
+/>