@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

package/templates/overlays/blog/react/src/App.css

@@ -1,41 +1,81 @@
+/* Blog Layout */
 .blog { min-height: 100vh; display: flex; flex-direction: column; }
+.blog-main { flex: 1; max-width: 1100px; margin: 0 auto; padding: 2rem; width: 100%; box-sizing: border-box; }
 
+/* Header */
 .blog-header { border-bottom: 1px solid #e5e7eb; }
-.blog-header .header-content { max-width: 1100px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; justify-content: space-between; align-items: center; }
-.blog-title { font-size: 1.5rem; color: #111827; margin: 0; }
+.header-content { max-width: 1100px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; justify-content: space-between; align-items: center; }
+.blog-title { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0; text-decoration: none; }
 .blog-nav { display: flex; gap: 1.5rem; }
-.blog-nav a { text-decoration: none; color: #6b7280; font-weight: 500; }
-.blog-nav a:hover, .blog-nav a.active { color: #4f46e5; }
+.blog-nav a { text-decoration: none; color: #6b7280; font-weight: 500; transition: color 0.15s; }
+.blog-nav a:hover,
+.blog-nav a.active { color: #4f46e5; }
 
-.blog-layout { max-width: 1100px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: 1fr 300px; gap: 3rem; flex: 1; }
+/* Blog Layout Grid */
+.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; }
 
+/* Post Cards */
+.post-list { display: flex; flex-direction: column; }
 .post-card { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #f3f4f6; }
 .post-image { font-size: 3rem; width: 80px; text-align: center; flex-shrink: 0; }
-.post-category { font-size: 0.75rem; color: #4f46e5; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+.post-body { flex: 1; }
+.post-category { font-size: 0.75rem; color: #4f46e5; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; }
+.post-category:hover { color: #4338ca; }
+.post-title-link { text-decoration: none; }
 .post-title { font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0.25rem 0 0.5rem; }
+.post-title-link:hover .post-title { color: #4f46e5; }
 .post-excerpt { color: #6b7280; line-height: 1.6; margin-bottom: 0.75rem; }
 .post-meta { display: flex; gap: 1rem; font-size: 0.8rem; color: #9ca3af; }
 
+/* Sidebar */
 .blog-sidebar { display: flex; flex-direction: column; gap: 2rem; }
 .sidebar-section { background: #f9fafb; padding: 1.5rem; border-radius: 12px; }
 .sidebar-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: #111827; }
 .sidebar-section p { color: #6b7280; font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.75rem; }
 .category-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
-.category-tag { background: white; border: 1px solid #e5e7eb; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; color: #374151; text-decoration: none; }
+.category-tag { background: white; border: 1px solid #e5e7eb; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; color: #374151; text-decoration: none; transition: all 0.15s; }
 .category-tag:hover { border-color: #4f46e5; color: #4f46e5; }
-.newsletter-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; margin-bottom: 0.5rem; }
+.newsletter-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; margin-bottom: 0.5rem; box-sizing: border-box; }
 .newsletter-btn { width: 100%; background: #4f46e5; color: white; border: none; padding: 0.5rem; border-radius: 6px; cursor: pointer; font-weight: 600; }
+.newsletter-btn:hover { background: #4338ca; }
 
-.blog-footer { border-top: 1px solid #e5e7eb; padding: 2rem; text-align: center; color: #9ca3af; font-size: 0.875rem; }
+/* Post Detail */
+.post-detail { max-width: 720px; margin: 0 auto; }
+.back-link { display: inline-block; color: #4f46e5; text-decoration: none; font-size: 0.9rem; margin-bottom: 1.5rem; }
+.back-link:hover { text-decoration: underline; }
+.post-detail-image { font-size: 4rem; display: block; margin-bottom: 1rem; }
+.post-detail-title { font-size: 2rem; font-weight: 800; color: #111827; margin: 0.5rem 0 1rem; }
+.post-detail-content { color: #374151; line-height: 1.8; font-size: 1.05rem; margin: 2rem 0; }
+.author-bio { background: #f9fafb; border-radius: 12px; padding: 1.5rem; margin-top: 2rem; }
+.author-bio h3 { font-size: 1rem; color: #111827; margin-bottom: 0.5rem; }
+.author-bio p { color: #6b7280; line-height: 1.6; }
+
+/* Category Page */
+.category-page { max-width: 720px; margin: 0 auto; }
+.category-heading { font-size: 1.75rem; font-weight: 700; color: #111827; margin-bottom: 1.5rem; }
+.no-posts { color: #6b7280; }
 
-@media (max-width: 768px) { .blog-layout { grid-template-columns: 1fr; } .post-card { flex-direction: column; } }
+/* About Page */
+.about-page { max-width: 720px; margin: 0 auto; }
+.about-title { font-size: 2rem; font-weight: 800; color: #111827; margin-bottom: 1rem; }
+.about-description { color: #374151; line-height: 1.7; font-size: 1.05rem; margin-bottom: 2rem; }
+.author-card { display: flex; gap: 1.5rem; background: #f9fafb; border-radius: 12px; padding: 2rem; margin-bottom: 2rem; }
+.author-avatar { font-size: 3rem; }
+.author-info h2 { font-size: 1.25rem; color: #111827; margin: 0 0 0.25rem; }
+.author-role { color: #4f46e5; font-weight: 600; margin-bottom: 0.5rem; }
+.author-info p { color: #6b7280; line-height: 1.6; }
+.contact-info-section h2 { font-size: 1.25rem; color: #111827; margin-bottom: 0.5rem; }
+.contact-info-section p { color: #6b7280; margin-bottom: 1rem; }
+.contact-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; color: #374151; }
+
+/* Footer */
+.blog-footer { border-top: 1px solid #e5e7eb; padding: 2rem; text-align: center; color: #9ca3af; font-size: 0.875rem; }
 
-@media (prefers-color-scheme: dark) {
-  .blog-header { border-color: #374151; }
-  .blog-title, .post-title, .sidebar-section h3 { color: white; }
-  .post-card { border-color: #374151; }
-  .sidebar-section { background: #1f2937; }
-  .category-tag { background: #1f2937; border-color: #374151; color: #d1d5db; }
-  .newsletter-input { background: #1f2937; border-color: #374151; color: white; }
-  .blog-footer { border-color: #374151; }
+/* Responsive */
+@media (max-width: 768px) {
+  .blog-layout { grid-template-columns: 1fr; }
+  .post-card { flex-direction: column; }
+  .header-content { flex-direction: column; gap: 0.75rem; }
+  .author-card { flex-direction: column; text-align: center; }
+  .post-detail-title { font-size: 1.5rem; }
 }

package/templates/overlays/blog/react/src/App.tsx

@@ -1,38 +1,23 @@
-import { BlogHeader } from './components/BlogHeader';
-import { PostList } from './components/PostList';
-import { BlogSidebar } from './components/BlogSidebar';
-import { BlogFooter } from './components/BlogFooter';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Layout from './components/Layout';
+import Home from './pages/Home';
+import PostDetail from './pages/PostDetail';
+import Category from './pages/Category';
+import About from './pages/About';
 import './App.css';
 
-export interface Post {
-  id: number;
-  title: string;
-  excerpt: string;
-  author: string;
-  date: string;
-  category: string;
-  readTime: string;
-  image: string;
-}
-
-const posts: Post[] = [
-  { id: 1, title: 'Getting Started with Modern Web Development', excerpt: 'Learn the fundamentals of modern web development including frameworks, build tools, and best practices.', author: 'Beknur', date: 'Feb 20, 2025', category: 'Tutorial', readTime: '5 min', image: '📘' },
-  { id: 2, title: 'Understanding TypeScript Generics', excerpt: 'A deep dive into TypeScript generics and how they can make your code more reusable and type-safe.', author: 'Beknur', date: 'Feb 18, 2025', category: 'TypeScript', readTime: '8 min', image: '📗' },
-  { id: 3, title: 'CSS Grid vs Flexbox: When to Use Which', excerpt: 'A practical comparison of CSS Grid and Flexbox with real-world examples and use cases.', author: 'Beknur', date: 'Feb 15, 2025', category: 'CSS', readTime: '6 min', image: '📙' },
-  { id: 4, title: 'Building Accessible Web Applications', excerpt: 'Best practices for building web applications that are accessible to everyone.', author: 'Beknur', date: 'Feb 12, 2025', category: 'Accessibility', readTime: '7 min', image: '📕' },
-  { id: 5, title: 'State Management in 2025', excerpt: 'An overview of state management solutions and when to use them in modern applications.', author: 'Beknur', date: 'Feb 10, 2025', category: 'Architecture', readTime: '10 min', image: '📓' },
-];
-
 function App() {
   return (
-    <div className="blog">
-      <BlogHeader />
-      <div className="blog-layout">
-        <PostList posts={posts} />
-        <BlogSidebar />
-      </div>
-      <BlogFooter />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="post/:id" element={<PostDetail />} />
+          <Route path="category/:slug" element={<Category />} />
+          <Route path="about" element={<About />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

package/templates/overlays/blog/react/src/components/BlogFooter.tsx

@@ -1,7 +1,9 @@
-export function BlogFooter() {
+function BlogFooter() {
   return (
     <footer className="blog-footer">
-      <p>&copy; 2025 {{projectName}}. Built with passion for the web.</p>
+      <p>&copy; 2025 {'{{projectName}}'}. Built with passion for the web.</p>
     </footer>
   );
 }
+
+export default BlogFooter;

package/templates/overlays/blog/react/src/components/BlogHeader.tsx

@@ -1,15 +1,21 @@
-export function BlogHeader() {
+import { NavLink } from 'react-router-dom';
+
+function BlogHeader() {
   return (
     <header className="blog-header">
       <div className="header-content">
-        <h1 className="blog-title">{{projectName}}</h1>
+        <NavLink to="/" className="blog-title">{'{{projectName}}'}</NavLink>
         <nav className="blog-nav">
-          <a href="#" className="active">Home</a>
-          <a href="#">Articles</a>
-          <a href="#">Categories</a>
-          <a href="#">About</a>
+          <NavLink to="/" end className={({ isActive }) => isActive ? 'active' : ''}>
+            Home
+          </NavLink>
+          <NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
+            About
+          </NavLink>
         </nav>
       </div>
     </header>
   );
 }
+
+export default BlogHeader;

package/templates/overlays/blog/react/src/components/BlogSidebar.tsx

@@ -1,17 +1,16 @@
-const categories = ['Tutorial', 'TypeScript', 'CSS', 'Accessibility', 'Architecture', 'JavaScript', 'React'];
+import { Link } from 'react-router-dom';
+import { categories } from '../data/posts';
 
-export function BlogSidebar() {
+function BlogSidebar() {
   return (
     <aside className="blog-sidebar">
-      <div className="sidebar-section">
-        <h3>About</h3>
-        <p>A blog about modern web development, best practices, and software engineering.</p>
-      </div>
       <div className="sidebar-section">
         <h3>Categories</h3>
         <div className="category-list">
-          {categories.map((cat, i) => (
-            <a key={i} href="#" className="category-tag">{cat}</a>
+          {categories.map((cat) => (
+            <Link key={cat} to={`/category/${cat.toLowerCase()}`} className="category-tag">
+              {cat}
+            </Link>
           ))}
         </div>
       </div>
@@ -24,3 +23,5 @@ export function BlogSidebar() {
     </aside>
   );
 }
+
+export default BlogSidebar;

package/templates/overlays/blog/react/src/components/Layout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+import BlogHeader from './BlogHeader';
+import BlogFooter from './BlogFooter';
+
+function Layout() {
+  return (
+    <div className="blog">
+      <BlogHeader />
+      <main className="blog-main">
+        <Outlet />
+      </main>
+      <BlogFooter />
+    </div>
+  );
+}
+
+export default Layout;

package/templates/overlays/blog/react/src/components/PostCard.tsx

@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom';
+import type { Post } from '../data/posts';
+
+interface PostCardProps {
+  post: Post;
+}
+
+function PostCard({ post }: PostCardProps) {
+  return (
+    <article className="post-card">
+      <div className="post-image">{post.image}</div>
+      <div className="post-body">
+        <Link to={`/category/${post.category.toLowerCase()}`} className="post-category">
+          {post.category}
+        </Link>
+        <Link to={`/post/${post.id}`} className="post-title-link">
+          <h2 className="post-title">{post.title}</h2>
+        </Link>
+        <p className="post-excerpt">{post.excerpt}</p>
+        <div className="post-meta">
+          <span>By {post.author}</span>
+          <span>{post.date}</span>
+          <span>{post.readTime} read</span>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export default PostCard;

package/templates/overlays/blog/react/src/data/posts.ts

@@ -0,0 +1,22 @@
+export interface Post {
+  id: number;
+  title: string;
+  excerpt: string;
+  content: string;
+  category: string;
+  author: string;
+  date: string;
+  readTime: string;
+  image: string;
+}
+
+export const posts: Post[] = [
+  { id: 1, title: 'Getting Started with React 19', excerpt: 'Learn the new features and improvements in the latest React release.', content: 'React 19 introduces several exciting features including the new use hook, server components improvements, and better concurrent rendering. These changes simplify how we build modern web applications and improve both developer experience and end-user performance.', category: 'React', author: 'Jane Developer', date: '2024-12-15', readTime: '5 min', image: '⚛️' },
+  { id: 2, title: 'TypeScript Best Practices in 2025', excerpt: 'Essential patterns and tips for writing clean TypeScript code.', content: 'TypeScript continues to evolve with powerful type inference, template literal types, and satisfies operator. Following best practices ensures your codebase remains maintainable and type-safe as it grows in complexity.', category: 'TypeScript', author: 'Alex Coder', date: '2024-12-10', readTime: '7 min', image: '📘' },
+  { id: 3, title: 'Modern CSS Layout Techniques', excerpt: 'Master CSS Grid and Flexbox for responsive layouts.', content: 'CSS has come a long way with powerful layout tools. Container queries, subgrid, and the :has() selector open up new possibilities for creating responsive, maintainable designs without JavaScript.', category: 'CSS', author: 'Jane Developer', date: '2024-12-05', readTime: '6 min', image: '🎨' },
+  { id: 4, title: 'JavaScript Performance Optimization', excerpt: 'Techniques to make your JavaScript applications faster.', content: 'Performance optimization starts with understanding the browser rendering pipeline. Learn about code splitting, tree shaking, lazy loading, and efficient DOM manipulation to build blazing fast web applications.', category: 'JavaScript', author: 'Mike Engineer', date: '2024-11-28', readTime: '8 min', image: '⚡' },
+  { id: 5, title: 'Building REST APIs with Node.js', excerpt: 'A comprehensive guide to creating robust backend services.', content: 'Node.js provides an excellent foundation for building REST APIs. We cover Express.js setup, middleware patterns, authentication, validation, error handling, and deployment strategies for production-ready APIs.', category: 'Node.js', author: 'Alex Coder', date: '2024-11-20', readTime: '10 min', image: '🖥️' },
+  { id: 6, title: 'CI/CD Pipelines for Frontend Projects', excerpt: 'Automate your build, test, and deployment workflows.', content: 'Setting up CI/CD pipelines transforms your development workflow. Learn how to configure GitHub Actions, automate testing, implement staging environments, and deploy with confidence using modern DevOps practices.', category: 'DevOps', author: 'Mike Engineer', date: '2024-11-15', readTime: '9 min', image: '🚀' },
+];
+
+export const categories = ['React', 'TypeScript', 'CSS', 'JavaScript', 'Node.js', 'DevOps'];

package/templates/overlays/blog/react/src/pages/About.tsx

@@ -0,0 +1,33 @@
+function About() {
+  return (
+    <div className="about-page">
+      <h1 className="about-title">About This Blog</h1>
+      <p className="about-description">
+        A blog dedicated to modern web development, covering topics from frontend frameworks
+        to backend architectures and everything in between.
+      </p>
+      <div className="author-card">
+        <div className="author-avatar">✍️</div>
+        <div className="author-info">
+          <h2>Jane Developer</h2>
+          <p className="author-role">Senior Software Engineer</p>
+          <p>
+            With over 8 years of experience building web applications, I write about
+            the tools, techniques, and practices that help developers build better software.
+          </p>
+        </div>
+      </div>
+      <div className="contact-info-section">
+        <h2>Get in Touch</h2>
+        <p>Have a question or want to collaborate? Reach out anytime.</p>
+        <ul className="contact-links">
+          <li>Email: hello@devblog.com</li>
+          <li>GitHub: @janedev</li>
+          <li>Twitter: @janedev</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default About;

package/templates/overlays/blog/react/src/pages/Category.tsx

@@ -0,0 +1,29 @@
+import { useParams, Link } from 'react-router-dom';
+import PostCard from '../components/PostCard';
+import { posts } from '../data/posts';
+
+function Category() {
+  const { slug } = useParams();
+  const filtered = posts.filter(
+    (p) => p.category.toLowerCase() === slug?.toLowerCase()
+  );
+  const categoryName = filtered.length > 0 ? filtered[0].category : slug;
+
+  return (
+    <div className="category-page">
+      <Link to="/" className="back-link">← Back to Home</Link>
+      <h1 className="category-heading">Category: {categoryName}</h1>
+      {filtered.length === 0 ? (
+        <p className="no-posts">No posts found in this category.</p>
+      ) : (
+        <div className="post-list">
+          {filtered.map((post) => (
+            <PostCard key={post.id} post={post} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Category;

package/templates/overlays/blog/react/src/pages/Home.tsx

@@ -0,0 +1,18 @@
+import PostCard from '../components/PostCard';
+import BlogSidebar from '../components/BlogSidebar';
+import { posts } from '../data/posts';
+
+function Home() {
+  return (
+    <div className="blog-layout">
+      <div className="post-list">
+        {posts.map((post) => (
+          <PostCard key={post.id} post={post} />
+        ))}
+      </div>
+      <BlogSidebar />
+    </div>
+  );
+}
+
+export default Home;

package/templates/overlays/blog/react/src/pages/PostDetail.tsx

@@ -0,0 +1,38 @@
+import { useParams, Link } from 'react-router-dom';
+import { posts } from '../data/posts';
+
+function PostDetail() {
+  const { id } = useParams();
+  const post = posts.find((p) => p.id === Number(id));
+
+  if (!post) {
+    return <div className="post-detail"><p>Post not found.</p><Link to="/">Back to Home</Link></div>;
+  }
+
+  return (
+    <div className="post-detail">
+      <Link to="/" className="back-link">← Back to Posts</Link>
+      <div className="post-detail-header">
+        <span className="post-detail-image">{post.image}</span>
+        <Link to={`/category/${post.category.toLowerCase()}`} className="post-category">
+          {post.category}
+        </Link>
+        <h1 className="post-detail-title">{post.title}</h1>
+        <div className="post-meta">
+          <span>By {post.author}</span>
+          <span>{post.date}</span>
+          <span>{post.readTime} read</span>
+        </div>
+      </div>
+      <div className="post-detail-content">
+        <p>{post.content}</p>
+      </div>
+      <div className="author-bio">
+        <h3>About {post.author}</h3>
+        <p>A passionate developer writing about web technologies, best practices, and software engineering.</p>
+      </div>
+    </div>
+  );
+}
+
+export default PostDetail;

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

@@ -0,0 +1,112 @@
+import { createRouter } from './router';
+import { renderHome } from './pages/home';
+import { renderPostDetail } from './pages/post-detail';
+import { renderCategory } from './pages/category';
+import { renderAbout } from './pages/about';
+import './style.css';
+
+export interface Post {
+  id: number;
+  title: string;
+  excerpt: string;
+  content: string;
+  author: string;
+  authorAvatar: string;
+  date: string;
+  category: string;
+  readTime: string;
+  image: string;
+  tags: string[];
+}
+
+export const posts: Post[] = [
+  {
+    id: 1,
+    title: 'Getting Started with TypeScript in 2024',
+    excerpt: 'Learn the fundamentals of TypeScript and how it can improve your JavaScript development workflow with type safety and better tooling.',
+    content: 'TypeScript has become an essential tool in modern web development. In this comprehensive guide, we will explore the core concepts of TypeScript, from basic types to advanced generics. Whether you are a beginner or an experienced developer, understanding TypeScript will significantly improve your code quality and development experience.\n\nTypeScript adds static typing to JavaScript, which means you can catch errors at compile time rather than runtime. This leads to more robust and maintainable code. Let us dive into the key features that make TypeScript a must-learn language in 2024.\n\nFirst, let us talk about type annotations. Type annotations allow you to explicitly specify the type of a variable, function parameter, or return value. This makes your code self-documenting and easier to understand.\n\nNext, we will explore interfaces and type aliases, which let you define custom types that describe the shape of objects. These are incredibly powerful for creating contracts between different parts of your application.',
+    author: 'Sarah Chen',
+    authorAvatar: '👩',
+    date: 'Mar 15, 2024',
+    category: 'Technology',
+    readTime: '8 min read',
+    image: '💻',
+    tags: ['TypeScript', 'JavaScript', 'Web Development'],
+  },
+  {
+    id: 2,
+    title: 'The Art of Responsive Web Design',
+    excerpt: 'Master the principles of responsive design and create websites that look great on every device, from mobile phones to large desktop screens.',
+    content: 'Responsive web design is no longer optional, it is a fundamental requirement. With users accessing websites from a myriad of devices, ensuring your site looks and functions well across all screen sizes is crucial for user experience and SEO.\n\nIn this article, we explore modern CSS techniques including Flexbox, Grid, and container queries that make responsive design easier than ever. We will also discuss best practices for mobile-first design and progressive enhancement.',
+    author: 'Mike Johnson',
+    authorAvatar: '👨',
+    date: 'Mar 12, 2024',
+    category: 'Design',
+    readTime: '6 min read',
+    image: '🎨',
+    tags: ['CSS', 'Responsive', 'Design'],
+  },
+  {
+    id: 3,
+    title: 'Building RESTful APIs with Node.js',
+    excerpt: 'A practical guide to creating robust and scalable REST APIs using Node.js, Express, and modern best practices for API design.',
+    content: 'RESTful APIs are the backbone of modern web applications. In this tutorial, we walk through building a complete API from scratch using Node.js and Express. You will learn about routing, middleware, error handling, authentication, and database integration.\n\nWe will cover everything from project setup to deployment, including testing strategies and documentation with Swagger/OpenAPI.',
+    author: 'Emily Davis',
+    authorAvatar: '👩‍💼',
+    date: 'Mar 10, 2024',
+    category: 'Technology',
+    readTime: '12 min read',
+    image: '🔧',
+    tags: ['Node.js', 'API', 'Backend'],
+  },
+  {
+    id: 4,
+    title: 'UX Design Principles Every Developer Should Know',
+    excerpt: 'Understanding core UX principles can help developers create more intuitive and user-friendly applications from the ground up.',
+    content: 'Great user experience does not happen by accident. It is the result of thoughtful design decisions based on understanding how users think and behave. As a developer, knowing these principles can significantly improve the quality of your work.\n\nWe will explore key concepts like cognitive load, Fitts law, Hick law, and the principles of visual hierarchy. These fundamentals will help you make better design decisions in your daily work.',
+    author: 'Alex Rivera',
+    authorAvatar: '🧑',
+    date: 'Mar 8, 2024',
+    category: 'Design',
+    readTime: '7 min read',
+    image: '✨',
+    tags: ['UX', 'Design', 'Psychology'],
+  },
+  {
+    id: 5,
+    title: 'State Management Patterns in Modern Apps',
+    excerpt: 'Compare different state management approaches and learn which pattern works best for your application architecture.',
+    content: 'State management is one of the most debated topics in frontend development. From simple local state to complex global stores, there are many ways to handle application state. This article compares popular approaches and helps you choose the right one.\n\nWe will look at patterns like Flux, Redux, MobX, and newer approaches like Zustand and Jotai, discussing their trade-offs and ideal use cases.',
+    author: 'Jordan Lee',
+    authorAvatar: '👨‍💻',
+    date: 'Mar 5, 2024',
+    category: 'Technology',
+    readTime: '10 min read',
+    image: '🧩',
+    tags: ['State Management', 'Architecture', 'Frontend'],
+  },
+  {
+    id: 6,
+    title: 'A Complete Guide to CSS Grid Layout',
+    excerpt: 'Master CSS Grid with practical examples and learn how to create complex layouts with minimal code and maximum flexibility.',
+    content: 'CSS Grid Layout is one of the most powerful layout systems available in CSS. It allows you to create two-dimensional layouts with rows and columns, giving you unprecedented control over your page structure.\n\nIn this guide, we cover everything from basic grid setup to advanced techniques like named grid areas, auto-fill, auto-fit, and subgrid.',
+    author: 'Taylor Kim',
+    authorAvatar: '🧑‍🎨',
+    date: 'Mar 2, 2024',
+    category: 'Tutorial',
+    readTime: '9 min read',
+    image: '📐',
+    tags: ['CSS', 'Grid', 'Layout'],
+  },
+];
+
+export const categories = ['All', 'Technology', 'Design', 'Tutorial'];
+
+const app = document.querySelector<HTMLElement>('#app')!;
+
+createRouter([
+  { path: '/', render: renderHome },
+  { path: '/post/:id', render: renderPostDetail },
+  { path: '/category/:name', render: renderCategory },
+  { path: '/about', render: renderAbout },
+], app);

package/templates/overlays/blog/vanilla/src/pages/about.ts

@@ -0,0 +1,106 @@
+import { posts, categories } from '../main';
+
+export function renderAbout(): string {
+  const authors = [
+    { name: 'Sarah Chen', avatar: '👩', role: 'Lead Writer', bio: 'Full-stack developer with a passion for TypeScript and modern web technologies.' },
+    { name: 'Mike Johnson', avatar: '👨', role: 'Design Editor', bio: 'UI/UX designer who loves creating beautiful and accessible web experiences.' },
+    { name: 'Emily Davis', avatar: '👩‍💼', role: 'Backend Expert', bio: 'Backend engineer specializing in Node.js, APIs, and cloud architecture.' },
+    { name: 'Alex Rivera', avatar: '🧑', role: 'UX Researcher', bio: 'Dedicated to understanding users and improving digital product experiences.' },
+  ];
+
+  return `
+    <header class="blog-header">
+      <div class="header-container">
+        <a href="#/" class="blog-logo">📝 {{projectName}}</a>
+        <nav class="blog-nav">
+          <a href="#/">Home</a>
+          ${categories.filter(c => c !== 'All').map(c => `
+            <a href="#/category/${c}">${c}</a>
+          `).join('')}
+          <a href="#/about" class="active">About</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="blog-main">
+      <section class="about-hero">
+        <h1>About {{projectName}}</h1>
+        <p>We are a community of developers, designers, and creators sharing our knowledge and experiences through thoughtful, well-crafted articles.</p>
+      </section>
+
+      <section class="about-section">
+        <div class="about-grid">
+          <div class="about-content">
+            <h2>Our Mission</h2>
+            <p>At {{projectName}}, we believe that knowledge should be accessible to everyone. Our mission is to provide high-quality, practical content that helps developers and designers grow their skills and advance their careers.</p>
+            <p>Whether you are just starting out or are a seasoned professional, you will find articles that challenge your thinking and expand your horizons. We cover everything from fundamental concepts to cutting-edge technologies.</p>
+          </div>
+          <div class="about-stats">
+            <div class="about-stat">
+              <h3>${posts.length}+</h3>
+              <p>Articles Published</p>
+            </div>
+            <div class="about-stat">
+              <h3>10K+</h3>
+              <p>Monthly Readers</p>
+            </div>
+            <div class="about-stat">
+              <h3>${categories.length - 1}</h3>
+              <p>Categories</p>
+            </div>
+            <div class="about-stat">
+              <h3>4</h3>
+              <p>Writers</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="about-section">
+        <h2>Our Team</h2>
+        <div class="team-grid">
+          ${authors.map(a => `
+            <div class="team-card">
+              <div class="team-avatar">${a.avatar}</div>
+              <h3>${a.name}</h3>
+              <p class="team-role">${a.role}</p>
+              <p class="team-bio">${a.bio}</p>
+            </div>
+          `).join('')}
+        </div>
+      </section>
+
+      <section class="about-section">
+        <div class="about-cta">
+          <h2>Want to Contribute?</h2>
+          <p>We are always looking for passionate writers who want to share their expertise. If you have insights to share, we would love to hear from you.</p>
+          <a href="#/" class="btn-primary">Get in Touch</a>
+        </div>
+      </section>
+    </main>
+
+    <footer class="blog-footer">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h4>{{projectName}}</h4>
+          <p>Sharing knowledge and insights about web development, design, and technology.</p>
+        </div>
+        <div class="footer-section">
+          <h4>Categories</h4>
+          ${categories.filter(c => c !== 'All').map(c => `
+            <a href="#/category/${c}">${c}</a>
+          `).join('')}
+        </div>
+        <div class="footer-section">
+          <h4>Follow Us</h4>
+          <a href="#">🐦 Twitter</a>
+          <a href="#">💼 LinkedIn</a>
+          <a href="#">🐙 GitHub</a>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <p>&copy; 2024 {{projectName}}. All rights reserved.</p>
+      </div>
+    </footer>
+  `;
+}