create-pxlr 1.0.0

package/README.md

@@ -0,0 +1,160 @@
+# create-pxlr
+
+🚀 CLI tool to create PXLR CMS projects - a self-hosted Headless CMS.
+
+## Usage
+
+```bash
+# With pnpm (recommended)
+pnpm create pxlr@latest
+
+# With npm
+npx create-pxlr@latest
+
+# With yarn
+yarn create pxlr
+```
+
+## Installation Types
+
+### 🐳 Docker (Recommended)
+Complete self-contained setup with all services:
+- PostgreSQL database
+- MinIO S3 storage
+- Redis cache
+- API server
+- Admin panel
+
+Just run `docker-compose up -d` and you're ready!
+
+### ⚡ Standalone
+For users with existing infrastructure:
+- Connect to your own PostgreSQL database
+- Use any S3-compatible storage (AWS S3, Cloudflare R2, MinIO, etc.)
+- Optional Redis for caching
+- Configure via `.env` files
+
+## Templates
+
+### 📦 Clean
+- Empty admin panel
+- No demo data
+- Perfect for new projects
+
+### 📝 Blog
+- Pre-configured blog schema
+- Demo blog posts
+- Optional Next.js frontend
+
+## Quick Start
+
+### Docker Installation
+
+```bash
+# Create project
+pnpm create pxlr@latest my-project
+
+# Select: Docker installation
+# Select: Blog template (or Clean)
+
+# Start services
+cd my-project/pxlr-cms
+docker-compose up -d
+
+# Access:
+# Admin: http://localhost:3333
+# API:   http://localhost:4000
+# MinIO: http://localhost:9011
+```
+
+### Standalone Installation
+
+```bash
+# Create project
+pnpm create pxlr@latest my-project
+
+# Select: Standalone installation
+
+# Configure database and S3
+nano my-project/pxlr-cms/packages/api/.env
+
+# Initialize database
+psql -d your_database -f my-project/pxlr-cms/packages/api/src/database/init.sql
+
+# Start API
+cd my-project/pxlr-cms/packages/api
+npm install && npm run dev
+
+# Start Admin
+cd my-project/pxlr-cms/packages/admin
+npm install && npm run dev
+```
+
+## Default Credentials
+
+- **Email:** admin@pxlr.local
+- **Password:** admin123
+
+## Environment Variables
+
+### API (.env)
+
+```env
+# Server
+PORT=4000
+NODE_ENV=development
+
+# Database
+DATABASE_URL=postgresql://user:pass@localhost:5432/pxlr
+
+# Redis (optional)
+REDIS_URL=redis://localhost:6379
+
+# S3 Storage
+S3_ENDPOINT=s3.amazonaws.com
+S3_ACCESS_KEY=your-key
+S3_SECRET_KEY=your-secret
+S3_BUCKET=pxlr-media
+S3_PUBLIC_URL=https://bucket.s3.amazonaws.com
+
+# JWT
+JWT_SECRET=your-secret-key
+```
+
+### Admin (.env)
+
+```env
+NEXT_PUBLIC_API_URL=http://localhost:4000
+```
+
+## Project Structure
+
+```
+my-project/
+├── pxlr-cms/
+│   ├── packages/
+│   │   ├── api/          # Fastify backend
+│   │   └── admin/        # Next.js admin panel
+│   ├── docker-compose.yml (Docker only)
+│   └── nginx/            (Docker only)
+└── frontend/             # Next.js frontend (blog template)
+```
+
+## Supported S3 Providers
+
+- MinIO (self-hosted)
+- AWS S3
+- Cloudflare R2
+- DigitalOcean Spaces
+- Backblaze B2
+- Any S3-compatible storage
+
+## Links
+
+- [Documentation](https://github.com/pxlr-cms/pxlr)
+- [GitHub](https://github.com/pxlr-cms/create-pxlr)
+- [Issues](https://github.com/pxlr-cms/create-pxlr/issues)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,264 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+import inquirer from "inquirer";
+import chalk from "chalk";
+import ora from "ora";
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+var TEMPLATES_DIR = path.join(__dirname, "..", "templates");
+var program = new Command();
+program.name("create-pxlr").description("\u{1F680} Create a new PXLR CMS project").version("1.0.0").argument("[project-name]", "Name of the project").action(async (projectName) => {
+  console.log();
+  console.log(chalk.bold.cyan("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557"));
+  console.log(chalk.bold.cyan("  \u2551") + chalk.bold.white("         \u{1F3A8} PXLR CMS Creator           ") + chalk.bold.cyan("\u2551"));
+  console.log(chalk.bold.cyan("  \u2551") + chalk.gray("     Self-hosted Headless CMS          ") + chalk.bold.cyan("\u2551"));
+  console.log(chalk.bold.cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D"));
+  console.log();
+  try {
+    const answers = await inquirer.prompt([
+      {
+        type: "input",
+        name: "projectName",
+        message: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u043F\u0440\u043E\u0435\u043A\u0442\u0430:",
+        default: projectName || "my-pxlr-project",
+        validate: (input) => {
+          if (/^[a-zA-Z][a-zA-Z0-9-_]*$/.test(input)) return true;
+          return "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u043D\u0430\u0447\u0438\u043D\u0430\u0442\u044C\u0441\u044F \u0441 \u0431\u0443\u043A\u0432\u044B \u0438 \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0431\u0443\u043A\u0432\u044B, \u0446\u0438\u0444\u0440\u044B, - \u0438 _";
+        }
+      },
+      {
+        type: "list",
+        name: "installationType",
+        message: "\u0422\u0438\u043F \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0438:",
+        choices: [
+          {
+            name: "\u{1F433} Docker \u2014 \u041F\u043E\u043B\u043D\u0430\u044F \u0441\u0431\u043E\u0440\u043A\u0430 \u0441 PostgreSQL, MinIO, Redis (\u0440\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0443\u0435\u0442\u0441\u044F)",
+            value: "docker"
+          },
+          {
+            name: "\u26A1 Standalone \u2014 \u0422\u043E\u043B\u044C\u043A\u043E \u043A\u043E\u0434, \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430 \u0447\u0435\u0440\u0435\u0437 .env (\u0441\u0432\u043E\u044F \u0411\u0414 \u0438 S3)",
+            value: "standalone"
+          }
+        ]
+      },
+      {
+        type: "list",
+        name: "template",
+        message: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0448\u0430\u0431\u043B\u043E\u043D:",
+        choices: [
+          {
+            name: "\u{1F4E6} Clean \u2014 \u041F\u0443\u0441\u0442\u0430\u044F \u0430\u0434\u043C\u0438\u043D\u043A\u0430 \u0431\u0435\u0437 \u0434\u0435\u043C\u043E-\u0434\u0430\u043D\u043D\u044B\u0445",
+            value: "clean"
+          },
+          {
+            name: "\u{1F4DD} Blog \u2014 \u0413\u043E\u0442\u043E\u0432\u044B\u0439 \u0431\u043B\u043E\u0433 \u0441 \u0434\u0435\u043C\u043E-\u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C",
+            value: "blog"
+          }
+        ]
+      },
+      {
+        type: "confirm",
+        name: "installFrontend",
+        message: "\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C Next.js \u0444\u0440\u043E\u043D\u0442\u0435\u043D\u0434 \u0441 \u0448\u0430\u0431\u043B\u043E\u043D\u0430\u043C\u0438?",
+        default: true,
+        when: (answers2) => answers2.template === "blog"
+      }
+    ]);
+    const targetDir = path.resolve(process.cwd(), answers.projectName);
+    if (fs.existsSync(targetDir)) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: "confirm",
+          name: "overwrite",
+          message: `\u0414\u0438\u0440\u0435\u043A\u0442\u043E\u0440\u0438\u044F ${answers.projectName} \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. \u041F\u0435\u0440\u0435\u0437\u0430\u043F\u0438\u0441\u0430\u0442\u044C?`,
+          default: false
+        }
+      ]);
+      if (!overwrite) {
+        console.log(chalk.yellow("\n\u26A0\uFE0F  \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430 \u043E\u0442\u043C\u0435\u043D\u0435\u043D\u0430"));
+        process.exit(0);
+      }
+      await fs.remove(targetDir);
+    }
+    const spinner = ora("\u0421\u043E\u0437\u0434\u0430\u043D\u0438\u0435 \u043F\u0440\u043E\u0435\u043A\u0442\u0430...").start();
+    try {
+      const templateDir = path.join(TEMPLATES_DIR, answers.template);
+      await fs.copy(templateDir, targetDir);
+      await updateProjectName(targetDir, answers.projectName);
+      if (answers.installationType === "standalone") {
+        const dockerComposePath = path.join(targetDir, "pxlr-cms", "docker-compose.yml");
+        if (await fs.pathExists(dockerComposePath)) {
+          await fs.remove(dockerComposePath);
+        }
+        const nginxPath = path.join(targetDir, "pxlr-cms", "nginx");
+        if (await fs.pathExists(nginxPath)) {
+          await fs.remove(nginxPath);
+        }
+        await createStandaloneEnvFiles(targetDir);
+      }
+      if (!answers.installFrontend) {
+        const frontendDir = path.join(targetDir, "frontend");
+        if (await fs.pathExists(frontendDir)) {
+          await fs.remove(frontendDir);
+        }
+      }
+      spinner.succeed("\u041F\u0440\u043E\u0435\u043A\u0442 \u0441\u043E\u0437\u0434\u0430\u043D");
+      console.log();
+      console.log(chalk.green("\u2705 \u041F\u0440\u043E\u0435\u043A\u0442 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0441\u043E\u0437\u0434\u0430\u043D!"));
+      console.log();
+      if (answers.installationType === "docker") {
+        printDockerInstructions(answers);
+      } else {
+        printStandaloneInstructions(answers);
+      }
+    } catch (error) {
+      spinner.fail("\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u0438 \u043F\u0440\u043E\u0435\u043A\u0442\u0430");
+      throw error;
+    }
+  } catch (error) {
+    if (error instanceof Error && error.message.includes("User force closed")) {
+      console.log(chalk.yellow("\n\u{1F44B} \u0414\u043E \u0441\u0432\u0438\u0434\u0430\u043D\u0438\u044F!"));
+      process.exit(0);
+    }
+    console.error(chalk.red("\n\u274C \u041E\u0448\u0438\u0431\u043A\u0430:"), error);
+    process.exit(1);
+  }
+});
+program.parse();
+function printDockerInstructions(answers) {
+  console.log(chalk.bold("\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0435 \u0448\u0430\u0433\u0438 (Docker):"));
+  console.log();
+  console.log(chalk.cyan(`  cd ${answers.projectName}/pxlr-cms`));
+  console.log(chalk.cyan("  docker-compose up -d"));
+  console.log();
+  console.log(chalk.bold("\u0414\u043E\u0441\u0442\u0443\u043F:"));
+  console.log(chalk.gray("  \u2022 \u0410\u0434\u043C\u0438\u043D\u043A\u0430:  ") + chalk.white("http://localhost:3333"));
+  console.log(chalk.gray("  \u2022 API:      ") + chalk.white("http://localhost:4000"));
+  console.log(chalk.gray("  \u2022 MinIO:    ") + chalk.white("http://localhost:9011"));
+  console.log();
+  console.log(chalk.bold("\u0410\u0432\u0442\u043E\u0440\u0438\u0437\u0430\u0446\u0438\u044F:"));
+  console.log(chalk.gray("  \u2022 Email:    ") + chalk.white("admin@pxlr.local"));
+  console.log(chalk.gray("  \u2022 \u041F\u0430\u0440\u043E\u043B\u044C:   ") + chalk.white("admin123"));
+  console.log();
+  if (answers.installFrontend) {
+    console.log(chalk.bold("\u0424\u0440\u043E\u043D\u0442\u0435\u043D\u0434 (Next.js):"));
+    console.log(chalk.cyan(`  cd ${answers.projectName}/frontend`));
+    console.log(chalk.cyan("  npm install && npm run dev"));
+    console.log(chalk.gray("  \u041E\u0442\u043A\u0440\u043E\u0439\u0442\u0435: ") + chalk.white("http://localhost:3000"));
+    console.log();
+  }
+}
+function printStandaloneInstructions(answers) {
+  console.log(chalk.bold("\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0435 \u0448\u0430\u0433\u0438 (Standalone):"));
+  console.log();
+  console.log(chalk.yellow("1. \u041D\u0430\u0441\u0442\u0440\u043E\u0439\u0442\u0435 \u0431\u0430\u0437\u0443 \u0434\u0430\u043D\u043D\u044B\u0445 PostgreSQL"));
+  console.log(chalk.gray("   \u0412\u044B\u043F\u043E\u043B\u043D\u0438\u0442\u0435 SQL \u0438\u0437: ") + chalk.white("pxlr-cms/packages/api/src/database/init.sql"));
+  console.log();
+  console.log(chalk.yellow("2. \u041D\u0430\u0441\u0442\u0440\u043E\u0439\u0442\u0435 S3 \u0445\u0440\u0430\u043D\u0438\u043B\u0438\u0449\u0435 (AWS S3, MinIO, Cloudflare R2 \u0438 \u0442.\u0434.)"));
+  console.log();
+  console.log(chalk.yellow("3. \u041E\u0442\u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u0443\u0439\u0442\u0435 .env \u0444\u0430\u0439\u043B\u044B:"));
+  console.log(chalk.cyan(`  ${answers.projectName}/pxlr-cms/packages/api/.env`));
+  console.log(chalk.cyan(`  ${answers.projectName}/pxlr-cms/packages/admin/.env`));
+  console.log();
+  console.log(chalk.yellow("4. \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043C\u043E\u0441\u0442\u0438 \u0438 \u0437\u0430\u043F\u0443\u0441\u0442\u0438\u0442\u0435:"));
+  console.log();
+  console.log(chalk.bold("API:"));
+  console.log(chalk.cyan(`  cd ${answers.projectName}/pxlr-cms/packages/api`));
+  console.log(chalk.cyan("  npm install"));
+  console.log(chalk.cyan("  npm run dev"));
+  console.log();
+  console.log(chalk.bold("\u0410\u0434\u043C\u0438\u043D\u043A\u0430:"));
+  console.log(chalk.cyan(`  cd ${answers.projectName}/pxlr-cms/packages/admin`));
+  console.log(chalk.cyan("  npm install"));
+  console.log(chalk.cyan("  npm run dev"));
+  console.log();
+  if (answers.installFrontend) {
+    console.log(chalk.bold("\u0424\u0440\u043E\u043D\u0442\u0435\u043D\u0434:"));
+    console.log(chalk.cyan(`  cd ${answers.projectName}/frontend`));
+    console.log(chalk.cyan("  npm install && npm run dev"));
+    console.log();
+  }
+  console.log(chalk.bold("\u041F\u043E\u0440\u0442\u044B \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E:"));
+  console.log(chalk.gray("  \u2022 API:      ") + chalk.white("http://localhost:4000"));
+  console.log(chalk.gray("  \u2022 \u0410\u0434\u043C\u0438\u043D\u043A\u0430:  ") + chalk.white("http://localhost:3000"));
+  console.log();
+}
+async function createStandaloneEnvFiles(targetDir) {
+  const apiEnvContent = `# PXLR CMS API Configuration
+# ===========================
+
+# Server
+PORT=4000
+HOST=0.0.0.0
+NODE_ENV=development
+
+# JWT Secret (\u041E\u0411\u042F\u0417\u0410\u0422\u0415\u041B\u042C\u041D\u041E \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u043D\u0430 \u0441\u0432\u043E\u0439!)
+JWT_SECRET=your-super-secret-jwt-key-change-this
+
+# PostgreSQL Database
+# \u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435 \u0432\u0430\u0448\u0435\u0439 \u0431\u0430\u0437\u044B \u0434\u0430\u043D\u043D\u044B\u0445
+DATABASE_URL=postgresql://user:password@localhost:5432/pxlr_cms
+# \u0418\u043B\u0438 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u044B\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B:
+# DB_HOST=localhost
+# DB_PORT=5432
+# DB_USER=your_user
+# DB_PASSWORD=your_password
+# DB_NAME=pxlr_cms
+
+# Redis (\u043E\u043F\u0446\u0438\u043E\u043D\u0430\u043B\u044C\u043D\u043E, \u0434\u043B\u044F \u043A\u044D\u0448\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0438 real-time)
+REDIS_URL=redis://localhost:6379
+# \u0418\u043B\u0438 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u044B\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B:
+# REDIS_HOST=localhost
+# REDIS_PORT=6379
+
+# S3 Storage (MinIO, AWS S3, Cloudflare R2, \u0438 \u0442.\u0434.)
+S3_ENDPOINT=s3.amazonaws.com
+S3_PORT=443
+S3_ACCESS_KEY=your-access-key
+S3_SECRET_KEY=your-secret-key
+S3_BUCKET=pxlr-media
+S3_USE_SSL=true
+S3_REGION=us-east-1
+# \u041F\u0443\u0431\u043B\u0438\u0447\u043D\u044B\u0439 URL \u0434\u043B\u044F \u0434\u043E\u0441\u0442\u0443\u043F\u0430 \u043A \u0444\u0430\u0439\u043B\u0430\u043C
+S3_PUBLIC_URL=https://your-bucket.s3.amazonaws.com
+
+# CORS
+CORS_ORIGIN=http://localhost:3000,http://localhost:3333
+`;
+  const adminEnvContent = `# PXLR CMS Admin Configuration
+# =============================
+
+# API URL (\u0443\u043A\u0430\u0436\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441 \u0432\u0430\u0448\u0435\u0433\u043E API)
+NEXT_PUBLIC_API_URL=http://localhost:4000
+`;
+  const apiEnvPath = path.join(targetDir, "pxlr-cms", "packages", "api", ".env");
+  const adminEnvPath = path.join(targetDir, "pxlr-cms", "packages", "admin", ".env");
+  await fs.writeFile(apiEnvPath, apiEnvContent);
+  await fs.writeFile(adminEnvPath, adminEnvContent);
+}
+async function updateProjectName(targetDir, projectName) {
+  const dockerComposePath = path.join(targetDir, "pxlr-cms", "docker-compose.yml");
+  if (await fs.pathExists(dockerComposePath)) {
+    let content = await fs.readFile(dockerComposePath, "utf-8");
+    content = content.replace(/pxlr-/g, `${projectName}-`);
+    content = content.replace(/pxlr_/g, `${projectName}_`);
+    await fs.writeFile(dockerComposePath, content);
+  }
+  const packageJsonPaths = [
+    path.join(targetDir, "pxlr-cms", "packages", "api", "package.json"),
+    path.join(targetDir, "pxlr-cms", "packages", "admin", "package.json"),
+    path.join(targetDir, "frontend", "package.json")
+  ];
+  for (const pkgPath of packageJsonPaths) {
+    if (await fs.pathExists(pkgPath)) {
+      const pkg = await fs.readJson(pkgPath);
+      pkg.name = pkg.name.replace("@pxlr", `@${projectName}`);
+      await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+    }
+  }
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "create-pxlr",
+  "version": "1.0.0",
+  "description": "CLI tool to create PXLR CMS projects",
+  "main": "dist/index.js",
+  "bin": {
+    "create-pxlr": "./dist/index.js"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "dev": "tsup src/index.ts --format esm --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "pxlr",
+    "cms",
+    "headless-cms",
+    "create",
+    "cli",
+    "docker",
+    "nextjs"
+  ],
+  "author": "PXLR Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pxlr/create-pxlr"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.3.7",
+    "ora": "^8.1.1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/inquirer": "^9.0.7",
+    "@types/node": "^22.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ]
+}

package/templates/blog/frontend/app/blog/[slug]/page.tsx

@@ -0,0 +1,175 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { getBlogPostBySlug, getBlogPosts } from '@/app/lib/cms';
+
+export const revalidate = 60;
+
+interface Props {
+  params: Promise<{ slug: string }>;
+}
+
+// Генерация статических путей
+export async function generateStaticParams() {
+  const posts = await getBlogPosts();
+  return posts.map((post) => ({
+    slug: post.data.slug,
+  }));
+}
+
+// Метаданные страницы
+export async function generateMetadata({ params }: Props) {
+  const { slug } = await params;
+  const post = await getBlogPostBySlug(slug);
+  
+  if (!post) {
+    return { title: 'Запись не найдена' };
+  }
+  
+  return {
+    title: post.data.title,
+    description: post.data.excerpt,
+  };
+}
+
+export default async function BlogPostPage({ params }: Props) {
+  const { slug } = await params;
+  const post = await getBlogPostBySlug(slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <article className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      {/* Навигация */}
+      <nav className="mb-8">
+        <Link
+          href="/blog"
+          className="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          <svg
+            className="mr-2 w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+          Назад к блогу
+        </Link>
+      </nav>
+
+      {/* Заголовок */}
+      <header className="mb-8">
+        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+          {post.data.title}
+        </h1>
+        
+        <div className="flex items-center gap-4 text-gray-500">
+          {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 className="font-medium">{post.data.author}</span>
+            </>
+          )}
+        </div>
+      </header>
+
+      {/* Изображение */}
+      {post.data.image?.url && (
+        <div className="mb-8 rounded-2xl overflow-hidden">
+          <img
+            src={post.data.image.url}
+            alt={post.data.image.alt || post.data.title}
+            className="w-full h-auto"
+          />
+        </div>
+      )}
+
+      {/* Краткое описание */}
+      {post.data.excerpt && (
+        <div className="mb-8 p-6 bg-gray-50 rounded-xl border-l-4 border-blue-500">
+          <p className="text-lg text-gray-700 italic">
+            {post.data.excerpt}
+          </p>
+        </div>
+      )}
+
+      {/* Контент */}
+      <div className="prose prose-lg max-w-none">
+        {post.data.content?.split('\n').map((paragraph, index) => {
+          // Обработка заголовков
+          if (paragraph.startsWith('## ')) {
+            return (
+              <h2 key={index} className="text-2xl font-bold text-gray-900 mt-8 mb-4">
+                {paragraph.replace('## ', '')}
+              </h2>
+            );
+          }
+          if (paragraph.startsWith('### ')) {
+            return (
+              <h3 key={index} className="text-xl font-semibold text-gray-900 mt-6 mb-3">
+                {paragraph.replace('### ', '')}
+              </h3>
+            );
+          }
+          // Обработка списков
+          if (paragraph.startsWith('- ')) {
+            return (
+              <li key={index} className="text-gray-700 ml-6">
+                {paragraph.replace('- ', '')}
+              </li>
+            );
+          }
+          // Пустые строки
+          if (!paragraph.trim()) {
+            return null;
+          }
+          // Обычные параграфы
+          return (
+            <p key={index} className="text-gray-700 mb-4 leading-relaxed">
+              {paragraph}
+            </p>
+          );
+        })}
+      </div>
+
+      {/* Навигация внизу */}
+      <div className="mt-12 pt-8 border-t border-gray-200">
+        <Link
+          href="/blog"
+          className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium"
+        >
+          <svg
+            className="mr-2 w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+          Все записи блога
+        </Link>
+      </div>
+    </article>
+  );
+}