m33n4n-site 0.1.0

package/src/components/upload-form.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { useState } from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { suggestCategoriesAction } from '@/lib/actions';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Bot, Loader2, Tag, X } from 'lucide-react';
+import { Badge } from './ui/badge';
+import { useToast } from '@/hooks/use-toast';
+
+const formSchema = z.object({
+  title: z.string().min(1, 'Title is required.'),
+  content: z.string().min(50, 'Content must be at least 50 characters.'),
+  categories: z.array(z.string()).min(1, 'At least one category is required.'),
+  tags: z.array(z.string()).min(1, 'At least one tag is required.'),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export default function UploadForm() {
+  const [isSuggesting, setIsSuggesting] = useState(false);
+  const [newTag, setNewTag] = useState('');
+  const { toast } = useToast();
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: '',
+      content: '',
+      categories: [],
+      tags: [],
+    },
+  });
+
+  const {
+    fields: tagFields,
+    append: appendTag,
+    remove: removeTag,
+  } = useFieldArray({ control: form.control, name: 'tags' });
+
+  const {
+    fields: categoryFields,
+    append: appendCategory,
+    remove: removeCategory,
+  } = useFieldArray({ control: form.control, name: 'categories' });
+
+  async function handleSuggestion() {
+    const content = form.getValues('content');
+    if (content.length < 50) {
+      form.setError('content', {
+        message: 'Content must be at least 50 characters for suggestions.',
+      });
+      return;
+    }
+    setIsSuggesting(true);
+    try {
+      const result = await suggestCategoriesAction({ writeupContent: content });
+      if (result.suggestedCategories) {
+        form.setValue('categories', result.suggestedCategories);
+      }
+      if (result.suggestedTags) {
+        form.setValue('tags', result.suggestedTags);
+      }
+      toast({
+        title: "Suggestions Generated",
+        description: "AI has suggested categories and tags for your write-up."
+      })
+    } catch (error) {
+      console.error(error);
+       toast({
+        variant: "destructive",
+        title: "Suggestion Failed",
+        description: "Could not generate suggestions. Please try again."
+      })
+    } finally {
+      setIsSuggesting(false);
+    }
+  }
+
+  function onSubmit(values: FormData) {
+    console.log('Submitting:', values);
+    toast({
+      title: "Write-up Submitted!",
+      description: "Check the console for the submitted data (mocked).",
+    });
+    form.reset();
+  }
+
+  const handleAddTag = () => {
+    if (newTag.trim() !== '') {
+      appendTag(newTag.trim());
+      setNewTag('');
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="title"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="text-lg">Title</FormLabel>
+              <FormControl>
+                <Input placeholder="e.g., HTB - Lame Walkthrough" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="content"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="text-lg">Markdown Content</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Write your markdown content here..."
+                  className="min-h-[300px] font-code"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="rounded-lg border border-border bg-card p-4 space-y-4">
+            <div className="flex justify-between items-start">
+                <div>
+                    <h3 className="text-lg font-semibold text-primary">AI Assistant</h3>
+                    <p className="text-sm text-muted-foreground">Generate categories and tags automatically.</p>
+                </div>
+                <Button
+                    type="button"
+                    onClick={handleSuggestion}
+                    disabled={isSuggesting}
+                    variant="outline"
+                    className="border-primary text-primary hover:bg-primary hover:text-primary-foreground"
+                >
+                    {isSuggesting ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                    <Bot className="mr-2 h-4 w-4" />
+                    )}
+                    Suggest
+                </Button>
+            </div>
+          
+            <FormField
+            control={form.control}
+            name="categories"
+            render={() => (
+                <FormItem>
+                <FormLabel>Categories</FormLabel>
+                <div className="flex flex-wrap gap-2">
+                    {categoryFields.map((field, index) => (
+                    <Badge key={field.id} variant="secondary" className="text-md">
+                        {form.getValues(`categories.${index}`)}
+                        <button
+                        type="button"
+                        onClick={() => removeCategory(index)}
+                        className="ml-2 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        >
+                        <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                        </button>
+                    </Badge>
+                    ))}
+                </div>
+                <FormMessage />
+                </FormItem>
+            )}
+            />
+
+            <FormField
+            control={form.control}
+            name="tags"
+            render={() => (
+                <FormItem>
+                <FormLabel>Tags</FormLabel>
+                <div className="flex flex-wrap gap-2">
+                    {tagFields.map((field, index) => (
+                    <Badge key={field.id} variant="secondary" className="text-md font-code">
+                        {form.getValues(`tags.${index}`)}
+                        <button
+                        type="button"
+                        onClick={() => removeTag(index)}
+                        className="ml-2 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        >
+                        <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                        </button>
+                    </Badge>
+                    ))}
+                </div>
+                <div className="flex items-center gap-2 mt-2">
+                    <Input
+                    value={newTag}
+                    onChange={(e) => setNewTag(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                        e.preventDefault();
+                        handleAddTag();
+                        }
+                    }}
+                    placeholder="Add a new tag"
+                    className="w-48 h-8 font-code"
+                    />
+                    <Button type="button" onClick={handleAddTag} size="sm" variant="ghost">
+                        <Tag className="mr-2 h-4 w-4"/>
+                        Add Tag
+                    </Button>
+                </div>
+                <FormMessage />
+                </FormItem>
+            )}
+            />
+        </div>
+
+
+        <Button type="submit" size="lg" className="w-full">
+          Submit Write-up
+        </Button>
+      </form>
+    </Form>
+  );
+}

package/src/components/writeup-card.tsx

@@ -0,0 +1,53 @@
+
+import Link from 'next/link';
+import { format } from 'date-fns';
+import { Card } from './ui/card';
+import type { Writeup } from '@/lib/types';
+import { Calendar, Folder } from 'lucide-react';
+import Image from 'next/image';
+import { getPlaceholderImage } from '@/lib/placeholder-images';
+
+export default function WriteupCard({ writeup }: { writeup: Writeup }) {
+  const image = getPlaceholderImage(writeup.image);
+
+  return (
+    <Link href={`/writeups/${writeup.slug}`} className="group">
+      <Card className="flex flex-col md:flex-row bg-card/50 backdrop-blur-sm hover:border-primary/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 shadow-lg hover:shadow-primary/20 overflow-hidden h-full border-black/10">
+        <div className="flex flex-col p-6 w-full md:w-2/3">
+          <div className="flex-grow">
+            <h3 className="text-xl font-bold font-headline text-primary/90 group-hover:text-primary transition-colors">
+              {writeup.title}
+            </h3>
+            <p className="text-muted-foreground mt-2 text-sm">
+              {writeup.excerpt}
+            </p>
+          </div>
+          <div className="flex items-center text-xs text-muted-foreground mt-4 gap-4">
+            <div className="flex items-center">
+              <Calendar className="mr-1.5 h-3.5 w-3.5" />
+              <time dateTime={writeup.date}>
+                {format(new Date(writeup.date), 'MMM d, yyyy')}
+              </time>
+            </div>
+            <div className="flex items-center">
+              <Folder className="mr-1.5 h-3.5 w-3.5" />
+              <span>{writeup.categories.join(', ')}</span>
+            </div>
+          </div>
+        </div>
+        {image && (
+          <div className="relative w-full md:w-1/3 h-48 md:h-auto">
+            <Image
+              src={image.imageUrl}
+              alt={writeup.title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
+              data-ai-hint={image.imageHint}
+            />
+             <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent md:bg-gradient-to-l"></div>
+          </div>
+        )}
+      </Card>
+    </Link>
+  );
+}

package/src/components/writeups-list.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
+import type { Writeup } from '@/lib/types';
+import WriteupCard from './writeup-card';
+
+export default function WriteupsList({ writeups }: { writeups: Writeup[] }) {
+  const searchParams = useSearchParams();
+  const searchQuery = searchParams.get('q');
+  const categoryQuery = searchParams.get('category');
+  const pathQuery = searchParams.get('path');
+
+  const filteredWriteups = useMemo(() => {
+    let filtered = writeups;
+
+    if (pathQuery) {
+        filtered = filtered.filter((writeup) => writeup.path === pathQuery);
+    }
+
+    if (categoryQuery) {
+      filtered = filtered.filter((writeup) =>
+        writeup.categories.includes(categoryQuery)
+      );
+    }
+
+    if (searchQuery) {
+      const lowercasedQuery = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (writeup) =>
+          writeup.title.toLowerCase().includes(lowercasedQuery) ||
+          writeup.excerpt.toLowerCase().includes(lowercasedQuery) ||
+          writeup.tags.some((tag) =>
+            tag.toLowerCase().includes(lowercasedQuery)
+          )
+      );
+    }
+
+    return filtered;
+  }, [writeups, searchQuery, categoryQuery, pathQuery]);
+
+  if (filteredWriteups.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center text-center py-16">
+        <p className="text-2xl font-bold text-primary">No Results Found</p>
+        <p className="text-muted-foreground mt-2">
+          Try adjusting your search or filter.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2">
+        {filteredWriteups.map((writeup, i) => (
+          <WriteupCard key={writeup.slug} writeup={writeup} />
+        ))}
+    </div>
+  );
+}

package/src/lib/actions.ts

@@ -0,0 +1,21 @@
+'use server';
+
+import 'dotenv/config';
+import {
+  suggestWriteupCategories,
+  type SuggestWriteupCategoriesInput,
+  type SuggestWriteupCategoriesOutput,
+} from '@/ai/flows/suggest-writeup-categories';
+
+export async function suggestCategoriesAction(
+  input: SuggestWriteupCategoriesInput
+): Promise<SuggestWriteupCategoriesOutput> {
+  try {
+    const result = await suggestWriteupCategories(input);
+    return result;
+  } catch (error) {
+    console.error('Error in suggestCategoriesAction:', error);
+    // In a real app, you might want to return a structured error response
+    throw new Error('Failed to get suggestions from AI');
+  }
+}

package/src/lib/placeholder-images.json

@@ -0,0 +1,88 @@
+{
+  "placeholderImages": [
+    {
+      "id": "profile-pic",
+      "description": "A placeholder for the user's profile picture.",
+      "imageUrl": "https://cdn.discordapp.com/avatars/717270343865073694/e6c0846a51a2c93ae405d083751e5f05.webp",
+      "imageHint": "hacker emblem"
+    },
+    {
+      "id": "sidebar-profile-pic",
+      "description": "A placeholder for the user's profile picture in the sidebar.",
+      "imageUrl": "https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?q=80&w=580&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "imageHint": "cat helmet"
+    },
+    {
+      "id": "first-image",
+      "description": "extraimage",
+      "imageUrl": "https://shadowv0id.vercel.app/01.png",
+      "imageHint": "github 01"
+    },
+    {
+      "id": "second-image",
+      "description": "extraimage",
+      "imageUrl": "https://shadowv0id.vercel.app/02.png",
+      "imageHint": "github 02"
+    },
+    {
+      "id": "third-image",
+      "description": "extraimage",
+      "imageUrl": "https://shadowv0id.vercel.app/03.png",
+      "imageHint": "github 03"
+    },
+    {
+      "id": "fourth-image",
+      "description": "extraimage",
+      "imageUrl": "https://shadowv0id.vercel.app/04.png",
+      "imageHint": "github 03"
+    },
+    {
+      "id": "middle-image",
+      "description": "extraimage",
+      "imageUrl": "https://shadowv0id.vercel.app/servwr.jpg",
+      "imageHint": "server"
+    },
+    {
+      "id": "before-passwd",
+      "description": "extraimage",
+      "imageUrl": "https://shadowv0id.vercel.app/before-passwd.png",
+      "imageHint": "box1"
+    },
+    {
+      "id": "after-passwd",
+      "description": "extraimage",
+      "imageUrl": "https://shadowv0id.vercel.app/after-passwd.png",
+      "imageHint": "box2"
+    },
+    {
+      "id": "mouse-cursor",
+      "description": "extraimage",
+      "imageUrl": "https://shadowv0id.vercel.app/mouse-cursor.png",
+      "imageHint": "mouse-cursor"
+    },
+    {
+      "id": "chevron-down",
+      "description": "Decorative chevron pointing down.",
+      "imageUrl": "https://storage.googleapis.com/stedi-assets/N3kb0w/chevron.png",
+      "imageHint": "chevron down"
+    },
+    {
+      "id": "standard-post-banner",
+      "description": "Banner for a standard blog post.",
+      "imageUrl": "https://images.unsplash.com/photo-1518770660439-4636190af475?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NDE5ODJ8MHwxfHNlYXJjaHwxfHx0ZWNobm9sb2d5fGVufDB8fHx8MTc2MjU1NTk2NHww&ixlib=rb-4.1.0&q=80&w=1080",
+      "imageHint": "technology code"
+    },
+    {
+      "id": "time-locked-banner",
+      "description": "Banner for a time-locked post, showing a clock.",
+      "imageUrl": "https://images.unsplash.com/photo-1508272534888-3101643936a2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NDE5ODJ8MHwxfHNlYXJjaHwxfHxjbG9ja3xlbnwwfHx8fDE3NjI1NTU5NjR8MA&ixlib=rb-4.1.0&q=80&w=1080",
+      "imageHint": "abstract clock"
+    },
+    {
+      "id": "token-gated-banner",
+      "description": "Banner for a token-gated post, showing a key or lock.",
+      "imageUrl": "https://images.unsplash.com/photo-1555865267-231a8f9d021c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NDE5ODJ8MHwxfHNlYXJjaHwxfHxrZXl8ZW58MHx8fHwxNzYyNTU1OTY0fDA&ixlib=rb-4.1.0&q=80&w=1080",
+      "imageHint": "golden key"
+    }
+  ]
+}

package/src/lib/placeholder-images.ts

@@ -0,0 +1,14 @@
+import data from './placeholder-images.json';
+
+export type ImagePlaceholder = {
+  id: string;
+  description: string;
+  imageUrl: string;
+  imageHint: string;
+};
+
+export const placeholderImages: ImagePlaceholder[] = data.placeholderImages;
+
+export function getPlaceholderImage(id: string): ImagePlaceholder | undefined {
+  return placeholderImages.find((img) => img.id === id);
+}

package/src/lib/types.ts

@@ -0,0 +1,14 @@
+
+export type Writeup = {
+  slug: string;
+  title: string;
+  date: string;
+  excerpt: string;
+  categories: string[];
+  tags: string[];
+  content: string;
+  image: string; // Added image property
+  path?: 'direct';
+  releaseDate?: string; // Date when the write-up can be accessed
+  tokens?: string[]; // Array of tokens to bypass the release date lock
+};

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/lib/writeups.ts

@@ -0,0 +1,76 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import type { Writeup } from './types';
+import { cache } from 'react';
+
+const writeupsDirectory = path.join(process.cwd(), 'writeups');
+
+export const getWriteupsData = cache((): Writeup[] => {
+  if (!fs.existsSync(writeupsDirectory)) {
+    return [];
+  }
+
+  const categories = fs.readdirSync(writeupsDirectory);
+  const allWriteupsData: Writeup[] = [];
+
+  categories.forEach((category) => {
+    const categoryPath = path.join(writeupsDirectory, category);
+    if (!fs.statSync(categoryPath).isDirectory()) return;
+
+    const writeupFolders = fs.readdirSync(categoryPath);
+
+    writeupFolders.forEach((folder) => {
+      const slug = folder;
+      const writeupPath = path.join(categoryPath, folder);
+      const filePath = path.join(writeupPath, 'index.md');
+
+      if (fs.existsSync(filePath)) {
+        const fileContents = fs.readFileSync(filePath, 'utf8');
+        const { data, content } = matter(fileContents);
+
+        if (
+          !data.title ||
+          !data.date ||
+          !data.excerpt ||
+          !data.tags ||
+          !data.image
+        ) {
+          console.warn(`Skipping writeup with missing frontmatter: ${filePath}`);
+          return;
+        }
+
+        const writeup: Writeup = {
+          slug: slug,
+          title: data.title,
+          date: new Date(data.date).toISOString(),
+          excerpt: data.excerpt,
+          categories: [category],
+          tags: data.tags,
+          image: data.image,
+          content: content,
+          path: data.path,
+          releaseDate: data.releaseDate ? new Date(data.releaseDate).toISOString() : undefined,
+          tokens: data.tokens,
+        };
+        allWriteupsData.push(writeup);
+      }
+    });
+  });
+
+  return allWriteupsData.sort((a, b) => {
+    if (new Date(a.date) < new Date(b.date)) {
+      return 1;
+    } else {
+      return -1;
+    }
+  });
+});
+
+export function getWriteupBySlug(slug: string): Writeup | undefined {
+    return getWriteupsData().find((w) => w.slug === slug);
+}
+
+export function getAllCategories() {
+    return [...new Set(getWriteupsData().flatMap((w) => w.categories))];
+}