diff --git a/astro.config.mjs b/astro.config.mjs
index 757d169..fd6b93b 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,40 +1,18 @@
// @ts-check
import { defineConfig } from 'astro/config';
+import react from "@astrojs/react";
+
// https://astro.build/config
export default defineConfig({
site: 'https://jakewdr.github.io',
+
vite: {
- optimizeDeps: {
- include: [
- "astro-particles",
- "tsparticles-engine",
- "tsparticles-basic"
- ],
- exclude: [
- "@astrojs/check",
- "@biomejs/biome",
- "astro",
- "typescript"
- ]
- },
build: {
- cssCodeSplit: true,
- minify: "terser",
- terserOptions: {
- compress: {
- unsafe: true,
- drop_console: true,
- arguments: true
- },
- mangle: {
- toplevel: true
- },
- format: {
- quote_style: 1,
- }
- }
- },
- }
+ cssCodeSplit: true
+ }
+ },
+
+ integrations: [react()]
})
\ No newline at end of file
diff --git a/package.json b/package.json
index 0685f3b..e2829b4 100644
--- a/package.json
+++ b/package.json
@@ -11,15 +11,19 @@
"format": "yarn biome check --write"
},
"dependencies": {
- "astro-particles": "^2.10.0",
- "tsparticles-basic": "^2.12.0",
- "tsparticles-engine": "^2.12.0"
+ "@tsparticles/basic": "^3.5.0",
+ "@tsparticles/engine": "^3.5.0",
+ "@tsparticles/react": "^3.0.0",
+ "react": "^18.3.1"
},
"devDependencies": {
"@astrojs/check": "^0.9.4",
+ "@astrojs/react": "^3.6.2",
"@biomejs/biome": "1.9.4",
+ "@types/react": "^18.3.12",
+ "@types/react-dom": "^18.3.1",
"astro": "^4.16.8",
- "terser": "^5.36.0",
+ "react-dom": "^18.3.1",
"typescript": "^5.6.3"
}
}
diff --git a/src/components/Snow.astro b/src/components/Snow.astro
deleted file mode 100644
index 7e4bc18..0000000
--- a/src/components/Snow.astro
+++ /dev/null
@@ -1,45 +0,0 @@
----
-import Particles from "astro-particles";
-import type { ISourceOptions } from "tsparticles-engine";
-
-const options: ISourceOptions = {
- preset: "snow",
- fullScreen: {
- zIndex: -1,
- },
- particles: {
- color: {
- value: "#ffffff",
- },
- number: {
- value: 200,
- },
- move: {
- enable: true,
- },
- opacity: {
- value: 0.6,
- random: true,
- },
- },
-};
----
-
-
-
-
diff --git a/src/components/Snow.tsx b/src/components/Snow.tsx
new file mode 100644
index 0000000..8c7c85f
--- /dev/null
+++ b/src/components/Snow.tsx
@@ -0,0 +1,55 @@
+import { loadBasic } from "@tsparticles/basic";
+import type { Container, ISourceOptions } from "@tsparticles/engine";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import { useEffect, useMemo, useState } from "react";
+
+const Snow = () => {
+ const [init, setInit] = useState(false);
+
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ await loadBasic(engine);
+ }).then(() => {
+ setInit(true);
+ });
+ }, []);
+
+ const particlesLoaded = async (container?: Container): Promise => {
+ console.log(container);
+ };
+
+ const options: ISourceOptions = useMemo(
+ () => ({
+ preset: "snow",
+ fullScreen: {
+ zIndex: -1,
+ },
+ particles: {
+ color: {
+ value: "#ffffff",
+ },
+ number: {
+ value: 200,
+ },
+ move: {
+ enable: true,
+ },
+ opacity: {
+ value: 0.6,
+ },
+ random: true,
+ },
+ }),
+ [],
+ );
+
+ return (
+
+ );
+};
+
+export default Snow;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index b47c50b..3f291d5 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -3,7 +3,7 @@ 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.tsx";
---
@@ -18,6 +18,7 @@ import Snow from "../components/Snow.astro";
{pageTitle}
-
+
+