Update buttercms example #35436

ViolanteCodes · 2022-03-18T16:14:19Z

Documentation / Examples

Make sure the linting passes by running yarn lint

Note: I was having a lot of linting errors on a freshly pulled down copy of the canary branch (see code snippet at bottom). After consulting with my team, I checked out the UPDATE_BUTTERCMS_EXAMPLE branch and ran yarn lint-no-typescript (our project is not typescript), which came back with two errors for my new branch, one of which was easily fixed. The other is this:

/home/maria/Programming/butter/next.js/examples/cms-buttercms/components/author-card.js
  7:8  error  Definition for rule '@next/next/no-img-element' was not found  @next/next/no-img-element

If i remember correctly, this author card component was originally set up with <Image />, but was changed to a <img> because of the need for people to choose author profile images from whatever domain they wanted, as people have the option to set their profile image in butter to any image (e.g., outside of our cms).

If this is not acceptable, please advise how you would like us to address.

Pro:~/Programming/butter/next.js$ yarn lint
yarn run v1.22.17
$ run-p test-types lint-typescript prettier-check lint-eslint lint-language
$ lerna run typescript
$ eslint . --ext js,jsx,ts,tsx --max-warnings=0 --config .eslintrc.json --no-eslintrc
$ alex .
$ prettier --check .
$ yarn tsc
$ /home/maria/Programming/butter/next.js/node_modules/.bin/tsc
lerna notice cli v4.0.0
lerna info Executing command in 2 packages: "yarn run typescript"
Checking formatting...
docs/middleware.mdlerna info run Ran npm script 'typescript' in '@next/react-dev-overlay' in 29.9s:
$ tsec --noEmit -p tsconfig.json
errors/no-unwanted-polyfillio.mdtest/lib/e2e-utils.ts:112:16 - error TS2749: 'NextConfig' refers to a value, but is being used as a type here. Did you mean 'typeof NextConfig'?
112   nextConfig?: NextConfig
                   ~~~~~~~~~~
test/lib/next-modes/base.ts:22:26 - error TS2749: 'NextConfig' refers to a value, but is being used as a type here. Did you mean 'typeof NextConfig'?
22   protected nextConfig?: NextConfig
                            ~~~~~~~~~~
test/lib/next-modes/base.ts:52:18 - error TS2749: 'NextConfig' refers to a value, but is being used as a type here. Did you mean 'typeof NextConfig'?
52     nextConfig?: NextConfig
                    ~~~~~~~~~~
test/lib/next-modes/base.ts:125:18 - error TS2749: 'NextConfig' refers to a value, but is being used as a type here. Did you mean 'typeof NextConfig'?
125             } as NextConfig,
                     ~~~~~~~~~~
test/unit/next-babel-loader-dev.test.ts:47:34 - error TS2345: Argument of type '{ name: string; }' is not assignable to parameter of type '{ name: any; parentId: any; attrs: any; startTime: any; }'.
  Type '{ name: string; }' is missing the following properties from type '{ name: any; parentId: any; attrs: any; startTime: any; }': parentId, attrs, startTime
47       currentTraceSpan: new Span({ name: 'test' }),
                                    ~~~~~~~~~~~~~~~~
test/unit/next-babel-loader-prod.test.ts:48:34 - error TS2345: Argument of type '{ name: string; }' is not assignable to parameter of type '{ name: any; parentId: any; attrs: any; startTime: any; }'.
  Type '{ name: string; }' is missing the following properties from type '{ name: any; parentId: any; attrs: any; startTime: any; }': parentId, attrs, startTime
48       currentTraceSpan: new Span({ name: 'test' }),
                                    ~~~~~~~~~~~~~~~~
test/unit/web-runtime/body.test.ts:46:15 - error TS2339: Property 'bodyUsed' does not exist on type 'Implementation'.
46   expect(body.bodyUsed).toEqual(false)
                 ~~~~~~~~
test/unit/web-runtime/body.test.ts:48:23 - error TS2339: Property 'body' does not exist on type 'Implementation'.
48   const reader = body.body.getReader()
                         ~~~~
test/unit/web-runtime/body.test.ts:49:15 - error TS2339: Property 'bodyUsed' does not exist on type 'Implementation'.
49   expect(body.bodyUsed).toEqual(false)
                 ~~~~~~~~
test/unit/web-runtime/body.test.ts:57:15 - error TS2339: Property 'bodyUsed' does not exist on type 'Implementation'.
57   expect(body.bodyUsed).toEqual(true)
                 ~~~~~~~~
test/unit/web-runtime/body.test.ts:75:50 - error TS2339: Property 'body' does not exist on type 'Implementation'.
75   for await (const item of streamToIterator(body.body)) {
                                                    ~~~~
test/unit/web-runtime/body.test.ts:80:23 - error TS2339: Property 'body' does not exist on type 'Implementation'.
80   const reader = body.body.getReader()
                         ~~~~
test/unit/web-runtime/body.test.ts:84:28 - error TS2339: Property 'text' does not exist on type 'Implementation'.
84   const error = await body.text().catch((err) => err)
                              ~~~~
test/unit/web-runtime/body.test.ts:104:27 - error TS2339: Property 'text' does not exist on type 'Implementation'.
104   const text = await body.text()
                              ~~~~
test/unit/web-runtime/body.test.ts:107:28 - error TS2339: Property 'text' does not exist on type 'Implementation'.
107   const error = await body.text().catch((err) => err)
                               ~~~~
test/unit/web-runtime/body.test.ts:127:27 - error TS2339: Property 'text' does not exist on type 'Implementation'.
127   const text = await body.text()
                              ~~~~
test/unit/web-runtime/body.test.ts:152:28 - error TS2339: Property 'arrayBuffer' does not exist on type 'Implementation'.
152   const value = await body.arrayBuffer()
                               ~~~~~~~~~~~
test/unit/web-runtime/body.test.ts:161:28 - error TS2339: Property 'arrayBuffer' does not exist on type 'Implementation'.
161   const value = await body.arrayBuffer()
                               ~~~~~~~~~~~
test/unit/web-runtime/body.test.ts:176:28 - error TS2339: Property 'arrayBuffer' does not exist on type 'Implementation'.
176   const value = await body.arrayBuffer()
                               ~~~~~~~~~~~
test/unit/web-runtime/body.test.ts:186:31 - error TS2339: Property 'formData' does not exist on type 'Implementation'.
186   const formData = await body.formData()
                                  ~~~~~~~~
test/unit/web-runtime/body.test.ts:194:27 - error TS2339: Property 'blob' does not exist on type 'Implementation'.
194   const blob = await body.blob()
                              ~~~~
test/unit/web-runtime/body.test.ts:201:28 - error TS2339: Property 'json' does not exist on type 'Implementation'.
201   const value = await body.json()
                               ~~~~
test/unit/web-runtime/body.test.ts:207:28 - error TS2339: Property 'json' does not exist on type 'Implementation'.
207   const error = await body.json().catch((err) => err)
                               ~~~~
Found 23 errors.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
errors/page-without-valid-component.mdERROR: "test-types" exited with 2.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ViolanteCodes · 2022-04-05T14:48:45Z

@leerob Hello! Sorry for reaching out directly, but I think Jake mentioned he'd corresponded with you previously about updating our Butter starter project. I just wanted to check on this. We're so excited to get this new starter merged in :). Could you let me know if there's some action I need to take? Thank you :)

examples/cms-buttercms/.eslintrc

examples/cms-buttercms/.gitignore

examples/cms-buttercms/README.md

examples/cms-buttercms/package.json

ViolanteCodes · 2022-04-13T16:14:05Z

@leerob I've made the changes asked for, but have not pushed up yet as I wanted to check - would you like us to squash our commits into one and rebase on top of the most recent canary?

leerob · 2022-04-14T00:11:28Z

You don't need to squash 👍 Whatever works for you

ViolanteCodes · 2022-04-14T14:12:01Z

@leerob i believe this is ready for review as the changes requested have been made.

One note: I did run yarn prettier --write in the repo, which fixed a few whitespace issues, but those files are not pulling into git? Are there some pre-commit hooks or something set up to ignore whitespace-only changes?

ViolanteCodes · 2022-04-19T13:37:01Z

@leerob I see that there is a failing test here, however, I don't see anything to fix in the error message? Would it be possible for you to let us know what we need to do from here? Thank you, and sorry for the inconvenience!

leerob

Left a few more comments, looking good! Thanks for making those changes.

leerob · 2022-04-23T17:39:45Z

examples/cms-buttercms/.env.sample

@@ -0,0 +1 @@
+NEXT_PUBLIC_BUTTER_CMS_API_KEY=your_auth_token


I think we should keep this as .env.local.example - any reason it changed?

reverted back to .env.local.example

leerob · 2022-04-23T17:40:01Z

examples/cms-buttercms/.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*

 # vercel
 .vercel
+
+# other
+.vscode


The test was failing because of this - all examples need to have the same .gitignore 👍

I've committed this change

examples/cms-buttercms/.gitignore

leerob · 2022-04-23T17:44:00Z

examples/cms-buttercms/next.config.js

+ },
+ images: {
+ domains: ['cdn.buttercms.com'],
+ dangerouslyAllowSVG: true,


Do we need this?

I believe we need the domains specification as the images for the landing page come from the CDN, but I've deleted the dangerously allow SVG key

leerob · 2022-04-23T17:45:28Z

examples/cms-buttercms/pages/api/preview.js

@@ -1,28 +0,0 @@
-import { getPreviewPostBySlug } from '@/lib/api'
-
-export default async function preview(req, res) {


Any reason this was removed? It'd be great if it used on-demand ISR as well 😄

My understanding is that we no longer support the same method for previewing of a draft post, so there's no longer a getPreviewPostBySlug method.

As for the on-demand ISR - that sounds like a very cool feature! Unfortunately, the main next.js developer that we had for creating the starter is not available, and I'm really hesitant to change anything that's going to affect functionality on that level, as I'm not a next.js developer (or even js developer 😅 myself).

We have another version of this starter in our docs and our page that we'd also have to update, as we're trying to keep the two versions (i.e., the one in our docs and the one in the next.js examples) from diverging too greatly. Our main goal with the starter was for someone to be able to set it up super-rapidly using the exact same steps across all stacks that we support, so we'd like to prevent having to set up extra environment variables, etc.

If the on-demand static ISR is an absolute requirement for updating our current example, I can forward that information to my team, but I think our preference at this time would be to not implement it if that's a possibility? It also makes the process of testing/hosting a bit more difficult, due to the need to create a production build and start the production server, and we're trying to keep these starters as easy to drop in as possible.

No worries - could be a future improvement!

Co-authored-by: Lee Robinson <me@leerob.io>

ViolanteCodes · 2022-04-26T15:00:00Z

@leerob I think I've addressed all the changes from this last batch, save regarding the on-demand ISR; please see my note. Please let me know if there's anything I forgot or need to do, and thank you again.

leerob

Thank you so much for dealing with my changes!

ViolanteCodes · 2022-04-27T16:22:36Z

Thank you so much for dealing with my changes!

Of course - and thank you for your feedback. It was extremely clear and implementable; much appreciated :)

ViolanteCodes · 2022-04-29T14:11:16Z

@leerob I see we have a failing test again, sorry 😢. Please let me know what I can do to fix this, and thanks again for all your help.

examples/cms-buttercms/package.json

ViolanteCodes · 2022-05-02T13:05:19Z

@leerob Oh, awesome! So exciting to see all tests pass! Thank you!

ViolanteCodes added 4 commits March 18, 2022 11:44

remove old buttercms project files

fb160f0

Updated .gitignore

95a9519

Add new buttercms files

f654e6d

Add readme and remove name from package.json

cba4645

ijjk added the examples Issue/PR related to examples label Mar 18, 2022

fix linting error

2e60627

ViolanteCodes marked this pull request as ready for review March 18, 2022 17:12

ViolanteCodes requested review from timneutkens, ijjk, shuding, styfle, leerob and steven-tey as code owners March 18, 2022 17:12

ViolanteCodes added 2 commits April 4, 2022 09:07

Merge branch 'canary' into UPDATE_BUTTERCMS_EXAMPLE

6cce697

Merge branch 'canary' into UPDATE_BUTTERCMS_EXAMPLE

5de2ff0

leerob requested changes Apr 5, 2022

View reviewed changes

Merge branch 'vercel:canary' into UPDATE_BUTTERCMS_EXAMPLE

3864db7

ViolanteCodes and others added 2 commits April 14, 2022 10:01

Fix eslint

9474bfe

Merge branch 'canary' into UPDATE_BUTTERCMS_EXAMPLE

9217a7b

ViolanteCodes requested a review from leerob April 14, 2022 14:12

leerob reviewed Apr 23, 2022

View reviewed changes

ViolanteCodes requested a review from balazsorban44 as a code owner April 25, 2022 16:52

ViolanteCodes and others added 3 commits April 25, 2022 12:52

Update examples/cms-buttercms/.gitignore

9ce78e9

Co-authored-by: Lee Robinson <me@leerob.io>

renamed .env.sample > .env.local.example

14d385f

remove dangerously allow svg

fc3ba70

Merge branch 'canary' into UPDATE_BUTTERCMS_EXAMPLE

a8d62b7

leerob previously approved these changes Apr 27, 2022

View reviewed changes

leerob reviewed May 2, 2022

View reviewed changes

examples/cms-buttercms/package.json Outdated Show resolved Hide resolved

Update examples/cms-buttercms/package.json

4781be3

leerob dismissed their stale review via 4781be3 May 2, 2022 00:08

leerob approved these changes May 2, 2022

View reviewed changes

Merge branch 'canary' into UPDATE_BUTTERCMS_EXAMPLE

1c8a823

balazsorban44 approved these changes May 3, 2022

View reviewed changes

balazsorban44 merged commit fec5318 into vercel:canary May 3, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jun 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update buttercms example #35436

Update buttercms example #35436

ViolanteCodes commented Mar 18, 2022 •

edited

Loading

ViolanteCodes commented Apr 5, 2022

ViolanteCodes commented Apr 13, 2022

leerob commented Apr 14, 2022

ViolanteCodes commented Apr 14, 2022

ViolanteCodes commented Apr 19, 2022

leerob left a comment

leerob Apr 23, 2022

ViolanteCodes Apr 25, 2022

leerob Apr 23, 2022

ViolanteCodes Apr 26, 2022

leerob Apr 23, 2022

ViolanteCodes Apr 25, 2022

leerob Apr 23, 2022

ViolanteCodes Apr 26, 2022

leerob Apr 27, 2022

ViolanteCodes commented Apr 26, 2022

leerob left a comment

ViolanteCodes commented Apr 27, 2022

ViolanteCodes commented Apr 29, 2022

ViolanteCodes commented May 2, 2022

		@@ -1,28 +0,0 @@
		import { getPreviewPostBySlug } from '@/lib/api'

		export default async function preview(req, res) {

		@@ -0,0 +1 @@
		NEXT_PUBLIC_BUTTER_CMS_API_KEY=your_auth_token

Update buttercms example #35436

Update buttercms example #35436

Conversation

ViolanteCodes commented Mar 18, 2022 • edited Loading

Documentation / Examples

ViolanteCodes commented Apr 5, 2022

ViolanteCodes commented Apr 13, 2022

leerob commented Apr 14, 2022

ViolanteCodes commented Apr 14, 2022

ViolanteCodes commented Apr 19, 2022

leerob left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ViolanteCodes commented Apr 26, 2022

leerob left a comment

Choose a reason for hiding this comment

ViolanteCodes commented Apr 27, 2022

ViolanteCodes commented Apr 29, 2022

ViolanteCodes commented May 2, 2022

ViolanteCodes commented Mar 18, 2022 •

edited

Loading