Claude Code के साथ Astro Development को Streamline करें: Content Site Guide

Claude Code से Astro Development को Accelerate करें

Astro “Island Architecture” द्वारा high performance और content-first design से ध्यान आकर्षित करने वाला framework है। Claude Code का उपयोग करके, Astro की unique syntax और content collections की design भी smoothly आगे बढ़ाई जा सकती है।

Project Setup

> Astro project बनाओ।
> Requirements:
> - TypeScript strict
> - Tailwind CSS
> - MDX support
> - Sitemap auto-generation

Claude Code astro.config.mjs की settings के साथ-साथ ज़रूरी integrations add करने के commands भी present करता है।

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [tailwind(), mdx(), sitemap()],
  markdown: {
    shikiConfig: {
      theme: 'github-dark',
    },
  },
});

Content Collection Design

Schema Definition

> Blog article के लिए Content Collection schema बनाओ।
> title, description, pubDate, tags, draft, coverImage include करो।

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string().max(100),
    description: z.string().max(200),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
    coverImage: z.string().optional(),
  }),
});

export const collections = { blog };

Island Architecture का उपयोग

Astro की सबसे बड़ी विशेषता island architecture में, सिर्फ interactive components को JavaScript load किया जाता है।

---
// Static parts server पर render होते हैं
import Header from '../components/Header.astro';
import SearchBar from '../components/SearchBar.tsx';
import Footer from '../components/Footer.astro';
---

<Header />
<!-- client:visible से viewport में आने पर ही hydration -->
<SearchBar client:visible />
<Footer />

Claude Code से “इस component के लिए client:load और client:visible में से कौन सा appropriate है?” पूछने पर use case के अनुसार optimal directive suggest करता है।

Dynamic Routing और Page Generation

> Tag-wise article list pages dynamically generate करो।
> Pagination के साथ।

---
// src/pages/tag/[tag]/[...page].astro
import { getCollection } from 'astro:content';
export async function getStaticPaths({ paginate }) {
  const posts = await getCollection('blog', ({ data }) => !data.draft);
  const tags = [...new Set(posts.flatMap(post => post.data.tags))];

  return tags.flatMap(tag => {
    const filtered = posts.filter(post => post.data.tags.includes(tag));
    return paginate(filtered, { params: { tag }, pageSize: 10 });
  });
}
const { page } = Astro.props;
---

Performance Optimization

Astro default से fast है, लेकिन image optimization और prefetch settings से और improve किया जा सकता है। Claude Code को “Lighthouse score 100 करना है” बताने पर specific optimization points suggest करता है।

Summary

Claude Code का उपयोग करके, Astro की unique syntax और content collection design को quickly सीखा जा सकता है और high-performance site बनाई जा सकती है। SSR/SSG Comparison Guide और SEO Optimization भी reference करें।

Astro की details के लिए Astro Official Documentation देखें।