Capo.js integration

[florian-lefebvre]

Body

Summary

Add a first-class integration of https://github.com/rviscomi/capo.js to Astro.

Background & Motivation

Getting automatic optimization is always nice to have. Looking at nuxt/nuxt#22632, the Nuxt team plans to add auto head optimization using capo.js. I think that could be a great idea for Astro as well.

Goals

• Solve head optimization
• Apply optimization automatically

Example

Until stabilized, this feature could be available under an experimental flag like sortedHead. The user wouldn't have to do anything.

[jasikpark]

is it possible to implement this as a third party integration at first?

[florian-lefebvre]

Sure! I'll try to look into it and make a POC

Note for me:

• https://github.com/unjs/unhead/blob/main/packages/unhead/src/optionalPlugins/capoPlugin.ts
• https://vitejs.dev/guide/api-plugin.html#transformindexhtml

[florian-lefebvre]

Working on something at https://github.com/florian-lefebvre/astro-capo

[natemoo-re]

I published astro-capo over the weekend as an experiment! Would be cool to have the built-in, though. Here's the repo.

And apologies to @florian-lefebvre, I didn't think to check if anybody else had kicked this off yet!

[florian-lefebvre]

Ahah no worries! I'm glad to see you're interested in integrating it to core

[timbomckay]

Man this great. Thanks for creating this plugin. I had been thinking about creating one for astro/vite but now I don't have to haha. I ended up creating a Head component that outlines all the rules.

---
interface Props {
  title: string;
}

// sort the head via capo.js - https://rviscomi.github.io/capo.js/
import { Head as CapoHead } from 'astro-capo';

import GlobalStyles from '../styles/global.css?inline';

const { title } = Astro.props;
---

<CapoHead>
  <!-- 11. Pragma Directives -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <!-- 10. Title -->
  <title>{title}</title>
  <!-- 9. Preconnect Hints -->
  <!-- 8. Asynchronous Script -->
  <!-- 7. Import Styles -->
  <!-- 6. Synchronous Scripts -->
  <script is:inline src="/config.js"></script>
  <!-- 5. Synchronous Styles -->
  <style set:html={GlobalStyles}></style>
  <!-- 4. Preload Hints -->
  <!-- 3. Deferred Scripts -->
  <!-- 2. Prefetch & Prerender Hints -->
  <!-- 1. Everything Else -->
  <meta name="description" content="Application description" />
  <link rel="icon" type="image/x-icon" href="./favicon.ico" />
  <meta name="generator" content={Astro.generator} />
  <meta name="theme-color" content="#A1B2C3" />
</CapoHead>

I know the plugin handles it all for me, but wanted to have this outlined for knowledge & habits. And the minifier gets rid of the comments anyways.

It would be great if Astro had this built-in, cuz it appears to just append the compiled/processed files to the bottom, but this is great in the meantime.

[tomByrer]

I've wondered if the reordering of items could be done by hand?

[acandoo]

Any update on this? It seems like a fairly simple and generic enough feature to be included in Astro (or, at the very least, as an official Astro integration).