Danny  Alfredo  Rodriguez
Supercharge Your Astro DX with these three packages

Supercharge Your Astro DX with these three packages

#astro #webdev #seo #tech

Astro has has a special place in my heart for it’s fantastic developer experience and pragmantic design philosophy. But there’s more! Today let’s explore the Astro ecosystem for hidden gems that can make your development experience even better.

astro-capo: Optimizing Your Head

The astro-capo package automatically optimizes your <head> elements by reordering them according to best practices, improving your site’s performance and SEO. Pretty great huh?

Key Features

astro-capo ensures that your critical resources load in the optimal order by:

  • Moving <title> and <meta> tags to the top
  • Prioritizing preload and preconnect hints
  • Properly ordering CSS and JavaScript resources

Installation and Usage

npm install astro-capo

In your Astro config:

import { defineConfig } from "astro/config";
import capo from "astro-capo";

export default defineConfig({
  integrations: [capo()],
});

That’s it! Your head elements are now optimized!!

astro-icon: Simplified Icon Management

astro-icon provides a simple, powerful way to use icons in your Astro projects. No more cluttered SVG’s in your code!

Key Features

  • Icon Collections: Access thousands of icons from popular sets like Heroicons, Lucide, and more
  • Optimization: Automatically optimizes SVGs for performance
  • Customization: Easily style icons with CSS or inline attributes

Usage Example

---
import { Icon } from "astro-icon/components";
---

<div class="hero-section">
  <h1>Welcome to my site</h1>
  <Icon name="mdi:rocket-launch" class="h-8 w-8 text-blue-500" />
  <p>Let's build something amazing!</p>
</div>

You can also use local SVG files:

<Icon name="logos/my-custom-logo" width="40" height="40" />

@astrojs/sitemap: Boost Your SEO

@astrojs/sitemap automatically generates a sitemap for you. Very handy, timesaving package!

Key Features

  • Better Indexing: Helps search engines discover and index your pages
  • Faster Discovery: Notifies search engines when content changes
  • Enhanced SEO: Provides additional metadata about your pages

Setting It Up

npm install @astrojs/sitemap

In your Astro config:

import { defineConfig } from "astro/config";
import sitemap from "@astrojs/sitemap";

export default defineConfig({
  site: "https://yourdomain.com", // Don't forget this, it's your site!
  integrations: [sitemap()],
});

The integration will automatically generate a /sitemap-index.xml and individual sitemap files for your pages.

Now you’re developing like an Astro pro!