Skip to content

Commit

Permalink
feature: add CampgroundJsonLd component (#1292)
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanmercadante committed Oct 28, 2023
1 parent e5e571c commit 119f847
Show file tree
Hide file tree
Showing 12 changed files with 779 additions and 1 deletion.
105 changes: 105 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ If you are using **`pages`** directory then `NextSeo` is **exactly what you need
- [Article](#article-1)
- [Breadcrumb](#breadcrumb)
- [Blog](#blog)
- [Campground](#campground)
- [Recipe](#recipe)
- [Sitelinks Search Box](#sitelinks-search-box)
- [Course](#course)
Expand Down Expand Up @@ -1089,6 +1090,7 @@ Below you will find a very basic page implementing each of the available JSON-LD
- [Article](#article-1)
- [Breadcrumb](#breadcrumb)
- [Blog](#blog)
- [Campground](#campground)
- [Recipe](#recipe)
- [Sitelinks Search Box](#sitelinks-search-box)
- [Course](#course)
Expand Down Expand Up @@ -1243,6 +1245,109 @@ const Page = () => (
export default Page;
```

### Campground

```jsx
import { CampgroundJsonLd } from 'next-seo';

const Page = () => (
<>
<h1>Campground JSON-LD</h1>
<CampgroundJsonLd
id="https://www.example.com/campground/rip-van-winkle-campground"
name="Rip Van Winkle Campgrounds"
url="https://www.example.com/campground"
telephone="+18452468114"
images={['https://example.com/photos/1x1/photo.jpg']}
address={{
streetAddress: '149 Blue Mountain Rd',
addressLocality: 'Saugerties',
addressRegion: 'NY',
postalCode: '12477',
addressCountry: 'US',
}}
description="Description about Rip Van Winkle Campgrounds"
geo={{
latitude: '42.092599',
longitude: '-74.018580',
}}
openingHours={[
{
opens: '09:00',
closes: '17:00',
dayOfWeek: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
],
validFrom: '2019-12-23',
validThrough: '2020-04-02',
},
]}
petsAllowed
rating={{
ratingValue: '5',
ratingCount: '18',
}}
amenityFeature={{
name: 'Showers',
value: true,
}}
priceRange="$$"
/>
</>
);

export default Page;
```

**Required properties**

| Property | Info |
| ------------------------- | ------------------------------------------------------------------- |
| `@id` | Globally unique ID of the specific campground in the form of a URL. |
| `address` | Address of the specific campground location |
| `address.addressCountry` | The 2-letter ISO 3166-1 alpha-2 country code |
| `address.addressLocality` | City |
| `address.addressRegion` | State or province, if applicable. |
| `address.postalCode` | Postal or zip code. |
| `address.streetAddress` | Street number, street name, and unit number. |
| `name` | Campground name. |
| `description` | Campground description. |

**Supported properties**

| Property | Info |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `geo` | Geographic coordinates of the campground. |
| `geo.latitude` | The latitude of the campground location |
| `geo.longitude` | The longitude of the campground location |
| `images` | An image or images of the campground. Required for valid markup depending on the type |
| `telephone` | A campground phone number meant to be the primary contact method for customers. |
| `url` | The fully-qualified URL of the specific campground. |
| `openingHours` | Opening hour specification of the campground. You can provide this as a single object, or an array of objects with the properties below. |
| `openingHours.opens` | The opening hour of the place or service on the given day(s) of the week. |
| `openingHours.closes` | The closing hour of the place or service on the given day(s) of the week. |
| `openingHours.dayOfWeek` | The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to [DayOfWeek](https://schema.org/DayOfWeek) |
| `openingHours.validFrom` | The date when the item becomes valid. |
| `openingHours.validThrough` | The date after when the item is not valid. |
| `isAccessibleForFree` | Whether or not the campground is accessible for free. |
| `petsAllowed` | Whether or not the campgroud allows pets. |
| `amenityFeature` | An amenity feature (e.g. a characteristic or service) of the campground. |
| `amenityFeature.name` | The name of the amenity. |
| `amenityFeature.value` | The value of the amenity. |
| `priceRange` | The price range of the campground, for example $$$. |
| `rating` | The average rating of the campground based on multiple ratings or reviews. |
| `rating.ratingValue` | The rating for the content. |
| `rating.ratingCount` | The count of total number of ratings. |

**Other**
| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. |

### Recipe

```jsx
Expand Down
145 changes: 145 additions & 0 deletions cypress/e2e/campground.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
import { assertSchema } from '@cypress/schema-tools';
import schemas from '../schemas';

describe('Campground JSON-LD', () => {
it('matches schema', () => {
cy.visit('http://localhost:3000/jsonld/campground');
cy.get('head script[type="application/ld+json"]').then(tags => {
const jsonLD = JSON.parse(tags[0].innerHTML);
console.log('jsonLD', jsonLD);
assertSchema(schemas)('Campground', '1.0.0')(jsonLD);
});
});

it('renders with one amenity feature', () => {
cy.visit('http://localhost:3000/jsonld/campground');
cy.get('head script[type="application/ld+json"]').then(tags => {
const jsonLD = JSON.parse(tags[0].innerHTML);
expect(jsonLD).to.deep.equal({
'@context': 'https://schema.org',
'@type': 'Campground',
'@id': 'https://www.example.com/campground/rip-van-winkle-campground',
name: 'Rip Van Winkle Campgrounds',
description: 'Description about Rip Van Winkle Campgrounds',
url: 'https://www.example.com/campground',
telephone: '+18452468114',
image: ['https://example.com/photos/1x1/photo.jpg'],
address: {
'@type': 'PostalAddress',
streetAddress: '149 Blue Mountain Rd',
addressLocality: 'Saugerties',
addressRegion: 'NY',
postalCode: '12477',
addressCountry: 'US',
},
geo: {
'@type': 'GeoCoordinates',
latitude: '42.092599',
longitude: '-74.018580',
},
openingHoursSpecification: [
{
opens: '09:00',
closes: '17:00',
dayOfWeek: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
],
validFrom: '2019-12-23',
validThrough: '2020-04-02',
'@type': 'OpeningHoursSpecification',
},
],
petsAllowed: true,
aggregateRating: {
ratingValue: '5',
ratingCount: '18',
'@type': 'AggregateRating',
},
amenityFeature: {
'@type': 'LocationFeatureSpecification',
name: 'Showers',
value: true,
},
priceRange: '$$',
});
});
});

it('renders with multiple amenity features', () => {
cy.visit('http://localhost:3000/jsonld/campground/multipleAmenityFeatures');
cy.get('head script[type="application/ld+json"]').then(tags => {
const jsonLD = JSON.parse(tags[0].innerHTML);
expect(jsonLD).to.deep.equal({
'@context': 'https://schema.org',
'@type': 'Campground',
'@id': 'https://www.example.com/campground/rip-van-winkle-campground',
name: 'Rip Van Winkle Campgrounds',
description: 'Description about Rip Van Winkle Campgrounds',
url: 'https://www.example.com/campground',
telephone: '+18452468114',
image: ['https://example.com/photos/1x1/photo.jpg'],
address: {
'@type': 'PostalAddress',
streetAddress: '149 Blue Mountain Rd',
addressLocality: 'Saugerties',
addressRegion: 'NY',
postalCode: '12477',
addressCountry: 'US',
},
geo: {
'@type': 'GeoCoordinates',
latitude: '42.092599',
longitude: '-74.018580',
},
openingHoursSpecification: [
{
opens: '09:00',
closes: '17:00',
dayOfWeek: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
],
validFrom: '2019-12-23',
validThrough: '2020-04-02',
'@type': 'OpeningHoursSpecification',
},
],
petsAllowed: true,
aggregateRating: {
ratingValue: '5',
ratingCount: '18',
'@type': 'AggregateRating',
},
amenityFeature: [
{
'@type': 'LocationFeatureSpecification',
name: 'Showers',
value: true,
},
{
'@type': 'LocationFeatureSpecification',
name: 'RV Hookup',
value: false,
},
{
'@type': 'LocationFeatureSpecification',
name: 'Campfire',
value: true,
},
],
priceRange: '$$',
});
});
});
});
Loading

0 comments on commit 119f847

Please sign in to comment.