buttercms / react-starter-buttercms Goto Github PK

In Heroku: Buttercms Iframe preview returns 404, even though URL for preview is valid. Full-screen preview functions as normal.

Please include a completed version of this checklist in the PR comments
when turning in projects.

Note: For frameworks that generate static sites, e.g., NextJS, etc.: once these
sites have been built, both locally and in production, they will not
automatically reflect changes to content in the customer's ButterCMS.com
account without rebuilding. As such, items that refer to updating items
with changes, such as posts, pages, header, catgories, tags, etc.,
assume this is being tested while running the hot-reloading development server.

Local Configuration and Token

• Readme is placed in repo and uses language from the sample readme from
  the front-end asset respository.
• User can follow readme and run locally from the terminal in < 5 mins
• Locally run project uses the provided favicon.
• Starter project uses best practices for managing and accessing environment
  variables, including Butter token (generally by storing in an .env file).
• If value for Butter token is present in .env file but set to an invalid
  value, navigating to any page in the local version displays a 404 page.
  Additionally, the following error is logged to console: "Your Butter token
  is set to an invalid value. Please verify your token is correct."
• Instructions on error hero for missing API token has been updated to fit
  current framework.
• "Get your free API token" button on error hero links to https://buttercms.com/join/

Navigation menu

• Navigation menu is pulled into project via two API calls. Updates to the navigation
  menu in Butter also change the navigation menu in the starter project (although
  these updates will not be initially necessary for the customer.)

Index View

• Route is set to "/"
• Secondary route is set to either / or /landing-page/ to enable previewing in ButterCMS.com
  iframe panel, as iframe panel does not currently explicitly allow previewing of index.
• Page view connects to "landing-page-with-components" page type in Butter.
• Automatically detects if API token is configured and displays error hero
  from front end templates if not.
• SEO details in page header update with changes to the SEO component from
  the landing-page-with-components Page in the customer's ButterCMS.com account.
• All items in header menu smooth scroll to appropriate content section.
• All items in footer menu smooth scroll to appropriate content section.
• Blue "Need an account?" link is set to open https://buttercms.com/join/ in a new tab.
• All "Update this Page in Butter" link to https://buttercms.com/pages/ in a new tab.
• "What our customers say" testimonial slider auto-starts.
• Clicking buttons in "What our customers say" slider moves slides left and right.
• "Latest Blog Posts" section shows up to two cards containing the customer's
  two most recent blog posts in ButterCMS.com.
• "View All Blog Posts" button on main page links to Blog main view (list view).
• Title on each blog card links to blog post detail view.
• "Read More" Button on each blog card links to blog post detail view.
• Blog posts from ButterCMS.com without featured images have featured
  image slot removed from their card.
• Draft changes of the landing-page-with-components Page in buttercms.com are
  displayed locally according to the given specifications for that individual framework.

Blog Main View

• Route is set to /blog/
• Detects if API token is configured and displays error hero if not.
• SEO details are present in page header as static placeholder details.
• All items in header menu link to appropriate content section in main view.
• All items in footer menu link to appropriate content section in main view.
• Title above breadcrumb menu says "All Blog Posts"
• Breadcrumb menu displays "Home" > All Blog Posts.
• "Home" in breadcrumb menu links back to index view.
• All categories appear in category widget area and update with changes.
• Clicking on a category routes to the blog category view for that category.
• Posts display and include titles, author, author image, readable date/time,
  tags, and featured image.
• Post titles, featured images, author, author image, date, and tags update
  with changes to posts.
• Placeholder avatar used if no avatar in customer's Butter account.
• Clicking a tag routes to the appropriate blog tag view for that tag.
• Title on each blog card links to blog post detail view.
• "Read More" Button on each blog card links to blog post detail view.
• Search widget area is functional. Typing a search term into the box and clicking on
  magnifying glass icon routes to blog search view for that term.
• Searching for a term that does not exist in the customer's ButterCMS.com posts
  returns the message "No blog posts found matching this query."
• Blog posts from ButterCMS.com without featured images have featured
  image slot removed from their card.
• Draft changes to blog posts in buttercms.com are displayed locally according
  to the given specifications for that individual framework.

Blog Categories View

• Route is set to /blog/category//
• Detects if API token is configured and displays error hero if not.
• SEO details are present in page header as static placeholder details.
• All items in header menu link to appropriate content section in main view.
• All items in footer menu link to appropriate content section in main view.
• Title above breadcrumb menu says "Blog Posts By Category"
• Breadcrumb menu displays "Home" > "Blog" > "Category: ".
• "Home" in breadcrumb menu links back to starter project index view.
• "Blog" in breadcrumb menu links back to blog list view.
• All categories appear in category widget area and update with changes.
• Clicking on a category routes to the blog category view for that category.
• Posts display and include titles, author, author image, readable date/time,
  tags, and featured image.
• Post titles, featured images, author, author image, date, and tags update
  with changes to posts.
• Placeholder avatar used if no avatar in customer's Butter account.
• Clicking a tag routes to the appropriate blog tag view for that tag.
• Title on each blog card links to blog post detail view.
• "Read More" Button on each blog card links to blog post detail view.
• Search widget area is functional. Typing a search term into the box and clicking on
  magnifying glass icon routes to blog search view for that term.
• Searching for a term that does not exist in the customer's ButterCMS.com posts
  returns the message "No blog posts found matching this query."
• Blog posts from ButterCMS.com without featured images have featured
  image slot removed from their card.
• Draft changes to blog posts in buttercms.com are displayed locally according
  to the given specifications for that individual framework.

Blog Tags View

• Route is set to /blog/tag//
• Detects if API token is configured and displays error hero if not.
• SEO details are present in page header as static placeholder details.
• All items in header menu link to appropriate content section in main view.
• All items in footer menu link to appropriate content section in main view.
• Title above breadcrumb menu says "Blog Posts by Tag"
• Breadcrumb menu displays "Home" > "Blog" > "Tag: ".
• "Home" in breadcrumb menu links back to starter project index view.
• "Blog" in breadcrumb menu links back to blog list view.
• All categories appear in category widget area and update with changes.
• Clicking on a category routes to the blog category view for that category.
• Posts display and include titles, author, author image, readable date/time,
  tags, and featured image.
• Post titles, featured images, author, author image, date, and tags update
  with changes to posts.
• Placeholder avatar used if no avatar in customer's Butter account.
• Clicking a tag routes to the appropriate blog tag view for that tag.
• Title on each blog card links to blog post detail view.
• "Read More" Button on each blog card links to blog post detail view.
• Search widget area is functional. Typing a search term into the box and clicking on
  magnifying glass icon routes to blog search view for that term.
• Searching for a term that does not exist in the customer's ButterCMS.com posts
  returns the message "No blog posts found matching this query."
• Blog posts from ButterCMS.com without featured images have featured
  image slot removed from their card.
• Draft changes to blog posts in buttercms.com are displayed locally according
  to the given specifications for that individual framework.

Blog Search View

• Route is set to /blog/search/?q=/
• Detects if API token is configured and displays error hero if not.
• SEO details are present in page header as static placeholder details.
• All items in header menu link to appropriate content section in main view.
• All items in footer menu link to appropriate content section in main view.
• Title above breadcrumb menu says "Search Results"
• Breadcrumb menu displays "Home" > "Blog" > "Search: ".
• "Home" in breadcrumb menu links back to starter project index view.
• "Blog" in breadcrumb menu links back to blog list view.
• All categories appear in category widget area and update with changes.
• Clicking on a category routes to the blog category view for that category.
• Posts display and include titles, author, author image, readable date/time,
  tags, and featured image.
• Post titles, featured images, author, author image, date, and tags update
  with changes to posts.
• Placeholder avatar used if no avatar in customer's Butter account.
• Clicking a tag routes to the appropriate blog tag view for that tag.
• Title on each blog card links to blog post detail view.
• "Read More" Button on each blog card links to blog post detail view.
• Search widget area is functional. Typing a search term into the box and clicking on
  magnifying glass icon routes to blog search view for that term.
• Searching for a term that does not exist in the customer's ButterCMS.com posts
  returns the message "No blog posts found matching this query."
• Blog posts from ButterCMS.com without featured images have featured
  image slot removed from their card.
• Draft changes to blog posts in buttercms.com are displayed locally according
  to the given specifications for that individual framework.

Blog Single Post View

• Route is set to /blog//
• Detects if API token is configured and displays error hero if not.
• SEO details in page header update with changes to the SEO pane
  of the post in the customer's ButterCMS.com account and include title, description, and featured image.
• All items in header menu link to appropriate content section in main view.
• All items in footer menu link to appropriate content section in main view.
• Title above breadcrumb menu displays the post title.
• Breadcrumb menu displays "Home" > "Blog" >
• "Home" in breadcrumb menu links back to starter project index view.
• "Blog" in breadcrumb menu links back to blog list view.
• All categories appear in category widget area and update with changes.
• Clicking on a category routes to the blog category view for that category.
• Posts display and include titles, author, author image, readable date/time,
  tags, and featured image.
• Post titles, featured images, author, author image, date, and tags update
  with changes to posts in the customer's ButterCMS.com account.
• Placeholder avatar used if no avatar in customer's Butter account.
• Clicking a tag routes to the appropriate blog tag view for that tag.
• Search widget area is functional. Typing a search term into the box and clicking on
  magnifying glass icon routes to blog search view for that term.
• Searching for a term that does not exist in the customer's ButterCMS.com posts
  returns the message "No blog posts found matching this query."
• Blog posts from ButterCMS.com without featured images have featured
  image slot removed from their card.

Deployment/Hosting

• Instructions are included for a quick and easy deployment on one of the specified platforms
  using a button inside of the readme (see NextJS project for example).
• For frameworks like Django that generate dynamic sites, edits to the landing page
  in the customer's ButterCMS.com account are reflected in the deployed hosted site.
• For frameworks like Django that generate dynamic sites, edits to blog posts in the
  customer's ButterCMS.com account are reflected in the deployed hosted site.
• Once deployed with a hosting provider, clicking on "preview" in the customer's
  ButterCMS.com account for a page or post shows a preview of the changes in the
  ButterCMS.com iframe panel (requires entering URL of hosted site into ButterCMS.com
  when prompted.)
• For frameworks that generate static sites, webhooks that trigger
  rebuilds-on-content-changes need to be automatically created in the ButterCMS platform
  for the user. For example, for Vercel, we created
  https://buttercms.com/onboarding/vercel-starter-deploy-callback/; which does this
  by tapping into the Vercel deploy button flow. For non-Vercel hosting, work with
  ButterCMS team on supporting a similar flow.

The .scss files are just for the base assets repo, so that we can make global changes to the css files that is to be used across project. Can you please remove scss from this repo?

The "update this page in butter" buttons on the homepage should all open their link in a new tab. The top one does, but the middle and bottom one do not.

All PR's from previous issues have been tested and merged in. Needs final code recheck.

I've run npm run test command and got an error https://share.getcloudapp.com/KouYv0Pl. I think we should remove tests completely
Can we pull this test code out?

https://share.getcloudapp.com/wbuYRoWw

Set repo as private for in progress work. Will need @jakelumetta to make public at some point.

Other starters don't have this https://github.com/ButterCMS/react-starter-buttercms/blob/main/src/index.js#L45
Can we strike this code? I think it was mentioned that it was autogenerated?

Some of the images in the assets are fetched from the cms, so we don't need them in the repo (for example: src/assets/images/blog/blog-thumbnail.png)

Can we delete these? Thank you.

Hi @prokopsimek! I saw what you did with the <title> and SEO data for the blog main view, categories view, search view, and tags view, and I thought, hey, wow, that's really smart! I hadn't put a ton of thought into how to easily make those dynamic, so we just opted to use static placeholders, but the dynamic change you put in was so good and obvious it made me feel bad I didn't think of it.

I'd like to request a change, but only if it wouldn't be very time consuming / difficult to implement, as I'm not a fan of the current capitalization scheme and wording for these pieces, but I also don't want to use up a lot of time since we're still waiting on internal code review.

If it's easily implementable, for this project, can I request changing the SEO data for these views to the following:

<title> Sample Blog -  {{ item }} </title>
<description> Sample blog powered by ButterCMS, showing {{ item }}</description>

Where {{ item }} is one of the following:

- "all posts"
- "category: {{ category }}
- "tag: {{ tag }}
- "search results for {{ query }} 

I'm going to update the checklist with this change as well. Let me know if you think would be a quick and easy fix - i see you already have the tag / category dynamically feeding into the template, so i figured it wouldn't take long, but i wanted to make sure.

All comments from this review have been broken apart into separate issues to make it easier to knock out. Closing this issue :)

Hi @prokopsimek,

Can you please verify if the styles inside https://github.com/ButterCMS/react-starter-buttercms/blob/main/src/App.css actually used anywhere?

For this screen (https://share.getcloudapp.com/YEuB2wgz)
can we add "your", e.g., "to your .env file." Technically, we could use the definite article or even "a" or "an", but "your" removes the grammatical ambiguity here.

Per checklist, project should 404 with invalid token. On localhost, I am just getting the API Token Hero screen.

At current, the route 'landing-page'/'page-slug' automatically fetches our current landing-page-with-components.

Can we instead have it utilize the slug to select the correct landing page to fetch and render that? Index should still be hard-coded to landing-page-with-components at this time, but this would allow the user to create and test a different landing page in the future.

I'm seeing a lot of warnings with NPM install - I'm guessing because we didn't specify the exact node version, and I'm running a different version locally. Can we specify node version with the package (I feel like we did this for gatsby?)

If you're on the /blog page, and you click on "features", for example, from the mobile menu, it will return you to the main page, but does not smooth scroll down to the appropriate section. video

Hello

It looks like preview is set with !: https://github.com/ButterCMS/react-starter-buttercms/blob/main/src/utils/buttercmssdk.js#L6

If no PREVIEW value is set, this works correctly - but if the user manually sets it to true, it breaks the preview functionality and actually displays the opposite.