fix(core): respect isVisibleInNavigation for blog pages

[chanceaclark]

Fixes: #853

What/Why?

Doesn't return 404 if the blog is disabled from navigation. This is to preserve functionality from Stencil -> Catalyst.

Testing

[changeset-bot]

🦋 Changeset detected

Latest commit: 690bbf7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@bigcommerce/catalyst-core	Patch

Not sure what this means? Click here to learn what changesets are.

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
catalyst-latest	✅ Ready (Inspect)	Visit Preview		May 6, 2024 3:29pm
catalyst-test-store	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 6, 2024 3:29pm

3 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
catalyst-1millionproducts-store	⬜️ Ignored (Inspect)	Visit Preview		May 6, 2024 3:29pm
catalyst-au	⬜️ Ignored (Inspect)	Visit Preview		May 6, 2024 3:29pm
catalyst-uk	⬜️ Ignored (Inspect)	Visit Preview		May 6, 2024 3:29pm

[github-actions]

⚡️🏠 Lighthouse report

Lighthouse ran against https://catalyst-latest-js7aqimm2-bigcommerce-platform.vercel.app

🖥️ Desktop

We ran Lighthouse against the changes on a desktop and produced this report. Here's the summary:

Category	Score
🟢 Performance	99
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	90

📱 Mobile

We ran Lighthouse against the changes on a mobile and produced this report. Here's the summary:

Category	Score
🟢 Performance	97
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	92

[jorgemoya]

So this prevent 404 but will we look into using isVisibleInNavigation in the footer link?

[chanceaclark]

@jorgemoya this automatically filters it in the footer for us: https://github.com/bigcommerce/catalyst/blob/main/apps/core/components/footer/footer-menus/web-page-footer-menu.tsx#L9

[electricenjindevops]

Looks good on our side. From this change, our expectation would be that we could manually remove the blog structure for posts & the main index page if we wanted to complete disable it in a Catalyst build, with the setting now only controlling whether it appears in navigation links or not.

Another thought we had is that we could do a length check on published blog posts to decide if the main blog page shows a default 404, or if it shows a no articles found display within the blog overview page - but this last part feels like it can be a dev/client decision and not something that Catalyst would need to include by default.

[chanceaclark]

Another thought we had is that we could do a length check on published blog posts to decide if the main blog page shows a default 404, or if it shows a no articles found display within the blog overview page - but this last part feels like it can be a dev/client decision and not something that Catalyst would need to include by default.

I was thinking about this as I was working through this fix. A big reason I didn't show an empty page is due to not having designs for an empty blog list so I omitted it for now. If we can work in a feature on BigCommerce's side to actually disable the blog entirely, I think we should implement an empty list UI.

[electricenjindevops]

I was thinking about this as I was working through this fix. A big reason I didn't show an empty page is due to not having designs for an empty blog list so I omitted it for now. If we can work in a feature on BigCommerce's side to actually disable the blog entirely, I think we should implement an empty list UI.

Yeah that makes sense. I think there are pros & cons for both ways. For example, if pages link to /blog/ and that is a full 404 page, now there is a SEO score "penalty" for linking to a missing page whereas the empty list UI version would not penalize for linking to a 404. However, the empty list UI could possibly lead to an SEO penalty for having a page with no useful content, causing the average quality score for backlinks to go down.

Obviously there is little reason to have either an empty blog page, or a 404 blog page, and this will most likely only ever affect a site on launch that hasn't published any blogs yet. Personally though I am a fan of empty list UI because that leaves the decision up to the developers and clients - at least until there is a setting to completely disable.

I have seen cases where store themes/headless builds will go live without the content ready, with the client adding content later - in other blogging systems that have dev/staging/production publish statuses, it's also possible for a preview build to have no blogs, but a staging or production build to have published articles. The empty list UI fits this need better for maintaining a consistent sitemap, backlinks list (all environments go to a blog/ page, instead of some leading to a 404).

Also, when a full 404 is used, that decision may cause the blog overview page to not get indexed initially and/or not re-indexed as quickly by search engines.

[chanceaclark]

That's some great insight on SEO value for it. Overall it seems like it's a better merchant experience than the 404 page, so I'll go ahead and put a ticket in to get some designs for an empty blog page.