patronage / bubs-next Goto Github PK

Tried to upgrade to 1.2.5, and got a composer error:
wp-graphql/wp-graphql#1753

Using "wpackagist-plugin/wp-graphql": "1.2.5", seems to fix.

Can we proxy WP's rss/xml?

Currently we have a low cached time set on both posts/index and posts/{slug} so that when you go to it, next will look in the background and refetch the content.

Say a new post is published, you then go to the post, you're going to see the old post until you refresh.

If we were to have a webhook that pinged the URL, then when a user went to check it out they'd already get the fresh copy.

And then in future versions of Next, will be all set to implement the following:

Up next, we will be working on a supplemental RFC to address two additional incremental static generation capabilities:

Re-generating and invalidating multiple pages at once (like your blog index and a certain blog post)
Re-generating by listening to events (like CMS webhooks), ahead of user traffic

Traditionally in bubs, we had husky perform two checks:

1. see if the yarn.lock changed, and if so let dev know they need to run yarn install
2. set chmod permissions on acf json

Now that we have both wp and wordpress with their own package.json files, we're in a little bit of trouble.

We also want to add in linting as a pre-commit hook on our website folder.

Husky has also updated to version 5 which works a little differently:
https://typicode.github.io/husky/#/?id=usage

My recommendation would be to:

• Update to Husky version 5
• Remove Susky from wordpress
• Have Husky live inside of website

https://medium.com/@joelmasters/setting-up-eslint-for-nextjs-37163d4cabaa

I'm less familiar with setting up ESLint so need to add a not overly strict version here. It should prompt for fixes but not block working code from being committed over minor issues.

Since we're often completing migrations from an existing WP site, let's mirror their trailing slash as a default.

This will prevent Google Analytics and other similar tools from diverging post switch from WP to Next.

When a commit comes to master, and there are files changed in the wordpress folder (but not only in website), can we trigger a GH action that runs our build script to deploy?

Ideally, we'd make it easy to support a "simple" custom post type, with the following requirements:

• Load a default number of posts on an index page
• Ability to paginate either through an ajax/inline click to load more, and/or through paged links
• A single of the post.

And a more complex version that also adds:

• Category, Tags, And custom taxonomies

It'd be nice to have separate components for index/single displays.

The actual graphql that calls should be easy to adjust as different post types might have different requirements.

We need to make sure that these routes support query strings, either from cache posting via WordPress, or things like UTM params.

Something we should look at is the <NextTemplateLoader> from the new wpengine headless framework:
https://github.com/wpengine/headless-framework/tree/canary/docs/templating

Content editors need a place to visually see different flex modules, so they can help understand what is available to them as a sort of component gallery.

When limited to WordPress, we've often created a private page that has examples of all modules.

A few cons to this approach I've observed:

• It's not particularly interactive, a user can't really change a variable and see how that changes things
• Our list of flex modules can get out of data if we're not on top with keeping it up to date as things change.

Now that we're in Next, I wonder if StoryBook might help.

Some questions I have for evaluation at some point:

1. Can storybook easily be deployed somewhere where non-devs can play with knobs.
2. Is the storybook knob interface intuitive? Keeping in mind that WordPress ACF options won't always match exactly the parameters that might be set in storybook. We're also not passing things in as params to flex modules (but instead one large ACF object via graphql), so I'm not sure how this would all work
3. Would it have any developer benefits to be able to work on things in StoryBook?

Occasionally we have sites that need multilingual support.

Can we develop a recommendation (docs at least, maybe with some code support) for how to handle on both the WP and Next side of things?

Some quick notes of research here:

• https://nextjs.org/docs/advanced-features/i18n-routing
• https://wpml.org/
• https://wpml.org/forums/topic/does-wpml-have-support-for-graphql/
• https://github.com/rburgst/wp-graphql-wpml

Currently they're returning 200.

https://nextjs.org/blog/next-10#notfound-support

We often define a series of user editable globals in WordPress that a user can customize:

• Header/Footer menu items
• Social meta tags
• Global strings of text

I'm not sure we want to load these on every page -- they change infrequently.

Can we merge these options in with our constants file on build time, and then use a webhook to trigger a new build when they change?

Or should we grab these options and commit them to git for preview and approval before changing? One thing I like about this approach is that it would give us the ability to review something like a menu change to production, which might possibly break things.

• Next has a preview mode for viewing non-public posts.
• The WP + Next example has instructions on how to do auth, and how to implement preview mode.
• WP is going to need to link to the correct API routes for previewing, which can be accomplished via filters

• the PostBody.module.scss isn't working currently (needs :global)
• WYSIWYG.php helper and documentation for using type styles in WP, other customizations

• https://twitter.com/rauchg/status/1323029946877444096
• https://github.com/paulirish/lite-youtube-embed

Requirements:

• Support pagination (example)
• category/tags/authors on single
• category/tags/authors on index

Content creators sometimes want to hide content from displaying, without removing the module.

• Add ACF to global options
• Support in flex.js, both to hide, but also to adjust calculations of previous and next

I needed to add Typescript to a client site's next.js and the src folder made that a little more complex. The src folder isn't required for our setup, and a more flat folder setup is next.js convention. Is it OK if we switch back to flat (not nested under src) folder structure?

Given the different tasks and folders they need to be run from (WP DB, WP Dev, WP Build, and Next as well, the VS Code Task Runner is a nice convenience to manage them all, and eliminate confusion about what can be run where:
https://code.visualstudio.com/docs/editor/tasks

Doesn't look too hard:
https://purgecss.com/guides/next.html#customize-postcss-configuration-next-js-9-3
https://dev.to/thomasledoux1/shipping-minimal-css-with-next-js-bootstrap-3mdi

What kind of savings would we see on existing projects?

Let's add some rules for SCSS consistency in formatting, and soft warnings on best practices.

Wonder if there is a default way to load images with:

• srcset
• lazy loading
• lqip

Possible we get there just with a standard img tag, but it seems like we might want an image component that does some of this for us.

The data one looks the most promising to me, but i haven't looked to see if it would support what we get from wordpress (or what we could extract from #8).

https://www.datocms.com/blog/offer-responsive-progressive-lqip-images-in-2020
https://github.com/datocms/react-datocms/blob/master/src/Image/index.tsx
https://www.gatsbyjs.org/packages/gatsby-image/
https://github.com/cloudinary/cloudinary-react

A couple issues I've noticed with our flex setup:

1. Currently we are outputting an outer <section> for each module from flex.js, then an inner div where the component itself lives. This makes it hard to adjust padding or set the background on the whole section. It'd be simpler if flex.js rendered nothing, and all was handled by the individual component.

2. When you define custom classes in wordpress, it could either be a global style class like pt-1 to adjust padding on just this section, or it could be something that is meant to be added to the scss module, like styles['hero-home'], where you then apply background images or other specifics.

3. Support for transparent background as default.

When you use <Link>, you get client-side routing.

But when we pull in content from WordPress, either as a custom field or anline content, we don't always know why type of link the destination is.

On a recent project, we needed to use something like this to either render an a or a <Link>:

function NavItem(props) {
  function isUrlAbsolute(url) {
    return url.indexOf("://") > 0 || url.indexOf("//") === 0;
  }

  if (isUrlAbsolute(props.href)) {}
}

Next is working on support on their end for this:
vercel/next.js#8207 (comment)

The ternary isn't properly setting the image when passed through.

In a recent project we would at times have 3+ queries running on a page:

• Get page details
• Get recent posts for a widget that showed recent posts
• Get global variables/menus

It'd be nice if we could join these requests together into a single request/response:
wp-graphql/wp-graphql#653

Also related is better organizing of our graphql files: wordpress.js can get really big. (can break out to a new issue if need be, but I suspect it'll be related)

We recently added a GTM integration, we should make it easy for someone to use GTM or GA

• Update to latest version of WP (5.6.2)
• Update all WP plugins

We need to pull in the homepage that's set in WP > Settings > Reading and make sure we're set to render that if desired

• Enable graphql debug locally in dev mode
• Remove plugins that we don't really use any more in a headless context

• remove cloudinary code
• next.config for images
• next image loader for loading resized images outside of the image context (e.g. for meta og images)

Since we have monorepo with wordpress, certain commits that are only to the WP folder shouldn't trigger a build:
https://vercel.com/docs/platform/projects#ignored-build-step

Helmet is no longer using the syntax we are in this repo, can we update to their simpler HTML syntax:
nfl/react-helmet#246

Also can we show an example of a default, and then of a child template over-riding.

• Lightly style
• Load in not-found wp page if it exists
• Trigger a GA event

Wondering if we should include a simple docker version of wordpress in here.

Since we don't need any rendering, this should be pretty simple. (no gulp, twig, etc.)

what's currently in getPageWithSlug seems to be a copy + paste of what's actually getAllPostsWithSlug.

i'm not totally sure what this is attempting but i think it should be either updated or removed

https://github.com/patronage/bubs-next/blob/main/website/src/lib/wordpress.js#L77-L90

Currently we have a custom Meta component that let's a page pass up common variables like title, description, and a Yoast SEO object via graphql.

It relies on next/head, and works pretty well. But there is the next-seo plugin that does much more. Should we migrate to using it?

Some things I like about it:

• Define more defaults either in its own config file, or in constants.
• dangerouslySetAllPagesToNoIndex which could be used on preview branches to ensure they don't get indexed.
• Ability to respect page level yoast configs like no-index, canonical, etc.
• Support for alternate open graph plugins like Video, Article, etc.
• JSON-LD structural data for various types of content

We should have by default:
https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics

Next is eventually working on a plugin approach, but it doesn't seem ready yet:
https://github.com/vercel/next.js/tree/canary/packages/next-plugin-google-analytics

If you end up with multiple <Head> declarations, by using a key next will ensure it only outputs one:
https://nextjs.org/docs/api-reference/next/head

For example:

<meta property="og:image" content={meta_image} key="meta_image" />
<meta property="og:image:width" content="1200" key="meta_image_width" />
<meta property="og:image:height" content="600" key="meta_image_height" />

The current README.md is growing, and we've always wanted it to be fairly minimal, since its primary purpose is to be the readme on a new site after cloned from the project template.

I was thinking that adding a docs folder might be nice, because then:

1. Our documentation on how to develop with bubs is version controlled.
2. We could show how you can incorporate markdown into what is otherwise a wordpress powered dynamic site.

@kylehotchkiss thoughts on approach here?

Having just built a site using bootstrap, a few things that can be added or cleaned up:

• Add bootstrap grid variable for gutters since we often customize
• Additional spacer classes in 10px increments
• Spacing and fonts using rem-calc utility function
• Remove some of our custom spacing classes that aren't needed as bootstrap has them (e.g. no gutter)
• Global const values for reusable default content widths

A Gatsby plugin exists with some nice benefits:
https://www.npmjs.com/package/inline-images-plus-code

• Replaces linking to site's pages with component
• Replaces with Gatsby component leveraging all of the gatsby-image rich functionality

Using the new 5.0 bootstrap which is react/vanilla JS friendly, can we add a few common components (like nav), and show how we use the global styles vs. component modules.

Would like to make it easy to grab icons, and style them using css to easily adjust size, colors (including hover) without needing to rely on a bulky webfont.

Success criteria:

• Allow me to include a custom SVG
• Allow me to get an SVG from a public source.

Can we test this out and see if it's worth including?
https://github.com/vercel/next.js/tree/canary/examples/analyze-bundles

With Node adding version 16, and version 12 hitting Maintanence LTS a few months ago, let's take the current "sweet spot" Node version 14.x LTS for a spin.

• This would involve using some instances, like the bubs-next sample, to test how well it plays with website/ theme/libaries, as well as the yarn setup in wordpress/, and vercel deployment etc.

• Once tested, we can bump the .nvmrc and maybe do a node_modules/ upgrade round if some of the libraries need updating to work with the later engine version.

• Graphql to pull in flex modules, and render the relevant react component for that flex.
• Pass in classes, handle background colors (including when they are repeated)

Something clients often want are the ability to set and manage redirects, including for renamed posts.

If using the premium version of Yoast, those redirects are in graphql:
ashhitch/wp-graphql-yoast-seo#38

• vercel/next.js#4931 (comment)
• https://www.npmjs.com/package/nextjs-redirect

Lee Robinson had a post/thread this week on optimizing Font performance on Vercel/Next:

• https://twitter.com/leeerob/status/1349527966083145736
• https://leerob.io/blog/fonts