create-ng-tailwind 3.1.0 → 4.1.0

package/lib/templates/blog/app.js

@@ -0,0 +1,250 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create Blog Routing
+ */
+async function createRouting(config) {
+  const routes = `import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  // Home - Blog Post List
+  {
+    path: '',
+    loadComponent: () => import('./features/blog/post-list/post-list.component').then(c => c.PostListComponent)
+  },
+
+  // Blog routes
+  {
+    path: 'category/:category',
+    loadComponent: () => import('./features/blog/category/category.component').then(c => c.CategoryComponent)
+  },
+  {
+    path: 'tag/:tag',
+    loadComponent: () => import('./features/blog/tag/tag.component').then(c => c.TagComponent)
+  },
+  {
+    path: 'author/:id',
+    loadComponent: () => import('./features/blog/author/author.component').then(c => c.AuthorComponent)
+  },
+  {
+    path: 'post/:slug',
+    loadComponent: () => import('./features/blog/post-detail/post-detail.component').then(c => c.PostDetailComponent)
+  },
+
+  // Auth routes
+  {
+    path: 'auth',
+    loadComponent: () => import('./layout/auth/auth-layout.component').then(c => c.AuthLayoutComponent),
+    children: [
+      { path: '', redirectTo: 'login', pathMatch: 'full' },
+      { path: 'login', loadComponent: () => import('./features/auth/login/login.component').then(c => c.LoginComponent) },
+      { path: 'register', loadComponent: () => import('./features/auth/register/register.component').then(c => c.RegisterComponent) },
+      { path: 'forgot-password', loadComponent: () => import('./features/auth/forgot-password/forgot-password.component').then(c => c.ForgotPasswordComponent) }
+    ]
+  },
+
+  // Catch-all
+  { path: '**', redirectTo: '' }
+];`;
+
+  await fs.writeFile(path.join(config.fullPath, "src/app/app.routes.ts"), routes);
+}
+
+/**
+ * Create Blog App Component
+ */
+async function createAppComponent(config) {
+  const appComponent = `import { Component, inject } from '@angular/core';
+import { RouterOutlet, RouterModule } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroMagnifyingGlass, heroUser, heroRss, heroEnvelope } from '@ng-icons/heroicons/outline';
+import { BlogService } from '@core/services/blog.service';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroMagnifyingGlass, heroUser, heroRss, heroEnvelope })],
+  template: \`
+    <div class="min-h-screen bg-gray-50">
+      <!-- Header -->
+      <header class="sticky top-0 z-50 border-b border-gray-200 bg-white/95 backdrop-blur-sm shadow-sm">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="flex h-20 items-center justify-between">
+            <!-- Logo & Tagline -->
+            <div class="flex items-center gap-4">
+              <a routerLink="/" class="flex items-center gap-3 group">
+                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-primary-500 to-purple-600 text-white font-bold text-2xl shadow-lg group-hover:shadow-xl transition-shadow">
+                  📝
+                </div>
+                <div class="hidden sm:block">
+                  <h1 class="text-2xl font-bold text-gray-900 group-hover:text-primary-600 transition-colors">My Blog</h1>
+                  <p class="text-xs text-gray-500">Insights & Tutorials</p>
+                </div>
+              </a>
+            </div>
+
+            <!-- Desktop Navigation -->
+            <nav class="hidden md:flex items-center gap-8">
+              <a routerLink="/" routerLinkActive="text-primary-600 font-semibold" [routerLinkActiveOptions]="{exact: true}" class="text-gray-600 hover:text-primary-600 font-medium transition-colors">
+                Home
+              </a>
+              @for (category of blogService.categories(); track category) {
+                <a [routerLink]="['/category', category]" routerLinkActive="text-primary-600 font-semibold" class="text-gray-600 hover:text-primary-600 font-medium transition-colors">
+                  {{ category }}
+                </a>
+              }
+            </nav>
+
+            <!-- Actions -->
+            <div class="flex items-center gap-3">
+              <button class="flex h-10 w-10 items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 hover:text-primary-600 transition-colors" aria-label="Search">
+                <ng-icon name="heroMagnifyingGlass" size="20"></ng-icon>
+              </button>
+              <a routerLink="/auth/login" class="flex h-10 w-10 items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 hover:text-primary-600 transition-colors" aria-label="Sign In">
+                <ng-icon name="heroUser" size="20"></ng-icon>
+              </a>
+              <a href="#" class="hidden sm:inline-flex items-center gap-2 rounded-full bg-primary-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-600 shadow-md hover:shadow-lg transition-all">
+                <ng-icon name="heroRss" size="16"></ng-icon>
+                Subscribe
+              </a>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <!-- Main Content -->
+      <main class="min-h-screen">
+        <router-outlet></router-outlet>
+      </main>
+
+      <!-- Footer -->
+      <footer class="border-t border-gray-200 bg-white">
+        <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+          <div class="grid gap-12 md:grid-cols-4">
+            <!-- About -->
+            <div class="md:col-span-2">
+              <div class="flex items-center gap-3 mb-4">
+                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-primary-500 to-purple-600 text-white font-bold text-2xl shadow-lg">
+                  📝
+                </div>
+                <div>
+                  <h3 class="text-xl font-bold text-gray-900">My Blog</h3>
+                  <p class="text-xs text-gray-500">Insights & Tutorials</p>
+                </div>
+              </div>
+              <p class="text-gray-600 mb-6 max-w-md">
+                Discover insights, tutorials, and best practices on modern web development, Angular, TypeScript, and more. Join our community of developers.
+              </p>
+              <div class="flex items-center gap-3">
+                <a href="#" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-primary-500 hover:text-white transition-colors">
+                  <span class="text-sm font-bold">𝕏</span>
+                </a>
+                <a href="#" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-primary-500 hover:text-white transition-colors">
+                  <span class="text-sm font-bold">in</span>
+                </a>
+                <a href="#" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-primary-500 hover:text-white transition-colors">
+                  <ng-icon name="heroRss" size="18"></ng-icon>
+                </a>
+              </div>
+            </div>
+
+            <!-- Categories -->
+            <div>
+              <h3 class="mb-4 font-semibold text-gray-900">Categories</h3>
+              <ul class="space-y-3">
+                @for (category of blogService.categories(); track category) {
+                  <li>
+                    <a [routerLink]="['/category', category]" class="text-gray-600 hover:text-primary-600 transition-colors">
+                      {{ category }}
+                    </a>
+                  </li>
+                }
+              </ul>
+            </div>
+
+            <!-- Quick Links -->
+            <div>
+              <h3 class="mb-4 font-semibold text-gray-900">Quick Links</h3>
+              <ul class="space-y-3">
+                <li><a routerLink="/" class="text-gray-600 hover:text-primary-600 transition-colors">All Posts</a></li>
+                <li><a routerLink="/auth/login" class="text-gray-600 hover:text-primary-600 transition-colors">Sign In</a></li>
+                <li><a routerLink="/auth/register" class="text-gray-600 hover:text-primary-600 transition-colors">Register</a></li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Newsletter -->
+          <div class="mt-12 rounded-2xl bg-linear-to-r from-primary-500 to-purple-600 p-8 text-white">
+            <div class="mx-auto max-w-3xl text-center">
+              <h3 class="text-2xl font-bold mb-2">Subscribe to our Newsletter</h3>
+              <p class="mb-6 text-primary-100">Get the latest posts and updates delivered directly to your inbox.</p>
+              <div class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
+                <input
+                  type="email"
+                  placeholder="Enter your email"
+                  class="flex-1 rounded-full px-6 py-3 text-gray-900 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-white/50"
+                />
+                <button class="rounded-full bg-white px-8 py-3 font-semibold text-primary-600 hover:bg-gray-100 transition-colors whitespace-nowrap">
+                  Subscribe
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Bottom Bar -->
+          <div class="mt-12 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-gray-200 pt-8">
+            <p class="text-sm text-gray-600">
+              &copy; {{ currentYear }} My Blog. All rights reserved.
+            </p>
+            <div class="flex items-center gap-6">
+              <a href="#" class="text-sm text-gray-600 hover:text-primary-600 transition-colors">Privacy Policy</a>
+              <a href="#" class="text-sm text-gray-600 hover:text-primary-600 transition-colors">Terms of Service</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  \`,
+})
+export class App {
+  blogService = inject(BlogService);
+  currentYear = new Date().getFullYear();
+
+  constructor(private translate: TranslateService) {
+    this.translate.setDefaultLang('en');
+    this.translate.use('en');
+  }
+}`;
+
+  await fs.writeFile(path.join(config.fullPath, "src/app/app.ts"), appComponent);
+}
+
+/**
+ * Clean up starter layout files (blog has its own header/footer in app.component)
+ */
+async function cleanupStarterLayout(config) {
+  const foldersToRemove = [
+    "src/app/layout/header",
+    "src/app/layout/footer",
+    "src/app/features/home",
+    "src/app/features/about",
+    "src/app/features/contact",
+  ];
+
+  for (const folder of foldersToRemove) {
+    try {
+      await fs.remove(path.join(config.fullPath, folder));
+    } catch (e) {
+      // Ignore errors if files don't exist
+    }
+  }
+}
+
+module.exports = {
+  createRouting,
+  createAppComponent,
+  cleanupStarterLayout,
+};

package/lib/templates/blog/components.js

@@ -0,0 +1,360 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create Blog Components
+ */
+async function createComponents(config) {
+  // Post Card Component
+  const postCard = `import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroCalendar, heroClock, heroTag } from '@ng-icons/heroicons/outline';
+import { Post } from '@core/services/blog.service';
+
+@Component({
+  selector: 'app-post-card',
+  standalone: true,
+  imports: [RouterModule, DatePipe, NgIconComponent],
+  viewProviders: [provideIcons({ heroCalendar, heroClock, heroTag })],
+  template: \`
+    <article class="group overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-xl hover:-translate-y-1">
+      <a [routerLink]="['/post', post.slug]" class="block">
+        <div class="aspect-video overflow-hidden">
+          <img
+            [src]="post.coverImage"
+            [alt]="post.title"
+            class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        </div>
+      </a>
+
+      <div class="p-6">
+        <div class="mb-3 flex items-center gap-4 text-sm text-gray-500">
+          <a [routerLink]="['/category', post.category]" class="text-primary-600 hover:text-primary-700 font-medium">
+            {{ post.category }}
+          </a>
+          <span class="flex items-center gap-1">
+            <ng-icon name="heroClock" size="14"></ng-icon>
+            {{ post.readingTime }} min read
+          </span>
+        </div>
+
+        <a [routerLink]="['/post', post.slug]">
+          <h3 class="mb-2 text-xl font-bold text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">
+            {{ post.title }}
+          </h3>
+        </a>
+
+        <p class="mb-4 text-gray-600 line-clamp-2">{{ post.excerpt }}</p>
+
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <img [src]="post.author.avatar" [alt]="post.author.name" class="h-8 w-8 rounded-full object-cover" />
+            <div>
+              <a [routerLink]="['/author', post.author.id]" class="text-sm font-medium text-gray-900 hover:text-primary-600">
+                {{ post.author.name }}
+              </a>
+              <p class="text-xs text-gray-500">{{ post.publishedAt | date:'mediumDate' }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  \`,
+})
+export class PostCardComponent {
+  @Input({ required: true }) post!: Post;
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/shared/components/post-card/post-card.component.ts"),
+    postCard
+  );
+
+  // Comment Component
+  const comment = `import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroArrowUturnLeft, heroUser } from '@ng-icons/heroicons/outline';
+import { Comment } from '@core/services/blog.service';
+
+@Component({
+  selector: 'app-comment',
+  standalone: true,
+  imports: [DatePipe, FormsModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroArrowUturnLeft, heroUser })],
+  template: \`
+    <div class="border-b border-gray-100 py-4 last:border-0" [class.ml-8]="isReply">
+      <div class="flex gap-4">
+        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100">
+          <ng-icon name="heroUser" size="20" class="text-gray-500"></ng-icon>
+        </div>
+
+        <div class="flex-1">
+          <div class="flex items-center gap-2 mb-1">
+            <span class="font-semibold text-gray-900">{{ comment.author }}</span>
+            <span class="text-sm text-gray-500">{{ comment.createdAt | date:'mediumDate' }}</span>
+          </div>
+
+          <p class="text-gray-700 mb-2">{{ comment.content }}</p>
+
+          @if (!isReply) {
+            <button
+              (click)="showReplyForm = !showReplyForm"
+              class="flex items-center gap-1 text-sm text-gray-500 hover:text-primary-600">
+              <ng-icon name="heroArrowUturnLeft" size="16"></ng-icon>
+              Reply
+            </button>
+          }
+
+          @if (showReplyForm) {
+            <div class="mt-3">
+              <textarea
+                [(ngModel)]="replyText"
+                placeholder="Write a reply..."
+                rows="2"
+                class="w-full rounded-lg border border-gray-300 p-3 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+              ></textarea>
+              <div class="mt-2 flex gap-2">
+                <button
+                  (click)="submitReply()"
+                  class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600">
+                  Reply
+                </button>
+                <button
+                  (click)="showReplyForm = false; replyText = ''"
+                  class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
+                  Cancel
+                </button>
+              </div>
+            </div>
+          }
+
+          @if (comment.replies && comment.replies.length > 0) {
+            <div class="mt-4">
+              @for (reply of comment.replies; track reply.id) {
+                <app-comment [comment]="reply" [isReply]="true"></app-comment>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class CommentComponent {
+  @Input({ required: true }) comment!: Comment;
+  @Input() isReply = false;
+  @Output() reply = new EventEmitter<string>();
+
+  showReplyForm = false;
+  replyText = '';
+
+  submitReply(): void {
+    if (this.replyText.trim()) {
+      this.reply.emit(this.replyText);
+      this.replyText = '';
+      this.showReplyForm = false;
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/shared/components/comment/comment.component.ts"),
+    comment
+  );
+
+  // Share Buttons Component
+  const shareButtons = `import { Component, Input } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroLink, heroShare } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-share-buttons',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroLink, heroShare })],
+  template: \`
+    <div class="flex items-center gap-2">
+      <span class="text-sm font-medium text-gray-700">Share:</span>
+
+      <a
+        [href]="twitterUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-blue-500 hover:text-white transition-colors"
+        aria-label="Share on Twitter">
+        <span class="text-sm font-bold">𝕏</span>
+      </a>
+
+      <a
+        [href]="facebookUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-blue-600 hover:text-white transition-colors"
+        aria-label="Share on Facebook">
+        <span class="text-sm font-bold">f</span>
+      </a>
+
+      <a
+        [href]="linkedinUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-blue-700 hover:text-white transition-colors"
+        aria-label="Share on LinkedIn">
+        <span class="text-sm font-bold">in</span>
+      </a>
+
+      <button
+        (click)="copyLink()"
+        class="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors"
+        aria-label="Copy link">
+        <ng-icon name="heroLink" size="18"></ng-icon>
+      </button>
+    </div>
+  \`,
+})
+export class ShareButtonsComponent {
+  @Input({ required: true }) url!: string;
+  @Input({ required: true }) title!: string;
+
+  get twitterUrl(): string {
+    return \`https://twitter.com/intent/tweet?text=\${encodeURIComponent(this.title)}&url=\${encodeURIComponent(this.url)}\`;
+  }
+
+  get facebookUrl(): string {
+    return \`https://www.facebook.com/sharer/sharer.php?u=\${encodeURIComponent(this.url)}\`;
+  }
+
+  get linkedinUrl(): string {
+    return \`https://www.linkedin.com/sharing/share-offsite/?url=\${encodeURIComponent(this.url)}\`;
+  }
+
+  copyLink(): void {
+    navigator.clipboard.writeText(this.url).then(() => {
+      alert('Link copied to clipboard!');
+    });
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/shared/components/share-buttons/share-buttons.component.ts"),
+    shareButtons
+  );
+
+  // Pagination Component
+  const pagination = `import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroChevronLeft, heroChevronRight } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-pagination',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroChevronLeft, heroChevronRight })],
+  template: \`
+    <nav class="flex items-center justify-center gap-2" aria-label="Pagination">
+      <button
+        (click)="goToPage(currentPage - 1)"
+        [disabled]="currentPage === 1"
+        class="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
+        <ng-icon name="heroChevronLeft" size="20"></ng-icon>
+      </button>
+
+      @for (page of visiblePages; track page) {
+        @if (page === '...') {
+          <span class="px-2 text-gray-500">...</span>
+        } @else {
+          <button
+            (click)="goToPage(+page)"
+            class="flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium transition-colors"
+            [class.bg-primary-500]="currentPage === page"
+            [class.text-white]="currentPage === page"
+            [class.border]="currentPage !== page"
+            [class.border-gray-300]="currentPage !== page"
+            [class.text-gray-700]="currentPage !== page"
+            [class.hover:bg-gray-50]="currentPage !== page">
+            {{ page }}
+          </button>
+        }
+      }
+
+      <button
+        (click)="goToPage(currentPage + 1)"
+        [disabled]="currentPage === totalPages"
+        class="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
+        <ng-icon name="heroChevronRight" size="20"></ng-icon>
+      </button>
+    </nav>
+  \`,
+})
+export class PaginationComponent {
+  @Input() currentPage = 1;
+  @Input() totalPages = 1;
+  @Output() pageChange = new EventEmitter<number>();
+
+  get visiblePages(): (number | string)[] {
+    const pages: (number | string)[] = [];
+    const delta = 2;
+
+    for (let i = 1; i <= this.totalPages; i++) {
+      if (i === 1 || i === this.totalPages || (i >= this.currentPage - delta && i <= this.currentPage + delta)) {
+        pages.push(i);
+      } else if (pages[pages.length - 1] !== '...') {
+        pages.push('...');
+      }
+    }
+
+    return pages;
+  }
+
+  goToPage(page: number): void {
+    if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
+      this.pageChange.emit(page);
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/shared/components/pagination/pagination.component.ts"),
+    pagination
+  );
+
+  // Tag List Component
+  const tagList = `import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroTag } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-tag-list',
+  standalone: true,
+  imports: [RouterModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroTag })],
+  template: \`
+    <div class="flex flex-wrap gap-2">
+      @for (tag of tags; track tag) {
+        <a
+          [routerLink]="['/tag', tag]"
+          class="inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700 hover:bg-primary-100 hover:text-primary-700 transition-colors">
+          <ng-icon name="heroTag" size="14"></ng-icon>
+          {{ tag }}
+        </a>
+      }
+    </div>
+  \`,
+})
+export class TagListComponent {
+  @Input({ required: true }) tags!: string[];
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/shared/components/tag-list/tag-list.component.ts"),
+    tagList
+  );
+}
+
+module.exports = { createComponents };

package/lib/templates/blog/i18n.js

@@ -0,0 +1,77 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create Blog i18n Translations
+ */
+async function createI18n(config) {
+  const enPath = path.join(config.fullPath, "public/assets/i18n/en.json");
+  const arPath = path.join(config.fullPath, "public/assets/i18n/ar.json");
+
+  let en = {};
+  let ar = {};
+
+  try {
+    en = JSON.parse(await fs.readFile(enPath, "utf-8"));
+    ar = JSON.parse(await fs.readFile(arPath, "utf-8"));
+  } catch {
+    // Files don't exist yet
+  }
+
+  const blogEn = {
+    blog: {
+      title: "Blog",
+      subtitle: "Insights, tutorials, and updates from our team",
+      searchPlaceholder: "Search articles...",
+      featured: "Featured Posts",
+      all: "All",
+      noPostsFound: "No posts found",
+      backToBlog: "Back to Blog",
+      comments: "Comments",
+      leaveComment: "Leave a Comment",
+      yourName: "Your Name",
+      yourEmail: "Your Email",
+      yourComment: "Your Comment",
+      postComment: "Post Comment",
+      noComments: "No comments yet. Be the first to comment!",
+      relatedPosts: "Related Posts",
+      postsInCategory: "posts in this category",
+      noPostsInCategory: "No posts in this category",
+      postsWithTag: "posts with this tag",
+      noPostsWithTag: "No posts with this tag",
+      postsByAuthor: "Posts by this author",
+      noPostsByAuthor: "No posts by this author",
+    },
+  };
+
+  const blogAr = {
+    blog: {
+      title: "المدونة",
+      subtitle: "رؤى ودروس وتحديثات من فريقنا",
+      searchPlaceholder: "ابحث في المقالات...",
+      featured: "مقالات مميزة",
+      all: "الكل",
+      noPostsFound: "لم يتم العثور على مقالات",
+      backToBlog: "العودة إلى المدونة",
+      comments: "التعليقات",
+      leaveComment: "اترك تعليقاً",
+      yourName: "اسمك",
+      yourEmail: "بريدك الإلكتروني",
+      yourComment: "تعليقك",
+      postComment: "نشر التعليق",
+      noComments: "لا توجد تعليقات بعد. كن أول من يعلق!",
+      relatedPosts: "مقالات ذات صلة",
+      postsInCategory: "مقالات في هذه الفئة",
+      noPostsInCategory: "لا توجد مقالات في هذه الفئة",
+      postsWithTag: "مقالات بهذه العلامة",
+      noPostsWithTag: "لا توجد مقالات بهذه العلامة",
+      postsByAuthor: "مقالات هذا الكاتب",
+      noPostsByAuthor: "لا توجد مقالات لهذا الكاتب",
+    },
+  };
+
+  await fs.writeFile(enPath, JSON.stringify({ ...en, ...blogEn }, null, 2));
+  await fs.writeFile(arPath, JSON.stringify({ ...ar, ...blogAr }, null, 2));
+}
+
+module.exports = { createI18n };