feat: qualifiers, docs, ogimages

cloudinary-community · Oct 28, 2022 · dd64908 · dd64908 · vercel · Oct 28, 2022
1 parent 5c2c9bf
commit dd64908
Show file tree

Hide file tree

Showing 23 changed files with 236 additions and 27 deletions.
diff --git a/docs/components/OgImage/OgImage.js b/docs/components/OgImage/OgImage.js
@@ -0,0 +1,56 @@
+import { CldOgImage } from '../../../next-cloudinary';
+
+const OgImage = ({ title, ...props }) => {
+  return (
+    <CldOgImage
+      src="images/next-cloudinary-social-background"
+      overlays={[
+        {
+          width: 2000,
+          crop: 'fit',
+          position: {
+            y: -160
+          },
+          text: {
+            color: 'white',
+            fontFamily: 'Source Sans Pro',
+            fontSize: 200,
+            fontWeight: 'black',
+            text: title,
+            alignment: 'center',
+            lineSpacing: -50
+          }
+        },
+        {
+          publicId: 'images/cloudinary-white',
+          position: {
+            x: -200,
+            y: 180,
+          },
+        },
+        {
+          publicId: 'images/nextjs-white',
+          position: {
+            x: 350,
+            y: 180,
+          },
+        },
+        {
+          position: {
+            y: 320
+          },
+          text: {
+            color: 'white',
+            fontFamily: 'Source Sans Pro',
+            fontSize: 60,
+            fontWeight: 'bold',
+            text: 'next-cloudinary.spacejelly.dev'
+          }
+        }
+      ]}
+      {...props}
+    />
+  )
+}
+
+export default OgImage;
diff --git a/docs/components/OgImage/index.js b/docs/components/OgImage/index.js
@@ -0,0 +1 @@
+export { default } from './OgImage';
diff --git a/docs/pages/components/cldimage/basic-usage.mdx b/docs/pages/components/cldimage/basic-usage.mdx
@@ -1,3 +1,13 @@
+import Head from 'next/head';
+
+import OgImage from '../../../components/OgImage';
+
+<Head>
+  <title>CldImage - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldImage" />
+
 # Getting Started with CldImage
 
 ## Basic Usage

diff --git a/docs/pages/components/cldimage/configuration.mdx b/docs/pages/components/cldimage/configuration.mdx
@@ -1,3 +1,13 @@
+import Head from 'next/head';
+
+import OgImage from '../../../components/OgImage';
+
+<Head>
+  <title>CldImage Configuration - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldImage Configuration" />
+
 # CldImage Configuration
 
 ## General Props

diff --git a/docs/pages/components/cldimage/examples.mdx b/docs/pages/components/cldimage/examples.mdx
@@ -1,9 +1,17 @@
+import Head from 'next/head';
 import Callout from 'nextra-theme-docs/callout';
 
 import { CldImage } from '../../../../next-cloudinary';
 
+import OgImage from '../../../components/OgImage';
 import ImageGrid from '../../../components/ImageGrid';
 
+<Head>
+  <title>CldImage Examples - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldImage Examples" />
+
 # CldImage Examples
 
 ## Effects

diff --git a/docs/pages/components/cldogimage/basic-usage.mdx b/docs/pages/components/cldogimage/basic-usage.mdx
@@ -1,3 +1,13 @@
+import Head from 'next/head';
+
+import OgImage from '../../../components/OgImage';
+
+<Head>
+  <title>CldOgImage - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldOgImage" />
+
 # Getting Started with CldOgImage
 
 ## Basic Usage

diff --git a/docs/pages/components/cldogimage/configuration.mdx b/docs/pages/components/cldogimage/configuration.mdx
@@ -1,5 +1,14 @@
+import Head from 'next/head';
 import Callout from 'nextra-theme-docs/callout';
 
+import OgImage from '../../../components/OgImage';
+
+<Head>
+  <title>CldOgImage Configuration - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldOgImage Configuration" />
+
 # CldOgImage Configuration
 
 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.

diff --git a/docs/pages/components/cldogimage/examples.mdx b/docs/pages/components/cldogimage/examples.mdx
@@ -1,9 +1,17 @@
+import Head from 'next/head';
 import Callout from 'nextra-theme-docs/callout';
 
 import { CldImage } from '../../../../next-cloudinary';
 
+import OgImage from '../../../components/OgImage';
 import ImageGrid from '../../../components/ImageGrid';
 
+<Head>
+  <title>CldOgImage Examples - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldOgImage Examples" />
+
 # CldOgImage Examples
 
 <Callout emoji={false}>

diff --git a/docs/pages/components/clduploadbutton/basic-usage.mdx b/docs/pages/components/clduploadbutton/basic-usage.mdx
@@ -1,3 +1,13 @@
+import Head from 'next/head';
+
+import OgImage from '../../../components/OgImage';
+
+<Head>
+  <title>CldUploadButton - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldUploadButton" />
+
 # Getting Started with CldUploadButton
 
 ## Basic Usage

diff --git a/docs/pages/components/clduploadbutton/configuration.mdx b/docs/pages/components/clduploadbutton/configuration.mdx
@@ -1 +1,11 @@
+import Head from 'next/head';
+
+import OgImage from '../../../components/OgImage';
+
+<Head>
+  <title>CldUploadButton Configuration - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldUploadButton Configuration" />
+
 # CldUploadButton Configuration
diff --git a/docs/pages/components/clduploadbutton/examples.mdx b/docs/pages/components/clduploadbutton/examples.mdx
@@ -1,11 +1,19 @@
+import Head from 'next/head';
 import Callout from 'nextra-theme-docs/callout';
 
 import { CldUploadButton } from '../../../../next-cloudinary';
 
+import OgImage from '../../../components/OgImage';
 import ImageGrid from '../../../components/ImageGrid';
 
 import styles from '../../../styles/Docs.module.scss';
 
+<Head>
+  <title>CldUploadButton Examples - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldUploadButton Examples" />
+
 # CldUploadButton Examples
 
 ## Effects

diff --git a/docs/pages/components/clduploadwidget/basic-usage.mdx b/docs/pages/components/clduploadwidget/basic-usage.mdx
@@ -1,3 +1,13 @@
+import Head from 'next/head';
+
+import OgImage from '../../../components/OgImage';
+
+<Head>
+  <title>CldUploadWidget - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldUploadWidget" />
+
 # Getting Started with CldUploadWidget
 
 ## Basic Usage

diff --git a/docs/pages/components/clduploadwidget/configuration.mdx b/docs/pages/components/clduploadwidget/configuration.mdx
@@ -1 +1,11 @@
+import Head from 'next/head';
+
+import OgImage from '../../../components/OgImage';
+
+<Head>
+  <title>CldUploadWidget Configuration - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldUploadWidget Configuration" />
+
 # CldUploadWidget Configuration
diff --git a/docs/pages/components/clduploadwidget/examples.mdx b/docs/pages/components/clduploadwidget/examples.mdx
@@ -1,11 +1,19 @@
+import Head from 'next/head';
 import Callout from 'nextra-theme-docs/callout';
 
 import { CldUploadWidget } from '../../../../next-cloudinary';
 
+import OgImage from '../../../components/OgImage';
 import ImageGrid from '../../../components/ImageGrid';
 
 import styles from '../../../styles/Docs.module.scss';
 
+<Head>
+  <title>CldUploadWidget Examples - Next Cloudinary</title>
+</Head>
+
+<OgImage title="CldUploadWidget Examples" />
+
 # CldUploadWidget Examples
 
 ## Effects

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -3,26 +3,10 @@ import Bleed from 'nextra-theme-docs/bleed';
 
 import { CldImage, CldOgImage } from '../../next-cloudinary';
 
+import OgImage from '../components/OgImage';
 import ImageGrid from '../components/ImageGrid';
 
-<CldOgImage
-  src={`${process.env.EXAMPLES_DIRECTORY}/turtle`}
-  tint="100:0000FF:0p:FF1493:100p"
-  blur="2000"
-  removeBackground
-  overlays={[{
-    text: {
-      color: 'white',
-      fontFamily: 'Source Sans Pro',
-      fontSize: 200,
-      fontWeight: 'bold',
-      text: 'Next Cloudinary'
-    }
-  }]}
-  underlay="images/galaxy"
-  alt="Next Cloudinary over picture of a turtle"
-  twitterTitle="Next Cloudinary"
-/>
+<OgImage title="Next Cloudinary" />
 
 # Next Cloudinary
 

diff --git a/docs/pages/installation.mdx b/docs/pages/installation.mdx
@@ -1,14 +1,15 @@
+import Head from 'next/head';
 import Callout from 'nextra-theme-docs/callout';
 
-import { CldImage, CldOgImage } from '../../next-cloudinary';
+import OgImage from '../components/OgImage';
 
-<CldOgImage
-  src="images/galaxy"
-  text={{
-    text: 'Installation',
-    color: 'white'
-  }}
-/>
+import { CldImage } from '../../next-cloudinary';
+
+<Head>
+  <title>Installation - Next Cloudinary</title>
+</Head>
+
+<OgImage title="Installation" />
 
 # Installation
 

diff --git a/docs/pages/use-cases/background-removal.mdx b/docs/pages/use-cases/background-removal.mdx
@@ -1,5 +1,15 @@
+import Head from 'next/head';
+
+import OgImage from '../../components/OgImage';
+
 import { CldImage } from '../../../next-cloudinary';
 
+<Head>
+  <title>Background Removal - Next Cloudinary</title>
+</Head>
+
+<OgImage title="Background Removal" />
+
 # Background Removal
 
 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.

diff --git a/docs/pages/use-cases/image-overlays.mdx b/docs/pages/use-cases/image-overlays.mdx
@@ -1,5 +1,15 @@
+import Head from 'next/head';
+
+import OgImage from '../../components/OgImage';
+
 import { CldImage } from '../../../next-cloudinary';
 
+<Head>
+  <title>Image Overlays - Next Cloudinary</title>
+</Head>
+
+<OgImage title="Image Overlays" />
+
 # Image Overlays
 
 You can add images on top of other images by using image-based overlays.

diff --git a/docs/pages/use-cases/image-underlays.mdx b/docs/pages/use-cases/image-underlays.mdx
@@ -1,5 +1,15 @@
+import Head from 'next/head';
+
+import OgImage from '../../components/OgImage';
+
 import { CldImage } from '../../../next-cloudinary';
 
+<Head>
+  <title>Image Underlays - Next Cloudinary</title>
+</Head>
+
+<OgImage title="Image Underlays" />
+
 # Image Underlays
 
 Underlays function very similar to overlays in terms of options, however they **do not support text**.

diff --git a/docs/pages/use-cases/social-media-card.mdx b/docs/pages/use-cases/social-media-card.mdx
@@ -1,8 +1,17 @@
+import Head from 'next/head';
 import Callout from 'nextra-theme-docs/callout';
 
+import OgImage from '../../components/OgImage';
+
 import { CldImage } from '../../../next-cloudinary';
 
-# Social Media Card
+<Head>
+  <title>Social Media Cards - Next Cloudinary</title>
+</Head>
+
+<OgImage title="Social Media Cards" />
+
+# Social Media Cards
 
 <Callout emoji={false}>
   CldOgImage does not render an `<img>` tag, meaning it can't be visually embedded on a page. The following examples make use of the `<CldImage>` tag to showcase what's possible.

diff --git a/docs/pages/use-cases/text-overlays.mdx b/docs/pages/use-cases/text-overlays.mdx
@@ -1,5 +1,15 @@
+import Head from 'next/head';
+
+import OgImage from '../../components/OgImage';
+
 import { CldImage } from '../../../next-cloudinary';
 
+<Head>
+  <title>Text Overlays - Next Cloudinary</title>
+</Head>
+
+<OgImage title="Text Overlays" />
+
 # Text Overlays
 
 You can add text on top of your image with text-based overlays.

diff --git a/next-cloudinary/src/constants/qualifiers.js b/next-cloudinary/src/constants/qualifiers.js
@@ -34,6 +34,9 @@ export const position = {
 }
 
 export const text = {
+  alignment: {
+    qualifier: 'alignment'
+  },
   border: {
     qualifier: 'bo',
     location: 'primary'