Add pagination to blog page

[Copilot]

Implements pagination for the blog page using shadcn/ui components. Shows 10 posts per page across 4 pages (36 total posts).

Implementation

• Client-side pagination - Compatible with Astro's static site generation

  • BlogList.tsx - Manages pagination state and URL query parameters
  • BlogPagination.tsx - Renders pagination controls with click handlers
  • ui/pagination.tsx - Base shadcn/ui pagination primitives

• Features

  • Previous/Next navigation with disabled states
  • Page number links with ellipsis for large counts
  • Active page highlighting
  • URL state management (?page=2)
  • Proper ARIA attributes for accessibility

Screenshot

Page 1:

Page 2 showing different posts:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /home/REDACTED/.nvm/versions/node/v22.14.0/bin/node node /home/REDACTED/work/web/web/node_modules/.bin/../astro/astro.js build (dns block)
• iojs.org
  • Triggering command: /usr/bin/curl curl --fail --compressed -q -L -s REDACTED -o - (dns block)
• telemetry.astro.build
  • Triggering command: /home/REDACTED/.nvm/versions/node/v22.14.0/bin/node node /home/REDACTED/work/web/web/node_modules/.bin/../astro/astro.js build (dns block)
  • Triggering command: /home/REDACTED/.nvm/versions/node/v22.14.0/bin/node node /home/REDACTED/work/web/web/node_modules/.bin/../astro/astro.js dev (dns block)
• ui.shadcn.com
  • Triggering command: /home/REDACTED/.nvm/versions/node/v22.14.0/bin/node node /home/REDACTED/.npm/_npx/d66c5096c7023bfb/node_modules/.bin/shadcn add pagination t(AR�� (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>ブログページにページネーションを導入</issue_title>
<issue_description>使用するコンポーネント

https://ui.shadcn.com/docs/components/pagination</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes ブログページにページネーションを導入 #31

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.