Skip to content

Commit

Permalink
Moved snow.astro to snow.tsx to allow for deferred loading
Browse files Browse the repository at this point in the history
  • Loading branch information
jakewdr committed Nov 1, 2024
1 parent e36903d commit 0dbe6a5
Show file tree
Hide file tree
Showing 11 changed files with 263 additions and 208 deletions.
38 changes: 8 additions & 30 deletions astro.config.mjs
Original file line number Diff line number Diff line change
@@ -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()]
})
12 changes: 8 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
45 changes: 0 additions & 45 deletions src/components/Snow.astro

This file was deleted.

55 changes: 55 additions & 0 deletions src/components/Snow.tsx
Original file line number Diff line number Diff line change
@@ -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<void> => {
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 (
<Particles
id="tsparticles"
particlesLoaded={particlesLoaded}
options={options}
/>
);
};

export default Snow;
5 changes: 3 additions & 2 deletions src/layouts/BaseLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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";
---

<html lang="en">
Expand All @@ -18,6 +18,7 @@ import Snow from "../components/Snow.astro";
<Navigation />
<h1>{pageTitle}</h1>
<Footer />
<Snow/>
<Snow client:only="react"/>
<Snow client:idle/>
</body>
</html>
5 changes: 3 additions & 2 deletions src/pages/about.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -42,6 +42,7 @@ 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="react"/>
<Snow client:idle/>
</body>
</html>
5 changes: 3 additions & 2 deletions src/pages/blog.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -20,6 +20,7 @@ import Snow from "../components/Snow.astro";
<li><a href="/posts/template/"><b>[TEMPLATE]</b></a></li>
</ul>
<Footer />
<Snow/>
<Snow client:only="react"/>
<Snow client:idle/>
</body>
</html>
5 changes: 3 additions & 2 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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";
---

<html lang="en">
Expand All @@ -19,6 +19,7 @@ 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="react"/>
<Snow client:idle/>
</body>
</html>
5 changes: 3 additions & 2 deletions src/pages/links.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -28,6 +28,7 @@ import Snow from "../components/Snow.astro";
</ul>
</div>
<Footer />
<Snow/>
<Snow client:only="react"/>
<Snow client:idle/>
</body>
</html>
8 changes: 6 additions & 2 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
{
"extends": "astro/tsconfigs/strict"
}
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}
Loading

0 comments on commit 0dbe6a5

Please sign in to comment.