seem good
This commit is contained in:
439
frontend/app/auth/page.tsx
Normal file
439
frontend/app/auth/page.tsx
Normal file
@@ -0,0 +1,439 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect, Suspense } from "react";
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import { useAuth } from "@/lib/auth";
|
||||||
|
import { clientFetch } from "@/lib/api";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { Eye, EyeOff, Loader2, LogIn, UserPlus, KeyRound, Mail } from "lucide-react";
|
||||||
|
import { API_URL } from "@/lib/api";
|
||||||
|
import { UserRole } from "@/lib/types";
|
||||||
|
|
||||||
|
// Default export wraps the inner component in Suspense (required by Next.js
|
||||||
|
// when useSearchParams() is used inside a "use client" page).
|
||||||
|
export default function AuthPage() {
|
||||||
|
return (
|
||||||
|
<Suspense>
|
||||||
|
<AuthPageInner />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AuthPageInner() {
|
||||||
|
const { currentUser, login, register, refresh } = useAuth();
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const resetToken = searchParams.get("token") || "";
|
||||||
|
const initialTab = resetToken ? "reset" : "signin";
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [showPwd, setShowPwd] = useState(false);
|
||||||
|
|
||||||
|
// Redirect if already logged in
|
||||||
|
useEffect(() => {
|
||||||
|
if (currentUser) router.replace("/dashboard");
|
||||||
|
}, [currentUser, router]);
|
||||||
|
|
||||||
|
// ── Sign In ───────────────────────────────────────────────────────────────
|
||||||
|
const handleSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
const email = fd.get("email") as string;
|
||||||
|
const password = fd.get("password") as string;
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await login(email, password);
|
||||||
|
toast.success("Welcome back!");
|
||||||
|
router.push("/dashboard");
|
||||||
|
router.refresh();
|
||||||
|
} catch (err: unknown) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Login failed");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Sign Up ───────────────────────────────────────────────────────────────
|
||||||
|
const handleSignUp = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
const name = fd.get("name") as string;
|
||||||
|
const email = fd.get("email") as string;
|
||||||
|
const password = fd.get("password") as string;
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await register(name, email, password);
|
||||||
|
toast.success("Account created! Welcome!");
|
||||||
|
router.push("/dashboard");
|
||||||
|
router.refresh();
|
||||||
|
} catch (err: unknown) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Registration failed");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Magic Link ────────────────────────────────────────────────────────────
|
||||||
|
const handleMagicLink = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
const email = fd.get("email") as string;
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await clientFetch("/auth/magic-link", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ email }),
|
||||||
|
});
|
||||||
|
toast.success("Magic link sent! Check your email.");
|
||||||
|
} catch (err: unknown) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Failed to send magic link");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Password Reset Request ────────────────────────────────────────────────
|
||||||
|
const handleResetRequest = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
const email = fd.get("email") as string;
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await clientFetch("/auth/password-reset/request", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ email }),
|
||||||
|
});
|
||||||
|
toast.success("Reset link sent! Check your email.");
|
||||||
|
} catch (err: unknown) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Failed");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Password Reset Confirm ────────────────────────────────────────────────
|
||||||
|
const handleResetConfirm = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
const token = fd.get("token") as string;
|
||||||
|
const password = fd.get("password") as string;
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await clientFetch("/auth/password-reset/confirm", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ token, password }),
|
||||||
|
});
|
||||||
|
toast.success("Password updated! You can now sign in.");
|
||||||
|
} catch (err: unknown) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Failed to reset password");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx-auto max-w-lg space-y-5">
|
||||||
|
<Tabs defaultValue={initialTab}>
|
||||||
|
<TabsList className="grid w-full grid-cols-3">
|
||||||
|
<TabsTrigger value="signin">Sign In</TabsTrigger>
|
||||||
|
<TabsTrigger value="signup">Sign Up</TabsTrigger>
|
||||||
|
<TabsTrigger value="reset">Reset</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* ── Sign In Tab ─────────────────────────────────────────────────── */}
|
||||||
|
<TabsContent value="signin">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<LogIn className="h-5 w-5" /> Sign In
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Sign in to your account to access the dashboard.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<form onSubmit={handleSignIn} className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="signin-email">Email</Label>
|
||||||
|
<Input
|
||||||
|
id="signin-email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="you@example.com"
|
||||||
|
required
|
||||||
|
autoComplete="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="signin-password">Password</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
id="signin-password"
|
||||||
|
name="password"
|
||||||
|
type={showPwd ? "text" : "password"}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
required
|
||||||
|
autoComplete="current-password"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setShowPwd((v) => !v)}
|
||||||
|
>
|
||||||
|
{showPwd ? (
|
||||||
|
<EyeOff className="h-4 w-4" />
|
||||||
|
) : (
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full" disabled={loading}>
|
||||||
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Sign In
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<form onSubmit={handleMagicLink} className="space-y-2">
|
||||||
|
<Input
|
||||||
|
id="magic-email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="Magic link: enter your email"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="outline"
|
||||||
|
className="w-full"
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
<Mail className="mr-2 h-4 w-4" />
|
||||||
|
Send magic link
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="w-full"
|
||||||
|
onClick={() =>
|
||||||
|
(window.location.href = `${API_URL}/auth/google`)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Continue with Google
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* ── Sign Up Tab ─────────────────────────────────────────────────── */}
|
||||||
|
<TabsContent value="signup">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<UserPlus className="h-5 w-5" /> Create Account
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
New sign-ups are assigned the default MEMBER role.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form onSubmit={handleSignUp} className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="signup-name">Full Name</Label>
|
||||||
|
<Input
|
||||||
|
id="signup-name"
|
||||||
|
name="name"
|
||||||
|
placeholder="Your full name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="signup-email">Email</Label>
|
||||||
|
<Input
|
||||||
|
id="signup-email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="you@example.com"
|
||||||
|
required
|
||||||
|
autoComplete="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="signup-password">Password</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
id="signup-password"
|
||||||
|
name="password"
|
||||||
|
type={showPwd ? "text" : "password"}
|
||||||
|
placeholder="Create a password"
|
||||||
|
required
|
||||||
|
autoComplete="new-password"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setShowPwd((v) => !v)}
|
||||||
|
>
|
||||||
|
{showPwd ? (
|
||||||
|
<EyeOff className="h-4 w-4" />
|
||||||
|
) : (
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full" disabled={loading}>
|
||||||
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Create Account
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* ── Reset Password Tab ──────────────────────────────────────────── */}
|
||||||
|
<TabsContent value="reset">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<KeyRound className="h-5 w-5" /> Reset Password
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{/* Step 1: Request */}
|
||||||
|
<form onSubmit={handleResetRequest} className="space-y-3">
|
||||||
|
<Label>Request reset link</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input name="email" type="email" placeholder="your@email.com" />
|
||||||
|
<Button type="submit" variant="outline" disabled={loading}>
|
||||||
|
{loading && (
|
||||||
|
<Loader2 className="mr-1 h-4 w-4 animate-spin" />
|
||||||
|
)}
|
||||||
|
Send
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Step 2: Confirm */}
|
||||||
|
<form onSubmit={handleResetConfirm} className="space-y-3">
|
||||||
|
<Label>Confirm new password</Label>
|
||||||
|
<Input
|
||||||
|
name="token"
|
||||||
|
placeholder="Reset token from email"
|
||||||
|
defaultValue={resetToken}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
name="password"
|
||||||
|
type={showPwd ? "text" : "password"}
|
||||||
|
placeholder="New password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setShowPwd((v) => !v)}
|
||||||
|
>
|
||||||
|
{showPwd ? (
|
||||||
|
<EyeOff className="h-4 w-4" />
|
||||||
|
) : (
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full" disabled={loading}>
|
||||||
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Update Password
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
{/* ── Demo credentials card ─────────────────────────────────────────── */}
|
||||||
|
<Card className="border-dashed">
|
||||||
|
<CardContent className="pt-5 space-y-3">
|
||||||
|
<div className="rounded-lg bg-muted p-4 space-y-1">
|
||||||
|
<p className="font-semibold">Demo Admin Account</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Email: <strong>admin@gmail.com</strong>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Password: <strong>Whatever123$</strong>
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
className="mt-2"
|
||||||
|
onClick={() => {
|
||||||
|
const emailInput = document.getElementById(
|
||||||
|
"signin-email"
|
||||||
|
) as HTMLInputElement | null;
|
||||||
|
const pwdInput = document.getElementById(
|
||||||
|
"signin-password"
|
||||||
|
) as HTMLInputElement | null;
|
||||||
|
if (emailInput) emailInput.value = "admin@gmail.com";
|
||||||
|
if (pwdInput) pwdInput.value = "Whatever123$";
|
||||||
|
document.querySelector<HTMLButtonElement>('[value="signin"]')?.click();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Use these credentials
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2 text-sm">
|
||||||
|
<p className="font-semibold">Role Permissions</p>
|
||||||
|
<div className="space-y-1 text-muted-foreground">
|
||||||
|
<p>
|
||||||
|
<span className="font-medium text-blue-600">MEMBER</span> — View
|
||||||
|
blog posts only
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-medium text-amber-600">MANAGER</span> —
|
||||||
|
View all + create (draft only)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-medium text-red-600">ADMIN</span> — Full
|
||||||
|
CRUD access + user management
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
308
frontend/app/blog/[slug]/page.tsx
Normal file
308
frontend/app/blog/[slug]/page.tsx
Normal file
@@ -0,0 +1,308 @@
|
|||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { marked } from "marked";
|
||||||
|
import { apiFetch } from "@/lib/api";
|
||||||
|
import { BlogPost, PaginatedResult, TagCloudItem } from "@/lib/types";
|
||||||
|
import { ViewTracker } from "./view-tracker";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { Eye, TrendingUp, ArrowLeft, Calendar } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
params: Promise<{ slug: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function generateMetadata({ params }: Props) {
|
||||||
|
const { slug } = await params;
|
||||||
|
try {
|
||||||
|
const { post } = await apiFetch<{ post: BlogPost }>(
|
||||||
|
`/blog-posts/public/${slug}`
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
title: post.title,
|
||||||
|
description: post.excerpt,
|
||||||
|
openGraph: {
|
||||||
|
title: post.title,
|
||||||
|
description: post.excerpt,
|
||||||
|
images: post.featuredImageUrl ? [post.featuredImageUrl] : [],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} catch {
|
||||||
|
return { title: "Post not found" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getPost(slug: string): Promise<BlogPost | null> {
|
||||||
|
try {
|
||||||
|
const data = await apiFetch<{ success: boolean; post: BlogPost }>(
|
||||||
|
`/blog-posts/public/${slug}`
|
||||||
|
);
|
||||||
|
return data.post;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getRelatedPosts(post: BlogPost): Promise<BlogPost[]> {
|
||||||
|
try {
|
||||||
|
// Get posts with shared category
|
||||||
|
const cat = post.categories[0];
|
||||||
|
if (cat) {
|
||||||
|
const result = await apiFetch<PaginatedResult<BlogPost>>(
|
||||||
|
`/blog-posts/public?category=${encodeURIComponent(cat)}&pageSize=4`
|
||||||
|
);
|
||||||
|
const filtered = result.items.filter((p) => p.id !== post.id);
|
||||||
|
if (filtered.length > 0) return filtered.slice(0, 4);
|
||||||
|
}
|
||||||
|
// Fallback: latest
|
||||||
|
const result = await apiFetch<PaginatedResult<BlogPost>>(
|
||||||
|
"/blog-posts/public?pageSize=4"
|
||||||
|
);
|
||||||
|
return result.items.filter((p) => p.id !== post.id).slice(0, 4);
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getPopularPosts(excludeId: string): Promise<BlogPost[]> {
|
||||||
|
try {
|
||||||
|
const result = await apiFetch<PaginatedResult<BlogPost>>(
|
||||||
|
"/blog-posts/public?sort=most_viewed&pageSize=6"
|
||||||
|
);
|
||||||
|
return result.items.filter((p) => p.id !== excludeId).slice(0, 5);
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getTopTags(): Promise<TagCloudItem[]> {
|
||||||
|
try {
|
||||||
|
const result = await apiFetch<PaginatedResult<BlogPost>>(
|
||||||
|
"/blog-posts/public?pageSize=100"
|
||||||
|
);
|
||||||
|
const counts: Record<string, number> = {};
|
||||||
|
for (const post of result.items) {
|
||||||
|
for (const tag of post.tags || []) {
|
||||||
|
const t = tag.trim();
|
||||||
|
if (t) counts[t] = (counts[t] || 0) + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Object.entries(counts)
|
||||||
|
.map(([name, count]) => ({ name, count }))
|
||||||
|
.sort((a, b) => b.count - a.count)
|
||||||
|
.slice(0, 20);
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function BlogDetailPage({ params }: Props) {
|
||||||
|
const { slug } = await params;
|
||||||
|
const post = await getPost(slug);
|
||||||
|
|
||||||
|
if (!post) return notFound();
|
||||||
|
|
||||||
|
const [relatedPosts, popularPosts, topTags] = await Promise.all([
|
||||||
|
getRelatedPosts(post),
|
||||||
|
getPopularPosts(post.id),
|
||||||
|
getTopTags(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const contentHtml =
|
||||||
|
post.contentFormat === "markdown"
|
||||||
|
? await marked(post.content)
|
||||||
|
: post.content;
|
||||||
|
|
||||||
|
const publishedDate = new Date(post.createdAt).toLocaleDateString("en-US", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<ViewTracker slug={slug} />
|
||||||
|
|
||||||
|
{/* ── Back button ────────────────────────────────────────────────────── */}
|
||||||
|
<Button asChild variant="ghost" size="sm" className="-ml-2">
|
||||||
|
<Link href="/">
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-1" /> Back to Blog
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* ── Article ────────────────────────────────────────────────────────── */}
|
||||||
|
<article className="rounded-2xl border bg-card p-5 shadow-sm">
|
||||||
|
{/* Categories */}
|
||||||
|
{post.categories.length > 0 && (
|
||||||
|
<div className="mb-3 flex flex-wrap gap-2">
|
||||||
|
{post.categories.map((cat) => (
|
||||||
|
<Badge key={cat} variant="secondary" className="uppercase tracking-wide text-xs">
|
||||||
|
{cat}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<h1 className="text-3xl font-bold leading-tight">{post.title}</h1>
|
||||||
|
|
||||||
|
{post.excerpt && (
|
||||||
|
<p className="mt-3 text-lg text-muted-foreground">{post.excerpt}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Meta */}
|
||||||
|
<div className="mt-3 flex flex-wrap gap-3 text-sm text-muted-foreground">
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Calendar className="h-3 w-3" /> {publishedDate}
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Eye className="h-3 w-3" /> {post.views.toLocaleString()} views
|
||||||
|
</span>
|
||||||
|
{post.author && (
|
||||||
|
<span>by {post.author.name || post.author.email}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Featured image */}
|
||||||
|
{post.featuredImageUrl && (
|
||||||
|
<div className="mt-5 relative h-64 md:h-96 w-full overflow-hidden rounded-xl">
|
||||||
|
<Image
|
||||||
|
src={post.featuredImageUrl}
|
||||||
|
alt={post.featuredImageAlt || post.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="(max-width: 768px) 100vw, 800px"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
{post.tags.length > 0 && (
|
||||||
|
<div className="mt-4 flex flex-wrap gap-2">
|
||||||
|
{post.tags.map((tag) => (
|
||||||
|
<Link key={tag} href={`/?tags=${encodeURIComponent(tag)}`}>
|
||||||
|
<Badge variant="outline" className="cursor-pointer hover:bg-muted">
|
||||||
|
#{tag}
|
||||||
|
</Badge>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Separator className="my-6" />
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div
|
||||||
|
className="prose prose-zinc dark:prose-invert max-w-none
|
||||||
|
prose-headings:font-bold prose-headings:tracking-tight
|
||||||
|
prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl
|
||||||
|
prose-a:text-primary prose-a:no-underline hover:prose-a:underline
|
||||||
|
prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded
|
||||||
|
prose-pre:bg-muted prose-pre:border prose-pre:rounded-lg
|
||||||
|
prose-blockquote:border-l-4 prose-blockquote:border-muted-foreground/30
|
||||||
|
prose-img:rounded-xl prose-img:border"
|
||||||
|
dangerouslySetInnerHTML={{ __html: contentHtml }}
|
||||||
|
/>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
{/* ── Related + Sidebar ──────────────────────────────────────────────── */}
|
||||||
|
<div className="grid gap-6 lg:grid-cols-[1fr_20rem]">
|
||||||
|
{/* Related posts */}
|
||||||
|
<section className="rounded-2xl border bg-card p-5">
|
||||||
|
<h2 className="mb-4 text-xl font-bold">More from the blog</h2>
|
||||||
|
{relatedPosts.length > 0 ? (
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
{relatedPosts.map((related) => (
|
||||||
|
<article
|
||||||
|
key={related.id}
|
||||||
|
className="rounded-xl border bg-muted/30 p-4"
|
||||||
|
>
|
||||||
|
{related.categories.length > 0 && (
|
||||||
|
<div className="mb-2 flex flex-wrap gap-1">
|
||||||
|
{related.categories.slice(0, 2).map((cat) => (
|
||||||
|
<Badge
|
||||||
|
key={cat}
|
||||||
|
variant="secondary"
|
||||||
|
className="text-xs uppercase"
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Link href={`/blog/${related.slug}`} className="group">
|
||||||
|
<h3 className="font-semibold leading-tight group-hover:text-primary transition-colors line-clamp-2">
|
||||||
|
{related.title}
|
||||||
|
</h3>
|
||||||
|
</Link>
|
||||||
|
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">
|
||||||
|
{related.excerpt}
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-xs text-muted-foreground flex items-center gap-1">
|
||||||
|
<Eye className="h-3 w-3" /> {related.views.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
No related posts yet.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<aside className="space-y-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<TrendingUp className="h-4 w-4" /> Popular Posts
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
{popularPosts.map((p) => (
|
||||||
|
<Link
|
||||||
|
key={p.slug}
|
||||||
|
href={`/blog/${p.slug}`}
|
||||||
|
className="flex items-center justify-between rounded-lg border px-3 py-2 text-sm font-medium hover:bg-muted transition-colors"
|
||||||
|
>
|
||||||
|
<span className="line-clamp-1 mr-2">{p.title}</span>
|
||||||
|
<span className="text-muted-foreground shrink-0 flex items-center gap-1">
|
||||||
|
<Eye className="h-3 w-3" />
|
||||||
|
{p.views.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-base">Tags</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{topTags.map((tag) => (
|
||||||
|
<Link
|
||||||
|
key={tag.name}
|
||||||
|
href={`/?tags=${encodeURIComponent(tag.name)}`}
|
||||||
|
>
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="cursor-pointer hover:bg-muted transition-colors"
|
||||||
|
>
|
||||||
|
#{tag.name}
|
||||||
|
</Badge>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
frontend/app/blog/[slug]/view-tracker.tsx
Normal file
13
frontend/app/blog/[slug]/view-tracker.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { clientFetch } from "@/lib/api";
|
||||||
|
|
||||||
|
export function ViewTracker({ slug }: { slug: string }) {
|
||||||
|
useEffect(() => {
|
||||||
|
clientFetch(`/blog-posts/public/${slug}/view`, { method: "POST" }).catch(
|
||||||
|
() => {}
|
||||||
|
);
|
||||||
|
}, [slug]);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
200
frontend/app/dashboard/components/create-post-form.tsx
Normal file
200
frontend/app/dashboard/components/create-post-form.tsx
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { clientFetch } from "@/lib/api";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Loader2, PlusCircle } from "lucide-react";
|
||||||
|
import { PostStatus, ContentFormat, UserRole } from "@/lib/types";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
userRole: UserRole;
|
||||||
|
onCreated: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CreatePostForm({ userRole, onCreated }: Props) {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [status, setStatus] = useState<PostStatus>(PostStatus.DRAFT);
|
||||||
|
const [contentFormat, setContentFormat] = useState<ContentFormat>(
|
||||||
|
ContentFormat.MARKDOWN
|
||||||
|
);
|
||||||
|
const [isFeatured, setIsFeatured] = useState("false");
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
const body = {
|
||||||
|
title: fd.get("title"),
|
||||||
|
slug: fd.get("slug") || undefined,
|
||||||
|
excerpt: fd.get("excerpt") || undefined,
|
||||||
|
content: fd.get("content"),
|
||||||
|
contentFormat,
|
||||||
|
status: userRole === UserRole.ADMIN ? status : PostStatus.DRAFT,
|
||||||
|
isFeatured: isFeatured === "true",
|
||||||
|
categories: fd.get("categories") || undefined,
|
||||||
|
tags: fd.get("tags") || undefined,
|
||||||
|
featuredImageUrl: fd.get("featuredImageUrl") || undefined,
|
||||||
|
featuredImageAlt: fd.get("featuredImageAlt") || undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await clientFetch("/blog-posts", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
toast.success("Post created!");
|
||||||
|
(e.target as HTMLFormElement).reset();
|
||||||
|
onCreated();
|
||||||
|
} catch (err: unknown) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Failed to create post");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4 rounded-xl border bg-muted/30 p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="font-semibold flex items-center gap-2">
|
||||||
|
<PlusCircle className="h-4 w-4" /> Create New Post
|
||||||
|
</h3>
|
||||||
|
{userRole !== UserRole.ADMIN && (
|
||||||
|
<span className="text-xs text-muted-foreground border rounded-full px-2 py-0.5">
|
||||||
|
Status forced to Draft (Manager)
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="cp-title">Title *</Label>
|
||||||
|
<Input id="cp-title" name="title" placeholder="Post title" required />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="cp-slug">Slug (optional)</Label>
|
||||||
|
<Input id="cp-slug" name="slug" placeholder="custom-slug" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="cp-excerpt">Excerpt</Label>
|
||||||
|
<Textarea
|
||||||
|
id="cp-excerpt"
|
||||||
|
name="excerpt"
|
||||||
|
placeholder="Short description…"
|
||||||
|
rows={2}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="cp-content">Content *</Label>
|
||||||
|
<Textarea
|
||||||
|
id="cp-content"
|
||||||
|
name="content"
|
||||||
|
placeholder="Write your post content…"
|
||||||
|
rows={8}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label>Format</Label>
|
||||||
|
<Select
|
||||||
|
value={contentFormat}
|
||||||
|
onValueChange={(v) => setContentFormat(v as ContentFormat)}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={ContentFormat.MARKDOWN}>Markdown</SelectItem>
|
||||||
|
<SelectItem value={ContentFormat.HTML}>HTML</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{userRole === UserRole.ADMIN && (
|
||||||
|
<>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label>Status</Label>
|
||||||
|
<Select
|
||||||
|
value={status}
|
||||||
|
onValueChange={(v) => setStatus(v as PostStatus)}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={PostStatus.DRAFT}>Draft</SelectItem>
|
||||||
|
<SelectItem value={PostStatus.PUBLISHED}>Published</SelectItem>
|
||||||
|
<SelectItem value={PostStatus.ARCHIVED}>Archived</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label>Featured</Label>
|
||||||
|
<Select value={isFeatured} onValueChange={setIsFeatured}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="false">Not featured</SelectItem>
|
||||||
|
<SelectItem value="true">Featured</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="cp-categories">Categories (comma separated)</Label>
|
||||||
|
<Input
|
||||||
|
id="cp-categories"
|
||||||
|
name="categories"
|
||||||
|
placeholder="backend,api"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="cp-tags">Tags (comma separated)</Label>
|
||||||
|
<Input id="cp-tags" name="tags" placeholder="rest,pagination" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="cp-imgurl">Featured Image URL</Label>
|
||||||
|
<Input
|
||||||
|
id="cp-imgurl"
|
||||||
|
name="featuredImageUrl"
|
||||||
|
placeholder="https://…"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="cp-imgalt">Image Alt Text</Label>
|
||||||
|
<Input id="cp-imgalt" name="featuredImageAlt" placeholder="Alt text" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button type="submit" disabled={loading}>
|
||||||
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Create Post
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
293
frontend/app/dashboard/components/posts-table.tsx
Normal file
293
frontend/app/dashboard/components/posts-table.tsx
Normal file
@@ -0,0 +1,293 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useCallback } from "react";
|
||||||
|
import { clientFetch } from "@/lib/api";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { BlogPost, PostStatus, ContentFormat, UserRole } from "@/lib/types";
|
||||||
|
import { CreatePostForm } from "./create-post-form";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
} from "@/components/ui/alert-dialog";
|
||||||
|
import { Eye, Loader2, Pencil, Trash2, X, Check, ExternalLink } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
initialPosts: BlogPost[];
|
||||||
|
userRole: UserRole;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PostsTable({ initialPosts, userRole }: Props) {
|
||||||
|
const [posts, setPosts] = useState<BlogPost[]>(initialPosts);
|
||||||
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const refreshPosts = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const data = await clientFetch<{ posts: BlogPost[]; total: number }>(
|
||||||
|
"/blog-posts?pageSize=50"
|
||||||
|
);
|
||||||
|
setPosts(data.posts);
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleDelete = async (id: string) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await clientFetch(`/blog-posts/${id}`, { method: "DELETE" });
|
||||||
|
toast.success("Post deleted.");
|
||||||
|
setPosts((prev) => prev.filter((p) => p.id !== id));
|
||||||
|
} catch (err: unknown) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Delete failed");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdate = async (
|
||||||
|
e: React.FormEvent<HTMLFormElement>,
|
||||||
|
id: string
|
||||||
|
) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
const body: Record<string, unknown> = {
|
||||||
|
title: fd.get("title"),
|
||||||
|
slug: fd.get("slug") || undefined,
|
||||||
|
excerpt: fd.get("excerpt") || undefined,
|
||||||
|
content: fd.get("content"),
|
||||||
|
contentFormat: fd.get("contentFormat"),
|
||||||
|
status: fd.get("status"),
|
||||||
|
isFeatured: fd.get("isFeatured") === "true",
|
||||||
|
categories: fd.get("categories") || undefined,
|
||||||
|
tags: fd.get("tags") || undefined,
|
||||||
|
featuredImageUrl: fd.get("featuredImageUrl") || undefined,
|
||||||
|
featuredImageAlt: fd.get("featuredImageAlt") || undefined,
|
||||||
|
};
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await clientFetch(`/blog-posts/${id}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
toast.success("Post updated!");
|
||||||
|
setEditingId(null);
|
||||||
|
await refreshPosts();
|
||||||
|
} catch (err: unknown) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Update failed");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusColor: Record<PostStatus, string> = {
|
||||||
|
[PostStatus.PUBLISHED]: "bg-emerald-100 text-emerald-800 border-emerald-200",
|
||||||
|
[PostStatus.DRAFT]: "bg-zinc-100 text-zinc-700 border-zinc-200",
|
||||||
|
[PostStatus.ARCHIVED]: "bg-amber-100 text-amber-800 border-amber-200",
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Create form for ADMIN/MANAGER */}
|
||||||
|
{(userRole === UserRole.ADMIN || userRole === UserRole.MANAGER) && (
|
||||||
|
<CreatePostForm userRole={userRole} onCreated={refreshPosts} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Posts list */}
|
||||||
|
{posts.length === 0 ? (
|
||||||
|
<div className="rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground">
|
||||||
|
No posts yet.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{posts.map((post) => (
|
||||||
|
<article
|
||||||
|
key={post.id}
|
||||||
|
className="rounded-xl border bg-card p-4 shadow-sm"
|
||||||
|
>
|
||||||
|
{editingId === post.id && userRole === UserRole.ADMIN ? (
|
||||||
|
/* ── Edit form ─────────────────────────────────────────── */
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => handleUpdate(e, post.id)}
|
||||||
|
className="space-y-3"
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="font-semibold text-sm">Editing post</span>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setEditingId(null)}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-2 sm:grid-cols-2">
|
||||||
|
<Input name="title" defaultValue={post.title} required placeholder="Title" />
|
||||||
|
<Input name="slug" defaultValue={post.slug} placeholder="Slug" />
|
||||||
|
</div>
|
||||||
|
<Textarea name="excerpt" defaultValue={post.excerpt} placeholder="Excerpt" rows={2} />
|
||||||
|
<Textarea name="content" defaultValue={post.content} placeholder="Content" rows={6} required />
|
||||||
|
|
||||||
|
<div className="grid gap-2 sm:grid-cols-3">
|
||||||
|
<Select name="contentFormat" defaultValue={post.contentFormat}>
|
||||||
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={ContentFormat.MARKDOWN}>Markdown</SelectItem>
|
||||||
|
<SelectItem value={ContentFormat.HTML}>HTML</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select name="status" defaultValue={post.status}>
|
||||||
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={PostStatus.DRAFT}>Draft</SelectItem>
|
||||||
|
<SelectItem value={PostStatus.PUBLISHED}>Published</SelectItem>
|
||||||
|
<SelectItem value={PostStatus.ARCHIVED}>Archived</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select name="isFeatured" defaultValue={String(post.isFeatured)}>
|
||||||
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="false">Not featured</SelectItem>
|
||||||
|
<SelectItem value="true">Featured</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-2 sm:grid-cols-2">
|
||||||
|
<Input name="categories" defaultValue={post.categories.join(",")} placeholder="Categories" />
|
||||||
|
<Input name="tags" defaultValue={post.tags.join(",")} placeholder="Tags" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2 sm:grid-cols-2">
|
||||||
|
<Input name="featuredImageUrl" defaultValue={post.featuredImageUrl || ""} placeholder="Image URL" />
|
||||||
|
<Input name="featuredImageAlt" defaultValue={post.featuredImageAlt || ""} placeholder="Image Alt" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2 justify-end">
|
||||||
|
<Button type="button" variant="ghost" onClick={() => setEditingId(null)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={loading}>
|
||||||
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
<Check className="mr-1 h-4 w-4" /> Save
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
/* ── Post card view ─────────────────────────────────────── */
|
||||||
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||||
|
<div className="space-y-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<Link
|
||||||
|
href={`/blog/${post.slug}`}
|
||||||
|
className="font-semibold hover:text-primary transition-colors"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{post.title}
|
||||||
|
<ExternalLink className="inline-block ml-1 h-3 w-3" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
/{post.slug}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap gap-1.5 pt-1">
|
||||||
|
<span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${statusColor[post.status]}`}>
|
||||||
|
{post.status}
|
||||||
|
</span>
|
||||||
|
<span className="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs text-muted-foreground">
|
||||||
|
<Eye className="h-3 w-3" /> {post.views.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
{post.isFeatured && (
|
||||||
|
<Badge variant="secondary" className="text-xs">⭐ featured</Badge>
|
||||||
|
)}
|
||||||
|
{post.author && (
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
by {post.author.name || post.author.email}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{post.excerpt && (
|
||||||
|
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">
|
||||||
|
{post.excerpt}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-wrap gap-1 mt-1">
|
||||||
|
{post.categories.map((c) => (
|
||||||
|
<Badge key={c} variant="secondary" className="text-xs">{c}</Badge>
|
||||||
|
))}
|
||||||
|
{post.tags.map((t) => (
|
||||||
|
<Badge key={t} variant="outline" className="text-xs">#{t}</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-2 shrink-0">
|
||||||
|
{userRole === UserRole.ADMIN && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setEditingId(post.id)}
|
||||||
|
>
|
||||||
|
<Pencil className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<Button variant="outline" size="sm" className="text-destructive border-destructive/30 hover:bg-destructive/5">
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Delete post?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
"{post.title}" will be permanently deleted.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||||
|
onClick={() => handleDelete(post.id)}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Delete
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
191
frontend/app/dashboard/components/users-table.tsx
Normal file
191
frontend/app/dashboard/components/users-table.tsx
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { clientFetch } from "@/lib/api";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { User, UserRole } from "@/lib/types";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Loader2, Pencil, X, Check } from "lucide-react";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
initialUsers: User[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const roleColor: Record<UserRole, string> = {
|
||||||
|
[UserRole.ADMIN]: "bg-red-100 text-red-800 border-red-200",
|
||||||
|
[UserRole.MANAGER]: "bg-amber-100 text-amber-800 border-amber-200",
|
||||||
|
[UserRole.MEMBER]: "bg-blue-100 text-blue-700 border-blue-200",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function UsersTable({ initialUsers }: Props) {
|
||||||
|
const [users, setUsers] = useState<User[]>(initialUsers);
|
||||||
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
|
const [editName, setEditName] = useState("");
|
||||||
|
const [editRole, setEditRole] = useState<UserRole>(UserRole.MEMBER);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const startEdit = (user: User) => {
|
||||||
|
setEditingId(user.id);
|
||||||
|
setEditName(user.name || "");
|
||||||
|
setEditRole(user.role);
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelEdit = () => {
|
||||||
|
setEditingId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdate = async (user: User) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
// Update name if changed
|
||||||
|
let updated = user;
|
||||||
|
if (editName !== (user.name || "")) {
|
||||||
|
const res = await clientFetch<{ success: boolean; user: User }>(
|
||||||
|
`/users/${user.id}`,
|
||||||
|
{
|
||||||
|
method: "PATCH",
|
||||||
|
body: JSON.stringify({ name: editName || undefined }),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
updated = res.user;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update role if changed
|
||||||
|
if (editRole !== user.role) {
|
||||||
|
const res = await clientFetch<{ success: boolean; user: User }>(
|
||||||
|
`/users/${user.id}/role`,
|
||||||
|
{
|
||||||
|
method: "PATCH",
|
||||||
|
body: JSON.stringify({ role: editRole }),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
updated = res.user;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success("User updated.");
|
||||||
|
setUsers((prev) => prev.map((u) => (u.id === user.id ? updated : u)));
|
||||||
|
setEditingId(null);
|
||||||
|
} catch (err: unknown) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Update failed");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{users.length === 0 ? (
|
||||||
|
<div className="rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground">
|
||||||
|
No users found.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
users.map((user) => (
|
||||||
|
<div
|
||||||
|
key={user.id}
|
||||||
|
className="rounded-xl border bg-card p-4 shadow-sm flex flex-wrap items-center gap-3"
|
||||||
|
>
|
||||||
|
{editingId === user.id ? (
|
||||||
|
/* ── Edit row ─────────────────────────────────────────────── */
|
||||||
|
<div className="flex flex-1 flex-wrap items-center gap-2">
|
||||||
|
<Input
|
||||||
|
className="h-8 w-40"
|
||||||
|
placeholder="Name"
|
||||||
|
value={editName}
|
||||||
|
onChange={(e) => setEditName(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
value={editRole}
|
||||||
|
onValueChange={(v) => setEditRole(v as UserRole)}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="h-8 w-32">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={UserRole.MEMBER}>MEMBER</SelectItem>
|
||||||
|
<SelectItem value={UserRole.MANAGER}>MANAGER</SelectItem>
|
||||||
|
<SelectItem value={UserRole.ADMIN}>ADMIN</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleUpdate(user)}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="ghost" onClick={cancelEdit}>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* ── View row ─────────────────────────────────────────────── */
|
||||||
|
<>
|
||||||
|
<div className="flex flex-1 flex-wrap items-center gap-3 min-w-0">
|
||||||
|
{/* Avatar placeholder */}
|
||||||
|
<div className="h-8 w-8 shrink-0 rounded-full bg-muted flex items-center justify-center text-xs font-semibold uppercase">
|
||||||
|
{(user.name || user.email).charAt(0)}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-sm font-medium truncate">
|
||||||
|
{user.name ?? (
|
||||||
|
<span className="italic text-muted-foreground">
|
||||||
|
No name
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground truncate">
|
||||||
|
{user.email}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span
|
||||||
|
className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${roleColor[user.role]}`}
|
||||||
|
>
|
||||||
|
{user.role}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{!user.isActive && (
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="text-xs text-muted-foreground"
|
||||||
|
>
|
||||||
|
Inactive
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<p className="text-xs text-muted-foreground shrink-0">
|
||||||
|
Joined {new Date(user.createdAt).toLocaleDateString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => startEdit(user)}
|
||||||
|
>
|
||||||
|
<Pencil className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
204
frontend/app/dashboard/page.tsx
Normal file
204
frontend/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
import { redirect } from "next/navigation";
|
||||||
|
import { cookies } from "next/headers";
|
||||||
|
import { apiFetch, ApiError } from "@/lib/api";
|
||||||
|
import { BlogPost, User, UserRole, CurrentUser } from "@/lib/types";
|
||||||
|
import { PostsTable } from "./components/posts-table";
|
||||||
|
import { UsersTable } from "./components/users-table";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { LayoutDashboard, Users, FileText, ShieldAlert } from "lucide-react";
|
||||||
|
|
||||||
|
// ── Decode JWT payload without verification (public payload info only) ─────────
|
||||||
|
function decodeJwtPayload(token: string): CurrentUser | null {
|
||||||
|
try {
|
||||||
|
const base64Payload = token.split(".")[1];
|
||||||
|
const decoded = Buffer.from(base64Payload, "base64url").toString("utf-8");
|
||||||
|
return JSON.parse(decoded) as CurrentUser;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const roleColor: Record<UserRole, string> = {
|
||||||
|
[UserRole.ADMIN]: "bg-red-100 text-red-800 border-red-200",
|
||||||
|
[UserRole.MANAGER]: "bg-amber-100 text-amber-800 border-amber-200",
|
||||||
|
[UserRole.MEMBER]: "bg-blue-100 text-blue-700 border-blue-200",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function DashboardPage() {
|
||||||
|
// ── Auth check ─────────────────────────────────────────────────────────────
|
||||||
|
const cookieStore = await cookies();
|
||||||
|
const accessToken = cookieStore.get("accessToken")?.value;
|
||||||
|
|
||||||
|
if (!accessToken) {
|
||||||
|
redirect("/auth");
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentUser = decodeJwtPayload(accessToken);
|
||||||
|
if (!currentUser) {
|
||||||
|
redirect("/auth");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Fetch posts ────────────────────────────────────────────────────────────
|
||||||
|
let posts: BlogPost[] = [];
|
||||||
|
try {
|
||||||
|
const data = await apiFetch<{ posts: BlogPost[]; total: number }>(
|
||||||
|
"/blog-posts?pageSize=50"
|
||||||
|
);
|
||||||
|
posts = data.posts;
|
||||||
|
} catch (err) {
|
||||||
|
if (err instanceof ApiError && err.status === 401) {
|
||||||
|
redirect("/auth");
|
||||||
|
}
|
||||||
|
// Non-fatal — show empty list
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Fetch users (ADMIN only) ───────────────────────────────────────────────
|
||||||
|
let users: User[] = [];
|
||||||
|
if (currentUser.role === UserRole.ADMIN) {
|
||||||
|
try {
|
||||||
|
const data = await apiFetch<{ users: User[]; total: number }>(
|
||||||
|
"/users?pageSize=50"
|
||||||
|
);
|
||||||
|
users = data.users;
|
||||||
|
} catch {
|
||||||
|
// Non-fatal — show empty list
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const displayName = currentUser.name || currentUser.email;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* ── Header ──────────────────────────────────────────────────────────── */}
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<LayoutDashboard className="h-6 w-6 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">Dashboard</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Manage your blog content and users
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground">{displayName}</span>
|
||||||
|
<span
|
||||||
|
className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${roleColor[currentUser.role as UserRole]}`}
|
||||||
|
>
|
||||||
|
{currentUser.role}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Stats strip ─────────────────────────────────────────────────────── */}
|
||||||
|
<div className="grid gap-4 sm:grid-cols-3">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-5">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<FileText className="h-8 w-8 text-muted-foreground/60" />
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-bold">{posts.length}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Total posts</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-5">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<FileText className="h-8 w-8 text-emerald-500/60" />
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-bold">
|
||||||
|
{posts.filter((p) => p.status === "published").length}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Published</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-5">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<FileText className="h-8 w-8 text-zinc-400/60" />
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-bold">
|
||||||
|
{posts.filter((p) => p.status === "draft").length}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Drafts</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* ── Posts section ───────────────────────────────────────────────────── */}
|
||||||
|
<section className="space-y-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FileText className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<h2 className="text-xl font-semibold">Posts</h2>
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
{posts.length}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<PostsTable initialPosts={posts} userRole={currentUser.role as UserRole} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Users section (ADMIN only) ───────────────────────────────────────── */}
|
||||||
|
{currentUser.role === UserRole.ADMIN && (
|
||||||
|
<>
|
||||||
|
<Separator />
|
||||||
|
<section className="space-y-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Users className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<h2 className="text-xl font-semibold">Users</h2>
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
{users.length}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{users.length === 0 ? (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-base">
|
||||||
|
<ShieldAlert className="h-4 w-4" /> No users loaded
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Unable to fetch user list. Check your backend connection.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<UsersTable initialUsers={users} />
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ── Member notice ───────────────────────────────────────────────────── */}
|
||||||
|
{currentUser.role === UserRole.MEMBER && (
|
||||||
|
<Card className="border-dashed">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<ShieldAlert className="h-4 w-4 text-muted-foreground" />
|
||||||
|
Read-only access
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
You have the <strong>MEMBER</strong> role. You can view posts but
|
||||||
|
cannot create, edit, or delete them. Contact an admin to upgrade
|
||||||
|
your role.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@import "tw-animate-css";
|
@import "tw-animate-css";
|
||||||
@import "shadcn/tailwind.css";
|
@import "shadcn/tailwind.css";
|
||||||
|
@plugin "@tailwindcss/typography";
|
||||||
|
|
||||||
@custom-variant dark (&:is(.dark *));
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
import { AuthProvider } from "@/lib/auth";
|
||||||
|
import { Navbar } from "@/components/navbar";
|
||||||
|
import { Toaster } from "@/components/ui/sonner";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-geist-sans",
|
||||||
@@ -13,8 +16,12 @@ const geistMono = Geist_Mono({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Duc Binh's Blog",
|
title: {
|
||||||
description: "Fastify + Nextjs + Postgres",
|
default: "Duc Binh Blog",
|
||||||
|
template: "%s | Duc Binh Blog",
|
||||||
|
},
|
||||||
|
description:
|
||||||
|
"Practical engineering stories — fast backend patterns, frontend craft, and product lessons.",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
@@ -25,9 +32,15 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen bg-background`}
|
||||||
>
|
>
|
||||||
{children}
|
<AuthProvider>
|
||||||
|
<Navbar />
|
||||||
|
<main className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
<Toaster position="top-right" richColors />
|
||||||
|
</AuthProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,12 +1,332 @@
|
|||||||
|
import { Suspense } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { apiFetch } from "@/lib/api";
|
||||||
|
import { BlogPost, PaginatedResult, TagCloudItem } from "@/lib/types";
|
||||||
|
import { PostCard } from "@/components/post-card";
|
||||||
|
import { Pagination } from "@/components/pagination";
|
||||||
|
import { PostFilterForm } from "@/components/post-filter-form";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Eye, Star, TrendingUp } from "lucide-react";
|
||||||
|
|
||||||
|
interface HomeSearchParams {
|
||||||
|
q?: string;
|
||||||
|
tags?: string;
|
||||||
|
category?: string;
|
||||||
|
sort?: string;
|
||||||
|
page?: string;
|
||||||
|
pageSize?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getFeatured(): Promise<BlogPost[]> {
|
||||||
|
try {
|
||||||
|
return await apiFetch<BlogPost[]>("/blog-posts/public/featured");
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getPosts(
|
||||||
|
params: HomeSearchParams
|
||||||
|
): Promise<PaginatedResult<BlogPost>> {
|
||||||
|
const qs = new URLSearchParams();
|
||||||
|
if (params.q) qs.set("q", params.q);
|
||||||
|
if (params.tags) qs.set("tags", params.tags);
|
||||||
|
if (params.category) qs.set("category", params.category);
|
||||||
|
if (params.sort) qs.set("sort", params.sort);
|
||||||
|
qs.set("page", params.page || "1");
|
||||||
|
qs.set("pageSize", params.pageSize || "9");
|
||||||
|
try {
|
||||||
|
return await apiFetch<PaginatedResult<BlogPost>>(
|
||||||
|
`/blog-posts/public?${qs.toString()}`
|
||||||
|
);
|
||||||
|
} catch {
|
||||||
|
return { items: [], total: 0, page: 1, pageSize: 9, totalPages: 0 };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getAllPostsForCloud(): Promise<BlogPost[]> {
|
||||||
|
try {
|
||||||
|
const result = await apiFetch<PaginatedResult<BlogPost>>(
|
||||||
|
"/blog-posts/public?pageSize=100"
|
||||||
|
);
|
||||||
|
return result.items;
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildTagCloud(posts: BlogPost[]): TagCloudItem[] {
|
||||||
|
const counts: Record<string, number> = {};
|
||||||
|
for (const post of posts) {
|
||||||
|
for (const tag of post.tags || []) {
|
||||||
|
const t = tag.trim();
|
||||||
|
if (t) counts[t] = (counts[t] || 0) + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Object.entries(counts)
|
||||||
|
.map(([name, count]) => ({ name, count }))
|
||||||
|
.sort((a, b) => b.count - a.count)
|
||||||
|
.slice(0, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildCategoryCloud(posts: BlogPost[]): TagCloudItem[] {
|
||||||
|
const counts: Record<string, number> = {};
|
||||||
|
for (const post of posts) {
|
||||||
|
for (const cat of post.categories || []) {
|
||||||
|
const c = cat.trim();
|
||||||
|
if (c) counts[c] = (counts[c] || 0) + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Object.entries(counts)
|
||||||
|
.map(([name, count]) => ({ name, count }))
|
||||||
|
.sort((a, b) => b.count - a.count)
|
||||||
|
.slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function HomePage({
|
||||||
|
searchParams,
|
||||||
|
}: {
|
||||||
|
searchParams: Promise<HomeSearchParams>;
|
||||||
|
}) {
|
||||||
|
const params = await searchParams;
|
||||||
|
|
||||||
|
const [featured, postsResult, allPosts, popularResult] = await Promise.all([
|
||||||
|
getFeatured(),
|
||||||
|
getPosts(params),
|
||||||
|
getAllPostsForCloud(),
|
||||||
|
apiFetch<PaginatedResult<BlogPost>>(
|
||||||
|
"/blog-posts/public?sort=most_viewed&pageSize=5"
|
||||||
|
).catch(() => ({ items: [] as BlogPost[] })),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const topTags = buildTagCloud(allPosts);
|
||||||
|
const topCategories = buildCategoryCloud(allPosts);
|
||||||
|
const popularPosts = (popularResult as PaginatedResult<BlogPost>).items || [];
|
||||||
|
const { items: posts, page, totalPages, total } = postsResult;
|
||||||
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="space-y-6">
|
||||||
<div>
|
{/* ── Hero ──────────────────────────────────────────────────────────── */}
|
||||||
<Button>Blank page with nextjs + Shadcn ui</Button>
|
<section className="rounded-2xl border bg-gradient-to-r from-background via-muted/30 to-background p-5">
|
||||||
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||||
|
<div className="max-w-2xl">
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">
|
||||||
|
Practical Engineering Stories
|
||||||
|
</h1>
|
||||||
|
<p className="mt-2 text-muted-foreground">
|
||||||
|
Fast backend patterns, frontend craft, and product lessons from
|
||||||
|
shipping real systems.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{topCategories.slice(0, 6).map((c) => (
|
||||||
|
<Link
|
||||||
|
key={c.name}
|
||||||
|
href={`/?category=${encodeURIComponent(c.name)}`}
|
||||||
|
>
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className="cursor-pointer hover:bg-secondary/80"
|
||||||
|
>
|
||||||
|
{c.name} ({c.count})
|
||||||
|
</Badge>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Featured posts ─────────────────────────────────────────────────── */}
|
||||||
|
{featured.length > 0 && (
|
||||||
|
<section className="rounded-2xl border bg-gradient-to-r from-background via-sky-50 to-emerald-50 dark:via-sky-950/20 dark:to-emerald-950/20 p-5">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Star className="h-4 w-4 text-amber-500 fill-amber-500" />
|
||||||
|
<h2 className="font-semibold text-lg">Featured</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 lg:grid-cols-[1.5fr_1fr]">
|
||||||
|
{/* Primary featured */}
|
||||||
|
<article className="rounded-xl border bg-background/80 p-5">
|
||||||
|
<Badge className="mb-3 bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 border-amber-200">
|
||||||
|
Featured pick
|
||||||
|
</Badge>
|
||||||
|
{featured[0].featuredImageUrl && (
|
||||||
|
<Link href={`/blog/${featured[0].slug}`} className="block mb-4">
|
||||||
|
<div className="relative h-52 w-full overflow-hidden rounded-lg">
|
||||||
|
<Image
|
||||||
|
src={featured[0].featuredImageUrl}
|
||||||
|
alt={featured[0].featuredImageAlt || featured[0].title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="(max-width: 1024px) 100vw, 60vw"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<Link href={`/blog/${featured[0].slug}`} className="group">
|
||||||
|
<h2 className="text-2xl font-bold leading-tight group-hover:text-primary transition-colors">
|
||||||
|
{featured[0].title}
|
||||||
|
</h2>
|
||||||
|
</Link>
|
||||||
|
<p className="mt-2 text-muted-foreground">
|
||||||
|
{featured[0].excerpt}
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-sm text-muted-foreground flex items-center gap-1">
|
||||||
|
<Eye className="h-3 w-3" />
|
||||||
|
{featured[0].views.toLocaleString()} views
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
{/* Secondary featured */}
|
||||||
|
<div className="grid gap-3">
|
||||||
|
{featured.slice(1).map((post) => (
|
||||||
|
<article
|
||||||
|
key={post.id}
|
||||||
|
className="rounded-xl border bg-background/80 p-4 flex gap-3"
|
||||||
|
>
|
||||||
|
{post.featuredImageUrl && (
|
||||||
|
<div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-lg">
|
||||||
|
<Image
|
||||||
|
src={post.featuredImageUrl}
|
||||||
|
alt={post.featuredImageAlt || post.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="64px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="min-w-0">
|
||||||
|
<Link href={`/blog/${post.slug}`} className="group">
|
||||||
|
<h3 className="font-semibold leading-tight group-hover:text-primary transition-colors line-clamp-2">
|
||||||
|
{post.title}
|
||||||
|
</h3>
|
||||||
|
</Link>
|
||||||
|
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">
|
||||||
|
{post.excerpt}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ── Main content + sidebar ─────────────────────────────────────────── */}
|
||||||
|
<div className="grid gap-6 lg:grid-cols-[1fr_20rem]">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Filter form */}
|
||||||
|
<Suspense fallback={null}>
|
||||||
|
<PostFilterForm
|
||||||
|
topCategories={topCategories}
|
||||||
|
currentQ={params.q || ""}
|
||||||
|
currentCategory={params.category || ""}
|
||||||
|
currentSort={params.sort || "newest"}
|
||||||
|
currentTags={params.tags || ""}
|
||||||
|
/>
|
||||||
|
</Suspense>
|
||||||
|
|
||||||
|
{/* Post grid */}
|
||||||
|
{posts.length === 0 ? (
|
||||||
|
<div className="rounded-xl border bg-muted/30 p-8 text-center">
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
No posts found for this filter.
|
||||||
|
</p>
|
||||||
|
<Button asChild variant="link" className="mt-2">
|
||||||
|
<Link href="/">Clear filters</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
||||||
|
{posts.map((post) => (
|
||||||
|
<PostCard key={post.id} post={post} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
<Suspense fallback={null}>
|
||||||
|
<Pagination page={page} totalPages={totalPages} total={total} />
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<aside className="space-y-4">
|
||||||
|
{/* Popular Posts */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<TrendingUp className="h-4 w-4" /> Popular Posts
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
{popularPosts.map((post) => (
|
||||||
|
<Link
|
||||||
|
key={post.slug}
|
||||||
|
href={`/blog/${post.slug}`}
|
||||||
|
className="flex items-center justify-between rounded-lg border px-3 py-2 text-sm font-medium hover:bg-muted transition-colors"
|
||||||
|
>
|
||||||
|
<span className="line-clamp-1 mr-2">{post.title}</span>
|
||||||
|
<span className="text-muted-foreground shrink-0 flex items-center gap-1">
|
||||||
|
<Eye className="h-3 w-3" />
|
||||||
|
{post.views.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Newsletter */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-base">Newsletter</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-muted-foreground mb-3">
|
||||||
|
One practical note every Friday.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Input type="email" placeholder="you@example.com" />
|
||||||
|
<Button className="w-full">Join</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Tag Cloud */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-base">Tag Cloud</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{topTags.map((tag) => (
|
||||||
|
<Link
|
||||||
|
key={tag.name}
|
||||||
|
href={`/?tags=${encodeURIComponent(tag.name)}`}
|
||||||
|
>
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="cursor-pointer hover:bg-muted transition-colors"
|
||||||
|
>
|
||||||
|
#{tag.name} ({tag.count})
|
||||||
|
</Badge>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
<p className="text-xs text-center text-muted-foreground">
|
||||||
|
Built with NestJS + Next.js 16 + shadcn/ui
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
74
frontend/components/navbar.tsx
Normal file
74
frontend/components/navbar.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useAuth } from "@/lib/auth";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { BookOpen, LayoutDashboard, LogOut, LogIn } from "lucide-react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
export function Navbar() {
|
||||||
|
const { currentUser, logout } = useAuth();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handleLogout = async () => {
|
||||||
|
await logout();
|
||||||
|
toast.success("Logged out successfully");
|
||||||
|
router.push("/");
|
||||||
|
router.refresh();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||||
|
<div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||||
|
{/* Logo */}
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="flex items-center gap-2 font-semibold text-foreground hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-foreground">
|
||||||
|
DB
|
||||||
|
</span>
|
||||||
|
<span className="hidden sm:inline">Duc Binh Blog</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Nav */}
|
||||||
|
<nav className="flex items-center gap-2">
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link href="/">
|
||||||
|
<BookOpen className="h-4 w-4 mr-1" />
|
||||||
|
<span className="hidden sm:inline">Home</span>
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{currentUser ? (
|
||||||
|
<>
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link href="/dashboard">
|
||||||
|
<LayoutDashboard className="h-4 w-4 mr-1" />
|
||||||
|
<span className="hidden sm:inline">Dashboard</span>
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="text-destructive hover:text-destructive"
|
||||||
|
>
|
||||||
|
<LogOut className="h-4 w-4 mr-1" />
|
||||||
|
<span className="hidden sm:inline">Logout</span>
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link href="/auth">
|
||||||
|
<LogIn className="h-4 w-4 mr-1" />
|
||||||
|
<span className="hidden sm:inline">Sign In</span>
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
72
frontend/components/pagination.tsx
Normal file
72
frontend/components/pagination.tsx
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
|
||||||
|
interface PaginationProps {
|
||||||
|
page: number;
|
||||||
|
totalPages: number;
|
||||||
|
total: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Pagination({ page, totalPages, total }: PaginationProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
if (totalPages <= 1) return null;
|
||||||
|
|
||||||
|
const goToPage = (p: number) => {
|
||||||
|
const params = new URLSearchParams(searchParams.toString());
|
||||||
|
params.set("page", String(p));
|
||||||
|
router.push(`?${params.toString()}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Show at most 5 page numbers
|
||||||
|
const getPageNumbers = () => {
|
||||||
|
const pages: number[] = [];
|
||||||
|
const start = Math.max(1, page - 2);
|
||||||
|
const end = Math.min(totalPages, start + 4);
|
||||||
|
for (let i = start; i <= end; i++) pages.push(i);
|
||||||
|
return pages;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between gap-2 pt-4 border-t">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Page {page} of {totalPages} ({total} posts)
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={page <= 1}
|
||||||
|
onClick={() => goToPage(page - 1)}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{getPageNumbers().map((p) => (
|
||||||
|
<Button
|
||||||
|
key={p}
|
||||||
|
variant={p === page ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => goToPage(p)}
|
||||||
|
className="w-9"
|
||||||
|
>
|
||||||
|
{p}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={page >= totalPages}
|
||||||
|
onClick={() => goToPage(page + 1)}
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
72
frontend/components/post-card.tsx
Normal file
72
frontend/components/post-card.tsx
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent, CardFooter } from "@/components/ui/card";
|
||||||
|
import { Eye } from "lucide-react";
|
||||||
|
import { BlogPost } from "@/lib/types";
|
||||||
|
|
||||||
|
interface PostCardProps {
|
||||||
|
post: BlogPost;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PostCard({ post }: PostCardProps) {
|
||||||
|
return (
|
||||||
|
<Card className="flex flex-col overflow-hidden hover:shadow-md transition-shadow h-full">
|
||||||
|
{post.featuredImageUrl && (
|
||||||
|
<Link href={`/blog/${post.slug}`} className="block overflow-hidden">
|
||||||
|
<div className="relative h-48 w-full">
|
||||||
|
<Image
|
||||||
|
src={post.featuredImageUrl}
|
||||||
|
alt={post.featuredImageAlt || post.title}
|
||||||
|
fill
|
||||||
|
className="object-cover transition-transform duration-300 hover:scale-[1.02]"
|
||||||
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<CardContent className="flex-1 pt-4 pb-2">
|
||||||
|
{post.categories.length > 0 && (
|
||||||
|
<div className="mb-2 flex flex-wrap gap-1">
|
||||||
|
{post.categories.slice(0, 3).map((cat) => (
|
||||||
|
<Badge
|
||||||
|
key={cat}
|
||||||
|
variant="secondary"
|
||||||
|
className="text-xs uppercase tracking-wide"
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Link href={`/blog/${post.slug}`} className="group">
|
||||||
|
<h3 className="font-semibold leading-tight text-foreground group-hover:text-primary transition-colors line-clamp-2">
|
||||||
|
{post.title}
|
||||||
|
</h3>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{post.excerpt && (
|
||||||
|
<p className="mt-2 text-sm text-muted-foreground line-clamp-3">
|
||||||
|
{post.excerpt}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
<CardFooter className="pt-0 pb-4 px-6 flex flex-wrap gap-1.5 items-center justify-between">
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{post.tags.slice(0, 3).map((tag) => (
|
||||||
|
<Badge key={tag} variant="outline" className="text-xs">
|
||||||
|
#{tag}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span className="flex items-center gap-1 text-xs text-muted-foreground ml-auto">
|
||||||
|
<Eye className="h-3 w-3" />
|
||||||
|
{post.views.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
137
frontend/components/post-filter-form.tsx
Normal file
137
frontend/components/post-filter-form.tsx
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import { useCallback } from "react";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Search, X } from "lucide-react";
|
||||||
|
import { TagCloudItem } from "@/lib/types";
|
||||||
|
|
||||||
|
interface PostFilterFormProps {
|
||||||
|
topCategories: TagCloudItem[];
|
||||||
|
currentQ: string;
|
||||||
|
currentCategory: string;
|
||||||
|
currentSort: string;
|
||||||
|
currentTags: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PostFilterForm({
|
||||||
|
topCategories,
|
||||||
|
currentQ,
|
||||||
|
currentCategory,
|
||||||
|
currentSort,
|
||||||
|
currentTags,
|
||||||
|
}: PostFilterFormProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
const updateParam = useCallback(
|
||||||
|
(updates: Record<string, string>) => {
|
||||||
|
const params = new URLSearchParams(searchParams.toString());
|
||||||
|
for (const [key, val] of Object.entries(updates)) {
|
||||||
|
if (val) {
|
||||||
|
params.set(key, val);
|
||||||
|
} else {
|
||||||
|
params.delete(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
params.set("page", "1");
|
||||||
|
router.push(`?${params.toString()}`);
|
||||||
|
},
|
||||||
|
[router, searchParams]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
updateParam({
|
||||||
|
q: fd.get("q") as string,
|
||||||
|
tags: fd.get("tags") as string,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearFilters = () => {
|
||||||
|
router.push("/");
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasFilters = currentQ || currentCategory || currentTags || (currentSort && currentSort !== "newest");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="rounded-xl border bg-card p-4 shadow-sm space-y-3"
|
||||||
|
>
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{/* Search */}
|
||||||
|
<div className="sm:col-span-2 relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
name="q"
|
||||||
|
defaultValue={currentQ}
|
||||||
|
placeholder="Search posts…"
|
||||||
|
className="pl-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category */}
|
||||||
|
<Select
|
||||||
|
defaultValue={currentCategory || "all"}
|
||||||
|
onValueChange={(val) =>
|
||||||
|
updateParam({ category: val === "all" ? "" : val })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Category" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All categories</SelectItem>
|
||||||
|
{topCategories.map((c) => (
|
||||||
|
<SelectItem key={c.name} value={c.name}>
|
||||||
|
{c.name} ({c.count})
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
{/* Sort */}
|
||||||
|
<Select
|
||||||
|
defaultValue={currentSort || "newest"}
|
||||||
|
onValueChange={(val) => updateParam({ sort: val })}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Sort" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="newest">Newest</SelectItem>
|
||||||
|
<SelectItem value="oldest">Oldest</SelectItem>
|
||||||
|
<SelectItem value="most_viewed">Most viewed</SelectItem>
|
||||||
|
<SelectItem value="featured">Featured first</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2 items-end">
|
||||||
|
<div className="flex-1">
|
||||||
|
<Input
|
||||||
|
name="tags"
|
||||||
|
defaultValue={currentTags}
|
||||||
|
placeholder="Tags (comma separated): nextjs, typescript"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit">Apply</Button>
|
||||||
|
{hasFilters && (
|
||||||
|
<Button type="button" variant="ghost" onClick={clearFilters}>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
196
frontend/components/ui/alert-dialog.tsx
Normal file
196
frontend/components/ui/alert-dialog.tsx
Normal file
@@ -0,0 +1,196 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
|
||||||
|
function AlertDialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||||
|
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Overlay
|
||||||
|
data-slot="alert-dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogContent({
|
||||||
|
className,
|
||||||
|
size = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
|
||||||
|
size?: "default" | "sm"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPortal>
|
||||||
|
<AlertDialogOverlay />
|
||||||
|
<AlertDialogPrimitive.Content
|
||||||
|
data-slot="alert-dialog-content"
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</AlertDialogPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogHeader({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-dialog-header"
|
||||||
|
className={cn(
|
||||||
|
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogFooter({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Title
|
||||||
|
data-slot="alert-dialog-title"
|
||||||
|
className={cn(
|
||||||
|
"text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Description
|
||||||
|
data-slot="alert-dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogMedia({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-dialog-media"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogAction({
|
||||||
|
className,
|
||||||
|
variant = "default",
|
||||||
|
size = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
|
||||||
|
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
||||||
|
return (
|
||||||
|
<Button variant={variant} size={size} asChild>
|
||||||
|
<AlertDialogPrimitive.Action
|
||||||
|
data-slot="alert-dialog-action"
|
||||||
|
className={cn(className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogCancel({
|
||||||
|
className,
|
||||||
|
variant = "outline",
|
||||||
|
size = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
|
||||||
|
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
||||||
|
return (
|
||||||
|
<Button variant={variant} size={size} asChild>
|
||||||
|
<AlertDialogPrimitive.Cancel
|
||||||
|
data-slot="alert-dialog-cancel"
|
||||||
|
className={cn(className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogMedia,
|
||||||
|
AlertDialogOverlay,
|
||||||
|
AlertDialogPortal,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
}
|
||||||
95
frontend/lib/api.ts
Normal file
95
frontend/lib/api.ts
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
/**
|
||||||
|
* API helpers for server components (forwards cookies) and client components (credentials: include).
|
||||||
|
*/
|
||||||
|
|
||||||
|
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
|
||||||
|
|
||||||
|
// ─── Server-side fetch (use in Server Components / Route Handlers) ─────────────
|
||||||
|
|
||||||
|
export async function apiFetch<T = unknown>(
|
||||||
|
path: string,
|
||||||
|
init?: RequestInit
|
||||||
|
): Promise<T> {
|
||||||
|
// Dynamic import so this module can also be imported in client components
|
||||||
|
// The `cookies` call only runs on the server side
|
||||||
|
let cookieHeader = "";
|
||||||
|
try {
|
||||||
|
const { cookies } = await import("next/headers");
|
||||||
|
const store = await cookies();
|
||||||
|
cookieHeader = store
|
||||||
|
.getAll()
|
||||||
|
.map((c) => `${c.name}=${c.value}`)
|
||||||
|
.join("; ");
|
||||||
|
} catch {
|
||||||
|
// We're on the client — skip cookie forwarding
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch(`${API_URL}${path}`, {
|
||||||
|
...init,
|
||||||
|
cache: "no-store",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
...(cookieHeader ? { Cookie: cookieHeader } : {}),
|
||||||
|
...(init?.headers as Record<string, string> | undefined),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
let msg = `API error ${res.status}`;
|
||||||
|
try {
|
||||||
|
const body = await res.json();
|
||||||
|
msg = body?.error?.message || body?.message || msg;
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
throw new ApiError(msg, res.status);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Some endpoints return 204 No Content
|
||||||
|
const text = await res.text();
|
||||||
|
if (!text) return undefined as T;
|
||||||
|
return JSON.parse(text) as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Client-side fetch (use in Client Components) ─────────────────────────────
|
||||||
|
|
||||||
|
export async function clientFetch<T = unknown>(
|
||||||
|
path: string,
|
||||||
|
init?: RequestInit
|
||||||
|
): Promise<T> {
|
||||||
|
const res = await fetch(`${API_URL}${path}`, {
|
||||||
|
...init,
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
...(init?.headers as Record<string, string> | undefined),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
let msg = `API error ${res.status}`;
|
||||||
|
try {
|
||||||
|
const body = await res.json();
|
||||||
|
msg = body?.error?.message || body?.message || msg;
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
throw new ApiError(msg, res.status);
|
||||||
|
}
|
||||||
|
|
||||||
|
const text = await res.text();
|
||||||
|
if (!text) return undefined as T;
|
||||||
|
return JSON.parse(text) as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ApiError extends Error {
|
||||||
|
constructor(
|
||||||
|
message: string,
|
||||||
|
public status: number
|
||||||
|
) {
|
||||||
|
super(message);
|
||||||
|
this.name = "ApiError";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { API_URL };
|
||||||
136
frontend/lib/auth.tsx
Normal file
136
frontend/lib/auth.tsx
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
createContext,
|
||||||
|
useCallback,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
|
import { clientFetch, ApiError } from "./api";
|
||||||
|
import { CurrentUser, UserRole } from "./types";
|
||||||
|
|
||||||
|
interface AuthContextValue {
|
||||||
|
currentUser: CurrentUser | null;
|
||||||
|
loading: boolean;
|
||||||
|
login: (email: string, password: string) => Promise<void>;
|
||||||
|
register: (name: string, email: string, password: string) => Promise<void>;
|
||||||
|
logout: () => Promise<void>;
|
||||||
|
refresh: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||||
|
|
||||||
|
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||||
|
const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
/** Decode the JWT access token stored in the browser cookie (non-httpOnly portion).
|
||||||
|
* Since accessToken is httpOnly, we detect auth state by calling a lightweight
|
||||||
|
* authenticated endpoint. If it returns 401 → not logged in. */
|
||||||
|
const refresh = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
// Call GET /blog-posts?pageSize=1 — requires auth. If cookie is valid, returns data.
|
||||||
|
// We only care about the response headers/status here, not the body.
|
||||||
|
const data = await clientFetch<{
|
||||||
|
posts?: unknown[];
|
||||||
|
total?: number;
|
||||||
|
// The JWT payload fields we need come from the cookie;
|
||||||
|
// we parse them via a lightweight /auth/me-style endpoint.
|
||||||
|
// Since we don't have /auth/me, we use the blog-posts endpoint response
|
||||||
|
// and get user info from a separate call to /users (ADMIN only) or just
|
||||||
|
// decode what we need from the refresh token.
|
||||||
|
// Simpler: call GET /blog-posts and use the response to confirm auth,
|
||||||
|
// then store minimal info from localStorage if previously set.
|
||||||
|
}>(
|
||||||
|
"/blog-posts?pageSize=1"
|
||||||
|
);
|
||||||
|
// Auth succeeded — try to restore user from sessionStorage
|
||||||
|
const cached = sessionStorage.getItem("currentUser");
|
||||||
|
if (cached) {
|
||||||
|
setCurrentUser(JSON.parse(cached));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (err instanceof ApiError && err.status === 401) {
|
||||||
|
setCurrentUser(null);
|
||||||
|
sessionStorage.removeItem("currentUser");
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refresh();
|
||||||
|
}, [refresh]);
|
||||||
|
|
||||||
|
const login = useCallback(async (email: string, password: string) => {
|
||||||
|
const data = await clientFetch<{
|
||||||
|
success: boolean;
|
||||||
|
user?: CurrentUser;
|
||||||
|
accessToken?: string;
|
||||||
|
}>("/auth/login", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ email, password }),
|
||||||
|
});
|
||||||
|
// The NestJS login returns { success, accessToken, user } for JSON clients
|
||||||
|
if (data.user) {
|
||||||
|
// Normalize role to uppercase enum
|
||||||
|
const user: CurrentUser = {
|
||||||
|
sub: data.user.sub || (data.user as unknown as { id?: string }).id || "",
|
||||||
|
email: data.user.email,
|
||||||
|
role: (data.user.role as string).toUpperCase() as UserRole,
|
||||||
|
name: data.user.name,
|
||||||
|
};
|
||||||
|
setCurrentUser(user);
|
||||||
|
sessionStorage.setItem("currentUser", JSON.stringify(user));
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const register = useCallback(
|
||||||
|
async (name: string, email: string, password: string) => {
|
||||||
|
const data = await clientFetch<{
|
||||||
|
success: boolean;
|
||||||
|
user?: CurrentUser;
|
||||||
|
}>("/auth/register", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ name, email, password }),
|
||||||
|
});
|
||||||
|
if (data.user) {
|
||||||
|
const user: CurrentUser = {
|
||||||
|
sub: data.user.sub || (data.user as unknown as { id?: string }).id || "",
|
||||||
|
email: data.user.email,
|
||||||
|
role: (data.user.role as string).toUpperCase() as UserRole,
|
||||||
|
name: data.user.name,
|
||||||
|
};
|
||||||
|
setCurrentUser(user);
|
||||||
|
sessionStorage.setItem("currentUser", JSON.stringify(user));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const logout = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
await clientFetch("/auth/logout", { method: "POST" });
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
setCurrentUser(null);
|
||||||
|
sessionStorage.removeItem("currentUser");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider
|
||||||
|
value={{ currentUser, loading, login, register, logout, refresh }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAuth() {
|
||||||
|
const ctx = useContext(AuthContext);
|
||||||
|
if (!ctx) throw new Error("useAuth must be used within AuthProvider");
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
86
frontend/lib/types.ts
Normal file
86
frontend/lib/types.ts
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
export enum PostStatus {
|
||||||
|
DRAFT = "draft",
|
||||||
|
PUBLISHED = "published",
|
||||||
|
ARCHIVED = "archived",
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ContentFormat {
|
||||||
|
MARKDOWN = "markdown",
|
||||||
|
HTML = "html",
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum UserRole {
|
||||||
|
ADMIN = "ADMIN",
|
||||||
|
MANAGER = "MANAGER",
|
||||||
|
MEMBER = "MEMBER",
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface User {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
name?: string;
|
||||||
|
role: UserRole;
|
||||||
|
isActive: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FeaturedImage {
|
||||||
|
url: string;
|
||||||
|
alt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BlogPost {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
status: PostStatus;
|
||||||
|
excerpt: string;
|
||||||
|
content: string;
|
||||||
|
contentFormat: ContentFormat;
|
||||||
|
authorId: string;
|
||||||
|
author?: Pick<User, "id" | "email" | "name" | "role">;
|
||||||
|
featuredImageUrl?: string;
|
||||||
|
featuredImageAlt?: string;
|
||||||
|
isFeatured: boolean;
|
||||||
|
views: number;
|
||||||
|
tags: string[];
|
||||||
|
categories: string[];
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PaginatedResult<T> {
|
||||||
|
items: T[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
totalPages: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TagCloudItem {
|
||||||
|
name: string;
|
||||||
|
count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreatePostDto {
|
||||||
|
title: string;
|
||||||
|
slug?: string;
|
||||||
|
excerpt?: string;
|
||||||
|
content: string;
|
||||||
|
contentFormat?: ContentFormat;
|
||||||
|
status?: PostStatus;
|
||||||
|
featuredImageUrl?: string;
|
||||||
|
featuredImageAlt?: string;
|
||||||
|
isFeatured?: boolean;
|
||||||
|
tags?: string; // comma-separated string
|
||||||
|
categories?: string; // comma-separated string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CurrentUser {
|
||||||
|
sub: string;
|
||||||
|
email: string;
|
||||||
|
role: UserRole;
|
||||||
|
name?: string;
|
||||||
|
iat?: number;
|
||||||
|
exp?: number;
|
||||||
|
}
|
||||||
@@ -1,7 +1,22 @@
|
|||||||
import type { NextConfig } from "next";
|
import type { NextConfig } from "next";
|
||||||
|
import path from "path";
|
||||||
|
|
||||||
const nextConfig: NextConfig = {
|
const nextConfig: NextConfig = {
|
||||||
/* config options here */
|
turbopack: {
|
||||||
|
root: path.resolve(__dirname),
|
||||||
|
},
|
||||||
|
images: {
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "images.unsplash.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "**.unsplash.com",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
export default nextConfig;
|
||||||
|
|||||||
42
frontend/package-lock.json
generated
42
frontend/package-lock.json
generated
@@ -8,10 +8,12 @@
|
|||||||
"name": "frontend",
|
"name": "frontend",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tailwindcss/typography": "^0.5.19",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"lucide-react": "^0.574.0",
|
"lucide-react": "^0.574.0",
|
||||||
|
"marked": "^17.0.3",
|
||||||
"next": "16.1.6",
|
"next": "16.1.6",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"radix-ui": "^1.4.3",
|
"radix-ui": "^1.4.3",
|
||||||
@@ -3757,6 +3759,31 @@
|
|||||||
"tailwindcss": "4.1.18"
|
"tailwindcss": "4.1.18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@tailwindcss/typography": {
|
||||||
|
"version": "0.5.19",
|
||||||
|
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
|
||||||
|
"integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"postcss-selector-parser": "6.0.10"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
|
||||||
|
"version": "6.0.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
|
||||||
|
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"cssesc": "^3.0.0",
|
||||||
|
"util-deprecate": "^1.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@ts-morph/common": {
|
"node_modules/@ts-morph/common": {
|
||||||
"version": "0.27.0",
|
"version": "0.27.0",
|
||||||
"resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.27.0.tgz",
|
"resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.27.0.tgz",
|
||||||
@@ -5390,7 +5417,6 @@
|
|||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bin": {
|
"bin": {
|
||||||
"cssesc": "bin/cssesc"
|
"cssesc": "bin/cssesc"
|
||||||
@@ -8565,6 +8591,18 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.5.5"
|
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/marked": {
|
||||||
|
"version": "17.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/marked/-/marked-17.0.3.tgz",
|
||||||
|
"integrity": "sha512-jt1v2ObpyOKR8p4XaUJVk3YWRJ5n+i4+rjQopxvV32rSndTJXvIzuUdWWIy/1pFQMkQmvTXawzDNqOH/CUmx6A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"marked": "bin/marked.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 20"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/math-intrinsics": {
|
"node_modules/math-intrinsics": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||||
@@ -10888,7 +10926,6 @@
|
|||||||
"version": "4.1.18",
|
"version": "4.1.18",
|
||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
|
||||||
"integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
|
"integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/tapable": {
|
"node_modules/tapable": {
|
||||||
@@ -11453,7 +11490,6 @@
|
|||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/validate-npm-package-name": {
|
"node_modules/validate-npm-package-name": {
|
||||||
|
|||||||
@@ -9,10 +9,12 @@
|
|||||||
"lint": "eslint"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tailwindcss/typography": "^0.5.19",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"lucide-react": "^0.574.0",
|
"lucide-react": "^0.574.0",
|
||||||
|
"marked": "^17.0.3",
|
||||||
"next": "16.1.6",
|
"next": "16.1.6",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"radix-ui": "^1.4.3",
|
"radix-ui": "^1.4.3",
|
||||||
|
|||||||
@@ -10,6 +10,14 @@ import { AppModule } from './app.module';
|
|||||||
async function bootstrap() {
|
async function bootstrap() {
|
||||||
const app = await NestFactory.create<NestExpressApplication>(AppModule);
|
const app = await NestFactory.create<NestExpressApplication>(AppModule);
|
||||||
|
|
||||||
|
// ─── CORS — allow Next.js frontend ──────────────────────────────────────────
|
||||||
|
app.enableCors({
|
||||||
|
origin: process.env.FRONTEND_URL || 'http://localhost:3000',
|
||||||
|
credentials: true,
|
||||||
|
methods: ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'],
|
||||||
|
allowedHeaders: ['Content-Type', 'Authorization', 'x-csrf-token'],
|
||||||
|
});
|
||||||
|
|
||||||
// ─── Static assets ──────────────────────────────────────────────────────────
|
// ─── Static assets ──────────────────────────────────────────────────────────
|
||||||
app.useStaticAssets(join(process.cwd(), 'public'));
|
app.useStaticAssets(join(process.cwd(), 'public'));
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user