diff --git a/package.json b/package.json index eed348b..fcafd08 100644 --- a/package.json +++ b/package.json @@ -1,62 +1,65 @@ -{ - "name": "nebula", - "private": true, - "type": "module", - "scripts": { - "dev": "concurrently \"vite\" \"bare-server-node --port 8080\"", - "build": "vite build", - "bstart": "npm run build && tsx server.ts", - "start": "tsx server.ts", - "preview": "vite preview", - "format": "prettier --write ." - }, - "dependencies": { - "@fastify/compress": "^6.5.0", - "@fastify/cookie": "^9.3.1", - "@fastify/static": "^6.12.0", - "@mercuryworkshop/bare-mux": "^1.0.4", - "@mercuryworkshop/epoxy-transport": "^1.0.2", - "@nebula-services/bare-server-node": "2.0.1-patch.1", - "@nebula-services/dynamic": "0.7.2-patch.2", - "@titaniumnetwork-dev/ultraviolet": "^3.0.0", - "@types/express": "^4.17.21", - "chalk": "^5.3.0", - "classnames": "^2.5.1", - "compression": "^1.7.4", - "cookie-parser": "^1.4.6", - "crypto-js": "^4.2.0", - "express": "^4.18.3", - "fastify": "^4.26.2", - "framer-motion": "^10.18.0", - "i18next": "^23.10.0", - "i18next-browser-languagedetector": "^7.2.0", - "localforage": "^1.10.0", - "million": "^2.6.4", - "preact": "^10.19.6", - "preact-iso": "^2.4.0", - "preact-render-to-string": "^6.4.0", - "preact-router": "^4.1.2", - "rammerhead": "https://github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz", - "react-helmet": "^6.1.0", - "react-i18next": "^13.5.0", - "react-icons": "^4.12.0", - "react-toastify": "^9.1.3", - "tsx": "^4.7.1", - "wisp-server-node": "^1.0.1", - "ws": "^8.16.0" - }, - "devDependencies": { - "@preact/preset-vite": "^2.8.1", - "autoprefixer": "^10.4.18", - "concurrently": "^8.2.2", - "eslint": "^8.57.0", - "eslint-config-preact": "^1.3.0", - "postcss": "^8.4.35", - "prettier": "^3.2.5", - "prettier-plugin-tailwindcss": "^0.5.11", - "tailwindcss": "^3.4.1", - "typescript": "^5.3.3", - "vite": "^5.1.4", - "vite-plugin-static-copy": "^1.0.1" - } -} +{ + "name": "nebula", + "private": true, + "type": "module", + "scripts": { + "dev": "concurrently \"vite\" \"bare-server-node --port 8080\"", + "build": "vite build", + "bstart": "npm run build && tsx server.ts", + "start": "tsx server.ts", + "preview": "vite preview", + "format": "prettier --write ." + }, + "dependencies": { + "@fastify/compress": "^6.5.0", + "@fastify/cookie": "^9.3.1", + "@fastify/static": "^6.12.0", + "@mercuryworkshop/bare-mux": "^1.0.4", + "@mercuryworkshop/epoxy-transport": "^1.0.2", + "@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", + "compression": "^1.7.4", + "cookie-parser": "^1.4.6", + "crypto-js": "^4.2.0", + "express": "^4.18.3", + "fastify": "^4.26.2", + "framer-motion": "^10.18.0", + "i18next": "^23.10.0", + "i18next-browser-languagedetector": "^7.2.0", + "localforage": "^1.10.0", + "million": "^2.6.4", + "preact": "^10.19.6", + "preact-iso": "^2.4.0", + "preact-render-to-string": "^6.4.0", + "preact-router": "^4.1.2", + "rammerhead": "https://github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz", + "react-helmet": "^6.1.0", + "react-i18next": "^13.5.0", + "react-icons": "^4.12.0", + "react-toastify": "^9.1.3", + "tsx": "^4.7.1", + "wisp-server-node": "^1.0.1", + "ws": "^8.16.0" + }, + "devDependencies": { + "@preact/preset-vite": "^2.8.1", + "autoprefixer": "^10.4.18", + "concurrently": "^8.2.2", + "eslint": "^8.57.0", + "eslint-config-preact": "^1.3.0", + "postcss": "^8.4.35", + "prettier": "^3.2.5", + "prettier-plugin-tailwindcss": "^0.5.11", + "tailwindcss": "^3.4.1", + "typescript": "^5.3.3", + "vite": "^5.1.4", + "vite-plugin-static-copy": "^1.0.1" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b660b1a..0c4e611 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/public/crismas.json b/public/crismas.json new file mode 100644 index 0000000..62202c3 --- /dev/null +++ b/public/crismas.json @@ -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 +} \ No newline at end of file diff --git a/public/particlesjs-config.json b/public/particlesjs-config.json new file mode 100644 index 0000000..bc57868 --- /dev/null +++ b/public/particlesjs-config.json @@ -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 +} \ No newline at end of file diff --git a/src/components/HeaderRoute.tsx b/src/components/HeaderRoute.tsx index 42a06dd..34d91b6 100644 --- a/src/components/HeaderRoute.tsx +++ b/src/components/HeaderRoute.tsx @@ -4,7 +4,7 @@ export function HeaderRoute(props: { children: any }) { return (
-
+
{props.children}
diff --git a/src/index.tsx b/src/index.tsx index 07d40bd..d865f40 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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 ( -
+
{window.location.origin === "https://nebulaproxy.io" && } {/* {window.location.origin === "http://localhost:8080" && } */} @@ -18,9 +44,12 @@ export default function App() { }> -
+
+
+ {init && particlesUrl !== "none" && } +
); diff --git a/src/pages/Settings/Customization.tsx b/src/pages/Settings/Customization.tsx index 635ab67..1f05ed5 100644 --- a/src/pages/Settings/Customization.tsx +++ b/src/pages/Settings/Customization.tsx @@ -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 (
@@ -37,6 +42,15 @@ function Customization({ id, active }) {
+
+
+ Particles +
+
+ Choose a particles wallpaper. +
+ +
); diff --git a/src/style.css b/src/style.css index e501c2e..55dd1ec 100644 --- a/src/style.css +++ b/src/style.css @@ -3,3 +3,7 @@ @tailwind base; @tailwind components; @tailwind utilities; + +body { + background-color: var(--background-primary) !important; +} \ No newline at end of file