@nitronjs/framework 0.2.3 → 0.2.4

package/skeleton/resources/views/Site/Home.tsx

@@ -1,86 +1,463 @@
-type HomeProps = {
-    version?: string;
-};
+"use client";
+
+import "@css/global.css";
+import { useEffect, useRef } from "react";
+
+export const Meta = {
+    title: "Welcome to NitronJS",
+}
+
+export default function Home({ version }: { version: string }) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        const canvas = canvasRef.current;
+        if (!container || !canvas) return;
+
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        let mouseX = canvas.width / 2;
+        let mouseY = canvas.height / 2;
+
+        interface Star {
+            x: number;
+            y: number;
+            size: number;
+            speed: number;
+            opacity: number;
+            baseX: number;
+            baseY: number;
+            twinkleSpeed: number;
+            twinkleOffset: number;
+            driftX: number;
+            driftY: number;
+            velocityX: number;
+            velocityY: number;
+        }
+
+        interface Particle {
+            x: number;
+            y: number;
+            vx: number;
+            vy: number;
+            size: number;
+            life: number;
+            maxLife: number;
+        }
+
+        interface Nebula {
+            x: number;
+            y: number;
+            baseX: number;
+            baseY: number;
+            size: number;
+            speed: number;
+            color: { r: number; g: number; b: number };
+            opacity: number;
+            pulseSpeed: number;
+            pulseOffset: number;
+            driftX: number;
+            driftY: number;
+        }
+
+        const stars: Star[] = [];
+        const particles: Particle[] = [];
+        const nebulas: Nebula[] = [];
+        const starCount = 300;
+        const nebulaCount = 5;
+
+        for (let i = 0; i < starCount; i++) {
+            const x = Math.random() * canvas.width;
+            const y = Math.random() * canvas.height;
+
+            stars.push({
+                x,
+                y,
+                baseX: x,
+                baseY: y,
+                size: Math.random() * 2 + 0.5,
+                speed: Math.random() * 0.5 + 0.1,
+                opacity: Math.random() * 0.8 + 0.2,
+                twinkleSpeed: Math.random() * 0.02 + 0.01,
+                twinkleOffset: Math.random() * Math.PI * 2,
+                driftX: (Math.random() - 0.5) * 0.2,
+                driftY: (Math.random() - 0.5) * 0.2,
+                velocityX: 0,
+                velocityY: 0
+            });
+        }
+
+        // Create nebulas
+        const nebulaColors = [
+            { r: 147, g: 51, b: 234 },  // Purple
+            { r: 59, g: 130, b: 246 },  // Blue
+            { r: 236, g: 72, b: 153 },  // Pink
+            { r: 79, g: 70, b: 229 },   // Indigo
+        ];
+
+        for (let i = 0; i < nebulaCount; i++) {
+            const x = Math.random() * canvas.width;
+            const y = Math.random() * canvas.height;
+            const colorIndex = Math.floor(Math.random() * nebulaColors.length);
+
+            nebulas.push({
+                x,
+                y,
+                baseX: x,
+                baseY: y,
+                size: Math.random() * 250 + 200,
+                speed: Math.random() * 0.3 + 0.1,
+                color: nebulaColors[colorIndex],
+                opacity: Math.random() * 0.25 + 0.15,
+                pulseSpeed: Math.random() * 0.01 + 0.005,
+                pulseOffset: Math.random() * Math.PI * 2,
+                driftX: (Math.random() - 0.5) * 0.3,
+                driftY: (Math.random() - 0.5) * 0.3
+            });
+        }
+
+        const handleMouseMove = (e: MouseEvent) => {
+            const rect = container.getBoundingClientRect();
+            mouseX = e.clientX - rect.left;
+            mouseY = e.clientY - rect.top;
+        };
+
+        const handleClick = (e: MouseEvent) => {
+            const rect = container.getBoundingClientRect();
+            const clickX = e.clientX - rect.left;
+            const clickY = e.clientY - rect.top;
+
+            for (let i = 0; i < 30; i++) {
+                const angle = (Math.PI * 2 * i) / 30;
+                const speed = Math.random() * 3 + 2;
+
+                particles.push({
+                    x: clickX,
+                    y: clickY,
+                    vx: Math.cos(angle) * speed,
+                    vy: Math.sin(angle) * speed,
+                    size: Math.random() * 2 + 1,
+                    life: 1,
+                    maxLife: Math.random() * 0.5 + 0.5
+                });
+            }
+
+            stars.forEach(star => {
+                const dx = star.baseX - clickX;
+                const dy = star.baseY - clickY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+
+                if (distance < 200) {
+                    const angle = Math.atan2(dy, dx);
+                    const force = (200 - distance) / 200;
+                    star.velocityX += Math.cos(angle) * force * 8;
+                    star.velocityY += Math.sin(angle) * force * 8;
+                }
+            });
+        };
+
+        const handleResize = () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+
+            stars.forEach(star => {
+                if (star.baseX > canvas.width) star.baseX = canvas.width - 50;
+                if (star.baseY > canvas.height) star.baseY = canvas.height - 50;
+                star.x = star.baseX;
+                star.y = star.baseY;
+            });
+
+            nebulas.forEach(nebula => {
+                if (nebula.baseX > canvas.width) nebula.baseX = canvas.width / 2;
+                if (nebula.baseY > canvas.height) nebula.baseY = canvas.height / 2;
+                nebula.x = nebula.baseX;
+                nebula.y = nebula.baseY;
+            });
+        };
+
+        const drawStar = (x: number, y: number, size: number, rotation: number) => {
+            const spikes = 5;
+            const outerRadius = size;
+            const innerRadius = size * 0.4;
+
+            ctx.save();
+            ctx.translate(x, y);
+            ctx.rotate(rotation);
+            ctx.beginPath();
+
+            for (let i = 0; i < spikes * 2; i++) {
+                const radius = i % 2 === 0 ? outerRadius : innerRadius;
+                const angle = (Math.PI * i) / spikes;
+                const px = Math.cos(angle) * radius;
+                const py = Math.sin(angle) * radius;
+
+                if (i === 0) {
+                    ctx.moveTo(px, py);
+                }
+                else {
+                    ctx.lineTo(px, py);
+                }
+            }
+
+            ctx.closePath();
+            ctx.fill();
+            ctx.restore();
+        };
+
+        const animate = () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "rgb(10, 10, 10)";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            const time = Date.now() * 0.001;
+
+            // Reset all context properties at start of frame
+            ctx.shadowBlur = 0;
+            ctx.shadowColor = "transparent";
+            ctx.filter = "none";
+            ctx.globalCompositeOperation = "source-over";
+
+            // Draw nebulas first (background layer)
+            nebulas.forEach(nebula => {
+                const pulse = Math.sin(time * nebula.pulseSpeed + nebula.pulseOffset) * 0.3 + 0.7;
+                const currentSize = nebula.size * pulse;
+                const currentOpacity = nebula.opacity * pulse;
+
+                // Drift movement with boundary bounce
+                nebula.baseX += nebula.driftX;
+                nebula.baseY += nebula.driftY;
+
+                // Bounce off boundaries (with some padding for the nebula size)
+                const padding = 50;
+                if (nebula.baseX < padding) {
+                    nebula.baseX = padding;
+                    nebula.driftX *= -1;
+                }
+                if (nebula.baseX > canvas.width - padding) {
+                    nebula.baseX = canvas.width - padding;
+                    nebula.driftX *= -1;
+                }
+                if (nebula.baseY < padding) {
+                    nebula.baseY = padding;
+                    nebula.driftY *= -1;
+                }
+                if (nebula.baseY > canvas.height - padding) {
+                    nebula.baseY = canvas.height - padding;
+                    nebula.driftY *= -1;
+                }
+
+                nebula.x = nebula.baseX;
+                nebula.y = nebula.baseY;
+
+                const { r, g, b } = nebula.color;
+                
+                ctx.globalCompositeOperation = "screen";
+
+                // Layer 1: Outer glow (largest, most diffuse)
+                const outerGradient = ctx.createRadialGradient(
+                    nebula.x, nebula.y, 0,
+                    nebula.x, nebula.y, currentSize * 1.2
+                );
+                outerGradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${currentOpacity * 0.05})`);
+                outerGradient.addColorStop(0.4, `rgba(${r}, ${g}, ${b}, ${currentOpacity * 0.03})`);
+                outerGradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+                
+                ctx.fillStyle = outerGradient;
+                ctx.filter = `blur(${45 + pulse * 20}px)`;
+                ctx.beginPath();
+                ctx.arc(nebula.x, nebula.y, currentSize * 1.2, 0, Math.PI * 2);
+                ctx.fill();
+
+                // Layer 2: Middle layer (medium blur)
+                const middleGradient = ctx.createRadialGradient(
+                    nebula.x, nebula.y, 0,
+                    nebula.x, nebula.y, currentSize * 0.7
+                );
+                middleGradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${currentOpacity * 0.25})`);
+                middleGradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, ${currentOpacity * 0.15})`);
+                middleGradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+                
+                ctx.fillStyle = middleGradient;
+                ctx.filter = `blur(${25 + pulse * 10}px)`;
+                ctx.beginPath();
+                ctx.arc(nebula.x, nebula.y, currentSize * 0.7, 0, Math.PI * 2);
+                ctx.fill();
+
+                // Layer 3: Inner core (brightest, sharpest)
+                const coreGradient = ctx.createRadialGradient(
+                    nebula.x, nebula.y, 0,
+                    nebula.x, nebula.y, currentSize * 0.3
+                );
+                coreGradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${currentOpacity * 0.6})`);
+                coreGradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, ${currentOpacity * 0.3})`);
+                coreGradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+                
+                ctx.fillStyle = coreGradient;
+                ctx.filter = `blur(${8 + pulse * 5}px)`;
+                ctx.beginPath();
+                ctx.arc(nebula.x, nebula.y, currentSize * 0.3, 0, Math.PI * 2);
+                ctx.fill();
+
+                // Layer 4: Bright center point
+                const centerGradient = ctx.createRadialGradient(
+                    nebula.x, nebula.y, 0,
+                    nebula.x, nebula.y, currentSize * 0.1
+                );
+                centerGradient.addColorStop(0, `rgba(${Math.min(255, r + 80)}, ${Math.min(255, g + 80)}, ${Math.min(255, b + 80)}, ${currentOpacity * 0.8})`);
+                centerGradient.addColorStop(0.7, `rgba(${r}, ${g}, ${b}, ${currentOpacity * 0.4})`);
+                centerGradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+                
+                ctx.fillStyle = centerGradient;
+                ctx.filter = `blur(3px)`;
+                ctx.beginPath();
+                ctx.arc(nebula.x, nebula.y, currentSize * 0.1, 0, Math.PI * 2);
+                ctx.fill();
+
+                // Reset context state after nebula
+                ctx.filter = "none";
+                ctx.globalCompositeOperation = "source-over";
+            });
+
+            // Draw stars
+            stars.forEach((star) => {
+                star.baseX += star.driftX + star.velocityX;
+                star.baseY += star.driftY + star.velocityY;
+
+                star.velocityX *= 0.95;
+                star.velocityY *= 0.95;
+
+                if (star.baseX < 20) {
+                    star.baseX = 20;
+                    star.driftX *= -1;
+                    star.velocityX *= -0.5;
+                }
+                if (star.baseX > canvas.width - 20) {
+                    star.baseX = canvas.width - 20;
+                    star.driftX *= -1;
+                    star.velocityX *= -0.5;
+                }
+                if (star.baseY < 20) {
+                    star.baseY = 20;
+                    star.driftY *= -1;
+                    star.velocityY *= -0.5;
+                }
+                if (star.baseY > canvas.height - 20) {
+                    star.baseY = canvas.height - 20;
+                    star.driftY *= -1;
+                    star.velocityY *= -0.5;
+                }
+
+                const dx = mouseX - star.baseX;
+                const dy = mouseY - star.baseY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                const maxDistance = 300;
+
+                const twinkle = Math.sin(time * star.twinkleSpeed + star.twinkleOffset) * 0.3 + 0.7;
+
+                if (distance < maxDistance) {
+                    const force = (maxDistance - distance) / maxDistance;
+                    star.x = star.baseX + dx * force * star.speed * 0.3;
+                    star.y = star.baseY + dy * force * star.speed * 0.3;
+
+                    const brightness = Math.min(1, star.opacity * twinkle + force * 0.5);
+                    ctx.fillStyle = `rgba(147, 197, 253, ${brightness})`;
+                    ctx.shadowBlur = 4 + force * 8;
+                    ctx.shadowColor = "rgba(147, 197, 253, 0.8)";
+                }
+                else {
+                    star.x += (star.baseX - star.x) * 0.1;
+                    star.y += (star.baseY - star.y) * 0.1;
+
+                    ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity * twinkle})`;
+                    ctx.shadowBlur = 0;
+                }
+
+                const rotation = time * star.twinkleSpeed * 2;
+                drawStar(star.x, star.y, star.size + 1, rotation);
+            });
+
+            // Draw particles
+            for (let i = particles.length - 1; i >= 0; i--) {
+                const particle = particles[i];
+                
+                particle.x += particle.vx;
+                particle.y += particle.vy;
+                particle.vx *= 0.98;
+                particle.vy *= 0.98;
+                particle.life -= 0.02;
+
+                if (particle.life <= 0) {
+                    particles.splice(i, 1);
+                    continue;
+                }
+
+                const alpha = particle.life;
+                const gradient = ctx.createRadialGradient(
+                    particle.x, particle.y, 0,
+                    particle.x, particle.y, particle.size * 2
+                );
+                gradient.addColorStop(0, `rgba(147, 197, 253, ${alpha})`);
+                gradient.addColorStop(0.5, `rgba(96, 165, 250, ${alpha * 0.5})`);
+                gradient.addColorStop(1, `rgba(59, 130, 246, 0)`);
+
+                ctx.fillStyle = gradient;
+                ctx.shadowBlur = 8;
+                ctx.shadowColor = `rgba(147, 197, 253, ${alpha})`;
+
+                ctx.beginPath();
+                ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+                ctx.fill();
+
+                ctx.shadowBlur = 0;
+            }
+
+            requestAnimationFrame(animate);
+        };
+
+        container.addEventListener("mousemove", handleMouseMove);
+        container.addEventListener("click", handleClick);
+        window.addEventListener("resize", handleResize);
+        const animationId = requestAnimationFrame(animate);
+
+        return () => {
+            container.removeEventListener("mousemove", handleMouseMove);
+            container.removeEventListener("click", handleClick);
+            window.removeEventListener("resize", handleResize);
+            cancelAnimationFrame(animationId);
+        };
+    }, []);
 
-export default function Home({ version = "0.2.0" }: HomeProps) {
     return (
-        <main style={{
-            minHeight: "100vh",
-            background: "#0a0a0a",
-            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-            color: "#e4e4e7",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "2rem",
-            boxSizing: "border-box"
-        }}>
-            <div style={{
-                width: 64,
-                height: 64,
-                background: "#fff",
-                borderRadius: 14,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                marginBottom: "2rem"
-            }}>
-                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" strokeWidth="2.5">
-                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
-                </svg>
-            </div>
+        <main ref={containerRef} className="relative w-full h-screen overflow-hidden flex flex-col items-center justify-center gap-8">
+            <canvas 
+                ref={canvasRef}
+                className="absolute inset-0 bg-neutral-950"
+            />
 
-            <h1 style={{
-                fontSize: "2.5rem",
-                fontWeight: 700,
-                margin: 0,
-                color: "#fff",
-                letterSpacing: "-0.02em"
-            }}>
-                Welcome to NitronJS
-            </h1>
-
-            <p style={{
-                fontSize: "1.1rem",
-                color: "#71717a",
-                maxWidth: 400,
-                margin: "1.5rem 0 2rem",
-                lineHeight: 1.6,
-                textAlign: "center"
-            }}>
-                Your application is ready. Start building by editing the files in <code style={{ color: "#a1a1aa", background: "#1a1a1a", padding: "2px 6px", borderRadius: 4 }}>resources/views</code>
-            </p>
-
-            <a
-                href="https://nitronjs.dev/docs"
-                style={{
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: "0.5rem",
-                    padding: "0.75rem 1.5rem",
-                    background: "#fff",
-                    color: "#0a0a0a",
-                    textDecoration: "none",
-                    fontWeight: 600,
-                    fontSize: "0.9rem",
-                    borderRadius: 8
-                }}
-            >
-                Documentation
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                    <path d="M5 12h14M12 5l7 7-7 7"/>
-                </svg>
-            </a>
-
-            <div style={{
-                position: "fixed",
-                bottom: "1.5rem",
-                color: "#3f3f46",
-                fontSize: "0.8rem"
-            }}>
-                v{version}
+            <div className="z-10 flex flex-col items-center justify-center gap-8 px-4">
+                <h1 className="text-center text-white text-6xl font-bold drop-shadow-2xl">
+                    Welcome to <span className="bg-linear-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">NitronJS!</span>
+                </h1>
+                <p className="text-center text-zinc-400 text-xl drop-shadow-lg">
+                    This is the home page of your NitronJS application.
+                </p>
+                <a 
+                    className="py-4 px-6 bg-white rounded-lg text-center text-neutral-900 font-semibold hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/20 transition-all duration-300" 
+                    href="https://nitronjs.dev/docs" 
+                    target="_blank"
+                >
+                    Read the Documentation
+                </a>
+                <p className="absolute bottom-10 left-1/2 -translate-x-1/2 text-center text-zinc-500 text-sm"><b>Version:</b> {version}</p>
             </div>
+
+            <div className="absolute bottom-0 left-0 right-0 h-px bg-linear-to-r from-transparent via-blue-500/50 to-transparent" />
         </main>
     );
 }

package/skeleton/tsconfig.json

@@ -13,7 +13,12 @@
         "noEmit": true,
         "baseUrl": ".",
         "paths": {
-            "@/*": ["./*"]
+            "@/*": ["./*"],
+            "@css/*": ["./resources/css/*"],
+            "@views/*": ["./resources/views/*"],
+            "@models/*": ["./app/Models/*"],
+            "@controllers/*": ["./app/Controllers/*"],
+            "@middlewares/*": ["./app/Middlewares/*"],
         }
     },
     "include": [

package/lib/Auth/Manager.js

@@ -1,111 +0,0 @@
-import Hash from "../Hashing/Manager.js";
-import Config from "../Core/Config.js";
-
-class Auth {
-    static setup(server) {
-        server.decorateRequest('auth', null);
-
-        server.addHook('onRequest', async (req, res) => {
-            req.auth = {
-                guard: (guardName = null) => ({
-                    attempt: (credentials) => Auth.attempt(req, credentials, guardName),
-                    logout: () => Auth.logout(req, guardName),
-                    user: () => Auth.user(req, guardName),
-                    check: () => Auth.check(req, guardName),
-                    home: () => Auth.home(res, guardName),
-                    redirect: () => Auth.redirect(res, guardName)
-                }),
-                attempt: (credentials) => Auth.attempt(req, credentials, null),
-                logout: () => Auth.logout(req, null),
-                user: () => Auth.user(req, null),
-                check: () => Auth.check(req, null),
-                home: () => Auth.home(res, null),
-                redirect: () => Auth.redirect(res, null)
-            };
-        });
-    }
-
-    static #getAuthConfig() {
-        return Config.all("auth");
-    }
-
-    static async attempt(req, credentials, guardName = null) {
-        const authConfig = this.#getAuthConfig();
-        const guard = guardName || authConfig.defaults.guard;
-        const config = authConfig.guards[guard];
-
-        if (!config) throw new Error(`Guard '${guard}' not configured`);
-
-        const { provider, identifier } = config;
-
-        const user = await provider
-            .where(identifier, '=', credentials[identifier])
-            .first();
-
-        if (!user) return false;
-
-        const isValid = await Hash.check(credentials.password, user.password);
-        if (!isValid) return false;
-
-        req.session.regenerate();
-        req.session.set(`auth_${guard}`, user.id);
-
-        return true;
-    }
-
-    static logout(req, guardName = null) {
-        const authConfig = this.#getAuthConfig();
-        const guard = guardName || authConfig.defaults.guard;
-        
-        req.session.set(`auth_${guard}`, null);
-    }
-
-    static async user(req, guardName = null) {
-        const authConfig = this.#getAuthConfig();
-        const guard = guardName || authConfig.defaults.guard;
-        const userId = req.session.get(`auth_${guard}`) || null;
-
-        if (!userId) return null;
-
-        const config = authConfig.guards[guard];
-
-        if (!config) return null;
-
-        return await config.provider.find(userId);
-    }
-
-    static check(req, guardName = null) {
-        const authConfig = this.#getAuthConfig();
-        const guard = guardName || authConfig.defaults.guard;
-
-        return req.session.get(`auth_${guard}`) !== null && req.session.get(`auth_${guard}`) !== undefined;
-    }
-
-    static home(res, guardName = null) {
-        const authConfig = this.#getAuthConfig();
-        const guard = guardName || authConfig.defaults.guard;
-        const config = authConfig.guards[guard];
-
-        return res.redirect(this.#resolveUrl(config?.home));
-    }
-
-    static redirect(res, guardName = null) {
-        const authConfig = this.#getAuthConfig();
-        const guard = guardName || authConfig.defaults.guard;
-        const config = authConfig.guards[guard];
-
-        return res.redirect(this.#resolveUrl(config?.redirect));
-    }
-
-    static #resolveUrl(path) {
-        if (!path) return '/';
-
-        if (path.startsWith('/') || path.startsWith('http://') || path.startsWith('https://')) {
-            return path;
-        }
-        
-        return route(path);
-    }
-}
-
-export default Auth;