@jhits/plugin-content 0.0.14 → 0.0.16

package/src/api/files.ts

@@ -0,0 +1,192 @@
+/**
+ * Files API Handler
+ * Handles uploading and managing general files
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { writeFile, mkdir, unlink, readFile } from 'fs/promises';
+import path from 'path';
+import { randomBytes } from 'crypto';
+
+export interface FilesApiConfig {
+    getDb: () => Promise<{ db: () => any }>;
+}
+
+const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+
+async function ensureUploadsDir() {
+    try {
+        await mkdir(uploadsDir, { recursive: true });
+    } catch (error) {
+        // Directory might already exist
+    }
+}
+
+/**
+ * GET /api/plugin-content/files - List all files
+ */
+export async function GET(req: NextRequest, config: FilesApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const siteId = url.searchParams.get('siteId') || 'default';
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const files = db.collection('files');
+
+        const data = await files.find({ siteId }).sort({ uploadedAt: -1 }).toArray();
+
+        return NextResponse.json({ files: data });
+    } catch (err: any) {
+        console.error('[FilesAPI] GET error:', err);
+        return NextResponse.json(
+            { error: 'Failed to fetch files', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-content/files/upload - Upload a file
+ */
+export async function UPLOAD(req: NextRequest, config: FilesApiConfig): Promise<NextResponse> {
+    try {
+        await ensureUploadsDir();
+
+        const formData = await req.formData();
+        const file = formData.get('file') as File;
+        const siteId = (formData.get('siteId') as string) || 'default';
+
+        if (!file) {
+            return NextResponse.json({ error: 'No file provided' }, { status: 400 });
+        }
+
+        // Generate unique filename
+        const ext = path.extname(file.name);
+        const uniqueId = randomBytes(16).toString('hex');
+        const timestamp = Date.now();
+        const uniqueFilename = `${timestamp}-${uniqueId}${ext}`;
+        const filePath = path.join(uploadsDir, uniqueFilename);
+
+        // Save file
+        const bytes = await file.arrayBuffer();
+        const buffer = Buffer.from(bytes);
+        await writeFile(filePath, buffer);
+
+        const fileMetadata = {
+            id: uniqueFilename,
+            filename: file.name,
+            url: `/api/plugin-content/files/download?id=${uniqueFilename}`, // Point to our own download endpoint
+            size: file.size,
+            mimeType: file.type,
+            siteId,
+            uploadedAt: new Date().toISOString(),
+        };
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const files = db.collection('files');
+
+        await files.insertOne(fileMetadata);
+
+        return NextResponse.json({
+            success: true,
+            file: fileMetadata,
+        });
+    } catch (err: any) {
+        console.error('[FilesAPI] UPLOAD error:', err);
+        return NextResponse.json(
+            { error: 'Failed to upload file', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * GET /api/plugin-content/files/download - Download a file
+ */
+export async function DOWNLOAD(req: NextRequest, config: FilesApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const id = url.searchParams.get('id');
+        const download = url.searchParams.get('download') === 'true';
+
+        if (!id) {
+            return NextResponse.json({ error: 'ID is required' }, { status: 400 });
+        }
+
+        // Security: Prevent directory traversal
+        const sanitizedFilename = path.basename(id);
+        const filePath = path.join(uploadsDir, sanitizedFilename);
+
+        const fileBuffer = await readFile(filePath);
+
+        // Determine content type
+        const ext = path.extname(filePath).toLowerCase();
+        let contentType = 'application/octet-stream';
+        if (ext === '.pdf') contentType = 'application/pdf';
+        else if (ext === '.png') contentType = 'image/png';
+        else if (ext === '.jpg' || ext === '.jpeg') contentType = 'image/jpeg';
+        else if (ext === '.webp') contentType = 'image/webp';
+        else if (ext === '.svg') contentType = 'image/svg+xml';
+
+        const headers: Record<string, string> = {
+            'Content-Type': contentType,
+            'Cache-Control': 'public, max-age=31536000, immutable',
+        };
+
+        if (download) {
+            headers['Content-Disposition'] = `attachment; filename="${sanitizedFilename}"`;
+        }
+
+        return new NextResponse(fileBuffer, {
+            headers: headers,
+        });
+    } catch (err: any) {
+        console.error('[FilesAPI] DOWNLOAD error:', err);
+        return new NextResponse('File not found', { status: 404 });
+    }
+}
+
+/**
+ * DELETE /api/plugin-content/files - Delete a file
+ */
+export async function DELETE(req: NextRequest, config: FilesApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const siteId = url.searchParams.get('siteId') || 'default';
+        const id = url.searchParams.get('id');
+
+        if (!id) {
+            return NextResponse.json({ error: 'ID is required' }, { status: 400 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const files = db.collection('files');
+
+        const fileDoc = await files.findOne({ siteId, id });
+        if (!fileDoc) {
+            return NextResponse.json({ error: 'File not found' }, { status: 404 });
+        }
+
+        // Delete from filesystem
+        const filePath = path.join(uploadsDir, fileDoc.id);
+        try {
+            await unlink(filePath);
+        } catch (err) {
+            console.warn(`[FilesAPI] File could not be deleted from disk: ${filePath}`, err);
+        }
+
+        // Delete from database
+        await files.deleteOne({ siteId, id });
+
+        return NextResponse.json({ success: true });
+    } catch (err: any) {
+        console.error('[FilesAPI] DELETE error:', err);
+        return NextResponse.json(
+            { error: 'Failed to delete file', detail: err.message },
+            { status: 500 }
+        );
+    }
+}

package/src/api/handler.ts

@@ -14,6 +14,8 @@ import * as path from 'path';
 export interface ContentApiConfig {
     /** Directory where locale files are stored (default: 'data/locales') */
     localesDir?: string;
+    /** MongoDB client promise */
+    getDb?: () => Promise<{ db: () => any }>;
 }
 
 /**

package/src/api/links.ts

@@ -0,0 +1,107 @@
+/**
+ * Links API Handler
+ * Handles global, localized links and buttons
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+export interface LinksApiConfig {
+    getDb: () => Promise<{ db: () => any }>;
+}
+
+/**
+ * GET /api/plugin-content/links - List all links
+ */
+export async function GET(req: NextRequest, config: LinksApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const siteId = url.searchParams.get('siteId') || 'default';
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const links = db.collection('links');
+
+        const data = await links.find({ siteId }).toArray();
+
+        return NextResponse.json({ links: data });
+    } catch (err: any) {
+        console.error('[LinksAPI] GET error:', err);
+        return NextResponse.json(
+            { error: 'Failed to fetch links', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-content/links - Save a link
+ */
+export async function POST(req: NextRequest, config: LinksApiConfig): Promise<NextResponse> {
+    try {
+        const body = await req.json();
+        const { siteId = 'default', link } = body;
+
+        if (!link || !link.key) {
+            return NextResponse.json({ error: 'Link key is required' }, { status: 400 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const links = db.collection('links');
+
+        // Update or insert
+        const updatedLink = {
+            ...link,
+            siteId,
+            updatedAt: new Date(),
+        };
+
+        // Remove _id from link before update to avoid immutable field error if it's a string
+        const { _id, ...linkData } = updatedLink;
+
+        await links.updateOne(
+            { siteId, key: link.key },
+            { $set: linkData },
+            { upsert: true }
+        );
+
+        const savedLink = await links.findOne({ siteId, key: link.key });
+
+        return NextResponse.json({ success: true, link: savedLink });
+    } catch (err: any) {
+        console.error('[LinksAPI] POST error:', err);
+        return NextResponse.json(
+            { error: 'Failed to save link', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * DELETE /api/plugin-content/links - Delete a link
+ */
+export async function DELETE(req: NextRequest, config: LinksApiConfig): Promise<NextResponse> {
+    try {
+        const url = new URL(req.url);
+        const siteId = url.searchParams.get('siteId') || 'default';
+        const key = url.searchParams.get('key');
+
+        if (!key) {
+            return NextResponse.json({ error: 'Key is required' }, { status: 400 });
+        }
+
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const links = db.collection('links');
+
+        await links.deleteOne({ siteId, key });
+
+        return NextResponse.json({ success: true });
+    } catch (err: any) {
+        console.error('[LinksAPI] DELETE error:', err);
+        return NextResponse.json(
+            { error: 'Failed to delete link', detail: err.message },
+            { status: 500 }
+        );
+    }
+}

package/src/api/router.ts

@@ -12,8 +12,12 @@ import { NextRequest, NextResponse } from 'next/server';
 import { POST as SaveHandler } from './handler';
 
 export interface ContentApiRouterConfig {
+    /** MongoDB client promise - should return { db: () => Database } */
+    getDb: () => Promise<{ db: () => any }>;
     /** Directory where locale files are stored (default: 'data/locales') */
     localesDir?: string;
+    /** Site ID for multi-site setups */
+    siteId?: string;
 }
 
 /**
@@ -35,17 +39,44 @@ export async function handleContentApi(
         // Route: /api/plugin-content/save
         if (route === 'save') {
             if (method === 'POST') {
-                return await SaveHandler(req, config);
+                return await SaveHandler(req, { localesDir: config.localesDir });
+            }
+        }
+        // Route: /api/plugin-content/links
+        else if (route === 'links') {
+            const linksModule = await import('./links');
+            if (method === 'GET') {
+                return await linksModule.GET(req, { getDb: config.getDb });
+            }
+            if (method === 'POST') {
+                return await linksModule.POST(req, { getDb: config.getDb });
+            }
+            if (method === 'DELETE') {
+                return await linksModule.DELETE(req, { getDb: config.getDb });
+            }
+        }
+        // Route: /api/plugin-content/files
+        else if (route === 'files') {
+            const filesModule = await import('./files');
+            const subRoute = safePath.length > 1 ? safePath[1] : '';
+
+            if (subRoute === 'upload' && method === 'POST') {
+                return await filesModule.UPLOAD(req, { getDb: config.getDb });
+            }
+            if (subRoute === 'download' && method === 'GET') {
+                return await filesModule.DOWNLOAD(req, { getDb: config.getDb });
+            }
+            if (method === 'GET') {
+                return await filesModule.GET(req, { getDb: config.getDb });
+            }
+            if (method === 'DELETE') {
+                return await filesModule.DELETE(req, { getDb: config.getDb });
             }
-            return NextResponse.json(
-                { error: `Method ${method} not allowed for route: save` },
-                { status: 405 }
-            );
         }
 
         // Route not found
         return NextResponse.json(
-            { error: `Route not found: ${route || '/'}` },
+            { error: `Route not found: ${route || '/'}${safePath.length > 1 ? '/' + safePath[1] : ''}` },
             { status: 404 }
         );
     } catch (error: any) {

package/src/components/DynamicLink.tsx

@@ -0,0 +1,152 @@
+/**
+ * Dynamic Link Component
+ * Localized link with right-click settings for admins
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useLinks } from '../hooks/useLinks';
+import { LinkSettingsModal } from './LinkSettingsModal';
+import Link from 'next/link';
+
+interface DynamicLinkProps {
+    linkKey: string;
+    siteId?: string;
+    locale: string;
+    defaultLabel: string;
+    defaultTarget: string;
+    defaultType?: 'url' | 'file';
+    className?: string;
+    isAdmin?: boolean;
+    apiBaseUrl?: string;
+    /** Whether to use a button element instead of <a>/Link (useful for scroll actions) */
+    isButton?: boolean;
+    /** Click handler for button type */
+    onClick?: (target: string) => void;
+    children?: (data: { label: string; target: string; type: 'url' | 'file' }) => React.ReactNode;
+}
+
+export function DynamicLink({
+    linkKey,
+    siteId = 'default',
+    locale,
+    defaultLabel,
+    defaultTarget,
+    defaultType = 'url',
+    className = '',
+    isAdmin = false,
+    apiBaseUrl,
+    isButton = false,
+    onClick,
+    children
+}: DynamicLinkProps) {
+    const { getLink, refetch } = useLinks(siteId, apiBaseUrl);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+
+    const linkData = getLink(linkKey, locale) || {
+        label: defaultLabel,
+        target: defaultTarget,
+        type: defaultType
+    };
+
+    const handleContextMenu = (e: React.MouseEvent) => {
+        if (isAdmin) {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsModalOpen(true);
+        }
+    };
+
+    const handleSaveSuccess = () => {
+        if (refetch) refetch();
+    };
+
+    const isExternal = linkData.target.startsWith('http') || linkData.type === 'file';
+    const isScroll = linkData.target.startsWith('#');
+    
+    // Render content
+    const content = children ? children(linkData) : linkData.label;
+
+    // Use a wrapper that is invisible to layout when not admin
+    // When admin, we need relative for the HUD tooltip
+    // We also pass through the className to the wrapper if admin to preserve flex/grid item behavior
+    const wrapperClass = isAdmin ? `relative ${className}` : 'contents';
+    
+    // When not admin, the className is on the link itself
+    // When admin, the wrapper has the main classes, and the link is just a transparent overlay
+    const linkClass = isAdmin ? "w-full h-full flex items-center justify-center bg-transparent border-none p-0 m-0 text-inherit font-inherit cursor-pointer outline-none" : className;
+
+    const renderLink = () => {
+        if (isScroll || isButton) {
+            return (
+                <button
+                    type="button"
+                    onClick={(e) => {
+                        if (isScroll) {
+                            const targetId = linkData.target.replace('#', '');
+                            const element = document.getElementById(targetId);
+                            if (element) {
+                                element.scrollIntoView({ behavior: 'smooth' });
+                            }
+                        }
+                        if (onClick) onClick(linkData.target);
+                    }}
+                    className={linkClass}
+                >
+                    {content}
+                </button>
+            );
+        }
+
+        if (isExternal) {
+            return (
+                <a
+                    href={linkData.target}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={linkClass}
+                >
+                    {content}
+                </a>
+            );
+        }
+
+        return (
+            <Link href={linkData.target as any} className={linkClass}>
+                {content}
+            </Link>
+        );
+    };
+
+    return (
+        <>
+            <div 
+                onContextMenu={handleContextMenu}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                className={wrapperClass}
+            >
+                {isAdmin && isHovered && (
+                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-primary text-white text-[8px] font-black uppercase px-2 py-1 rounded shadow-xl z-[1000] pointer-events-none whitespace-nowrap">
+                        Right-click to edit link
+                    </div>
+                )}
+
+                {renderLink()}
+            </div>
+
+            <LinkSettingsModal
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                linkKey={linkKey}
+                siteId={siteId}
+                locale={locale}
+                initialData={linkData}
+                onSaveSuccess={handleSaveSuccess}
+                apiBaseUrl={apiBaseUrl}
+            />
+        </>
+    );
+}