create-pxlr 1.0.0

package/templates/blog/frontend/app/blog/page.tsx

@@ -0,0 +1,102 @@
+import Link from 'next/link';
+import { getBlogPosts } from '@/app/lib/cms';
+
+export const revalidate = 60;
+
+export default async function BlogPage() {
+  const posts = await getBlogPosts();
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-12">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">Блог</h1>
+        <p className="text-xl text-gray-600">
+          Последние новости, статьи и обновления
+        </p>
+      </div>
+
+      {posts.length === 0 ? (
+        <div className="text-center py-12">
+          <div className="text-gray-400 text-6xl mb-4">📝</div>
+          <h2 className="text-xl font-semibold text-gray-600 mb-2">
+            Записей пока нет
+          </h2>
+          <p className="text-gray-500">
+            Скоро здесь появятся интересные статьи
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {posts.map((post) => (
+            <article
+              key={post.id}
+              className="bg-white rounded-2xl border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow"
+            >
+              {post.data.image?.url ? (
+                <div className="aspect-video bg-gray-100">
+                  <img
+                    src={post.data.image.url}
+                    alt={post.data.image.alt || post.data.title}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              ) : (
+                <div className="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
+                  <span className="text-4xl">📄</span>
+                </div>
+              )}
+              <div className="p-6">
+                <div className="flex items-center gap-2 text-sm text-gray-500 mb-3">
+                  {post.data.publishedAt && (
+                    <time dateTime={post.data.publishedAt}>
+                      {new Date(post.data.publishedAt).toLocaleDateString('ru-RU', {
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                      })}
+                    </time>
+                  )}
+                  {post.data.author && (
+                    <>
+                      <span>•</span>
+                      <span>{post.data.author}</span>
+                    </>
+                  )}
+                </div>
+                <Link href={`/blog/${post.data.slug}`}>
+                  <h2 className="text-xl font-semibold text-gray-900 mb-2 hover:text-blue-600 transition-colors">
+                    {post.data.title}
+                  </h2>
+                </Link>
+                {post.data.excerpt && (
+                  <p className="text-gray-600 line-clamp-3">
+                    {post.data.excerpt}
+                  </p>
+                )}
+                <Link
+                  href={`/blog/${post.data.slug}`}
+                  className="inline-flex items-center mt-4 text-blue-600 font-medium hover:text-blue-700"
+                >
+                  Читать далее
+                  <svg
+                    className="ml-1 w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </Link>
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/blog/frontend/app/components/footer.tsx

@@ -0,0 +1,21 @@
+export function Footer() {
+  return (
+    <footer className="bg-gray-50 border-t border-gray-200 mt-auto">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+          <div className="flex items-center gap-2">
+            <div className="w-6 h-6 bg-black rounded flex items-center justify-center">
+              <span className="text-white font-bold text-xs">P</span>
+            </div>
+            <span className="text-gray-600 text-sm">
+              Создано с помощью PXLR CMS
+            </span>
+          </div>
+          <div className="text-gray-500 text-sm">
+            © {new Date().getFullYear()} Все права защищены
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/blog/frontend/app/components/header.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+
+const navigation = [
+  { name: 'Главная', href: '/' },
+  { name: 'Блог', href: '/blog' },
+];
+
+export function Header() {
+  return (
+    <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
+      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16">
+          <div className="flex items-center">
+            <Link href="/" className="flex items-center gap-2">
+              <div className="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
+                <span className="text-white font-bold text-sm">P</span>
+              </div>
+              <span className="font-semibold text-xl">PXLR</span>
+            </Link>
+          </div>
+
+          <div className="flex items-center space-x-8">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
+              >
+                {item.name}
+              </Link>
+            ))}
+            <a
+              href="http://localhost:3333"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-black text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-800 transition-colors"
+            >
+              Админка
+            </a>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+}

package/templates/blog/frontend/app/globals.css

@@ -0,0 +1,30 @@
+@import "tailwindcss";
+
+/* Only scan app folder, exclude pxlr-cms */
+@source "../app/**/*.{js,ts,jsx,tsx}";
+@source "../components/**/*.{js,ts,jsx,tsx}";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

package/templates/blog/frontend/app/layout.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Header } from "./components/header";
+import { Footer } from "./components/footer";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "PXLR Site",
+  description: "Сайт на базе PXLR CMS",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ru">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
+      >
+        <Header />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </body>
+    </html>
+  );
+}

package/templates/blog/frontend/app/lib/cms.ts

@@ -0,0 +1,71 @@
+const API_URL = process.env.NEXT_PUBLIC_CMS_API_URL || 'http://localhost:4000';
+
+export interface BlogPost {
+  id: string;
+  schema_name: string;
+  data: {
+    title: string;
+    slug: string;
+    excerpt?: string;
+    content?: string;
+    image?: { url: string; alt?: string };
+    publishedAt?: string;
+    author?: string;
+  };
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ApiResponse<T> {
+  documents?: T[];
+  document?: T;
+  pagination?: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+  };
+}
+
+// Получить все записи блога (только опубликованные)
+export async function getBlogPosts(): Promise<BlogPost[]> {
+  try {
+    const res = await fetch(`${API_URL}/content?schema=blog&status=published&limit=50`, {
+      next: { revalidate: 60 },
+    });
+    const data: ApiResponse<BlogPost> = await res.json();
+    return data.documents || [];
+  } catch (error) {
+    console.error('Failed to fetch blog posts:', error);
+    return [];
+  }
+}
+
+// Получить пост по slug (только опубликованные)
+export async function getBlogPostBySlug(slug: string): Promise<BlogPost | null> {
+  try {
+    const res = await fetch(`${API_URL}/content?schema=blog&status=published&limit=50`, {
+      next: { revalidate: 60 },
+    });
+    const data: ApiResponse<BlogPost> = await res.json();
+    const post = data.documents?.find((p) => p.data.slug === slug);
+    return post || null;
+  } catch (error) {
+    console.error('Failed to fetch blog post:', error);
+    return null;
+  }
+}
+
+// Получить пост по ID
+export async function getBlogPostById(id: string): Promise<BlogPost | null> {
+  try {
+    const res = await fetch(`${API_URL}/content/${id}`, {
+      next: { revalidate: 60 },
+    });
+    const data = await res.json();
+    return data.document || null;
+  } catch (error) {
+    console.error('Failed to fetch blog post:', error);
+    return null;
+  }
+}

package/templates/blog/frontend/app/page.tsx

@@ -0,0 +1,155 @@
+import Link from 'next/link';
+import { getBlogPosts } from '@/app/lib/cms';
+
+export const revalidate = 60;
+
+export default async function HomePage() {
+  const posts = await getBlogPosts();
+  const latestPosts = posts.slice(0, 3);
+
+  return (
+    <div>
+      {/* Hero Section */}
+      <section className="bg-gradient-to-br from-gray-900 to-gray-800 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+          <div className="max-w-3xl">
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">
+              Добро пожаловать в{' '}
+              <span className="text-blue-400">PXLR</span>
+            </h1>
+            <p className="text-xl text-gray-300 mb-8">
+              Современный сайт, созданный с помощью собственной CMS. 
+              Полный контроль над контентом, без зависимости от облачных сервисов.
+            </p>
+            <div className="flex flex-wrap gap-4">
+              <Link
+                href="/blog"
+                className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors"
+              >
+                Читать блог
+              </Link>
+              <a
+                href="http://localhost:3333"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors border border-white/20"
+              >
+                Открыть админку
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-3xl font-bold text-center mb-12">
+            Возможности PXLR CMS
+          </h2>
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="text-center p-6">
+              <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <span className="text-3xl">🚀</span>
+              </div>
+              <h3 className="text-xl font-semibold mb-2">Быстрый старт</h3>
+              <p className="text-gray-600">
+                Разверните CMS за минуты с помощью Docker. Всё готово к работе из коробки.
+              </p>
+            </div>
+            <div className="text-center p-6">
+              <div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <span className="text-3xl">🔒</span>
+              </div>
+              <h3 className="text-xl font-semibold mb-2">Полный контроль</h3>
+              <p className="text-gray-600">
+                Данные хранятся локально. Никаких облачных зависимостей и ежемесячных платежей.
+              </p>
+            </div>
+            <div className="text-center p-6">
+              <div className="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <span className="text-3xl">⚡</span>
+              </div>
+              <h3 className="text-xl font-semibold mb-2">REST API</h3>
+              <p className="text-gray-600">
+                Headless архитектура. Используйте контент где угодно через API.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Latest Posts Section */}
+      {latestPosts.length > 0 && (
+        <section className="py-20 bg-gray-50">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between items-center mb-12">
+              <h2 className="text-3xl font-bold">Последние записи</h2>
+              <Link
+                href="/blog"
+                className="text-blue-600 hover:text-blue-700 font-medium"
+              >
+                Все записи →
+              </Link>
+            </div>
+            <div className="grid md:grid-cols-3 gap-8">
+              {latestPosts.map((post) => (
+                <article
+                  key={post.id}
+                  className="bg-white rounded-2xl border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow"
+                >
+                  <div className="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
+                    <span className="text-4xl">📄</span>
+                  </div>
+                  <div className="p-6">
+                    <div className="text-sm text-gray-500 mb-2">
+                      {post.data.publishedAt &&
+                        new Date(post.data.publishedAt).toLocaleDateString('ru-RU', {
+                          year: 'numeric',
+                          month: 'long',
+                          day: 'numeric',
+                        })}
+                    </div>
+                    <Link href={`/blog/${post.data.slug}`}>
+                      <h3 className="text-xl font-semibold text-gray-900 mb-2 hover:text-blue-600 transition-colors">
+                        {post.data.title}
+                      </h3>
+                    </Link>
+                    {post.data.excerpt && (
+                      <p className="text-gray-600 line-clamp-2">
+                        {post.data.excerpt}
+                      </p>
+                    )}
+                  </div>
+                </article>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* CTA Section */}
+      <section className="py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="bg-gradient-to-r from-blue-600 to-blue-700 rounded-3xl p-12 text-center text-white">
+            <h2 className="text-3xl font-bold mb-4">
+              Начните управлять контентом
+            </h2>
+            <p className="text-blue-100 mb-8 max-w-2xl mx-auto">
+              Откройте админ-панель, создавайте схемы и добавляйте контент. 
+              Всё просто и интуитивно понятно.
+            </p>
+            <a
+              href="http://localhost:3333"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors"
+            >
+              Открыть админ-панель
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/templates/blog/frontend/next.config.ts

@@ -0,0 +1,16 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'http',
+        hostname: 'localhost',
+        port: '9010',
+        pathname: '/**',
+      },
+    ],
+  },
+};
+
+export default nextConfig;

package/templates/blog/frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "pxlr-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "tailwindcss": "^4.0.0"
+  }
+}

package/templates/blog/frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/templates/blog/frontend/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}