New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CMS TakeShape Example #11038
Merged
Merged
CMS TakeShape Example #11038
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
71ff34d
TakeShape Example
chibicode 21db9d7
Fix preview logic
chibicode 34a2c91
Update README
chibicode 3666120
Merge branch 'canary' into cms-takeshape
chibicode a5d1d60
Merge branch 'canary' into cms-takeshape
chibicode f7379e3
Merge branch 'canary' into cms-takeshape
48d0c8e
Fix broken link
dad6a3c
Be more clear with the relationship field
c6a5a55
Use latest next.js for cms examples
chibicode 80b4e00
Only show enabled items
chibicode 05708b0
Merge branch 'canary' into cms-takeshape
chibicode 99dbcaf
Ignore current slug
chibicode 36202c3
Fix queries
chibicode 5fa45e5
Add takeshape demo
chibicode f895fcf
Merge branch 'canary' into cms-takeshape
chibicode 8b58e3e
Added link to blog-starter
File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY= | ||
| NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID= | ||
| NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET= |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .env | ||
| .now | ||
| .next |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| # A statically generated blog example using Next.js and TakeShape | ||
|
|
||
| This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [TakeShape](https://www.takeshape.io/) as the data source. | ||
|
|
||
| ## Demo | ||
|
|
||
| ### [https://next-blog-takeshape.now.sh/](https://next-blog-takeshape.now.sh/) | ||
|
|
||
| ### Related examples | ||
|
|
||
| - [Blog Starter](/examples/blog-starter) | ||
| - [DatoCMS](/examples/cms-datocms) | ||
| - [Sanity](/examples/cms-sanity) | ||
|
|
||
| ## How to use | ||
|
|
||
| ### Using `create-next-app` | ||
|
|
||
| Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
|
|
||
| ```bash | ||
| npm init next-app --example cms-takeshape cms-takeshape-app | ||
| # or | ||
| yarn create next-app --example cms-takeshape cms-takeshape-app | ||
| ``` | ||
|
|
||
| ### Download manually | ||
|
|
||
| Download the example: | ||
|
|
||
| ```bash | ||
| curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/cms-takeshape | ||
| cd cms-takeshape | ||
| ``` | ||
|
|
||
| ## Configuration | ||
|
|
||
| ### Step 1. Create an account and a project on TakeShape | ||
|
|
||
| First, [create an account on TakeShape](https://www.takeshape.io/). | ||
|
|
||
| After creating an account, create a **new project** from the dashboard. You can select a **Blank Project**. | ||
|
|
||
| ### Step 2. Create an `Author` model | ||
|
|
||
| From the project settings page, create a new **content type**. | ||
|
|
||
| - The title should be `Author`. | ||
|
|
||
| Next, drag these widgets: | ||
|
|
||
| - **Single Line** widget: Set the title as **Name**. | ||
| - **Asset** widget: Set the title as **Picture**. | ||
|
|
||
| When you’re done, click "Create Content Type". | ||
|
|
||
| ### Step 3. Create a `Post` model | ||
|
|
||
| Click **Add Content Type** again. | ||
|
|
||
| - The title should be `Post`. | ||
|
|
||
| Next, add these fields (you don't have to modify the settings unless specified): | ||
|
|
||
| - **Single Line** widget: Set the title as **Title**. | ||
| - **Markdown** widget: Set the title as **Content**. | ||
| - **Single Line** widget: Set the title as **Excerpt**. | ||
| - **Asset** widget: Set the title as **Cover Image**. | ||
| - **Date** widget: Set the title as **Date**. | ||
| - **Single Line** widget: Set the title as **Slug**. | ||
| - **Relationship** widget: Set the title as **Author**, then set **Relationship Type** to `Single` and check the `Author` checkbox under **Allowed Content Types**. | ||
|
|
||
| When you’re done, click "Create Content Type". | ||
|
|
||
| ### Step 4. Populate Content | ||
|
|
||
| Select **Author** and create a new record. | ||
|
|
||
| - You just need **1 Author record**. | ||
| - Use dummy data for the text. | ||
| - For the image, you can download one from [Unsplash](https://unsplash.com/). | ||
|
|
||
| When you’re done, make sure to click **Enabled** under **Workflow Status**. | ||
|
|
||
| Next, select **Post** and create a new record. | ||
|
|
||
| - We recommend creating at least **2 Post records**. | ||
| - Use dummy data for the text. | ||
| - You can write markdown for the **Content** field. | ||
| - For the images, you can download ones from [Unsplash](https://unsplash.com/). | ||
| - Pick the **Author** you created earlier. | ||
|
|
||
| When you’re done, make sure to click **Enabled** under **Workflow Status**. | ||
|
|
||
| ### Step 5. Set up environment variables | ||
|
|
||
| From the dropdown next to the project name, click **API Keys**. | ||
|
|
||
| Create a new API Key with the **Read** permission. | ||
|
|
||
| Next, copy the `.env.example` file in this directory to `.env` (which will be ignored by Git): | ||
|
|
||
| ```bash | ||
| cp .env.example .env | ||
| ``` | ||
|
|
||
| Then set each variable on `.env`: | ||
|
|
||
| - `NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY` should be the API token you just copied. | ||
| - `NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID` should be the project ID, which is a substring in the project page URL: `https://app.takeshape.io/projects/<project-id>/...` | ||
| - `NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode). | ||
|
|
||
| Your `.env` file should look like this: | ||
|
|
||
| ```bash | ||
| NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID=... | ||
| NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY=... | ||
| NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET=... | ||
| ``` | ||
|
|
||
| ### Step 6. Run Next.js in development mode | ||
|
|
||
| ```bash | ||
| npm install | ||
| npm run dev | ||
|
|
||
| # or | ||
|
|
||
| yarn install | ||
| yarn dev | ||
| ``` | ||
|
|
||
| Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/zeit/next.js/discussions). | ||
|
|
||
| ### Step 7. Try preview mode | ||
|
|
||
| On TakeShape, create a new post like before. But **DO NOT** click **Enabled** under **Workflow Status**. | ||
|
|
||
| Now, if you go to `http://localhost:3000/posts/<slug>` (replace `<slug>`), you won’t see the post. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](/docs/advanced-features/preview-mode.md)). | ||
|
|
||
| To enable the Preview Mode, go to this URL: | ||
|
|
||
| ``` | ||
| http://localhost:3000/api/preview?secret=<secret>&slug=<slug> | ||
| ``` | ||
|
|
||
| - `<secret>` should be the string you entered for `NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET`. | ||
| - `<slug>` should be the post's `slug` attribute (you can check on TakeShape). | ||
|
|
||
| You should now be able to see this post. To exit the preview mode, you can click **Click here to exit preview mode** at the top. | ||
|
|
||
| ### Step 8. Deploy on ZEIT Now | ||
|
|
||
| You can deploy this app to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
|
|
||
| To deploy on ZEIT Now, you need to set the environment variables with **Now Secrets** using [Now CLI](https://zeit.co/download) ([Documentation](https://zeit.co/docs/now-cli#commands/secrets)). | ||
|
|
||
| Install [Now CLI](https://zeit.co/download), log in to your account from the CLI, and run the following commands to add the environment variables. Replace `<NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY>` and `<NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET>` with the corresponding strings in `.env`. | ||
|
|
||
| ``` | ||
| now secrets add next_example_cms_takeshape_api_key <NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY> | ||
| now secrets add next_example_cms_takeshape_project_id <NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID> | ||
| now secrets add next_example_cms_takeshape_preview_secret <NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET> | ||
| ``` | ||
|
|
||
| Then push the project to GitHub/GitLab/Bitbucket and [import to ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) to deploy. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import Container from './container' | ||
| import cn from 'classnames' | ||
| import { EXAMPLE_PATH } from '../lib/constants' | ||
|
|
||
| export default function Alert({ preview }) { | ||
| return ( | ||
| <div | ||
| className={cn('border-b', { | ||
| 'bg-accent-7 border-accent-7 text-white': preview, | ||
| 'bg-accent-1 border-accent-2': !preview, | ||
| })} | ||
| > | ||
| <Container> | ||
| <div className="py-2 text-center text-sm"> | ||
| {preview ? ( | ||
| <> | ||
| This is page is a preview.{' '} | ||
| <a | ||
| href="/api/exit-preview" | ||
| className="underline hover:text-cyan duration-200 transition-colors" | ||
| > | ||
| Click here | ||
| </a>{' '} | ||
| to exit preview mode. | ||
| </> | ||
| ) : ( | ||
| <> | ||
| The source code for this blog is{' '} | ||
| <a | ||
| href={`https://github.com/zeit/next.js/tree/canary/examples/${EXAMPLE_PATH}`} | ||
| className="underline hover:text-success duration-200 transition-colors" | ||
| > | ||
| available on GitHub | ||
| </a> | ||
| . | ||
| </> | ||
| )} | ||
| </div> | ||
| </Container> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { getImageUrl } from 'takeshape-routing' | ||
|
|
||
| export default function Avatar({ name, picture }) { | ||
| return ( | ||
| <div className="flex items-center"> | ||
| <img | ||
| src={getImageUrl(picture.path, { | ||
| fm: 'jpg', | ||
| fit: 'crop', | ||
| w: 100, | ||
| h: 100, | ||
| sat: -100, | ||
| })} | ||
| className="w-12 h-12 rounded-full mr-4" | ||
| alt={name} | ||
| /> | ||
| <div className="text-xl font-bold">{name}</div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default function Container({ children }) { | ||
| return <div className="container mx-auto px-5">{children}</div> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import cn from 'classnames' | ||
| import Link from 'next/link' | ||
| import { getImageUrl } from 'takeshape-routing' | ||
|
|
||
| export default function CoverImage({ title, coverImage, slug }) { | ||
| const image = ( | ||
| <img | ||
| src={getImageUrl(coverImage.path, { | ||
| fm: 'jpg', | ||
| fit: 'crop', | ||
| w: 2000, | ||
| h: 1000, | ||
| })} | ||
| className={cn('shadow-small', { | ||
| 'hover:shadow-medium transition-shadow duration-200': slug, | ||
| })} | ||
| /> | ||
| ) | ||
| return ( | ||
| <div className="-mx-5 sm:mx-0"> | ||
| {slug ? ( | ||
| <Link as={`/posts/${slug}`} href="/posts/[slug]"> | ||
| <a aria-label={title}>{image}</a> | ||
| </Link> | ||
| ) : ( | ||
| image | ||
| )} | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { parseISO, format } from 'date-fns' | ||
|
|
||
| export default function Date({ dateString }) { | ||
| const date = parseISO(dateString) | ||
| return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time> | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can still see the blog post because the API is returning it for some reason. It seems that in TakeShape's GraphQL API, if you have
filterthenonlyEnabledis ignored. Looking into this issue.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It was fixed by: