diff --git a/examples/cms-prismic/.env.local.example b/examples/cms-prismic/.env.local.example deleted file mode 100644 index 3e1376e5da..0000000000 --- a/examples/cms-prismic/.env.local.example +++ /dev/null @@ -1,3 +0,0 @@ -PRISMIC_API_TOKEN= -PRISMIC_REPOSITORY_NAME= -PRISMIC_REPOSITORY_LOCALE="en-us" \ No newline at end of file diff --git a/examples/cms-prismic/.slicemachine/assets/customtypes/author/mocks.json b/examples/cms-prismic/.slicemachine/assets/customtypes/author/mocks.json new file mode 100644 index 0000000000..26e6a8f6c4 --- /dev/null +++ b/examples/cms-prismic/.slicemachine/assets/customtypes/author/mocks.json @@ -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" + } + } +} diff --git a/examples/cms-prismic/.slicemachine/assets/customtypes/post/mocks.json b/examples/cms-prismic/.slicemachine/assets/customtypes/post/mocks.json new file mode 100644 index 0000000000..f68f77c77e --- /dev/null +++ b/examples/cms-prismic/.slicemachine/assets/customtypes/post/mocks.json @@ -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": [] + } +} diff --git a/examples/cms-prismic/.slicemachine/assets/slices/Image/default/preview.png b/examples/cms-prismic/.slicemachine/assets/slices/Image/default/preview.png new file mode 100644 index 0000000000..bbc0a0541e Binary files /dev/null and b/examples/cms-prismic/.slicemachine/assets/slices/Image/default/preview.png differ diff --git a/examples/cms-prismic/.slicemachine/assets/slices/Image/index.stories.js b/examples/cms-prismic/.slicemachine/assets/slices/Image/index.stories.js new file mode 100644 index 0000000000..3608f818e4 --- /dev/null +++ b/examples/cms-prismic/.slicemachine/assets/slices/Image/index.stories.js @@ -0,0 +1,26 @@ +import MyComponent from '../../../../slices/Image' + +export default { + title: 'slices/Image', +} + +export const _Default = () => ( + +) +_Default.storyName = '' diff --git a/examples/cms-prismic/.slicemachine/assets/slices/Image/mocks.json b/examples/cms-prismic/.slicemachine/assets/slices/Image/mocks.json new file mode 100644 index 0000000000..fb069c24d0 --- /dev/null +++ b/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" + } +] diff --git a/examples/cms-prismic/.slicemachine/assets/slices/Text/default/preview.png b/examples/cms-prismic/.slicemachine/assets/slices/Text/default/preview.png new file mode 100644 index 0000000000..3a7113f813 Binary files /dev/null and b/examples/cms-prismic/.slicemachine/assets/slices/Text/default/preview.png differ diff --git a/examples/cms-prismic/.slicemachine/assets/slices/Text/index.stories.js b/examples/cms-prismic/.slicemachine/assets/slices/Text/index.stories.js new file mode 100644 index 0000000000..0450789b49 --- /dev/null +++ b/examples/cms-prismic/.slicemachine/assets/slices/Text/index.stories.js @@ -0,0 +1,42 @@ +import MyComponent from '../../../../slices/Text' + +export default { + title: 'slices/Text', +} + +export const _Default = () => ( + +) +_Default.storyName = '' diff --git a/examples/cms-prismic/.slicemachine/assets/slices/Text/mocks.json b/examples/cms-prismic/.slicemachine/assets/slices/Text/mocks.json new file mode 100644 index 0000000000..3d5c841a10 --- /dev/null +++ b/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" + } +] diff --git a/examples/cms-prismic/.slicemachine/libraries-state.json b/examples/cms-prismic/.slicemachine/libraries-state.json new file mode 100644 index 0000000000..72b006e5d9 --- /dev/null +++ b/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": {} + } + } + } +} diff --git a/examples/cms-prismic/.slicemachine/mock-config.json b/examples/cms-prismic/.slicemachine/mock-config.json new file mode 100644 index 0000000000..ab5e89591e --- /dev/null +++ b/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" + } + } + } + } + } +} diff --git a/examples/cms-prismic/README.md b/examples/cms-prismic/README.md index 2528052c84..fcf186bd17 100644 --- a/examples/cms-prismic/README.md +++ b/examples/cms-prismic/README.md @@ -49,122 +49,79 @@ pnpm create next-app --example cms-prismic cms-prismic-app ## Configuration -### Step 1. Create an account and a repository on Prismic +### Step 1. Create an account and repository on Prismic -First, [create an account on Prismic](https://prismic.io/). +First, create a Prismic account and repository with the following command: -After creating an account, create a **repository** from the [dashboard](https://prismic.io/dashboard/) and assign to it any name of your liking. +```sh +npx @slicemachine/init +``` -### Step 2. Create an `author` type +This command will: -From the repository page, create a new **custom type**: +1. Ask you to log in to Prismic or create an account. +2. Create a new Prismic repository with premade Author and Post content models. +3. Connect the Prismic repository to your app. -- The name should be `author`. +**Optional**: To see the premade content models, start the [Slice Machine](https://prismic.io/docs/technologies/slice-machine) app. -Next, add these fields (you don't have to modify the settings): +```sh +npm run slicemachine +``` -- `name` - **Key Text** field -- `picture` - **Image** field +Slice Machine should be available on once started. -Alternatively, you can copy the JSON in [`types/author.json`](types/author.json), then click on **JSON editor** and paste it there. +### Step 2. Populate Content -Save the type and continue. +Go to the [Prismic dashboard](https://prismic.io/dashboard) and select your Prismic repository. -### Step 3. Create a `post` type - -From the repository page, create a new **custom type**: - -- The name should be `post`. - -Next, add these fields (you don't have to modify the settings unless specified): - -- `title` - **Title** field -- `content` - **Rich Text** field -- `excerpt` - **Key Text** field -- `coverimage` - **Image** field -- `date` - **Date** field -- `author` - **Content relationship** field, you may also add `author` to the **Constraint to custom type** option to only accept documents from the `author` type. -- `slug` - **UID** field. - -Alternatively, you can copy the JSON in [`types/post.json`](types/post.json), then click on **JSON editor** and paste it there. - -Save the type and continue. - -### Step 4. Populate Content - -Go to the **Content** page, it's in the menu at the top left, then click on **Create new** and select the **author** type: +Once in, click on **Create new** and select the **Author** type: - You just need **1 author document**. - Use dummy data for the text. - For the image, you can download one from [Unsplash](https://unsplash.com/). -Next, select **Post** and create a new document. +Save and publish the document. + +Next, go back to the documents list, click on **Create new** and select the **Post** type: - We recommend creating at least **2 Post documents**. - Use dummy data for the text. -- You can write markdown for the **content** field. +- You can use the Text and Image Slices to create content. - For images, you can download them from [Unsplash](https://unsplash.com/). - Pick the **author** you created earlier. **Important:** For each document, you need to click **Publish** after saving. If not, the document will be in the draft state. -### Step 5. Set up environment variables - -Follow the instructions in [this post](https://intercom.help/prismicio/en/articles/1036153-generating-an-access-token) to generate a new access token. - -Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git): +### Step 3. Run Next.js in development mode ```bash -cp .env.local.example .env.local -``` - -Then set each variable on `.env.local`: - -- `PRISMIC_API_TOKEN` should be the **Permanent access token** you just created -- `PRISMIC_REPOSITORY_NAME` is the name of your repository (the one in the URL) -- `PRISMIC_REPOSITORY_LOCALE` is the locale of your repository. Defaults to `en-us` - -Your `.env.local` file should look like this: - -```bash -PRISMIC_API_TOKEN=... -PRISMIC_REPOSITORY_NAME=... -PRISMIC_REPOSITORY_LOCALE=... -``` - -Make sure the locale matches your settings in the Prismic dashboard. - -### Step 6. Run Next.js in development mode - -```bash -npm install npm run dev # or -yarn install yarn dev ``` Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). -### Step 7. Try preview mode +### Step 4. Try preview mode -On your repository page, go to **Settings**, click on **Previews** and then **Create a New Preview** for development, fill the form like so: +On your repository page, go to **Settings**, click on **Previews**, and then **Create a New Preview**. Fill the form like so for development previews: -- **Site Name**: may be anything, like `development` +- **Site Name**: may be anything, like "Development" - **Domain of Your Application**: `http://localhost:3000` - **Link Resolver**: `/api/preview` -Once saved, go to one of the posts you've created and: +Once saved, go to one of the posts you created and: - **Update the title**. For example, you can add `[Draft]` in front of the title. - Click **Save**, but **DO NOT** click **Publish**. By doing this, the post will be in draft state. -- Right next to the **Publish** button you should see the **Preview** button, displayed with an eye icon. Click on it! +- Right next to the **Publish** button, you should see the **Preview** button, displayed with an eye icon. Click on it! -You should now be able to see the updated title. To exit preview mode, you can click on **Click here to exit preview mode** at the top of the page. +You should now be able to see the updated title. To exit preview mode, click on the "x" icon in the purple Prismic toolbar in the bottom left corner of the page. -### Step 8. Deploy on Vercel +### Step 5. Deploy on Vercel You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). @@ -172,10 +129,8 @@ You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example). -**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file. - #### Deploy from Our Template Alternatively, you can deploy using our template by clicking on the Deploy button below. -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prismic&project-name=cms-prismic&repository-name=cms-prismic&env=PRISMIC_API_TOKEN,PRISMIC_REPOSITORY_NAME&envDescription=Required%20to%20connect%20the%20app%20with%20Prismic&envLink=https://vercel.link/cms-prismic-env) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prismic&project-name=cms-prismic) diff --git a/examples/cms-prismic/components/alert.js b/examples/cms-prismic/components/alert.tsx similarity index 91% rename from examples/cms-prismic/components/alert.js rename to examples/cms-prismic/components/alert.tsx index 2994d59fbd..a0fccebcf1 100644 --- a/examples/cms-prismic/components/alert.js +++ b/examples/cms-prismic/components/alert.tsx @@ -1,8 +1,14 @@ -import Container from './container' import cn from 'classnames' + import { EXAMPLE_PATH } from '../lib/constants' -export default function Alert({ preview }) { +import Container from './container' + +type AlertProps = { + preview: boolean +} + +export default function Alert({ preview }: AlertProps) { return (
-
- {name[0].text} -
-
{name}
-
- ) -} diff --git a/examples/cms-prismic/components/avatar.tsx b/examples/cms-prismic/components/avatar.tsx new file mode 100644 index 0000000000..06071d81c7 --- /dev/null +++ b/examples/cms-prismic/components/avatar.tsx @@ -0,0 +1,22 @@ +import { PrismicNextImage } from '@prismicio/next' +import { ImageField } from '@prismicio/types' + +type AvatarProps = { + name: string + picture: ImageField +} + +export default function Avatar({ name, picture }: AvatarProps) { + return ( +
+
+ +
+
{name}
+
+ ) +} diff --git a/examples/cms-prismic/components/container.js b/examples/cms-prismic/components/container.js deleted file mode 100644 index fc1c29dfb0..0000000000 --- a/examples/cms-prismic/components/container.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Container({ children }) { - return
{children}
-} diff --git a/examples/cms-prismic/components/container.tsx b/examples/cms-prismic/components/container.tsx new file mode 100644 index 0000000000..bff89b5b99 --- /dev/null +++ b/examples/cms-prismic/components/container.tsx @@ -0,0 +1,7 @@ +type ContainerProps = { + children: React.ReactNode +} + +export default function Container({ children }: ContainerProps) { + return
{children}
+} diff --git a/examples/cms-prismic/components/cover-image.js b/examples/cms-prismic/components/cover-image.js deleted file mode 100644 index 0acaa9c23b..0000000000 --- a/examples/cms-prismic/components/cover-image.js +++ /dev/null @@ -1,29 +0,0 @@ -import Image from 'next/image' -import Link from 'next/link' -import cn from 'classnames' - -export default function CoverImage({ title, url, slug }) { - const image = ( - {`Cover - ) - - return ( -
- {slug ? ( - - {image} - - ) : ( - image - )} -
- ) -} diff --git a/examples/cms-prismic/components/cover-image.tsx b/examples/cms-prismic/components/cover-image.tsx new file mode 100644 index 0000000000..6c35cbca74 --- /dev/null +++ b/examples/cms-prismic/components/cover-image.tsx @@ -0,0 +1,40 @@ +import Link from 'next/link' +import { PrismicNextImage } from '@prismicio/next' +import { ImageField } from '@prismicio/types' +import cn from 'classnames' + +type CoverImageProps = { + title: string + image: ImageField + href?: string +} + +export default function CoverImage({ + title, + image: imageField, + href, +}: CoverImageProps) { + const image = ( + + ) + + return ( +
+ {href ? ( + + {image} + + ) : ( + image + )} +
+ ) +} diff --git a/examples/cms-prismic/components/date.js b/examples/cms-prismic/components/date.js deleted file mode 100644 index 4a9b9e4f8e..0000000000 --- a/examples/cms-prismic/components/date.js +++ /dev/null @@ -1,7 +0,0 @@ -import { format } from 'date-fns' -import { Date as PrismicDate } from 'prismic-reactjs' - -export default function Date({ dateString }) { - const date = PrismicDate(dateString) - return -} diff --git a/examples/cms-prismic/components/date.tsx b/examples/cms-prismic/components/date.tsx new file mode 100644 index 0000000000..4bd8ed10d3 --- /dev/null +++ b/examples/cms-prismic/components/date.tsx @@ -0,0 +1,18 @@ +import { asDate } from '@prismicio/helpers' +import { DateField } from '@prismicio/types' + +const formatter = new Intl.DateTimeFormat('en-US', { + month: 'long', + day: 'numeric', + year: 'numeric', +}) + +type DateProps = { + dateField: DateField +} + +export default function Date({ dateField }: DateProps) { + const date = asDate(dateField) + + return +} diff --git a/examples/cms-prismic/components/footer.js b/examples/cms-prismic/components/footer.tsx similarity index 99% rename from examples/cms-prismic/components/footer.js rename to examples/cms-prismic/components/footer.tsx index da9eed88ec..2f4bd5a2fe 100644 --- a/examples/cms-prismic/components/footer.js +++ b/examples/cms-prismic/components/footer.tsx @@ -1,6 +1,7 @@ -import Container from './container' import { EXAMPLE_PATH } from '../lib/constants' +import Container from './container' + export default function Footer() { return (