create-ng-tailwind 3.0.1 → 4.0.0

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 };

package/lib/templates/blog/index.js

@@ -0,0 +1,126 @@
+const fs = require("fs-extra");
+const path = require("path");
+const starter = require("../starter");
+
+// Import modular components
+const { createServices } = require("./services");
+const { createComponents } = require("./components");
+const { createPages } = require("./pages");
+const { createI18n } = require("./i18n");
+const { createRouting, createAppComponent, cleanupStarterLayout } = require("./app");
+
+/**
+ * Blog/CMS Template
+ * Extends starter template with:
+ * - Blog posts listing with pagination
+ * - Post detail with markdown rendering
+ * - Categories and tags
+ * - Comments system
+ * - Author profiles
+ * - Search functionality
+ * - RSS feed support
+ */
+const blog = {
+  info: {
+    name: "Blog/CMS",
+    description: "Content management system with posts, categories, tags, and comments",
+    features: [
+      ...starter.info.features,
+      "Blog posts with markdown support",
+      "Categories and tags system",
+      "Comments with replies",
+      "Author profiles",
+      "Search functionality",
+      "Reading time estimation",
+      "Related posts",
+      "Social sharing",
+      "Newsletter subscription",
+      "Blog-focused header with dynamic categories",
+      "Blog-focused footer with newsletter signup",
+    ],
+  },
+
+  async apply(config, spinner) {
+    const chalk = require("chalk");
+
+    const completeStep = (message) => {
+      if (spinner) {
+        spinner.stop();
+        console.log(chalk.green("  ✔") + chalk.white(" " + message));
+        spinner.start();
+      }
+    };
+
+    // Step 1: Apply starter template (infrastructure)
+    if (spinner) spinner.update("Setting up starter foundation...");
+    await starter.apply(config, null);
+
+    // Step 2: Create blog-specific directories
+    if (spinner) spinner.update("Setting up blog structure...");
+    await this.createDirectories(config);
+
+    // Step 3: Create blog services
+    await createServices(config);
+
+    // Step 4: Create blog components
+    await createComponents(config);
+
+    // Step 5: Create blog pages
+    await createPages(config);
+
+    // Step 6: Create routing
+    await createRouting(config);
+
+    // Step 7: Create app component (blog-specific header/footer)
+    await createAppComponent(config);
+
+    // Step 8: Clean up starter layout (blog has its own header/footer)
+    await cleanupStarterLayout(config);
+
+    // Step 9: Add i18n translations
+    await createI18n(config);
+
+    // Step 10: Format code
+    const base = require("../base");
+    await base.formatCode(config);
+
+    if (spinner) spinner.stop();
+
+    // Show summary
+    console.log("");
+    completeStep("Blog/CMS template created");
+    completeStep("Posts with markdown support");
+    completeStep("Categories and tags system");
+    completeStep("Comments with replies");
+    completeStep("Author profiles");
+    completeStep("Search functionality");
+    completeStep("Blog-focused header with dynamic categories");
+    completeStep("Blog-focused footer with newsletter signup");
+    console.log("");
+  },
+
+  async createDirectories(config) {
+    const directories = [
+      "src/app/features/blog",
+      "src/app/features/blog/post-list",
+      "src/app/features/blog/post-detail",
+      "src/app/features/blog/category",
+      "src/app/features/blog/tag",
+      "src/app/features/blog/author",
+      "src/app/features/blog/search",
+      "src/app/shared/components/post-card",
+      "src/app/shared/components/comment",
+      "src/app/shared/components/tag-list",
+      "src/app/shared/components/share-buttons",
+      "src/app/shared/components/reading-time",
+      "src/app/shared/components/pagination",
+      "src/app/core/services",
+    ];
+
+    for (const dir of directories) {
+      await fs.ensureDir(path.join(config.fullPath, dir));
+    }
+  },
+};
+
+module.exports = blog;