Skip to content

Commit

Permalink
chore(examples): refresh cms-prismic example (#40121)
Browse files Browse the repository at this point in the history
## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

**Note**: `pnpm lint` fails on code unrelated to the changes in this PR.

This PR updates the [Prismic](https://prismic.io/) CMS example
(`examples/cms-prismic`) to use the latest Prismic libraries, tools, and
conventions.

- Uses `npx @slicemachine/init` to bootstrap new Prismic accounts and
content repositories.

- Uses [Slice
Machine](https://prismic.io/docs/technologies/slice-machine) to model
content.

- Uses [Slices](https://prismic.io/docs/technologies/slice) to write
post content.

- Uses the latest versions of the following packages:

  - `@prismicio/client`
  - `@prismicio/helpers`
  - `@prismicio/react`
  - `@prismicio/next`

- Adds generated TypeScript types for Prismic content. The example
remains as a JavaScript codebase (i.e. not TypeScript), but makes use of
the types via JSDoc.

Co-authored-by: Balázs Orbán <info@balazsorban.com>
  • Loading branch information
angeloashmore and balazsorban44 committed Oct 1, 2022
1 parent cfd58ae commit 3ede313
Show file tree
Hide file tree
Showing 71 changed files with 1,490 additions and 700 deletions.
3 changes: 0 additions & 3 deletions examples/cms-prismic/.env.local.example

This file was deleted.

@@ -0,0 +1,31 @@
{
"id": "mock-doc-id",
"url": null,
"type": "author",
"href": null,
"tags": [],
"first_publication_date": "1970-01-01T00:00:01+0000",
"last_publication_date": "1970-01-01T00:00:01+0000",
"slugs": [],
"linked_documents": [],
"lang": "en-us",
"alternate_languages": [],
"data": {
"name": [
{
"type": "heading1",
"text": "Border",
"spans": []
}
],
"picture": {
"dimensions": {
"width": 900,
"height": 500
},
"alt": null,
"copyright": null,
"url": "https://images.unsplash.com/photo-1587614295999-6c1c13675117"
}
}
}
@@ -0,0 +1,44 @@
{
"id": "mock-doc-id",
"url": null,
"type": "post",
"href": null,
"tags": [],
"first_publication_date": "1970-01-01T00:00:01+0000",
"last_publication_date": "1970-01-01T00:00:01+0000",
"slugs": [],
"linked_documents": [],
"lang": "en-us",
"alternate_languages": [],
"data": {
"title": [
{
"type": "heading1",
"text": "Shine",
"spans": []
}
],
"date": "2014-07-30",
"author": {
"id": "mock_document_id",
"link_type": "Document",
"type": "author",
"tags": [],
"lang": "en-us",
"slug": null,
"first_publication_date": "1970-01-01T00:00:01+0000",
"last_publication_date": "1970-01-01T01:00:00+0000"
},
"excerpt": "knew",
"cover_image": {
"dimensions": {
"width": 900,
"height": 500
},
"alt": null,
"copyright": null,
"url": "https://images.unsplash.com/photo-1587614295999-6c1c13675117"
},
"slices": []
}
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,26 @@
import MyComponent from '../../../../slices/Image'

export default {
title: 'slices/Image',
}

export const _Default = () => (
<MyComponent
slice={{
variation: 'default',
version: 'sktwi1xtmkfgx8626',
items: [{}],
primary: {
image: {
dimensions: { width: 900, height: 500 },
alt: null,
copyright: null,
url: 'https://images.unsplash.com/photo-1493397212122-2b85dda8106b',
},
},
slice_type: 'image',
id: '_Default',
}}
/>
)
_Default.storyName = ''
19 changes: 19 additions & 0 deletions examples/cms-prismic/.slicemachine/assets/slices/Image/mocks.json
@@ -0,0 +1,19 @@
[
{
"variation": "default",
"version": "sktwi1xtmkfgx8626",
"items": [{}],
"primary": {
"image": {
"dimensions": {
"width": 900,
"height": 500
},
"alt": null,
"copyright": null,
"url": "https://images.unsplash.com/photo-1493397212122-2b85dda8106b"
}
},
"slice_type": "image"
}
]
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,42 @@
import MyComponent from '../../../../slices/Text'

export default {
title: 'slices/Text',
}

export const _Default = () => (
<MyComponent
slice={{
variation: 'default',
version: 'sktwi1xtmkfgx8626',
items: [{}],
primary: {
text: [
{
type: 'paragraph',
text: 'Pariatur consequat eu eiusmod cillum velit excepteur ex sit sit dolore dolor labore ullamco.',
spans: [],
},
{
type: 'paragraph',
text: 'Et nisi elit dolor pariatur pariatur nisi non est cillum aute.',
spans: [],
},
{
type: 'paragraph',
text: 'Officia deserunt sunt ad ut anim quis.',
spans: [],
},
{
type: 'paragraph',
text: 'Est consequat enim id quis consectetur exercitation reprehenderit. Nulla ut ut consequat ipsum nulla duis consequat nostrud eiusmod eiusmod ex incididunt consequat consequat minim. Esse adipisicing ullamco officia incididunt excepteur dolor nisi magna incididunt adipisicing anim.',
spans: [],
},
],
},
slice_type: 'text',
id: '_Default',
}}
/>
)
_Default.storyName = ''
32 changes: 32 additions & 0 deletions examples/cms-prismic/.slicemachine/assets/slices/Text/mocks.json
@@ -0,0 +1,32 @@
[
{
"variation": "default",
"version": "sktwi1xtmkfgx8626",
"items": [{}],
"primary": {
"text": [
{
"type": "paragraph",
"text": "Pariatur consequat eu eiusmod cillum velit excepteur ex sit sit dolore dolor labore ullamco.",
"spans": []
},
{
"type": "paragraph",
"text": "Et nisi elit dolor pariatur pariatur nisi non est cillum aute.",
"spans": []
},
{
"type": "paragraph",
"text": "Officia deserunt sunt ad ut anim quis.",
"spans": []
},
{
"type": "paragraph",
"text": "Est consequat enim id quis consectetur exercitation reprehenderit. Nulla ut ut consequat ipsum nulla duis consequat nostrud eiusmod eiusmod ex incididunt consequat consequat minim. Esse adipisicing ullamco officia incididunt excepteur dolor nisi magna incididunt adipisicing anim.",
"spans": []
}
]
},
"slice_type": "text"
}
]
140 changes: 140 additions & 0 deletions examples/cms-prismic/.slicemachine/libraries-state.json
@@ -0,0 +1,140 @@
{
"slices": {
"components": {
"image": {
"library": "slices",
"id": "image",
"name": "Image",
"description": "Image",
"model": {
"id": "image",
"type": "SharedSlice",
"name": "Image",
"description": "Image",
"variations": [
{
"id": "default",
"name": "Default",
"docURL": "...",
"version": "sktwi1xtmkfgx8626",
"description": "Image",
"primary": {
"image": {
"type": "Image",
"config": {
"label": "Image",
"constraint": {},
"thumbnails": []
}
}
},
"items": {},
"imageUrl": "https://images.prismic.io/slice-machine/621a5ec4-0387-4bc5-9860-2dd46cbc07cd_default_ss.png?auto=compress,format"
}
]
},
"mocks": {
"default": {
"variation": "default",
"version": "sktwi1xtmkfgx8626",
"items": [{}],
"primary": {
"image": {
"dimensions": {
"width": 900,
"height": 500
},
"alt": null,
"copyright": null,
"url": "https://images.unsplash.com/photo-1493397212122-2b85dda8106b"
}
},
"slice_type": "image"
}
},
"meta": {
"fileName": "index",
"extension": "tsx"
},
"screenshotPaths": {
"default": {
"path": "/Users/angeloashmore/projects/prismic/nextjs/examples/cms-prismic/.slicemachine/assets/slices/Image/default/preview.png",
"width": 800,
"height": 444
}
}
},
"text": {
"library": "slices",
"id": "text",
"name": "Text",
"description": "Text",
"model": {
"id": "text",
"type": "SharedSlice",
"name": "Text",
"description": "Text",
"variations": [
{
"id": "default",
"name": "Default",
"docURL": "...",
"version": "sktwi1xtmkfgx8626",
"description": "Text",
"primary": {
"text": {
"type": "StructuredText",
"config": {
"label": "Text",
"placeholder": "Rich text with formatting",
"allowTargetBlank": true,
"multi": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl"
}
}
},
"items": {},
"imageUrl": "https://images.prismic.io/slice-machine/621a5ec4-0387-4bc5-9860-2dd46cbc07cd_default_ss.png?auto=compress,format"
}
]
},
"mocks": {
"default": {
"variation": "default",
"version": "sktwi1xtmkfgx8626",
"items": [{}],
"primary": {
"text": [
{
"type": "paragraph",
"text": "Pariatur consequat eu eiusmod cillum velit excepteur ex sit sit dolore dolor labore ullamco.",
"spans": []
},
{
"type": "paragraph",
"text": "Et nisi elit dolor pariatur pariatur nisi non est cillum aute.",
"spans": []
},
{
"type": "paragraph",
"text": "Officia deserunt sunt ad ut anim quis.",
"spans": []
},
{
"type": "paragraph",
"text": "Est consequat enim id quis consectetur exercitation reprehenderit. Nulla ut ut consequat ipsum nulla duis consequat nostrud eiusmod eiusmod ex incididunt consequat consequat minim. Esse adipisicing ullamco officia incididunt excepteur dolor nisi magna incididunt adipisicing anim.",
"spans": []
}
]
},
"slice_type": "text"
}
},
"meta": {
"fileName": "index",
"extension": "tsx"
},
"screenshotPaths": {}
}
}
}
}
43 changes: 43 additions & 0 deletions examples/cms-prismic/.slicemachine/mock-config.json
@@ -0,0 +1,43 @@
{
"_cts": {
"author": {
"name": {
"config": {
"patternType": "HEADING",
"blocks": 1
}
}
},
"post": {
"title": {
"config": {
"patternType": "HEADING",
"blocks": 1
}
}
}
},
"slices": {
"Text": {
"default": {
"primary": {
"text": {
"config": {
"patternType": "PARAGRAPH",
"blocks": 4
}
}
}
}
},
"Image": {
"default": {
"primary": {
"image": {
"content": "https://images.unsplash.com/photo-1493397212122-2b85dda8106b"
}
}
}
}
}
}

0 comments on commit 3ede313

Please sign in to comment.