create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/blog/pages.js

@@ -0,0 +1,554 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create Blog Pages
+ */
+async function createPages(config) {
+  // Post List Page (Home)
+  const postList = `import { Component, inject, signal, computed } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroMagnifyingGlass } from '@ng-icons/heroicons/outline';
+import { PostCardComponent } from '@shared/components/post-card/post-card.component';
+import { PaginationComponent } from '@shared/components/pagination/pagination.component';
+import { BlogService } from '@core/services/blog.service';
+
+@Component({
+  selector: 'app-post-list',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, NgIconComponent, PostCardComponent, PaginationComponent],
+  viewProviders: [provideIcons({ heroMagnifyingGlass })],
+  template: \`
+    <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+      <!-- Hero Section -->
+      <div class="mb-12 text-center">
+        <h1 class="text-4xl font-bold text-gray-900 sm:text-5xl">{{ 'blog.title' | translate }}</h1>
+        <p class="mt-4 text-lg text-gray-600">{{ 'blog.subtitle' | translate }}</p>
+
+        <!-- Search -->
+        <div class="mt-8 mx-auto max-w-md">
+          <div class="relative">
+            <ng-icon name="heroMagnifyingGlass" size="20" class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></ng-icon>
+            <input
+              type="text"
+              [placeholder]="'blog.searchPlaceholder' | translate"
+              (input)="onSearch($event)"
+              class="w-full rounded-full border border-gray-300 py-3 pl-12 pr-4 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Featured Posts -->
+      @if (!searchQuery() && currentPage() === 1 && blogService.featuredPosts().length > 0) {
+        <section class="mb-16">
+          <h2 class="mb-6 text-2xl font-bold text-gray-900">{{ 'blog.featured' | translate }}</h2>
+          <div class="grid gap-8 md:grid-cols-3">
+            @for (post of blogService.featuredPosts(); track post.id) {
+              <app-post-card [post]="post"></app-post-card>
+            }
+          </div>
+        </section>
+      }
+
+      <!-- Categories -->
+      <div class="mb-8 flex flex-wrap gap-2">
+        <button
+          (click)="selectedCategory.set('')"
+          class="rounded-full px-4 py-2 text-sm font-medium transition-colors"
+          [class.bg-primary-500]="!selectedCategory()"
+          [class.text-white]="!selectedCategory()"
+          [class.bg-gray-100]="selectedCategory()"
+          [class.text-gray-700]="selectedCategory()">
+          {{ 'blog.all' | translate }}
+        </button>
+        @for (cat of blogService.categories(); track cat) {
+          <button
+            (click)="selectedCategory.set(cat)"
+            class="rounded-full px-4 py-2 text-sm font-medium transition-colors"
+            [class.bg-primary-500]="selectedCategory() === cat"
+            [class.text-white]="selectedCategory() === cat"
+            [class.bg-gray-100]="selectedCategory() !== cat"
+            [class.text-gray-700]="selectedCategory() !== cat">
+            {{ cat }}
+          </button>
+        }
+      </div>
+
+      <!-- Posts Grid -->
+      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+        @for (post of paginatedPosts(); track post.id) {
+          <app-post-card [post]="post"></app-post-card>
+        } @empty {
+          <div class="col-span-full py-12 text-center">
+            <p class="text-gray-500">{{ 'blog.noPostsFound' | translate }}</p>
+          </div>
+        }
+      </div>
+
+      <!-- Pagination -->
+      @if (totalPages() > 1) {
+        <div class="mt-12">
+          <app-pagination
+            [currentPage]="currentPage()"
+            [totalPages]="totalPages()"
+            (pageChange)="currentPage.set($event)">
+          </app-pagination>
+        </div>
+      }
+    </div>
+  \`,
+})
+export class PostListComponent {
+  blogService = inject(BlogService);
+
+  searchQuery = signal('');
+  selectedCategory = signal('');
+  currentPage = signal(1);
+  postsPerPage = 6;
+
+  filteredPosts = computed(() => {
+    let posts = this.blogService.posts();
+
+    if (this.searchQuery()) {
+      posts = this.blogService.searchPosts(this.searchQuery());
+    }
+
+    if (this.selectedCategory()) {
+      posts = posts.filter(p => p.category === this.selectedCategory());
+    }
+
+    return posts;
+  });
+
+  totalPages = computed(() =>
+    Math.ceil(this.filteredPosts().length / this.postsPerPage)
+  );
+
+  paginatedPosts = computed(() => {
+    const start = (this.currentPage() - 1) * this.postsPerPage;
+    return this.filteredPosts().slice(start, start + this.postsPerPage);
+  });
+
+  onSearch(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.searchQuery.set(value);
+    this.currentPage.set(1);
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/features/blog/post-list/post-list.component.ts"),
+    postList
+  );
+
+  // Post Detail Page
+  const postDetail = `import { Component, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroCalendar, heroClock, heroArrowLeft } from '@ng-icons/heroicons/outline';
+import { PostCardComponent } from '@shared/components/post-card/post-card.component';
+import { CommentComponent } from '@shared/components/comment/comment.component';
+import { TagListComponent } from '@shared/components/tag-list/tag-list.component';
+import { ShareButtonsComponent } from '@shared/components/share-buttons/share-buttons.component';
+import { BlogService, Post, Comment } from '@core/services/blog.service';
+
+@Component({
+  selector: 'app-post-detail',
+  standalone: true,
+  imports: [
+    RouterModule, DatePipe, FormsModule, TranslateModule, NgIconComponent,
+    PostCardComponent, CommentComponent, TagListComponent, ShareButtonsComponent
+  ],
+  viewProviders: [provideIcons({ heroCalendar, heroClock, heroArrowLeft })],
+  template: \`
+    @if (post) {
+      <article class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
+        <!-- Back Link -->
+        <a routerLink="/" class="mb-8 inline-flex items-center gap-2 text-gray-600 hover:text-primary-600">
+          <ng-icon name="heroArrowLeft" size="20"></ng-icon>
+          {{ 'blog.backToBlog' | translate }}
+        </a>
+
+        <!-- Header -->
+        <header class="mb-8">
+          <div class="mb-4 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="heroCalendar" size="16"></ng-icon>
+              {{ post.publishedAt | date:'mediumDate' }}
+            </span>
+            <span class="flex items-center gap-1">
+              <ng-icon name="heroClock" size="16"></ng-icon>
+              {{ post.readingTime }} min read
+            </span>
+          </div>
+
+          <h1 class="mb-6 text-4xl font-bold text-gray-900 sm:text-5xl">{{ post.title }}</h1>
+
+          <!-- Author -->
+          <div class="flex items-center gap-4">
+            <img [src]="post.author.avatar" [alt]="post.author.name" class="h-12 w-12 rounded-full object-cover" />
+            <div>
+              <a [routerLink]="['/author', post.author.id]" class="font-medium text-gray-900 hover:text-primary-600">
+                {{ post.author.name }}
+              </a>
+              <p class="text-sm text-gray-500">{{ post.author.bio }}</p>
+            </div>
+          </div>
+        </header>
+
+        <!-- Cover Image -->
+        <div class="mb-8 overflow-hidden rounded-2xl">
+          <img [src]="post.coverImage" [alt]="post.title" class="w-full" />
+        </div>
+
+        <!-- Content -->
+        <div class="prose prose-lg max-w-none mb-8" [innerHTML]="renderedContent"></div>
+
+        <!-- Tags -->
+        <div class="mb-8">
+          <app-tag-list [tags]="post.tags"></app-tag-list>
+        </div>
+
+        <!-- Share -->
+        <div class="mb-12 border-t border-b border-gray-200 py-6">
+          <app-share-buttons [url]="currentUrl" [title]="post.title"></app-share-buttons>
+        </div>
+
+        <!-- Comments Section -->
+        <section class="mb-12">
+          <h2 class="mb-6 text-2xl font-bold text-gray-900">
+            {{ 'blog.comments' | translate }} ({{ comments.length }})
+          </h2>
+
+          <!-- Comment Form -->
+          <div class="mb-8 rounded-xl border border-gray-200 bg-gray-50 p-6">
+            <h3 class="mb-4 font-semibold text-gray-900">{{ 'blog.leaveComment' | translate }}</h3>
+            <div class="grid gap-4 sm:grid-cols-2">
+              <input
+                type="text"
+                [(ngModel)]="newComment.author"
+                [placeholder]="'blog.yourName' | translate"
+                class="rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+              />
+              <input
+                type="email"
+                [(ngModel)]="newComment.email"
+                [placeholder]="'blog.yourEmail' | translate"
+                class="rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+              />
+            </div>
+            <textarea
+              [(ngModel)]="newComment.content"
+              [placeholder]="'blog.yourComment' | translate"
+              rows="4"
+              class="mt-4 w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            ></textarea>
+            <button
+              (click)="submitComment()"
+              class="mt-4 rounded-lg bg-primary-500 px-6 py-2 font-medium text-white hover:bg-primary-600">
+              {{ 'blog.postComment' | translate }}
+            </button>
+          </div>
+
+          <!-- Comments List -->
+          <div class="space-y-4">
+            @for (comment of comments; track comment.id) {
+              <app-comment [comment]="comment"></app-comment>
+            } @empty {
+              <p class="text-gray-500">{{ 'blog.noComments' | translate }}</p>
+            }
+          </div>
+        </section>
+
+        <!-- Related Posts -->
+        @if (relatedPosts.length > 0) {
+          <section>
+            <h2 class="mb-6 text-2xl font-bold text-gray-900">{{ 'blog.relatedPosts' | translate }}</h2>
+            <div class="grid gap-8 md:grid-cols-3">
+              @for (relatedPost of relatedPosts; track relatedPost.id) {
+                <app-post-card [post]="relatedPost"></app-post-card>
+              }
+            </div>
+          </section>
+        }
+      </article>
+    }
+  \`,
+})
+export class PostDetailComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private blogService = inject(BlogService);
+
+  post?: Post;
+  comments: Comment[] = [];
+  relatedPosts: Post[] = [];
+  currentUrl = '';
+
+  newComment = {
+    author: '',
+    email: '',
+    content: '',
+  };
+
+  get renderedContent(): string {
+    if (!this.post) return '';
+    return this.post.content
+      .replace(/^# (.*$)/gm, '<h1 class="text-3xl font-bold mt-8 mb-4">$1</h1>')
+      .replace(/^## (.*$)/gm, '<h2 class="text-2xl font-bold mt-6 mb-3">$1</h2>')
+      .replace(/^### (.*$)/gm, '<h3 class="text-xl font-bold mt-4 mb-2">$1</h3>')
+      .replace(/\\\`\\\`\\\`(\\w+)?\\n([\\s\\S]*?)\\\`\\\`\\\`/g, '<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4"><code>$2</code></pre>')
+      .replace(/\\\`([^\\\`]+)\\\`/g, '<code class="bg-gray-100 px-1 rounded text-primary-600">$1</code>')
+      .replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>')
+      .replace(/\\*([^*]+)\\*/g, '<em>$1</em>')
+      .replace(/^(\\d+)\\. (.*$)/gm, '<li class="ml-6 list-decimal">$2</li>')
+      .replace(/^- (.*$)/gm, '<li class="ml-6 list-disc">$1</li>')
+      .replace(/\\n\\n/g, '</p><p class="my-4">');
+  }
+
+  constructor() {
+    this.route.params.subscribe(params => {
+      const slug = params['slug'];
+      this.post = this.blogService.getPostBySlug(slug);
+
+      if (this.post) {
+        this.comments = this.blogService.getCommentsByPostId(this.post.id);
+        this.relatedPosts = this.blogService.getRelatedPosts(this.post);
+        this.currentUrl = window.location.href;
+      } else {
+        this.router.navigate(['/']);
+      }
+    });
+  }
+
+  submitComment(): void {
+    if (this.post && this.newComment.author && this.newComment.email && this.newComment.content) {
+      this.blogService.addComment({
+        postId: this.post.id,
+        author: this.newComment.author,
+        email: this.newComment.email,
+        content: this.newComment.content,
+      });
+      this.comments = this.blogService.getCommentsByPostId(this.post.id);
+      this.newComment = { author: '', email: '', content: '' };
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/features/blog/post-detail/post-detail.component.ts"),
+    postDetail
+  );
+
+  // Category Page
+  const category = `import { Component, inject, computed } from '@angular/core';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { PostCardComponent } from '@shared/components/post-card/post-card.component';
+import { BlogService } from '@core/services/blog.service';
+
+@Component({
+  selector: 'app-category',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, PostCardComponent],
+  template: \`
+    <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+      <div class="mb-12">
+        <a routerLink="/" class="text-primary-600 hover:text-primary-700 mb-4 inline-block">
+          ← {{ 'blog.backToBlog' | translate }}
+        </a>
+        <h1 class="text-4xl font-bold text-gray-900">{{ categoryName }}</h1>
+        <p class="mt-2 text-gray-600">{{ posts().length }} {{ 'blog.postsInCategory' | translate }}</p>
+      </div>
+
+      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+        @for (post of posts(); track post.id) {
+          <app-post-card [post]="post"></app-post-card>
+        } @empty {
+          <p class="col-span-full text-gray-500">{{ 'blog.noPostsInCategory' | translate }}</p>
+        }
+      </div>
+    </div>
+  \`,
+})
+export class CategoryComponent {
+  private route = inject(ActivatedRoute);
+  private blogService = inject(BlogService);
+
+  categoryName = '';
+
+  posts = computed(() => this.blogService.getPostsByCategory(this.categoryName));
+
+  constructor() {
+    this.route.params.subscribe(params => {
+      this.categoryName = params['category'];
+    });
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/features/blog/category/category.component.ts"),
+    category
+  );
+
+  // Tag Page
+  const tag = `import { Component, inject, computed } from '@angular/core';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroTag } from '@ng-icons/heroicons/outline';
+import { PostCardComponent } from '@shared/components/post-card/post-card.component';
+import { BlogService } from '@core/services/blog.service';
+
+@Component({
+  selector: 'app-tag',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, NgIconComponent, PostCardComponent],
+  viewProviders: [provideIcons({ heroTag })],
+  template: \`
+    <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+      <div class="mb-12">
+        <a routerLink="/" class="text-primary-600 hover:text-primary-700 mb-4 inline-block">
+          ← {{ 'blog.backToBlog' | translate }}
+        </a>
+        <div class="flex items-center gap-3">
+          <ng-icon name="heroTag" size="32" class="text-primary-500"></ng-icon>
+          <h1 class="text-4xl font-bold text-gray-900">{{ tagName }}</h1>
+        </div>
+        <p class="mt-2 text-gray-600">{{ posts().length }} {{ 'blog.postsWithTag' | translate }}</p>
+      </div>
+
+      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+        @for (post of posts(); track post.id) {
+          <app-post-card [post]="post"></app-post-card>
+        } @empty {
+          <p class="col-span-full text-gray-500">{{ 'blog.noPostsWithTag' | translate }}</p>
+        }
+      </div>
+    </div>
+  \`,
+})
+export class TagComponent {
+  private route = inject(ActivatedRoute);
+  private blogService = inject(BlogService);
+
+  tagName = '';
+
+  posts = computed(() => this.blogService.getPostsByTag(this.tagName));
+
+  constructor() {
+    this.route.params.subscribe(params => {
+      this.tagName = params['tag'];
+    });
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/features/blog/tag/tag.component.ts"),
+    tag
+  );
+
+  // Author Page
+  const author = `import { Component, inject, computed, signal } from '@angular/core';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroGlobeAlt, heroCodeBracket, heroBriefcase } from '@ng-icons/heroicons/outline';
+import { PostCardComponent } from '@shared/components/post-card/post-card.component';
+import { BlogService, Author, Post } from '@core/services/blog.service';
+
+@Component({
+  selector: 'app-author',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, NgIconComponent, PostCardComponent],
+  viewProviders: [provideIcons({ heroGlobeAlt, heroCodeBracket, heroBriefcase })],
+  template: \`
+    @if (author()) {
+      <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <a routerLink="/" class="text-primary-600 hover:text-primary-700 mb-8 inline-block">
+          ← {{ 'blog.backToBlog' | translate }}
+        </a>
+
+        <!-- Author Profile -->
+        <div class="mb-12 rounded-2xl bg-linear-to-r from-primary-500 to-purple-600 p-8 text-white">
+          <div class="flex flex-col items-center gap-6 sm:flex-row">
+            <img [src]="author()!.avatar" [alt]="author()!.name" class="h-32 w-32 rounded-full border-4 border-white object-cover shadow-lg" />
+            <div class="text-center sm:text-left">
+              <h1 class="text-3xl font-bold">{{ author()!.name }}</h1>
+              <p class="mt-2 text-primary-100">{{ author()!.bio }}</p>
+
+              @if (author()!.social) {
+                <div class="mt-4 flex justify-center gap-4 sm:justify-start">
+                  @if (author()!.social!.twitter) {
+                    <a [href]="'https://twitter.com/' + author()!.social!.twitter" target="_blank" class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-white hover:bg-white/30">
+                      <span class="text-sm font-bold">𝕏</span>
+                    </a>
+                  }
+                  @if (author()!.social!.github) {
+                    <a [href]="'https://github.com/' + author()!.social!.github" target="_blank" class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-white hover:bg-white/30">
+                      <ng-icon name="heroCodeBracket" size="18"></ng-icon>
+                    </a>
+                  }
+                  @if (author()!.social!.linkedin) {
+                    <a [href]="'https://linkedin.com/in/' + author()!.social!.linkedin" target="_blank" class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-white hover:bg-white/30">
+                      <ng-icon name="heroBriefcase" size="18"></ng-icon>
+                    </a>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+
+        <!-- Author's Posts -->
+        <h2 class="mb-6 text-2xl font-bold text-gray-900">
+          {{ 'blog.postsByAuthor' | translate }} ({{ posts().length }})
+        </h2>
+
+        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          @for (post of posts(); track post.id) {
+            <app-post-card [post]="post"></app-post-card>
+          } @empty {
+            <p class="col-span-full text-gray-500">{{ 'blog.noPostsByAuthor' | translate }}</p>
+          }
+        </div>
+      </div>
+    }
+  \`,
+})
+export class AuthorComponent {
+  private route = inject(ActivatedRoute);
+  private blogService = inject(BlogService);
+
+  authorId = signal(0);
+
+  author = computed(() => {
+    const posts = this.blogService.getPostsByAuthor(this.authorId());
+    return posts.length > 0 ? posts[0].author : null;
+  });
+
+  posts = computed(() => this.blogService.getPostsByAuthor(this.authorId()));
+
+  constructor() {
+    this.route.params.subscribe(params => {
+      this.authorId.set(Number(params['id']));
+    });
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/features/blog/author/author.component.ts"),
+    author
+  );
+}
+
+module.exports = { createPages };