From 54a56d49a2c607dde8f28e349410c5ad450e4cc5 Mon Sep 17 00:00:00 2001 From: ARYPROGRAMMER Date: Mon, 23 Dec 2024 03:47:29 +0530 Subject: [PATCH 1/2] UI: FULL LAYOUT CHANGE - BREAKING 2 Signed-off-by: ARYPROGRAMMER --- next.config.ts | 10 +- src/app/default/page.tsx | 424 ++++++++++++++++++ .../_components/EditorPanel.tsx | 0 .../_components/EditorPanelLoading.tsx | 0 .../{(home) => home}/_components/Header.tsx | 2 +- .../_components/HeaderProfileBtn.tsx | 0 .../_components/LanguageSelector.tsx | 0 .../_components/OutputPanel.tsx | 0 .../_components/QuestionPanel.tsx | 0 .../_components/RunButton.tsx | 0 .../_components/RunningCodeLoading.tsx | 0 .../_components/ShareSnippetDialog.tsx | 0 .../_components/ThemeSelector.tsx | 0 src/app/{(home) => home}/_constants/index.ts | 0 src/app/{(home) => home}/page.tsx | 0 src/app/not-found.tsx | 83 ++++ src/app/snippets/[id]/page.tsx | 51 ++- src/components/ui/NavigationHeader.tsx | 2 +- src/store/useCodeEditorStore.tsx | 6 +- 19 files changed, 549 insertions(+), 29 deletions(-) create mode 100644 src/app/default/page.tsx rename src/app/{(home) => home}/_components/EditorPanel.tsx (100%) rename src/app/{(home) => home}/_components/EditorPanelLoading.tsx (100%) rename src/app/{(home) => home}/_components/Header.tsx (99%) rename src/app/{(home) => home}/_components/HeaderProfileBtn.tsx (100%) rename src/app/{(home) => home}/_components/LanguageSelector.tsx (100%) rename src/app/{(home) => home}/_components/OutputPanel.tsx (100%) rename src/app/{(home) => home}/_components/QuestionPanel.tsx (100%) rename src/app/{(home) => home}/_components/RunButton.tsx (100%) rename src/app/{(home) => home}/_components/RunningCodeLoading.tsx (100%) rename src/app/{(home) => home}/_components/ShareSnippetDialog.tsx (100%) rename src/app/{(home) => home}/_components/ThemeSelector.tsx (100%) rename src/app/{(home) => home}/_constants/index.ts (100%) rename src/app/{(home) => home}/page.tsx (100%) create mode 100644 src/app/not-found.tsx diff --git a/next.config.ts b/next.config.ts index e9ffa30..5d9df0b 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,7 +1,15 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - /* config options here */ + async redirects() { + return [ + { + source: '/', + destination: '/default', + permanent: true, // Set to false if you want it to be a temporary redirect + }, + ]; + }, }; export default nextConfig; diff --git a/src/app/default/page.tsx b/src/app/default/page.tsx new file mode 100644 index 0000000..f160637 --- /dev/null +++ b/src/app/default/page.tsx @@ -0,0 +1,424 @@ +"use client"; +import React, { useEffect, useRef, useState } from "react"; +import Link from "next/link"; +import { + Code2, + Trophy, + Users, + ArrowRight, + Terminal, + Globe, + GitBranch, + Star, +} from "lucide-react"; +import Header from "../home/_components/Header"; + +const HomePage = () => { + const canvasRef = useRef(null); + const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + const ctx = canvas.getContext("2d"); + if (!ctx) return; + let animationFrameId: number; + + const setCanvasSize = () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight * 2; + }; + + setCanvasSize(); + window.addEventListener("resize", setCanvasSize); + + + let lines = []; + for (let i = 0; i < 15; i++) { + + lines.push({ + x: Math.random() * canvas.width, + y: Math.random() * canvas.height, + length: Math.random() * 250 + 150, + angle: Math.random() * Math.PI * 2, + speed: Math.random() * 0.03 + 0.01, + originalSpeed: Math.random() * 0.03 + 0.01, + thickness: Math.random() * 1.5 + 0.5, + }); + } + + const animate = () => { + + ctx.fillStyle = "rgba(5, 5, 12, 0.4)"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + lines.forEach((line) => { + const dx = mousePos.x - line.x; + const dy = mousePos.y - window.scrollY - line.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + + if (distance < 350) { + + line.speed = line.originalSpeed * 1.5; + const intensity = 1 - distance / 350; + + ctx.strokeStyle = `rgba(255, 255, 255, ${intensity * 1.0})`; + ctx.lineWidth = line.thickness + intensity * 2; + + + ctx.shadowBlur = 20; + ctx.shadowColor = "rgba(255, 255, 255, 0.8)"; + } else { + line.speed = line.originalSpeed; + + ctx.strokeStyle = "rgba(255, 255, 255, 0.02)"; + ctx.lineWidth = line.thickness; + ctx.shadowBlur = 0; + } + + ctx.beginPath(); + ctx.moveTo(line.x, line.y); + ctx.lineTo( + line.x + Math.cos(line.angle) * line.length, + line.y + Math.sin(line.angle) * line.length + ); + ctx.stroke(); + + + ctx.shadowBlur = 0; + + + line.x += Math.cos(line.angle) * line.speed; + line.y += Math.sin(line.angle) * line.speed; + + + if (line.x < -line.length) line.x = canvas.width + line.length; + if (line.x > canvas.width + line.length) line.x = -line.length; + if (line.y < -line.length) line.y = canvas.height + line.length; + if (line.y > canvas.height + line.length) line.y = -line.length; + }); + + animationFrameId = requestAnimationFrame(animate); + }; + + animate(); + + const handleMouseMove = (e: { clientX: any; clientY: any }) => { + setMousePos({ x: e.clientX, y: e.clientY }); + }; + + window.addEventListener("mousemove", handleMouseMove); + + return () => { + window.removeEventListener("resize", setCanvasSize); + window.removeEventListener("mousemove", handleMouseMove); + cancelAnimationFrame(animationFrameId); + }; + }, [mousePos]); + + return ( +
+ {" "} + {/* Darker background */} + + {/* Navigation */} +
+ {/* Hero Section */} +
+
+

+ + I Built CodeX + + Because I Can't Code +

+

+ Join a global community of competitive programmers. Practice, + compete, and elevate your coding skills to new heights. +

+
+ + Start Your Journey + + + + Explore Contests + +
+
+ + {/* Floating Elements */} +
+
+
+ {/* Features Section */} +
+
+

+ Everything you need to excel in competitive programming +

+
+ {[ + { + icon: , + title: "Real-time Code Execution", + description: + "Write and test your code in 50+ programming languages with instant feedback.", + }, + { + icon: , + title: "Live Competitions", + description: + "Participate in contests and climb the global rankings.", + }, + { + icon: , + title: "Active Community", + description: + "Learn from peers and share your knowledge with others.", + }, + ].map((feature, index) => ( +
+
+ {feature.icon} +
+

+ {feature.title} +

+

{feature.description}

+
+ ))} +
+
+
+ +
+
+
+ {[ + { value: "100,000+", label: "Active Users" }, + { value: "1M+", label: "Problems Solved" }, + { value: "10K+", label: "Daily Active Coders" }, + ].map((stat, index) => ( +
+
+ {stat.value} +
+
{stat.label}
+
+ ))} +
+
+
+ {/* CTA Section */} +
+
+

+ Ready to start your coding journey? +

+

+ Join thousands of developers who are already improving their skills + on CodeX. +

+ + Get Started for Free + +
+
+ {/* New Showcase Section */} +
+
+
+
+
+
+ 
+                  {`#include 
+using namespace std;
+
+void solve() {
+    
+    int n;
+    cin >> n;
+    vector a(n);
+    
+}`}
+
+
+
+
+

+ Advanced Code Editor +

+
    + {[ + "Syntax highlighting for 50+ languages", + "Real-time compilation and testing", + "Interactive debugging tools", + "Custom test cases", + ].map((feature, index) => ( +
  • + + {feature} +
    • + ))} +
+
+
+
+
+ {/* New Practice Section */} +
+
+

+ Level Up Your Skills +

+
+ {[ + { + title: "Daily Challenges", + description: "New problems every day to keep your skills sharp", + icon: , + stats: "x+ problems", + }, + { + title: "Contests", + description: "Weekly competitions with global rankings", + icon: , + stats: "Weekly prizes", + }, + { + title: "Learning Paths", + description: "Structured courses for systematic learning", + icon: , + stats: "y+ paths", + }, + ].map((item, index) => ( +
+
+
+
{item.icon}
+

+ {item.title} +

+

{item.description}

+
{item.stats}
+
+
+ ))} +
+
+
+ +
+
+
+

+ Join Our Global Community +

+
+ {[ + { value: "z+", label: "Active Users" }, + { value: "zz+", label: "Submissions" }, + { value: "zzz+", label: "Discussions" }, + { value: "zzzz+", label: "Daily Contests" }, + ].map((stat, index) => ( +
+
+
+
+ {stat.value} +
+
{stat.label}
+
+
+ ))} +
+
+
+ {/* Enhanced Footer */} +
+
+
+
+ + + CodeX + +

+ Empowering the next generation of programmers through + competitive coding. +

+
+ {["github", "twitter", "discord"].map((social) => ( + + {social} + + + ))} +
+
+ {[ + { + title: "Product", + links: ["Features", "Contests", "Enterprise", "Pricing"], + }, + { + title: "Resources", + links: ["Documentation", "API", "Community", "Blog"], + }, + { + title: "Company", + links: ["About", "Careers", "Contact", "Legal"], + }, + ].map((section, index) => ( +
+

+ {section.title} +

+
    + {section.links.map((link, linkIndex) => ( +
  • + + {link} + +
    • + ))} +
+
+ ))} +
+
+
+
+ ); +}; + +export default HomePage; diff --git a/src/app/(home)/_components/EditorPanel.tsx b/src/app/home/_components/EditorPanel.tsx similarity index 100% rename from src/app/(home)/_components/EditorPanel.tsx rename to src/app/home/_components/EditorPanel.tsx diff --git a/src/app/(home)/_components/EditorPanelLoading.tsx b/src/app/home/_components/EditorPanelLoading.tsx similarity index 100% rename from src/app/(home)/_components/EditorPanelLoading.tsx rename to src/app/home/_components/EditorPanelLoading.tsx diff --git a/src/app/(home)/_components/Header.tsx b/src/app/home/_components/Header.tsx similarity index 99% rename from src/app/(home)/_components/Header.tsx rename to src/app/home/_components/Header.tsx index ecfbb4b..e7de9e9 100644 --- a/src/app/(home)/_components/Header.tsx +++ b/src/app/home/_components/Header.tsx @@ -14,7 +14,7 @@ import HeaderProfileBtn from "./HeaderProfileBtn" import { Button } from "@/components/ui/button" const navItems = [ - { id: 'challenges', href: "/challenges", icon: Code2, text: "Challenges" }, + { id: 'editor', href: "/home", icon: Code2, text: "Code Editor" }, { id: 'snippets', href: "/snippets", icon: FileCode2, text: "Snippets" }, { id: 'leaderboard', href: "/leaderboard", icon: Trophy, text: "Leaderboard" }, { id: 'theme', component: ThemeSelector }, diff --git a/src/app/(home)/_components/HeaderProfileBtn.tsx b/src/app/home/_components/HeaderProfileBtn.tsx similarity index 100% rename from src/app/(home)/_components/HeaderProfileBtn.tsx rename to src/app/home/_components/HeaderProfileBtn.tsx diff --git a/src/app/(home)/_components/LanguageSelector.tsx b/src/app/home/_components/LanguageSelector.tsx similarity index 100% rename from src/app/(home)/_components/LanguageSelector.tsx rename to src/app/home/_components/LanguageSelector.tsx diff --git a/src/app/(home)/_components/OutputPanel.tsx b/src/app/home/_components/OutputPanel.tsx similarity index 100% rename from src/app/(home)/_components/OutputPanel.tsx rename to src/app/home/_components/OutputPanel.tsx diff --git a/src/app/(home)/_components/QuestionPanel.tsx b/src/app/home/_components/QuestionPanel.tsx similarity index 100% rename from src/app/(home)/_components/QuestionPanel.tsx rename to src/app/home/_components/QuestionPanel.tsx diff --git a/src/app/(home)/_components/RunButton.tsx b/src/app/home/_components/RunButton.tsx similarity index 100% rename from src/app/(home)/_components/RunButton.tsx rename to src/app/home/_components/RunButton.tsx diff --git a/src/app/(home)/_components/RunningCodeLoading.tsx b/src/app/home/_components/RunningCodeLoading.tsx similarity index 100% rename from src/app/(home)/_components/RunningCodeLoading.tsx rename to src/app/home/_components/RunningCodeLoading.tsx diff --git a/src/app/(home)/_components/ShareSnippetDialog.tsx b/src/app/home/_components/ShareSnippetDialog.tsx similarity index 100% rename from src/app/(home)/_components/ShareSnippetDialog.tsx rename to src/app/home/_components/ShareSnippetDialog.tsx diff --git a/src/app/(home)/_components/ThemeSelector.tsx b/src/app/home/_components/ThemeSelector.tsx similarity index 100% rename from src/app/(home)/_components/ThemeSelector.tsx rename to src/app/home/_components/ThemeSelector.tsx diff --git a/src/app/(home)/_constants/index.ts b/src/app/home/_constants/index.ts similarity index 100% rename from src/app/(home)/_constants/index.ts rename to src/app/home/_constants/index.ts diff --git a/src/app/(home)/page.tsx b/src/app/home/page.tsx similarity index 100% rename from src/app/(home)/page.tsx rename to src/app/home/page.tsx diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..2a69a54 --- /dev/null +++ b/src/app/not-found.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import Link from 'next/link'; +import { Terminal, Code2, ArrowLeft, Server } from 'lucide-react'; + +const NotFound = () => { + return ( +
+ {/* Floating Code Particles */} +
+ {[...Array(20)].map((_, i) => ( +
+ {'{'} +
+ ))} +
+ +
+ {/* Main Content */} +
+ {/* Animated Terminal Icon */} +
+ + +
+ + {/* Error Message */} +

+ 404 +

+

+ Under Maintenance +

+ + {/* Description */} +
+

+ We're currently optimizing this section of CodeX to bring you an even better coding experience. +

+
+ + System Upgrade in Progress +
+
+ + {/* Back to Home Button */} + + + Return to Dashboard + + + {/* Status Indicator */} +
+
+ Systems Operating Normally +
+
+
+ + {/* Background Grid */} +
+
+ ); +}; + +export default NotFound; \ No newline at end of file diff --git a/src/app/snippets/[id]/page.tsx b/src/app/snippets/[id]/page.tsx index 36eff06..99f7830 100644 --- a/src/app/snippets/[id]/page.tsx +++ b/src/app/snippets/[id]/page.tsx @@ -1,31 +1,34 @@ "use client"; -import { useQuery } from 'convex/react'; -import { useParams } from 'next/navigation'; -import React from 'react' -import { api } from '../../../../convex/_generated/api'; -import { Id } from '../../../../convex/_generated/dataModel'; -import SnippetDetailPageSkeleton from './_components/SnippetDetailPageSkeleton'; -import NavigationHeader from '@/components/ui/NavigationHeader'; -import { Clock, Code, MessageSquare, User } from 'lucide-react'; -import { Editor } from '@monaco-editor/react'; -import { defineMonacoThemes, LANGUAGE_CONFIG } from '@/app/(home)/_constants'; -import CopyButton from './_components/CopyButton'; -import Comments from './_components/Comments'; +import { useQuery } from "convex/react"; +import { useParams } from "next/navigation"; +import React from "react"; +import { api } from "../../../../convex/_generated/api"; +import { Id } from "../../../../convex/_generated/dataModel"; +import SnippetDetailPageSkeleton from "./_components/SnippetDetailPageSkeleton"; +import NavigationHeader from "@/components/ui/NavigationHeader"; +import { Clock, Code, MessageSquare, User } from "lucide-react"; +import { Editor } from "@monaco-editor/react"; +import { defineMonacoThemes, LANGUAGE_CONFIG } from "@/app/home/_constants"; +import CopyButton from "./_components/CopyButton"; +import Comments from "./_components/Comments"; function SnippetDetailPage() { const snippetId = useParams().id; - const snippet = useQuery(api.snippets.getSnippetById, { snippetId : snippetId as Id<"snippets"> }); - const comments = useQuery(api.snippets.getComments, { snippetId : snippetId as Id<"snippets"> }); - - if (snippet === undefined) { - return ; - } + const snippet = useQuery(api.snippets.getSnippetById, { + snippetId: snippetId as Id<"snippets">, + }); + const comments = useQuery(api.snippets.getComments, { + snippetId: snippetId as Id<"snippets">, + }); + if (snippet === undefined) { + return ; + } - return ( -
+ return ( +
@@ -52,7 +55,9 @@ function SnippetDetailPage() {
- {new Date(snippet._creationTime).toLocaleDateString()} + + {new Date(snippet._creationTime).toLocaleDateString()} +
@@ -100,7 +105,7 @@ function SnippetDetailPage() {
- ) + ); } -export default SnippetDetailPage \ No newline at end of file +export default SnippetDetailPage; diff --git a/src/components/ui/NavigationHeader.tsx b/src/components/ui/NavigationHeader.tsx index 9200356..1a702ce 100644 --- a/src/components/ui/NavigationHeader.tsx +++ b/src/components/ui/NavigationHeader.tsx @@ -1,4 +1,4 @@ -import HeaderProfileBtn from "@/app/(home)/_components/HeaderProfileBtn"; +import HeaderProfileBtn from "@/app/home/_components/HeaderProfileBtn"; import { SignedOut } from "@clerk/nextjs"; import { Code2, Sparkles } from "lucide-react"; import Image from "next/image"; diff --git a/src/store/useCodeEditorStore.tsx b/src/store/useCodeEditorStore.tsx index 4d4043a..46cab40 100644 --- a/src/store/useCodeEditorStore.tsx +++ b/src/store/useCodeEditorStore.tsx @@ -1,5 +1,5 @@ import { create } from "zustand"; -import { LANGUAGE_CONFIG } from "@/app/(home)/_constants"; +import { LANGUAGE_CONFIG } from "@/app/home/_constants"; import { Monaco } from "@monaco-editor/react"; import { CodeEditorState } from "@/types"; @@ -148,5 +148,5 @@ export const useCodeEditorState = create((set, get) => { }; }); - -export const getExecutionResult = () => useCodeEditorState.getState().executionResult; +export const getExecutionResult = () => + useCodeEditorState.getState().executionResult; From f72059d7547908ed268808dcdea73c51abd3107d Mon Sep 17 00:00:00 2001 From: ARYPROGRAMMER Date: Mon, 23 Dec 2024 03:54:48 +0530 Subject: [PATCH 2/2] UI: FULL LAYOUT CHANGE - BREAKING 2 Signed-off-by: ARYPROGRAMMER --- src/app/default/page.tsx | 10 +++++----- src/app/not-found.tsx | 5 ++--- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/app/default/page.tsx b/src/app/default/page.tsx index f160637..fae8e0b 100644 --- a/src/app/default/page.tsx +++ b/src/app/default/page.tsx @@ -7,7 +7,6 @@ import { Users, ArrowRight, Terminal, - Globe, GitBranch, Star, } from "lucide-react"; @@ -33,7 +32,7 @@ const HomePage = () => { window.addEventListener("resize", setCanvasSize); - let lines = []; + const lines: { x: number; y: number; length: number; angle: number; speed: number; originalSpeed: number; thickness: number; }[] = []; for (let i = 0; i < 15; i++) { lines.push({ @@ -104,6 +103,7 @@ const HomePage = () => { animate(); + // eslint-disable-next-line @typescript-eslint/no-explicit-any const handleMouseMove = (e: { clientX: any; clientY: any }) => { setMousePos({ x: e.clientX, y: e.clientY }); }; @@ -126,16 +126,16 @@ const HomePage = () => { className="absolute inset-0 w-full h-full" style={{ opacity: 0.9 }} /> - {/* Navigation */} +
- {/* Hero Section */} +

I Built CodeX - Because I Can't Code + Because I Can't Code

Join a global community of competitive programmers. Practice, diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 2a69a54..d5a81c0 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -46,10 +46,9 @@ const NotFound = () => { Under Maintenance - {/* Description */}

- We're currently optimizing this section of CodeX to bring you an even better coding experience. + We're currently optimizing this section of CodeX to bring you an even better coding experience.

@@ -57,7 +56,7 @@ const NotFound = () => {
- {/* Back to Home Button */} +