titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-16 13:00:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Particles.js and crismas

Browse source
This commit is contained in:
Riftriot 2024-03-08 13:17:03 -06:00
parent 2b0292a614
commit 35cb912e28
8 changed files with 588 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -19,6 +19,9 @@
"@nebula-services/bare-server-node": "2.0.1-patch.1",
"@nebula-services/dynamic": "0.7.2-patch.2",
"@titaniumnetwork-dev/ultraviolet": "^3.0.0",
"@tsparticles/engine": "^3.3.0",
"@tsparticles/react": "^3.0.0",
"@tsparticles/slim": "^3.3.0",
"@types/express": "^4.17.21",
"chalk": "^5.3.0",
"classnames": "^2.5.1",

252
pnpm-lock.yaml generated
View file

@ -29,6 +29,15 @@ dependencies:
'@titaniumnetwork-dev/ultraviolet':
specifier: ^3.0.0
version: 3.0.0
'@tsparticles/engine':
specifier: ^3.3.0
version: 3.3.0
'@tsparticles/react':
specifier: ^3.0.0
version: 3.0.0(@tsparticles/engine@3.3.0)(react-dom@18.2.0)(react@18.2.0)
'@tsparticles/slim':
specifier: ^3.3.0
version: 3.3.0
'@types/express':
specifier: ^4.17.21
version: 4.17.21
@ -1142,6 +1151,246 @@ packages:
dev: false
optional: true
/@tsparticles/basic@3.3.0:
resolution: {integrity: sha512-YB6+pFnkby6hnHhDqH2Q7+Y6Zcm7RAgZLQ8gkecHQxywD0RFItpYQfxpIf82mOTZ39NoeVdH6AF3mydgxVNAMQ==}
dependencies:
'@tsparticles/engine': 3.3.0
'@tsparticles/move-base': 3.3.0
'@tsparticles/shape-circle': 3.3.0
'@tsparticles/updater-color': 3.3.0
'@tsparticles/updater-opacity': 3.3.0
'@tsparticles/updater-out-modes': 3.3.0
'@tsparticles/updater-size': 3.3.0
dev: false
/@tsparticles/engine@3.3.0:
resolution: {integrity: sha512-Sr24epYquTelGrUbMaknXTscib8IMQJrbmShJnEemU+wpZNIPtAh09sQgGtq1pUxrGQRUSQIgaybYuXcNgk8rg==}
requiresBuild: true
dev: false
/@tsparticles/interaction-external-attract@3.3.0:
resolution: {integrity: sha512-tkwGFoOwwwZm7tcXW4zeJ0EVeRxtOre3EkMT151E/LKmjudo7sQHXpJk/tfz839OdMi3gGq7+9J88AEyl0TVhA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-bounce@3.3.0:
resolution: {integrity: sha512-4j+Dz/cj+/zgDJZPDVDZz+SCUSxzdDCcEOxjo4KwEYa/vQH4hBPlGxM7V1wIE6g/bKTbNZbmcDAW8haRVrtdSA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-bubble@3.3.0:
resolution: {integrity: sha512-xdtensiGRhR1C2cOlKBTGr5Sxu9QmMEjloSbr7mx8pyV03OnLG2j5GqFxTzVpoFa+yojjMQ/E5KXctWfQ2FbTg==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-connect@3.3.0:
resolution: {integrity: sha512-mYdeRclR41qlLwbF3ONsZzu5VDkcML95BDQOrc5uVOC8AukAVhoTKjwVYgii7g3obSvYzSE1YvaAOuLDZOpNwg==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-grab@3.3.0:
resolution: {integrity: sha512-07dsnz1VzuFY655Ba24kXwyYj/tFSQ0M0ae55z3UFa09o/1uJiDKCdnhBqSAT+MrLiVRX/h8BHL0XS9O3EwE/Q==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-pause@3.3.0:
resolution: {integrity: sha512-b43k5ecrdsWsiSpKtMPolPhw7EfBeaoH6fFeRUhv7tF4itTHB+DEONcvIOlN3jlQswgZm/sZcaq4dnxT31t9kw==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-push@3.3.0:
resolution: {integrity: sha512-pwU2hBvp6/YstK+wtChfKJtXkEBP2Z3836rkK+CUeO7sbsSzO2SkJtmUPfJZJHCcvpCjEoDfhp/3zPskBiwe0w==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-remove@3.3.0:
resolution: {integrity: sha512-jg6aA0eC1rxZ/bamKJnApBhxABsk/4RgtaWNHLWAKTlen4TdF1pqECqit9Q5C6q5kcJrG7bmRF3VuWd80WiIwQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-repulse@3.3.0:
resolution: {integrity: sha512-6fZg9PNUZqXaBtI4OqTKPU98a7/CJP5C+us90q1QqEBhIFSxJBnIkmuloLZuZ7Vj8Ul1FID2Zr8HN5b5EJOZPw==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-slow@3.3.0:
resolution: {integrity: sha512-flqaF6QN6XuEvKP2KhG2ln82wB9q5WPLLoUBDfWBbYI3gm+O0AH8orysHXYYGtLv+20ZdNiS8fijNl3jvNVLzQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-particles-attract@3.3.0:
resolution: {integrity: sha512-jNFcAfrgz7hqC1rknnvnahrfLRUR8SRI5dJI1MVisi9kuNkSFJUSiGMUbDzYx8eKqfBwcFphVlWrcaylaYeWvA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-particles-collisions@3.3.0:
resolution: {integrity: sha512-OwHaTaXA0WmHoyd6ygVnJXWqJvK8ObVUoKwSBQg7yRToZkL7lqKnqCJxjoWlHENORP9p8OF/G3JoX0rJXQYQcQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-particles-links@3.3.0:
resolution: {integrity: sha512-m2cqciwsolCwrzPMcFOzruuCxqxEmofGoKHzPzN5XAUaCDNGj2lsfKHOSgk3orAQQZUmiYoJBr1rIFGEzIGvvg==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/move-base@3.3.0:
resolution: {integrity: sha512-yxfynO0CHWYlhyXy53/HzsN8zyD+v1RX0wT9X1Wry5lgnxhJoFTAP/Pk+srgyLOdaD0WwoRjB3yA/0f/haBWkg==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/move-parallax@3.3.0:
resolution: {integrity: sha512-s8i0xrsQavI3megcdkKs768jo0lJZEgBL8iF8gL77fpJ56YrWicOC4hEEGW7UOYq44D9m16e+lgr7P7eLpMKAg==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/plugin-easing-quad@3.3.0:
resolution: {integrity: sha512-6c5SRGj9qzASOJwiAc06JVOtH9ZaTXrF9p7svZ1qr/S85fRoRL+Jz/ucl8cdRDqRJvXTrt1qkz2OMi+P+4AgEA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/react@3.0.0(@tsparticles/engine@3.3.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==}
peerDependencies:
'@tsparticles/engine': ^3.0.2
react: '>=16.8.0'
react-dom: '>=16.8.0'
dependencies:
'@tsparticles/engine': 3.3.0
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@tsparticles/shape-circle@3.3.0:
resolution: {integrity: sha512-m/T3SbZf8Zrn0m4Rd+8KTCMy54cofkaXa1Z7oikQYr/gPigT2C7Bo4vwQpiP8HKU+Xh5CEHFyc0s6ogfOaA2fA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-emoji@3.3.0:
resolution: {integrity: sha512-F9tl3jUTMCRzbwhpKk3t1z2d+7vbyeAoHAEeG4UdUVorO0ovaqzj16KcpfSu2wyGkPSzUKIyHX8doB9MR8DfGw==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-image@3.3.0:
resolution: {integrity: sha512-w5PHiDZjILIUEDIn10bFasY1qnSY9lwV0ekoTLGDepiS/EmyNJb0+D7gWOy/mhFlpK1637Ngbz1Axw3Zfl8ObA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-line@3.3.0:
resolution: {integrity: sha512-PPkwsBL2F4TNK/6eXThhqTcInSPpGb5rjsBR3bbWBXKGEH+4ibLA0biBQWPjxqY/UrAt4St1dpktKRmTt0XacA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-polygon@3.3.0:
resolution: {integrity: sha512-JAHKIO8Pmzft0METZn6BqTHpn9PxWXxhAlPMG0XOEuziHpvMxmTXYbJNDFlmWu9RFpAjfIeGg8zUcS1xNuGWUQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-square@3.3.0:
resolution: {integrity: sha512-72tLkzQ5QkkhgIFy+qqdA+vmBk8VE4PuJcLJ12FVH8e3uPJDO2WiLJmnCg9MHyp26uU5CEuIalrQpZ0TX1A5PQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-star@3.3.0:
resolution: {integrity: sha512-RX9RLuJ9oWQbOVvVyiOBdPK8dc+RLc7DaqEOxGhMTPQeGvryjdkBU/FmiG4a7KaVyZeCI2diDW4oWEkulzZIIg==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/slim@3.3.0:
resolution: {integrity: sha512-/FAbB4b9/j7xaZYuGx+uU4rDLrLs7zEShwFHDWc4PWn/970CX+EvKszqNrBvQDuqDD3HZQ94iCwj7w9OWKXLTg==}
dependencies:
'@tsparticles/basic': 3.3.0
'@tsparticles/engine': 3.3.0
'@tsparticles/interaction-external-attract': 3.3.0
'@tsparticles/interaction-external-bounce': 3.3.0
'@tsparticles/interaction-external-bubble': 3.3.0
'@tsparticles/interaction-external-connect': 3.3.0
'@tsparticles/interaction-external-grab': 3.3.0
'@tsparticles/interaction-external-pause': 3.3.0
'@tsparticles/interaction-external-push': 3.3.0
'@tsparticles/interaction-external-remove': 3.3.0
'@tsparticles/interaction-external-repulse': 3.3.0
'@tsparticles/interaction-external-slow': 3.3.0
'@tsparticles/interaction-particles-attract': 3.3.0
'@tsparticles/interaction-particles-collisions': 3.3.0
'@tsparticles/interaction-particles-links': 3.3.0
'@tsparticles/move-parallax': 3.3.0
'@tsparticles/plugin-easing-quad': 3.3.0
'@tsparticles/shape-emoji': 3.3.0
'@tsparticles/shape-image': 3.3.0
'@tsparticles/shape-line': 3.3.0
'@tsparticles/shape-polygon': 3.3.0
'@tsparticles/shape-square': 3.3.0
'@tsparticles/shape-star': 3.3.0
'@tsparticles/updater-life': 3.3.0
'@tsparticles/updater-rotate': 3.3.0
'@tsparticles/updater-stroke-color': 3.3.0
dev: false
/@tsparticles/updater-color@3.3.0:
resolution: {integrity: sha512-4ZggZr4jTXXOCLXqMXkH/jfhylf9wLt2G7D/F9ZZPihh8l8F2x0YM/JvzRePynhIFXfZaMD1PRfdXNTr6HnFFQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/updater-life@3.3.0:
resolution: {integrity: sha512-6DDx4FfezLmXxetVx0kFZdWKWLIPa/ujFxHto0fFIVFtjLaffJPEONoOIj6/TmAlcJ+XF2jY2Md4z6vyS6bMlA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/updater-opacity@3.3.0:
resolution: {integrity: sha512-aQZJheqvoD69YYPiSlcRuWU7yEPs9dSmeOALP+fcaQwUQbVvr+wNJSUVkVNzeawtv4tPwou4QnytoWaBmZoqog==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/updater-out-modes@3.3.0:
resolution: {integrity: sha512-G+UDZO6pmBUdSeT1Y7SRXvZz2EUw5RBCF8AOQMyLntehJQgLPc+PbMCFenfjpRQCCiWQ8RSumZ040iv5CLRUug==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/updater-rotate@3.3.0:
resolution: {integrity: sha512-4i3+0rbvzmaNGunlK443kURoEVFeAvCY5VGNX73y8S5g94RFejtGYBUUsC/LAcCxgfxa3HgYwNTT6ypslnoNuw==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/updater-size@3.3.0:
resolution: {integrity: sha512-8s0dSh8bV4CN13oM86x1MPkI1T6KwuKPIiSdTcO1qKTcN1WBYzuuIPOU7Q3+fbQhSZ6F+da3zdG9unqU5sPYUA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/updater-stroke-color@3.3.0:
resolution: {integrity: sha512-swo8nbIQsMJa5kGkaZF4Fq1XekKNqTj3n8T921kQOdkkz/nmL8U3/ikdRUpW/OiZgvULTnihYnDtTtiMtLmcaQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@types/body-parser@1.19.5:
resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
dependencies:
@ -5687,6 +5936,9 @@ packages:
/sqlite3@5.1.7:
resolution: {integrity: sha512-GGIyOiFaG+TUra3JIfkI/zGP8yZYLPQ0pl1bH+ODjiX57sPhrLU5sQJn1y9bDKZUFYkX1crlrPfSYt0BKKdkog==}
requiresBuild: true
peerDependenciesMeta:
node-gyp:
optional: true
dependencies:
bindings: 1.5.0
node-addon-api: 7.1.0

110
public/crismas.json Normal file
View file

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 300,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 1.5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6.3974410235905665,
"direction": "bottom-right",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

110
public/particlesjs-config.json Normal file
View file

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

2
src/components/HeaderRoute.tsx
View file

@ -4,7 +4,7 @@ export function HeaderRoute(props: { children: any }) {
return (
<div className="flex h-screen flex-col">
<Header />
<div className="flex-1 bg-primary">
<div className="flex-1">
<main className="h-full">{props.children}</main>
</div>
</div>

33
src/index.tsx
View file

@ -3,14 +3,40 @@ import { Suspense, lazy } from "preact/compat";
import { LoadSuspense } from "./LoadSuspense";
import { Helmet } from "react-helmet";
import Meta from "./components/Meta";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadSlim } from "@tsparticles/slim";
import { useEffect, useState } from "preact/compat";
const Routes = lazy(() => import("./routes"));
const theme = localStorage.getItem("theme") || "main";
const particlesUrl = localStorage.getItem("particles") || "none";
export default function App() {
const [ init, setInit ] = useState(false);
// this should be run only once per application lifetime
useEffect(() => {
initParticlesEngine(async (engine) => {
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
//await loadAll(engine);
//await loadFull(engine);
await loadSlim(engine);
//await loadBasic(engine);
}).then(() => {
setInit(true);
});
}, []);
const particlesLoaded = (container) => {
console.log(container);
};
return (
<div>
<div class="w-srceen h-screen">
{window.location.origin === "https://nebulaproxy.io" && <Meta />}
{/* {window.location.origin === "http://localhost:8080" && <Meta />} */}
<Helmet>
@ -18,9 +44,12 @@ export default function App() {
<link rel="stylesheet" href="/themes/main.css"></link>
</Helmet>
<Suspense fallback={<LoadSuspense />}>
<div>
<div className="z-20 absolute w-full h-full">
<Routes />
</div>
<div className="z-10 bg-primary w-full h-full">
{init && particlesUrl !== "none" && <Particles id="tsparticles" url={particlesUrl} particlesLoaded={particlesLoaded} class="bg-primary" /> }
</div>
</Suspense>
</div>
);

16
src/pages/Settings/Customization.tsx
View file

@ -15,6 +15,11 @@ function Customization({ id, active }) {
{ id: "catppuccinLatte", label: t("themes.catppuccinLatte") }
];
const particles = [
{ id: "none", label: "None" },
{ id: "/crismas.json", label: "Crismas 🐴🎄" }
];
return (
<motion.div
role="tabpanel"
@ -26,7 +31,7 @@ function Customization({ id, active }) {
>
<motion.div
variants={settingsPageVariant}
className="content-card flex w-full flex-col items-center justify-center text-center"
className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
>
<div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
<div className="p-2 text-3xl font-bold text-input-text">
@ -37,6 +42,15 @@ function Customization({ id, active }) {
</div>
<Dropdown storageKey="theme" options={themes} refresh={true} />
</div>
<div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
<div className="p-2 text-3xl font-bold text-input-text">
Particles
</div>
<div className="text-md p-4 font-bold text-input-text">
Choose a particles wallpaper.
</div>
<Dropdown storageKey="particles" options={particles} refresh={true} />
</div>
</motion.div>
</motion.div>
);

4
src/style.css
View file

@ -3,3 +3,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: var(--background-primary) !important;
}