m33n4n-site 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# Firebase Studio
+
+This is a NextJS starter in Firebase Studio.
+
+To get started, take a look at src/app/page.tsx.

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "m33n4n-site",
+  "version": "0.1.0",
+  "private": false,
+  "main": "src/components/ui/index.ts",
+  "files": [
+    "src/components",
+    "src/lib",
+    "src/app/globals.css",
+    "src/app/fonts.css",
+    "tailwind.config.ts"
+  ],
+  "scripts": {
+    "dev": "next dev --turbopack -p 9002",
+    "genkit:dev": "genkit start -- tsx src/ai/dev.ts",
+    "genkit:watch": "genkit start -- tsx --watch src/ai/dev.ts",
+    "build": "NODE_ENV=production next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@genkit-ai/google-genai": "^1.20.0",
+    "@genkit-ai/next": "^1.20.0",
+    "@hookform/resolvers": "^4.1.3",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "dotenv": "^16.5.0",
+    "embla-carousel-react": "^8.6.0",
+    "firebase": "^11.9.1",
+    "framer-motion": "^11.5.7",
+    "genkit": "^1.20.0",
+    "gray-matter": "^4.0.3",
+    "lucide-react": "^0.475.0",
+    "next": "15.3.8",
+    "patch-package": "^8.0.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
+    "react-markdown": "^9.0.1",
+    "recharts": "^2.15.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "resend": "^3.5.0",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "genkit-cli": "^1.20.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

package/src/app/fonts.css

@@ -0,0 +1,8 @@
+
+@font-face {
+  font-family: 'WelcomeFont';
+  src: url('/fonts/welcome.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

package/src/app/globals.css

@@ -0,0 +1,192 @@
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 216 21% 16%; /* 🌑 LURKING DARK — #1F2531 */
+    --foreground: 216 27% 95%; /* ⚪ WHISKER WHITE — #EAEEF4 */
+
+    --card: 216 21% 18%; /* Slightly lighter than background */
+    --card-foreground: 216 27% 95%;
+
+    --popover: 216 21% 16%;
+    --popover-foreground: 216 27% 95%;
+
+    --primary: 42 99% 55%; /* 🟡 FAT CAT MUSTARD — #FEB81C */
+    --primary-foreground: 216 21% 16%;
+
+    --secondary: 216 21% 25%; /* Darker version of background */
+    --secondary-foreground: 216 27% 95%;
+
+    --muted: 216 21% 25%;
+    --muted-foreground: 216 15% 65%;
+
+    --accent: 216 21% 25%;
+    --accent-foreground: 216 27% 95%;
+
+    --destructive: 359 88% 54%; /* 🔴 CLAW RED — #F12325 */
+    --destructive-foreground: 216 27% 95%;
+
+    --border: 42 99% 45%; /* Mustard for borders */
+    --input: 216 21% 25%;
+    --ring: 42 99% 55%; /* Mustard for focus rings */
+
+    --radius: 0.5rem;
+    --chart-1: 42 99% 55%;
+    --chart-2: 42 89% 50%;
+    --chart-3: 42 79% 45%;
+    --chart-4: 359 78% 49%;
+    --chart-5: 359 88% 54%;
+
+    --sidebar-background: 216 21% 16%;
+    --sidebar-foreground: 216 27% 85%;
+    --sidebar-primary: 42 99% 55%;
+    --sidebar-primary-foreground: 216 21% 16%;
+    --sidebar-accent: 216 21% 25%;
+    --sidebar-accent-foreground: 216 27% 95%;
+    --sidebar-border: 42 99% 55%;
+    --sidebar-ring: 42 99% 55%;
+
+    --code-background: 216 21% 20%;
+    --terminal-header: 216 21% 18%;
+  }
+
+  .dark {
+    --background: 216 21% 16%; /* 🌑 LURKING DARK — #1F2531 */
+    --foreground: 216 27% 95%; /* ⚪ WHISKER WHITE — #EAEEF4 */
+
+    --card: 216 21% 18%; /* Slightly lighter than background */
+    --card-foreground: 216 27% 95%;
+
+    --popover: 216 21% 16%;
+    --popover-foreground: 216 27% 95%;
+
+    --primary: 42 99% 55%; /* 🟡 FAT CAT MUSTARD — #FEB81C */
+    --primary-foreground: 216 21% 16%;
+
+    --secondary: 216 21% 25%; /* Darker version of background */
+    --secondary-foreground: 216 27% 95%;
+
+    --muted: 216 21% 25%;
+    --muted-foreground: 216 15% 65%;
+
+    --accent: 216 21% 25%;
+    --accent-foreground: 216 27% 95%;
+
+    --destructive: 359 88% 54%; /* 🔴 CLAW RED — #F12325 */
+    --destructive-foreground: 216 27% 95%;
+
+    --border: 42 99% 45%; /* Mustard for borders */
+    --input: 216 21% 25%;
+    --ring: 42 99% 55%; /* Mustard for focus rings */
+
+    --chart-1: 42 99% 55%;
+    --chart-2: 42 89% 50%;
+    --chart-3: 42 79% 45%;
+    --chart-4: 359 78% 49%;
+    --chart-5: 359 88% 54%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    cursor: url('https://shadowv0id.vercel.app/mouse-cursor.png'), auto;
+    overflow-y: auto;
+  }
+}
+
+@layer components {
+  .prose {
+    @apply text-foreground/90 max-w-none;
+  }
+  .prose h1,
+  .prose h2,
+  .prose h3,
+  .prose h4,
+  .prose h5,
+  .prose h6 {
+    @apply text-primary font-headline tracking-tighter;
+  }
+  .prose h1 { @apply text-4xl; }
+  .prose h2 { @apply text-3xl; }
+  .prose h3 { @apply text-2xl; }
+
+  .prose a {
+    @apply text-primary/90 transition-colors hover:text-primary;
+  }
+  .prose strong {
+    @apply text-foreground;
+  }
+  .prose blockquote {
+    @apply relative bg-secondary/30 border border-primary/30 rounded-lg pl-12 pr-4 py-4 text-muted-foreground not-italic;
+  }
+  .prose blockquote::before {
+    content: "i";
+    @apply absolute left-4 top-4 flex items-center justify-center h-6 w-6 rounded-full bg-primary/80 text-primary-foreground font-bold text-sm;
+  }
+  .prose code {
+    @apply bg-[var(--code-background)] text-primary px-1.5 py-1 rounded-md font-code text-[0.9em] before:content-[''] after:content-[''];
+  }
+  .prose pre {
+    @apply bg-card/80 border border-primary/20 rounded-lg overflow-x-auto font-code shadow-lg relative p-4 pt-12;
+  }
+  .prose pre::before {
+    content: '';
+    @apply absolute top-0 left-0 right-0 h-8 bg-card rounded-t-lg border-b border-border/50;
+  }
+  .prose pre::after {
+    content: '';
+    position: absolute;
+    top: 0.75rem;
+    left: 1rem;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 9999px;
+    background-color: #ff5f56;
+    box-shadow: 1.25rem 0 0 #ffbd2e, 2.5rem 0 0 #27c93f;
+  }
+  .prose pre code {
+    @apply bg-transparent p-0 text-[0.9em] font-normal text-foreground/90;
+  }
+  .prose ul > li::marker {
+    @apply text-primary;
+  }
+  .prose ol > li::marker {
+    @apply text-primary;
+  }
+  .prose hr {
+    @apply border-border;
+  }
+  .prose table {
+    @apply w-full my-6;
+  }
+  .prose th {
+    @apply border border-border px-4 py-2 text-left font-bold;
+    @apply bg-secondary;
+  }
+  .prose td {
+    @apply border border-border px-4 py-2;
+  }
+  .prose img {
+    @apply rounded-lg;
+  }
+  .highlight-word {
+    @apply text-red-500 font-bold;
+  }
+}
+
+@layer utilities {
+  .glitch {
+    color: hsl(var(--primary));
+    text-shadow:
+      -0.05em 0.025em 0 rgba(255, 0, 0, 0.75),
+      0.05em -0.025em 0 rgba(0, 255, 255, 0.75),
+      0.025em 0.05em 0 rgba(0, 255, 0, 0.75);
+  }
+}

package/src/components/layout/header.tsx

@@ -0,0 +1,50 @@
+
+'use client';
+
+import { Search } from 'lucide-react';
+import { Input } from '../ui/input';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import Logo from '../logo';
+import Image from 'next/image';
+import { getPlaceholderImage } from '@/lib/placeholder-images';
+import { SidebarTrigger } from '../ui/sidebar';
+
+export default function Header() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [searchValue, setSearchValue] = useState(searchParams.get('q') || '');
+  const profileImage = getPlaceholderImage('profile-pic');
+
+  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    router.push(`/writeups?q=${searchValue}`);
+  };
+
+  useEffect(() => {
+    setSearchValue(searchParams.get('q') || '');
+  }, [searchParams]);
+
+  return (
+    <header className="sticky top-0 z-10 flex h-16 items-center justify-between gap-4 border-b border-black/20 bg-background/70 px-4 backdrop-blur-lg md:px-6">
+      <div className="flex items-center gap-4">
+        
+      </div>
+      
+      <div className="w-full flex-1 md:w-auto md:flex-none">
+        <form onSubmit={handleSearch}>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search write-ups..."
+              className="w-full appearance-none bg-background/50 pl-9 md:w-64 lg:w-96"
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+            />
+          </div>
+        </form>
+      </div>
+    </header>
+  );
+}

package/src/components/layout/protected-layout.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useAuth } from '@/context/auth-context';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import Loading from '@/app/loading';
+
+export default function ProtectedLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { isUnlocked, isLoading } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    // Wait until loading is finished before checking auth state
+    if (isLoading) return;
+
+    // If not unlocked and not on the portal page, redirect to portal
+    if (!isUnlocked && pathname !== '/') {
+      router.replace('/');
+    }
+  }, [isLoading, isUnlocked, pathname, router]);
+
+  // While checking auth state, show a loading screen
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  // If we're on a protected route and not unlocked, show loading while redirecting
+  if (!isUnlocked && pathname !== '/') {
+    return <Loading />;
+  }
+
+  // If unlocked or on the public portal page, show the content
+  return <>{children}</>;
+}

package/src/components/layout/sidebar-nav.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import {
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+  useSidebar,
+} from '../ui/sidebar';
+import { Archive, FileText, User, Flag, Users, Rss, Key } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+import { getAllCategories } from '@/lib/writeups';
+import Image from 'next/image';
+import { getPlaceholderImage } from '@/lib/placeholder-images';
+
+export default function SidebarNav() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const activeCategory = searchParams.get('category');
+  const activePath = searchParams.get('path');
+  const [categories, setCategories] = useState<string[]>([]);
+  const { state } = useSidebar();
+  const profileImage = getPlaceholderImage('sidebar-profile-pic');
+
+
+  useEffect(() => {
+    setCategories(['HTB', 'TryHackMe', 'Offsec']);
+  }, []);
+
+  const isActive = (path: string) => {
+    if ((path === '/writeups' && activeCategory) || (path === '/writeups' && activePath)) return false;
+    return pathname === path || (path !== '/' && pathname.startsWith(path));
+  };
+
+  return (
+    <>
+      <SidebarHeader className="p-4 flex items-center justify-center">
+        {profileImage && (
+            <Link href="/" className="flex flex-col items-center gap-2">
+                <Image
+                    src={profileImage.imageUrl}
+                    alt="Profile"
+                    width={120}
+                    height={120}
+                    className="transition-all duration-300 group-data-[collapsible=icon]:scale-100"
+                />
+                    <span className={cn(
+                    'text-lg font-bold font-headline tracking-tighter text-primary transition-opacity duration-200 group-data-[collapsible=icon]:opacity-0'
+                )}>
+                    M33N4N
+                </span>
+            </Link>
+        )}
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Main</SidebarGroupLabel>
+          <SidebarMenu>
+             <SidebarMenuItem>
+              <SidebarMenuButton
+                asChild
+                isActive={isActive('/blog')}
+                tooltip="Blog"
+              >
+                <Link href="/blog">
+                  <Rss />
+                  Blog
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                asChild
+                isActive={isActive('/writeups')}
+                tooltip="Write-ups"
+              >
+                <Link href="/writeups">
+                  <FileText />
+                  Write-ups
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                asChild
+                isActive={isActive('/archive')}
+                tooltip="Archive"
+              >
+                <Link href="/archive">
+                  <Archive />
+                  Archive
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroup>
+        <SidebarSeparator />
+        <SidebarGroup>
+          <SidebarGroupLabel>Community</SidebarGroupLabel>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                asChild
+                tooltip="Discord"
+                size="sm"
+                isActive={false}
+              >
+                <Link href="#" target="_blank">
+                  <Users />
+                  Discord
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroup>
+        <SidebarSeparator />
+        <SidebarGroup>
+          <SidebarGroupLabel>Categories</SidebarGroupLabel>
+          <SidebarMenu>
+            {categories.map(category => (
+              <SidebarMenuItem key={category}>
+                <SidebarMenuButton
+                  asChild
+                  isActive={
+                    pathname === '/writeups' && activeCategory === category
+                  }
+                  size="sm"
+                  tooltip={category}
+                >
+                  <Link href={`/writeups?category=${category}`}>
+                    <FileText />
+                    {category}
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+    </>
+  );
+}

package/src/components/logo.tsx

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { cn } from '@/lib/utils';
+
+type LogoProps = {
+  className?: string;
+  textClassName?: string;
+  showText?: boolean;
+};
+
+export default function Logo({
+  className,
+  textClassName,
+  showText = true,
+}: LogoProps) {
+  return (
+    <Link
+      href="/"
+      className={cn(
+        'flex flex-col items-center justify-center text-primary group',
+        className
+      )}
+    >
+      <Image
+        src="https://shadowv0id.vercel.app/cat-logo.png"
+        alt="M33N4N Logo"
+        width={28}
+        height={28}
+        className="transition-transform duration-300 group-hover:rotate-12"
+      />
+      {showText && (
+        <span
+          className={cn(
+            'text-lg font-bold font-headline tracking-tighter text-primary transition-colors group-hover:text-primary/80',
+            textClassName
+          )}
+        >
+          M33N4N
+        </span>
+      )}
+    </Link>
+  );
+}

package/src/components/markdown-renderer.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+
+export default function MarkdownRenderer({ content }: { content: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeRaw]}
+      components={{
+        // Customize components here if needed to match the theme
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}

package/src/components/page-transition.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { motion, AnimatePresence } from 'framer-motion';
+import { usePathname } from 'next/navigation';
+
+const pageVariants = {
+  initial: {
+    opacity: 0,
+    y: '10vh',
+  },
+  in: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+      ease: 'anticipate',
+    },
+  },
+  out: {
+    opacity: 0,
+    y: '-10vh',
+    transition: {
+      duration: 0.3,
+      ease: 'anticipate',
+    },
+  },
+};
+
+export default function PageTransition({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={pathname}
+        variants={pageVariants}
+        initial="initial"
+        animate="in"
+        exit="out"
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}