Add HTML minification process and update dependencies

A new script for HTML minification has been added, which is run after the build process. Several dependencies were updated, including the Astro framework and its related plugins. The 'astro-critters' package and its usage in the Astro configuration were removed. A minor animation timing change was also made in the [...slug].astro file.

astro.config.mjs

@@ -2,14 +2,13 @@ import { defineConfig } from 'astro/config';
 import tailwind from "@astrojs/tailwind";
 import vercelStatic from '@astrojs/vercel/static';
 import sitemap from "@astrojs/sitemap";
-import critters from "astro-critters";
 
 import compressor from "astro-compressor";
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://screw-fast.vercel.app',
-  integrations: [tailwind(), sitemap(), critters(), compressor({ gzip: false, brotli: true })],
+  integrations: [tailwind(), sitemap(), compressor({ gzip: false, brotli: true })],
   output: 'static',
   adapter: vercelStatic()
 });

package.json

@@ -5,18 +5,19 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro check && astro build",
+    "build": "astro check && astro build && node process-html.mjs",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.3",
+    "@astrojs/check": "^0.5.4",
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/tailwind": "^5.1.0",
-    "@astrojs/vercel": "^7.3.0",
-    "astro": "^4.3.6",
+    "@astrojs/vercel": "^7.3.1",
+    "astro": "^4.4.0",
     "astro-compressor": "^0.4.1",
-    "astro-critters": "^2.1.1",
+    "globby": "^14.0.1",
+    "html-minifier": "^4.0.0",
     "preline": "^2.0.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"

process-html.mjs

@@ -0,0 +1,22 @@
+import fs from 'node:fs/promises'
+import { globby } from 'globby'
+import { minify } from 'html-minifier'
+
+// Get all HTML files from the output directory
+const path = './.vercel/output/static'
+const files = await globby(`${path}/**/*.html`)
+
+await Promise.all(
+    files.map(async (file) => {
+   	 console.log('Processing file:', file)
+   	 let html = await fs.readFile(file, 'utf-8')
+
+   	 // Minify the HTML
+   	 html = minify(html, {
+   		 removeComments: true,
+   		 preserveLineBreaks: true,
+   		 collapseWhitespace: true
+   	 })
+   	 await fs.writeFile(file, html)
+    })
+)

public/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
-    "short_name": "OpenStove",
-    "name": "OpenStove",
+    "short_name": "ScrewFast",
+    "name": "ScrewFast",
     "icons": [
       {
         "src": "/icon-192.png",
@@ -31,5 +31,5 @@
     "id": "/",
     "start_url": "/",
     "theme_color": "#FFEDD5",
-    "background_color": "#FFEDD5"
+    "background_color": "#262626"
   }

src/pages/products/[...slug].astro

@@ -238,7 +238,7 @@ const { product } = Astro.props;
         timeline.to(
           "#fadeInMoveRight",
           { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
-          "-=1.2",
+          "-=1.4",
         );
 
         timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });