docs(ui): add stories for blog index page

[IestynGage]

🔗 Linked issue

#2150

🧭 Context

Noticed this issue still had missing storybooks and it was labelled with Help wanted, so I added the storybook.

📚 Description

Added the storybook for the blog index. Seems to be working just fine. I looked at the other page storybooks and followed the convention used.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	May 6, 2026 7:28am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	May 6, 2026 7:28am
npmx-lunaria	Ignored		May 6, 2026 7:28am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8310643c-5b30-40d4-8c47-57155a4dc339

📥 Commits

Reviewing files that changed from the base of the PR and between 9b00ed3 and 91f3284.

📒 Files selected for processing (1)

• app/pages/blog/index.stories.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• app/pages/blog/index.stories.ts

---

📝 Walkthrough

Summary by CodeRabbit

• Tests
  • Added a Storybook story for the Blog index component with fullscreen layout configuration and default story setup.

Walkthrough

A new Storybook story file is added for the Blog page component at app/pages/blog/index.stories.ts. It imports the Blog component, Storybook Vue types, and a page decorator; defines a meta configuration using fullscreen layout and the decorator; and exports the meta and a Default story stub.

Changes

Blog Component Story

Layer / File(s)	Summary
Story Setup app/pages/blog/index.stories.ts	Imports Blog component, Meta/StoryObj types from @storybook-vue/nuxt, and pageDecorator from .storybook/decorators.
Meta Configuration app/pages/blog/index.stories.ts	Adds const meta = { component: Blog, parameters: { layout: 'fullscreen' }, decorators: [pageDecorator] } satisfies Meta<typeof Blog>
Story Export app/pages/blog/index.stories.ts	Exports default meta, defines type Story = StoryObj<typeof meta>, and exports export const Default: Story = {}.

Suggested reviewers

• ghostdevv
• JReinhold

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is directly related to the changeset, providing context about the linked issue, the work performed, and verification with a screenshot.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title accurately summarizes the main change: adding Storybook stories for the blog index page, which is confirmed by the file additions and PR objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Hello! Thank you for opening your first PR to npmx, @IestynGage! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[ghostdevv]

@cylewaitforit if you have time would you be able to take a look? no rush or pressure!

[cylewaitforit]

The new story renders fine in the PR's deployed storybook .

@ghostdevv I don't have access to check the Chromatic tests anymore so you may want to check what the visual regression tests capture.

It looks like the blogs that are being displayed are live data. So my assumption is that would probably mean the chromatic tests would suddenly be out of date when a new blog post is added.

So while I know both are ultimately wanted, we would need to decide if disabling visual regression tests on this page to start would be a blocker to merging or if increasing the coverage of our documented pages is a fine enough short term goal.

If documenting to start is the more important goal then we could add the chromatic parameter to disable.

const meta = {
  component: Blog,
  parameters: {
    layout: 'fullscreen",
    // Disables Chromatic's snapshotting on a component level
    chromatic: { disableSnapshot: true },
  },
  decorators: [pageDecorator],
} satisfies Meta<typeof Blog>;

https://www.chromatic.com/docs/disable-snapshots/#with-storybook

We would probably want to then add a follow up issue to mock out the blog posts in order to re-enable snapshots.

[cylewaitforit]

Update:

I have access to the chromatic tests again and understandably the snapshot has the same live data. So I think my assumption that new blog data would cause the snapshot to become outdated seems correct.