@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

package/templates/overlays/blog/vue/src/components/BlogSidebar.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { categories } from '../data'
+
+const email = ref('')
+const subscribed = ref(false)
+
+const subscribe = () => {
+  if (email.value) {
+    subscribed.value = true
+    email.value = ''
+  }
+}
+</script>
+
+<template>
+  <aside class="blog-sidebar">
+    <h3>Categories</h3>
+    <ul class="category-list">
+      <li v-for="cat in categories" :key="cat">
+        <RouterLink :to="`/category/${cat.toLowerCase().replace('.', '')}`">{{ cat }}</RouterLink>
+      </li>
+    </ul>
+    <h3>Newsletter</h3>
+    <div class="newsletter-form">
+      <input v-model="email" type="email" placeholder="your@email.com" />
+      <button @click="subscribe">Subscribe</button>
+      <p v-if="subscribed" style="color: #059669; font-size: 0.8rem; margin-top: 0.4rem;">Subscribed!</p>
+    </div>
+  </aside>
+</template>

package/templates/overlays/blog/vue/src/components/PostCard.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { Post } from '../data'
+
+defineProps<{ post: Post }>()
+</script>
+
+<template>
+  <RouterLink :to="`/post/${post.id}`" class="post-card" style="text-decoration: none; color: inherit;">
+    <div class="post-image">{{ post.image }}</div>
+    <div class="post-body">
+      <div class="post-category">{{ post.category }}</div>
+      <div class="post-title">{{ post.title }}</div>
+      <div class="post-excerpt">{{ post.excerpt }}</div>
+      <div class="post-meta">{{ post.author }} &middot; {{ post.date }} &middot; {{ post.readTime }}</div>
+    </div>
+  </RouterLink>
+</template>

package/templates/overlays/blog/vue/src/data.ts

@@ -0,0 +1,82 @@
+export interface Post {
+  id: number
+  title: string
+  excerpt: string
+  content: string
+  category: string
+  author: string
+  date: string
+  readTime: string
+  image: string
+}
+
+export const categories = ['React', 'TypeScript', 'CSS', 'JavaScript', 'Node.js', 'DevOps']
+
+export const posts: Post[] = [
+  {
+    id: 1,
+    title: 'Getting Started with React Hooks',
+    excerpt: 'Learn how to use useState and useEffect to manage state and side effects in functional components.',
+    content: 'React Hooks revolutionized how we write components. With useState, you can add state to functional components without converting them to classes. The useEffect hook handles side effects like data fetching, subscriptions, and DOM manipulation. Together, they provide a cleaner and more composable way to build React applications.',
+    category: 'React',
+    author: 'Jane Developer',
+    date: 'Mar 15, 2025',
+    readTime: '5 min read',
+    image: '⚛️',
+  },
+  {
+    id: 2,
+    title: 'TypeScript Best Practices for 2025',
+    excerpt: 'Explore advanced TypeScript patterns including generics, utility types, and strict configurations.',
+    content: 'TypeScript continues to evolve with powerful features. Generics allow you to write reusable, type-safe code. Utility types like Partial, Pick, and Omit help you transform existing types. Enabling strict mode catches more bugs at compile time. These practices lead to more maintainable and robust codebases.',
+    category: 'TypeScript',
+    author: 'Jane Developer',
+    date: 'Mar 10, 2025',
+    readTime: '7 min read',
+    image: '📘',
+  },
+  {
+    id: 3,
+    title: 'Modern CSS Layout Techniques',
+    excerpt: 'Master CSS Grid and Flexbox to create responsive layouts without frameworks.',
+    content: 'CSS Grid and Flexbox are the foundation of modern web layouts. Grid excels at two-dimensional layouts while Flexbox handles one-dimensional alignment. Combined with container queries and logical properties, you can build truly responsive designs that adapt to any context without relying on external frameworks.',
+    category: 'CSS',
+    author: 'Alex Writer',
+    date: 'Mar 5, 2025',
+    readTime: '6 min read',
+    image: '🎨',
+  },
+  {
+    id: 4,
+    title: 'Building REST APIs with Node.js',
+    excerpt: 'A comprehensive guide to creating scalable REST APIs using Express and Node.js.',
+    content: 'Node.js makes it straightforward to build performant REST APIs. Using Express as your framework, you can define routes, middleware, and error handlers. Add validation with libraries like Zod, connect to databases with ORMs, and implement authentication with JWT tokens for a complete backend solution.',
+    category: 'Node.js',
+    author: 'Alex Writer',
+    date: 'Feb 28, 2025',
+    readTime: '8 min read',
+    image: '🟢',
+  },
+  {
+    id: 5,
+    title: 'JavaScript ES2025 Features',
+    excerpt: 'Discover the latest JavaScript features including new array methods and pattern matching.',
+    content: 'ES2025 brings exciting additions to JavaScript. New array methods like groupBy simplify data transformations. The pipeline operator makes function composition more readable. Pattern matching with the match expression provides powerful control flow. These features make JavaScript more expressive and developer-friendly.',
+    category: 'JavaScript',
+    author: 'Jane Developer',
+    date: 'Feb 20, 2025',
+    readTime: '4 min read',
+    image: '✨',
+  },
+  {
+    id: 6,
+    title: 'Docker for Frontend Developers',
+    excerpt: 'Learn how to containerize your frontend applications for consistent deployments.',
+    content: 'Docker simplifies deployment by packaging your application with its dependencies. Create a Dockerfile for your frontend app, use multi-stage builds to optimize image size, and deploy consistently across environments. Docker Compose helps manage multi-service setups with databases and API servers alongside your frontend.',
+    category: 'DevOps',
+    author: 'Alex Writer',
+    date: 'Feb 15, 2025',
+    readTime: '6 min read',
+    image: '🐳',
+  },
+]

package/templates/overlays/blog/vue/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import './style.css'
+
+createApp(App).use(router).mount('#app')

package/templates/overlays/blog/vue/src/pages/About.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="about-page">
+    <div class="about-avatar">👩‍💻</div>
+    <h1>Jane Developer</h1>
+    <p class="about-role">Full-Stack Developer &amp; Technical Writer</p>
+    <div class="about-bio">
+      <p>Hi! I'm Jane, a passionate developer with over 8 years of experience building web applications. I write about React, TypeScript, Node.js, and modern web development practices.</p>
+      <br />
+      <p>When I'm not coding, you can find me contributing to open-source projects, mentoring junior developers, or exploring new technologies. I believe in writing clean, maintainable code and sharing knowledge with the community.</p>
+      <br />
+      <p>This blog is my space to share tutorials, best practices, and insights from real-world projects. Feel free to reach out if you have questions or want to collaborate!</p>
+    </div>
+  </div>
+</template>

package/templates/overlays/blog/vue/src/pages/Category.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import PostCard from '../components/PostCard.vue'
+import { posts } from '../data'
+
+const route = useRoute()
+
+const slug = computed(() => route.params.slug as string)
+
+const filtered = computed(() =>
+  posts.filter(p => p.category.toLowerCase().replace('.', '') === slug.value)
+)
+
+const categoryName = computed(() =>
+  filtered.value.length ? filtered.value[0].category : slug.value
+)
+</script>
+
+<template>
+  <div>
+    <div class="category-header">
+      <h1>{{ categoryName }}</h1>
+      <p style="color: #6b7280; margin-bottom: 1rem;">{{ filtered.length }} post(s) in this category</p>
+    </div>
+    <div class="posts-grid">
+      <PostCard v-for="post in filtered" :key="post.id" :post="post" />
+    </div>
+    <p v-if="!filtered.length" style="color: #6b7280;">No posts found in this category.</p>
+    <RouterLink to="/" style="display: inline-block; margin-top: 1rem;">&larr; Back to all posts</RouterLink>
+  </div>
+</template>

package/templates/overlays/blog/vue/src/pages/Home.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import PostCard from '../components/PostCard.vue'
+import BlogSidebar from '../components/BlogSidebar.vue'
+import { posts } from '../data'
+</script>
+
+<template>
+  <div class="blog-layout">
+    <div class="posts-grid">
+      <PostCard v-for="post in posts" :key="post.id" :post="post" />
+    </div>
+    <BlogSidebar />
+  </div>
+</template>

package/templates/overlays/blog/vue/src/pages/PostDetail.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { posts } from '../data'
+
+const route = useRoute()
+const post = computed(() => posts.find(p => p.id === Number(route.params.id)))
+</script>
+
+<template>
+  <div class="post-detail" v-if="post">
+    <RouterLink to="/" class="back-link">&larr; Back to posts</RouterLink>
+    <div class="post-hero-image">{{ post.image }}</div>
+    <h1>{{ post.title }}</h1>
+    <div class="detail-meta">{{ post.author }} &middot; {{ post.date }} &middot; {{ post.readTime }}</div>
+    <div class="post-content">{{ post.content }}</div>
+  </div>
+  <div v-else class="post-detail">
+    <RouterLink to="/" class="back-link">&larr; Back to posts</RouterLink>
+    <p>Post not found.</p>
+  </div>
+</template>

package/templates/overlays/blog/vue/src/router.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from './pages/Home.vue'
+import PostDetail from './pages/PostDetail.vue'
+import Category from './pages/Category.vue'
+import About from './pages/About.vue'
+
+const routes = [
+  { path: '/', component: Home },
+  { path: '/post/:id', component: PostDetail },
+  { path: '/category/:slug', component: Category },
+  { path: '/about', component: About },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router

package/templates/overlays/blog/vue/src/style.css

@@ -0,0 +1,288 @@
+/* Blog Global Styles */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: #374151;
+  background: #f9fafb;
+  line-height: 1.7;
+}
+
+a {
+  color: #4f46e5;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Header */
+.blog-header {
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1100px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.blog-header-wrap {
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.blog-header .logo {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.blog-header nav {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.blog-header nav a {
+  color: #6b7280;
+  font-weight: 500;
+  font-size: 0.95rem;
+  text-decoration: none;
+}
+
+.blog-header nav a:hover,
+.blog-header nav a.router-link-exact-active {
+  color: #4f46e5;
+}
+
+/* Post Cards */
+.posts-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.post-card {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  display: flex;
+  transition: box-shadow 0.2s;
+}
+
+.post-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.post-card .post-image {
+  width: 180px;
+  min-height: 140px;
+  background: #eef2ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+  flex-shrink: 0;
+}
+
+.post-card .post-body {
+  padding: 1.25rem;
+  flex: 1;
+}
+
+.post-card .post-category {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #4f46e5;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.post-card .post-title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: #111827;
+  margin: 0.3rem 0 0.4rem;
+}
+
+.post-card .post-excerpt {
+  font-size: 0.9rem;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+.post-card .post-meta {
+  margin-top: 0.75rem;
+  font-size: 0.8rem;
+  color: #9ca3af;
+}
+
+/* Post Detail */
+.post-detail {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.post-detail .back-link {
+  display: inline-block;
+  margin-bottom: 1.5rem;
+  font-size: 0.9rem;
+  color: #4f46e5;
+}
+
+.post-detail .post-hero-image {
+  font-size: 4rem;
+  text-align: center;
+  background: #eef2ff;
+  padding: 2rem;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+}
+
+.post-detail h1 {
+  font-size: 2rem;
+  color: #111827;
+  margin-bottom: 0.5rem;
+}
+
+.post-detail .detail-meta {
+  color: #6b7280;
+  font-size: 0.9rem;
+  margin-bottom: 1.5rem;
+}
+
+.post-detail .post-content {
+  font-size: 1.05rem;
+  line-height: 1.8;
+  color: #374151;
+}
+
+/* Blog Sidebar */
+.blog-layout {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 2rem;
+}
+
+.blog-sidebar {
+  background: #fff;
+  border-radius: 8px;
+  padding: 1.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  height: fit-content;
+}
+
+.blog-sidebar h3 {
+  font-size: 0.95rem;
+  color: #111827;
+  margin-bottom: 0.75rem;
+}
+
+.blog-sidebar .category-list {
+  list-style: none;
+  margin-bottom: 1.5rem;
+}
+
+.blog-sidebar .category-list li {
+  margin-bottom: 0.4rem;
+}
+
+.blog-sidebar .category-list a {
+  font-size: 0.9rem;
+  color: #6b7280;
+}
+
+.blog-sidebar .category-list a:hover {
+  color: #4f46e5;
+}
+
+.blog-sidebar .newsletter-form input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+}
+
+.blog-sidebar .newsletter-form button {
+  width: 100%;
+  padding: 0.5rem;
+  background: #4f46e5;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.blog-sidebar .newsletter-form button:hover {
+  background: #4338ca;
+}
+
+/* About Page */
+.about-page {
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.about-page .about-avatar {
+  font-size: 4rem;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.about-page h1 {
+  font-size: 1.75rem;
+  color: #111827;
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.about-page .about-role {
+  text-align: center;
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+}
+
+.about-page .about-bio {
+  font-size: 1rem;
+  line-height: 1.8;
+  color: #374151;
+  background: #fff;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Category Page */
+.category-header {
+  margin-bottom: 1.5rem;
+}
+
+.category-header h1 {
+  font-size: 1.5rem;
+  color: #111827;
+}
+
+/* Footer */
+.blog-footer {
+  text-align: center;
+  padding: 1.5rem;
+  color: #9ca3af;
+  font-size: 0.85rem;
+  border-top: 1px solid #e5e7eb;
+  background: #fff;
+  margin-top: auto;
+}

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

@@ -0,0 +1,110 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+  template: `
+    <div class="layout">
+      <aside class="sidebar">
+        <div class="logo">{{projectName}}</div>
+        <nav>
+          <a routerLink="/" routerLinkActive="active"
+             [routerLinkActiveOptions]="{ exact: true }">
+            <span class="nav-icon">📊</span> Dashboard
+          </a>
+          <a routerLink="/contacts" routerLinkActive="active">
+            <span class="nav-icon">👤</span> Contacts
+          </a>
+          <a routerLink="/deals" routerLinkActive="active">
+            <span class="nav-icon">💼</span> Deals
+          </a>
+          <a routerLink="/settings" routerLinkActive="active">
+            <span class="nav-icon">⚙️</span> Settings
+          </a>
+        </nav>
+      </aside>
+      <main class="content">
+        <router-outlet />
+      </main>
+    </div>
+  `,
+  styles: [`
+    .layout {
+      display: flex;
+      min-height: 100vh;
+      background: #f9fafb;
+    }
+
+    .sidebar {
+      width: 240px;
+      background: #111827;
+      color: #fff;
+      padding: 24px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+    }
+
+    .logo {
+      font-size: 20px;
+      font-weight: 700;
+      color: #fff;
+      padding: 0 8px;
+    }
+
+    nav {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    nav a {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      color: #9ca3af;
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      transition: all 0.2s;
+    }
+
+    nav a:hover {
+      background: #1f2937;
+      color: #fff;
+    }
+
+    nav a.active {
+      background: #4f46e5;
+      color: #fff;
+    }
+
+    .nav-icon { font-size: 18px; }
+
+    .content {
+      flex: 1;
+      padding: 32px;
+      overflow-y: auto;
+    }
+
+    @media (max-width: 768px) {
+      .layout { flex-direction: column; }
+
+      .sidebar {
+        width: 100%;
+        padding: 16px;
+        gap: 16px;
+      }
+
+      nav {
+        flex-direction: row;
+        overflow-x: auto;
+      }
+    }
+  `]
+})
+export class AppComponent {}

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

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+import { DashboardHomeComponent } from './pages/dashboard-home.component';
+import { ContactsComponent } from './pages/contacts.component';
+import { DealsComponent } from './pages/deals.component';
+import { SettingsComponent } from './pages/settings.component';
+
+export const routes: Routes = [
+  { path: '', component: DashboardHomeComponent },
+  { path: 'contacts', component: ContactsComponent },
+  { path: 'deals', component: DealsComponent },
+  { path: 'settings', component: SettingsComponent },
+];