Pages banner

[GregBrimble]

Summary

Sparkles on the sidebar, and a dismissible banner at the top.

Screenshots (optional)

Documentation checklist

• The documentation style guide has been adhered to.
• If a larger change - such as adding a new page- an issue has been opened in relation to any incorrect or out of date information that this PR fixes.
• Files which have changed name or location have been allocated redirects.

[hyperlint-ai]

Howdy and thanks for contributing to our repo. The Cloudflare team reviews new, external PRs within two (2) weeks. If it's been two weeks or longer without any movement, please tag the PR Assignees in a comment.

We review internal PRs within 1 week. If it's something urgent or has been sitting without a comment, start a thread in the Developer Docs space internally.

---

PR Change Summary

Implemented a dismissible banner at the top of the pages and added visual enhancements to the sidebar.

• Added a dismissible banner recommending the use of Cloudflare Workers for new projects.
• Updated the sidebar with sparkles for improved visual appeal.
• Modified the migration guide link for better user navigation.

Modified Files

• src/content/docs/pages/index.mdx
• src/content/docs/pages/migrate-to-workers.mdx

---

How can I customize these reviews?

Check out the Hyperlint AI Reviewer docs for more information on how to customize the review.

If you just want to ignore it on this PR, you can add the hyperlint-ignore label to the PR. Future changes won't trigger a Hyperlint review.

Note specifically for link checks, we only check the first 30 links in a file and we cache the results for several hours (for instance, if you just added a page, you might experience this). Our recommendation is to add hyperlint-ignore to the PR to ignore the link check for this PR.

[github-actions]

Preview URL: https://491977fb.preview.developers.cloudflare.com
Preview Branch URL: https://wip-pages-banner.preview.developers.cloudflare.com

Files with changes (up to 15)

Original Link	Updated Link
https://developers.cloudflare.com/pages/configuration/api/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/configuration/api/
https://developers.cloudflare.com/pages/how-to/use-worker-for-ab-testing-in-pages/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/how-to/use-worker-for-ab-testing-in-pages/
https://developers.cloudflare.com/style-guide/frontmatter/banner/	https://wip-pages-banner.preview.developers.cloudflare.com/style-guide/frontmatter/banner/
https://developers.cloudflare.com/pages/functions/api-reference/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/functions/api-reference/
https://developers.cloudflare.com/pages/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/
https://developers.cloudflare.com/pages/functions/advanced-mode/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/functions/advanced-mode/
https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/
https://developers.cloudflare.com/pages/configuration/branch-build-controls/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/configuration/branch-build-controls/
https://developers.cloudflare.com/pages/functions/debugging-and-logging/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/functions/debugging-and-logging/
https://developers.cloudflare.com/pages/functions/middleware/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/functions/middleware/
https://developers.cloudflare.com/pages/functions/module-support/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/functions/module-support/
https://developers.cloudflare.com/pages/functions/routing/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/functions/routing/
https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/troubleshooting/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/framework-guides/nextjs/ssr/troubleshooting/
https://developers.cloudflare.com/pages/functions/wrangler-configuration/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/functions/wrangler-configuration/
https://developers.cloudflare.com/pages/functions/plugins/community-plugins/	https://wip-pages-banner.preview.developers.cloudflare.com/pages/functions/plugins/community-plugins/

[kodster28]

Howdy @GregBrimble, curious on the benefit to this vs manually adding a banner to all the pages in this section?

As long as the messaging would be the same, the risk of anything getting out of date (or even needing to update) wouldn't be that high.

[GregBrimble]

manually adding a banner to all the pages in this section

Yes, that's my plan! This is just a prototype of the functionality — only added to the product homepage. I'll be adding it manually to all child pages.

[irvinebroque]

This is really really nice 👏

[londonzhang]

This looks amazing! Thanks for checking on the banner design!

[kodster28]

Two weird things.

1. Sparkle alignment in Safari, seems out of place? Chrome and Firefox look good.
   

2. Banner text alignment for normal banners, see this page at larger screen sizes.
   

[kodster28]

Is the patch solely for the sparkle icon?
(forgive me, can't exactly tell from the code itself)

If so, would it be more sustainable to refactor to add in the sidebar.ts file?

[GregBrimble]

It is, yeah. It's about rendering the icon. util/sidebar.ts is about collecting the data that we eventually want to render. So, appropriately, I did have to make some modifications there about which icons are relevant for which entries. But this change is still needed to actually print it to the page.

[irvinebroque]

Can we land this? Think it will help a lot

[GregBrimble]

Addressed @kodster28 's issues the other day and just rebased, so should be good to in once approved 👍