Switched to preact + react snowfall for

- This is faster - Smaller bundle - Code splitting
jakewdr · Nov 6, 2024 · 90aec97 · 90aec97
1 parent 4b252e2
commit 90aec97
Show file tree

Hide file tree

Showing 9 changed files with 289 additions and 128 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -2,6 +2,8 @@
 import { defineConfig } from "astro/config";
 import { visualizer } from "rollup-plugin-visualizer";
 
+import preact from "@astrojs/preact";
+
 // https://astro.build/config
 
 export default defineConfig({
@@ -14,4 +16,6 @@ export default defineConfig({
         },
         plugins: [visualizer()],
     },
+
+    integrations: [preact()],
 });
diff --git a/package.json b/package.json
@@ -11,15 +11,20 @@
         "format": "yarn biome check --write"
     },
     "dependencies": {
-        "astro-particles": "^2.10.0",
-        "tsparticles-basic": "^2.12.0",
-        "tsparticles-engine": "^2.12.0"
+        "@astrojs/preact": "^3.5.3",
+        "preact": "^10.24.3",
+        "react-snowfall": "^2.1.1"
     },
     "devDependencies": {
         "@astrojs/check": "^0.9.4",
         "@biomejs/biome": "1.9.4",
         "astro": "^4.16.8",
+        "react": "^18.3.1",
         "rollup-plugin-visualizer": "^5.12.0",
         "typescript": "^5.6.3"
+    },
+    "resolutions": {
+        "react": "npm:@preact/compat@latest",
+        "react-dom": "npm:@preact/compat@latest"
     }
 }
diff --git a/src/components/Snow.astro b/src/components/Snow.astro
diff --git a/src/components/Snow.tsx b/src/components/Snow.tsx
@@ -0,0 +1,17 @@
+import Snowfall from "react-snowfall";
+
+const Snow = () => {
+    return (
+        <Snowfall
+            style={{
+                position: "fixed",
+                width: "100vw",
+                height: "100vh",
+            }}
+            color="#fff"
+            snowflakeCount={200}
+        />
+    );
+};
+
+export { Snow };
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -3,7 +3,7 @@ const pageTitle = "About Me!";
 import "../styles/global.css";
 import Footer from "../components/Footer.astro";
 import Navigation from "../components/Navigation.astro";
-import Snow from "../components/Snow.astro";
+import { Snow } from "../components/Snow.tsx";
 ---
 
 <html lang="en">
@@ -42,6 +42,6 @@ import Snow from "../components/Snow.astro";
         <p>I listen to lots of albums in a variety of subgenres</p>
         <p>If you want to check up on my full libary go no further then my <a href="https://www.last.fm/user/jwke">LastFM</a></p>
     <Footer />
-    <Snow />
+    <Snow client:only="preact"/>
     </body>
 </html>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -3,7 +3,7 @@ const pageTitle = "Blog";
 import "../styles/global.css";
 import Footer from "../components/Footer.astro";
 import Navigation from "../components/Navigation.astro";
-import Snow from "../components/Snow.astro";
+import { Snow } from "../components/Snow.tsx";
 ---
 <html lang="en">
     <head>
@@ -20,6 +20,6 @@ import Snow from "../components/Snow.astro";
         <li><a href="/posts/template/"><b>[TEMPLATE]</b></a></li>
     </ul>
     <Footer />
-    <Snow />
+    <Snow client:only="preact"/>
     </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,7 +3,8 @@ const pageTitle = "Home";
 import "../styles/global.css";
 import Footer from "../components/Footer.astro";
 import Navigation from "../components/Navigation.astro";
-import Snow from "../components/Snow.astro";
+//import Snow from "../components/Snow.astro";
+import { Snow } from "../components/Snow.tsx";
 ---
 
 <html lang="en">
@@ -19,6 +20,6 @@ import Snow from "../components/Snow.astro";
 		<h1>{pageTitle}</h1>
 		<p><i><q>An idiot admires complexity, a genius admires simplicity</q></i> - Terry Davis</p>
 		<Footer />
-		<Snow />
+		<Snow client:only="preact"/>
 	</body>
 </html>
diff --git a/src/pages/links.astro b/src/pages/links.astro
@@ -3,7 +3,7 @@ const pageTitle = "Links";
 import "../styles/global.css";
 import Footer from "../components/Footer.astro";
 import Navigation from "../components/Navigation.astro";
-import Snow from "../components/Snow.astro";
+import { Snow } from "../components/Snow.tsx";
 ---
 
 <html lang="en">
@@ -28,6 +28,6 @@ import Snow from "../components/Snow.astro";
 			</ul>
 		</div>
 		<Footer />
-		<Snow />
+		<Snow client:only="preact"/>
 	</body>
 </html>