App router example improvements

[blakewilson]

Tasks

• I have signed a Contributor License Agreement (CLA) with WP Engine.
• If a code change, I have written testing instructions that the whole team & outside contributors can understand.
• I have written and included a comprehensive changeset to properly document the changes I've made.

Description

This PR adds a few final improvements to the App Router example project:

• Implements preview functionality for posts/pages/cpts (Will require Querying for preview via asPreview argument doesn't work when querying by slug, uri idTypes wp-graphql/wp-graphql#1673 to be solved before it works as expected, however)
• Renamed /gated-content to /my-account
• Added logout button on my account

Related Issue(s):

Testing

Screenshots

Pages are now supported, not just posts:

gated-content page now renamed to my-account. Also, a logout button was added:

What you see when you visit a preview route without being authenticated:

What you see when you visit a preview route while authenticated (This relies on wp-graphql/wp-graphql#1673 being resolved):

Documentation Changes

Dependant PRs

[changeset-bot]

⚠️ No Changeset found

Latest commit: 79fc4f6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	242.98 KB (🟡 +340 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[TeresaGobble]

LGTM Blake! Thank you for adding these improvements! 😊