diff --git a/packages/docs/astro.config.mjs b/packages/docs/astro.config.mjs
index f98bf4c8..f64edea9 100644
--- a/packages/docs/astro.config.mjs
+++ b/packages/docs/astro.config.mjs
@@ -158,12 +158,7 @@ export default defineConfig({
},
{
label: 'Guides',
- items: [
- {
- label: 'Custom Domain',
- link: '/guides/custom-domain',
- },
- ],
+ autogenerate: { directory: 'guides' },
},
{
label: 'Migrate',
@@ -182,6 +177,7 @@ export default defineConfig({
optimizeDeps: {
exclude: ['svelte-cloudinary'],
},
+ envPrefix: ['PUBLIC', 'VITE'],
plugins: [
{
// https://github.com/sveltejs/svelte/issues/9288#issuecomment-1748034687
diff --git a/packages/docs/src/content/docs/guides/background-removal.mdx b/packages/docs/src/content/docs/guides/background-removal.mdx
new file mode 100644
index 00000000..a7cbb457
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/background-removal.mdx
@@ -0,0 +1,55 @@
+---
+title: Background Removal
+description: Learn how to use Cloudinary to remove a background from your image.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { CldImage } from 'svelte-cloudinary';
+
+:::note
+The Cloudinary AI Background Removal add-on is required to use this feature.
+:::
+
+You can use the `removeBackground` option to generatively remove the background from an image, for example:
+
+
+
+
+
+
+```svelte {10}
+
+
+
+```
+
+
+
+
+
+```ts {5}
+import { getCldImageUrl } from 'svelte-cloudinary';
+
+const url = getCldImageUrl({
+ src: 'images/turtle',
+ removeBackground: true,
+ width: 960,
+ height: 600,
+});
+```
+
+
+
diff --git a/packages/docs/src/content/docs/guides/image-underlays.mdx b/packages/docs/src/content/docs/guides/image-underlays.mdx
new file mode 100644
index 00000000..d971e332
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/image-underlays.mdx
@@ -0,0 +1,56 @@
+---
+title: Image Underlays
+description: Learn how to use Cloudinary to programatically place images under images.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
+
+An image underlay allows you to place one image under another (it doesn't work with text). For example we can remove the background from this turtle image, then underlay an image of space:
+
+
+
+
+
+
+```svelte {11-12}
+
+
+
+```
+
+
+
+
+
+```ts {7-8}
+import { getCldImageUrl } from 'svelte-cloudinary';
+
+const url = getCldImageUrl({
+ width: 960,
+ height: 600,
+ src: 'images/turtle',
+ removeBackground: true,
+ underlay: 'images/galaxy',
+});
+```
+
+
+
diff --git a/packages/docs/src/content/docs/guides/overlays.mdx b/packages/docs/src/content/docs/guides/overlays.mdx
new file mode 100644
index 00000000..1772cbc1
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/overlays.mdx
@@ -0,0 +1,161 @@
+---
+title: Overlays
+description: Learn how to use Cloudinary to programatically place images/text on top of other images/text.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
+
+You can use the overlays feature to stack images or text on top of each other, for example:
+
+
+
+
+
+
+```svelte {11-47}
+
+
+
+```
+
+
+
+
+
+```ts {7-43}
+import { getCldImageUrl } from 'svelte-cloudinary';
+
+const url = getCldImageUrl({
+ width: 960,
+ height: 600,
+ src: 'images/turtle',
+ overlays: [
+ {
+ publicId: 'images/earth',
+ position: {
+ x: 50,
+ y: 50,
+ gravity: 'north_west',
+ },
+ effects: [
+ {
+ crop: 'fill',
+ gravity: 'auto',
+ width: 500,
+ height: 500,
+ },
+ ],
+ },
+ {
+ width: 2670 - 20,
+ crop: 'fit',
+ position: {
+ x: 140,
+ y: 140,
+ angle: -20,
+ gravity: 'south_east',
+ },
+ text: {
+ color: 'blueviolet',
+ fontFamily: 'Source Sans Pro',
+ fontSize: 80,
+ fontWeight: 'bold',
+ textDecoration: 'underline',
+ letterSpacing: 14,
+ text: 'Svelte x Cloudinary',
+ },
+ },
+ ],
+});
+```
+
+
+
diff --git a/packages/docs/src/content/docs/guides/responsive-images.mdx b/packages/docs/src/content/docs/guides/responsive-images.mdx
new file mode 100644
index 00000000..5cc667e6
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/responsive-images.mdx
@@ -0,0 +1,35 @@
+---
+title: Responsive Images
+description: Learn how to use Cloudinary to generate performant responsive images.
+---
+
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
+
+Responsive images are great for performance since the browser can load a smaller image on a smaller device, where the drop in quality isn't noticable. This will increase page load times and general user experience for everyone, as they get both a noticably high quality image and faster page load.
+
+You can configure specifically the image sizes you want, using a media query like synax, with the `sizes` prop/option. Cloudinary will generate the necessary sizes on the fly, as usual!
+
+
+
+```svelte
+
+
+
+```
diff --git a/packages/docs/src/content/docs/guides/social-media-cards.mdx b/packages/docs/src/content/docs/guides/social-media-cards.mdx
new file mode 100644
index 00000000..6e0d4d61
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/social-media-cards.mdx
@@ -0,0 +1,201 @@
+---
+title: Social Media Cards
+description: Learn how to use Cloudinary to generate dynamic social media cards.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { CldOgImage, CldImage } from 'svelte-cloudinary';
+
+:::note
+CldOgImage does not render an `![]()
` tag, meaning it can't be visually embedded on a page. The following examples make use of the `` tag to showcase what's possible.
+:::
+
+
+
+
+
+
+```svelte {9-58}
+
+
+
+```
+
+
+
+
+
+```ts {6-55}
+import { getCldOgImageUrl } from 'svelte-cloudinary';
+
+// You're responsible for adding the correct meta tags
+const url = getCldOgImageUrl({
+ src: 'images/white',
+ overlays: [
+ {
+ publicId: `images/mountain`,
+ position: {
+ x: 0,
+ y: 0,
+ gravity: 'north_east',
+ },
+ effects: [
+ {
+ crop: 'fill',
+ gravity: 'auto',
+ width: '0.33',
+ height: '1.0',
+ },
+ ],
+ flags: ['relative'],
+ },
+ {
+ width: 700,
+ crop: 'fit',
+ text: {
+ color: 'black',
+ fontFamily: 'Source Sans Pro',
+ fontSize: 80,
+ fontWeight: 'bold',
+ text: 'Next Cloudinary',
+ },
+ position: {
+ x: 80,
+ y: -50,
+ gravity: 'west',
+ },
+ },
+ {
+ width: 700,
+ crop: 'fit',
+ text: {
+ color: 'black',
+ fontFamily: 'Source Sans Pro',
+ fontSize: 40,
+ text: 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!',
+ },
+ position: {
+ x: 80,
+ y: 50,
+ gravity: 'west',
+ },
+ },
+ ],
+});
+```
+
+
+
diff --git a/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
new file mode 100644
index 00000000..39ee3178
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx
@@ -0,0 +1,18 @@
+---
+title: Uploading Images and Videos
+description: Learn how to use Cloudinary to enable users to upload images and/or videos.
+---
+
+import uploadCode from '$lib/examples/Upload.svelte?raw';
+import { Code } from '@astrojs/starlight/components';
+import Upload from '$lib/examples/Upload.svelte';
+
+You can use the upload widget, or as a shortcut the upload button, to enable the users to upload images and/or videos.
+
+:::caution
+Starlight (the documentation framework we use) messes with the upload widget, we're working on a fix but it'll work fine with your Svelte/SvelteKit websites!
+:::
+
+
+
+Click the button below to try uploading something:
+{/if}
+
+ {
+ if (typeof result.info === 'object') {
+ info = result.info;
+ widget.close();
+ }
+ }} />
diff --git a/vercel.json b/vercel.json
index 7172e2cc..de6f5734 100644
--- a/vercel.json
+++ b/vercel.json
@@ -74,47 +74,15 @@
"destination": "/helpers/getcldogimageurl/configuration"
},
{
- "source": "/getcldogimageurl/examples",
- "destination": "/missing"
- },
- {
- "source": "/guides",
- "destination": "/missing"
- },
- {
- "source": "/guides/background-removal",
- "destination": "/missing"
- },
- {
- "source": "/guides/image-optimization",
- "destination": "/missing"
- },
- {
- "source": "/guides/image-overlays",
- "destination": "/missing"
- },
- {
- "source": "/guides/image-underlays",
- "destination": "/missing"
- },
- {
- "source": "/guides/placeholders",
- "destination": "/missing"
- },
- {
- "source": "/guides/responsive-images",
- "destination": "/missing"
- },
- {
- "source": "/guides/social-media-cards",
- "destination": "/missing"
+ "source": "/guides/images-overlays",
+ "destination": "/guides/overlays"
},
{
"source": "/guides/text-overlays",
- "destination": "/missing"
+ "destination": "/guides/overlays"
},
{
- "source": "/guides/uploading-images-and-videos",
+ "source": "/getcldogimageurl/examples",
"destination": "/missing"
},
{