@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

package/templates/overlays/blog/angular/src/app/app.component.ts

@@ -0,0 +1,100 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+  template: `
+    <header class="blog-header">
+      <div class="blog-header__container">
+        <a routerLink="/" class="blog-header__logo">{{ projectName }}</a>
+        <nav class="blog-header__nav">
+          <a
+            routerLink="/"
+            routerLinkActive="blog-header__nav-link--active"
+            [routerLinkActiveOptions]="{ exact: true }"
+            class="blog-header__nav-link"
+          >Home</a>
+          <a
+            routerLink="/about"
+            routerLinkActive="blog-header__nav-link--active"
+            class="blog-header__nav-link"
+          >About</a>
+        </nav>
+      </div>
+    </header>
+    <div class="blog-content">
+      <router-outlet />
+    </div>
+    <footer class="blog-footer">
+      <div class="blog-footer__container">
+        <p>&copy; 2024 {{ projectName }}. All rights reserved.</p>
+      </div>
+    </footer>
+  `,
+  styles: [`
+    .blog-header {
+      background: #fff;
+      border-bottom: 1px solid #e5e7eb;
+      padding: 16px 0;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+
+    .blog-header__container {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 0 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .blog-header__logo {
+      font-size: 20px;
+      font-weight: 700;
+      color: #4f46e5;
+      text-decoration: none;
+    }
+
+    .blog-header__nav {
+      display: flex;
+      gap: 24px;
+    }
+
+    .blog-header__nav-link {
+      text-decoration: none;
+      color: #6b7280;
+      font-size: 15px;
+      font-weight: 500;
+      transition: color 0.2s;
+    }
+
+    .blog-header__nav-link:hover,
+    .blog-header__nav-link--active {
+      color: #4f46e5;
+    }
+
+    .blog-content {
+      min-height: calc(100vh - 140px);
+      background: #f9fafb;
+    }
+
+    .blog-footer {
+      background: #111827;
+      color: #9ca3af;
+      padding: 24px 0;
+      text-align: center;
+      font-size: 14px;
+    }
+
+    .blog-footer__container {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+  `]
+})
+export class AppComponent {}

package/templates/overlays/blog/angular/src/app/app.routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from './pages/home.component';
+import { PostDetailComponent } from './pages/post-detail.component';
+import { CategoryComponent } from './pages/category.component';
+import { AboutComponent } from './pages/about.component';
+
+export const routes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'post/:id', component: PostDetailComponent },
+  { path: 'category/:slug', component: CategoryComponent },
+  { path: 'about', component: AboutComponent },
+];

package/templates/overlays/blog/angular/src/app/components/blog-sidebar.component.ts

@@ -0,0 +1,115 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-blog-sidebar',
+  standalone: true,
+  imports: [RouterLink, FormsModule],
+  template: `
+    <div class="sidebar-widget">
+      <h3 class="sidebar-widget__title">Categories</h3>
+      @for (cat of categories; track cat) {
+        <a
+          [routerLink]="'/category/' + cat.toLowerCase()"
+          class="sidebar-widget__category-link"
+        >{{ cat }}</a>
+      }
+    </div>
+    <div class="sidebar-widget">
+      <h3 class="sidebar-widget__title">Newsletter</h3>
+      <p class="sidebar-widget__description">
+        Get the latest posts delivered to your inbox.
+      </p>
+      <input
+        [(ngModel)]="email"
+        placeholder="Your email"
+        class="sidebar-widget__input"
+      />
+      <button
+        class="sidebar-widget__subscribe-btn"
+        (click)="subscribed = true"
+      >Subscribe</button>
+      @if (subscribed) {
+        <p class="sidebar-widget__success-msg">Thanks for subscribing!</p>
+      }
+    </div>
+  `,
+  styles: [`
+    .sidebar-widget {
+      background: #fff;
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 16px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    .sidebar-widget__title {
+      font-size: 16px;
+      font-weight: 700;
+      color: #111827;
+      margin-bottom: 12px;
+    }
+
+    .sidebar-widget__category-link {
+      display: block;
+      padding: 8px 0;
+      color: #4f46e5;
+      text-decoration: none;
+      font-size: 14px;
+      border-bottom: 1px solid #f3f4f6;
+    }
+
+    .sidebar-widget__category-link:hover {
+      color: #4338ca;
+    }
+
+    .sidebar-widget__description {
+      font-size: 13px;
+      color: #6b7280;
+      margin-bottom: 12px;
+    }
+
+    .sidebar-widget__input {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      font-size: 14px;
+      margin-bottom: 8px;
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    .sidebar-widget__input:focus {
+      border-color: #4f46e5;
+    }
+
+    .sidebar-widget__subscribe-btn {
+      width: 100%;
+      padding: 10px;
+      background: #4f46e5;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+    }
+
+    .sidebar-widget__subscribe-btn:hover {
+      background: #4338ca;
+    }
+
+    .sidebar-widget__success-msg {
+      margin-top: 8px;
+      color: #059669;
+      font-size: 13px;
+    }
+  `]
+})
+export class BlogSidebarComponent {
+  categories: string[] = ['Angular', 'TypeScript', 'CSS', 'Node.js', 'DevOps'];
+  email = '';
+  subscribed = false;
+}

package/templates/overlays/blog/angular/src/app/components/post-card.component.ts

@@ -0,0 +1,94 @@
+import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+export interface BlogPost {
+  id: number;
+  title: string;
+  excerpt: string;
+  content: string;
+  category: string;
+  author: string;
+  date: string;
+  readTime: string;
+  image: string;
+}
+
+@Component({
+  selector: 'app-post-card',
+  standalone: true,
+  imports: [RouterLink],
+  template: `
+    <a [routerLink]="'/post/' + post.id" class="post-card">
+      <div class="post-card__image">{{ post.image }}</div>
+      <div class="post-card__body">
+        <span class="post-card__category">{{ post.category }}</span>
+        <h3 class="post-card__title">{{ post.title }}</h3>
+        <p class="post-card__excerpt">{{ post.excerpt }}</p>
+        <div class="post-card__meta">
+          <span>{{ post.author }}</span>
+          <span>{{ post.date }}</span>
+          <span>{{ post.readTime }}</span>
+        </div>
+      </div>
+    </a>
+  `,
+  styles: [`
+    .post-card {
+      display: block;
+      background: #fff;
+      border-radius: 12px;
+      overflow: hidden;
+      text-decoration: none;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .post-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    }
+
+    .post-card__image {
+      font-size: 48px;
+      text-align: center;
+      padding: 24px;
+      background: #f3f4f6;
+    }
+
+    .post-card__body {
+      padding: 20px;
+    }
+
+    .post-card__category {
+      font-size: 12px;
+      font-weight: 600;
+      color: #4f46e5;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .post-card__title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #111827;
+      margin: 8px 0;
+    }
+
+    .post-card__excerpt {
+      font-size: 14px;
+      color: #6b7280;
+      line-height: 1.5;
+      margin-bottom: 12px;
+    }
+
+    .post-card__meta {
+      display: flex;
+      gap: 12px;
+      font-size: 12px;
+      color: #9ca3af;
+    }
+  `]
+})
+export class PostCardComponent {
+  @Input() post!: BlogPost;
+}

package/templates/overlays/blog/angular/src/app/pages/about.component.ts

@@ -0,0 +1,114 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  standalone: true,
+  template: `
+    <div class="about-page">
+      <div class="about-card">
+        <div class="about-card__avatar">👩‍💻</div>
+        <h1 class="about-card__label">About the Author</h1>
+        <h2 class="about-card__name">Jane Developer</h2>
+        <p class="about-card__bio">
+          Full-stack developer with over 8 years of experience building web applications.
+          Passionate about Angular, TypeScript, and creating elegant solutions to complex problems.
+          When not coding, you can find me writing tutorials and contributing to open source.
+        </p>
+        <div class="about-card__stats">
+          <div class="about-card__stat">
+            <span class="about-card__stat-value">150+</span>
+            <span class="about-card__stat-label">Articles</span>
+          </div>
+          <div class="about-card__stat">
+            <span class="about-card__stat-value">50K+</span>
+            <span class="about-card__stat-label">Readers</span>
+          </div>
+          <div class="about-card__stat">
+            <span class="about-card__stat-value">8+</span>
+            <span class="about-card__stat-label">Years</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .about-page {
+      max-width: 640px;
+      margin: 0 auto;
+      padding: 48px 24px;
+    }
+
+    .about-card {
+      background: #fff;
+      border-radius: 16px;
+      padding: 40px;
+      text-align: center;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    .about-card__avatar {
+      font-size: 72px;
+      margin-bottom: 16px;
+    }
+
+    .about-card__label {
+      font-size: 14px;
+      font-weight: 600;
+      color: #4f46e5;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 8px;
+    }
+
+    .about-card__name {
+      font-size: 28px;
+      font-weight: 800;
+      color: #111827;
+      margin-bottom: 16px;
+    }
+
+    .about-card__bio {
+      font-size: 16px;
+      color: #374151;
+      line-height: 1.7;
+      margin-bottom: 32px;
+    }
+
+    .about-card__stats {
+      display: flex;
+      justify-content: center;
+      gap: 48px;
+    }
+
+    .about-card__stat {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .about-card__stat-value {
+      font-size: 24px;
+      font-weight: 700;
+      color: #4f46e5;
+    }
+
+    .about-card__stat-label {
+      font-size: 13px;
+      color: #6b7280;
+    }
+
+    @media (max-width: 768px) {
+      .about-card {
+        padding: 24px;
+      }
+
+      .about-card__stats {
+        gap: 24px;
+      }
+
+      .about-card__name {
+        font-size: 22px;
+      }
+    }
+  `]
+})
+export class AboutComponent {}

package/templates/overlays/blog/angular/src/app/pages/category.component.ts

@@ -0,0 +1,141 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PostCardComponent } from '../components/post-card.component';
+import { BlogPost } from '../components/post-card.component';
+
+@Component({
+  selector: 'app-category',
+  standalone: true,
+  imports: [PostCardComponent],
+  template: `
+    <div class="category-page">
+      <h1 class="category-page__heading">Category: {{ slug }}</h1>
+      <div class="category-page__grid">
+        @for (post of filtered; track post.id) {
+          <app-post-card [post]="post" />
+        }
+      </div>
+      @if (filtered.length === 0) {
+        <p class="category-page__empty-message">
+          No posts found in this category.
+        </p>
+      }
+    </div>
+  `,
+  styles: [`
+    .category-page {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 32px 24px;
+    }
+
+    .category-page__heading {
+      font-size: 28px;
+      font-weight: 700;
+      color: #111827;
+      margin-bottom: 24px;
+      text-transform: capitalize;
+    }
+
+    .category-page__grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+    }
+
+    .category-page__empty-message {
+      color: #6b7280;
+      font-size: 16px;
+      text-align: center;
+      padding: 48px 0;
+    }
+
+    @media (max-width: 768px) {
+      .category-page__grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  `]
+})
+export class CategoryComponent implements OnInit {
+  slug = '';
+  filtered: BlogPost[] = [];
+
+  private posts: BlogPost[] = [
+    {
+      id: 1,
+      title: 'Getting Started with Angular 19',
+      excerpt: 'Learn the latest features...',
+      content: '',
+      category: 'Angular',
+      author: 'Jane Developer',
+      date: '2024-12-15',
+      readTime: '5 min',
+      image: '🅰️',
+    },
+    {
+      id: 2,
+      title: 'TypeScript Best Practices',
+      excerpt: 'Write better TypeScript...',
+      content: '',
+      category: 'TypeScript',
+      author: 'John Coder',
+      date: '2024-12-10',
+      readTime: '7 min',
+      image: '📘',
+    },
+    {
+      id: 3,
+      title: 'CSS Grid Mastery',
+      excerpt: 'Master CSS Grid layouts...',
+      content: '',
+      category: 'CSS',
+      author: 'Jane Developer',
+      date: '2024-12-05',
+      readTime: '6 min',
+      image: '🎨',
+    },
+    {
+      id: 4,
+      title: 'RxJS Patterns',
+      excerpt: 'Essential reactive patterns...',
+      content: '',
+      category: 'Angular',
+      author: 'Mike RxJS',
+      date: '2024-11-28',
+      readTime: '8 min',
+      image: '🔄',
+    },
+    {
+      id: 5,
+      title: 'Node.js Performance Tips',
+      excerpt: 'Optimize your Node.js apps...',
+      content: '',
+      category: 'Node.js',
+      author: 'John Coder',
+      date: '2024-11-20',
+      readTime: '6 min',
+      image: '🟢',
+    },
+    {
+      id: 6,
+      title: 'Testing Strategies',
+      excerpt: 'Comprehensive testing guide...',
+      content: '',
+      category: 'DevOps',
+      author: 'Jane Developer',
+      date: '2024-11-15',
+      readTime: '9 min',
+      image: '🧪',
+    },
+  ];
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.slug = this.route.snapshot.paramMap.get('slug') || '';
+    this.filtered = this.posts.filter(
+      (p: BlogPost) => p.category.toLowerCase() === this.slug.toLowerCase()
+    );
+  }
+}