npm - create-pxlr - Versions diffs - 1.0.0 - Mend

create-pxlr 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/templates/clean/pxlr-cms/packages/admin/src/app/globals.css ADDED Viewed

@@ -0,0 +1,132 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+/* TipTap editor styles */
+.tiptap {
+  @apply outline-none min-h-[200px] p-4;
+}
+.tiptap p.is-editor-empty:first-child::before {
+  @apply text-muted-foreground pointer-events-none float-left h-0;
+  content: attr(data-placeholder);
+}
+.tiptap h1 {
+  @apply text-3xl font-bold mt-6 mb-4;
+}
+.tiptap h2 {
+  @apply text-2xl font-bold mt-5 mb-3;
+}
+.tiptap h3 {
+  @apply text-xl font-bold mt-4 mb-2;
+}
+.tiptap p {
+  @apply my-2;
+}
+.tiptap ul {
+  @apply list-disc pl-6 my-2;
+}
+.tiptap ol {
+  @apply list-decimal pl-6 my-2;
+}
+.tiptap blockquote {
+  @apply border-l-4 border-muted-foreground/30 pl-4 italic my-4;
+}
+.tiptap code {
+  @apply bg-muted px-1.5 py-0.5 rounded text-sm;
+}
+.tiptap pre {
+  @apply bg-muted p-4 rounded-lg overflow-x-auto my-4;
+}
+.tiptap img {
+  @apply max-w-full h-auto rounded-lg my-4;
+}
+.tiptap a {
+  @apply text-primary underline underline-offset-4;
+}

package/templates/clean/pxlr-cms/packages/admin/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Providers } from '@/components/providers';
+const inter = Inter({ subsets: ['latin', 'cyrillic'] });
+export const metadata: Metadata = {
+  title: 'PXLR CMS',
+  description: 'Self-hosted Headless CMS',
+};
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/templates/clean/pxlr-cms/packages/admin/src/app/login/page.tsx ADDED Viewed

@@ -0,0 +1,119 @@
+'use client';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useAuthStore } from '@/lib/store/auth';
+import { api } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, Box } from 'lucide-react';
+const loginSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+});
+type LoginForm = z.infer<typeof loginSchema>;
+export default function LoginPage() {
+  const router = useRouter();
+  const { setAuth } = useAuthStore();
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginForm>({
+    resolver: zodResolver(loginSchema),
+  });
+  const onSubmit = async (data: LoginForm) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await api.post('/auth/login', data);
+      setAuth(response.token, response.user);
+      router.push('/dashboard');
+    } catch (err: any) {
+      setError(err.message || 'Failed to login');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background to-muted">
+      <div className="w-full max-w-md space-y-8 p-8">
+        <div className="text-center">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+            <Box className="h-8 w-8" />
+          </div>
+          <h1 className="mt-6 text-3xl font-bold tracking-tight">PXLR CMS</h1>
+          <p className="mt-2 text-muted-foreground">
+            Sign in to your admin panel
+          </p>
+        </div>
+        <form onSubmit={handleSubmit(onSubmit)} className="mt-8 space-y-6">
+          <div className="space-y-4 rounded-lg border bg-card p-6 shadow-sm">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="admin@pxlr.local"
+                {...register('email')}
+                className={errors.email ? 'border-destructive' : ''}
+              />
+              {errors.email && (
+                <p className="text-sm text-destructive">{errors.email.message}</p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="••••••••"
+                {...register('password')}
+                className={errors.password ? 'border-destructive' : ''}
+              />
+              {errors.password && (
+                <p className="text-sm text-destructive">{errors.password.message}</p>
+              )}
+            </div>
+            {error && (
+              <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                'Sign in'
+              )}
+            </Button>
+          </div>
+        </form>
+        <p className="text-center text-sm text-muted-foreground">
+          Default credentials: admin@pxlr.local / admin123
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/clean/pxlr-cms/packages/admin/src/app/media/layout.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+'use client';
+import { AuthLayout } from '@/components/layout/auth-layout';
+export default function MediaLayout({ children }: { children: React.ReactNode }) {
+  return <AuthLayout>{children}</AuthLayout>;
+}

package/templates/clean/pxlr-cms/packages/admin/src/app/media/page.tsx ADDED Viewed

@@ -0,0 +1,362 @@
+'use client';
+import { useState, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useDropzone } from 'react-dropzone';
+import { api } from '@/lib/api';
+import { formatDate, formatBytes } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n/context';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { toast } from '@/components/ui/use-toast';
+import {
+  Upload,
+  Images,
+  Trash2,
+  Loader2,
+  Search,
+  Grid,
+  List,
+  Copy,
+  Check,
+  X,
+  Code,
+  ExternalLink
+} from 'lucide-react';
+interface MediaFile {
+  id: string;
+  filename: string;
+  original_filename: string;
+  mime_type: string;
+  size_bytes: number;
+  width?: number;
+  height?: number;
+  url: string;
+  thumbnail_url?: string;
+  alt_text?: string;
+  created_at: string;
+}
+// Fix URL for browser access (convert internal Docker URLs to external)
+function getPublicUrl(url: string): string {
+  if (!url) return '';
+  // Replace internal Docker minio URL with external
+  return url
+    .replace('http://minio:9000', 'http://localhost:9010')
+    .replace('http://localhost:9000', 'http://localhost:9010');
+}
+export default function MediaPage() {
+  const queryClient = useQueryClient();
+  const { t, locale } = useI18n();
+  const [search, setSearch] = useState('');
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [isUploading, setIsUploading] = useState(false);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<MediaFile | null>(null);
+  const { data, isLoading } = useQuery({
+    queryKey: ['media', search],
+    queryFn: () =>
+      api.get(`/media?${search ? `search=${search}&` : ''}limit=50`),
+  });
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => api.delete(`/media/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['media'] });
+      toast({ title: locale === 'ru' ? 'Файл удалён' : 'File deleted successfully' });
+      setSelectedFile(null);
+    },
+    onError: (error: any) => {
+      toast({ title: 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+  const onDrop = useCallback(async (acceptedFiles: File[]) => {
+    setIsUploading(true);
+    try {
+      for (const file of acceptedFiles) {
+        await api.upload('/media/upload', file);
+      }
+      queryClient.invalidateQueries({ queryKey: ['media'] });
+      toast({
+        title: locale === 'ru'
+          ? `${acceptedFiles.length} файл(ов) загружено`
+          : `${acceptedFiles.length} file(s) uploaded successfully`
+      });
+    } catch (error: any) {
+      toast({ title: locale === 'ru' ? 'Ошибка загрузки' : 'Upload failed', description: error.message, variant: 'destructive' });
+    } finally {
+      setIsUploading(false);
+    }
+  }, [queryClient, locale]);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'],
+      'video/*': ['.mp4', '.webm'],
+      'application/pdf': ['.pdf'],
+    },
+  });
+  const copyUrl = (url: string, id: string) => {
+    const publicUrl = getPublicUrl(url);
+    navigator.clipboard.writeText(publicUrl);
+    setCopiedId(id);
+    toast({ title: locale === 'ru' ? 'URL скопирован!' : 'URL copied!' });
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+  const files: MediaFile[] = data?.files || [];
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">{t('media.title')}</h1>
+          <p className="text-muted-foreground">
+            {t('media.subtitle')}
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant={viewMode === 'grid' ? 'default' : 'outline'}
+            size="icon"
+            onClick={() => setViewMode('grid')}
+          >
+            <Grid className="h-4 w-4" />
+          </Button>
+          <Button
+            variant={viewMode === 'list' ? 'default' : 'outline'}
+            size="icon"
+            onClick={() => setViewMode('list')}
+          >
+            <List className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+      <div
+        {...getRootProps()}
+        className={`flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 transition-colors ${
+          isDragActive ? 'border-primary bg-primary/5' : 'border-muted-foreground/25'
+        }`}
+      >
+        <input {...getInputProps()} />
+        {isUploading ? (
+          <Loader2 className="h-10 w-10 animate-spin text-muted-foreground" />
+        ) : (
+          <Upload className="h-10 w-10 text-muted-foreground" />
+        )}
+        <p className="mt-2 text-sm text-muted-foreground">
+          {isDragActive
+            ? (locale === 'ru' ? 'Отпустите файлы...' : 'Drop files here...')
+            : t('media.dragDrop')}
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {locale === 'ru' ? 'Изображения, видео и PDF до 100MB' : 'Images, videos, and PDFs up to 100MB'}
+        </p>
+      </div>
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder={locale === 'ru' ? 'Поиск файлов...' : 'Search files...'}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      ) : files.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12">
+          <Images className="h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-4 text-lg font-semibold">{t('media.noFiles')}</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {t('media.uploadFirst')}
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+          {files.map((file) => (
+            <div
+              key={file.id}
+              className="group relative rounded-lg border bg-card overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary"
+              onClick={() => setSelectedFile(file)}
+            >
+              <div className="aspect-square bg-muted">
+                {file.mime_type.startsWith('image/') ? (
+                  <img
+                    src={getPublicUrl(file.thumbnail_url || file.url)}
+                    alt={file.alt_text || file.original_filename}
+                    className="h-full w-full object-cover"
+                    onError={(e) => {
+                      // Fallback if image fails to load
+                      (e.target as HTMLImageElement).style.display = 'none';
+                    }}
+                  />
+                ) : (
+                  <div className="flex h-full items-center justify-center">
+                    <Images className="h-12 w-12 text-muted-foreground" />
+                  </div>
+                )}
+              </div>
+              <div className="p-2">
+                <p className="truncate text-sm font-medium">
+                  {file.original_filename}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {formatBytes(file.size_bytes)}
+                </p>
+              </div>
+              <div className="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                <Button
+                  variant="secondary"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    copyUrl(file.url, file.id);
+                  }}
+                >
+                  {copiedId === file.id ? (
+                    <Check className="h-4 w-4" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+                <Button
+                  variant="destructive"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    deleteMutation.mutate(file.id);
+                  }}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      {/* Selected File Modal */}
+      {selectedFile && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setSelectedFile(null)}>
+          <div className="bg-card rounded-lg shadow-xl max-w-3xl w-full mx-4 max-h-[90vh] overflow-auto" onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center justify-between p-4 border-b">
+              <h2 className="text-lg font-semibold">{selectedFile.original_filename}</h2>
+              <Button variant="ghost" size="icon" onClick={() => setSelectedFile(null)}>
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="p-4 space-y-4">
+              {/* Preview */}
+              {selectedFile.mime_type.startsWith('image/') && (
+                <div className="bg-muted rounded-lg overflow-hidden">
+                  <img
+                    src={getPublicUrl(selectedFile.url)}
+                    alt={selectedFile.alt_text || selectedFile.original_filename}
+                    className="max-h-64 w-full object-contain"
+                  />
+                </div>
+              )}
+              {/* Info */}
+              <div className="grid gap-2 text-sm">
+                <div className="flex justify-between py-2 border-b">
+                  <span className="text-muted-foreground">{locale === 'ru' ? 'Размер' : 'Size'}</span>
+                  <span>{formatBytes(selectedFile.size_bytes)}</span>
+                </div>
+                <div className="flex justify-between py-2 border-b">
+                  <span className="text-muted-foreground">{locale === 'ru' ? 'Тип' : 'Type'}</span>
+                  <span>{selectedFile.mime_type}</span>
+                </div>
+                {selectedFile.width && selectedFile.height && (
+                  <div className="flex justify-between py-2 border-b">
+                    <span className="text-muted-foreground">{locale === 'ru' ? 'Размеры' : 'Dimensions'}</span>
+                    <span>{selectedFile.width} x {selectedFile.height}</span>
+                  </div>
+                )}
+                <div className="flex justify-between py-2 border-b">
+                  <span className="text-muted-foreground">{locale === 'ru' ? 'Загружен' : 'Uploaded'}</span>
+                  <span>{formatDate(selectedFile.created_at)}</span>
+                </div>
+              </div>
+              {/* URL */}
+              <div className="space-y-2">
+                <label className="text-sm font-medium">URL</label>
+                <div className="flex gap-2">
+                  <Input
+                    value={getPublicUrl(selectedFile.url)}
+                    readOnly
+                    className="font-mono text-xs"
+                  />
+                  <Button
+                    variant="outline"
+                    onClick={() => copyUrl(selectedFile.url, selectedFile.id)}
+                  >
+                    {copiedId === selectedFile.id ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => window.open(getPublicUrl(selectedFile.url), '_blank')}
+                  >
+                    <ExternalLink className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+              {/* Code Usage */}
+              <div className="rounded-lg border bg-muted/30 p-4">
+                <div className="flex items-center gap-2 mb-3">
+                  <Code className="h-4 w-4" />
+                  <span className="font-medium">
+                    {locale === 'ru' ? 'Использование в Next.js' : 'Usage in Next.js'}
+                  </span>
+                </div>
+                <pre className="text-xs bg-muted p-3 rounded overflow-x-auto">
+{`// В компоненте React/Next.js
+<Image
+  src="${getPublicUrl(selectedFile.url)}"
+  alt="${selectedFile.alt_text || selectedFile.original_filename}"
+  width={${selectedFile.width || 800}}
+  height={${selectedFile.height || 600}}
+/>
+// Или как background
+<div style={{ backgroundImage: 'url(${getPublicUrl(selectedFile.url)})' }} />
+// В inline style
+style={{ backgroundImage: \`url(\${imageUrl})\` }}`}
+                </pre>
+              </div>
+              {/* Actions */}
+              <div className="flex gap-2 pt-4 border-t">
+                <Button
+                  variant="destructive"
+                  onClick={() => deleteMutation.mutate(selectedFile.id)}
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  {locale === 'ru' ? 'Удалить' : 'Delete'}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}