feat: Add admin pages for article and team member management with new utility functions.

Author: Llewellyn500

app/admin/articles/[id]/page.tsx

@@ -13,7 +13,7 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { useToast } from "@/hooks/use-toast"
 import { Breadcrumb } from "@/components/breadcrumb"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { formatDate } from "@/lib/utils"
+import { formatDate, sanitizeUrl } from "@/lib/utils"
 import { Loader2, AlertTriangle } from "lucide-react"
 import { MarkdownToolbar } from "@/components/markdown-toolbar"
 import { Switch } from "@/components/ui/switch"
@@ -323,7 +323,7 @@ export default function EditArticlePage() {
             <div className="mt-4">
               <p className="font-medium mb-2">Image Preview:</p>
               <img
-                src={img || "/placeholder.svg"}
+                src={sanitizeUrl(img) || "/placeholder.svg"}
                 alt={imgAlt || "Image Preview"}
                 className="max-h-64 object-contain border border-white/20"
                 onError={(e) => {

app/admin/articles/new/page.tsx

@@ -15,7 +15,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Loader2 } from "lucide-react"
 import { marked } from "marked"
 import DOMPurify from "dompurify"
-import { generateSlugFromTitle } from "@/lib/utils"
+import { generateSlugFromTitle, sanitizeUrl } from "@/lib/utils"
 import { MarkdownToolbar } from "@/components/markdown-toolbar"
 
 // Type for an author document
@@ -348,7 +348,7 @@ export default function NewArticlePage() {
             <div className="mt-4">
               <p className="font-medium mb-2">Image Preview:</p>
               <img
-                src={img || "/placeholder.svg"}
+                src={sanitizeUrl(img) || "/placeholder.svg"}
                 alt={imgAlt || "Image Preview"}
                 className="max-h-64 object-contain border border-white/20"
                 onError={(e) => {

app/admin/team/[id]/page.tsx

@@ -13,6 +13,7 @@ import { Input } from "@/components/ui/input"
 import { useToast } from "@/hooks/use-toast"
 import { Breadcrumb } from "@/components/breadcrumb"
 import { Loader2, AlertTriangle, RefreshCw, Plus, X } from "lucide-react"
+import { sanitizeUrl } from "@/lib/utils"
 
 interface Member {
   name: string
@@ -304,7 +305,7 @@ export default function EditTeamMemberPage() {
                 <div className="w-40 h-40 rounded-none overflow-hidden flex items-center justify-center border border-white/20">
                   {avatarPreview ? (
                     <img
-                      src={avatarPreview || "/placeholder.svg"}
+                      src={sanitizeUrl(avatarPreview) || "/placeholder.svg"}
                       alt={member.imgAlt || member.name}
                       className="w-full h-full object-cover"
                       onError={(e) => {

app/admin/team/new/page.tsx

@@ -10,7 +10,7 @@ import { Input } from "@/components/ui/input"
 import { useToast } from "@/hooks/use-toast"
 import { Breadcrumb } from "@/components/breadcrumb"
 import { Loader2, AlertTriangle, RefreshCw, Plus, X, UserCircle } from "lucide-react"
-import { generateSlugFromTitle } from "@/lib/utils"
+import { generateSlugFromTitle, sanitizeUrl } from "@/lib/utils"
 
 export default function NewTeamMemberPage() {
   const [role, setRole] = useState("")
@@ -268,7 +268,7 @@ export default function NewTeamMemberPage() {
                 <div className="w-40 h-40 rounded-none overflow-hidden flex items-center justify-center border border-white/20">
                   {avatar ? (
                     <img
-                      src={avatar || "/placeholder.svg"}
+                      src={sanitizeUrl(avatar) || "/placeholder.svg"}
                       alt={imgAlt || "Profile preview"}
                       className="w-full h-full object-cover"
                       onError={(e) => {

lib/utils.ts

@@ -38,3 +38,20 @@ export function generateSlugFromTitle(title: string): string {
     .trim()
 }
 
+export function sanitizeUrl(url: string): string {
+  if (!url) return ""
+  const trimmed = url.trim()
+  
+  // Allow relative paths
+  if (trimmed.startsWith("/") || trimmed.startsWith("./") || trimmed.startsWith("../")) {
+    return trimmed
+  }
+
+  try {
+    const parsed = new URL(trimmed)
+    return ["http:", "https:"].includes(parsed.protocol) ? trimmed : ""
+  } catch {
+    return ""
+  }
+}
+