.env

@@ -0,0 +1,2 @@
+USERNAME="Svr_admin"
+PASSWORD="YP6t1kV6rmviuQG"

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#bun
+bun.lockb

actions/login.actions.ts

@@ -0,0 +1,13 @@
+'use server';
+import { NextApiRequest } from 'next';
+import { NextResponse } from 'next/server';
+
+export async function POST(req: NextApiRequest) {
+  const { username, password } = await req.body;
+
+  if (username === process.env.USERNAME && password === process.env.PASSWORD) {
+    return NextResponse.json({ success: true });
+  } else {
+    return NextResponse.json({ success: false });
+  }
+}

app/(root)/add-download/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const AddDownload = () => {
+  return <div>Welcome to downloads</div>;
+};
+
+export default AddDownload;

app/(root)/docs/page.tsx

@@ -1,7 +1,9 @@
-import React from "react";
+import Sidebar from '@/components/shared/Sidebar';
 
-const Docs = () => {
-  return <div>Docs</div>;
-};
-
-export default Docs;
+export default function Page() {
+  return (
+    <>
+      <Sidebar />
+    </>
+  );
+}

app/(root)/downloads/page.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button } from '@/components/ui/button';
 import {
   Table,
   TableBody,
@@ -8,38 +8,38 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
-import { Download } from "lucide-react";
-import Link from "next/link";
+} from '@/components/ui/table';
+import { Download } from 'lucide-react';
+import Link from 'next/link';
 
 const downloads = [
   {
-    date: "2024-06-01",
-    fileName: "SVRJS_v1.0.0.zip",
-    version: "1.0.0",
-    fileSize: "15MB",
-    downloadLink: "/downloads/SVRJS_v1.0.0.zip",
+    date: '2024-06-01',
+    fileName: 'SVRJS_v1.0.0.zip',
+    version: '1.0.0',
+    fileSize: '15MB',
+    downloadLink: '/downloads/SVRJS_v1.0.0.zip',
   },
   {
-    date: "2024-06-10",
-    fileName: "SVRJS_v1.1.0.zip",
-    version: "1.1.0",
-    fileSize: "18MB",
-    downloadLink: "/downloads/SVRJS_v1.1.0.zip",
+    date: '2024-06-10',
+    fileName: 'SVRJS_v1.1.0.zip',
+    version: '1.1.0',
+    fileSize: '18MB',
+    downloadLink: '/downloads/SVRJS_v1.1.0.zip',
   },
   {
-    date: "2024-06-15",
-    fileName: "SVRJS_v1.2.0.zip",
-    version: "1.2.0",
-    fileSize: "20MB",
-    downloadLink: "/downloads/SVRJS_v1.2.0.zip",
+    date: '2024-06-15',
+    fileName: 'SVRJS_v1.2.0.zip',
+    version: '1.2.0',
+    fileSize: '20MB',
+    downloadLink: '/downloads/SVRJS_v1.2.0.zip',
   },
   {
-    date: "2024-06-20",
-    fileName: "SVRJS_v1.3.0.zip",
-    version: "1.3.0",
-    fileSize: "22MB",
-    downloadLink: "/downloads/SVRJS_v1.3.0.zip",
+    date: '2024-06-20',
+    fileName: 'SVRJS_v1.3.0.zip',
+    version: '1.3.0',
+    fileSize: '22MB',
+    downloadLink: '/downloads/SVRJS_v1.3.0.zip',
   },
 ];
 
@@ -67,7 +67,10 @@ const DownloadPage = () => {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {downloads.map((download) => (
+          {downloads
+            .slice()
+            .reverse()
+            .map((download) => (
               <TableRow key={download.fileName}>
                 <TableCell className="font-medium">{download.date}</TableCell>
                 <TableCell>{download.fileName}</TableCell>
@@ -75,7 +78,7 @@ const DownloadPage = () => {
                 <TableCell className="text-left">{download.fileSize}</TableCell>
                 <TableCell className="flex items-center justify-end">
                   <Link href={download.downloadLink}>
-                  <Button variant={"ghost"} className="">
+                    <Button variant={'ghost'} className="">
                       <Download className="w-4 h-4 mr-2" />
                       Download
                     </Button>

app/(root)/login/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+const Login = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const router = useRouter();
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const res = await fetch('/api/login', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ username, password }),
+    });
+
+    if (res.ok) {
+      router.push('/add-download');
+    } else {
+      alert(res.status);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label>Username:</label>
+        <input
+          type="text"
+          value={username}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setUsername(e.target.value);
+          }}
+        />
+      </div>
+      <div>
+        <label>Password:</label>
+        <input
+          type="text"
+          value={password}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setPassword(e.target.value);
+          }}
+        />
+      </div>
+      <button type="submit">Login</button>
+    </form>
+  );
+};
+
+export default Login;

app/api/login/route.ts

@@ -0,0 +1,31 @@
+// import { NextResponse } from 'next/server';
+// import { setCookie } from 'nookies';
+// require('dotenv').config();
+
+// // nvm, clerk is overkill for one u
+
+// export async function POST(request: NextApiRequest) {
+//   const { username, password } = await request.json();
+//   console.log(username, password);
+//   console.log(process.env.PASSWORD);
+
+//   if (username === process.env.USERNAME && password === process.env.PASSWORD) {
+//     const response = NextResponse.json(
+//       { message: 'Login successful' },
+//       { status: 200 }
+//     );
+
+//     setCookie({ res: response }, 'token', 'your-auth-token', {
+//       httpOnly: true,
+//       secure: process.env.NODE_ENV !== 'development',
+//       maxAge: 30 * 24 * 60 * 60,
+//       path: '/',
+//     });
+
+//     return response;
+//   } else {
+//     return NextResponse.json({ message: 'Login failed' }, { status: 401 });
+//   }
+// }
+
+// im gonna create server actions

app/layout.tsx

@@ -1,18 +1,18 @@
-import type { Metadata } from "next";
-import { Poppins } from "next/font/google";
-import "./globals.css";
-import { ThemeProvider } from "@/components/shared/providers/themeprovider";
-import Navbar from "@/components/shared/Navbar";
-import Footer from "@/components/shared/Footer";
+import type { Metadata } from 'next';
+import { Poppins } from 'next/font/google';
+import './globals.css';
+import { ThemeProvider } from '@/components/shared/providers/themeprovider';
+import Navbar from '@/components/shared/Navbar';
+import Footer from '@/components/shared/Footer';
 
 const poppins = Poppins({
-  weight: ["400", "600", "700", "900"],
-  subsets: ["latin"],
+  weight: ['400', '600', '700', '900'],
+  subsets: ['latin'],
 });
 
 export const metadata: Metadata = {
-  title: "SVRJS - A Web Server running on Nodejs",
-  description: "Open Source Software Library",
+  title: 'SVRJS - A Web Server running on Nodejs',
+  description: 'Open Source Software Library',
 };
 
 export default function RootLayout({

app/page.tsx

@@ -1,10 +1,10 @@
-import About from "@/components/shared/About";
-import DataTable from "@/components/shared/DataTable";
-import Faq from "@/components/shared/FAQ";
-import Hero from "@/components/shared/Hero";
-import HowItWorks from "@/components/shared/HowItWorks";
-import Newsletter from "@/components/shared/Newsletter";
-import Partners from "@/components/shared/Partners";
+import About from '@/components/shared/About';
+import DataTable from '@/components/shared/DataTable';
+import Faq from '@/components/shared/FAQ';
+import Hero from '@/components/shared/Hero';
+import HowItWorks from '@/components/shared/HowItWorks';
+import Newsletter from '@/components/shared/Newsletter';
+import Partners from '@/components/shared/Partners';
 
 const RootPage = () => {
   return (

components/shared/Navbar.tsx

@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
 import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuList,
-} from "@radix-ui/react-navigation-menu";
-import Image from "next/image";
-import Link from "next/link";
-import ThemeToggle from "../ui/theme-toggle";
-import { NAVBAR } from "@/constants";
-import { buttonVariants } from "../ui/button";
-import MobileNav from "./MobileNav";
-import { usePathname } from "next/navigation";
+} from '@radix-ui/react-navigation-menu';
+import Image from 'next/image';
+import Link from 'next/link';
+import ThemeToggle from '../ui/theme-toggle';
+import { NAVBAR } from '@/constants';
+import { buttonVariants } from '../ui/button';
+import MobileNav from './MobileNav';
+import { usePathname } from 'next/navigation';
 
 const Navbar = () => {
   const pathname = usePathname();
@@ -50,9 +50,9 @@ const Navbar = () => {
                 href={href}
                 target={target}
                 className={`text-[17px] tracking-tight ${
-                  pathname == href ? "bg-accent/40" : ""
+                  pathname == href ? 'bg-accent/40' : ''
                 } ${buttonVariants({
-                  variant: "ghost",
+                  variant: 'ghost',
                 })}`}
               >
                 {label}
@@ -61,14 +61,14 @@ const Navbar = () => {
           </nav>
 
           <div className="hidden md:flex gap-2 items-center">
-            {NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
+            {NAVBAR.rightLinks?.map(({ href = '', label, target }) => (
               <Link
                 key={label}
                 href={href}
                 target={target}
                 className={`border ${buttonVariants({
-                  variant: "ghost",
-                  size: "icon",
+                  variant: 'ghost',
+                  size: 'icon',
                 })}`}
               >
                 <Image

components/shared/Sidebar.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Sidebar = () => {
+  return (
+    <div className="w-[250px] h-[100vh] border-r dark:border-r-slate-800 pl-4 pt-2">
+      <span className="flex flex-col gap-2">
+        <h2 className="text-2xl font-bold">First use</h2>
+        <ul className="pl-4 flex flex-col gap-2">
+          <li>System requirements</li>
+          <li>Installation</li>
+          <li>Features</li>
+          <li>SVR.JS files</li>
+          <li>SVR.JS utilities</li>
+          <li>SVR.JS commands</li>
+          <li>Updating SVR.JS</li>
+          <li>Common problems</li>
+          <li>Bun support</li>
+        </ul>
+      </span>
+    </div>
+  );
+};
+
+export default Sidebar;

package.json

@@ -20,11 +20,13 @@
     "@radix-ui/themes": "^3.0.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dotenv": "^16.4.5",
     "framer-motion": "^11.2.10",
     "lucide-react": "^0.394.0",
     "mini-svg-data-uri": "^1.4.4",
     "next": "14.2.3",
     "next-themes": "^0.3.0",
+    "nookies": "^2.5.2",
     "react": "^18",
     "react-dom": "^18",
     "react-fontawesome": "^1.7.1",

tsconfig.json

@@ -21,6 +21,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "lib/Hoc/withAuth.jsx"],
   "exclude": ["node_modules"]
 }