From 7a38c72c163457bb8fe03bd76fc45a76326d0610 Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Thu, 6 Jul 2023 17:14:06 -0400
Subject: [PATCH 01/10] docs reorganization

---
 docs/pages/_meta.json                         | 37 ++++++++++++++++---
 .../{use-cases => }/background-removal.mdx    |  4 +-
 .../{components => }/cldimage/_meta.json      |  0
 .../{components => }/cldimage/basic-usage.mdx |  8 ++--
 .../cldimage/configuration.mdx                |  2 +-
 .../{components => }/cldimage/examples.mdx    |  6 +--
 .../{components => }/cldogimage/_meta.json    |  0
 .../cldogimage/basic-usage.mdx                |  6 +--
 .../cldogimage/configuration.mdx              |  2 +-
 .../{components => }/cldogimage/examples.mdx  |  8 ++--
 .../clduploadbutton/_meta.json                |  0
 .../clduploadbutton/basic-usage.mdx           | 10 ++---
 .../clduploadbutton/configuration.mdx         |  2 +-
 .../clduploadbutton/examples.mdx              |  8 ++--
 .../clduploadwidget/_meta.json                |  0
 .../clduploadwidget/basic-usage.mdx           | 14 +++----
 .../clduploadwidget/configuration.mdx         |  2 +-
 .../clduploadwidget/examples.mdx              |  8 ++--
 .../cldvideoplayer/_meta.json                 |  0
 .../cldvideoplayer/basic-usage.mdx            |  6 +--
 .../cldvideoplayer/configuration.mdx          |  2 +-
 .../cldvideoplayer/examples.mdx               |  6 +--
 .../cldvideoplayer/transformations.mdx        |  4 +-
 docs/pages/components/_meta.json              |  7 ----
 .../{helpers => }/getcldimageurl/_meta.json   |  0
 .../getcldimageurl/basic-usage.mdx            |  6 +--
 .../getcldimageurl/configuration.mdx          |  2 +-
 .../{helpers => }/getcldimageurl/examples.mdx |  6 +--
 .../{helpers => }/getcldogimageurl/_meta.json |  0
 .../getcldogimageurl/basic-usage.mdx          |  6 +--
 .../getcldogimageurl/configuration.mdx        |  2 +-
 .../getcldogimageurl/examples.mdx             |  8 ++--
 docs/pages/guides/_meta.json                  |  4 --
 docs/pages/helpers/_meta.json                 |  4 --
 docs/pages/{use-cases => }/image-overlays.mdx |  4 +-
 .../pages/{use-cases => }/image-underlays.mdx |  4 +-
 docs/pages/{guides => }/nextjs-13.mdx         |  4 +-
 docs/pages/{guides => }/responsive-images.mdx |  4 +-
 .../{use-cases => }/social-media-card.mdx     |  4 +-
 docs/pages/{use-cases => }/text-overlays.mdx  |  4 +-
 docs/pages/{resources.mdx => tutorials.mdx}   | 12 +++---
 .../uploading-images-and-videos.mdx           |  6 +--
 docs/pages/use-cases/_meta.json               |  8 ----
 docs/theme.config.js                          |  5 ++-
 44 files changed, 121 insertions(+), 114 deletions(-)
 rename docs/pages/{use-cases => }/background-removal.mdx (91%)
 rename docs/pages/{components => }/cldimage/_meta.json (100%)
 rename docs/pages/{components => }/cldimage/basic-usage.mdx (93%)
 rename docs/pages/{components => }/cldimage/configuration.mdx (99%)
 rename docs/pages/{components => }/cldimage/examples.mdx (98%)
 rename docs/pages/{components => }/cldogimage/_meta.json (100%)
 rename docs/pages/{components => }/cldogimage/basic-usage.mdx (96%)
 rename docs/pages/{components => }/cldogimage/configuration.mdx (98%)
 rename docs/pages/{components => }/cldogimage/examples.mdx (88%)
 rename docs/pages/{components => }/clduploadbutton/_meta.json (100%)
 rename docs/pages/{components => }/clduploadbutton/basic-usage.mdx (90%)
 rename docs/pages/{components => }/clduploadbutton/configuration.mdx (96%)
 rename docs/pages/{components => }/clduploadbutton/examples.mdx (87%)
 rename docs/pages/{components => }/clduploadwidget/_meta.json (100%)
 rename docs/pages/{components => }/clduploadwidget/basic-usage.mdx (95%)
 rename docs/pages/{components => }/clduploadwidget/configuration.mdx (96%)
 rename docs/pages/{components => }/clduploadwidget/examples.mdx (93%)
 rename docs/pages/{components => }/cldvideoplayer/_meta.json (100%)
 rename docs/pages/{components => }/cldvideoplayer/basic-usage.mdx (92%)
 rename docs/pages/{components => }/cldvideoplayer/configuration.mdx (99%)
 rename docs/pages/{components => }/cldvideoplayer/examples.mdx (96%)
 rename docs/pages/{components => }/cldvideoplayer/transformations.mdx (96%)
 delete mode 100644 docs/pages/components/_meta.json
 rename docs/pages/{helpers => }/getcldimageurl/_meta.json (100%)
 rename docs/pages/{helpers => }/getcldimageurl/basic-usage.mdx (93%)
 rename docs/pages/{helpers => }/getcldimageurl/configuration.mdx (99%)
 rename docs/pages/{helpers => }/getcldimageurl/examples.mdx (89%)
 rename docs/pages/{helpers => }/getcldogimageurl/_meta.json (100%)
 rename docs/pages/{helpers => }/getcldogimageurl/basic-usage.mdx (95%)
 rename docs/pages/{helpers => }/getcldogimageurl/configuration.mdx (96%)
 rename docs/pages/{helpers => }/getcldogimageurl/examples.mdx (87%)
 delete mode 100644 docs/pages/guides/_meta.json
 delete mode 100644 docs/pages/helpers/_meta.json
 rename docs/pages/{use-cases => }/image-overlays.mdx (92%)
 rename docs/pages/{use-cases => }/image-underlays.mdx (91%)
 rename docs/pages/{guides => }/nextjs-13.mdx (93%)
 rename docs/pages/{guides => }/responsive-images.mdx (97%)
 rename docs/pages/{use-cases => }/social-media-card.mdx (96%)
 rename docs/pages/{use-cases => }/text-overlays.mdx (94%)
 rename docs/pages/{resources.mdx => tutorials.mdx} (83%)
 rename docs/pages/{use-cases => }/uploading-images-and-videos.mdx (92%)
 delete mode 100644 docs/pages/use-cases/_meta.json

diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
index 295db29b..668c0f30 100644
--- a/docs/pages/_meta.json
+++ b/docs/pages/_meta.json
@@ -1,9 +1,36 @@
 {
   "index": "Getting Started",
   "installation": "Installation",
-  "components": "Components",
-  "helpers": "Helpers",
-  "use-cases": "Use Cases",
-  "guides": "Guides",
-  "resources": "Resources"
+  "nextjs-13": "Next.js 13",
+  "Components": {
+    "type": "separator",
+    "title": "Components"
+  },
+  "cldimage": "<CldImage />",
+  "cldogimage": "<CldOgImage />",
+  "clduploadbutton": "<CldUploadButton />",
+  "clduploadwidget": "<CldUploadWidget />",
+  "cldvideoplayer": "<CldVideoPlayer />",
+  "Helpers": {
+    "type": "separator",
+    "title": "Helpers"
+  },
+  "getcldimageurl": "getCldImageUrl",
+  "getcldogimageurl": "getCldOgImageUrl",
+  "Guides": {
+    "type": "separator",
+    "title": "Guides"
+  },
+  "background-removal": "Background Removal",
+  "image-overlays": "Image Overlays",
+  "image-underlays": "Image Underlays",
+  "responsive-images": "Responsive Images",
+  "social-media-card": "Social Media Card",
+  "text-overlays": "Text Overlays",
+  "uploading-images-and-videos": "Uploading Images & Videos",
+  "Resources": {
+    "type": "separator",
+    "title": "Resources"
+  },
+  "tutorials": "Tutorials"
 }
\ No newline at end of file
diff --git a/docs/pages/use-cases/background-removal.mdx b/docs/pages/background-removal.mdx
similarity index 91%
rename from docs/pages/use-cases/background-removal.mdx
rename to docs/pages/background-removal.mdx
index 98664bc1..26447472 100644
--- a/docs/pages/use-cases/background-removal.mdx
+++ b/docs/pages/background-removal.mdx
@@ -1,8 +1,8 @@
 import Head from 'next/head';
 
-import OgImage from '../../components/OgImage';
+import OgImage from '../components/OgImage';
 
-import { CldImage } from '../../../next-cloudinary';
+import { CldImage } from '../../next-cloudinary';
 
 <Head>
   <title>Background Removal - Next Cloudinary</title>
diff --git a/docs/pages/components/cldimage/_meta.json b/docs/pages/cldimage/_meta.json
similarity index 100%
rename from docs/pages/components/cldimage/_meta.json
rename to docs/pages/cldimage/_meta.json
diff --git a/docs/pages/components/cldimage/basic-usage.mdx b/docs/pages/cldimage/basic-usage.mdx
similarity index 93%
rename from docs/pages/components/cldimage/basic-usage.mdx
rename to docs/pages/cldimage/basic-usage.mdx
index 687a7628..0f723486 100644
--- a/docs/pages/components/cldimage/basic-usage.mdx
+++ b/docs/pages/cldimage/basic-usage.mdx
@@ -1,11 +1,11 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldImage } from '../../../../next-cloudinary';
+import { CldImage } from '../../../next-cloudinary';
 
-import ImageGrid from '../../../components/ImageGrid';
-import OgImage from '../../../components/OgImage';
-import Video from '../../../components/Video';
+import ImageGrid from '../../components/ImageGrid';
+import OgImage from '../../components/OgImage';
+import Video from '../../components/Video';
 
 <Head>
   <title>CldImage - Next Cloudinary</title>
diff --git a/docs/pages/components/cldimage/configuration.mdx b/docs/pages/cldimage/configuration.mdx
similarity index 99%
rename from docs/pages/components/cldimage/configuration.mdx
rename to docs/pages/cldimage/configuration.mdx
index 7f288c77..283b4373 100644
--- a/docs/pages/components/cldimage/configuration.mdx
+++ b/docs/pages/cldimage/configuration.mdx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
 <Head>
   <title>CldImage Configuration - Next Cloudinary</title>
diff --git a/docs/pages/components/cldimage/examples.mdx b/docs/pages/cldimage/examples.mdx
similarity index 98%
rename from docs/pages/components/cldimage/examples.mdx
rename to docs/pages/cldimage/examples.mdx
index a85c2ac5..1c0e10c9 100644
--- a/docs/pages/components/cldimage/examples.mdx
+++ b/docs/pages/cldimage/examples.mdx
@@ -1,10 +1,10 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldImage } from '../../../../next-cloudinary';
+import { CldImage } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
-import ImageGrid from '../../../components/ImageGrid';
+import OgImage from '../../components/OgImage';
+import ImageGrid from '../../components/ImageGrid';
 
 <Head>
   <title>CldImage Examples - Next Cloudinary</title>
diff --git a/docs/pages/components/cldogimage/_meta.json b/docs/pages/cldogimage/_meta.json
similarity index 100%
rename from docs/pages/components/cldogimage/_meta.json
rename to docs/pages/cldogimage/_meta.json
diff --git a/docs/pages/components/cldogimage/basic-usage.mdx b/docs/pages/cldogimage/basic-usage.mdx
similarity index 96%
rename from docs/pages/components/cldogimage/basic-usage.mdx
rename to docs/pages/cldogimage/basic-usage.mdx
index 7dd7c667..7c502c87 100644
--- a/docs/pages/components/cldogimage/basic-usage.mdx
+++ b/docs/pages/cldogimage/basic-usage.mdx
@@ -1,10 +1,10 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldImage } from '../../../../next-cloudinary';
+import { CldImage } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
-import Video from '../../../components/Video';
+import OgImage from '../../components/OgImage';
+import Video from '../../components/Video';
 
 <Head>
   <title>CldOgImage - Next Cloudinary</title>
diff --git a/docs/pages/components/cldogimage/configuration.mdx b/docs/pages/cldogimage/configuration.mdx
similarity index 98%
rename from docs/pages/components/cldogimage/configuration.mdx
rename to docs/pages/cldogimage/configuration.mdx
index 9a9dfd28..74a99c82 100644
--- a/docs/pages/components/cldogimage/configuration.mdx
+++ b/docs/pages/cldogimage/configuration.mdx
@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
 <Head>
   <title>CldOgImage Configuration - Next Cloudinary</title>
diff --git a/docs/pages/components/cldogimage/examples.mdx b/docs/pages/cldogimage/examples.mdx
similarity index 88%
rename from docs/pages/components/cldogimage/examples.mdx
rename to docs/pages/cldogimage/examples.mdx
index b2575110..99bf4d9a 100644
--- a/docs/pages/components/cldogimage/examples.mdx
+++ b/docs/pages/cldogimage/examples.mdx
@@ -1,11 +1,11 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldImage } from '../../../../next-cloudinary';
-import { OG_IMAGE_WIDTH, OG_IMAGE_HEIGHT } from '../../../../next-cloudinary/src/constants/sizes';
+import { CldImage } from '../../../next-cloudinary';
+import { OG_IMAGE_WIDTH, OG_IMAGE_HEIGHT } from '../../../next-cloudinary/src/constants/sizes';
 
-import OgImage from '../../../components/OgImage';
-import ImageGrid from '../../../components/ImageGrid';
+import OgImage from '../../components/OgImage';
+import ImageGrid from '../../components/ImageGrid';
 
 <Head>
   <title>CldOgImage Examples - Next Cloudinary</title>
diff --git a/docs/pages/components/clduploadbutton/_meta.json b/docs/pages/clduploadbutton/_meta.json
similarity index 100%
rename from docs/pages/components/clduploadbutton/_meta.json
rename to docs/pages/clduploadbutton/_meta.json
diff --git a/docs/pages/components/clduploadbutton/basic-usage.mdx b/docs/pages/clduploadbutton/basic-usage.mdx
similarity index 90%
rename from docs/pages/components/clduploadbutton/basic-usage.mdx
rename to docs/pages/clduploadbutton/basic-usage.mdx
index 3fed08d5..2fcc2c31 100644
--- a/docs/pages/components/clduploadbutton/basic-usage.mdx
+++ b/docs/pages/clduploadbutton/basic-usage.mdx
@@ -2,11 +2,11 @@ import { useState } from 'react';
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldUploadButton } from '../../../../next-cloudinary';
+import { CldUploadButton } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
-import styles from '../../../styles/Docs.module.scss';
+import styles from '../../styles/Docs.module.scss';
 
 <Head>
   <title>CldUploadButton - Next Cloudinary</title>
@@ -54,9 +54,9 @@ export const UnsignedUpload = () => {
   )
 }
 
-<p className="nx-mt-6">
+<div className="nx-mt-6">
 <UnsignedUpload />
-</p>
+</div>
 
 ## Learn More about CldUploadButton
 * [Configuration](/components/clduploadbutton/configuration)
diff --git a/docs/pages/components/clduploadbutton/configuration.mdx b/docs/pages/clduploadbutton/configuration.mdx
similarity index 96%
rename from docs/pages/components/clduploadbutton/configuration.mdx
rename to docs/pages/clduploadbutton/configuration.mdx
index 1570c7b4..9ce7f017 100644
--- a/docs/pages/components/clduploadbutton/configuration.mdx
+++ b/docs/pages/clduploadbutton/configuration.mdx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
 <Head>
   <title>CldUploadButton Configuration - Next Cloudinary</title>
diff --git a/docs/pages/components/clduploadbutton/examples.mdx b/docs/pages/clduploadbutton/examples.mdx
similarity index 87%
rename from docs/pages/components/clduploadbutton/examples.mdx
rename to docs/pages/clduploadbutton/examples.mdx
index 5fe475d7..6b8301bd 100644
--- a/docs/pages/components/clduploadbutton/examples.mdx
+++ b/docs/pages/clduploadbutton/examples.mdx
@@ -2,12 +2,12 @@ import { useState } from 'react';
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldUploadButton } from '../../../../next-cloudinary';
+import { CldUploadButton } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
-import ImageGrid from '../../../components/ImageGrid';
+import OgImage from '../../components/OgImage';
+import ImageGrid from '../../components/ImageGrid';
 
-import styles from '../../../styles/Docs.module.scss';
+import styles from '../../styles/Docs.module.scss';
 
 <Head>
   <title>CldUploadButton Examples - Next Cloudinary</title>
diff --git a/docs/pages/components/clduploadwidget/_meta.json b/docs/pages/clduploadwidget/_meta.json
similarity index 100%
rename from docs/pages/components/clduploadwidget/_meta.json
rename to docs/pages/clduploadwidget/_meta.json
diff --git a/docs/pages/components/clduploadwidget/basic-usage.mdx b/docs/pages/clduploadwidget/basic-usage.mdx
similarity index 95%
rename from docs/pages/components/clduploadwidget/basic-usage.mdx
rename to docs/pages/clduploadwidget/basic-usage.mdx
index a28fd1e7..fb2f5292 100644
--- a/docs/pages/components/clduploadwidget/basic-usage.mdx
+++ b/docs/pages/clduploadwidget/basic-usage.mdx
@@ -2,11 +2,11 @@ import { useState } from 'react';
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldUploadWidget } from '../../../../next-cloudinary';
+import { CldUploadWidget } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
-import styles from '../../../styles/Docs.module.scss';
+import styles from '../../styles/Docs.module.scss';
 
 <Head>
   <title>CldUploadWidget - Next Cloudinary</title>
@@ -94,9 +94,9 @@ export const UnsignedUpload = ({ options }) => {
   )
 }
 
-<p className="nx-mt-6">
+<div className="nx-mt-6">
 <UnsignedUpload />
-</p>
+</div>
 
 ### Signed
 
@@ -174,9 +174,9 @@ export const SignedUpload = () => {
   )
 }
 
-<p className="nx-mt-6">
+<div className="nx-mt-6">
 <SignedUpload />
-</p>
+</div>
 
 
 
diff --git a/docs/pages/components/clduploadwidget/configuration.mdx b/docs/pages/clduploadwidget/configuration.mdx
similarity index 96%
rename from docs/pages/components/clduploadwidget/configuration.mdx
rename to docs/pages/clduploadwidget/configuration.mdx
index 933750b0..4e71c384 100644
--- a/docs/pages/components/clduploadwidget/configuration.mdx
+++ b/docs/pages/clduploadwidget/configuration.mdx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
 <Head>
   <title>CldUploadWidget Configuration - Next Cloudinary</title>
diff --git a/docs/pages/components/clduploadwidget/examples.mdx b/docs/pages/clduploadwidget/examples.mdx
similarity index 93%
rename from docs/pages/components/clduploadwidget/examples.mdx
rename to docs/pages/clduploadwidget/examples.mdx
index 5ad3a446..f76e71c9 100644
--- a/docs/pages/components/clduploadwidget/examples.mdx
+++ b/docs/pages/clduploadwidget/examples.mdx
@@ -2,12 +2,12 @@ import { useState } from 'react';
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldUploadWidget } from '../../../../next-cloudinary';
+import { CldUploadWidget } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
-import ImageGrid from '../../../components/ImageGrid';
+import OgImage from '../../components/OgImage';
+import ImageGrid from '../../components/ImageGrid';
 
-import styles from '../../../styles/Docs.module.scss';
+import styles from '../../styles/Docs.module.scss';
 
 <Head>
   <title>CldUploadWidget Examples - Next Cloudinary</title>
diff --git a/docs/pages/components/cldvideoplayer/_meta.json b/docs/pages/cldvideoplayer/_meta.json
similarity index 100%
rename from docs/pages/components/cldvideoplayer/_meta.json
rename to docs/pages/cldvideoplayer/_meta.json
diff --git a/docs/pages/components/cldvideoplayer/basic-usage.mdx b/docs/pages/cldvideoplayer/basic-usage.mdx
similarity index 92%
rename from docs/pages/components/cldvideoplayer/basic-usage.mdx
rename to docs/pages/cldvideoplayer/basic-usage.mdx
index 534befec..9b10ba40 100644
--- a/docs/pages/components/cldvideoplayer/basic-usage.mdx
+++ b/docs/pages/cldvideoplayer/basic-usage.mdx
@@ -1,9 +1,9 @@
 import Head from 'next/head';
 
-import { CldVideoPlayer } from '../../../../next-cloudinary';
+import { CldVideoPlayer } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
-import Video from '../../../components/Video';
+import OgImage from '../../components/OgImage';
+import Video from '../../components/Video';
 
 <Head>
   <title>CldVideoPlayer - Next Cloudinary</title>
diff --git a/docs/pages/components/cldvideoplayer/configuration.mdx b/docs/pages/cldvideoplayer/configuration.mdx
similarity index 99%
rename from docs/pages/components/cldvideoplayer/configuration.mdx
rename to docs/pages/cldvideoplayer/configuration.mdx
index 96447384..cefced70 100644
--- a/docs/pages/components/cldvideoplayer/configuration.mdx
+++ b/docs/pages/cldvideoplayer/configuration.mdx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
 <Head>
   <title>CldVideoPlayer Configuration - Next Cloudinary</title>
diff --git a/docs/pages/components/cldvideoplayer/examples.mdx b/docs/pages/cldvideoplayer/examples.mdx
similarity index 96%
rename from docs/pages/components/cldvideoplayer/examples.mdx
rename to docs/pages/cldvideoplayer/examples.mdx
index 6aa40033..f65dd83c 100644
--- a/docs/pages/components/cldvideoplayer/examples.mdx
+++ b/docs/pages/cldvideoplayer/examples.mdx
@@ -2,10 +2,10 @@ import { useRef } from 'react';
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldVideoPlayer } from '../../../../next-cloudinary';
+import { CldVideoPlayer } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
-import ImageGrid from '../../../components/ImageGrid';
+import OgImage from '../../components/OgImage';
+import ImageGrid from '../../components/ImageGrid';
 
 export const VideoPlayerWithRef = (props) => {
   const myPlayerRef = useRef();
diff --git a/docs/pages/components/cldvideoplayer/transformations.mdx b/docs/pages/cldvideoplayer/transformations.mdx
similarity index 96%
rename from docs/pages/components/cldvideoplayer/transformations.mdx
rename to docs/pages/cldvideoplayer/transformations.mdx
index e6e06d78..563563bf 100644
--- a/docs/pages/components/cldvideoplayer/transformations.mdx
+++ b/docs/pages/cldvideoplayer/transformations.mdx
@@ -1,9 +1,9 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldVideoPlayer } from '../../../../next-cloudinary';
+import { CldVideoPlayer } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
 <Head>
   <title>CldVideoPlayer Transformations - Next Cloudinary</title>
diff --git a/docs/pages/components/_meta.json b/docs/pages/components/_meta.json
deleted file mode 100644
index f9d240d6..00000000
--- a/docs/pages/components/_meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "cldimage": "<CldImage />",
-  "cldogimage": "<CldOgImage />",
-  "clduploadbutton": "<CldUploadButton />",
-  "clduploadwidget": "<CldUploadWidget />",
-  "cldvideoplayer": "<CldVideoPlayer />"
-}
\ No newline at end of file
diff --git a/docs/pages/helpers/getcldimageurl/_meta.json b/docs/pages/getcldimageurl/_meta.json
similarity index 100%
rename from docs/pages/helpers/getcldimageurl/_meta.json
rename to docs/pages/getcldimageurl/_meta.json
diff --git a/docs/pages/helpers/getcldimageurl/basic-usage.mdx b/docs/pages/getcldimageurl/basic-usage.mdx
similarity index 93%
rename from docs/pages/helpers/getcldimageurl/basic-usage.mdx
rename to docs/pages/getcldimageurl/basic-usage.mdx
index 3282875b..c7300f26 100644
--- a/docs/pages/helpers/getcldimageurl/basic-usage.mdx
+++ b/docs/pages/getcldimageurl/basic-usage.mdx
@@ -1,10 +1,10 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldImage, getCldImageUrl } from '../../../../next-cloudinary';
+import { CldImage, getCldImageUrl } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
-import Video from '../../../components/Video';
+import OgImage from '../../components/OgImage';
+import Video from '../../components/Video';
 
 <Head>
   <title>getCldImageUrl - Next Cloudinary</title>
diff --git a/docs/pages/helpers/getcldimageurl/configuration.mdx b/docs/pages/getcldimageurl/configuration.mdx
similarity index 99%
rename from docs/pages/helpers/getcldimageurl/configuration.mdx
rename to docs/pages/getcldimageurl/configuration.mdx
index 7f5592dc..bc88f8c3 100644
--- a/docs/pages/helpers/getcldimageurl/configuration.mdx
+++ b/docs/pages/getcldimageurl/configuration.mdx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
 <Head>
   <title>getCldImageUrl Configuration - Next Cloudinary</title>
diff --git a/docs/pages/helpers/getcldimageurl/examples.mdx b/docs/pages/getcldimageurl/examples.mdx
similarity index 89%
rename from docs/pages/helpers/getcldimageurl/examples.mdx
rename to docs/pages/getcldimageurl/examples.mdx
index 9465dda5..2f4ed9a8 100644
--- a/docs/pages/helpers/getcldimageurl/examples.mdx
+++ b/docs/pages/getcldimageurl/examples.mdx
@@ -1,10 +1,10 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldImage, getCldImageUrl } from '../../../../next-cloudinary';
+import { CldImage, getCldImageUrl } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
-import ImageGrid from '../../../components/ImageGrid';
+import OgImage from '../../components/OgImage';
+import ImageGrid from '../../components/ImageGrid';
 
 <Head>
   <title>getCldImageUrl Examples - Next Cloudinary</title>
diff --git a/docs/pages/helpers/getcldogimageurl/_meta.json b/docs/pages/getcldogimageurl/_meta.json
similarity index 100%
rename from docs/pages/helpers/getcldogimageurl/_meta.json
rename to docs/pages/getcldogimageurl/_meta.json
diff --git a/docs/pages/helpers/getcldogimageurl/basic-usage.mdx b/docs/pages/getcldogimageurl/basic-usage.mdx
similarity index 95%
rename from docs/pages/helpers/getcldogimageurl/basic-usage.mdx
rename to docs/pages/getcldogimageurl/basic-usage.mdx
index 7f5d1fae..cb8b9cdb 100644
--- a/docs/pages/helpers/getcldogimageurl/basic-usage.mdx
+++ b/docs/pages/getcldogimageurl/basic-usage.mdx
@@ -1,10 +1,10 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldImage, getCldImageUrl } from '../../../../next-cloudinary';
+import { CldImage, getCldImageUrl } from '../../../next-cloudinary';
 
-import OgImage from '../../../components/OgImage';
-import Video from '../../../components/Video';
+import OgImage from '../../components/OgImage';
+import Video from '../../components/Video';
 
 <Head>
   <title>getCldOgImageUrl - Next Cloudinary</title>
diff --git a/docs/pages/helpers/getcldogimageurl/configuration.mdx b/docs/pages/getcldogimageurl/configuration.mdx
similarity index 96%
rename from docs/pages/helpers/getcldogimageurl/configuration.mdx
rename to docs/pages/getcldogimageurl/configuration.mdx
index 15269d80..2847313a 100644
--- a/docs/pages/helpers/getcldogimageurl/configuration.mdx
+++ b/docs/pages/getcldogimageurl/configuration.mdx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 
-import OgImage from '../../../components/OgImage';
+import OgImage from '../../components/OgImage';
 
 <Head>
   <title>getCldOgImageUrl Configuration - Next Cloudinary</title>
diff --git a/docs/pages/helpers/getcldogimageurl/examples.mdx b/docs/pages/getcldogimageurl/examples.mdx
similarity index 87%
rename from docs/pages/helpers/getcldogimageurl/examples.mdx
rename to docs/pages/getcldogimageurl/examples.mdx
index a3626198..e46a6cfd 100644
--- a/docs/pages/helpers/getcldogimageurl/examples.mdx
+++ b/docs/pages/getcldogimageurl/examples.mdx
@@ -1,11 +1,11 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import { CldImage, getCldOgImageUrl } from '../../../../next-cloudinary';
-import { OG_IMAGE_WIDTH, OG_IMAGE_HEIGHT } from '../../../../next-cloudinary/src/constants/sizes';
+import { CldImage, getCldOgImageUrl } from '../../../next-cloudinary';
+import { OG_IMAGE_WIDTH, OG_IMAGE_HEIGHT } from '../../../next-cloudinary/src/constants/sizes';
 
-import OgImage from '../../../components/OgImage';
-import ImageGrid from '../../../components/ImageGrid';
+import OgImage from '../../components/OgImage';
+import ImageGrid from '../../components/ImageGrid';
 
 <Head>
   <title>getCldOgImageUrl Examples - Next Cloudinary</title>
diff --git a/docs/pages/guides/_meta.json b/docs/pages/guides/_meta.json
deleted file mode 100644
index 47c1e414..00000000
--- a/docs/pages/guides/_meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "nextjs-13": "Next.js 13",
-  "responsive-images": "Responsive Images"
-}
\ No newline at end of file
diff --git a/docs/pages/helpers/_meta.json b/docs/pages/helpers/_meta.json
deleted file mode 100644
index 7592973d..00000000
--- a/docs/pages/helpers/_meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "getcldimageurl": "getCldImageUrl",
-  "getcldogimageurl": "getCldOgImageUrl"
-}
\ No newline at end of file
diff --git a/docs/pages/use-cases/image-overlays.mdx b/docs/pages/image-overlays.mdx
similarity index 92%
rename from docs/pages/use-cases/image-overlays.mdx
rename to docs/pages/image-overlays.mdx
index 4076373a..171bdc55 100644
--- a/docs/pages/use-cases/image-overlays.mdx
+++ b/docs/pages/image-overlays.mdx
@@ -1,8 +1,8 @@
 import Head from 'next/head';
 
-import OgImage from '../../components/OgImage';
+import OgImage from '../components/OgImage';
 
-import { CldImage } from '../../../next-cloudinary';
+import { CldImage } from '../../next-cloudinary';
 
 <Head>
   <title>Image Overlays - Next Cloudinary</title>
diff --git a/docs/pages/use-cases/image-underlays.mdx b/docs/pages/image-underlays.mdx
similarity index 91%
rename from docs/pages/use-cases/image-underlays.mdx
rename to docs/pages/image-underlays.mdx
index 4215bbef..dff4856f 100644
--- a/docs/pages/use-cases/image-underlays.mdx
+++ b/docs/pages/image-underlays.mdx
@@ -1,8 +1,8 @@
 import Head from 'next/head';
 
-import OgImage from '../../components/OgImage';
+import OgImage from '../components/OgImage';
 
-import { CldImage } from '../../../next-cloudinary';
+import { CldImage } from '../../next-cloudinary';
 
 <Head>
   <title>Image Underlays - Next Cloudinary</title>
diff --git a/docs/pages/guides/nextjs-13.mdx b/docs/pages/nextjs-13.mdx
similarity index 93%
rename from docs/pages/guides/nextjs-13.mdx
rename to docs/pages/nextjs-13.mdx
index 5ee2f0fe..3658abea 100644
--- a/docs/pages/guides/nextjs-13.mdx
+++ b/docs/pages/nextjs-13.mdx
@@ -1,8 +1,8 @@
 import Head from 'next/head';
 
-import OgImage from '../../components/OgImage';
+import OgImage from '../components/OgImage';
 
-import { CldImage } from '../../../next-cloudinary';
+import { CldImage } from '../../next-cloudinary';
 
 <Head>
   <title>Next.js 13 - Next Cloudinary</title>
diff --git a/docs/pages/guides/responsive-images.mdx b/docs/pages/responsive-images.mdx
similarity index 97%
rename from docs/pages/guides/responsive-images.mdx
rename to docs/pages/responsive-images.mdx
index 52d5668e..dedd9f7d 100644
--- a/docs/pages/guides/responsive-images.mdx
+++ b/docs/pages/responsive-images.mdx
@@ -1,8 +1,8 @@
 import Head from 'next/head';
 
-import OgImage from '../../components/OgImage';
+import OgImage from '../components/OgImage';
 
-import { CldImage } from '../../../next-cloudinary';
+import { CldImage } from '../../next-cloudinary';
 
 <Head>
   <title>Responsive Images - Next Cloudinary</title>
diff --git a/docs/pages/use-cases/social-media-card.mdx b/docs/pages/social-media-card.mdx
similarity index 96%
rename from docs/pages/use-cases/social-media-card.mdx
rename to docs/pages/social-media-card.mdx
index 40cb8809..6a80ca10 100644
--- a/docs/pages/use-cases/social-media-card.mdx
+++ b/docs/pages/social-media-card.mdx
@@ -1,9 +1,9 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import OgImage from '../../components/OgImage';
+import OgImage from '../components/OgImage';
 
-import { CldImage, CldOgImage } from '../../../next-cloudinary';
+import { CldImage, CldOgImage } from '../../next-cloudinary';
 
 <Head>
   <title>Social Media Cards - Next Cloudinary</title>
diff --git a/docs/pages/use-cases/text-overlays.mdx b/docs/pages/text-overlays.mdx
similarity index 94%
rename from docs/pages/use-cases/text-overlays.mdx
rename to docs/pages/text-overlays.mdx
index 7dd300a0..2501c6a6 100644
--- a/docs/pages/use-cases/text-overlays.mdx
+++ b/docs/pages/text-overlays.mdx
@@ -1,8 +1,8 @@
 import Head from 'next/head';
 
-import OgImage from '../../components/OgImage';
+import OgImage from '../components/OgImage';
 
-import { CldImage } from '../../../next-cloudinary';
+import { CldImage } from '../../next-cloudinary';
 
 <Head>
   <title>Text Overlays - Next Cloudinary</title>
diff --git a/docs/pages/resources.mdx b/docs/pages/tutorials.mdx
similarity index 83%
rename from docs/pages/resources.mdx
rename to docs/pages/tutorials.mdx
index bd3fdd51..a847a2f9 100644
--- a/docs/pages/resources.mdx
+++ b/docs/pages/tutorials.mdx
@@ -7,17 +7,17 @@ import Video from '../components/Video';
 import { CldImage } from '../../next-cloudinary';
 
 <Head>
-  <title>Resources - Next Cloudinary</title>
-  <meta name="og:title" content="Resources - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/Resources`} />
+  <title>Tutorials - Next Cloudinary</title>
+  <meta name="og:title" content="Tutorials - Next Cloudinary" />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/tutorials`} />
 </Head>
 
 <OgImage
-  title="Resources"
-  twitterTitle="More Resources for Using Next Cloudinary"
+  title="Tutorials"
+  twitterTitle="Tutorials for Using Next Cloudinary"
 />
 
-# Resources
+# Tutorials
 
 ## Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary
 
diff --git a/docs/pages/use-cases/uploading-images-and-videos.mdx b/docs/pages/uploading-images-and-videos.mdx
similarity index 92%
rename from docs/pages/use-cases/uploading-images-and-videos.mdx
rename to docs/pages/uploading-images-and-videos.mdx
index cac7afe9..d36b4802 100644
--- a/docs/pages/use-cases/uploading-images-and-videos.mdx
+++ b/docs/pages/uploading-images-and-videos.mdx
@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import Head from 'next/head';
 
-import OgImage from '../../components/OgImage';
+import OgImage from '../components/OgImage';
 
-import { CldImage, CldUploadButton } from '../../../next-cloudinary';
+import { CldImage, CldUploadButton } from '../../next-cloudinary';
 
-import styles from '../../styles/Docs.module.scss';
+import styles from '../styles/Docs.module.scss';
 
 <Head>
   <title>Background Removal - Next Cloudinary</title>
diff --git a/docs/pages/use-cases/_meta.json b/docs/pages/use-cases/_meta.json
deleted file mode 100644
index 1bc51295..00000000
--- a/docs/pages/use-cases/_meta.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "background-removal": "Background Removal",
-  "image-overlays": "Image Overlays",
-  "image-underlays": "Image Underlays",
-  "social-media-card": "Social Media Card",
-  "text-overlays": "Text Overlays",
-  "uploading-images-and-videos": "Uploading Images & Videos"
-}
\ No newline at end of file
diff --git a/docs/theme.config.js b/docs/theme.config.js
index 2392210a..6935d93f 100644
--- a/docs/theme.config.js
+++ b/docs/theme.config.js
@@ -36,5 +36,8 @@ export default {
       <link rel="manifest" href="/site.webmanifest" />
       <meta name="theme-color" content="#000000" />
     </>
-  )
+  ),
+  sidebar: {
+    defaultMenuCollapseLevel: 1
+  }
 }
\ No newline at end of file

From ef568a791e90ca3d9d012f0a31fc4bc1c146082b Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Thu, 6 Jul 2023 17:19:28 -0400
Subject: [PATCH 02/10] fixing links

---
 README.md                                     | 14 +++++++-------
 docs/pages/background-removal.mdx             |  4 ++--
 docs/pages/cldimage/basic-usage.mdx           | 10 +++++-----
 docs/pages/cldimage/configuration.mdx         |  4 ++--
 docs/pages/cldimage/examples.mdx              |  2 +-
 docs/pages/cldogimage/basic-usage.mdx         | 10 +++++-----
 docs/pages/cldogimage/configuration.mdx       |  4 ++--
 docs/pages/cldogimage/examples.mdx            |  2 +-
 docs/pages/clduploadbutton/basic-usage.mdx    |  8 ++++----
 docs/pages/clduploadbutton/configuration.mdx  |  2 +-
 docs/pages/clduploadbutton/examples.mdx       |  2 +-
 docs/pages/clduploadwidget/basic-usage.mdx    |  6 +++---
 docs/pages/clduploadwidget/configuration.mdx  |  2 +-
 docs/pages/clduploadwidget/examples.mdx       |  2 +-
 docs/pages/cldvideoplayer/basic-usage.mdx     |  6 +++---
 docs/pages/cldvideoplayer/configuration.mdx   |  2 +-
 docs/pages/cldvideoplayer/examples.mdx        |  2 +-
 docs/pages/cldvideoplayer/transformations.mdx |  2 +-
 docs/pages/getcldimageurl/basic-usage.mdx     |  8 ++++----
 docs/pages/getcldimageurl/configuration.mdx   |  4 ++--
 docs/pages/getcldimageurl/examples.mdx        |  2 +-
 docs/pages/getcldogimageurl/basic-usage.mdx   |  8 ++++----
 docs/pages/getcldogimageurl/configuration.mdx |  6 +++---
 docs/pages/getcldogimageurl/examples.mdx      |  2 +-
 docs/pages/image-overlays.mdx                 |  4 ++--
 docs/pages/image-underlays.mdx                |  4 ++--
 docs/pages/installation.mdx                   | 14 +++++++-------
 docs/pages/nextjs-13.mdx                      |  6 +++---
 docs/pages/responsive-images.mdx              |  4 ++--
 docs/pages/social-media-card.mdx              |  4 ++--
 docs/pages/text-overlays.mdx                  |  4 ++--
 docs/pages/tutorials.mdx                      |  4 ++--
 docs/pages/uploading-images-and-videos.mdx    |  6 +++---
 33 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/README.md b/README.md
index 2a03037f..3e5e3fb6 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ import { CldImage } from 'next-cloudinary';
 <CldImage width="600" height="600" src="<Public ID or Cloudinary URL>" alt="<Alt Text>" />
 ```
 
-[Learn more about CldImage on the Next Cloudinary Docs](https://next-cloudinary.spacejelly.dev/components/cldimage/basic-usage)
+[Learn more about CldImage on the Next Cloudinary Docs](https://next-cloudinary.spacejelly.dev/cldimage/basic-usage)
 
 ### Generating an Social Media Card (Open Graph)
 
@@ -68,15 +68,15 @@ import { CldImage } from 'next-cloudinary';
 
 > Note: The width and height is not required (or recommended) to comply with standardized social media card sizing of a 2:1 aspect ratio.
 
-[Learn more about CldOgImage on the Next Cloudinary Docs](https://next-cloudinary.spacejelly.dev/components/cldogimage/basic-usage)
+[Learn more about CldOgImage on the Next Cloudinary Docs](https://next-cloudinary.spacejelly.dev/cldogimage/basic-usage)
 
 ### Other Use Cases
 
-* [Background Removal](https://next-cloudinary.spacejelly.dev/use-cases/background-removal)
-* [Image Overlays](https://next-cloudinary.spacejelly.dev/use-cases/image-overlays)
-* [Image Underlays](https://next-cloudinary.spacejelly.dev/use-cases/image-underlays)
-* [Social Media Card](https://next-cloudinary.spacejelly.dev/use-cases/social-media-card)
-* [Text Overlays](https://next-cloudinary.spacejelly.dev/use-cases/text-overlays)
+* [Background Removal](https://next-cloudinary.spacejelly.dev/background-removal)
+* [Image Overlays](https://next-cloudinary.spacejelly.dev/image-overlays)
+* [Image Underlays](https://next-cloudinary.spacejelly.dev/image-underlays)
+* [Social Media Card](https://next-cloudinary.spacejelly.dev/social-media-card)
+* [Text Overlays](https://next-cloudinary.spacejelly.dev/text-overlays)
 
 ## ❤️ Community & Support
 
diff --git a/docs/pages/background-removal.mdx b/docs/pages/background-removal.mdx
index 26447472..5fe4765c 100644
--- a/docs/pages/background-removal.mdx
+++ b/docs/pages/background-removal.mdx
@@ -7,7 +7,7 @@ import { CldImage } from '../../next-cloudinary';
 <Head>
   <title>Background Removal - Next Cloudinary</title>
   <meta name="og:title" content="Removing a Background from an Image - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/use-cases/background-removal`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/background-removal`} />
 </Head>
 
 <OgImage
@@ -46,4 +46,4 @@ import { CldImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/cldimage/basic-usage.mdx b/docs/pages/cldimage/basic-usage.mdx
index 5c792089..3f4b3c34 100644
--- a/docs/pages/cldimage/basic-usage.mdx
+++ b/docs/pages/cldimage/basic-usage.mdx
@@ -10,7 +10,7 @@ import Video from '../../components/Video';
 <Head>
   <title>CldImage - Next Cloudinary</title>
   <meta name="og:title" content="Getting Started with CldImage - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/cldimage/basic-usage`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/cldimage/basic-usage`} />
 </Head>
 
 <OgImage
@@ -24,7 +24,7 @@ The CldImage component provides an easy way to deliver images from Cloudinary wi
 
 With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations.
 
-As CldImage is a wrapper around the Next.js Image component, you also gain access to all built-in Image component features will work out-of-the-box like [Responsive Sizing](/guides/responsive-images).
+As CldImage is a wrapper around the Next.js Image component, you also gain access to all built-in Image component features will work out-of-the-box like [Responsive Sizing](/responsive-images).
 
 ## Basic Usage
 
@@ -42,7 +42,7 @@ import { CldImage } from 'next-cloudinary';
 />
 ```
 
-The `sizes` prop is optional, but recommended for [Responsive Sizing](/guides/responsive-images).
+The `sizes` prop is optional, but recommended for [Responsive Sizing](/responsive-images).
 
 <Callout emoji={false}>
   Using the Next.js 13 App Router? Add the `use client;` directive at the top of your file.
@@ -116,5 +116,5 @@ To preserve those transformations, you can apply the `preserveTransformations` p
 />
 
 ## Learn More about CldImage
-* [Configuration](/components/cldimage/configuration)
-* [Examples](/components/cldimage/examples)
+* [Configuration](/cldimage/configuration)
+* [Examples](/cldimage/examples)
diff --git a/docs/pages/cldimage/configuration.mdx b/docs/pages/cldimage/configuration.mdx
index 283b4373..5626cd8c 100644
--- a/docs/pages/cldimage/configuration.mdx
+++ b/docs/pages/cldimage/configuration.mdx
@@ -5,7 +5,7 @@ import OgImage from '../../components/OgImage';
 <Head>
   <title>CldImage Configuration - Next Cloudinary</title>
   <meta name="og:title" content="CldImage Configuration - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/cldimage/configuration`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/cldimage/configuration`} />
 </Head>
 
 <OgImage
@@ -15,7 +15,7 @@ import OgImage from '../../components/OgImage';
 
 # CldImage Configuration
 
-Configuration for CldImage is the same as [getCldImageUrl](/helpers/getcldimageurl/configuration), which both use the same underlying API.
+Configuration for CldImage is the same as [getCldImageUrl](/getcldimageurl/configuration), which both use the same underlying API.
 
 ## General Props
 
diff --git a/docs/pages/cldimage/examples.mdx b/docs/pages/cldimage/examples.mdx
index 1c0e10c9..46c5de17 100644
--- a/docs/pages/cldimage/examples.mdx
+++ b/docs/pages/cldimage/examples.mdx
@@ -9,7 +9,7 @@ import ImageGrid from '../../components/ImageGrid';
 <Head>
   <title>CldImage Examples - Next Cloudinary</title>
   <meta name="og:title" content="CldImage Examples - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/cldimage/examples`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/cldimage/examples`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/cldogimage/basic-usage.mdx b/docs/pages/cldogimage/basic-usage.mdx
index 7c502c87..72bc514c 100644
--- a/docs/pages/cldogimage/basic-usage.mdx
+++ b/docs/pages/cldogimage/basic-usage.mdx
@@ -9,7 +9,7 @@ import Video from '../../components/Video';
 <Head>
   <title>CldOgImage - Next Cloudinary</title>
   <meta name="og:title" content="Getting Started with CldOgImage - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/cldogimage/basic-usage`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/cldogimage/basic-usage`} />
 </Head>
 
 <OgImage
@@ -22,7 +22,7 @@ import Video from '../../components/Video';
 The CldOgImageComponent give you the ability to use the same CldImage API to easily generate Open Graph images (or social cards) inside of Next.js.
 
 <Callout emoji={false}>
-  Using the Next.js 13 App Router? This component is only supported in the Pages directory. Try the [getCldOgImageUrl](/helpers/getcldogimageurl/basic-usage) helper inside of your metadata configuration.
+  Using the Next.js 13 App Router? This component is only supported in the Pages directory. Try the [getCldOgImageUrl](/getcldogimageurl/basic-usage) helper inside of your metadata configuration.
 </Callout>
 
 ## Basic Usage
@@ -74,7 +74,7 @@ The resulting HTML will be applied to the Head of the document:
 
 You can further take advantage of Cloudinary features like background removal and overlays by adding additional props.
 
-The CldOgImage component uses the same API as [CldImage](/components/cldimage/configuration), meaning you can use the same transformations and effects.
+The CldOgImage component uses the same API as [CldImage](/cldimage/configuration), meaning you can use the same transformations and effects.
 
 ```jsx
 <CldOgImage
@@ -133,5 +133,5 @@ The CldOgImage component uses the same API as [CldImage](/components/cldimage/co
 />
 
 ## Learn More about CldOgImage
-* [Configuration](/components/cldogimage/configuration)
-* [Examples](/components/cldogimage/examples)
\ No newline at end of file
+* [Configuration](/cldogimage/configuration)
+* [Examples](/cldogimage/examples)
\ No newline at end of file
diff --git a/docs/pages/cldogimage/configuration.mdx b/docs/pages/cldogimage/configuration.mdx
index 74a99c82..f01f3a18 100644
--- a/docs/pages/cldogimage/configuration.mdx
+++ b/docs/pages/cldogimage/configuration.mdx
@@ -6,7 +6,7 @@ import OgImage from '../../components/OgImage';
 <Head>
   <title>CldOgImage Configuration - Next Cloudinary</title>
   <meta name="og:title" content="CldOgImage Configuration - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/cldogimage/configuration`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/cldogimage/configuration`} />
 </Head>
 
 <OgImage
@@ -18,7 +18,7 @@ import OgImage from '../../components/OgImage';
 
 The CldOgImage component is built on top of the same APIs used for CldImage, giving you the ability to apply the same transformations to your social cards as you can any image.
 
-See [CldImage](/components/cldimage/configuration) for all image transformations.
+See [CldImage](/cldimage/configuration) for all image transformations.
 
 ## General Props
 
diff --git a/docs/pages/cldogimage/examples.mdx b/docs/pages/cldogimage/examples.mdx
index 99bf4d9a..43194ad1 100644
--- a/docs/pages/cldogimage/examples.mdx
+++ b/docs/pages/cldogimage/examples.mdx
@@ -10,7 +10,7 @@ import ImageGrid from '../../components/ImageGrid';
 <Head>
   <title>CldOgImage Examples - Next Cloudinary</title>
   <meta name="og:title" content="CldOgImage Examples - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/cldogimage/examples`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/cldogimage/examples`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/clduploadbutton/basic-usage.mdx b/docs/pages/clduploadbutton/basic-usage.mdx
index 2fcc2c31..435770c2 100644
--- a/docs/pages/clduploadbutton/basic-usage.mdx
+++ b/docs/pages/clduploadbutton/basic-usage.mdx
@@ -11,7 +11,7 @@ import styles from '../../styles/Docs.module.scss';
 <Head>
   <title>CldUploadButton - Next Cloudinary</title>
   <meta name="og:title" content="Getting Started with CldUploadButton - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/clduploadbutton/basic-usage`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/clduploadbutton/basic-usage`} />
 </Head>
 
 <OgImage
@@ -23,7 +23,7 @@ import styles from '../../styles/Docs.module.scss';
 
 The CldUploadButton creates a button element that uses an instance of the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget) to give you an easy way to add upload capabilities to your Next.js app.
 
-The CldUploadButton component wraps the [CldUploadWidget](/components/clduploadwidget/basic-usage) component providing a pre-defined UI (a button). The same concepts apply, including having the option of using Signed or Unsigned uploads.
+The CldUploadButton component wraps the [CldUploadWidget](/clduploadwidget/basic-usage) component providing a pre-defined UI (a button). The same concepts apply, including having the option of using Signed or Unsigned uploads.
 
 ## Basic Usage
 
@@ -59,5 +59,5 @@ export const UnsignedUpload = () => {
 </div>
 
 ## Learn More about CldUploadButton
-* [Configuration](/components/clduploadbutton/configuration)
-* [Examples](/components/clduploadbutton/examples)
\ No newline at end of file
+* [Configuration](/clduploadbutton/configuration)
+* [Examples](/clduploadbutton/examples)
\ No newline at end of file
diff --git a/docs/pages/clduploadbutton/configuration.mdx b/docs/pages/clduploadbutton/configuration.mdx
index 9ce7f017..527bef7e 100644
--- a/docs/pages/clduploadbutton/configuration.mdx
+++ b/docs/pages/clduploadbutton/configuration.mdx
@@ -5,7 +5,7 @@ import OgImage from '../../components/OgImage';
 <Head>
   <title>CldUploadButton Configuration - Next Cloudinary</title>
   <meta name="og:title" content="CldUploadButton Configuration - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/clduploadbutton/configuration`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/clduploadbutton/configuration`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/clduploadbutton/examples.mdx b/docs/pages/clduploadbutton/examples.mdx
index 6b8301bd..b8c8fe04 100644
--- a/docs/pages/clduploadbutton/examples.mdx
+++ b/docs/pages/clduploadbutton/examples.mdx
@@ -12,7 +12,7 @@ import styles from '../../styles/Docs.module.scss';
 <Head>
   <title>CldUploadButton Examples - Next Cloudinary</title>
   <meta name="og:title" content="CldUploadButton Examples - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/clduploadbutton/examples`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/clduploadbutton/examples`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/clduploadwidget/basic-usage.mdx b/docs/pages/clduploadwidget/basic-usage.mdx
index fb2f5292..f877d1d4 100644
--- a/docs/pages/clduploadwidget/basic-usage.mdx
+++ b/docs/pages/clduploadwidget/basic-usage.mdx
@@ -11,7 +11,7 @@ import styles from '../../styles/Docs.module.scss';
 <Head>
   <title>CldUploadWidget - Next Cloudinary</title>
   <meta name="og:title" content="Getting Started with CldUploadWidget - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/clduploadwidget/basic-usage`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/clduploadwidget/basic-usage`} />
 </Head>
 
 <OgImage
@@ -181,5 +181,5 @@ export const SignedUpload = () => {
 
 
 ## Learn More about CldUploadWidget
-* [Configuration](/components/clduploadwidget/configuration)
-* [Examples](/components/clduploadwidget/examples)
\ No newline at end of file
+* [Configuration](/clduploadwidget/configuration)
+* [Examples](/clduploadwidget/examples)
\ No newline at end of file
diff --git a/docs/pages/clduploadwidget/configuration.mdx b/docs/pages/clduploadwidget/configuration.mdx
index 4e71c384..13ae1521 100644
--- a/docs/pages/clduploadwidget/configuration.mdx
+++ b/docs/pages/clduploadwidget/configuration.mdx
@@ -5,7 +5,7 @@ import OgImage from '../../components/OgImage';
 <Head>
   <title>CldUploadWidget Configuration - Next Cloudinary</title>
   <meta name="og:title" content="CldUploadWidget Configuration - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/clduploadwidget/configuration`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/clduploadwidget/configuration`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/clduploadwidget/examples.mdx b/docs/pages/clduploadwidget/examples.mdx
index f76e71c9..d8076c57 100644
--- a/docs/pages/clduploadwidget/examples.mdx
+++ b/docs/pages/clduploadwidget/examples.mdx
@@ -12,7 +12,7 @@ import styles from '../../styles/Docs.module.scss';
 <Head>
   <title>CldUploadWidget Examples - Next Cloudinary</title>
   <meta name="og:title" content="CldUploadWidget Examples - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/clduploadwidget/examples`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/clduploadwidget/examples`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/cldvideoplayer/basic-usage.mdx b/docs/pages/cldvideoplayer/basic-usage.mdx
index 9b10ba40..7fe4cf82 100644
--- a/docs/pages/cldvideoplayer/basic-usage.mdx
+++ b/docs/pages/cldvideoplayer/basic-usage.mdx
@@ -8,7 +8,7 @@ import Video from '../../components/Video';
 <Head>
   <title>CldVideoPlayer - Next Cloudinary</title>
   <meta name="og:title" content="Getting Started with CldVideoPlayer - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/CldVideoPlayer/basic-usage`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/CldVideoPlayer/basic-usage`} />
 </Head>
 
 <OgImage
@@ -89,5 +89,5 @@ Or listening to player events for advanced interactions with:
 ```
 
 ## Learn More about CldVideoPlayer
-* [Configuration](/components/cldvideoplayer/configuration)
-* [Examples](/components/cldvideoplayer/examples)
\ No newline at end of file
+* [Configuration](/cldvideoplayer/configuration)
+* [Examples](/cldvideoplayer/examples)
\ No newline at end of file
diff --git a/docs/pages/cldvideoplayer/configuration.mdx b/docs/pages/cldvideoplayer/configuration.mdx
index cefced70..1a520570 100644
--- a/docs/pages/cldvideoplayer/configuration.mdx
+++ b/docs/pages/cldvideoplayer/configuration.mdx
@@ -5,7 +5,7 @@ import OgImage from '../../components/OgImage';
 <Head>
   <title>CldVideoPlayer Configuration - Next Cloudinary</title>
   <meta name="og:title" content="CldVideoPlayer Configuration - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/CldVideoPlayer/configuration`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/CldVideoPlayer/configuration`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/cldvideoplayer/examples.mdx b/docs/pages/cldvideoplayer/examples.mdx
index f65dd83c..8f63e50a 100644
--- a/docs/pages/cldvideoplayer/examples.mdx
+++ b/docs/pages/cldvideoplayer/examples.mdx
@@ -25,7 +25,7 @@ export const VideoPlayerWithRef = (props) => {
 <Head>
   <title>CldVideoPlayer Examples - Next Cloudinary</title>
   <meta name="og:title" content="CldVideoPlayer Examples - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/CldVideoPlayer/examples`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/CldVideoPlayer/examples`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/cldvideoplayer/transformations.mdx b/docs/pages/cldvideoplayer/transformations.mdx
index 563563bf..ca1501ed 100644
--- a/docs/pages/cldvideoplayer/transformations.mdx
+++ b/docs/pages/cldvideoplayer/transformations.mdx
@@ -8,7 +8,7 @@ import OgImage from '../../components/OgImage';
 <Head>
   <title>CldVideoPlayer Transformations - Next Cloudinary</title>
   <meta name="og:title" content="CldVideoPlayer Transformations - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/components/cldvideoplayer/transformations`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/cldvideoplayer/transformations`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/getcldimageurl/basic-usage.mdx b/docs/pages/getcldimageurl/basic-usage.mdx
index c7300f26..6a049457 100644
--- a/docs/pages/getcldimageurl/basic-usage.mdx
+++ b/docs/pages/getcldimageurl/basic-usage.mdx
@@ -9,7 +9,7 @@ import Video from '../../components/Video';
 <Head>
   <title>getCldImageUrl - Next Cloudinary</title>
   <meta name="og:title" content="Getting Started with getCldImageUrl - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/helpers/getcldimageurl/basic-usage`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/getcldimageurl/basic-usage`} />
 </Head>
 
 <OgImage
@@ -49,7 +49,7 @@ const url = getCldImageUrl({
 />
 
 <Callout emoji={false}>
-  getCldImageUrl uses the same API as [CldImage](/components/cldimage/basic-usage). They're both wrappers around [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader) which provide a simpler way to generate images and Cloudinary URLs.
+  getCldImageUrl uses the same API as [CldImage](/cldimage/basic-usage). They're both wrappers around [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader) which provide a simpler way to generate images and Cloudinary URLs.
 </Callout>
 
 ## Transformations
@@ -84,5 +84,5 @@ const url = getCldImageUrl({
 />
 
 ## Learn More about getCldImageUrl
-* [Configuration](/helpers/getcldimageurl/configuration)
-* [Examples](/helpers/getcldimageurl/examples)
\ No newline at end of file
+* [Configuration](/getcldimageurl/configuration)
+* [Examples](/getcldimageurl/examples)
\ No newline at end of file
diff --git a/docs/pages/getcldimageurl/configuration.mdx b/docs/pages/getcldimageurl/configuration.mdx
index bc88f8c3..133533f6 100644
--- a/docs/pages/getcldimageurl/configuration.mdx
+++ b/docs/pages/getcldimageurl/configuration.mdx
@@ -5,7 +5,7 @@ import OgImage from '../../components/OgImage';
 <Head>
   <title>getCldImageUrl Configuration - Next Cloudinary</title>
   <meta name="og:title" content="getCldImageUrl Configuration - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/helpers/getcldimageurl/configuration`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/getcldimageurl/configuration`} />
 </Head>
 
 <OgImage
@@ -15,7 +15,7 @@ import OgImage from '../../components/OgImage';
 
 # getCldImageUrl Configuration
 
-Configuration for getCldImageUrl is the same as [CldImage](/components/cldimage/configuration), which both use the same underlying API [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader).
+Configuration for getCldImageUrl is the same as [CldImage](/cldimage/configuration), which both use the same underlying API [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader).
 
 ## General Options
 
diff --git a/docs/pages/getcldimageurl/examples.mdx b/docs/pages/getcldimageurl/examples.mdx
index 2f4ed9a8..f0c2cd61 100644
--- a/docs/pages/getcldimageurl/examples.mdx
+++ b/docs/pages/getcldimageurl/examples.mdx
@@ -9,7 +9,7 @@ import ImageGrid from '../../components/ImageGrid';
 <Head>
   <title>getCldImageUrl Examples - Next Cloudinary</title>
   <meta name="og:title" content="getCldImageUrl Examples - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/helpers/getcldimageurl/examples`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/getcldimageurl/examples`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/getcldogimageurl/basic-usage.mdx b/docs/pages/getcldogimageurl/basic-usage.mdx
index cb8b9cdb..493ec7d8 100644
--- a/docs/pages/getcldogimageurl/basic-usage.mdx
+++ b/docs/pages/getcldogimageurl/basic-usage.mdx
@@ -9,7 +9,7 @@ import Video from '../../components/Video';
 <Head>
   <title>getCldOgImageUrl - Next Cloudinary</title>
   <meta name="og:title" content="Getting Started with getCldOgImageUrl - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/helpers/getcldogimageurl/basic-usage`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/getcldogimageurl/basic-usage`} />
 </Head>
 
 <OgImage
@@ -84,8 +84,8 @@ const twitterImageUrl = getCldImageUrl({
 });
 ```
 
-Find out how else you can customize your Cloudinary image over on [getCldImageUrl configuration](/helpers/getcldimageurl/configuration).
+Find out how else you can customize your Cloudinary image over on [getCldImageUrl configuration](/getcldimageurl/configuration).
 
 ## Learn More about getCldOgImageUrl
-* [Configuration](/helpers/getcldogimageurl/configuration)
-* [Examples](/helpers/getcldogimageurl/examples)
\ No newline at end of file
+* [Configuration](/getcldogimageurl/configuration)
+* [Examples](/getcldogimageurl/examples)
\ No newline at end of file
diff --git a/docs/pages/getcldogimageurl/configuration.mdx b/docs/pages/getcldogimageurl/configuration.mdx
index 2847313a..09ee1d6c 100644
--- a/docs/pages/getcldogimageurl/configuration.mdx
+++ b/docs/pages/getcldogimageurl/configuration.mdx
@@ -5,7 +5,7 @@ import OgImage from '../../components/OgImage';
 <Head>
   <title>getCldOgImageUrl Configuration - Next Cloudinary</title>
   <meta name="og:title" content="getCldOgImageUrl Configuration - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/helpers/getcldogimageurl/configuration`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/getcldogimageurl/configuration`} />
 </Head>
 
 <OgImage
@@ -15,7 +15,7 @@ import OgImage from '../../components/OgImage';
 
 # getCldOgImageUrl Configuration
 
-Configuration for getCldOgImageUrl is the same as [getCldImageUrl](/helpers/getcldimageurl/configuration).
+Configuration for getCldOgImageUrl is the same as [getCldImageUrl](/getcldimageurl/configuration).
 
 The only difference is getCldOgImageUrl provides the following default settings to make generating an OG image URL simpler:
 
@@ -28,4 +28,4 @@ The only difference is getCldOgImageUrl provides the following default settings
 | height             | number             | `1254`     | `1254`                       |
 | width              | number             | `2400`     | `2400`                       |
 
-Find more configuration settings over at [getCldImageUrl configuration](/helpers/getcldimageurl/configuration).
\ No newline at end of file
+Find more configuration settings over at [getCldImageUrl configuration](/getcldimageurl/configuration).
\ No newline at end of file
diff --git a/docs/pages/getcldogimageurl/examples.mdx b/docs/pages/getcldogimageurl/examples.mdx
index e46a6cfd..53373be7 100644
--- a/docs/pages/getcldogimageurl/examples.mdx
+++ b/docs/pages/getcldogimageurl/examples.mdx
@@ -10,7 +10,7 @@ import ImageGrid from '../../components/ImageGrid';
 <Head>
   <title>getCldOgImageUrl Examples - Next Cloudinary</title>
   <meta name="og:title" content="getCldOgImageUrl Examples - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/helpers/getcldogimageurl/examples`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/getcldogimageurl/examples`} />
 </Head>
 
 <OgImage
diff --git a/docs/pages/image-overlays.mdx b/docs/pages/image-overlays.mdx
index 171bdc55..8a8d88aa 100644
--- a/docs/pages/image-overlays.mdx
+++ b/docs/pages/image-overlays.mdx
@@ -7,7 +7,7 @@ import { CldImage } from '../../next-cloudinary';
 <Head>
   <title>Image Overlays - Next Cloudinary</title>
   <meta name="og:title" content="Overlaying Images - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/use-cases/image-overlays`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/image-overlays`} />
 </Head>
 
 <OgImage
@@ -74,4 +74,4 @@ import { CldImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/image-underlays.mdx b/docs/pages/image-underlays.mdx
index dff4856f..f6e425b1 100644
--- a/docs/pages/image-underlays.mdx
+++ b/docs/pages/image-underlays.mdx
@@ -7,7 +7,7 @@ import { CldImage } from '../../next-cloudinary';
 <Head>
   <title>Image Underlays - Next Cloudinary</title>
   <meta name="og:title" content="Adding Layers Under Images - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/use-cases/image-underlays`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/image-underlays`} />
 </Head>
 
 <OgImage
@@ -48,4 +48,4 @@ import { CldImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/installation.mdx b/docs/pages/installation.mdx
index d6701e62..c737433f 100644
--- a/docs/pages/installation.mdx
+++ b/docs/pages/installation.mdx
@@ -62,13 +62,13 @@ Don't have a Cloudinary account? <a href="https://cloudinary.com/users/register_
 
 Learn how to add one of the Next Cloudinary components:
 
-* [CldImage](/components/cldimage/basic-usage)
-* [CldOgImage](/components/cldogimage/basic-usage)
-* [CldUploadButton](/components/clduploadbutton/basic-usage)
-* [CldUploadWidget](/components/clduploadwidget/basic-usage)
-* [CldVideoPlayer](/components/cldvideoplayer/basic-usage)
+* [CldImage](/cldimage/basic-usage)
+* [CldOgImage](/cldogimage/basic-usage)
+* [CldUploadButton](/clduploadbutton/basic-usage)
+* [CldUploadWidget](/clduploadwidget/basic-usage)
+* [CldVideoPlayer](/cldvideoplayer/basic-usage)
 
 Or use the helper methods to generate URLs:
 
-* [getCldImageUrl](/helpers/getcldimageurl/basic-usage)
-* [getCldOgImageUrl](/helpers/getcldogimageurl/basic-usage)
\ No newline at end of file
+* [getCldImageUrl](/getcldimageurl/basic-usage)
+* [getCldOgImageUrl](/getcldogimageurl/basic-usage)
\ No newline at end of file
diff --git a/docs/pages/nextjs-13.mdx b/docs/pages/nextjs-13.mdx
index 3658abea..21a86507 100644
--- a/docs/pages/nextjs-13.mdx
+++ b/docs/pages/nextjs-13.mdx
@@ -7,7 +7,7 @@ import { CldImage } from '../../next-cloudinary';
 <Head>
   <title>Next.js 13 - Next Cloudinary</title>
   <meta name="og:title" content="Using Next Cloudinary with Next.js 13" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/guides/responsive-images`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/responsive-images`} />
 </Head>
 
 <OgImage
@@ -37,9 +37,9 @@ use client;
 
 ### OG Images
 
-The Head component is not supported in the Next.js App directory, meaning, the [CldOgImage](/components/cldogimage/basic-usage) component will not function.
+The Head component is not supported in the Next.js App directory, meaning, the [CldOgImage](/cldogimage/basic-usage) component will not function.
 
-Instead, you can easily generate OG image URLs using [getCldOgImageUrl](/helpers/getcldogimageurl/basic-usage) in your metadata configuration:
+Instead, you can easily generate OG image URLs using [getCldOgImageUrl](/getcldogimageurl/basic-usage) in your metadata configuration:
 
 
 ```
diff --git a/docs/pages/responsive-images.mdx b/docs/pages/responsive-images.mdx
index dedd9f7d..ac854f32 100644
--- a/docs/pages/responsive-images.mdx
+++ b/docs/pages/responsive-images.mdx
@@ -7,7 +7,7 @@ import { CldImage } from '../../next-cloudinary';
 <Head>
   <title>Responsive Images - Next Cloudinary</title>
   <meta name="og:title" content="How Responsive Images Work in Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/guides/responsive-images`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/responsive-images`} />
 </Head>
 
 <OgImage
@@ -17,7 +17,7 @@ import { CldImage } from '../../next-cloudinary';
 
 # Responsive Images
 
-The [CldImage](/components/cldimage/basic-usage) component takes advantage of responsive images generated using the [Next Image component](https://nextjs.org/docs/api-reference/next/image).
+The [CldImage](/cldimage/basic-usage) component takes advantage of responsive images generated using the [Next Image component](https://nextjs.org/docs/api-reference/next/image).
 
 Using the `sizes` prop, you can configure exactly the sizes you need for your application, such as a similar example to the Next.js docs:
 
diff --git a/docs/pages/social-media-card.mdx b/docs/pages/social-media-card.mdx
index 6a80ca10..19550a14 100644
--- a/docs/pages/social-media-card.mdx
+++ b/docs/pages/social-media-card.mdx
@@ -8,7 +8,7 @@ import { CldImage, CldOgImage } from '../../next-cloudinary';
 <Head>
   <title>Social Media Cards - Next Cloudinary</title>
   <meta name="og:title" content="Generating Social Media Cards - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/use-cases/social-media-cards`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/social-media-cards`} />
 </Head>
 
 <OgImage
@@ -143,4 +143,4 @@ import { CldOgImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldOgImage Configuration](/components/cldogimage/configuration)
\ No newline at end of file
+* [CldOgImage Configuration](/cldogimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/text-overlays.mdx b/docs/pages/text-overlays.mdx
index 2501c6a6..30356206 100644
--- a/docs/pages/text-overlays.mdx
+++ b/docs/pages/text-overlays.mdx
@@ -7,7 +7,7 @@ import { CldImage } from '../../next-cloudinary';
 <Head>
   <title>Text Overlays - Next Cloudinary</title>
   <meta name="og:title" content="Adding Text to an Image - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/use-cases/text-overlays`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/text-overlays`} />
 </Head>
 
 <OgImage
@@ -81,4 +81,4 @@ import { CldImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/tutorials.mdx b/docs/pages/tutorials.mdx
index a847a2f9..39309627 100644
--- a/docs/pages/tutorials.mdx
+++ b/docs/pages/tutorials.mdx
@@ -26,7 +26,7 @@ import { CldImage } from '../../next-cloudinary';
   url="https://www.youtube.com/watch?v=82gACPNBkaM"
 />
 
-Follow along with [Colby Fayock](https://twitter.com/colbyfayock) as he walkts through using the [CldImage](/components/cldimage/basic-usage) with Next Cloudinary.
+Follow along with [Colby Fayock](https://twitter.com/colbyfayock) as he walkts through using the [CldImage](/cldimage/basic-usage) with Next Cloudinary.
 
 ## Getting Started with Next Cloudinary
 
@@ -35,4 +35,4 @@ Follow along with [Colby Fayock](https://twitter.com/colbyfayock) as he walkts t
   url="https://www.youtube.com/watch?v=vQ2MeJgJ1-8"
 />
 
-Follow along with [Jason Lengstorf](https://twitter.com/jlengstorf) and [Colby Fayock](https://twitter.com/colbyfayock) as they get started using the [CldImage](/components/cldimage/basic-usage) with Next Cloudinary.
\ No newline at end of file
+Follow along with [Jason Lengstorf](https://twitter.com/jlengstorf) and [Colby Fayock](https://twitter.com/colbyfayock) as they get started using the [CldImage](/cldimage/basic-usage) with Next Cloudinary.
\ No newline at end of file
diff --git a/docs/pages/uploading-images-and-videos.mdx b/docs/pages/uploading-images-and-videos.mdx
index d36b4802..d6fb0174 100644
--- a/docs/pages/uploading-images-and-videos.mdx
+++ b/docs/pages/uploading-images-and-videos.mdx
@@ -10,7 +10,7 @@ import styles from '../styles/Docs.module.scss';
 <Head>
   <title>Background Removal - Next Cloudinary</title>
   <meta name="og:title" content="Removing a Background from an Image - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/use-cases/background-removal`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/background-removal`} />
 </Head>
 
 <OgImage
@@ -20,7 +20,7 @@ import styles from '../styles/Docs.module.scss';
 
 # Uploading Images & Videos
 
-Use the [CldUploadButton](/components/clduploadbutton/basic-usage) or [CldUploadWidget](/components/clduploadwidget/basic-usage) components to add upload capabilities to your app.
+Use the [CldUploadButton](/clduploadbutton/basic-usage) or [CldUploadWidget](/clduploadwidget/basic-usage) components to add upload capabilities to your app.
 
 The components utilize the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget), built for Next.js.
 
@@ -73,4 +73,4 @@ import { CldUploadButton } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file

From 165e65e20844b0ff716bf67bd2359c146fc37663 Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Thu, 6 Jul 2023 21:53:34 -0400
Subject: [PATCH 03/10] re-adding guides as a nested directory, structure, link
 fixes

---
 docs/next.config.js                           | 24 +++++++++
 docs/package.json                             |  2 +-
 docs/pages/_meta.json                         | 13 +----
 docs/pages/cldimage/basic-usage.mdx           |  8 +--
 docs/pages/cldogimage/basic-usage.mdx         |  6 +--
 docs/pages/cldogimage/configuration.mdx       |  8 +--
 docs/pages/clduploadbutton/basic-usage.mdx    |  6 +--
 docs/pages/clduploadwidget/basic-usage.mdx    |  4 +-
 docs/pages/cldvideoplayer/basic-usage.mdx     |  4 +-
 docs/pages/getcldimageurl/basic-usage.mdx     |  2 +-
 docs/pages/getcldimageurl/configuration.mdx   |  2 +-
 docs/pages/guides/_meta.json                  | 10 ++++
 .../pages/{ => guides}/background-removal.mdx | 15 +++---
 docs/pages/guides/image-optimization.mdx      | 54 +++++++++++++++++++
 docs/pages/{ => guides}/image-overlays.mdx    |  8 +--
 docs/pages/{ => guides}/image-underlays.mdx   |  8 +--
 docs/pages/{ => guides}/responsive-images.mdx |  8 +--
 docs/pages/{ => guides}/social-media-card.mdx |  8 +--
 docs/pages/{ => guides}/text-overlays.mdx     |  8 +--
 .../uploading-images-and-videos.mdx           | 12 ++---
 docs/pages/installation.mdx                   | 10 ++--
 docs/pages/nextjs-13.mdx                      |  2 +-
 docs/pages/tutorials.mdx                      | 38 -------------
 23 files changed, 149 insertions(+), 111 deletions(-)
 create mode 100644 docs/pages/guides/_meta.json
 rename docs/pages/{ => guides}/background-removal.mdx (54%)
 create mode 100644 docs/pages/guides/image-optimization.mdx
 rename docs/pages/{ => guides}/image-overlays.mdx (86%)
 rename docs/pages/{ => guides}/image-underlays.mdx (83%)
 rename docs/pages/{ => guides}/responsive-images.mdx (92%)
 rename docs/pages/{ => guides}/social-media-card.mdx (92%)
 rename docs/pages/{ => guides}/text-overlays.mdx (88%)
 rename docs/pages/{ => guides}/uploading-images-and-videos.mdx (80%)
 delete mode 100644 docs/pages/tutorials.mdx

diff --git a/docs/next.config.js b/docs/next.config.js
index d9db0147..3a96153b 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -8,5 +8,29 @@ module.exports = withNextra({
     ASSETS_DIRECTORY: process.env.NEXT_PUBLIC_CLOUDINARY_ASSETS_DIRECTORY || 'assets',
     IMAGES_DIRECTORY: process.env.NEXT_PUBLIC_CLOUDINARY_IMAGES_DIRECTORY || 'images',
     VIDEOS_DIRECTORY: process.env.NEXT_PUBLIC_CLOUDINARY_VIDEOS_DIRECTORY || 'videos'
+  },
+  async redirects() {
+    return [
+      {
+        source: '/components/:path(.*)',
+        destination: '/:path*',
+        permanent: false,
+      },
+      {
+        source: '/helpers/:path(.*)',
+        destination: '/:path*',
+        permanent: false,
+      },
+      {
+        source: '/use-cases/:path(.*)',
+        destination: '/guides/:path*',
+        permanent: false,
+      },
+      {
+        source: '/resources',
+        destination: '/',
+        permanent: false,
+      },
+    ];
   }
 });
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index 6defd6e7..94351b88 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -12,7 +12,7 @@
     "@vercel/analytics": "^1.0.1",
     "cloudinary": "^1.36.4",
     "next": "^13.4.1",
-    "nextra": "^2.5.0",
+    "nextra": "^2.8.0",
     "nextra-theme-docs": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
index 668c0f30..f028e03d 100644
--- a/docs/pages/_meta.json
+++ b/docs/pages/_meta.json
@@ -17,20 +17,9 @@
   },
   "getcldimageurl": "getCldImageUrl",
   "getcldogimageurl": "getCldOgImageUrl",
-  "Guides": {
-    "type": "separator",
-    "title": "Guides"
-  },
-  "background-removal": "Background Removal",
-  "image-overlays": "Image Overlays",
-  "image-underlays": "Image Underlays",
-  "responsive-images": "Responsive Images",
-  "social-media-card": "Social Media Card",
-  "text-overlays": "Text Overlays",
-  "uploading-images-and-videos": "Uploading Images & Videos",
   "Resources": {
     "type": "separator",
     "title": "Resources"
   },
-  "tutorials": "Tutorials"
+  "guides": "Guides"
 }
\ No newline at end of file
diff --git a/docs/pages/cldimage/basic-usage.mdx b/docs/pages/cldimage/basic-usage.mdx
index 3f4b3c34..93190ef6 100644
--- a/docs/pages/cldimage/basic-usage.mdx
+++ b/docs/pages/cldimage/basic-usage.mdx
@@ -24,7 +24,7 @@ The CldImage component provides an easy way to deliver images from Cloudinary wi
 
 With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations.
 
-As CldImage is a wrapper around the Next.js Image component, you also gain access to all built-in Image component features will work out-of-the-box like [Responsive Sizing](/responsive-images).
+As CldImage is a wrapper around the Next.js Image component, you also gain access to all built-in Image component features will work out-of-the-box like [Responsive Sizing](/guides/responsive-images).
 
 ## Basic Usage
 
@@ -42,7 +42,7 @@ import { CldImage } from 'next-cloudinary';
 />
 ```
 
-The `sizes` prop is optional, but recommended for [Responsive Sizing](/responsive-images).
+The `sizes` prop is optional, but recommended for [Responsive Sizing](/guides/responsive-images).
 
 <Callout emoji={false}>
   Using the Next.js 13 App Router? Add the `use client;` directive at the top of your file.
@@ -116,5 +116,5 @@ To preserve those transformations, you can apply the `preserveTransformations` p
 />
 
 ## Learn More about CldImage
-* [Configuration](/cldimage/configuration)
-* [Examples](/cldimage/examples)
+* [Configuration](/components/cldimage/configuration)
+* [Examples](/components/cldimage/examples)
diff --git a/docs/pages/cldogimage/basic-usage.mdx b/docs/pages/cldogimage/basic-usage.mdx
index 72bc514c..98f8bddf 100644
--- a/docs/pages/cldogimage/basic-usage.mdx
+++ b/docs/pages/cldogimage/basic-usage.mdx
@@ -74,7 +74,7 @@ The resulting HTML will be applied to the Head of the document:
 
 You can further take advantage of Cloudinary features like background removal and overlays by adding additional props.
 
-The CldOgImage component uses the same API as [CldImage](/cldimage/configuration), meaning you can use the same transformations and effects.
+The CldOgImage component uses the same API as [CldImage](/components/cldimage/configuration), meaning you can use the same transformations and effects.
 
 ```jsx
 <CldOgImage
@@ -133,5 +133,5 @@ The CldOgImage component uses the same API as [CldImage](/cldimage/configuration
 />
 
 ## Learn More about CldOgImage
-* [Configuration](/cldogimage/configuration)
-* [Examples](/cldogimage/examples)
\ No newline at end of file
+* [Configuration](/components/cldogimage/configuration)
+* [Examples](/components/cldogimage/examples)
\ No newline at end of file
diff --git a/docs/pages/cldogimage/configuration.mdx b/docs/pages/cldogimage/configuration.mdx
index f01f3a18..4992a204 100644
--- a/docs/pages/cldogimage/configuration.mdx
+++ b/docs/pages/cldogimage/configuration.mdx
@@ -18,7 +18,7 @@ import OgImage from '../../components/OgImage';
 
 The CldOgImage component is built on top of the same APIs used for CldImage, giving you the ability to apply the same transformations to your social cards as you can any image.
 
-See [CldImage](/cldimage/configuration) for all image transformations.
+See [CldImage](/components/cldimage/configuration) for all image transformations.
 
 ## General Props
 
@@ -53,11 +53,7 @@ However, Twitter does support webp, so we're able to customize the format using
 
 ## Excluding Tags
 
-The `summary_large_image` Twitter card type requires the inclusion of a `twitter:title` card. Because of this, the component includes it by default for simplified use along with a prop to change the value.
-
-<Callout emoji={false}>
-  [Learn more about summary_large_image](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image)
-</Callout>
+The [Summary Card with Large Image](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image) (`summary_large_image`) Twitter card type requires the inclusion of a `twitter:title` card. Because of this, the component includes it by default for simplified use along with a prop to change the value.
 
 To exclude this tag to manage it on your own, use the `excludeTags` prop:
 
diff --git a/docs/pages/clduploadbutton/basic-usage.mdx b/docs/pages/clduploadbutton/basic-usage.mdx
index 435770c2..c2d7bece 100644
--- a/docs/pages/clduploadbutton/basic-usage.mdx
+++ b/docs/pages/clduploadbutton/basic-usage.mdx
@@ -23,7 +23,7 @@ import styles from '../../styles/Docs.module.scss';
 
 The CldUploadButton creates a button element that uses an instance of the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget) to give you an easy way to add upload capabilities to your Next.js app.
 
-The CldUploadButton component wraps the [CldUploadWidget](/clduploadwidget/basic-usage) component providing a pre-defined UI (a button). The same concepts apply, including having the option of using Signed or Unsigned uploads.
+The CldUploadButton component wraps the [CldUploadWidget](/components/clduploadwidget/basic-usage) component providing a pre-defined UI (a button). The same concepts apply, including having the option of using Signed or Unsigned uploads.
 
 ## Basic Usage
 
@@ -59,5 +59,5 @@ export const UnsignedUpload = () => {
 </div>
 
 ## Learn More about CldUploadButton
-* [Configuration](/clduploadbutton/configuration)
-* [Examples](/clduploadbutton/examples)
\ No newline at end of file
+* [Configuration](/components/clduploadbutton/configuration)
+* [Examples](/components/clduploadbutton/examples)
\ No newline at end of file
diff --git a/docs/pages/clduploadwidget/basic-usage.mdx b/docs/pages/clduploadwidget/basic-usage.mdx
index f877d1d4..07ee9ef8 100644
--- a/docs/pages/clduploadwidget/basic-usage.mdx
+++ b/docs/pages/clduploadwidget/basic-usage.mdx
@@ -181,5 +181,5 @@ export const SignedUpload = () => {
 
 
 ## Learn More about CldUploadWidget
-* [Configuration](/clduploadwidget/configuration)
-* [Examples](/clduploadwidget/examples)
\ No newline at end of file
+* [Configuration](/components/clduploadwidget/configuration)
+* [Examples](/components/clduploadwidget/examples)
\ No newline at end of file
diff --git a/docs/pages/cldvideoplayer/basic-usage.mdx b/docs/pages/cldvideoplayer/basic-usage.mdx
index 7fe4cf82..04bd39da 100644
--- a/docs/pages/cldvideoplayer/basic-usage.mdx
+++ b/docs/pages/cldvideoplayer/basic-usage.mdx
@@ -89,5 +89,5 @@ Or listening to player events for advanced interactions with:
 ```
 
 ## Learn More about CldVideoPlayer
-* [Configuration](/cldvideoplayer/configuration)
-* [Examples](/cldvideoplayer/examples)
\ No newline at end of file
+* [Configuration](/components/cldvideoplayer/configuration)
+* [Examples](/components/cldvideoplayer/examples)
\ No newline at end of file
diff --git a/docs/pages/getcldimageurl/basic-usage.mdx b/docs/pages/getcldimageurl/basic-usage.mdx
index 6a049457..2bbdd4b3 100644
--- a/docs/pages/getcldimageurl/basic-usage.mdx
+++ b/docs/pages/getcldimageurl/basic-usage.mdx
@@ -49,7 +49,7 @@ const url = getCldImageUrl({
 />
 
 <Callout emoji={false}>
-  getCldImageUrl uses the same API as [CldImage](/cldimage/basic-usage). They're both wrappers around [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader) which provide a simpler way to generate images and Cloudinary URLs.
+  getCldImageUrl uses the same API as [CldImage](/components/cldimage/basic-usage). They're both wrappers around [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader) which provide a simpler way to generate images and Cloudinary URLs.
 </Callout>
 
 ## Transformations
diff --git a/docs/pages/getcldimageurl/configuration.mdx b/docs/pages/getcldimageurl/configuration.mdx
index 133533f6..f7557f7b 100644
--- a/docs/pages/getcldimageurl/configuration.mdx
+++ b/docs/pages/getcldimageurl/configuration.mdx
@@ -15,7 +15,7 @@ import OgImage from '../../components/OgImage';
 
 # getCldImageUrl Configuration
 
-Configuration for getCldImageUrl is the same as [CldImage](/cldimage/configuration), which both use the same underlying API [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader).
+Configuration for getCldImageUrl is the same as [CldImage](/components/cldimage/configuration), which both use the same underlying API [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader).
 
 ## General Options
 
diff --git a/docs/pages/guides/_meta.json b/docs/pages/guides/_meta.json
new file mode 100644
index 00000000..787fd9c6
--- /dev/null
+++ b/docs/pages/guides/_meta.json
@@ -0,0 +1,10 @@
+{
+  "background-removal": "Background Removal",
+  "image-optimization": "Image Optimization",
+  "image-overlays": "Image Overlays",
+  "image-underlays": "Image Underlays",
+  "responsive-images": "Responsive Images",
+  "social-media-card": "Social Media Card",
+  "text-overlays": "Text Overlays",
+  "uploading-images-and-videos": "Uploading Images & Videos"
+}
\ No newline at end of file
diff --git a/docs/pages/background-removal.mdx b/docs/pages/guides/background-removal.mdx
similarity index 54%
rename from docs/pages/background-removal.mdx
rename to docs/pages/guides/background-removal.mdx
index 5fe4765c..3721289a 100644
--- a/docs/pages/background-removal.mdx
+++ b/docs/pages/guides/background-removal.mdx
@@ -1,13 +1,14 @@
 import Head from 'next/head';
+import { Callout } from 'nextra-theme-docs';
 
-import OgImage from '../components/OgImage';
+import OgImage from '../../components/OgImage';
 
-import { CldImage } from '../../next-cloudinary';
+import { CldImage } from '../../../next-cloudinary';
 
 <Head>
   <title>Background Removal - Next Cloudinary</title>
   <meta name="og:title" content="Removing a Background from an Image - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/background-removal`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/guides/background-removal`} />
 </Head>
 
 <OgImage
@@ -17,9 +18,11 @@ import { CldImage } from '../../next-cloudinary';
 
 # Removing a Background from an Image
 
-Removing backgrounds require enabling the [Cloudinary AI Background Removal Add-On](https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon) which includes a free tier for getting started.
+The CldImage component allows you to easily remove backgrounds from images using the `removeBackground` prop.
 
-Once enabled, you can simply apply the `removeBackground` parameter.
+<Callout emoji={false}>
+  Removing backgrounds require enabling the [Cloudinary AI Background Removal Add-On](https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon) which includes a free tier for getting started.
+</Callout>
 
 ## Example
 
@@ -46,4 +49,4 @@ import { CldImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/guides/image-optimization.mdx b/docs/pages/guides/image-optimization.mdx
new file mode 100644
index 00000000..b441b018
--- /dev/null
+++ b/docs/pages/guides/image-optimization.mdx
@@ -0,0 +1,54 @@
+import Head from 'next/head';
+import { Callout } from 'nextra-theme-docs';
+
+import OgImage from '../../components/OgImage';
+import Video from '../../components/Video';
+
+import { CldImage } from '../../../next-cloudinary';
+
+<Head>
+  <title>Image Optimization - Next Cloudinary</title>
+  <meta name="og:title" content="Image Optimization - Next Cloudinary" />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/guides/image-overlays`} />
+</Head>
+
+<OgImage
+  title="Image Optimization"
+  twitterTitle="Optimizing Images in Next.js"
+/>
+
+# Optimizing Images in Next.js
+
+Automatically optimize images using the CldImage component. By default, CldImage opts you in to automatic optimization including delivering the most optimal format for the browser (WebP, AVIF).
+
+You can further optimize delivery by using [responsive sizing](/guides/responsive-images) by using the `sizes` prop.
+
+<Video
+  title="Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary"
+  url="https://www.youtube.com/watch?v=82gACPNBkaM"
+/>
+
+## Example
+
+<CldImage
+  width="960"
+  height="600"
+  src={`${process.env.IMAGES_DIRECTORY}/turtle`}
+  sizes="100vw"
+  alt="Turtle"
+/>
+
+```jsx
+import { CldImage } from 'next-cloudinary';
+
+<CldImage
+  width="960"
+  height="600"
+  src="images/turtle"
+  sizes="100vw"
+  alt="Turtle"
+/>
+```
+
+## Learn More
+* [Responsive Images](/guides/responsive-images)
\ No newline at end of file
diff --git a/docs/pages/image-overlays.mdx b/docs/pages/guides/image-overlays.mdx
similarity index 86%
rename from docs/pages/image-overlays.mdx
rename to docs/pages/guides/image-overlays.mdx
index 8a8d88aa..0c526cdd 100644
--- a/docs/pages/image-overlays.mdx
+++ b/docs/pages/guides/image-overlays.mdx
@@ -1,13 +1,13 @@
 import Head from 'next/head';
 
-import OgImage from '../components/OgImage';
+import OgImage from '../../components/OgImage';
 
-import { CldImage } from '../../next-cloudinary';
+import { CldImage } from '../../../next-cloudinary';
 
 <Head>
   <title>Image Overlays - Next Cloudinary</title>
   <meta name="og:title" content="Overlaying Images - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/image-overlays`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/guides/image-overlays`} />
 </Head>
 
 <OgImage
@@ -74,4 +74,4 @@ import { CldImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/image-underlays.mdx b/docs/pages/guides/image-underlays.mdx
similarity index 83%
rename from docs/pages/image-underlays.mdx
rename to docs/pages/guides/image-underlays.mdx
index f6e425b1..d89aff8e 100644
--- a/docs/pages/image-underlays.mdx
+++ b/docs/pages/guides/image-underlays.mdx
@@ -1,13 +1,13 @@
 import Head from 'next/head';
 
-import OgImage from '../components/OgImage';
+import OgImage from '../../components/OgImage';
 
-import { CldImage } from '../../next-cloudinary';
+import { CldImage } from '../../../next-cloudinary';
 
 <Head>
   <title>Image Underlays - Next Cloudinary</title>
   <meta name="og:title" content="Adding Layers Under Images - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/image-underlays`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/guides/image-underlays`} />
 </Head>
 
 <OgImage
@@ -48,4 +48,4 @@ import { CldImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/responsive-images.mdx b/docs/pages/guides/responsive-images.mdx
similarity index 92%
rename from docs/pages/responsive-images.mdx
rename to docs/pages/guides/responsive-images.mdx
index ac854f32..52d5668e 100644
--- a/docs/pages/responsive-images.mdx
+++ b/docs/pages/guides/responsive-images.mdx
@@ -1,13 +1,13 @@
 import Head from 'next/head';
 
-import OgImage from '../components/OgImage';
+import OgImage from '../../components/OgImage';
 
-import { CldImage } from '../../next-cloudinary';
+import { CldImage } from '../../../next-cloudinary';
 
 <Head>
   <title>Responsive Images - Next Cloudinary</title>
   <meta name="og:title" content="How Responsive Images Work in Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/responsive-images`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/guides/responsive-images`} />
 </Head>
 
 <OgImage
@@ -17,7 +17,7 @@ import { CldImage } from '../../next-cloudinary';
 
 # Responsive Images
 
-The [CldImage](/cldimage/basic-usage) component takes advantage of responsive images generated using the [Next Image component](https://nextjs.org/docs/api-reference/next/image).
+The [CldImage](/components/cldimage/basic-usage) component takes advantage of responsive images generated using the [Next Image component](https://nextjs.org/docs/api-reference/next/image).
 
 Using the `sizes` prop, you can configure exactly the sizes you need for your application, such as a similar example to the Next.js docs:
 
diff --git a/docs/pages/social-media-card.mdx b/docs/pages/guides/social-media-card.mdx
similarity index 92%
rename from docs/pages/social-media-card.mdx
rename to docs/pages/guides/social-media-card.mdx
index 19550a14..40cb8809 100644
--- a/docs/pages/social-media-card.mdx
+++ b/docs/pages/guides/social-media-card.mdx
@@ -1,14 +1,14 @@
 import Head from 'next/head';
 import { Callout } from 'nextra-theme-docs';
 
-import OgImage from '../components/OgImage';
+import OgImage from '../../components/OgImage';
 
-import { CldImage, CldOgImage } from '../../next-cloudinary';
+import { CldImage, CldOgImage } from '../../../next-cloudinary';
 
 <Head>
   <title>Social Media Cards - Next Cloudinary</title>
   <meta name="og:title" content="Generating Social Media Cards - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/social-media-cards`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/use-cases/social-media-cards`} />
 </Head>
 
 <OgImage
@@ -143,4 +143,4 @@ import { CldOgImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldOgImage Configuration](/cldogimage/configuration)
\ No newline at end of file
+* [CldOgImage Configuration](/components/cldogimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/text-overlays.mdx b/docs/pages/guides/text-overlays.mdx
similarity index 88%
rename from docs/pages/text-overlays.mdx
rename to docs/pages/guides/text-overlays.mdx
index 30356206..7654b2b8 100644
--- a/docs/pages/text-overlays.mdx
+++ b/docs/pages/guides/text-overlays.mdx
@@ -1,13 +1,13 @@
 import Head from 'next/head';
 
-import OgImage from '../components/OgImage';
+import OgImage from '../../components/OgImage';
 
-import { CldImage } from '../../next-cloudinary';
+import { CldImage } from '../../../next-cloudinary';
 
 <Head>
   <title>Text Overlays - Next Cloudinary</title>
   <meta name="og:title" content="Adding Text to an Image - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/text-overlays`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/guides/text-overlays`} />
 </Head>
 
 <OgImage
@@ -81,4 +81,4 @@ import { CldImage } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/uploading-images-and-videos.mdx b/docs/pages/guides/uploading-images-and-videos.mdx
similarity index 80%
rename from docs/pages/uploading-images-and-videos.mdx
rename to docs/pages/guides/uploading-images-and-videos.mdx
index d6fb0174..7452a6e3 100644
--- a/docs/pages/uploading-images-and-videos.mdx
+++ b/docs/pages/guides/uploading-images-and-videos.mdx
@@ -1,16 +1,16 @@
 import { useState } from 'react';
 import Head from 'next/head';
 
-import OgImage from '../components/OgImage';
+import OgImage from '../../components/OgImage';
 
-import { CldImage, CldUploadButton } from '../../next-cloudinary';
+import { CldImage, CldUploadButton } from '../../../next-cloudinary';
 
-import styles from '../styles/Docs.module.scss';
+import styles from '../../styles/Docs.module.scss';
 
 <Head>
   <title>Background Removal - Next Cloudinary</title>
   <meta name="og:title" content="Removing a Background from an Image - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/background-removal`} />
+  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/guides/background-removal`} />
 </Head>
 
 <OgImage
@@ -20,7 +20,7 @@ import styles from '../styles/Docs.module.scss';
 
 # Uploading Images & Videos
 
-Use the [CldUploadButton](/clduploadbutton/basic-usage) or [CldUploadWidget](/clduploadwidget/basic-usage) components to add upload capabilities to your app.
+Use the [CldUploadButton](/components/clduploadbutton/basic-usage) or [CldUploadWidget](/components/clduploadwidget/basic-usage) components to add upload capabilities to your app.
 
 The components utilize the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget), built for Next.js.
 
@@ -73,4 +73,4 @@ import { CldUploadButton } from 'next-cloudinary';
 ```
 
 ## Learn More
-* [CldImage Configuration](/cldimage/configuration)
\ No newline at end of file
+* [CldImage Configuration](/components/cldimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/installation.mdx b/docs/pages/installation.mdx
index c737433f..f685cf15 100644
--- a/docs/pages/installation.mdx
+++ b/docs/pages/installation.mdx
@@ -62,11 +62,11 @@ Don't have a Cloudinary account? <a href="https://cloudinary.com/users/register_
 
 Learn how to add one of the Next Cloudinary components:
 
-* [CldImage](/cldimage/basic-usage)
-* [CldOgImage](/cldogimage/basic-usage)
-* [CldUploadButton](/clduploadbutton/basic-usage)
-* [CldUploadWidget](/clduploadwidget/basic-usage)
-* [CldVideoPlayer](/cldvideoplayer/basic-usage)
+* [CldImage](/components/cldimage/basic-usage)
+* [CldOgImage](/components/cldogimage/basic-usage)
+* [CldUploadButton](/components/clduploadbutton/basic-usage)
+* [CldUploadWidget](/components/clduploadwidget/basic-usage)
+* [CldVideoPlayer](/components/cldvideoplayer/basic-usage)
 
 Or use the helper methods to generate URLs:
 
diff --git a/docs/pages/nextjs-13.mdx b/docs/pages/nextjs-13.mdx
index 21a86507..71bd4e97 100644
--- a/docs/pages/nextjs-13.mdx
+++ b/docs/pages/nextjs-13.mdx
@@ -37,7 +37,7 @@ use client;
 
 ### OG Images
 
-The Head component is not supported in the Next.js App directory, meaning, the [CldOgImage](/cldogimage/basic-usage) component will not function.
+The Head component is not supported in the Next.js App directory, meaning, the [CldOgImage](/components/cldogimage/basic-usage) component will not function.
 
 Instead, you can easily generate OG image URLs using [getCldOgImageUrl](/getcldogimageurl/basic-usage) in your metadata configuration:
 
diff --git a/docs/pages/tutorials.mdx b/docs/pages/tutorials.mdx
deleted file mode 100644
index 39309627..00000000
--- a/docs/pages/tutorials.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Head from 'next/head';
-import { Callout } from 'nextra-theme-docs';
-
-import OgImage from '../components/OgImage';
-import Video from '../components/Video';
-
-import { CldImage } from '../../next-cloudinary';
-
-<Head>
-  <title>Tutorials - Next Cloudinary</title>
-  <meta name="og:title" content="Tutorials - Next Cloudinary" />
-  <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev/tutorials`} />
-</Head>
-
-<OgImage
-  title="Tutorials"
-  twitterTitle="Tutorials for Using Next Cloudinary"
-/>
-
-# Tutorials
-
-## Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary
-
-<Video
-  title="Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary"
-  url="https://www.youtube.com/watch?v=82gACPNBkaM"
-/>
-
-Follow along with [Colby Fayock](https://twitter.com/colbyfayock) as he walkts through using the [CldImage](/cldimage/basic-usage) with Next Cloudinary.
-
-## Getting Started with Next Cloudinary
-
-<Video
-  title="Next Cloudinary on Learn with Jason"
-  url="https://www.youtube.com/watch?v=vQ2MeJgJ1-8"
-/>
-
-Follow along with [Jason Lengstorf](https://twitter.com/jlengstorf) and [Colby Fayock](https://twitter.com/colbyfayock) as they get started using the [CldImage](/cldimage/basic-usage) with Next Cloudinary.
\ No newline at end of file

From 5919849f664d3e8303c4472bb7aaf8ee5230b36e Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Thu, 6 Jul 2023 21:53:46 -0400
Subject: [PATCH 04/10] yarn lock

---
 yarn.lock | 480 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 462 insertions(+), 18 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 2783faf7..73535b46 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -938,6 +938,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@braintree/sanitize-url@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz#6110f918d273fe2af8ea1c4398a88774bb9fc12f"
+  integrity sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==
+
 "@cloudinary-util/url-loader@^3.8.1":
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-3.8.1.tgz#c819e6c305293333ba4bb5b72b640d1f386d821b"
@@ -1539,6 +1544,14 @@
   dependencies:
     tslib "^2.4.0"
 
+"@theguild/remark-mermaid@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@theguild/remark-mermaid/-/remark-mermaid-0.0.3.tgz#247e8e84aacf483d2f99d8d12ccd34f3cf7ce543"
+  integrity sha512-fccVR6o4UPUztrBjdUhM4ahwx+X7YHhoxsUoXv2vI07vz4dq+I03Ot0SjuZzDA/H7engxcb8ZxzCUEkZgGr/2g==
+  dependencies:
+    mermaid "^10.2.2"
+    unist-util-visit "^4.1.2"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -2244,6 +2257,11 @@ comma-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
   integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
 
+commander@7:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -2291,6 +2309,20 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
+cose-base@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/cose-base/-/cose-base-1.0.3.tgz#650334b41b869578a543358b80cda7e0abe0a60a"
+  integrity sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==
+  dependencies:
+    layout-base "^1.0.0"
+
+cose-base@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cose-base/-/cose-base-2.2.0.tgz#1c395c35b6e10bb83f9769ca8b817d614add5c01"
+  integrity sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==
+  dependencies:
+    layout-base "^2.0.0"
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2331,6 +2363,280 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+cytoscape-cose-bilkent@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz#762fa121df9930ffeb51a495d87917c570ac209b"
+  integrity sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==
+  dependencies:
+    cose-base "^1.0.0"
+
+cytoscape-fcose@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz#e4d6f6490df4fab58ae9cea9e5c3ab8d7472f471"
+  integrity sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==
+  dependencies:
+    cose-base "^2.2.0"
+
+cytoscape@^3.23.0:
+  version "3.25.0"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.25.0.tgz#5289e9d18be0293b073bfe93f83bb95b908b2dc1"
+  integrity sha512-7MW3Iz57mCUo6JQCho6CmPBCbTlJr7LzyEtIkutG255HLVd4XuBg2I9BkTZLI/e4HoaOB/BiAzXuQybQ95+r9Q==
+  dependencies:
+    heap "^0.2.6"
+    lodash "^4.17.21"
+
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+d3-axis@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322"
+  integrity sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==
+
+d3-brush@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-3.0.0.tgz#6f767c4ed8dcb79de7ede3e1c0f89e63ef64d31c"
+  integrity sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "3"
+    d3-transition "3"
+
+d3-chord@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-3.0.1.tgz#d156d61f485fce8327e6abf339cb41d8cbba6966"
+  integrity sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==
+  dependencies:
+    d3-path "1 - 3"
+
+"d3-color@1 - 3", d3-color@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-contour@4:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-4.0.2.tgz#bb92063bc8c5663acb2422f99c73cbb6c6ae3bcc"
+  integrity sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==
+  dependencies:
+    d3-array "^3.2.0"
+
+d3-delaunay@6:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz#98169038733a0a5babbeda55054f795bb9e4a58b"
+  integrity sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==
+  dependencies:
+    delaunator "5"
+
+"d3-dispatch@1 - 3", d3-dispatch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+"d3-drag@2 - 3", d3-drag@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-selection "3"
+
+"d3-dsv@1 - 3", d3-dsv@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-3.0.1.tgz#c63af978f4d6a0d084a52a673922be2160789b73"
+  integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==
+  dependencies:
+    commander "7"
+    iconv-lite "0.6"
+    rw "1"
+
+"d3-ease@1 - 3", d3-ease@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+d3-fetch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-3.0.1.tgz#83141bff9856a0edb5e38de89cdcfe63d0a60a22"
+  integrity sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==
+  dependencies:
+    d3-dsv "1 - 3"
+
+d3-force@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-3.0.0.tgz#3e2ba1a61e70888fe3d9194e30d6d14eece155c4"
+  integrity sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-quadtree "1 - 3"
+    d3-timer "1 - 3"
+
+"d3-format@1 - 3", d3-format@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
+d3-geo@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.1.0.tgz#74fd54e1f4cebd5185ac2039217a98d39b0a4c0e"
+  integrity sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
+d3-hierarchy@3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b01cd42c1eed3d46db77a5966cf726f8c09160c6"
+  integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
+
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+"d3-path@1 - 3", d3-path@3, d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-polygon@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-3.0.1.tgz#0b45d3dd1c48a29c8e057e6135693ec80bf16398"
+  integrity sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==
+
+"d3-quadtree@1 - 3", d3-quadtree@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz#6dca3e8be2b393c9a9d514dabbd80a92deef1a4f"
+  integrity sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==
+
+d3-random@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
+  integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
+
+d3-scale-chromatic@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#15b4ceb8ca2bb0dcb6d1a641ee03d59c3b62376a"
+  integrity sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==
+  dependencies:
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
+
+d3-scale@4:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+"d3-selection@2 - 3", d3-selection@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
+d3-shape@3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4", d3-time-format@4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+"d3-timer@1 - 3", d3-timer@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+"d3-transition@2 - 3", d3-transition@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
+  dependencies:
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
+
+d3-zoom@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
+d3@^7.4.0, d3@^7.8.2:
+  version "7.8.5"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-7.8.5.tgz#fde4b760d4486cdb6f0cc8e2cbff318af844635c"
+  integrity sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==
+  dependencies:
+    d3-array "3"
+    d3-axis "3"
+    d3-brush "3"
+    d3-chord "3"
+    d3-color "3"
+    d3-contour "4"
+    d3-delaunay "6"
+    d3-dispatch "3"
+    d3-drag "3"
+    d3-dsv "3"
+    d3-ease "3"
+    d3-fetch "3"
+    d3-force "3"
+    d3-format "3"
+    d3-geo "3"
+    d3-hierarchy "3"
+    d3-interpolate "3"
+    d3-path "3"
+    d3-polygon "3"
+    d3-quadtree "3"
+    d3-random "3"
+    d3-scale "4"
+    d3-scale-chromatic "3"
+    d3-selection "3"
+    d3-shape "3"
+    d3-time "3"
+    d3-time-format "4"
+    d3-timer "3"
+    d3-transition "3"
+    d3-zoom "3"
+
+dagre-d3-es@7.0.10:
+  version "7.0.10"
+  resolved "https://registry.yarnpkg.com/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz#19800d4be674379a3cd8c86a8216a2ac6827cadc"
+  integrity sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==
+  dependencies:
+    d3 "^7.8.2"
+    lodash-es "^4.17.21"
+
 data-uri-to-buffer@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
@@ -2345,6 +2651,11 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+dayjs@^1.11.7:
+  version "1.11.9"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a"
+  integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==
+
 debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -2389,6 +2700,13 @@ degenerator@^3.0.2:
     esprima "^4.0.0"
     vm2 "^3.9.17"
 
+delaunator@5:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.0.tgz#60f052b28bd91c9b4566850ebf7756efe821d81b"
+  integrity sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==
+  dependencies:
+    robust-predicates "^3.0.0"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -2433,6 +2751,11 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+dompurify@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.3.tgz#4b115d15a091ddc96f232bcef668550a2f6f1430"
+  integrity sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==
+
 dotenv@^16.0.3:
   version "16.0.3"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
@@ -2443,6 +2766,11 @@ electron-to-chromium@^1.4.284:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.385.tgz#1afd8d6280d510145148777b899ff481c65531ff"
   integrity sha512-L9zlje9bIw0h+CwPQumiuVlfMcV4boxRjFIWDcLfFqTZNbkwOExBzfmswytHawObQX4OUhtNv8gIiB21kOurIg==
 
+elkjs@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.8.2.tgz#c37763c5a3e24e042e318455e0147c912a7c248e"
+  integrity sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==
+
 emittery@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
@@ -2876,7 +3204,7 @@ globby@^11.0.3:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.9:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -3026,6 +3354,11 @@ hastscript@^7.0.0:
     property-information "^6.0.0"
     space-separated-tokens "^2.0.0"
 
+heap@^0.2.6:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
+  integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
+
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -3087,7 +3420,7 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@0.6.3:
+iconv-lite@0.6, iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -3135,6 +3468,11 @@ inline-style-parser@0.1.1:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
 intersection-observer@^0.12.2:
   version "0.12.2"
   resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375"
@@ -3789,13 +4127,25 @@ jsonfile@^4.0.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-katex@^0.16.0, katex@^0.16.4:
+katex@^0.16.0:
   version "0.16.7"
   resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.7.tgz#36be1d4ed96e8afdc5863407e70f8fb250aeafd5"
   integrity sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==
   dependencies:
     commander "^8.3.0"
 
+katex@^0.16.7:
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.8.tgz#89b453f40e8557f423f31a1009e9298dd99d5ceb"
+  integrity sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==
+  dependencies:
+    commander "^8.3.0"
+
+khroma@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.0.0.tgz#7577de98aed9f36c7a474c4d453d94c0d6c6588b"
+  integrity sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==
+
 kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
@@ -3811,6 +4161,16 @@ kleur@^4.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
+layout-base@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-1.0.2.tgz#1291e296883c322a9dd4c5dd82063721b53e26e2"
+  integrity sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==
+
+layout-base@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-2.0.1.tgz#d0337913586c90f9c2c075292069f5c2da5dd285"
+  integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -3846,6 +4206,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -3866,7 +4231,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
-lodash@4.17.21:
+lodash@4.17.21, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -3979,6 +4344,24 @@ mdast-util-from-markdown@^1.0.0, mdast-util-from-markdown@^1.1.0:
     unist-util-stringify-position "^3.0.0"
     uvu "^0.5.0"
 
+mdast-util-from-markdown@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz#9421a5a247f10d31d2faed2a30df5ec89ceafcf0"
+  integrity sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    micromark "^3.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-decode-string "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-stringify-position "^3.0.0"
+    uvu "^0.5.0"
+
 mdast-util-gfm-autolink-literal@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.3.tgz#67a13abe813d7eba350453a5333ae1bc0ec05c06"
@@ -4150,6 +4533,29 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+mermaid@^10.2.2:
+  version "10.2.4"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.2.4.tgz#3358adc61346ce51858b1b5b1078c20411efabdc"
+  integrity sha512-zHGjEI7lBvWZX+PQYmlhSA2p40OzW6QbGodTCSzDeVpqaTnyAC+2sRGqrpXO+uQk3CnoeClHQPraQUMStdqy2g==
+  dependencies:
+    "@braintree/sanitize-url" "^6.0.2"
+    cytoscape "^3.23.0"
+    cytoscape-cose-bilkent "^4.1.0"
+    cytoscape-fcose "^2.1.0"
+    d3 "^7.4.0"
+    dagre-d3-es "7.0.10"
+    dayjs "^1.11.7"
+    dompurify "3.0.3"
+    elkjs "^0.8.2"
+    khroma "^2.0.0"
+    lodash-es "^4.17.21"
+    mdast-util-from-markdown "^1.3.0"
+    non-layered-tidy-tree-layout "^2.0.2"
+    stylis "^4.1.3"
+    ts-dedent "^2.2.0"
+    uuid "^9.0.0"
+    web-worker "^1.2.0"
+
 micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz#edff4c72e5993d93724a3c206970f5a15b0585ad"
@@ -4654,23 +5060,25 @@ nextra-theme-docs@^2.5.0:
     scroll-into-view-if-needed "^3.0.0"
     zod "^3.20.2"
 
-nextra@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/nextra/-/nextra-2.5.0.tgz#0b9ca9a70e4a26390ed5aab7b5f3f3ae290aba51"
-  integrity sha512-YvknuUvV2fdFY3F3gsxNFA2lwDWg3KHEAiyumUxZKOnW8+yTwocXGFccD76Py9fYxcmUL9ARo+PEusnXlWmLeQ==
+nextra@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nextra/-/nextra-2.8.0.tgz#1471cf96b21e354e47310090ff53f2bdc9e674c7"
+  integrity sha512-WyRNzw1IM/eF3M1H3LSsbZH97QsYYgj8upjx0f8hY6GspmPyPRAvBBscmXRt+7vye2oIYjfVwSiD1rj9amqq9Q==
   dependencies:
     "@mdx-js/mdx" "^2.3.0"
     "@mdx-js/react" "^2.3.0"
     "@napi-rs/simple-git" "^0.1.8"
+    "@theguild/remark-mermaid" "^0.0.3"
+    clsx "^1.2.1"
     github-slugger "^2.0.0"
-    graceful-fs "^4.2.10"
+    graceful-fs "^4.2.11"
     gray-matter "^4.0.3"
-    katex "^0.16.4"
+    katex "^0.16.7"
     lodash.get "^4.4.2"
     next-mdx-remote "^4.2.1"
     p-limit "^3.1.0"
-    rehype-katex "^6.0.2"
-    rehype-pretty-code "0.9.4"
+    rehype-katex "^6.0.3"
+    rehype-pretty-code "0.9.9"
     remark-gfm "^3.0.1"
     remark-math "^5.1.1"
     remark-reading-time "^2.0.1"
@@ -4691,6 +5099,11 @@ node-releases@^2.0.8:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
   integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
 
+non-layered-tidy-tree-layout@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz#57d35d13c356643fc296a55fb11ac15e74da7804"
+  integrity sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -5115,7 +5528,7 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
-rehype-katex@^6.0.2:
+rehype-katex@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/rehype-katex/-/rehype-katex-6.0.3.tgz#83e5b929b0967978e9491c02117f55be3594d7e1"
   integrity sha512-ByZlRwRUcWegNbF70CVRm2h/7xy7jQ3R9LaY4VVSvjnoVWwWVhNL60DiZsBpC5tSzYQOCvDbzncIpIjPZWodZA==
@@ -5127,11 +5540,12 @@ rehype-katex@^6.0.2:
     katex "^0.16.0"
     unist-util-visit "^4.0.0"
 
-rehype-pretty-code@0.9.4:
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/rehype-pretty-code/-/rehype-pretty-code-0.9.4.tgz#ab214026b530890c7a2e14c4f0881483e39e9cbc"
-  integrity sha512-3m4aQT15n8C+UizcZL0enaahoZwCDm5K1qKQ3DGgHE7U8l/DEEEJ/hm+uDe9yyK4sxVOSfZcRIMHrpJwLQi+Rg==
+rehype-pretty-code@0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/rehype-pretty-code/-/rehype-pretty-code-0.9.9.tgz#b3123ae6bcbff4957a4bbf923dd2478debd1585b"
+  integrity sha512-mlU2Qgupn9MMK31CTmWk0Ie5Vp0od+jh2vCkGDBMlPAMeAvYASn6Ois6xRmosutMT4yH/COc3R4r/PELpuUoWg==
   dependencies:
+    "@types/hast" "^2.0.0"
     hash-obj "^4.0.0"
     parse-numeric-range "^1.3.0"
 
@@ -5238,6 +5652,11 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+robust-predicates@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
+  integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
+
 rollup@^3.2.5:
   version "3.21.5"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.21.5.tgz#1fbae43dc1079497b04604707f1cf979e51bfe49"
@@ -5252,6 +5671,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
+
 sade@^1.7.3:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
@@ -5530,6 +5954,11 @@ styled-jsx@5.1.1:
   dependencies:
     client-only "0.0.1"
 
+stylis@^4.1.3:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
+  integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
+
 sucrase@^3.20.3:
   version "3.32.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"
@@ -5680,6 +6109,11 @@ trough@^2.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-2.1.0.tgz#0f7b511a4fde65a46f18477ab38849b22c554876"
   integrity sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==
 
+ts-dedent@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
+  integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
+
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
@@ -5870,7 +6304,7 @@ unist-util-visit@^3.1.0:
     unist-util-is "^5.0.0"
     unist-util-visit-parents "^4.0.0"
 
-unist-util-visit@^4.0.0, unist-util-visit@^4.1.1:
+unist-util-visit@^4.0.0, unist-util-visit@^4.1.1, unist-util-visit@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
   integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==
@@ -5910,6 +6344,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 uvu@^0.5.0:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
@@ -6001,6 +6440,11 @@ web-namespaces@^2.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
   integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
 
+web-worker@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/web-worker/-/web-worker-1.2.0.tgz#5d85a04a7fbc1e7db58f66595d7a3ac7c9c180da"
+  integrity sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"

From 58f2f1718ffc017a4f1b75767296bcb4a005375d Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Thu, 6 Jul 2023 22:10:17 -0400
Subject: [PATCH 05/10] social cards, video player video

---
 docs/pages/cldvideoplayer/basic-usage.mdx |   7 +
 docs/pages/guides/social-media-card.mdx   | 175 +++++++++++++++-------
 docs/pages/nextjs-13.mdx                  |  19 ++-
 3 files changed, 138 insertions(+), 63 deletions(-)

diff --git a/docs/pages/cldvideoplayer/basic-usage.mdx b/docs/pages/cldvideoplayer/basic-usage.mdx
index 04bd39da..532f767e 100644
--- a/docs/pages/cldvideoplayer/basic-usage.mdx
+++ b/docs/pages/cldvideoplayer/basic-usage.mdx
@@ -88,6 +88,13 @@ Or listening to player events for advanced interactions with:
 />
 ```
 
+## Watch & Learn
+
+<Video
+  title="Embedding a Video Player in Next.js with Next Cloudinary"
+  url="https://www.youtube.com/watch?v=Et7TTfwvBFo"
+/>
+
 ## Learn More about CldVideoPlayer
 * [Configuration](/components/cldvideoplayer/configuration)
 * [Examples](/components/cldvideoplayer/examples)
\ No newline at end of file
diff --git a/docs/pages/guides/social-media-card.mdx b/docs/pages/guides/social-media-card.mdx
index 40cb8809..2f508f77 100644
--- a/docs/pages/guides/social-media-card.mdx
+++ b/docs/pages/guides/social-media-card.mdx
@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import { Callout } from 'nextra-theme-docs';
+import { Callout, Tab, Tabs } from 'nextra-theme-docs';
 
 import OgImage from '../../components/OgImage';
 
@@ -83,64 +83,127 @@ import { CldImage, CldOgImage } from '../../../next-cloudinary';
   alt="Next Cloudinary with picture of a mountain"
 />
 
-```jsx
-import { CldOgImage } from 'next-cloudinary';
 
-<CldOgImage
-  src="images/white"
-  overlays={[
-    {
-      publicId: 'images/mountain',
-      position: {
-        x: 0,
-        y: 0,
-        gravity: 'north_east',
-      },
-      effects: [
+<Tabs items={['Pages', 'App']}>
+  <Tab>
+    ```jsx
+    import { CldOgImage } from 'next-cloudinary';
+
+    <CldOgImage
+      src="images/white"
+      overlays={[
         {
-          crop: 'fill',
-          gravity: 'auto',
-          width: 800,
-          height: 1200
-        }
+          publicId: 'images/mountain',
+          position: {
+            x: 0,
+            y: 0,
+            gravity: 'north_east',
+          },
+          effects: [
+            {
+              crop: 'fill',
+              gravity: 'auto',
+              width: 800,
+              height: 1200
+            }
+          ]
+        },
+        {
+          width: 1400,
+          crop: 'fit',
+          text: {
+            color: 'black',
+            fontFamily: 'Source Sans Pro',
+            fontSize: 160,
+            fontWeight: 'bold',
+            text: 'Next Cloudinary'
+          },
+          position: {
+            x: 100,
+            y: -100,
+            gravity: 'west',
+          },
+        },
+        {
+          width: 1400,
+          crop: 'fit',
+          text: {
+            color: 'black',
+            fontFamily: 'Source Sans Pro',
+            fontSize: 80,
+            text: 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!'
+          },
+          position: {
+            x: 100,
+            y: 100,
+            gravity: 'west',
+          },
+        },
+      ]}
+      twitterTitle="Next Cloudinary"
+      alt="Next Cloudinary with picture of a mountain"
+    />
+    ```
+  </Tab>
+  <Tab>
+    ```jsx
+    import { getCldOgImageUrl } from 'next-cloudinary';
+
+    getCldOgImageUrl({
+      src: 'images/white',
+      overlays: [
+        {
+          publicId: 'images/mountain',
+          position: {
+            x: 0,
+            y: 0,
+            gravity: 'north_east',
+          },
+          effects: [
+            {
+              crop: 'fill',
+              gravity: 'auto',
+              width: 800,
+              height: 1200
+            }
+          ]
+        },
+        {
+          width: 1400,
+          crop: 'fit',
+          text: {
+            color: 'black',
+            fontFamily: 'Source Sans Pro',
+            fontSize: 160,
+            fontWeight: 'bold',
+            text: 'Next Cloudinary'
+          },
+          position: {
+            x: 100,
+            y: -100,
+            gravity: 'west',
+          },
+        },
+        {
+          width: 1400,
+          crop: 'fit',
+          text: {
+            color: 'black',
+            fontFamily: 'Source Sans Pro',
+            fontSize: 80,
+            text: 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!'
+          },
+          position: {
+            x: 100,
+            y: 100,
+            gravity: 'west',
+          },
+        },
       ]
-    },
-    {
-      width: 1400,
-      crop: 'fit',
-      text: {
-        color: 'black',
-        fontFamily: 'Source Sans Pro',
-        fontSize: 160,
-        fontWeight: 'bold',
-        text: 'Next Cloudinary'
-      },
-      position: {
-        x: 100,
-        y: -100,
-        gravity: 'west',
-      },
-    },
-    {
-      width: 1400,
-      crop: 'fit',
-      text: {
-        color: 'black',
-        fontFamily: 'Source Sans Pro',
-        fontSize: 80,
-        text: 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!'
-      },
-      position: {
-        x: 100,
-        y: 100,
-        gravity: 'west',
-      },
-    },
-  ]}
-  twitterTitle="Next Cloudinary"
-  alt="Next Cloudinary with picture of a mountain"
-/>
-```
+    });
+    ```
+  </Tab>
+</Tabs>
 
 ## Learn More
 * [CldOgImage Configuration](/components/cldogimage/configuration)
\ No newline at end of file
diff --git a/docs/pages/nextjs-13.mdx b/docs/pages/nextjs-13.mdx
index 71bd4e97..eba3dcf1 100644
--- a/docs/pages/nextjs-13.mdx
+++ b/docs/pages/nextjs-13.mdx
@@ -17,7 +17,7 @@ import { CldImage } from '../../next-cloudinary';
 
 # Next.js 13
 
-Next.js 13 brings a new fundamental way of building Next.js apps with the `app` directory. Part of that includes using React.js technology such as server components that have different requirements when bundling applications.
+Next.js 13 brings a new fundamental way of building Next.js apps with the App Router (`/app` directory). Part of that includes using React.js technology such as server components that have different requirements when bundling applications.
 
 ## Pages Router (/src)
 
@@ -29,20 +29,23 @@ By default, Next Cloudinary has full support when using the included components
 
 Using Next Cloudinary in the `app` directory currently requires marking the parent page or component as a Client Component.
 
-At the top of the file, add:
+At the top of the file, simply add:
 
 ```
-use client;
+"use client;"
 ```
 
-### OG Images
+### Open Graph (OG) Images
 
-The Head component is not supported in the Next.js App directory, meaning, the [CldOgImage](/components/cldogimage/basic-usage) component will not function.
+The CldOgImage component utilizes the Next.js Head component to add metadata tags to the HTML document's `<head>`.
 
-Instead, you can easily generate OG image URLs using [getCldOgImageUrl](/getcldogimageurl/basic-usage) in your metadata configuration:
+In the App Router, the Head component is no longer supported, instead opting for [configuration-based control of metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata).
 
+You can still easily generate OG images and social card URLs using [getCldOgImageUrl](/getcldogimageurl/basic-usage) in your metadata configuration.
 
 ```
+import { getCldOgImageUrl } from 'next-cloudinary';
+
 export const metadata = {
   openGraph: {
     ...
@@ -51,4 +54,6 @@ export const metadata = {
     })
   },
 };
-```
\ No newline at end of file
+```
+
+Find more examples of [Social Media Cards](/guides/social-media-card).
\ No newline at end of file

From 9a64ca0470b6070e2b821421be863bdad5d4e725 Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Thu, 6 Jul 2023 22:14:29 -0400
Subject: [PATCH 06/10] moving video

---
 docs/pages/guides/image-optimization.mdx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/pages/guides/image-optimization.mdx b/docs/pages/guides/image-optimization.mdx
index b441b018..85fb89ea 100644
--- a/docs/pages/guides/image-optimization.mdx
+++ b/docs/pages/guides/image-optimization.mdx
@@ -23,11 +23,6 @@ Automatically optimize images using the CldImage component. By default, CldImage
 
 You can further optimize delivery by using [responsive sizing](/guides/responsive-images) by using the `sizes` prop.
 
-<Video
-  title="Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary"
-  url="https://www.youtube.com/watch?v=82gACPNBkaM"
-/>
-
 ## Example
 
 <CldImage
@@ -50,5 +45,12 @@ import { CldImage } from 'next-cloudinary';
 />
 ```
 
+## Watch & Learn
+
+<Video
+  title="Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary"
+  url="https://www.youtube.com/watch?v=82gACPNBkaM"
+/>
+
 ## Learn More
 * [Responsive Images](/guides/responsive-images)
\ No newline at end of file

From 628ee3c00dcf94d74907702f9610312fb508790b Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Fri, 7 Jul 2023 11:53:04 -0400
Subject: [PATCH 07/10] working on adding visual editor for component
 playground

---
 docs/components/VisualEditor/VideoEditor.js   | 53 +++++++++++++++++++
 .../VisualEditor/VisualEditor.module.scss     | 10 ++++
 docs/components/VisualEditor/index.js         |  1 +
 docs/package.json                             |  4 ++
 docs/pages/cldimage/basic-usage.mdx           | 14 +++++
 docs/pages/index.mdx                          | 52 +-----------------
 6 files changed, 83 insertions(+), 51 deletions(-)
 create mode 100644 docs/components/VisualEditor/VideoEditor.js
 create mode 100644 docs/components/VisualEditor/VisualEditor.module.scss
 create mode 100644 docs/components/VisualEditor/index.js

diff --git a/docs/components/VisualEditor/VideoEditor.js b/docs/components/VisualEditor/VideoEditor.js
new file mode 100644
index 00000000..11ebf122
--- /dev/null
+++ b/docs/components/VisualEditor/VideoEditor.js
@@ -0,0 +1,53 @@
+import { useCallback, useState } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
+import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
+import { javascript } from '@codemirror/lang-javascript';
+import { EditorView } from "@codemirror/view";
+import parse from 'html-react-parser';
+
+import { CldImage } from '../../../next-cloudinary';
+
+import styles from './VisualEditor.module.scss';
+
+const VisualEditor = ({ defaultCode }) => {
+  const [code, setCode] = useState(defaultCode);
+
+  const cleanCode = code?.trim().replace(/^\s+|\s+$/g, '') || '';
+
+  const onChange = useCallback((value, viewUpdate) => {
+    setCode(value);
+  }, []);
+
+  return (
+    <div className={styles.visualEditor}>
+      <CodeMirror
+        value={cleanCode}
+        height="100%"
+        className={styles.editor}
+        extensions={[
+          javascript({ jsx: true }),
+          EditorView.baseTheme({
+            "&.cm-editor": { overflow: "auto" },
+            ".cm-scroller": { overflow: "auto" }
+          })
+        ]}
+        theme={tokyoNight}
+        basicSetup={{
+          lineNumbers: false,
+          foldGutter: false,
+        }}
+        onChange={onChange}
+      />
+      {parse(cleanCode, {
+        replace(domNode) {
+          if (domNode.name === 'cldimage') {
+            console.log('domNode.attribs', domNode.attribs)
+            return <CldImage {...domNode.attribs} />;
+          }
+        },
+      })}
+    </div>
+  )
+}
+
+export default VisualEditor;
\ No newline at end of file
diff --git a/docs/components/VisualEditor/VisualEditor.module.scss b/docs/components/VisualEditor/VisualEditor.module.scss
new file mode 100644
index 00000000..aa808c7d
--- /dev/null
+++ b/docs/components/VisualEditor/VisualEditor.module.scss
@@ -0,0 +1,10 @@
+.visualEditor {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background-color: #1a1b26;
+}
+
+.editor {
+  overflow-x: auto;
+  padding: 1em;
+}
\ No newline at end of file
diff --git a/docs/components/VisualEditor/index.js b/docs/components/VisualEditor/index.js
new file mode 100644
index 00000000..e82bc7da
--- /dev/null
+++ b/docs/components/VisualEditor/index.js
@@ -0,0 +1 @@
+export { default } from './VideoEditor';
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index 94351b88..04a0632e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,8 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.1.9",
+    "@uiw/codemirror-theme-tokyo-night": "^4.21.7",
+    "@uiw/react-codemirror": "^4.21.7",
     "@vercel/analytics": "^1.0.1",
     "cloudinary": "^1.36.4",
+    "html-react-parser": "^4.0.0",
     "next": "^13.4.1",
     "nextra": "^2.8.0",
     "nextra-theme-docs": "^2.5.0",
diff --git a/docs/pages/cldimage/basic-usage.mdx b/docs/pages/cldimage/basic-usage.mdx
index 93190ef6..f16dc3ab 100644
--- a/docs/pages/cldimage/basic-usage.mdx
+++ b/docs/pages/cldimage/basic-usage.mdx
@@ -6,6 +6,7 @@ import { CldImage } from '../../../next-cloudinary';
 import ImageGrid from '../../components/ImageGrid';
 import OgImage from '../../components/OgImage';
 import Video from '../../components/Video';
+import VisualEditor from '../../components/VisualEditor';
 
 <Head>
   <title>CldImage - Next Cloudinary</title>
@@ -30,6 +31,19 @@ As CldImage is a wrapper around the Next.js Image component, you also gain acces
 
 The basic required props include `width`, `height`, `src`, and `alt`:
 
+<VisualEditor
+  defaultCode={`
+<CldImage
+  width="960"
+  height="600"
+  src="images/galaxy"
+  sizes="(max-width: 480px) 100vw, 50vw"
+  removeBackground
+  alt=""
+/>
+  `}
+/>
+
 ```jsx
 import { CldImage } from 'next-cloudinary';
 
diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
index 68a2efe7..d7f6f241 100644
--- a/docs/pages/index.mdx
+++ b/docs/pages/index.mdx
@@ -35,61 +35,11 @@ High-performance image delivery and uploading at scale in Next.js powered by Clo
     <CldImage
       width="987"
       height="1481"
-      src={`${process.env.IMAGES_DIRECTORY}/woman-headphones`}
+      src="http://res.cloudinary.com/next-cloudinary/image/upload/c_limit,w_987/f_auto/q_auto/v1/images/woman-headphones"
       sizes="50vw"
       alt="Original image of woman with headphones"
     />
   </li>
-  <li>
-    <CldImage
-      width="987"
-      height="987"
-      src={`${process.env.IMAGES_DIRECTORY}/woman-headphones`}
-      sizes="50vw"
-      crop="thumb"
-      gravity="faces"
-      removeBackground
-      tint="40:253f8c"
-      underlay={`${process.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"
-    />
-  </li>
 </ImageGrid>
 
 ```jsx

From e46f7142f318f52262c6ce7d7b5290b97c1e32ae Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Fri, 7 Jul 2023 11:53:15 -0400
Subject: [PATCH 08/10] including the yarn.lock

---
 yarn.lock | 264 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 262 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 73535b46..66ba0624 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -899,6 +899,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.18.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
+  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -977,6 +984,93 @@
   dependencies:
     "@cloudinary/transformation-builder-sdk" "^1.2.7"
 
+"@codemirror/autocomplete@^6.0.0":
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.8.1.tgz#3f3daa9f591186901db07f58d17256656242e841"
+  integrity sha512-HpphvDcTdOx+9R3eUw9hZK9JA77jlaBF0kOt2McbyfvY0rX9pnMoO8rkkZc0GzSbzhIY4m5xJ0uHHgjfqHNmXQ==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.6.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/commands@^6.0.0", "@codemirror/commands@^6.1.0":
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.4.tgz#b8a0e5ce72448c092ba4c4b1d902e6f183948aec"
+  integrity sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.2.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/lang-javascript@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.1.9.tgz#19065ad32db7b3797829eca01b8d9c69da5fd0d6"
+  integrity sha512-z3jdkcqOEBT2txn2a87A0jSy6Te3679wg/U8QzMeftFt+4KA6QooMwfdFzJiuC3L6fXKfTXZcDocoaxMYfGz0w==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.6.0":
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.8.0.tgz#f2d7eea6b338c25593d800f2293b062d9f9856db"
+  integrity sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    style-mod "^4.0.0"
+
+"@codemirror/lint@^6.0.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.4.0.tgz#3507e937aa9415ef0831ff04734ef0e736e75014"
+  integrity sha512-6VZ44Ysh/Zn07xrGkdtNfmHCbGSHZzFBdzWi0pbd7chAQ/iUcpLGX99NYRZTa7Ugqg4kEHCqiHhcZnH0gLIgSg==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/search@^6.0.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.0.tgz#308f9968434e0e6ed59c9ec36a0239eb1dfc5d92"
+  integrity sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.1", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.1.tgz#6dc8d8e5abb26b875e3164191872d69a5e85bd73"
+  integrity sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==
+
+"@codemirror/theme-one-dark@^6.0.0":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
+  integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/highlight" "^1.0.0"
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.6.0":
+  version "6.14.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.14.1.tgz#22cbc9b95887c996d1e886e6a85a8bb353cacce6"
+  integrity sha512-ofcsI7lRFo4N0rfnd+V3Gh2boQU3DmaaSKhDOvXUWjeOeuupMXer2e/3i9TUFN7aEIntv300EFBWPEiYVm2svg==
+  dependencies:
+    "@codemirror/state" "^6.1.4"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
+
 "@esbuild/android-arm64@0.17.18":
   version "0.17.18"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.18.tgz#4aa8d8afcffb4458736ca9b32baa97d7cb5861ea"
@@ -1339,6 +1433,33 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@lezer/common@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.3.tgz#1808f70e2b0a7b1fdcbaf5c074723d2d4ed1e4c5"
+  integrity sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA==
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.6.tgz#87e56468c0f43c2a8b3dc7f0b7c2804b34901556"
+  integrity sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/javascript@^1.0.0":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.4.4.tgz#f876c1ad2ecc2a52d9e33b5f5c0bd9935ea2d8c0"
+  integrity sha512-0BiBjpEcrt2IXrIzEAsdTLylrVhGHRqVQL3baTBx1sf4qewjIvhG1/pTUumu7W/7YR0AASjLQOQxFmo5EvNmzQ==
+  dependencies:
+    "@lezer/highlight" "^1.1.3"
+    "@lezer/lr" "^1.3.0"
+
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0":
+  version "1.3.9"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.3.9.tgz#cb299816d1c58efcca23ebbeb70bb4204fdd001b"
+  integrity sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
 "@mdx-js/mdx@^2.2.1", "@mdx-js/mdx@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-2.3.0.tgz#d65d8c3c28f3f46bb0e7cb3bf7613b39980671a9"
@@ -1766,6 +1887,47 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@uiw/codemirror-extensions-basic-setup@4.21.7":
+  version "4.21.7"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.7.tgz#59bcaea0e9075f733a6331fb0c4d2e9ef2e965e0"
+  integrity sha512-T5JvfGcocytnIOxTMvHxzcBn1PDAqZS1wnPblGnvOLRW0pUnXoqaOeBC+QI7h+3PGM5uCzPnzvaY+jqYwFDiZg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
+"@uiw/codemirror-theme-tokyo-night@^4.21.7":
+  version "4.21.7"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-theme-tokyo-night/-/codemirror-theme-tokyo-night-4.21.7.tgz#59877de7e39c2689246cb24739770dbff4951a68"
+  integrity sha512-LnatJOsIb+5AWP/tv7eGWvmkzZMkpngsHstlOWTgZUKoWGi+s74qKCOdUV4N9uLLYZ240EZYG50caf+681c1cg==
+  dependencies:
+    "@uiw/codemirror-themes" "4.21.7"
+
+"@uiw/codemirror-themes@4.21.7":
+  version "4.21.7"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-themes/-/codemirror-themes-4.21.7.tgz#eafcdfdf1c3cb30beb8227702fa1985a8daae78a"
+  integrity sha512-IggpVo7R+GREBpmInhrGxYcmbcqMci/cbaBxMmjNtPILqDwlGgWNtc7F2gNQ+gfQ138l+KXtdamielrSEM1qeA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
+"@uiw/react-codemirror@^4.21.7":
+  version "4.21.7"
+  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.21.7.tgz#4f04d3d60f530633ab6aff79991d366313f165bf"
+  integrity sha512-nrWlH0PZyfew+5gj6o5vp5imJYO8jgkxjqO+tfLovo7T/6AlKJaZIlU1nAobxqKn3mSbgjSZ9GCEDybvrbF6DA==
+  dependencies:
+    "@babel/runtime" "^7.18.6"
+    "@codemirror/commands" "^6.1.0"
+    "@codemirror/state" "^6.1.1"
+    "@codemirror/theme-one-dark" "^6.0.0"
+    "@uiw/codemirror-extensions-basic-setup" "4.21.7"
+    codemirror "^6.0.0"
+
 "@vercel/analytics@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@vercel/analytics/-/analytics-1.0.1.tgz#38308a626c91866cb00a249c08bf65251e9b9d81"
@@ -2216,6 +2378,19 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
+codemirror@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
+  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
@@ -2323,6 +2498,11 @@ cose-base@^2.2.0:
   dependencies:
     layout-base "^2.0.0"
 
+crelt@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
+  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2744,6 +2924,20 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
 domexception@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
@@ -2751,11 +2945,27 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+domhandler@5.0.3, domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 dompurify@3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.3.tgz#4b115d15a091ddc96f232bcef668550a2f6f1430"
   integrity sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==
 
+domutils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dotenv@^16.0.3:
   version "16.0.3"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
@@ -2781,7 +2991,7 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-entities@^4.4.0:
+entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -3359,6 +3569,14 @@ heap@^0.2.6:
   resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
   integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
 
+html-dom-parser@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-4.0.0.tgz#dc382fbbc9306f8c9b5aae4e3f2822e113a48709"
+  integrity sha512-TUa3wIwi80f5NF8CVWzkopBVqVAtlawUzJoLwVLHns0XSJGynss4jiY0mTWpiDOsuyw+afP+ujjMgRh9CoZcXw==
+  dependencies:
+    domhandler "5.0.3"
+    htmlparser2 "9.0.0"
+
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -3371,6 +3589,26 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-react-parser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-4.0.0.tgz#a727be4539ad85b133a5071f97b8c2f835a55bdf"
+  integrity sha512-OzlOavs9lLyBxoRiXbXfODIX/nSShukMtdx3+WSMjon/FF1gJZRq0rBELoR5OswfbN56C0oKpAii7i3yzO/uVQ==
+  dependencies:
+    domhandler "5.0.3"
+    html-dom-parser "4.0.0"
+    react-property "2.0.0"
+    style-to-js "1.1.3"
+
+htmlparser2@9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-9.0.0.tgz#e431142b7eeb1d91672742dea48af8ac7140cddb"
+  integrity sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.1.0"
+    entities "^4.5.0"
+
 http-errors@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
@@ -5456,6 +5694,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-property@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136"
+  integrity sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -5940,7 +6183,19 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-style-to-object@^0.4.1:
+style-mod@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.3.tgz#136c4abc905f82a866a18b39df4dc08ec762b1ad"
+  integrity sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw==
+
+style-to-js@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.3.tgz#2012d75dc89bf400edc29c545ed61c8626b00184"
+  integrity sha512-zKI5gN/zb7LS/Vm0eUwjmjrXWw8IMtyA8aPBJZdYiQTXj4+wQ3IucOLIOnF7zCHxvW8UhIGh/uZh/t9zEHXNTQ==
+  dependencies:
+    style-to-object "0.4.1"
+
+style-to-object@0.4.1, style-to-object@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.1.tgz#53cf856f7cf7f172d72939d9679556469ba5de37"
   integrity sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==
@@ -6421,6 +6676,11 @@ vscode-textmate@^8.0.0:
   resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-8.0.0.tgz#2c7a3b1163ef0441097e0b5d6389cd5504b59e5d"
   integrity sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==
 
+w3c-keyname@^2.2.4:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
+  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"

From 4ffd37563914ff772e89ba8eead4a3973cd8bc12 Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Tue, 18 Jul 2023 11:43:14 -0400
Subject: [PATCH 09/10] removing visua leditor

---
 docs/components/VisualEditor/VideoEditor.js   |  53 ----
 .../VisualEditor/VisualEditor.module.scss     |  10 -
 docs/components/VisualEditor/index.js         |   1 -
 docs/package.json                             |   4 -
 docs/pages/cldimage/basic-usage.mdx           |  14 -
 yarn.lock                                     | 264 +-----------------
 6 files changed, 2 insertions(+), 344 deletions(-)
 delete mode 100644 docs/components/VisualEditor/VideoEditor.js
 delete mode 100644 docs/components/VisualEditor/VisualEditor.module.scss
 delete mode 100644 docs/components/VisualEditor/index.js

diff --git a/docs/components/VisualEditor/VideoEditor.js b/docs/components/VisualEditor/VideoEditor.js
deleted file mode 100644
index 11ebf122..00000000
--- a/docs/components/VisualEditor/VideoEditor.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useCallback, useState } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
-import { javascript } from '@codemirror/lang-javascript';
-import { EditorView } from "@codemirror/view";
-import parse from 'html-react-parser';
-
-import { CldImage } from '../../../next-cloudinary';
-
-import styles from './VisualEditor.module.scss';
-
-const VisualEditor = ({ defaultCode }) => {
-  const [code, setCode] = useState(defaultCode);
-
-  const cleanCode = code?.trim().replace(/^\s+|\s+$/g, '') || '';
-
-  const onChange = useCallback((value, viewUpdate) => {
-    setCode(value);
-  }, []);
-
-  return (
-    <div className={styles.visualEditor}>
-      <CodeMirror
-        value={cleanCode}
-        height="100%"
-        className={styles.editor}
-        extensions={[
-          javascript({ jsx: true }),
-          EditorView.baseTheme({
-            "&.cm-editor": { overflow: "auto" },
-            ".cm-scroller": { overflow: "auto" }
-          })
-        ]}
-        theme={tokyoNight}
-        basicSetup={{
-          lineNumbers: false,
-          foldGutter: false,
-        }}
-        onChange={onChange}
-      />
-      {parse(cleanCode, {
-        replace(domNode) {
-          if (domNode.name === 'cldimage') {
-            console.log('domNode.attribs', domNode.attribs)
-            return <CldImage {...domNode.attribs} />;
-          }
-        },
-      })}
-    </div>
-  )
-}
-
-export default VisualEditor;
\ No newline at end of file
diff --git a/docs/components/VisualEditor/VisualEditor.module.scss b/docs/components/VisualEditor/VisualEditor.module.scss
deleted file mode 100644
index aa808c7d..00000000
--- a/docs/components/VisualEditor/VisualEditor.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.visualEditor {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  background-color: #1a1b26;
-}
-
-.editor {
-  overflow-x: auto;
-  padding: 1em;
-}
\ No newline at end of file
diff --git a/docs/components/VisualEditor/index.js b/docs/components/VisualEditor/index.js
deleted file mode 100644
index e82bc7da..00000000
--- a/docs/components/VisualEditor/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './VideoEditor';
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index 712fa66e..1b4213ad 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,12 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@codemirror/lang-javascript": "^6.1.9",
-    "@uiw/codemirror-theme-tokyo-night": "^4.21.7",
-    "@uiw/react-codemirror": "^4.21.7",
     "@vercel/analytics": "^1.0.1",
     "cloudinary": "^1.37.3",
-    "html-react-parser": "^4.0.0",
     "next": "^13.4.9",
     "nextra": "^2.9.0",
     "nextra-theme-docs": "^2.9.0",
diff --git a/docs/pages/cldimage/basic-usage.mdx b/docs/pages/cldimage/basic-usage.mdx
index da520fb2..3b2f02f1 100644
--- a/docs/pages/cldimage/basic-usage.mdx
+++ b/docs/pages/cldimage/basic-usage.mdx
@@ -6,7 +6,6 @@ import { CldImage } from '../../../next-cloudinary';
 import ImageGrid from '../../components/ImageGrid';
 import OgImage from '../../components/OgImage';
 import Video from '../../components/Video';
-import VisualEditor from '../../components/VisualEditor';
 
 <Head>
   <title>CldImage - Next Cloudinary</title>
@@ -31,19 +30,6 @@ As CldImage is a wrapper around the Next.js Image component, you also gain acces
 
 The basic required props include `width`, `height`, `src`, and `alt`:
 
-<VisualEditor
-  defaultCode={`
-<CldImage
-  width="960"
-  height="600"
-  src="images/galaxy"
-  sizes="(max-width: 480px) 100vw, 50vw"
-  removeBackground
-  alt=""
-/>
-  `}
-/>
-
 ```jsx
 import { CldImage } from 'next-cloudinary';
 
diff --git a/yarn.lock b/yarn.lock
index 1f452e17..ba5c908c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -899,13 +899,6 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.18.6":
-  version "7.22.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
-  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
-  dependencies:
-    regenerator-runtime "^0.13.11"
-
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -989,93 +982,6 @@
   dependencies:
     "@cloudinary/transformation-builder-sdk" "^1.2.7"
 
-"@codemirror/autocomplete@^6.0.0":
-  version "6.8.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.8.1.tgz#3f3daa9f591186901db07f58d17256656242e841"
-  integrity sha512-HpphvDcTdOx+9R3eUw9hZK9JA77jlaBF0kOt2McbyfvY0rX9pnMoO8rkkZc0GzSbzhIY4m5xJ0uHHgjfqHNmXQ==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.6.0"
-    "@lezer/common" "^1.0.0"
-
-"@codemirror/commands@^6.0.0", "@codemirror/commands@^6.1.0":
-  version "6.2.4"
-  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.4.tgz#b8a0e5ce72448c092ba4c4b1d902e6f183948aec"
-  integrity sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.2.0"
-    "@codemirror/view" "^6.0.0"
-    "@lezer/common" "^1.0.0"
-
-"@codemirror/lang-javascript@^6.1.9":
-  version "6.1.9"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.1.9.tgz#19065ad32db7b3797829eca01b8d9c69da5fd0d6"
-  integrity sha512-z3jdkcqOEBT2txn2a87A0jSy6Te3679wg/U8QzMeftFt+4KA6QooMwfdFzJiuC3L6fXKfTXZcDocoaxMYfGz0w==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/language" "^6.6.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    "@lezer/common" "^1.0.0"
-    "@lezer/javascript" "^1.0.0"
-
-"@codemirror/language@^6.0.0", "@codemirror/language@^6.6.0":
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.8.0.tgz#f2d7eea6b338c25593d800f2293b062d9f9856db"
-  integrity sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    "@lezer/common" "^1.0.0"
-    "@lezer/highlight" "^1.0.0"
-    "@lezer/lr" "^1.0.0"
-    style-mod "^4.0.0"
-
-"@codemirror/lint@^6.0.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.4.0.tgz#3507e937aa9415ef0831ff04734ef0e736e75014"
-  integrity sha512-6VZ44Ysh/Zn07xrGkdtNfmHCbGSHZzFBdzWi0pbd7chAQ/iUcpLGX99NYRZTa7Ugqg4kEHCqiHhcZnH0gLIgSg==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    crelt "^1.0.5"
-
-"@codemirror/search@^6.0.0":
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.0.tgz#308f9968434e0e6ed59c9ec36a0239eb1dfc5d92"
-  integrity sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    crelt "^1.0.5"
-
-"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.1", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.1.tgz#6dc8d8e5abb26b875e3164191872d69a5e85bd73"
-  integrity sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==
-
-"@codemirror/theme-one-dark@^6.0.0":
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
-  integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    "@lezer/highlight" "^1.0.0"
-
-"@codemirror/view@^6.0.0", "@codemirror/view@^6.6.0":
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.14.1.tgz#22cbc9b95887c996d1e886e6a85a8bb353cacce6"
-  integrity sha512-ofcsI7lRFo4N0rfnd+V3Gh2boQU3DmaaSKhDOvXUWjeOeuupMXer2e/3i9TUFN7aEIntv300EFBWPEiYVm2svg==
-  dependencies:
-    "@codemirror/state" "^6.1.4"
-    style-mod "^4.0.0"
-    w3c-keyname "^2.2.4"
-
 "@esbuild/android-arm64@0.17.18":
   version "0.17.18"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.18.tgz#4aa8d8afcffb4458736ca9b32baa97d7cb5861ea"
@@ -1438,33 +1344,6 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@lezer/common@^1.0.0":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.3.tgz#1808f70e2b0a7b1fdcbaf5c074723d2d4ed1e4c5"
-  integrity sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA==
-
-"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.6.tgz#87e56468c0f43c2a8b3dc7f0b7c2804b34901556"
-  integrity sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==
-  dependencies:
-    "@lezer/common" "^1.0.0"
-
-"@lezer/javascript@^1.0.0":
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.4.4.tgz#f876c1ad2ecc2a52d9e33b5f5c0bd9935ea2d8c0"
-  integrity sha512-0BiBjpEcrt2IXrIzEAsdTLylrVhGHRqVQL3baTBx1sf4qewjIvhG1/pTUumu7W/7YR0AASjLQOQxFmo5EvNmzQ==
-  dependencies:
-    "@lezer/highlight" "^1.1.3"
-    "@lezer/lr" "^1.3.0"
-
-"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0":
-  version "1.3.9"
-  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.3.9.tgz#cb299816d1c58efcca23ebbeb70bb4204fdd001b"
-  integrity sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==
-  dependencies:
-    "@lezer/common" "^1.0.0"
-
 "@mdx-js/mdx@^2.2.1", "@mdx-js/mdx@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-2.3.0.tgz#d65d8c3c28f3f46bb0e7cb3bf7613b39980671a9"
@@ -1897,47 +1776,6 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@uiw/codemirror-extensions-basic-setup@4.21.7":
-  version "4.21.7"
-  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.7.tgz#59bcaea0e9075f733a6331fb0c4d2e9ef2e965e0"
-  integrity sha512-T5JvfGcocytnIOxTMvHxzcBn1PDAqZS1wnPblGnvOLRW0pUnXoqaOeBC+QI7h+3PGM5uCzPnzvaY+jqYwFDiZg==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/commands" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/search" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-
-"@uiw/codemirror-theme-tokyo-night@^4.21.7":
-  version "4.21.7"
-  resolved "https://registry.yarnpkg.com/@uiw/codemirror-theme-tokyo-night/-/codemirror-theme-tokyo-night-4.21.7.tgz#59877de7e39c2689246cb24739770dbff4951a68"
-  integrity sha512-LnatJOsIb+5AWP/tv7eGWvmkzZMkpngsHstlOWTgZUKoWGi+s74qKCOdUV4N9uLLYZ240EZYG50caf+681c1cg==
-  dependencies:
-    "@uiw/codemirror-themes" "4.21.7"
-
-"@uiw/codemirror-themes@4.21.7":
-  version "4.21.7"
-  resolved "https://registry.yarnpkg.com/@uiw/codemirror-themes/-/codemirror-themes-4.21.7.tgz#eafcdfdf1c3cb30beb8227702fa1985a8daae78a"
-  integrity sha512-IggpVo7R+GREBpmInhrGxYcmbcqMci/cbaBxMmjNtPILqDwlGgWNtc7F2gNQ+gfQ138l+KXtdamielrSEM1qeA==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-
-"@uiw/react-codemirror@^4.21.7":
-  version "4.21.7"
-  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.21.7.tgz#4f04d3d60f530633ab6aff79991d366313f165bf"
-  integrity sha512-nrWlH0PZyfew+5gj6o5vp5imJYO8jgkxjqO+tfLovo7T/6AlKJaZIlU1nAobxqKn3mSbgjSZ9GCEDybvrbF6DA==
-  dependencies:
-    "@babel/runtime" "^7.18.6"
-    "@codemirror/commands" "^6.1.0"
-    "@codemirror/state" "^6.1.1"
-    "@codemirror/theme-one-dark" "^6.0.0"
-    "@uiw/codemirror-extensions-basic-setup" "4.21.7"
-    codemirror "^6.0.0"
-
 "@vercel/analytics@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@vercel/analytics/-/analytics-1.0.1.tgz#38308a626c91866cb00a249c08bf65251e9b9d81"
@@ -2398,19 +2236,6 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
-codemirror@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
-  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/commands" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/search" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
@@ -2523,11 +2348,6 @@ cose-base@^2.2.0:
   dependencies:
     layout-base "^2.0.0"
 
-crelt@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
-  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
-
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2949,20 +2769,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-dom-serializer@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
-  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
-  dependencies:
-    domelementtype "^2.3.0"
-    domhandler "^5.0.2"
-    entities "^4.2.0"
-
-domelementtype@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
-  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
-
 domexception@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
@@ -2970,27 +2776,11 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
-domhandler@5.0.3, domhandler@^5.0.2, domhandler@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
-  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
-  dependencies:
-    domelementtype "^2.3.0"
-
 dompurify@3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.3.tgz#4b115d15a091ddc96f232bcef668550a2f6f1430"
   integrity sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==
 
-domutils@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
-  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
-  dependencies:
-    dom-serializer "^2.0.0"
-    domelementtype "^2.3.0"
-    domhandler "^5.0.3"
-
 dotenv@^16.0.3:
   version "16.0.3"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
@@ -3016,7 +2806,7 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
+entities@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -3599,14 +3389,6 @@ heap@^0.2.6:
   resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
   integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
 
-html-dom-parser@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-4.0.0.tgz#dc382fbbc9306f8c9b5aae4e3f2822e113a48709"
-  integrity sha512-TUa3wIwi80f5NF8CVWzkopBVqVAtlawUzJoLwVLHns0XSJGynss4jiY0mTWpiDOsuyw+afP+ujjMgRh9CoZcXw==
-  dependencies:
-    domhandler "5.0.3"
-    htmlparser2 "9.0.0"
-
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -3619,26 +3401,6 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-react-parser@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-4.0.0.tgz#a727be4539ad85b133a5071f97b8c2f835a55bdf"
-  integrity sha512-OzlOavs9lLyBxoRiXbXfODIX/nSShukMtdx3+WSMjon/FF1gJZRq0rBELoR5OswfbN56C0oKpAii7i3yzO/uVQ==
-  dependencies:
-    domhandler "5.0.3"
-    html-dom-parser "4.0.0"
-    react-property "2.0.0"
-    style-to-js "1.1.3"
-
-htmlparser2@9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-9.0.0.tgz#e431142b7eeb1d91672742dea48af8ac7140cddb"
-  integrity sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ==
-  dependencies:
-    domelementtype "^2.3.0"
-    domhandler "^5.0.3"
-    domutils "^3.1.0"
-    entities "^4.5.0"
-
 http-errors@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
@@ -5726,11 +5488,6 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-property@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136"
-  integrity sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==
-
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -6215,19 +5972,7 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-style-mod@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.3.tgz#136c4abc905f82a866a18b39df4dc08ec762b1ad"
-  integrity sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw==
-
-style-to-js@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.3.tgz#2012d75dc89bf400edc29c545ed61c8626b00184"
-  integrity sha512-zKI5gN/zb7LS/Vm0eUwjmjrXWw8IMtyA8aPBJZdYiQTXj4+wQ3IucOLIOnF7zCHxvW8UhIGh/uZh/t9zEHXNTQ==
-  dependencies:
-    style-to-object "0.4.1"
-
-style-to-object@0.4.1, style-to-object@^0.4.1:
+style-to-object@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.1.tgz#53cf856f7cf7f172d72939d9679556469ba5de37"
   integrity sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==
@@ -6732,11 +6477,6 @@ vscode-textmate@^8.0.0:
   resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-8.0.0.tgz#2c7a3b1163ef0441097e0b5d6389cd5504b59e5d"
   integrity sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==
 
-w3c-keyname@^2.2.4:
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
-  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
-
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"

From 0c97159ff2d1d2e25efc2838e57c537ab414c0dd Mon Sep 17 00:00:00 2001
From: Colby Fayock <fayock@gmail.com>
Date: Tue, 18 Jul 2023 11:43:38 -0400
Subject: [PATCH 10/10] Revert "removing visua leditor"

This reverts commit 4ffd37563914ff772e89ba8eead4a3973cd8bc12.
---
 docs/components/VisualEditor/VideoEditor.js   |  53 ++++
 .../VisualEditor/VisualEditor.module.scss     |  10 +
 docs/components/VisualEditor/index.js         |   1 +
 docs/package.json                             |   4 +
 docs/pages/cldimage/basic-usage.mdx           |  14 +
 yarn.lock                                     | 264 +++++++++++++++++-
 6 files changed, 344 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/VisualEditor/VideoEditor.js
 create mode 100644 docs/components/VisualEditor/VisualEditor.module.scss
 create mode 100644 docs/components/VisualEditor/index.js

diff --git a/docs/components/VisualEditor/VideoEditor.js b/docs/components/VisualEditor/VideoEditor.js
new file mode 100644
index 00000000..11ebf122
--- /dev/null
+++ b/docs/components/VisualEditor/VideoEditor.js
@@ -0,0 +1,53 @@
+import { useCallback, useState } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
+import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
+import { javascript } from '@codemirror/lang-javascript';
+import { EditorView } from "@codemirror/view";
+import parse from 'html-react-parser';
+
+import { CldImage } from '../../../next-cloudinary';
+
+import styles from './VisualEditor.module.scss';
+
+const VisualEditor = ({ defaultCode }) => {
+  const [code, setCode] = useState(defaultCode);
+
+  const cleanCode = code?.trim().replace(/^\s+|\s+$/g, '') || '';
+
+  const onChange = useCallback((value, viewUpdate) => {
+    setCode(value);
+  }, []);
+
+  return (
+    <div className={styles.visualEditor}>
+      <CodeMirror
+        value={cleanCode}
+        height="100%"
+        className={styles.editor}
+        extensions={[
+          javascript({ jsx: true }),
+          EditorView.baseTheme({
+            "&.cm-editor": { overflow: "auto" },
+            ".cm-scroller": { overflow: "auto" }
+          })
+        ]}
+        theme={tokyoNight}
+        basicSetup={{
+          lineNumbers: false,
+          foldGutter: false,
+        }}
+        onChange={onChange}
+      />
+      {parse(cleanCode, {
+        replace(domNode) {
+          if (domNode.name === 'cldimage') {
+            console.log('domNode.attribs', domNode.attribs)
+            return <CldImage {...domNode.attribs} />;
+          }
+        },
+      })}
+    </div>
+  )
+}
+
+export default VisualEditor;
\ No newline at end of file
diff --git a/docs/components/VisualEditor/VisualEditor.module.scss b/docs/components/VisualEditor/VisualEditor.module.scss
new file mode 100644
index 00000000..aa808c7d
--- /dev/null
+++ b/docs/components/VisualEditor/VisualEditor.module.scss
@@ -0,0 +1,10 @@
+.visualEditor {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background-color: #1a1b26;
+}
+
+.editor {
+  overflow-x: auto;
+  padding: 1em;
+}
\ No newline at end of file
diff --git a/docs/components/VisualEditor/index.js b/docs/components/VisualEditor/index.js
new file mode 100644
index 00000000..e82bc7da
--- /dev/null
+++ b/docs/components/VisualEditor/index.js
@@ -0,0 +1 @@
+export { default } from './VideoEditor';
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index 1b4213ad..712fa66e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,8 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.1.9",
+    "@uiw/codemirror-theme-tokyo-night": "^4.21.7",
+    "@uiw/react-codemirror": "^4.21.7",
     "@vercel/analytics": "^1.0.1",
     "cloudinary": "^1.37.3",
+    "html-react-parser": "^4.0.0",
     "next": "^13.4.9",
     "nextra": "^2.9.0",
     "nextra-theme-docs": "^2.9.0",
diff --git a/docs/pages/cldimage/basic-usage.mdx b/docs/pages/cldimage/basic-usage.mdx
index 3b2f02f1..da520fb2 100644
--- a/docs/pages/cldimage/basic-usage.mdx
+++ b/docs/pages/cldimage/basic-usage.mdx
@@ -6,6 +6,7 @@ import { CldImage } from '../../../next-cloudinary';
 import ImageGrid from '../../components/ImageGrid';
 import OgImage from '../../components/OgImage';
 import Video from '../../components/Video';
+import VisualEditor from '../../components/VisualEditor';
 
 <Head>
   <title>CldImage - Next Cloudinary</title>
@@ -30,6 +31,19 @@ As CldImage is a wrapper around the Next.js Image component, you also gain acces
 
 The basic required props include `width`, `height`, `src`, and `alt`:
 
+<VisualEditor
+  defaultCode={`
+<CldImage
+  width="960"
+  height="600"
+  src="images/galaxy"
+  sizes="(max-width: 480px) 100vw, 50vw"
+  removeBackground
+  alt=""
+/>
+  `}
+/>
+
 ```jsx
 import { CldImage } from 'next-cloudinary';
 
diff --git a/yarn.lock b/yarn.lock
index ba5c908c..1f452e17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -899,6 +899,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.18.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
+  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -982,6 +989,93 @@
   dependencies:
     "@cloudinary/transformation-builder-sdk" "^1.2.7"
 
+"@codemirror/autocomplete@^6.0.0":
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.8.1.tgz#3f3daa9f591186901db07f58d17256656242e841"
+  integrity sha512-HpphvDcTdOx+9R3eUw9hZK9JA77jlaBF0kOt2McbyfvY0rX9pnMoO8rkkZc0GzSbzhIY4m5xJ0uHHgjfqHNmXQ==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.6.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/commands@^6.0.0", "@codemirror/commands@^6.1.0":
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.4.tgz#b8a0e5ce72448c092ba4c4b1d902e6f183948aec"
+  integrity sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.2.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/lang-javascript@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.1.9.tgz#19065ad32db7b3797829eca01b8d9c69da5fd0d6"
+  integrity sha512-z3jdkcqOEBT2txn2a87A0jSy6Te3679wg/U8QzMeftFt+4KA6QooMwfdFzJiuC3L6fXKfTXZcDocoaxMYfGz0w==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.6.0":
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.8.0.tgz#f2d7eea6b338c25593d800f2293b062d9f9856db"
+  integrity sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    style-mod "^4.0.0"
+
+"@codemirror/lint@^6.0.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.4.0.tgz#3507e937aa9415ef0831ff04734ef0e736e75014"
+  integrity sha512-6VZ44Ysh/Zn07xrGkdtNfmHCbGSHZzFBdzWi0pbd7chAQ/iUcpLGX99NYRZTa7Ugqg4kEHCqiHhcZnH0gLIgSg==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/search@^6.0.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.0.tgz#308f9968434e0e6ed59c9ec36a0239eb1dfc5d92"
+  integrity sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.1", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.1.tgz#6dc8d8e5abb26b875e3164191872d69a5e85bd73"
+  integrity sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==
+
+"@codemirror/theme-one-dark@^6.0.0":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
+  integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/highlight" "^1.0.0"
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.6.0":
+  version "6.14.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.14.1.tgz#22cbc9b95887c996d1e886e6a85a8bb353cacce6"
+  integrity sha512-ofcsI7lRFo4N0rfnd+V3Gh2boQU3DmaaSKhDOvXUWjeOeuupMXer2e/3i9TUFN7aEIntv300EFBWPEiYVm2svg==
+  dependencies:
+    "@codemirror/state" "^6.1.4"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
+
 "@esbuild/android-arm64@0.17.18":
   version "0.17.18"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.18.tgz#4aa8d8afcffb4458736ca9b32baa97d7cb5861ea"
@@ -1344,6 +1438,33 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@lezer/common@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.3.tgz#1808f70e2b0a7b1fdcbaf5c074723d2d4ed1e4c5"
+  integrity sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA==
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.6.tgz#87e56468c0f43c2a8b3dc7f0b7c2804b34901556"
+  integrity sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/javascript@^1.0.0":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.4.4.tgz#f876c1ad2ecc2a52d9e33b5f5c0bd9935ea2d8c0"
+  integrity sha512-0BiBjpEcrt2IXrIzEAsdTLylrVhGHRqVQL3baTBx1sf4qewjIvhG1/pTUumu7W/7YR0AASjLQOQxFmo5EvNmzQ==
+  dependencies:
+    "@lezer/highlight" "^1.1.3"
+    "@lezer/lr" "^1.3.0"
+
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0":
+  version "1.3.9"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.3.9.tgz#cb299816d1c58efcca23ebbeb70bb4204fdd001b"
+  integrity sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
 "@mdx-js/mdx@^2.2.1", "@mdx-js/mdx@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-2.3.0.tgz#d65d8c3c28f3f46bb0e7cb3bf7613b39980671a9"
@@ -1776,6 +1897,47 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@uiw/codemirror-extensions-basic-setup@4.21.7":
+  version "4.21.7"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.7.tgz#59bcaea0e9075f733a6331fb0c4d2e9ef2e965e0"
+  integrity sha512-T5JvfGcocytnIOxTMvHxzcBn1PDAqZS1wnPblGnvOLRW0pUnXoqaOeBC+QI7h+3PGM5uCzPnzvaY+jqYwFDiZg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
+"@uiw/codemirror-theme-tokyo-night@^4.21.7":
+  version "4.21.7"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-theme-tokyo-night/-/codemirror-theme-tokyo-night-4.21.7.tgz#59877de7e39c2689246cb24739770dbff4951a68"
+  integrity sha512-LnatJOsIb+5AWP/tv7eGWvmkzZMkpngsHstlOWTgZUKoWGi+s74qKCOdUV4N9uLLYZ240EZYG50caf+681c1cg==
+  dependencies:
+    "@uiw/codemirror-themes" "4.21.7"
+
+"@uiw/codemirror-themes@4.21.7":
+  version "4.21.7"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-themes/-/codemirror-themes-4.21.7.tgz#eafcdfdf1c3cb30beb8227702fa1985a8daae78a"
+  integrity sha512-IggpVo7R+GREBpmInhrGxYcmbcqMci/cbaBxMmjNtPILqDwlGgWNtc7F2gNQ+gfQ138l+KXtdamielrSEM1qeA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
+"@uiw/react-codemirror@^4.21.7":
+  version "4.21.7"
+  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.21.7.tgz#4f04d3d60f530633ab6aff79991d366313f165bf"
+  integrity sha512-nrWlH0PZyfew+5gj6o5vp5imJYO8jgkxjqO+tfLovo7T/6AlKJaZIlU1nAobxqKn3mSbgjSZ9GCEDybvrbF6DA==
+  dependencies:
+    "@babel/runtime" "^7.18.6"
+    "@codemirror/commands" "^6.1.0"
+    "@codemirror/state" "^6.1.1"
+    "@codemirror/theme-one-dark" "^6.0.0"
+    "@uiw/codemirror-extensions-basic-setup" "4.21.7"
+    codemirror "^6.0.0"
+
 "@vercel/analytics@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@vercel/analytics/-/analytics-1.0.1.tgz#38308a626c91866cb00a249c08bf65251e9b9d81"
@@ -2236,6 +2398,19 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
+codemirror@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
+  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
@@ -2348,6 +2523,11 @@ cose-base@^2.2.0:
   dependencies:
     layout-base "^2.0.0"
 
+crelt@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
+  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2769,6 +2949,20 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
 domexception@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
@@ -2776,11 +2970,27 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+domhandler@5.0.3, domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 dompurify@3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.3.tgz#4b115d15a091ddc96f232bcef668550a2f6f1430"
   integrity sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==
 
+domutils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dotenv@^16.0.3:
   version "16.0.3"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
@@ -2806,7 +3016,7 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-entities@^4.4.0:
+entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -3389,6 +3599,14 @@ heap@^0.2.6:
   resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
   integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
 
+html-dom-parser@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-4.0.0.tgz#dc382fbbc9306f8c9b5aae4e3f2822e113a48709"
+  integrity sha512-TUa3wIwi80f5NF8CVWzkopBVqVAtlawUzJoLwVLHns0XSJGynss4jiY0mTWpiDOsuyw+afP+ujjMgRh9CoZcXw==
+  dependencies:
+    domhandler "5.0.3"
+    htmlparser2 "9.0.0"
+
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -3401,6 +3619,26 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-react-parser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-4.0.0.tgz#a727be4539ad85b133a5071f97b8c2f835a55bdf"
+  integrity sha512-OzlOavs9lLyBxoRiXbXfODIX/nSShukMtdx3+WSMjon/FF1gJZRq0rBELoR5OswfbN56C0oKpAii7i3yzO/uVQ==
+  dependencies:
+    domhandler "5.0.3"
+    html-dom-parser "4.0.0"
+    react-property "2.0.0"
+    style-to-js "1.1.3"
+
+htmlparser2@9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-9.0.0.tgz#e431142b7eeb1d91672742dea48af8ac7140cddb"
+  integrity sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.1.0"
+    entities "^4.5.0"
+
 http-errors@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
@@ -5488,6 +5726,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-property@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136"
+  integrity sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -5972,7 +6215,19 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-style-to-object@^0.4.1:
+style-mod@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.3.tgz#136c4abc905f82a866a18b39df4dc08ec762b1ad"
+  integrity sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw==
+
+style-to-js@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.3.tgz#2012d75dc89bf400edc29c545ed61c8626b00184"
+  integrity sha512-zKI5gN/zb7LS/Vm0eUwjmjrXWw8IMtyA8aPBJZdYiQTXj4+wQ3IucOLIOnF7zCHxvW8UhIGh/uZh/t9zEHXNTQ==
+  dependencies:
+    style-to-object "0.4.1"
+
+style-to-object@0.4.1, style-to-object@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.1.tgz#53cf856f7cf7f172d72939d9679556469ba5de37"
   integrity sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==
@@ -6477,6 +6732,11 @@ vscode-textmate@^8.0.0:
   resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-8.0.0.tgz#2c7a3b1163ef0441097e0b5d6389cd5504b59e5d"
   integrity sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==
 
+w3c-keyname@^2.2.4:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
+  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"