perf: flatten critical request chain — move component script to head, inline stylesheets

piotrekwitkowski · web-flow · commit 348abaa8b39b · 2026-04-10T05:48:00.000+01:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -13,6 +13,7 @@ export default defineConfig({
     subsets: ['latin'],
   }],
   site: 'https://cumulus-ui.github.io',
+  build: { inlineStylesheets: 'always' },
   server: { port: 4321 },
   markdown: {
     shikiConfig: {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -31,6 +31,7 @@ const navItems = components.map(comp => ({
       if (theme === 'dark') document.documentElement.classList.add('awsui-dark-mode');
     </script>
     <Font cssVariable="--font-open-sans" preload />
+    <script>import '@cumulus-ui/components';</script>
   </head>
   <body>
     <cs-app-layout-toolbar
@@ -60,7 +61,6 @@ const navItems = components.map(comp => ({
       </svg>
     </cs-button>
 
-    <script>import '@cumulus-ui/components';</script>
     <script is:inline define:vars={{ navItems, breadcrumbs, activeComponentId }}>
       // Side navigation
       const sideNav = document.getElementById('side-nav');
