From 0dbe6a56187a4f5d9ab0d9d7951c3e872e9a267e Mon Sep 17 00:00:00 2001 From: jake Date: Fri, 1 Nov 2024 10:55:33 +0000 Subject: [PATCH] Moved snow.astro to snow.tsx to allow for deferred loading --- astro.config.mjs | 38 +---- package.json | 12 +- src/components/Snow.astro | 45 ------ src/components/Snow.tsx | 55 +++++++ src/layouts/BaseLayout.astro | 5 +- src/pages/about.astro | 5 +- src/pages/blog.astro | 5 +- src/pages/index.astro | 5 +- src/pages/links.astro | 5 +- tsconfig.json | 8 +- yarn.lock | 288 +++++++++++++++++++++-------------- 11 files changed, 263 insertions(+), 208 deletions(-) delete mode 100644 src/components/Snow.astro create mode 100644 src/components/Snow.tsx 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}