From d514ad11fa8eedde97e11f68f485517d5a393e90 Mon Sep 17 00:00:00 2001
From: ProCodec <43810146+error9098x@users.noreply.github.com>
Date: Mon, 7 Oct 2024 01:03:08 +0530
Subject: [PATCH] docs: add custom domain guide #143 (#155)

---
 packages/docs/astro.config.mjs                |  9 +++
 .../src/content/docs/guides/custom-domain.mdx | 58 +++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 packages/docs/src/content/docs/guides/custom-domain.mdx

diff --git a/packages/docs/astro.config.mjs b/packages/docs/astro.config.mjs
index 89761264..42954dd9 100644
--- a/packages/docs/astro.config.mjs
+++ b/packages/docs/astro.config.mjs
@@ -161,6 +161,15 @@ export default defineConfig({
 						},
 					],
 				},
+				{
+					label: 'Guides',
+					items: [
+						{
+							label: 'Custom Domain',
+							link: '/guides/custom-domain',
+						},
+					],
+				},
 			],
 		}),
 		svelte(),
diff --git a/packages/docs/src/content/docs/guides/custom-domain.mdx b/packages/docs/src/content/docs/guides/custom-domain.mdx
new file mode 100644
index 00000000..0eb83f13
--- /dev/null
+++ b/packages/docs/src/content/docs/guides/custom-domain.mdx
@@ -0,0 +1,58 @@
+---
+title: "Adding a Custom Domain"
+---
+
+Enhance the delivery of your media assets by integrating svelte-cloudinary with a [private CDN and/or custom domain](https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_custom_delivery_hostnames_cnames).  
+
+:::note  
+**Private CDN** and **Custom Domain** features are available exclusively on [Cloudinary's Advanced plan](https://cloudinary.com/pricing).  
+:::  
+
+## Step-by-Step Configuration
+
+### 1. Install Dependencies
+
+Ensure you have **svelte-cloudinary** installed in your project:
+
+```bash
+npm install svelte-cloudinary
+```
+
+### 2. Set Up Environment Variables
+
+Create a `.env` file in your project root (if it doesn't exist already) and add the following variables:
+
+```bash
+VITE_CLOUDINARY_CLOUD_NAME="your_cloud_name"  
+VITE_CLOUDINARY_PRIVATE_CDN="true"  
+VITE_CLOUDINARY_SECURE_DISTRIBUTION="your-custom-domain.com"  
+```
+Replace your_cloud_name with your actual Cloudinary cloud name and your-custom-domain.com with your custom domain. Read more about [configuring svelte-cloudinary here](https://svelte.cloudinary.dev/config).
+
+:::caution
+Never commit your `.env` file to version control. Add it to your `.gitignore` file to keep sensitive information secure.
+:::
+
+## Example Usage
+
+With the configuration in place, use the `<CldImage />` component to serve images through your private CDN and custom domain:
+
+```svelte
+<script>
+  import { CldImage } from 'svelte-cloudinary';
+</script>
+
+<CldImage
+  src="<Your Public ID>" 
+  alt="Sample Image"
+  width="800"
+  height="600"
+/>
+```
+
+This setup ensures that the image URL follows your custom domain structure:
+
+- **Before:** `https://res.cloudinary.com/your_cloud_name/image/upload/sample.jpg`
+- **After:** `https://your-custom-domain.com/image/upload/sample.jpg`
+
+Learn more about setting up CNAME records on the [Cloudinary docs](https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_custom_delivery_hostnames_cnames).
\ No newline at end of file