Skip to content

docs: redesign the docs homepage after the Cloudflare developer docs layout - #586

Merged
Dgiordano33 merged 33 commits into
mainfrom
Dgiordano33/cloudflare-homepage-redesign
Oct 28, 2026
Merged

Dgiordano33 merged 33 commits into
mainfrom
Dgiordano33/cloudflare-homepage-redesign

Conversation

@Dgiordano33

@Dgiordano33 Dgiordano33 commented Oct 19, 2026 •

Copy link
Copy Markdown
Collaborator

Rebuilds index.mdx as a landing page that follows the structure of the Cloudflare developer docs homepage, in Checkly's voice. Builds on #585 (same mode: frame + <Visibility> approach and home-* CSS) but with the section order from Cloudflare:

  1. Hero with "Get started" and a "Copy prompt" button. The prompt tells a coding agent to install Checkly Skills, create monitors matching the repo, add an alert channel, run npx checkly test, and stop before deploy.
  2. Detect / Communicate / Resolve tabs, each with a short pitch, a snippet (Playwright spec, SlackAppAlertChannel, Rocky AI error-group command), a primary CTA, and related links.
  3. What's new card grid (one featured + seven) from the September and August 2026 changelog posts.
  4. Build with Checkly: three grouped rows of feature cards (Monitoring as Code, AI agents, Platform).
  5. Connect with Checkly: community, open source, learn.

Affected Components

  • Docs

Notes for the Reviewer

  • Hannes validated the homepage examples end to end with CLI 10.0.0, a local Checkly stack, and the preview deployment. Both TypeScript snippets type-check against checkly@10.0.0.
  • The Slack example uses __checks__/alerts.check.ts to match the generated config and notes the Checkly Slack App prerequisite in a code comment.
  • The "What's new" cards are static. They need a manual refresh when a new monthly changelog post ships (there is an MDX comment above the section as a reminder). Happy to script this if we want it automated.
  • snippets/copy-prompt-button.jsx gained an optional className prop; existing usages are unchanged.
  • Please check light/dark mode and mobile widths in the preview deployment. No agent icons exist in the repo yet, so the copy button uses the clipboard icon rather than Cloudflare's row of agent logos.

New Dependency Submission

mint dev dependency bumped from 4.2.259 to 4.2.1031 for <Visibility> support (same bump as #585), which is why package-lock.json is large.

🤖 Generated with Claude Code

…layout

Rebuilds index.mdx as a frame-mode landing page: plain hero with a
"Copy prompt" button for coding agents, Detect/Communicate/Resolve tabs
with a snippet and links each, a "What's new" card grid sourced from the
product changelog, grouped developer-tool cards, and a Connect section.
Serves a Markdown version to AI agents via <Visibility>.

The copy button reuses snippets/copy-prompt-button.jsx with a new
optional className prop so it can take the home-* button styles.
Bumps mint to 4.2.1031 for <Visibility> support, as in PR #585.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@mintlify

mintlify Bot commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated
checkly-422f444a 🟢 Ready View Preview Oct 28, 2026, 12:58 PM

The previous lockfile was written by npm 12 and omitted the
puppeteer@24.3.1 subtree that @mintlify/cli depends on, which made
`npm ci` fail in the static-docs-checks job.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
- Drop Checkly Agent from open source claim; it is not public
- Replace Font Awesome rectangle-terminal with Tabler terminal-2 in CLITip
- Show RCA via checks get --error-group in the Resolve tab
- Say RCA runs for new failures, on by default; use Rocky AI consistently
- Remove month labels from changelog cards; unify link text
- Align SEO description with the new positioning
- Add a collapsible preview of the copied prompt; drop redundant --record
- Fix unreadable pressed button state; announce copy state to screen readers

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@hlenke

hlenke commented Oct 27, 2026

Copy link
Copy Markdown
Member

I tested the code examples on the new homepage end to end with CLI 10.0.0, a local Checkly stack and the preview deployment.

Works as written

  • npx checkly init: answering yes (the default) adds the CLI to package.json, installs the skill, creates checkly.config.ts and offers to copy a starter prompt. That matches the text. Answering no adds demo checks instead of the skill and prompt.
  • npx checkly skills install: installs SKILL.md. Claude, Cursor and Codex are all offered.
  • Copy prompt on the preview: copies the prompt exactly and shows "Copied!". Every command it names exists, llms.txt resolves, and adding .md to a docs URL returns Markdown.
  • __checks__/homepage.spec.ts: passes in Playwright against checklyhq.com and type-checks against checkly@10.0.0. It deploys as a Browser Check.
  • npx checkly checks get <check-id> --error-group=<error-group-id>: ran with a real error group. It prints the error group, plus Rocky's analysis when one exists (dist/commands/checks/get.js).

Problems with the Slack example (__checks__/alerts.ts)

  1. The file is never loaded. The checkly.config.ts that npx checkly init creates only matches **/__checks__/**/*.check.ts. With the file named alerts.ts, npx checkly deploy --preview lists only the browser check, and there's no warning. Naming it __checks__/alerts.check.ts fixes this.
  2. It fails to deploy without the Checkly Slack app. npx checkly deploy fails with "An internal error occurred". The API log shows the real cause, slack_integration_not_connected. The construct page states the Slack App requirement, but the homepage snippet doesn't link to it. Either add a short note with that link, or use EmailAlertChannel, which works on any account. (The generic CLI error is a product issue, not something for this PR.)

Minor

  • The PR description still mentions npx checkly test --record and an OTel snippet. Neither is on the page anymore.
  • The snippets also type-check against checkly@10.0.0, not only 8.2.0.

guolau
guolau previously requested changes Oct 27, 2026

@guolau guolau left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some feedback 🙂

I didn't look through all the icon changes, not sure what those were for.

Comment thread index.mdx Outdated
Comment thread index.mdx Outdated
Dgiordano33 and others added 2 commits October 27, 2026 18:35
Co-authored-by: Laura Guo <48332483+guolau@users.noreply.github.com>
@Dgiordano33
Dgiordano33 enabled auto-merge October 28, 2026 13:14
@Dgiordano33
Dgiordano33 requested a review from guolau October 28, 2026 13:15
@Dgiordano33
Dgiordano33 disabled auto-merge October 28, 2026 13:25
@Dgiordano33
Dgiordano33 enabled auto-merge October 28, 2026 13:25
@Dgiordano33
Dgiordano33 dismissed guolau’s stale review October 28, 2026 13:26

Made the changes! Good call on both

@Dgiordano33
Dgiordano33 disabled auto-merge October 28, 2026 13:26
@Dgiordano33
Dgiordano33 merged commit dd1e877 into main Oct 28, 2026
6 checks passed

This branch was successfully deployed

1 active deployment
staging — 83fe5552 Deployed Oct 28, 2026 by mintlify[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants