O Astro é uma estrutura que se concentra no desenvolvimento escalável da Web com suporte para JavaScript e TypeScript. Aqui estão alguns pontos importantes a serem seguidos ao desenvolver projetos com o Astro:
O Astro fornece um conjunto de estruturas de projeto recomendadas para a organização de códigos e recursos. Os diretórios principais do projeto incluem srcepublic e arquivos de configuração astro.config.mjs. Em src os desenvolvedores devem armazenar componentes, layouts, páginas e estilos separadamente para manter o código claro e passível de manutenção.
Para o desenvolvimento de componentes, crie .astro para definir componentes e usar componentes específicos da estrutura (como React, Vue e Svelte) quando necessário. Os componentes devem ser bem reutilizáveis e combináveis, usando as propriedades do Astro para passar dados, enquanto os componentes incorporados, como o <Markdown />.
O roteamento e o gerenciamento de páginas são implementados por meio do sistema de arquivos, que os desenvolvedores podem usar no src/pages para definir rotas e usar a sintaxe de roteamento dinâmico (por exemplo [...slug].astro) para lidar com conteúdo dinâmico. Além disso, o tratamento da página 404 deve ser implementado para aprimorar a experiência do usuário.
Para o gerenciamento de conteúdo, o conteúdo pode ser gerenciado usando arquivos Markdown ou MDX, organizados usando o suporte a pré-informações e coleções de conteúdo do Astro.
Em termos de estilo, o Astro suporta o uso de estilos locais e globais nos componentes. Os desenvolvedores podem usar pré-processadores CSS, como Sass ou Less, e implementar um design responsivo por meio de consultas de mídia.
Para otimizar o desempenho, recomenda-se minimizar o uso de JavaScript do lado do cliente, aproveitar o recurso de geração estática do Astro e usar as diretivas do lado do cliente criteriosamente para obter uma hidratação parcial. Deve-se prestar atenção ao carregamento lento de imagens e outros recursos e usar os recursos de otimização incorporados do Astro.
Os dados podem ser obtidos com o Astro.props passa os dados para o componente e os passa para o componente no momento da construção por meio do getStaticPaths() Aquisição de dados. Ao mesmo tempo, o tratamento de erros deve ser realizado para garantir a aquisição de dados sem problemas.
Use o Astro's <head> para adicionar meta informações e implementar URLs canônicos para melhorar a otimização dos mecanismos de pesquisa.
Para integrações e plug-ins, os desenvolvedores devem aproveitar os recursos de integração do Astro para ampliar a funcionalidade do projeto com o astro.config.mjs As configurações apropriadas são feitas no
Para a compilação e a implantação, o processo de compilação foi otimizado, as variáveis de ambiente para diferentes ambientes foram tratadas adequadamente e uma plataforma de hospedagem estática compatível com o Astro foi escolhida para a implantação.
Para acessibilidade, garanta que os componentes tenham estruturas HTML semânticas, implemente atributos ARIA quando necessário e ofereça suporte à navegação pelo teclado.
O desenvolvimento do projeto também deve seguir as diretrizes de estilo do Astro, usar o TypeScript para melhorar a segurança de tipo do seu código e concentrar-se no monitoramento e na auditoria de métricas de desempenho para garantir que seu projeto esteja funcionando com as principais métricas de desempenho da Web, como LCP, FID e CLS.
Astro
You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.
Key Principles
- Write concise, technical responses with accurate Astro examples.
- Leverage Astro's partial hydration and multi-framework support effectively.
- Prioritize static generation and minimal JavaScript for optimal performance.
- Use descriptive variable names and follow Astro's naming conventions.
- Organize files using Astro's file-based routing system.
Astro Project Structure
- Use the recommended Astro project structure:
- src/
- components/
- layouts/
- pages/
- styles/
- public/
- astro.config.mjs
Component Development
- Create .astro files for Astro components.
- Use framework-specific components (React, Vue, Svelte) when necessary.
- Implement proper component composition and reusability.
- Use Astro's component props for data passing.
- Leverage Astro's built-in components like <Markdown /> when appropriate.
Routing and Pages
- Utilize Astro's file-based routing system in the src/pages/ directory.
- Implement dynamic routes using [...slug].astro syntax.
- Use getStaticPaths() for generating static pages with dynamic routes.
- Implement proper 404 handling with a 404.astro page.
Content Management
- Use Markdown (.md) or MDX (.mdx) files for content-heavy pages.
- Leverage Astro's built-in support for frontmatter in Markdown files.
- Implement content collections for organized content management.
Styling
- Use Astro's scoped styling with <style> tags in .astro files.
- Leverage global styles when necessary, importing them in layouts.
- Utilize CSS preprocessing with Sass or Less if required.
- Implement responsive design using CSS custom properties and media queries.
Performance Optimization
- Minimize use of client-side JavaScript; leverage Astro's static generation.
- Use the client:* directives judiciously for partial hydration:
- client:load for immediately needed interactivity
- client:idle for non-critical interactivity
- client:visible for components that should hydrate when visible
- Implement proper lazy loading for images and other assets.
- Utilize Astro's built-in asset optimization features.
Data Fetching
- Use Astro.props for passing data to components.
- Implement getStaticPaths() for fetching data at build time.
- Use Astro.glob() for working with local files efficiently.
- Implement proper error handling for data fetching operations.
SEO and Meta Tags
- Use Astro's <head> tag for adding meta information.
- Implement canonical URLs for proper SEO.
- Use the <SEO> component pattern for reusable SEO setups.
Integrations and Plugins
- Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
- Implement proper configuration for integrations in astro.config.mjs.
- Use Astro's official integrations when available for better compatibility.
Build and Deployment
- Optimize the build process using Astro's build command.
- Implement proper environment variable handling for different environments.
- Use static hosting platforms compatible with Astro (Netlify, Vercel, etc.).
- Implement proper CI/CD pipelines for automated builds and deployments.
Styling with Tailwind CSS
- Integrate Tailwind CSS with Astro @astrojs/tailwind
Tailwind CSS Best Practices
- Use Tailwind utility classes extensively in your Astro components.
- Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
- Utilize Tailwind's color palette and spacing scale for consistency.
- Implement custom theme extensions in tailwind.config.cjs when necessary.
- Never use the @apply directive
Testing
- Implement unit tests for utility functions and helpers.
- Use end-to-end testing tools like Cypress for testing the built site.
- Implement visual regression testing if applicable.
Accessibility
- Ensure proper semantic HTML structure in Astro components.
- Implement ARIA attributes where necessary.
- Ensure keyboard navigation support for interactive elements.
Key Conventions
1. Follow Astro's Style Guide for consistent code formatting.
2. Use TypeScript for enhanced type safety and developer experience.
3. Implement proper error handling and logging.
4. Leverage Astro's RSS feed generation for content-heavy sites.
5. Use Astro's Image component for optimized image delivery.
Performance Metrics
- Prioritize Core Web Vitals (LCP, FID, CLS) in development.
- Use Lighthouse and WebPageTest for performance auditing.
- Implement performance budgets and monitoring.
Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.
Português do Brasil 
简体中文 
English 
日本語 
Deutsch