From 89a366cda72d20418ed7277f445b88877dad0ea8 Mon Sep 17 00:00:00 2001 From: ProCodec <43810146+error9098x@users.noreply.github.com> Date: Fri, 4 Oct 2024 22:27:46 +0000 Subject: [PATCH 1/5] Add custom domain guide for svelte-cloudinary configuration #143 --- packages/docs/astro.config.mjs | 9 ++ .../src/content/docs/guides/custom-domain.mdx | 97 +++++++++++++++++++ 2 files changed, 106 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..fa3b2a1b --- /dev/null +++ b/packages/docs/src/content/docs/guides/custom-domain.mdx @@ -0,0 +1,97 @@ +--- +title: "Adding a Custom Domain" +--- + +## Configuring svelte-cloudinary with Private CDN and Custom Domain + +Enhance the delivery and security of your media assets by integrating **svelte-cloudinary** with a private CDN and a custom domain. This configuration ensures that your assets are served securely through your own domain, providing better control and performance. + +## Prerequisites + +:::note +**Private CDN** and **Custom Domain** features are available exclusively on [Cloudinary's Advanced plan](https://cloudinary.com/pricing). Ensure your account is upgraded to access these functionalities. +::: + +## 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: + +```plaintext +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. + +:::caution +Never commit your `.env` file to version control. Add it to your `.gitignore` file to keep sensitive information secure. +::: + +### 3. Configure Cloudinary + +Update your Cloudinary configuration to use these environment variables: + +```javascript +import { configureCloudinary } from 'svelte-cloudinary'; + +export function setupCloudinary() { + configureCloudinary({ + cloudName: import.meta.env.VITE_CLOUDINARY_CLOUD_NAME, + privateCdn: import.meta.env.VITE_CLOUDINARY_PRIVATE_CDN === 'true', + secureDistribution: import.meta.env.VITE_CLOUDINARY_SECURE_DISTRIBUTION, + }); +} +``` + +### 4. Initialize Configuration in Your Application + +Invoke the configuration setup in your main application file, such as the root `+layout.svelte` in SvelteKit: + +```svelte + + + +``` + +## Example Usage + +With the configuration in place, use the `` component to serve images through your private CDN and custom domain: + +```svelte + + + +``` + +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 From 60390b39612e8572cf35924935728bfbef564e7d Mon Sep 17 00:00:00 2001 From: ProCodec <43810146+error9098x@users.noreply.github.com> Date: Sun, 6 Oct 2024 18:02:48 +0000 Subject: [PATCH 2/5] added suggested changes --- .../src/content/docs/guides/custom-domain.mdx | 39 +++++-------------- 1 file changed, 10 insertions(+), 29 deletions(-) diff --git a/packages/docs/src/content/docs/guides/custom-domain.mdx b/packages/docs/src/content/docs/guides/custom-domain.mdx index fa3b2a1b..9519431e 100644 --- a/packages/docs/src/content/docs/guides/custom-domain.mdx +++ b/packages/docs/src/content/docs/guides/custom-domain.mdx @@ -2,15 +2,12 @@ title: "Adding a Custom Domain" --- -## Configuring svelte-cloudinary with Private CDN and 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). -Enhance the delivery and security of your media assets by integrating **svelte-cloudinary** with a private CDN and a custom domain. This configuration ensures that your assets are served securely through your own domain, providing better control and performance. +:::note +**Private CDN** and **Custom Domain** features are available exclusively on [Cloudinary's Advanced plan](https://cloudinary.com/pricing). +::: -## Prerequisites - -:::note -**Private CDN** and **Custom Domain** features are available exclusively on [Cloudinary's Advanced plan](https://cloudinary.com/pricing). Ensure your account is upgraded to access these functionalities. -::: ## Step-by-Step Configuration @@ -26,13 +23,12 @@ npm install svelte-cloudinary Create a `.env` file in your project root (if it doesn't exist already) and add the following variables: -```plaintext -VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name -VITE_CLOUDINARY_PRIVATE_CDN=true -VITE_CLOUDINARY_SECURE_DISTRIBUTION=your-custom-domain.com +```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. +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. :::caution Never commit your `.env` file to version control. Add it to your `.gitignore` file to keep sensitive information secure. @@ -54,22 +50,7 @@ export function setupCloudinary() { } ``` -### 4. Initialize Configuration in Your Application - -Invoke the configuration setup in your main application file, such as the root `+layout.svelte` in SvelteKit: - -```svelte - - -``` ## Example Usage @@ -81,7 +62,7 @@ With the configuration in place, use the `` component to serve image Date: Sun, 6 Oct 2024 18:07:03 +0000 Subject: [PATCH 3/5] removed newline --- packages/docs/src/content/docs/guides/custom-domain.mdx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/docs/src/content/docs/guides/custom-domain.mdx b/packages/docs/src/content/docs/guides/custom-domain.mdx index 9519431e..6a2ed3e7 100644 --- a/packages/docs/src/content/docs/guides/custom-domain.mdx +++ b/packages/docs/src/content/docs/guides/custom-domain.mdx @@ -8,7 +8,6 @@ Enhance the delivery of your media assets by integrating svelte-cloudinary with **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 @@ -50,8 +49,6 @@ export function setupCloudinary() { } ``` - - ## Example Usage With the configuration in place, use the `` component to serve images through your private CDN and custom domain: @@ -74,5 +71,4 @@ 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 From 5727738d76e98b01f6198907aedeff65fbb5a562 Mon Sep 17 00:00:00 2001 From: "Willow (GHOST)" Date: Sun, 6 Oct 2024 20:30:54 +0100 Subject: [PATCH 4/5] Update packages/docs/src/content/docs/guides/custom-domain.mdx --- packages/docs/src/content/docs/guides/custom-domain.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/content/docs/guides/custom-domain.mdx b/packages/docs/src/content/docs/guides/custom-domain.mdx index 6a2ed3e7..b11109e0 100644 --- a/packages/docs/src/content/docs/guides/custom-domain.mdx +++ b/packages/docs/src/content/docs/guides/custom-domain.mdx @@ -27,7 +27,7 @@ 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. +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. From abcd3265d1d19057b29ca6bd8450e30c029db95d Mon Sep 17 00:00:00 2001 From: "Willow (GHOST)" Date: Sun, 6 Oct 2024 20:30:59 +0100 Subject: [PATCH 5/5] Update packages/docs/src/content/docs/guides/custom-domain.mdx --- .../src/content/docs/guides/custom-domain.mdx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/docs/src/content/docs/guides/custom-domain.mdx b/packages/docs/src/content/docs/guides/custom-domain.mdx index b11109e0..0eb83f13 100644 --- a/packages/docs/src/content/docs/guides/custom-domain.mdx +++ b/packages/docs/src/content/docs/guides/custom-domain.mdx @@ -33,22 +33,6 @@ Replace your_cloud_name with your actual Cloudinary cloud name and your-custom-d Never commit your `.env` file to version control. Add it to your `.gitignore` file to keep sensitive information secure. ::: -### 3. Configure Cloudinary - -Update your Cloudinary configuration to use these environment variables: - -```javascript -import { configureCloudinary } from 'svelte-cloudinary'; - -export function setupCloudinary() { - configureCloudinary({ - cloudName: import.meta.env.VITE_CLOUDINARY_CLOUD_NAME, - privateCdn: import.meta.env.VITE_CLOUDINARY_PRIVATE_CDN === 'true', - secureDistribution: import.meta.env.VITE_CLOUDINARY_SECURE_DISTRIBUTION, - }); -} -``` - ## Example Usage With the configuration in place, use the `` component to serve images through your private CDN and custom domain: