feat: CustomJsonLd for carousel (#949)

Co-authored-by: Gary Meehan <garymeehan@outlook.com>

Author: mkaynakk

README.md

@@ -102,6 +102,7 @@ If you are using **`pages`** directory then `NextSeo` is **exactly what you need
     - [Course](#course-1)
     - [Movie](#movie)
     - [Recipe](#recipe-1)
+    - [Custom](#custom)
   - [Software App](#software-app)
   - [Organization](#organization)
   - [Brand](#brand)
@@ -3203,6 +3204,50 @@ export default () => (
 | `instructions.text` | The directions of the instruction step. |
 | `url`               | URL of the item's detailed page.        |
 
+#### Custom
+
+```jsx
+import React from 'react';
+import { CarouselJsonLd } from 'next-seo';
+
+export default () => (
+  <>
+    <h1>Carousel Custom JSON-LD</h1>
+    <CarouselJsonLd
+      ofType="custom"
+      url="http://example.com/custom-carousel.html"
+      name="Carousel Custom"
+      description="Custom Carousel Description"
+      data={[
+        {
+          position: 1,
+          type: 'CustomList',
+          name: 'Custom 1',
+        },
+        {
+          position: 2,
+          type: 'CustomList',
+          name: 'Custom 2',
+        },
+      ]}
+    />
+  </>
+);
+```
+
+**Data Required Properties**
+
+| Property | Info              |
+| -------- | ----------------- |
+| `type`   | Type of the item. |
+| `name`   | Name of the item. |
+
+**Data Recommended properties**
+
+| Property              | Info                                                                      |
+| --------------------- | ------------------------------------------------------------------------- |
+| `position`            | Position of the item. If not pass property, it will increase regularly.   |
+
 ### Software App
 
 ```jsx

cypress/e2e/carousel.spec.js

@@ -331,4 +331,40 @@ describe('Carousel JSON-LD', () => {
         expect(jsonLD).to.deep.equal(expectedObject);
       });
   });
+
+  it('Carousel Custom Matches', () => {
+    cy.visit('http://localhost:3000/carousel-jsonld/custom');
+    cy.get('head script[type="application/ld+json"]')
+      .should('have.length', 1)
+      .then(tags => {
+        const jsonLD = JSON.parse(tags[0].innerHTML);
+        const expectedObject = {
+          '@context': 'https://schema.org',
+          '@type': 'ItemList',
+          url: 'http://example.com/custom-carousel.html',
+          name: 'Carousel Custom',
+          description: 'Custom Carousel Description',
+          itemListElement: [
+            {
+              '@type': 'ListItem',
+              position: 1,
+              item: {
+                '@type': 'CustomList',
+                name: 'Custom 1',
+              },
+            },
+            {
+              '@type': 'ListItem',
+              position: 2,
+              item: {
+                '@type': 'CustomList',
+                name: 'Custom 2',
+              },
+            },
+          ],
+        };
+
+        expect(jsonLD).to.deep.equal(expectedObject);
+      });
+  });
 });

e2e/pages/carousel-jsonld/custom.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CarouselJsonLd } from '../../../';
+import Links from '../../components/links';
+
+const Custom = () => (
+  <>
+    <h1>Carousel Custom JSON-LD</h1>
+
+    <CarouselJsonLd
+      ofType="custom"
+      url="http://example.com/custom-carousel.html"
+      name="Carousel Custom"
+      description="Custom Carousel Description"
+      data={[
+        {
+          position: 1,
+          type: 'CustomList',
+          name: 'Custom 1',
+        },
+        {
+          position: 2,
+          type: 'CustomList',
+          name: 'Custom 2',
+        },
+      ]}
+    />
+
+    <Links />
+  </>
+);
+
+export default Custom;

src/jsonld/carousel.tsx

@@ -37,14 +37,21 @@ export interface MovieJsonLdProps {
   aggregateRating?: AggregateRating;
 }
 
+export interface CustomJsonLdProps {
+  position?: number;
+  name: string;
+  type: string;
+}
+
 export interface CarouselJsonLdProps extends JsonLdProps {
-  ofType: 'default' | 'movie' | 'recipe' | 'course';
+  ofType: 'default' | 'movie' | 'recipe' | 'course' | 'custom';
   data:
     | any
     | DefaultDataProps[]
     | MovieJsonLdProps[]
     | ExtendedCourseJsonLdProps[]
-    | ExtendedRecipeJsonLdProps[];
+    | ExtendedRecipeJsonLdProps[]
+    | CustomJsonLdProps[];
 }
 
 function CarouselJsonLd({
@@ -147,11 +154,22 @@ function CarouselJsonLd({
             },
           }),
         );
+
+      case 'custom':
+        return (data as CustomJsonLdProps[]).map((item, index) => ({
+          '@type': 'ListItem',
+          position: item.position ?? index + 1,
+          item: {
+            '@type': item.type,
+            name: item.name,
+          },
+        }));
     }
   }
 
   const jsonLdData = {
     '@type': 'ItemList',
+    ...rest,
     itemListElement: generateList(data, ofType),
     ...rest,
   };