feat(docs): enhance caching and loading

Author: codybrom

docs/astro.config.mjs

@@ -8,4 +8,13 @@ import playformCompress from "@playform/compress";
 export default defineConfig({
   integrations: [tailwind(), playformCompress()],
   site: "https://blankie.rest",
+  server: {
+    headers: {
+      // Set cache-control headers for all static assets
+      "/*.{js,css,jpg,jpeg,png,gif,ico,svg,webp,mp4}":
+        "Cache-Control: public, max-age=31536000, immutable", // 1 year cache
+      // Specific headers for HTML files
+      "/*.html": "Cache-Control: public, max-age=3600", // 1 hour cache
+    },
+  },
 });

docs/public/favicon-16.png docs/src/assets/favicon-16.png

@@ -19,6 +19,7 @@ const currentPath = Astro.url.pathname;
           alt="The Blankie app icon, which looks like a folded yellow blanket with one corner flipped over"
           width={40}
           height={33}
+          loading="eager"
           class="h-10 w-10 object-contain"
           style={{ aspectRatio: "802/666" }}
         />

docs/public/favicon-32.png docs/src/assets/favicon-32.png

@@ -4,6 +4,12 @@ import Nav from "@/components/Nav.astro";
 import Footer from "@/components/Footer.astro";
 import "@/styles/global.scss";
 
+import favicon from "../assets/favicon.ico";
+import favicon16 from "../assets/favicon-16.png";
+import favicon32 from "../assets/favicon-32.png";
+import favicon48 from "../assets/favicon-48.png";
+import socialImage from "../assets/social.png";
+
 interface Props {
   title: string;
 }
@@ -24,10 +30,10 @@ const description = "Ambient sound mixer for macOS.";
       content="default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"
     />
 
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
-    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png" />
+    <link rel="icon" type="image/x-icon" href={favicon} />
+    <link rel="icon" type="image/png" sizes="16x16" href={favicon16.src} />
+    <link rel="icon" type="image/png" sizes="32x32" href={favicon32.src} />
+    <link rel="icon" type="image/png" sizes="48x48" href={favicon48.src} />
 
     <SEO
       title={`Blankie - ${title}`}
@@ -36,7 +42,7 @@ const description = "Ambient sound mixer for macOS.";
         basic: {
           title: `Blankie - ${title}`,
           type: "website",
-          image: `${siteUrl}/social.png`,
+          image: socialImage.src,
           url: `${siteUrl}${Astro.url.pathname}`,
         },
         image: {
@@ -55,7 +61,7 @@ const description = "Ambient sound mixer for macOS.";
         site: "@blankie",
         title: `Blankie - ${title}`,
         description: description,
-        image: `${siteUrl}/social.png`,
+        image: socialImage.src,
       }}
     />
   </head>

docs/public/favicon-48.png docs/src/assets/favicon-48.png

@@ -2,6 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import { Image } from "astro:assets";
 import screenshot from "../assets/screenshot.png";
+import wavesVideo from "../assets/waves.mp4";
 
 const title = "Ambient sound mixer for macOS";
 ---
@@ -19,7 +20,7 @@ const title = "Ambient sound mixer for macOS";
         playsinline
         class="absolute top-1/2 left-1/2 min-w-full min-h-full -translate-x-1/2 -translate-y-1/2 object-cover opacity-40"
       >
-        <source src="waves.mp4" type="video/mp4" />
+        <source src={wavesVideo} type="video/mp4" />
       </video>
     </div>
     <div class="relative z-10 max-w-4xl mx-auto px-5 text-center py-16 mt-16">
@@ -46,6 +47,7 @@ const title = "Ambient sound mixer for macOS";
         alt="Screenshot of the Blankie app"
         width={730}
         height={1017}
+        loading="eager"
         class="rounded-lg mx-auto max-w-full block transition duration-300 hover:scale-102 w-full md:w-[600px]"
         quality={90}
         style={{ aspectRatio: "730/1017" }}