From e1b8903fffec59c116e9ded9d5ddc79175a5aa08 Mon Sep 17 00:00:00 2001 From: tim-hanssen Date: Thu, 4 May 2023 18:28:03 +0200 Subject: [PATCH 01/12] Update Prepr CMS example --- examples/cms-prepr/.env.local.example | 2 +- examples/cms-prepr/.gitignore | 1 + examples/cms-prepr/README.md | 169 ++++++++++-------- examples/cms-prepr/apollo-client.js | 8 + examples/cms-prepr/components/alert.js | 4 +- examples/cms-prepr/components/cover-image.js | 5 +- examples/cms-prepr/components/date.js | 13 +- examples/cms-prepr/components/footer.js | 2 +- examples/cms-prepr/components/hero-post.js | 24 +-- examples/cms-prepr/components/intro.js | 2 +- examples/cms-prepr/components/layout.js | 6 +- .../components/markdown-styles.module.css | 18 ++ examples/cms-prepr/components/meta.js | 2 +- examples/cms-prepr/components/more-stories.js | 10 +- examples/cms-prepr/components/post-body.js | 20 ++- examples/cms-prepr/components/post-header.js | 11 +- examples/cms-prepr/components/post-preview.js | 15 +- .../components/post-styles.module.css | 22 --- examples/cms-prepr/jsconfig.json | 7 +- examples/cms-prepr/lib/api.js | 167 +++++++++++++++++ examples/cms-prepr/lib/preprio.js | 156 ---------------- examples/cms-prepr/models/author.json | 67 ------- examples/cms-prepr/models/post.json | 167 ----------------- examples/cms-prepr/next.config.js | 6 +- examples/cms-prepr/package.json | 3 +- examples/cms-prepr/pages/_app.js | 2 +- examples/cms-prepr/pages/api/exit-preview.js | 2 +- examples/cms-prepr/pages/api/preview.js | 10 +- examples/cms-prepr/pages/index.js | 36 ++-- examples/cms-prepr/pages/posts/[slug].js | 48 ++--- examples/cms-prepr/styles/index.css | 30 +++- 31 files changed, 449 insertions(+), 586 deletions(-) create mode 100644 examples/cms-prepr/apollo-client.js create mode 100644 examples/cms-prepr/components/markdown-styles.module.css delete mode 100644 examples/cms-prepr/components/post-styles.module.css create mode 100644 examples/cms-prepr/lib/api.js delete mode 100644 examples/cms-prepr/lib/preprio.js delete mode 100644 examples/cms-prepr/models/author.json delete mode 100644 examples/cms-prepr/models/post.json diff --git a/examples/cms-prepr/.env.local.example b/examples/cms-prepr/.env.local.example index 6ee7fd6c8258..4c32ef9364cb 100644 --- a/examples/cms-prepr/.env.local.example +++ b/examples/cms-prepr/.env.local.example @@ -1,4 +1,4 @@ PREPRIO_API=https://graphql.prepr.io/graphql PREPRIO_PRODUCTION_TOKEN= PREPRIO_PREVIEW_TOKEN= -PREPRIO_PREVIEW_KEY= \ No newline at end of file +PREPRIO_PREVIEW_SECRET=YOURSECRET \ No newline at end of file diff --git a/examples/cms-prepr/.gitignore b/examples/cms-prepr/.gitignore index 8f322f0d8f49..97c794b35374 100644 --- a/examples/cms-prepr/.gitignore +++ b/examples/cms-prepr/.gitignore @@ -18,6 +18,7 @@ # misc .DS_Store *.pem +.env # debug npm-debug.log* diff --git a/examples/cms-prepr/README.md b/examples/cms-prepr/README.md index fc95dbf0b08b..40e7baae5a21 100644 --- a/examples/cms-prepr/README.md +++ b/examples/cms-prepr/README.md @@ -4,40 +4,14 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas ## Demo -- **Live**: [https://next-blog-prepr.vercel.app/](https://next-blog-prepr.vercel.app/) -- **Preview Mode**: [https://next-blog-prepr.vercel.app/api/preview...](https://next-blog-prepr.vercel.app/api/preview?secret=237864ihasdhj283768&slug=discover-enjoy-amsterdam) - -### [https://next-blog-prepr.vercel.app/](https://next-blog-prepr.vercel.app/) - -### Related examples - -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) -- [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) -- [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [GraphCMS](/examples/cms-graphcms) -- [Blog Starter](/examples/blog-starter) -- [DotCMS](/examples/cms-dotcms) -- [Enterspeed](/examples/cms-enterspeed) - -## Getting Started +Check out our Blog page example: -Once you have access to [the environment variables you'll need](#step-3-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): - -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_KEY&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env) +- **Live**: [https://next-blog-prepr.vercel.app/](https://next-blog-prepr.vercel.app/) +- **Preview**: [https://next-blog-prepr.vercel.app/api/preview...](https://next-blog-prepr.vercel.app/api/preview?secret=237864ihasdhj283768&slug=discover-enjoy-amsterdam) ## How to use -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: +Execute one of the following [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) commands using [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to create a new Next.js app and connect it to Prepr: ```bash npx create-next-app --example cms-prepr cms-prepr-app @@ -53,85 +27,140 @@ pnpm create next-app --example cms-prepr cms-prepr-app ## Configuration -### Step 1. Create an account and a environment in Prepr +### Step 1. Set up Prepr -First, [create an account in Prepr](https://prepr.io). +**1.1** First, [sign up for a Prepr account](https://signup.prepr.io/). -### Step 2. Create Author model +**1.2** After you sign up, create a new environment in Prepr. For more details, [check out the environment docs](https://docs.prepr.io/developing-with-prepr/set-up-environments). -From your Prepr dashboard, click **Settings** -> **Models** +![Create Prepr environment](https://assets-site.prepr.io//1bynxkn1084r-create-enviroment.png) -Click on the arrow next to **Add model** and select **Import**. +**1.3** Once you’ve created the environment, choose to **Load demo data**. With that, Prepr will automatically upload sample models, content items, and other data you can use for your example Next.js app. -Import the [`models/author.json`](models/author.json) file. +![Load Prepr demo data](https://assets-site.prepr.io//2xrbs9aquhij-import-demo-data.png) -After that +### Step 2. Set up environment variables -Import the [`models/post.json`](models/post.json) file. +Once you’ve set up your Prepr environment, you can define environment variables for your project. Please proceed with the steps below. -### Step 3. Set up environment variables (for production) - -Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git): +**2.1** Run the following command to copy and rename the `.env.local.example` file as follows: ```bash cp .env.local.example .env.local ``` -Inside your environment, navigate to **Settings > Development > Access Tokens**. +The `.env.local` file will be ignored by Git. -Click **Add access token**, enter the name `Next.js Production` and add the scope `graphql_published` and click **Save**. +**2.2** In your environment, navigate to **Settings > Development > Access Tokens**. You will see the automatically generated access tokens for your Prepr environment. -Copy the generated access token and set the variable `PREPRIO_PRODUCTION_TOKEN` in `.env.local`. +![Access tokens](https://assets-site.prepr.io//11t9w1duzr57-access-tokens.png) -### Step 3.1 Set up environment variables (for preview) +Copy the _GraphQL Published_ access token and paste it as the `PREPRIO_PRODUCTION_TOKEN` variable in `.env.local`. Then copy and paste the _GraphQL To do_ access token as the `PREPRIO_PREVIEW_TOKEN` variable. -Go back to the Access token overview and click **Add access token**. +Alternatively, you can create access tokens yourself by clicking **Add access token**. If so, make sure to [choose the right GraphQL permissions](https://docs.prepr.io/reference/graphql/v1/authorization) for the access tokens. -Click **Add access token**, enter the name `Next.js Preview` and add the scope `graphql_preview` and click **Save**. +**2.3** Set a custom value with no spaces as the `PREPRIO_PREVIEW_SECRET` variable, for example, a UUID. This value will be used to enable [preview mode](https://nextjs.org/docs/advanced-features/preview-mode). -Copy the generated access token and set the variable `PREPRIO_PREVIEW_TOKEN` in `.env.local`. +Once done, your `.env.local` file should look like this: -The `PREPRIO_PREVIEW_KEY` can be any random string (but avoid spaces), like a UUID`, this is used -for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode). +```bash +PREPRIO_API=https://graphql.prepr.io/graphql +PREPRIO_PRODUCTION_TOKEN='your Published access token' +PREPRIO_PREVIEW_TOKEN='your To do access token' +PREPRIO_PREVIEW_SECRET='your secret id' +``` + +### Step 3. Run Next.js in development mode -### Step 4. Run Next.js in development mode +Now that you've finished preparing the project, you may proceed to run it. + +**3.1** Execute one of the following commands to install the packages listed in the `package.json` file: ```bash npm install -npm run dev - -# or +``` +```bash yarn install +``` + +**3.2** Execute one of the following commands to run the dev script defined in the `package.json` file: + +```bash +npm run dev +``` + +```bash 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). +Your example Blog website should be up and running on [http://localhost:3000](http://localhost:3000). If it doesn't work, please post on [GitHub discussions](https://github.com/vercel/next.js/discussions). + +### Step 4. Optional: Try Preview mode + +Great progress has been made! You are just a few steps away from getting your example website live. +Before proceeding, you can test how the content preview works in Prepr. This step is optional. Proceed to Step 5 if you don’t want to use preview mode. + +To try preview mode, follow these steps: + +**4.1** In Prepr, go to one of the content items of the _Article model_ and update the item title. For example, you can add _[PREVIEW]_ in front of the title. After you edit the content item, save it with the _Review status_. + +**4.2** To preview the content item, transform its URL to the following format: + +`http://localhost:3000/api/preview?secret=&slug=`, +where: + +- `` is the same preview secret you defined in the `.env.local` file; +- `` is the slug of the content item you want to preview. + +**Tip:** The default _To Do access token_ allows you to retrieve content items in all available statuses, including _To Do_, _In Progress_, _Review_, _Done_, and _Published_. This means you can test the preview mode with all of these statuses. + +**Note:** To exit the preview mode, you must click **Click here to exit preview mode** at the top of the page. + +![Preview content item](https://assets-site.prepr.io//4hd7vgoyke24-web-page.png) -### Step 5. Try preview mode +### Step 5. Deploy on Vercel -In Prepr, go to one of the posts in your environment and: +To make your Next.js app available online, deploy it to the cloud using [Vercel](https://vercel.com/?utm_source=github&utm_medium=readme&utm_campaign=next-example). Vercel provides a user-friendly platform for deploying and managing web applications. For more information, please [refer to the Next.js documentation](https://nextjs.org/docs/deployment). -- **Update the title**. For example, you can add `[REVIEW]` in front of the title. -- After you edit the publication save the post with a review state. +You can go for one of the following options: -To view the preview, transform the url to the following format: `http://localhost:3000/api/preview?secret=&slug=` where `` is -the same secret you defined in the `.env.local` file and `` is the slug of one of the posts you want to preview. +- **Deploy your local project**
+ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import it to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example). -You should now be able to see post that are in Review and Done state. To exit the preview mode, you can click on _"Click here to exit preview mode"_ at the top. +**Important:** When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file. -### Step 6. Deploy on Vercel +- **Deploy from our template**
+ Alternatively, you can deploy using our template by clicking on the **Deploy** button below. -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)). +[![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-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env) -#### Deploy Your Local Project +## Next steps -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). +For more advanced topics, please refer to the Prepr’s documentation: -**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file. +- [A/B testing](https://docs.prepr.io/optimization-and-personalization/ab-testing) +- [Personalization](https://docs.prepr.io/optimization-and-personalization/personalized-stack) +- [Recommendations](https://docs.prepr.io/optimization-and-personalization/recommendations) -#### Deploy from Our Template +If you have questions, please [get in touch](https://prepr.io/get-in-touch) with one of our specialists or [join our Slack community](https://slack.prepr.io/). -Alternatively, you can deploy using our template by clicking on the Deploy button below. +## Related examples -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_KEY&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env) +- [WordPress](/examples/cms-wordpress) +- [DatoCMS](/examples/cms-datocms) +- [Sanity](/examples/cms-sanity) +- [TakeShape](/examples/cms-takeshape) +- [Prismic](/examples/cms-prismic) +- [Contentful](/examples/cms-contentful) +- [Strapi](/examples/cms-strapi) +- [Agility CMS](/examples/cms-agilitycms) +- [Cosmic](/examples/cms-cosmic) +- [ButterCMS](/examples/cms-buttercms) +- [Storyblok](/examples/cms-storyblok) +- [Kontent](/examples/cms-kontent) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Blog Starter](/examples/blog-starter) +- [DotCMS](/examples/cms-dotcms) +- [Enterspeed](/examples/cms-enterspeed) diff --git a/examples/cms-prepr/apollo-client.js b/examples/cms-prepr/apollo-client.js new file mode 100644 index 000000000000..6e5f129c7f89 --- /dev/null +++ b/examples/cms-prepr/apollo-client.js @@ -0,0 +1,8 @@ +import { ApolloClient, InMemoryCache } from '@apollo/client' + +const client = new ApolloClient({ + uri: process.env.PREPRIO_API, + cache: new InMemoryCache(), +}) + +export default client diff --git a/examples/cms-prepr/components/alert.js b/examples/cms-prepr/components/alert.js index b924cb097f16..051f3319649e 100644 --- a/examples/cms-prepr/components/alert.js +++ b/examples/cms-prepr/components/alert.js @@ -1,6 +1,6 @@ import Container from './container' import cn from 'classnames' -import { EXAMPLE_PATH } from '../lib/constants' +import { EXAMPLE_PATH } from '@/lib/constants' export default function Alert({ preview }) { return ( @@ -14,7 +14,7 @@ export default function Alert({ preview }) {
{preview ? ( <> - This page is a preview.{' '} + This is page is a preview.{' '} ) - return (
{slug ? ( diff --git a/examples/cms-prepr/components/date.js b/examples/cms-prepr/components/date.js index eac5681378bf..6503e2986d5c 100644 --- a/examples/cms-prepr/components/date.js +++ b/examples/cms-prepr/components/date.js @@ -1,6 +1,13 @@ import { parseISO, format } from 'date-fns' +import { useEffect, useState } from 'react' -export default function Date({ dateString }) { - const date = parseISO(dateString) - return +// dateString might be null for unpublished posts +export default function DateComponent({ dateString }) { + const [date, setDate] = useState(dateString ? parseISO(dateString) : null) + useEffect(() => { + if (!date) { + setDate(new Date()) + } + }, [date]) + return date && } diff --git a/examples/cms-prepr/components/footer.js b/examples/cms-prepr/components/footer.js index da9eed88ec26..b305c3eb40b0 100644 --- a/examples/cms-prepr/components/footer.js +++ b/examples/cms-prepr/components/footer.js @@ -1,5 +1,5 @@ import Container from './container' -import { EXAMPLE_PATH } from '../lib/constants' +import { EXAMPLE_PATH } from '@/lib/constants' export default function Footer() { return ( diff --git a/examples/cms-prepr/components/hero-post.js b/examples/cms-prepr/components/hero-post.js index 2c65b5e9e341..13d30433e409 100644 --- a/examples/cms-prepr/components/hero-post.js +++ b/examples/cms-prepr/components/hero-post.js @@ -1,6 +1,6 @@ -import Avatar from '../components/avatar' -import Date from '../components/date' -import CoverImage from '../components/cover-image' +import Avatar from './avatar' +import Date from './date' +import CoverImage from './cover-image' import Link from 'next/link' export default function HeroPost({ @@ -14,25 +14,25 @@ export default function HeroPost({ return (
- +
-
+
-

+

{title}

-
+
-

{excerpt}

- +
+
diff --git a/examples/cms-prepr/components/intro.js b/examples/cms-prepr/components/intro.js index 5931b3c5961b..c3003c619664 100644 --- a/examples/cms-prepr/components/intro.js +++ b/examples/cms-prepr/components/intro.js @@ -1,4 +1,4 @@ -import { CMS_NAME, CMS_URL } from '../lib/constants' +import { CMS_NAME, CMS_URL } from '@/lib/constants' export default function Intro() { return ( diff --git a/examples/cms-prepr/components/layout.js b/examples/cms-prepr/components/layout.js index 99d95353131e..399802b095aa 100644 --- a/examples/cms-prepr/components/layout.js +++ b/examples/cms-prepr/components/layout.js @@ -1,6 +1,6 @@ -import Alert from '../components/alert' -import Footer from '../components/footer' -import Meta from '../components/meta' +import Alert from './alert' +import Footer from './footer' +import Meta from './meta' export default function Layout({ preview, children }) { return ( diff --git a/examples/cms-prepr/components/markdown-styles.module.css b/examples/cms-prepr/components/markdown-styles.module.css new file mode 100644 index 000000000000..95d4f8b04172 --- /dev/null +++ b/examples/cms-prepr/components/markdown-styles.module.css @@ -0,0 +1,18 @@ +.markdown { + @apply text-lg leading-relaxed; +} + +.markdown p, +.markdown ul, +.markdown ol, +.markdown blockquote { + @apply my-6; +} + +.markdown h2 { + @apply text-3xl mt-12 mb-4 leading-snug; +} + +.markdown h3 { + @apply text-2xl mt-8 mb-4 leading-snug; +} diff --git a/examples/cms-prepr/components/meta.js b/examples/cms-prepr/components/meta.js index d9c48d5831e1..cec622742089 100644 --- a/examples/cms-prepr/components/meta.js +++ b/examples/cms-prepr/components/meta.js @@ -1,5 +1,5 @@ import Head from 'next/head' -import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants' +import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants' export default function Meta() { return ( diff --git a/examples/cms-prepr/components/more-stories.js b/examples/cms-prepr/components/more-stories.js index c57ec3acf7d9..fea454ed468b 100644 --- a/examples/cms-prepr/components/more-stories.js +++ b/examples/cms-prepr/components/more-stories.js @@ -1,4 +1,4 @@ -import PostPreview from '../components/post-preview' +import PostPreview from './post-preview' export default function MoreStories({ posts }) { return ( @@ -11,11 +11,11 @@ export default function MoreStories({ posts }) { ))}
diff --git a/examples/cms-prepr/components/post-body.js b/examples/cms-prepr/components/post-body.js index 30c9b59f6d04..081e2777522d 100644 --- a/examples/cms-prepr/components/post-body.js +++ b/examples/cms-prepr/components/post-body.js @@ -1,10 +1,16 @@ -import postStyles from './post-styles.module.css' +import { ReactElement } from 'react' +import Image from 'next/image' export default function PostBody({ content }) { - return ( -
- ) + const renderedContent = content.map((item) => { + if (item.__typename === 'Text') { + return
+ } else if (item.__typename === 'Image') { + return image + } else { + return null + } + }) + + return
{renderedContent}
} diff --git a/examples/cms-prepr/components/post-header.js b/examples/cms-prepr/components/post-header.js index 82da4910c3b2..9fe7431d6a2c 100644 --- a/examples/cms-prepr/components/post-header.js +++ b/examples/cms-prepr/components/post-header.js @@ -8,17 +8,14 @@ export default function PostHeader({ title, coverImage, date, author }) { <> {title}
- +
-
+
-
- +
+
diff --git a/examples/cms-prepr/components/post-preview.js b/examples/cms-prepr/components/post-preview.js index c789097c68d8..47aa59fe8afb 100644 --- a/examples/cms-prepr/components/post-preview.js +++ b/examples/cms-prepr/components/post-preview.js @@ -1,5 +1,5 @@ -import Avatar from '../components/avatar' -import Date from '../components/date' +import Avatar from './avatar' +import Date from './date' import CoverImage from './cover-image' import Link from 'next/link' @@ -16,16 +16,19 @@ export default function PostPreview({
-

+

{title}

-
+
-

{excerpt}

- +
+
) } diff --git a/examples/cms-prepr/components/post-styles.module.css b/examples/cms-prepr/components/post-styles.module.css deleted file mode 100644 index f0eb9e24da9e..000000000000 --- a/examples/cms-prepr/components/post-styles.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.post { - @apply text-lg leading-relaxed; -} - -.post p, -.post ul, -.post ol, -.post blockquote { - @apply my-6; -} - -.post h1 { - @apply mt-12 mb-4 text-4xl leading-snug; -} - -.post h2 { - @apply mt-12 mb-4 text-3xl leading-snug; -} - -.post h3 { - @apply mt-8 mb-4 text-2xl leading-snug; -} diff --git a/examples/cms-prepr/jsconfig.json b/examples/cms-prepr/jsconfig.json index 36aa1a4dc28f..1bac23a7cd55 100644 --- a/examples/cms-prepr/jsconfig.json +++ b/examples/cms-prepr/jsconfig.json @@ -1,5 +1,10 @@ { "compilerOptions": { - "baseUrl": "." + "baseUrl": ".", + "paths": { + "@/components/*": ["components/*"], + "@/lib/*": ["lib/*"], + "@/styles/*": ["styles/*"] + } } } diff --git a/examples/cms-prepr/lib/api.js b/examples/cms-prepr/lib/api.js new file mode 100644 index 000000000000..484ad6c51ccd --- /dev/null +++ b/examples/cms-prepr/lib/api.js @@ -0,0 +1,167 @@ +import client from '../apollo-client' +import { gql } from '@apollo/client' + +async function fetchAPI(query, { variables, preview } = {}) { + const data = await client.query({ + query: gql` + ${query} + `, + variables, + context: { + headers: { + Authorization: + 'Bearer ' + + (preview + ? process.env.PREPRIO_PREVIEW_TOKEN + : process.env.PREPRIO_PRODUCTION_TOKEN), + }, + }, + fetchPolicy: 'no-cache', + }) + return data +} + +export async function getPreviewPostBySlug(slug) { + const { data } = await fetchAPI( + ` + query ArticleBySlug($slug: String!) { + Article(slug: $slug) { + _slug + } + } + `, + { + preview: true, + variables: { + slug, + }, + } + ) + return data.Article +} + +export async function getAllPostsWithSlug() { + const { data } = await fetchAPI( + ` + { + Articles { + items { + _slug + } + } + } + `, + { preview: true } + ) + return data?.Articles.items +} + +export async function getAllPostsForHome(preview) { + const { data } = await fetchAPI( + ` + { + Articles(sort: publish_on_DESC) { + items { + _id + _slug + _publish_on + title + excerpt + content { + ...on Text { + html + text + } + } + authors { + full_name + profile_pic { + url + } + } + cover { + url(preset: "square") + } + } + } + } + `, + { preview } + ) + + return data?.Articles.items +} + +export async function getPostAndMorePosts(slug, preview) { + const { data } = await fetchAPI( + ` + query ArticlesBySlug($slug: String!) { + Article(slug: $slug) { + _id + _slug + _publish_on + title + excerpt + content { + __typename + ... on Text { + html + text + } + ... on Assets { + items { + url + } + } + } + authors { + full_name + profile_pic { + url + } + } + cover { + url(preset: "square") + } + } + MoreArticles: Articles(limit: 3, sort: publish_on_DESC) { + items { + _id + _slug + _publish_on + title + excerpt + cover { + url(preset: "square") + } + content { + ... on Text { + html + text + } + } + authors { + full_name + profile_pic { + url + } + } + } + } + } + `, + { + preview, + variables: { + slug, + }, + } + ) + + return { + post: data?.Article, + morePosts: (data?.MoreArticles?.items || []) + .filter((item) => item._slug !== slug) + .slice(0, 2), + } +} diff --git a/examples/cms-prepr/lib/preprio.js b/examples/cms-prepr/lib/preprio.js deleted file mode 100644 index ecb0d1d50fcb..000000000000 --- a/examples/cms-prepr/lib/preprio.js +++ /dev/null @@ -1,156 +0,0 @@ -import { createPreprClient } from '@preprio/nodejs-sdk' - -const prepr = createPreprClient({ - token: process.env.PREPRIO_PRODUCTION_TOKEN, - timeout: 4000, - baseUrl: process.env.PREPRIO_API, -}) - -export { prepr } - -export async function getAllPostsForHome(preview) { - // Query publications - const data = - (await prepr - .graphqlQuery( - ` - query { - Posts { - items { - _id, - _slug, - date: _publish_on - title, - summary, - author { - name - cover { - cdn_files { - url(width: 100, height:100) - } - } - } - cover { - cdn_files { - url(width:2000, height:1000) - } - } - } - } - }` - ) - .token( - preview - ? process.env.PREPRIO_PREVIEW_TOKEN - : process.env.PREPRIO_PRODUCTION_TOKEN - ) - .fetch()) || [] - - return data.data.Posts.items -} - -export async function getAllPostsWithSlug() { - // Query publications - const data = - (await prepr - .graphqlQuery( - ` - query { - Posts { - items { - slug : _slug, - } - } - }` - ) - .fetch()) || [] - - return data.data.Posts.items -} - -export async function getPostAndMorePosts(slug, preview) { - // Query publications - const data = - (await prepr - .graphqlQuery( - ` - query slugPost($slug: String!) { - Post ( slug : $slug) { - _id, - _slug, - date: _publish_on - title, - summary, - content, - author { - name - cover { - cdn_files { - url(width: 100, height:100) - } - } - } - cover { - cdn_files { - url(width:2000, height:1000) - } - } - } - morePosts : Posts(where : { _slug_nany : [$slug] }) { - items { - _id, - _slug, - date: _publish_on - title, - summary, - author { - name - cover { - cdn_files { - url(width: 100, height:100) - } - } - } - cover { - cdn_files { - url(width:2000, height:1000) - } - } - } - } - }` - ) - .graphqlVariables({ - slug: slug, - }) - .token( - preview - ? process.env.PREPRIO_PREVIEW_TOKEN - : process.env.PREPRIO_PRODUCTION_TOKEN - ) - .fetch()) || [] - - return data.data -} - -export async function getPreviewPostBySlug(slug) { - // Query publications - const data = - (await prepr - .graphqlQuery( - ` - query preview($slug: String!) { - Post ( slug : $slug) { - _id, - slug : _slug - } - }` - ) - .token(process.env.PREPRIO_PREVIEW_TOKEN) - .graphqlVariables({ - slug: slug, - }) - .fetch()) || [] - - return data.data.Post -} diff --git a/examples/cms-prepr/models/author.json b/examples/cms-prepr/models/author.json deleted file mode 100644 index 8f6bfba08512..000000000000 --- a/examples/cms-prepr/models/author.json +++ /dev/null @@ -1,67 +0,0 @@ -{ - "id": "f7153965-7bc9-4b9b-b964-49129b34c5e8", - "created_on": "2021-03-04T12:03:46+00:00", - "changed_on": "2021-03-04T12:03:46+00:00", - "body": "Author", - "description": null, - "label": "PublicationModel", - "status": "published", - "stories": false, - "timelines": false, - "allow_stories": false, - "channels": false, - "allow_channels": false, - "container_required": false, - "channels_required": false, - "seo_score": false, - "ab_testing": false, - "versioning": false, - "slug": null, - "for": null, - "fields": [ - { - "type": "Text", - "required": false, - "preview": true, - "body": "Name", - "view": "single_line", - "localized": true, - "id": "fd7f062f-84e4-4362-9e15-61c1a26a4078", - "api_id": "name", - "created_on": "2021-03-04T12:03:55+00:00", - "changed_on": "2021-03-04T12:03:55+00:00", - "label": "PublicationModelField", - "title": false, - "seo_title": false, - "seo_description": false, - "description": null, - "disable_editing": false, - "appearance": "single_line", - "accept_restrictions": null, - "no_html": false - }, - { - "accept": ["photo"], - "max": "1", - "preview": true, - "type": "Asset", - "min": "1", - "required": true, - "body": "Cover Image", - "localized": true, - "id": "fd81a8e2-2f59-44b7-b3b2-873a27958db1", - "api_id": "cover", - "created_on": "2021-03-04T12:04:13+00:00", - "changed_on": "2021-03-04T12:04:13+00:00", - "label": "PublicationModelField", - "title": false, - "seo_title": false, - "seo_description": false, - "description": null, - "disable_editing": false, - "appearance": null, - "accept_restrictions": null, - "presets_change_required": false - } - ] -} diff --git a/examples/cms-prepr/models/post.json b/examples/cms-prepr/models/post.json deleted file mode 100644 index 285663dceb52..000000000000 --- a/examples/cms-prepr/models/post.json +++ /dev/null @@ -1,167 +0,0 @@ -{ - "id": "4da8ca3d-86c2-40ba-84c0-5ea949293b9b", - "created_on": "2021-03-04T12:02:44+00:00", - "changed_on": "2021-03-04T12:10:37+00:00", - "body": "Post", - "description": null, - "label": "PublicationModel", - "status": "published", - "stories": false, - "timelines": false, - "allow_stories": false, - "channels": false, - "allow_channels": false, - "container_required": false, - "channels_required": false, - "seo_score": false, - "ab_testing": false, - "versioning": false, - "slug": "{title}", - "for": null, - "fields": [ - { - "type": "Text", - "required": false, - "preview": true, - "body": "Title", - "view": "single_line", - "localized": true, - "id": "7aa96451-d3b5-41e9-b012-77f66dd2213b", - "api_id": "title", - "created_on": "2021-03-04T12:02:49+00:00", - "changed_on": "2021-03-04T12:02:49+00:00", - "label": "PublicationModelField", - "title": false, - "seo_title": false, - "seo_description": false, - "description": null, - "disable_editing": false, - "appearance": "single_line", - "accept_restrictions": null, - "no_html": false - }, - { - "type": "Text", - "required": false, - "preview": true, - "body": "Summary", - "view": "textarea", - "localized": true, - "id": "ea6a35ca-5a39-4786-9cf7-15e917a0dcf4", - "api_id": "summary", - "created_on": "2021-03-04T12:02:59+00:00", - "changed_on": "2021-03-04T12:02:59+00:00", - "label": "PublicationModelField", - "title": false, - "seo_title": false, - "seo_description": false, - "description": null, - "disable_editing": false, - "appearance": "textarea", - "accept_restrictions": null, - "no_html": false - }, - { - "accept": [ - "bold", - "italic", - "underline", - "unordered-list", - "ordered-list", - "link", - "table" - ], - "preview": true, - "view": "html_editor", - "type": "Text", - "required": false, - "body": "Content", - "localized": true, - "id": "cd31e930-a08c-4740-903e-5c41fcd1c555", - "api_id": "content", - "created_on": "2021-03-04T12:04:36+00:00", - "changed_on": "2021-03-04T12:04:36+00:00", - "label": "PublicationModelField", - "title": false, - "seo_title": false, - "seo_description": false, - "description": null, - "disable_editing": false, - "appearance": "html_editor", - "accept_restrictions": null, - "no_html": false - }, - { - "accept": ["photo"], - "max": "1", - "preview": true, - "type": "Asset", - "min": "1", - "required": true, - "body": "Cover Image", - "localized": true, - "id": "cfca83f3-5a73-4567-bde1-4adeb57915d0", - "api_id": "cover", - "created_on": "2021-03-04T12:03:17+00:00", - "changed_on": "2021-03-04T12:03:17+00:00", - "label": "PublicationModelField", - "title": false, - "seo_title": false, - "seo_description": false, - "description": null, - "disable_editing": false, - "appearance": null, - "accept_restrictions": null, - "presets_change_required": false - }, - { - "type": "Publication", - "min": "1", - "required": true, - "max": "1", - "preview": false, - "body": "Author", - "localized": true, - "id": "8308380f-af0a-40e7-ae30-33b2f7ce93d9", - "api_id": "author", - "created_on": "2021-03-04T12:04:51+00:00", - "changed_on": "2021-03-04T12:04:51+00:00", - "label": "PublicationModelField", - "title": false, - "seo_title": false, - "seo_description": false, - "description": null, - "disable_editing": false, - "appearance": null, - "accept_restrictions": null, - "publication_models": { - "items": [ - { - "id": "7214e365-1b4c-4de3-8412-e311250fb4da", - "body": "Author" - } - ], - "total": 1 - } - }, - { - "type": "Slug", - "description": "The slug is generated automatically. You can change the slug, as long as it is unique.", - "body": "Slug", - "id": "7214e365-1b4c-4de3-8412-e311250fb4da", - "api_id": null, - "created_on": "2021-03-04T12:03:32+00:00", - "changed_on": "2021-03-04T12:03:32+00:00", - "label": "PublicationModelField", - "title": false, - "seo_title": false, - "seo_description": false, - "required": false, - "localized": false, - "preview": false, - "disable_editing": false, - "appearance": null, - "accept_restrictions": null - } - ] -} diff --git a/examples/cms-prepr/next.config.js b/examples/cms-prepr/next.config.js index 8c66cf3f279f..ea88b2e19123 100644 --- a/examples/cms-prepr/next.config.js +++ b/examples/cms-prepr/next.config.js @@ -1,6 +1,10 @@ /** @type {import('next').NextConfig} */ module.exports = { images: { - domains: ['b-cdn.net'], + domains: [ + 'b-cdn.net', + 'prepr-example-content-demo-patterns.stream.prepr.io', + 'demo-site-patterns.stream.prepr.io', + ], }, } diff --git a/examples/cms-prepr/package.json b/examples/cms-prepr/package.json index a8fd9fdea6ff..daf90b0176d0 100644 --- a/examples/cms-prepr/package.json +++ b/examples/cms-prepr/package.json @@ -6,9 +6,10 @@ "start": "next start" }, "dependencies": { - "@preprio/nodejs-sdk": "^1.1.0", + "@apollo/client": "^3.7.12", "classnames": "2.3.1", "date-fns": "2.28.0", + "graphql": "^16.6.0", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/cms-prepr/pages/_app.js b/examples/cms-prepr/pages/_app.js index d56d9bf601a9..f18e112c7cf7 100644 --- a/examples/cms-prepr/pages/_app.js +++ b/examples/cms-prepr/pages/_app.js @@ -1,4 +1,4 @@ -import '../styles/index.css' +import '@/styles/index.css' function MyApp({ Component, pageProps }) { return diff --git a/examples/cms-prepr/pages/api/exit-preview.js b/examples/cms-prepr/pages/api/exit-preview.js index 03d954f4a7a9..6c63a0a6e8a4 100644 --- a/examples/cms-prepr/pages/api/exit-preview.js +++ b/examples/cms-prepr/pages/api/exit-preview.js @@ -1,4 +1,4 @@ -export default async function handler(_, res) { +export default async function exit(_, res) { // Exit the current user from "Preview Mode". This function accepts no args. res.clearPreviewData() diff --git a/examples/cms-prepr/pages/api/preview.js b/examples/cms-prepr/pages/api/preview.js index ba05d49e2dd3..6fcd541a04a5 100644 --- a/examples/cms-prepr/pages/api/preview.js +++ b/examples/cms-prepr/pages/api/preview.js @@ -1,9 +1,13 @@ -import { getPreviewPostBySlug } from '../../lib/preprio' +import { getPreviewPostBySlug } from '../../lib/api' export default async function handler(req, res) { // Check the secret and next parameters // This secret should only be known to this API route and the CMS - if (req.query.secret !== process.env.PREPRIO_PREVIEW_KEY || !req.query.slug) { + + if ( + req.query.secret !== process.env.PREPRIO_PREVIEW_SECRET || + !req.query.slug + ) { return res.status(401).json({ message: 'Invalid token' }) } @@ -20,6 +24,6 @@ export default async function handler(req, res) { // Redirect to the path from the fetched post // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities - res.writeHead(307, { Location: `/posts/${post.slug}` }) + res.writeHead(307, { Location: `/posts/${post._slug}` }) res.end() } diff --git a/examples/cms-prepr/pages/index.js b/examples/cms-prepr/pages/index.js index c7fa551afe18..1508061f1b3f 100644 --- a/examples/cms-prepr/pages/index.js +++ b/examples/cms-prepr/pages/index.js @@ -1,15 +1,16 @@ -import Container from '../components/container' -import MoreStories from '../components/more-stories' -import HeroPost from '../components/hero-post' -import Intro from '../components/intro' -import Layout from '../components/layout' -import { getAllPostsForHome } from '../lib/preprio' +import Container from '@/components/container' +import MoreStories from '@/components/more-stories' +import HeroPost from '@/components/hero-post' +import Intro from '@/components/intro' +import Layout from '@/components/layout' +import { getAllPostsForHome } from '@/lib/api' import Head from 'next/head' -import { CMS_NAME } from '../lib/constants' +import { CMS_NAME } from '@/lib/constants' -export default function Index({ posts, preview }) { - const heroPost = posts[0] - const morePosts = posts.slice(1) +export default function Index({ allPosts, preview }) { + const heroPost = allPosts[0] + + const morePosts = allPosts.slice(1) return ( <> @@ -21,11 +22,11 @@ export default function Index({ posts, preview }) { {heroPost && ( )} {morePosts.length > 0 && } @@ -35,10 +36,9 @@ export default function Index({ posts, preview }) { ) } -export async function getStaticProps({ preview = false }) { - const posts = (await getAllPostsForHome(preview)) || [] - +export async function getStaticProps({ preview = null }) { + const allPosts = (await getAllPostsForHome(preview)) || [] return { - props: { posts, preview }, + props: { allPosts, preview }, } } diff --git a/examples/cms-prepr/pages/posts/[slug].js b/examples/cms-prepr/pages/posts/[slug].js index f378dba7317c..77e79fcb6211 100644 --- a/examples/cms-prepr/pages/posts/[slug].js +++ b/examples/cms-prepr/pages/posts/[slug].js @@ -1,24 +1,22 @@ import { useRouter } from 'next/router' import ErrorPage from 'next/error' -import Container from 'components/container' -import PostBody from 'components/post-body' -import MoreStories from 'components/more-stories' -import Header from 'components/header' -import PostHeader from 'components/post-header' -import SectionSeparator from 'components/section-separator' -import Layout from 'components/layout' -import { getAllPostsWithSlug, getPostAndMorePosts } from 'lib/preprio' -import PostTitle from 'components/post-title' +import Container from '@/components/container' +import PostBody from '@/components/post-body' +import MoreStories from '@/components/more-stories' +import Header from '@/components/header' +import PostHeader from '@/components/post-header' +import SectionSeparator from '@/components/section-separator' +import Layout from '@/components/layout' +import { getAllPostsWithSlug, getPostAndMorePosts } from '@/lib/api' +import PostTitle from '@/components/post-title' import Head from 'next/head' -import { CMS_NAME } from 'lib/constants' +import { CMS_NAME } from '@/lib/constants' export default function Post({ post, morePosts, preview }) { const router = useRouter() - if (!router.isFallback && !post?._slug) { return } - return ( @@ -30,15 +28,15 @@ export default function Post({ post, morePosts, preview }) {
- {`${post.title} | Next.js Blog Example with ${CMS_NAME}`} + {post.title} | Next.js Blog Example with {CMS_NAME} - {/* */} +
@@ -52,24 +50,26 @@ export default function Post({ post, morePosts, preview }) { } export async function getStaticProps({ params, preview = false }) { - const data = await getPostAndMorePosts(params.slug, preview) + const { post, morePosts } = await getPostAndMorePosts(params.slug, preview) return { props: { preview, - post: data.Post, - morePosts: data.morePosts.items || [], + post, + morePosts, }, } } export async function getStaticPaths() { - const posts = await getAllPostsWithSlug() + const allPosts = await getAllPostsWithSlug() + + const paths = allPosts.map((post) => ({ + params: { slug: post._slug }, + })) return { - paths: posts.map(({ slug }) => ({ - params: { slug }, - })), + paths, fallback: true, } } diff --git a/examples/cms-prepr/styles/index.css b/examples/cms-prepr/styles/index.css index b63c4592cb2e..d685a678f808 100644 --- a/examples/cms-prepr/styles/index.css +++ b/examples/cms-prepr/styles/index.css @@ -1,5 +1,31 @@ -/* purgecss start ignore */ @tailwind base; @tailwind components; -/* purgecss end ignore */ @tailwind utilities; + +@layer components { + .article h2 { + @apply mb-5 text-4xl font-bold leading-tight; + } + + .article p, + .article ul, + .article ol { + @apply mb-5; + } + + .article ol { + @apply ml-5 list-decimal list-outside; + } + + .article ul { + @apply ml-5 list-disc list-outside; + } + + .article a { + @apply underline; + } + + .article ol li { + @apply mb-4; + } +} From c016ee597b8590e053049884ea9d4f5ad7f4c40f Mon Sep 17 00:00:00 2001 From: tim-hanssen Date: Thu, 4 May 2023 18:38:44 +0200 Subject: [PATCH 02/12] Fix for lint issue. --- examples/cms-prepr/components/post-body.js | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/cms-prepr/components/post-body.js b/examples/cms-prepr/components/post-body.js index 081e2777522d..3549fb403726 100644 --- a/examples/cms-prepr/components/post-body.js +++ b/examples/cms-prepr/components/post-body.js @@ -1,4 +1,3 @@ -import { ReactElement } from 'react' import Image from 'next/image' export default function PostBody({ content }) { From fc78d3db4130c43e7aa384b616f4de7a9e984ee8 Mon Sep 17 00:00:00 2001 From: tim-hanssen Date: Fri, 5 May 2023 08:40:20 +0200 Subject: [PATCH 03/12] Update example list and fix broken links --- examples/cms-agilitycms/README.md | 32 +++++++++++++----------- examples/cms-builder-io/README.md | 30 +++++++++++++--------- examples/cms-buttercms/README.md | 32 +++++++++++++----------- examples/cms-contentful/README.md | 32 +++++++++++++----------- examples/cms-cosmic/README.md | 32 +++++++++++++----------- examples/cms-datocms/README.md | 32 +++++++++++++----------- examples/cms-dotcms/README.md | 29 +++++++++++++-------- examples/cms-drupal/README.md | 29 ++++++++++++--------- examples/cms-enterspeed/README.md | 30 +++++++++++++--------- examples/cms-ghost/README.md | 31 +++++++++++++---------- examples/cms-kontent-ai/README.md | 32 +++++++++++++----------- examples/cms-prepr/README.md | 29 ++++++++++++--------- examples/cms-prismic/README.md | 31 +++++++++++++---------- examples/cms-sanity/README.md | 32 +++++++++++++----------- examples/cms-sitefinity/README.md | 32 ++++++++++++++---------- examples/cms-storyblok/README.md | 32 +++++++++++++----------- examples/cms-takeshape/README.md | 31 +++++++++++++---------- examples/cms-umbraco-heartcore/README.md | 31 +++++++++++++---------- examples/cms-webiny/README.md | 31 ++++++++++++++--------- examples/cms-wordpress/README.md | 30 +++++++++++++--------- 20 files changed, 360 insertions(+), 260 deletions(-) diff --git a/examples/cms-agilitycms/README.md b/examples/cms-agilitycms/README.md index 390ea3d3a642..960e1226038d 100644 --- a/examples/cms-agilitycms/README.md +++ b/examples/cms-agilitycms/README.md @@ -17,24 +17,28 @@ Once you have access to [the environment variables you'll need](#step-15-set-up- ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-builder-io/README.md b/examples/cms-builder-io/README.md index 07ea1bedfc6a..bd27d529055b 100644 --- a/examples/cms-builder-io/README.md +++ b/examples/cms-builder-io/README.md @@ -83,19 +83,25 @@ Alternatively, you can deploy using our template by clicking on the Deploy butto ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [Strapi](/examples/cms-strapi) -- [ButterCMS](/examples/cms-buttercms) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Blog Starter](/examples/blog-starter) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) diff --git a/examples/cms-buttercms/README.md b/examples/cms-buttercms/README.md index 19d5554eedee..731ff24296db 100644 --- a/examples/cms-buttercms/README.md +++ b/examples/cms-buttercms/README.md @@ -18,24 +18,28 @@ Once you have access to your Butter API token, you can deploy your Butterized pr ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [Strapi](/examples/cms-strapi) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-contentful/README.md b/examples/cms-contentful/README.md index ddb3e3003992..27f021467e6a 100644 --- a/examples/cms-contentful/README.md +++ b/examples/cms-contentful/README.md @@ -14,24 +14,28 @@ Using the Deploy Button below, you'll deploy the Next.js project as well as conn ### Related examples -- [WordPress](/examples/cms-wordpress) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) +- [Contentful](/examples/cms-contentful) +- [Cosmic](/examples/cms-cosmic) - [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) - [Prismic](/examples/cms-prismic) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) -- [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) - [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) -- [DotCMS](/examples/cms-dotcms) -- [Enterspeed](/examples/cms-enterspeed) ## How to use diff --git a/examples/cms-cosmic/README.md b/examples/cms-cosmic/README.md index a349f748ef94..af70cb3dd765 100644 --- a/examples/cms-cosmic/README.md +++ b/examples/cms-cosmic/README.md @@ -14,24 +14,28 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e ### Related examples -- [WordPress](/examples/cms-wordpress) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) +- [Contentful](/examples/cms-contentful) +- [Cosmic](/examples/cms-cosmic) - [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) - [Prismic](/examples/cms-prismic) -- [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) -- [ButterCMS](/examples/cms-buttercms) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) - [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) -- [DotCMS](/examples/cms-dotcms) -- [Enterspeed](/examples/cms-enterspeed) ## How to use diff --git a/examples/cms-datocms/README.md b/examples/cms-datocms/README.md index 0bab665dfedd..cec323b83c4e 100644 --- a/examples/cms-datocms/README.md +++ b/examples/cms-datocms/README.md @@ -8,24 +8,28 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas ### Related examples -- [WordPress](/examples/cms-wordpress) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## Deploy your own diff --git a/examples/cms-dotcms/README.md b/examples/cms-dotcms/README.md index 4330eebb88fa..b98a8ce68ccc 100644 --- a/examples/cms-dotcms/README.md +++ b/examples/cms-dotcms/README.md @@ -14,20 +14,27 @@ Using the Deploy Button below, you'll deploy the Next.js project. ### Related examples -- [WordPress](/examples/cms-wordpress) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) +- [Contentful](/examples/cms-contentful) +- [Cosmic](/examples/cms-cosmic) - [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) - [Prismic](/examples/cms-prismic) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) -- [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) - [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Contentful](/examples/cms-contentful) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-drupal/README.md b/examples/cms-drupal/README.md index ed0798c9cfd8..c5033f5e9bee 100644 --- a/examples/cms-drupal/README.md +++ b/examples/cms-drupal/README.md @@ -14,23 +14,28 @@ Once you have [configured the Next.js module for Drupal](https://next-drupal.org ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [Kontent](/examples/cms-kontent) +- [DatoCMS](/examples/cms-datocms) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) - [Ghost](/examples/cms-ghost) - [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) -- [DotCMS](/examples/cms-dotcms) -- [Enterspeed](/examples/cms-enterspeed) ## How to use diff --git a/examples/cms-enterspeed/README.md b/examples/cms-enterspeed/README.md index f2c1807d172a..237a59e83385 100644 --- a/examples/cms-enterspeed/README.md +++ b/examples/cms-enterspeed/README.md @@ -14,22 +14,28 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) +- [DatoCMS](/examples/cms-datocms) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) - [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) ## How to use diff --git a/examples/cms-ghost/README.md b/examples/cms-ghost/README.md index 84c15e5aa78f..ec9aa686aa5d 100644 --- a/examples/cms-ghost/README.md +++ b/examples/cms-ghost/README.md @@ -13,23 +13,28 @@ Once you have access to [the environment variables you'll need](#step-2-set-up-e ### Related examples -- [WordPress](/examples/cms-wordpress) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) +- [Contentful](/examples/cms-contentful) +- [Cosmic](/examples/cms-cosmic) - [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) - [Prismic](/examples/cms-prismic) -- [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) -- [ButterCMS](/examples/cms-buttercms) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) - [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) -- [DotCMS](/examples/cms-dotcms) -- [Enterspeed](/examples/cms-enterspeed) ## How to use diff --git a/examples/cms-kontent-ai/README.md b/examples/cms-kontent-ai/README.md index f5f841754c20..2d6665057bc2 100644 --- a/examples/cms-kontent-ai/README.md +++ b/examples/cms-kontent-ai/README.md @@ -14,24 +14,28 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-prepr/README.md b/examples/cms-prepr/README.md index 40e7baae5a21..2fd6fbb134fd 100644 --- a/examples/cms-prepr/README.md +++ b/examples/cms-prepr/README.md @@ -147,20 +147,25 @@ If you have questions, please [get in touch](https://prepr.io/get-in-touch) with ## Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [Kontent](/examples/cms-kontent) +- [DatoCMS](/examples/cms-datocms) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) - [Ghost](/examples/cms-ghost) - [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) -- [DotCMS](/examples/cms-dotcms) -- [Enterspeed](/examples/cms-enterspeed) diff --git a/examples/cms-prismic/README.md b/examples/cms-prismic/README.md index cf27628f9b0e..312ca44e97d9 100644 --- a/examples/cms-prismic/README.md +++ b/examples/cms-prismic/README.md @@ -14,23 +14,28 @@ Once you have access to [the environment variables you'll need](#step-5-set-up-e ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 29303c9dc61b..983761d39362 100644 --- a/examples/cms-sanity/README.md +++ b/examples/cms-sanity/README.md @@ -15,24 +15,28 @@ You'll get: ## Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) # Configuration diff --git a/examples/cms-sitefinity/README.md b/examples/cms-sitefinity/README.md index 0801b7a739ec..df1b206e942b 100644 --- a/examples/cms-sitefinity/README.md +++ b/examples/cms-sitefinity/README.md @@ -15,22 +15,28 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) +- [DatoCMS](/examples/cms-datocms) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) - [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Builder.io](/examples/cms-builder-io) -- [TinaCMS](/examples/cms-tina/) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-storyblok/README.md b/examples/cms-storyblok/README.md index 1556b0e2bffb..4ee9bb0d2b27 100644 --- a/examples/cms-storyblok/README.md +++ b/examples/cms-storyblok/README.md @@ -14,24 +14,28 @@ Once you have access to [the environment variables you'll need](#step-6-set-up-e ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [Strapi](/examples/cms-strapi) -- [ButterCMS](/examples/cms-buttercms) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-takeshape/README.md b/examples/cms-takeshape/README.md index 69b42597d72d..fee9c3d52de2 100644 --- a/examples/cms-takeshape/README.md +++ b/examples/cms-takeshape/README.md @@ -14,23 +14,28 @@ Once you have access to [the environment variables you'll need](#step-5-set-up-e ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-umbraco-heartcore/README.md b/examples/cms-umbraco-heartcore/README.md index 3e78330b06b0..f18daf754cdb 100644 --- a/examples/cms-umbraco-heartcore/README.md +++ b/examples/cms-umbraco-heartcore/README.md @@ -15,23 +15,28 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Blog Starter](/examples/blog-starter) +- [DatoCMS](/examples/cms-datocms) - [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) - [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-webiny/README.md b/examples/cms-webiny/README.md index 9aa7e04227de..94a414a7a13d 100644 --- a/examples/cms-webiny/README.md +++ b/examples/cms-webiny/README.md @@ -14,21 +14,28 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu ### Related examples -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) +- [DatoCMS](/examples/cms-datocms) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) +- [Ghost](/examples/cms-ghost) - [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Builder.io](/examples/cms-builder-io) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) +- [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-wordpress/README.md b/examples/cms-wordpress/README.md index 82e28bd625dd..4b72d10e5af4 100644 --- a/examples/cms-wordpress/README.md +++ b/examples/cms-wordpress/README.md @@ -14,22 +14,28 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e ### Related examples -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) +- [AgilityCMS](/examples/cms-agilitycms) +- [Builder.io](/examples/cms-builder-io) +- [ButterCMS](/examples/cms-buttercms) - [Contentful](/examples/cms-contentful) -- [Strapi](/examples/cms-strapi) -- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) +- [DatoCMS](/examples/cms-datocms) +- [DotCMS](/examples/cms-dotcms) +- [Drupal](/examples/cms-drupal) +- [Enterspeed](/examples/cms-enterspeed) - [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent-ai) +- [Prepr](/examples/cms-prepr) +- [Prismic](/examples/cms-prismic) +- [Sanity](/examples/cms-sanity) +- [Sitefinity](/examples/cms-sitefinity) +- [Storyblok](/examples/cms-storyblok) +- [TakeShape](/examples/cms-takeshape) +- [Umbraco heartcore](/examples/cms-umbraco-heartcore) +- [Webiny](/examples/cms-webiny) +- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) -- [DotCMS](/examples/cms-dotcms) ## How to use From 26c48ec6967cac8eb3fea953940b0487e8530989 Mon Sep 17 00:00:00 2001 From: Kevintjuhz Date: Tue, 9 May 2023 16:48:43 +0200 Subject: [PATCH 04/12] Updated readme to reflect Prepr naming changes --- examples/cms-prepr/README.md | 60 +++++++++++++++--------------------- 1 file changed, 25 insertions(+), 35 deletions(-) diff --git a/examples/cms-prepr/README.md b/examples/cms-prepr/README.md index 2fd6fbb134fd..04bee06053bf 100644 --- a/examples/cms-prepr/README.md +++ b/examples/cms-prepr/README.md @@ -6,8 +6,8 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas Check out our Blog page example: -- **Live**: [https://next-blog-prepr.vercel.app/](https://next-blog-prepr.vercel.app/) -- **Preview**: [https://next-blog-prepr.vercel.app/api/preview...](https://next-blog-prepr.vercel.app/api/preview?secret=237864ihasdhj283768&slug=discover-enjoy-amsterdam) +* **Live**: [https://next-blog-prepr.vercel.app/](https://next-blog-prepr.vercel.app/) +* **Preview**: [https://next-blog-prepr.vercel.app/api/preview...](https://next-blog-prepr.vercel.app/api/preview?secret=237864ihasdhj283768&slug=discover-enjoy-amsterdam) ## How to use @@ -53,9 +53,9 @@ The `.env.local` file will be ignored by Git. **2.2** In your environment, navigate to **Settings > Development > Access Tokens**. You will see the automatically generated access tokens for your Prepr environment. -![Access tokens](https://assets-site.prepr.io//11t9w1duzr57-access-tokens.png) +![Access tokens](https://assets-site.prepr.io//6jouln4xi3wp-default-access-tokens.png) -Copy the _GraphQL Published_ access token and paste it as the `PREPRIO_PRODUCTION_TOKEN` variable in `.env.local`. Then copy and paste the _GraphQL To do_ access token as the `PREPRIO_PREVIEW_TOKEN` variable. +Copy the *GraphQL Production* access token and paste it as the `PREPRIO_PRODUCTION_TOKEN` variable in `.env.local`. Then copy and paste the *GraphQL Preview* access token as the `PREPRIO_PREVIEW_TOKEN` variable. Alternatively, you can create access tokens yourself by clicking **Add access token**. If so, make sure to [choose the right GraphQL permissions](https://docs.prepr.io/reference/graphql/v1/authorization) for the access tokens. @@ -65,8 +65,8 @@ Once done, your `.env.local` file should look like this: ```bash PREPRIO_API=https://graphql.prepr.io/graphql -PREPRIO_PRODUCTION_TOKEN='your Published access token' -PREPRIO_PREVIEW_TOKEN='your To do access token' +PREPRIO_PRODUCTION_TOKEN='your Production access token' +PREPRIO_PREVIEW_TOKEN='your Preview access token' PREPRIO_PREVIEW_SECRET='your secret id' ``` @@ -83,7 +83,6 @@ npm install ```bash yarn install ``` - **3.2** Execute one of the following commands to run the dev script defined in the `package.json` file: ```bash @@ -103,19 +102,16 @@ Before proceeding, you can test how the content preview works in Prepr. This ste To try preview mode, follow these steps: -**4.1** In Prepr, go to one of the content items of the _Article model_ and update the item title. For example, you can add _[PREVIEW]_ in front of the title. After you edit the content item, save it with the _Review status_. +**4.1** In Prepr, go to one of the content items of the *Article model* and update the item title. For example, you can add *[PREVIEW]* in front of the title. After you edit the content item, save it with the *Review status*. **4.2** To preview the content item, transform its URL to the following format: `http://localhost:3000/api/preview?secret=&slug=`, where: - - `` is the same preview secret you defined in the `.env.local` file; - `` is the slug of the content item you want to preview. -**Tip:** The default _To Do access token_ allows you to retrieve content items in all available statuses, including _To Do_, _In Progress_, _Review_, _Done_, and _Published_. This means you can test the preview mode with all of these statuses. - -**Note:** To exit the preview mode, you must click **Click here to exit preview mode** at the top of the page. +**Note:** To exit the preview mode, you must click on **Click here to exit preview mode** at the top of the page. ![Preview content item](https://assets-site.prepr.io//4hd7vgoyke24-web-page.png) @@ -125,12 +121,12 @@ To make your Next.js app available online, deploy it to the cloud using [Vercel] You can go for one of the following options: -- **Deploy your local project**
+* **Deploy your local project**
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import it 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**
+* **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-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env) @@ -138,34 +134,28 @@ You can go for one of the following options: ## Next steps For more advanced topics, please refer to the Prepr’s documentation: - -- [A/B testing](https://docs.prepr.io/optimization-and-personalization/ab-testing) -- [Personalization](https://docs.prepr.io/optimization-and-personalization/personalized-stack) -- [Recommendations](https://docs.prepr.io/optimization-and-personalization/recommendations) +* [A/B testing](https://docs.prepr.io/optimization-and-personalization/ab-testing) +* [Personalization](https://docs.prepr.io/optimization-and-personalization/personalized-stack) +* [Recommendations](https://docs.prepr.io/optimization-and-personalization/recommendations) If you have questions, please [get in touch](https://prepr.io/get-in-touch) with one of our specialists or [join our Slack community](https://slack.prepr.io/). ## Related examples -- [AgilityCMS](/examples/cms-agilitycms) -- [Builder.io](/examples/cms-builder-io) -- [ButterCMS](/examples/cms-buttercms) +- [WordPress](/examples/cms-wordpress) +- [DatoCMS](/examples/cms-datocms) +- [Sanity](/examples/cms-sanity) +- [TakeShape](/examples/cms-takeshape) +- [Prismic](/examples/cms-prismic) - [Contentful](/examples/cms-contentful) +- [Strapi](/examples/cms-strapi) +- [Agility CMS](/examples/cms-agilitycms) - [Cosmic](/examples/cms-cosmic) -- [DatoCMS](/examples/cms-datocms) -- [DotCMS](/examples/cms-dotcms) -- [Drupal](/examples/cms-drupal) -- [Enterspeed](/examples/cms-enterspeed) +- [ButterCMS](/examples/cms-buttercms) +- [Storyblok](/examples/cms-storyblok) +- [Kontent](/examples/cms-kontent) - [Ghost](/examples/cms-ghost) - [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent-ai) -- [Prepr](/examples/cms-prepr) -- [Prismic](/examples/cms-prismic) -- [Sanity](/examples/cms-sanity) -- [Sitefinity](/examples/cms-sitefinity) -- [Storyblok](/examples/cms-storyblok) -- [TakeShape](/examples/cms-takeshape) -- [Umbraco heartcore](/examples/cms-umbraco-heartcore) -- [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [DotCMS](/examples/cms-dotcms) +- [Enterspeed](/examples/cms-enterspeed) \ No newline at end of file From e668f79f7cd59d36be652fc15ab2b1ac7fd6d32f Mon Sep 17 00:00:00 2001 From: Kevintjuhz Date: Tue, 16 May 2023 15:36:30 +0200 Subject: [PATCH 05/12] Fix deploy with vercel url. --- examples/cms-prepr/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/cms-prepr/README.md b/examples/cms-prepr/README.md index 04bee06053bf..29553b9f83b6 100644 --- a/examples/cms-prepr/README.md +++ b/examples/cms-prepr/README.md @@ -129,7 +129,7 @@ You can go for one of the following options: * **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-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env) ## Next steps From 72cabd2912ddd246bd85e06835283f291a6a9a9c Mon Sep 17 00:00:00 2001 From: Kevintjuhz Date: Wed, 17 May 2023 13:53:43 +0200 Subject: [PATCH 06/12] Updated step 2.2 path for Prepr. --- examples/cms-prepr/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/cms-prepr/README.md b/examples/cms-prepr/README.md index 29553b9f83b6..e191d52ed891 100644 --- a/examples/cms-prepr/README.md +++ b/examples/cms-prepr/README.md @@ -51,7 +51,7 @@ cp .env.local.example .env.local The `.env.local` file will be ignored by Git. -**2.2** In your environment, navigate to **Settings > Development > Access Tokens**. You will see the automatically generated access tokens for your Prepr environment. +**2.2** In your environment, navigate to **Settings > Access Tokens**. You will see the automatically generated access tokens for your Prepr environment. ![Access tokens](https://assets-site.prepr.io//6jouln4xi3wp-default-access-tokens.png) From 5b7c9c0dc47641eba6f79b68b4ac6cc79576db85 Mon Sep 17 00:00:00 2001 From: Kevintjuhz Date: Mon, 22 May 2023 13:01:02 +0200 Subject: [PATCH 07/12] Updated preview slug --- examples/cms-prepr/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/cms-prepr/README.md b/examples/cms-prepr/README.md index e191d52ed891..ab96efe05b88 100644 --- a/examples/cms-prepr/README.md +++ b/examples/cms-prepr/README.md @@ -7,7 +7,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas Check out our Blog page example: * **Live**: [https://next-blog-prepr.vercel.app/](https://next-blog-prepr.vercel.app/) -* **Preview**: [https://next-blog-prepr.vercel.app/api/preview...](https://next-blog-prepr.vercel.app/api/preview?secret=237864ihasdhj283768&slug=discover-enjoy-amsterdam) +* **Preview**: [https://next-blog-prepr.vercel.app/api/preview...](https://next-blog-prepr.vercel.app/api/preview?secret=237864ihasdhj283768&slug=blueberry-cheesecake) ## How to use From 9953abe8e3b3dcbc8ed01179e4dbcd5dead729f4 Mon Sep 17 00:00:00 2001 From: Kevintjuhz Date: Mon, 26 Jun 2023 08:45:41 +0200 Subject: [PATCH 08/12] Processed feedback - Changed apollo client to fetch api - Refactored Date component so useEffect is no longer used - Conditionally render date component based on if date is available - Fixed date fetching - Removed apollo/client & graphql package --- examples/cms-prepr/apollo-client.js | 8 ----- examples/cms-prepr/components/date.js | 14 ++------ examples/cms-prepr/components/hero-post.js | 4 +-- examples/cms-prepr/components/more-stories.js | 2 +- examples/cms-prepr/components/post-header.js | 4 +-- examples/cms-prepr/components/post-preview.js | 4 +-- examples/cms-prepr/lib/api.js | 36 +++++++++---------- examples/cms-prepr/package.json | 2 -- examples/cms-prepr/pages/index.js | 2 +- examples/cms-prepr/pages/posts/[slug].js | 2 +- 10 files changed, 29 insertions(+), 49 deletions(-) delete mode 100644 examples/cms-prepr/apollo-client.js diff --git a/examples/cms-prepr/apollo-client.js b/examples/cms-prepr/apollo-client.js deleted file mode 100644 index 6e5f129c7f89..000000000000 --- a/examples/cms-prepr/apollo-client.js +++ /dev/null @@ -1,8 +0,0 @@ -import { ApolloClient, InMemoryCache } from '@apollo/client' - -const client = new ApolloClient({ - uri: process.env.PREPRIO_API, - cache: new InMemoryCache(), -}) - -export default client diff --git a/examples/cms-prepr/components/date.js b/examples/cms-prepr/components/date.js index 6503e2986d5c..9337878fddcb 100644 --- a/examples/cms-prepr/components/date.js +++ b/examples/cms-prepr/components/date.js @@ -1,13 +1,5 @@ import { parseISO, format } from 'date-fns' -import { useEffect, useState } from 'react' - -// dateString might be null for unpublished posts -export default function DateComponent({ dateString }) { - const [date, setDate] = useState(dateString ? parseISO(dateString) : null) - useEffect(() => { - if (!date) { - setDate(new Date()) - } - }, [date]) - return date && +export default function Date({ dateString }) { + const date = parseISO(dateString) + return } diff --git a/examples/cms-prepr/components/hero-post.js b/examples/cms-prepr/components/hero-post.js index 13d30433e409..c24442047baa 100644 --- a/examples/cms-prepr/components/hero-post.js +++ b/examples/cms-prepr/components/hero-post.js @@ -23,9 +23,9 @@ export default function HeroPost({ {title} -
+ {date &&
-
+
}
-
+ {date &&
-
+
}
) diff --git a/examples/cms-prepr/components/post-preview.js b/examples/cms-prepr/components/post-preview.js index 47aa59fe8afb..dd45cfd760a4 100644 --- a/examples/cms-prepr/components/post-preview.js +++ b/examples/cms-prepr/components/post-preview.js @@ -21,9 +21,9 @@ export default function PostPreview({ {title} -
+ {date &&
-
+
}
From 52c6e90b7afef61be4c8596e943d705628b89a71 Mon Sep 17 00:00:00 2001 From: Kevintjuhz Date: Tue, 1 Aug 2023 16:26:45 +0200 Subject: [PATCH 09/12] Change position of wordpress example --- examples/cms-wordpress/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/cms-wordpress/README.md b/examples/cms-wordpress/README.md index 4b72d10e5af4..e27ae0bf26ce 100644 --- a/examples/cms-wordpress/README.md +++ b/examples/cms-wordpress/README.md @@ -34,8 +34,8 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [Wordpress](/examples/cms-wordpress) ## How to use From 8c51c597113398c74ba71cfea3fb8478677c66c6 Mon Sep 17 00:00:00 2001 From: Kevintjuhz Date: Thu, 3 Aug 2023 14:30:43 +0200 Subject: [PATCH 10/12] Fix capitalization, change order - Fixed the WordPress capitalization in the examples - Changed the order so that Blog starter is above Wordpress --- examples/cms-agilitycms/README.md | 2 +- examples/cms-builder-io/README.md | 2 +- examples/cms-buttercms/README.md | 2 +- examples/cms-contentful/README.md | 2 +- examples/cms-cosmic/README.md | 2 +- examples/cms-datocms/README.md | 2 +- examples/cms-dotcms/README.md | 2 +- examples/cms-drupal/README.md | 2 +- examples/cms-enterspeed/README.md | 2 +- examples/cms-ghost/README.md | 2 +- examples/cms-kontent-ai/README.md | 2 +- examples/cms-prismic/README.md | 2 +- examples/cms-sanity/README.md | 2 +- examples/cms-sitefinity/README.md | 2 +- examples/cms-storyblok/README.md | 2 +- examples/cms-takeshape/README.md | 2 +- examples/cms-umbraco-heartcore/README.md | 2 +- examples/cms-webiny/README.md | 2 +- examples/cms-wordpress/README.md | 2 +- 19 files changed, 19 insertions(+), 19 deletions(-) diff --git a/examples/cms-agilitycms/README.md b/examples/cms-agilitycms/README.md index 960e1226038d..800a24dae19d 100644 --- a/examples/cms-agilitycms/README.md +++ b/examples/cms-agilitycms/README.md @@ -37,7 +37,7 @@ Once you have access to [the environment variables you'll need](#step-15-set-up- - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) +- [WordPress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) ## How to use diff --git a/examples/cms-builder-io/README.md b/examples/cms-builder-io/README.md index bd27d529055b..9fbf1c95b692 100644 --- a/examples/cms-builder-io/README.md +++ b/examples/cms-builder-io/README.md @@ -103,5 +103,5 @@ Alternatively, you can deploy using our template by clicking on the Deploy butto - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) +- [WordPress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) diff --git a/examples/cms-buttercms/README.md b/examples/cms-buttercms/README.md index 731ff24296db..9d226421d764 100644 --- a/examples/cms-buttercms/README.md +++ b/examples/cms-buttercms/README.md @@ -38,8 +38,8 @@ Once you have access to your Butter API token, you can deploy your Butterized pr - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-contentful/README.md b/examples/cms-contentful/README.md index 27f021467e6a..d2dd3e85e777 100644 --- a/examples/cms-contentful/README.md +++ b/examples/cms-contentful/README.md @@ -34,8 +34,8 @@ Using the Deploy Button below, you'll deploy the Next.js project as well as conn - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-cosmic/README.md b/examples/cms-cosmic/README.md index af70cb3dd765..26b905cb6cf6 100644 --- a/examples/cms-cosmic/README.md +++ b/examples/cms-cosmic/README.md @@ -34,8 +34,8 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-datocms/README.md b/examples/cms-datocms/README.md index cec323b83c4e..3be681da4420 100644 --- a/examples/cms-datocms/README.md +++ b/examples/cms-datocms/README.md @@ -28,8 +28,8 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## Deploy your own diff --git a/examples/cms-dotcms/README.md b/examples/cms-dotcms/README.md index b98a8ce68ccc..0e0ce967e2d8 100644 --- a/examples/cms-dotcms/README.md +++ b/examples/cms-dotcms/README.md @@ -34,8 +34,8 @@ Using the Deploy Button below, you'll deploy the Next.js project. - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-drupal/README.md b/examples/cms-drupal/README.md index c5033f5e9bee..a8d0d7509d44 100644 --- a/examples/cms-drupal/README.md +++ b/examples/cms-drupal/README.md @@ -34,8 +34,8 @@ Once you have [configured the Next.js module for Drupal](https://next-drupal.org - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-enterspeed/README.md b/examples/cms-enterspeed/README.md index 237a59e83385..8449c78f86c5 100644 --- a/examples/cms-enterspeed/README.md +++ b/examples/cms-enterspeed/README.md @@ -34,8 +34,8 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-ghost/README.md b/examples/cms-ghost/README.md index ec9aa686aa5d..ffc05e43edeb 100644 --- a/examples/cms-ghost/README.md +++ b/examples/cms-ghost/README.md @@ -33,8 +33,8 @@ Once you have access to [the environment variables you'll need](#step-2-set-up-e - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-kontent-ai/README.md b/examples/cms-kontent-ai/README.md index 2d6665057bc2..55376c9b0fd3 100644 --- a/examples/cms-kontent-ai/README.md +++ b/examples/cms-kontent-ai/README.md @@ -34,8 +34,8 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-prismic/README.md b/examples/cms-prismic/README.md index 312ca44e97d9..694526fdeb6a 100644 --- a/examples/cms-prismic/README.md +++ b/examples/cms-prismic/README.md @@ -34,8 +34,8 @@ Once you have access to [the environment variables you'll need](#step-5-set-up-e - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 983761d39362..9042b556ff08 100644 --- a/examples/cms-sanity/README.md +++ b/examples/cms-sanity/README.md @@ -35,8 +35,8 @@ You'll get: - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) # Configuration diff --git a/examples/cms-sitefinity/README.md b/examples/cms-sitefinity/README.md index df1b206e942b..4ca36db339bf 100644 --- a/examples/cms-sitefinity/README.md +++ b/examples/cms-sitefinity/README.md @@ -35,8 +35,8 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-storyblok/README.md b/examples/cms-storyblok/README.md index 4ee9bb0d2b27..fc06bd78c024 100644 --- a/examples/cms-storyblok/README.md +++ b/examples/cms-storyblok/README.md @@ -34,8 +34,8 @@ Once you have access to [the environment variables you'll need](#step-6-set-up-e - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-takeshape/README.md b/examples/cms-takeshape/README.md index fee9c3d52de2..e5aa618b0ae4 100644 --- a/examples/cms-takeshape/README.md +++ b/examples/cms-takeshape/README.md @@ -34,8 +34,8 @@ Once you have access to [the environment variables you'll need](#step-5-set-up-e - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-umbraco-heartcore/README.md b/examples/cms-umbraco-heartcore/README.md index f18daf754cdb..85e0eb88ca65 100644 --- a/examples/cms-umbraco-heartcore/README.md +++ b/examples/cms-umbraco-heartcore/README.md @@ -35,8 +35,8 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-webiny/README.md b/examples/cms-webiny/README.md index 94a414a7a13d..9de9e1efe283 100644 --- a/examples/cms-webiny/README.md +++ b/examples/cms-webiny/README.md @@ -34,8 +34,8 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu - [TakeShape](/examples/cms-takeshape) - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) -- [Wordpress](/examples/cms-wordpress) - [Blog Starter](/examples/blog-starter) +- [WordPress](/examples/cms-wordpress) ## How to use diff --git a/examples/cms-wordpress/README.md b/examples/cms-wordpress/README.md index e27ae0bf26ce..7d1436e39d0c 100644 --- a/examples/cms-wordpress/README.md +++ b/examples/cms-wordpress/README.md @@ -35,7 +35,7 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e - [Umbraco heartcore](/examples/cms-umbraco-heartcore) - [Webiny](/examples/cms-webiny) - [Blog Starter](/examples/blog-starter) -- [Wordpress](/examples/cms-wordpress) +- [WordPress](/examples/cms-wordpress) ## How to use From c9db59d3f0173df57d5db9737f4380e19af202ac Mon Sep 17 00:00:00 2001 From: Kevintjuhz Date: Fri, 4 Aug 2023 15:56:44 +0200 Subject: [PATCH 11/12] Run prettier on failing files --- examples/cms-prepr/README.md | 23 +++++++++++-------- examples/cms-prepr/components/hero-post.js | 8 ++++--- examples/cms-prepr/components/post-header.js | 8 ++++--- examples/cms-prepr/components/post-preview.js | 8 ++++--- examples/cms-prepr/lib/api.js | 6 ++--- 5 files changed, 31 insertions(+), 22 deletions(-) diff --git a/examples/cms-prepr/README.md b/examples/cms-prepr/README.md index ab96efe05b88..5872f88e40eb 100644 --- a/examples/cms-prepr/README.md +++ b/examples/cms-prepr/README.md @@ -6,8 +6,8 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas Check out our Blog page example: -* **Live**: [https://next-blog-prepr.vercel.app/](https://next-blog-prepr.vercel.app/) -* **Preview**: [https://next-blog-prepr.vercel.app/api/preview...](https://next-blog-prepr.vercel.app/api/preview?secret=237864ihasdhj283768&slug=blueberry-cheesecake) +- **Live**: [https://next-blog-prepr.vercel.app/](https://next-blog-prepr.vercel.app/) +- **Preview**: [https://next-blog-prepr.vercel.app/api/preview...](https://next-blog-prepr.vercel.app/api/preview?secret=237864ihasdhj283768&slug=blueberry-cheesecake) ## How to use @@ -55,7 +55,7 @@ The `.env.local` file will be ignored by Git. ![Access tokens](https://assets-site.prepr.io//6jouln4xi3wp-default-access-tokens.png) -Copy the *GraphQL Production* access token and paste it as the `PREPRIO_PRODUCTION_TOKEN` variable in `.env.local`. Then copy and paste the *GraphQL Preview* access token as the `PREPRIO_PREVIEW_TOKEN` variable. +Copy the _GraphQL Production_ access token and paste it as the `PREPRIO_PRODUCTION_TOKEN` variable in `.env.local`. Then copy and paste the _GraphQL Preview_ access token as the `PREPRIO_PREVIEW_TOKEN` variable. Alternatively, you can create access tokens yourself by clicking **Add access token**. If so, make sure to [choose the right GraphQL permissions](https://docs.prepr.io/reference/graphql/v1/authorization) for the access tokens. @@ -83,6 +83,7 @@ npm install ```bash yarn install ``` + **3.2** Execute one of the following commands to run the dev script defined in the `package.json` file: ```bash @@ -102,12 +103,13 @@ Before proceeding, you can test how the content preview works in Prepr. This ste To try preview mode, follow these steps: -**4.1** In Prepr, go to one of the content items of the *Article model* and update the item title. For example, you can add *[PREVIEW]* in front of the title. After you edit the content item, save it with the *Review status*. +**4.1** In Prepr, go to one of the content items of the _Article model_ and update the item title. For example, you can add _[PREVIEW]_ in front of the title. After you edit the content item, save it with the _Review status_. **4.2** To preview the content item, transform its URL to the following format: `http://localhost:3000/api/preview?secret=&slug=`, where: + - `` is the same preview secret you defined in the `.env.local` file; - `` is the slug of the content item you want to preview. @@ -121,12 +123,12 @@ To make your Next.js app available online, deploy it to the cloud using [Vercel] You can go for one of the following options: -* **Deploy your local project**
+- **Deploy your local project**
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import it 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**
+- **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/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env) @@ -134,9 +136,10 @@ You can go for one of the following options: ## Next steps For more advanced topics, please refer to the Prepr’s documentation: -* [A/B testing](https://docs.prepr.io/optimization-and-personalization/ab-testing) -* [Personalization](https://docs.prepr.io/optimization-and-personalization/personalized-stack) -* [Recommendations](https://docs.prepr.io/optimization-and-personalization/recommendations) + +- [A/B testing](https://docs.prepr.io/optimization-and-personalization/ab-testing) +- [Personalization](https://docs.prepr.io/optimization-and-personalization/personalized-stack) +- [Recommendations](https://docs.prepr.io/optimization-and-personalization/recommendations) If you have questions, please [get in touch](https://prepr.io/get-in-touch) with one of our specialists or [join our Slack community](https://slack.prepr.io/). @@ -158,4 +161,4 @@ If you have questions, please [get in touch](https://prepr.io/get-in-touch) with - [GraphCMS](/examples/cms-graphcms) - [Blog Starter](/examples/blog-starter) - [DotCMS](/examples/cms-dotcms) -- [Enterspeed](/examples/cms-enterspeed) \ No newline at end of file +- [Enterspeed](/examples/cms-enterspeed) diff --git a/examples/cms-prepr/components/hero-post.js b/examples/cms-prepr/components/hero-post.js index c24442047baa..6351c2414ad2 100644 --- a/examples/cms-prepr/components/hero-post.js +++ b/examples/cms-prepr/components/hero-post.js @@ -23,9 +23,11 @@ export default function HeroPost({ {title} - {date &&
- -
} + {date && ( +
+ +
+ )}
- {date &&
- -
} + {date && ( +
+ +
+ )}
) diff --git a/examples/cms-prepr/components/post-preview.js b/examples/cms-prepr/components/post-preview.js index dd45cfd760a4..32a307ed31cc 100644 --- a/examples/cms-prepr/components/post-preview.js +++ b/examples/cms-prepr/components/post-preview.js @@ -21,9 +21,11 @@ export default function PostPreview({ {title} - {date &&
- -
} + {date && ( +
+ +
+ )}
Date: Mon, 14 Aug 2023 09:53:21 +0200 Subject: [PATCH 12/12] Update examples/cms-prepr/README.md Co-authored-by: Lee Robinson --- examples/cms-prepr/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/cms-prepr/README.md b/examples/cms-prepr/README.md index 5872f88e40eb..1c860e3896c5 100644 --- a/examples/cms-prepr/README.md +++ b/examples/cms-prepr/README.md @@ -11,7 +11,7 @@ Check out our Blog page example: ## How to use -Execute one of the following [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) commands using [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to create a new Next.js app and connect it to Prepr: +Run one of the following [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) commands using [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to create a new Next.js app and connect it to Prepr: ```bash npx create-next-app --example cms-prepr cms-prepr-app