reduce bundle as much as we can

Author: anonrig

astro/components/Benchmarks.astro

@@ -125,7 +125,17 @@
 </style>  
 
 <script>
-  import Chart from "chart.js/auto";
+  import {
+    Chart,
+    BarController,
+    BarElement,
+    CategoryScale,
+    LinearScale,
+    Legend,
+    Tooltip,
+  } from "chart.js";
+
+  Chart.register(BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip);
 
   function getChartColors() {
     const style = getComputedStyle(document.documentElement);

astro/components/SiteTitle.astro

@@ -13,12 +13,12 @@ function pathsMatch(lhs: string, rhs: string): boolean {
 }
 ---
 
-<div>
+<div class="site-title-wrapper">
   <AstrolightSiteTitle {...Astro.props} />
 
   <div class="separator"></div>
 
-  <nav aria-label="Main navigation">
+  <nav class="site-title-nav" aria-label="Main navigation">
     {
       menuItems.map((menuItem) => (
         <a
@@ -35,26 +35,20 @@ function pathsMatch(lhs: string, rhs: string): boolean {
 </div>
 
 <style>
-  div {
-    display: flex;
-    gap: var(--sl-content-pad-x);
-    align-items: center;
-  }
-
   .separator {
     content: "";
     height: 1.5rem;
     border-inline-end: 1px solid var(--sl-color-gray-4);
   }
 
-  div a {
+  .site-title-wrapper a {
     text-decoration: none;
     color: var(--sl-color-white);
     font-size: var(--sl-text-base);
     font-weight: 500;
   }
 
-  div a:hover {
+  .site-title-wrapper a:hover {
     text-decoration: underline;
     color: var(--sl-color-text-accent);
   }
@@ -64,13 +58,4 @@ function pathsMatch(lhs: string, rhs: string): boolean {
   [aria-current="page"]:focus {
     color: var(--sl-color-text-accent);
   }
-
-  @media (min-width: 50rem) {
-    nav {
-      display: flex;
-    }
-    .separator {
-      display: block;
-    }
-  }
 </style>

astro/components/playground/Playground.astro

@@ -4,4 +4,4 @@ import { Toaster } from './ui/toaster'
 ---
 
 <PlaygroundForm client:load />
-<Toaster client:load />
+<Toaster client:idle />

astro/custom.css

@@ -5,3 +5,22 @@
 :root[data-theme="light"] {
   --sl-color-toast-red: #dc2626;
 }
+
+/* SiteTitle layout — kept here (render-blocking) to prevent FOUC in dev mode */
+.site-title-wrapper {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.site-title-nav {
+  display: flex;
+  gap: 1rem;
+}
+
+@media (min-width: 72rem) {
+  .site-title-wrapper,
+  .site-title-nav {
+    gap: 1.5rem;
+  }
+}