@beknurakhmed/webforge-cli 0.1.1 → 0.1.3

package/templates/overlays/blog/nextjs/src/app/globals.css

@@ -0,0 +1,158 @@
+/* === BLOG TEMPLATE STYLES === */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --dark: #111827;
+  --text: #374151;
+  --text-light: #6b7280;
+  --bg: #f9fafb;
+  --white: #ffffff;
+  --border: #e5e7eb;
+  --radius: 12px;
+  --shadow: 0 1px 3px rgba(0,0,0,0.08);
+  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
+}
+
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: var(--bg); line-height: 1.7; }
+a { text-decoration: none; color: inherit; }
+
+/* Blog Header */
+.blog-header { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
+.header-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 64px; }
+.blog-logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 700; color: var(--dark); }
+.logo-icon { font-size: 1.4rem; }
+.blog-nav { display: flex; gap: 1.5rem; }
+.nav-link { color: var(--text); font-weight: 500; transition: color 0.2s; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
+.nav-link:hover { color: var(--primary); }
+.nav-link.active { color: var(--primary); border-bottom-color: var(--primary); }
+
+/* Blog Home */
+.blog-home { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
+
+/* Featured Post */
+.featured-section { margin-bottom: 2.5rem; }
+.post-card.featured { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
+.post-card.featured .post-image { height: 300px; font-size: 6rem; }
+.post-card.featured .post-title { font-size: 1.5rem; }
+
+/* Blog Layout */
+.blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
+
+/* Post Card */
+.post-card { display: block; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; }
+.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
+.post-image { height: 180px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
+.post-content { padding: 1.25rem; }
+.post-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
+.post-category { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; background: #eef2ff; padding: 0.2rem 0.6rem; border-radius: 4px; }
+.post-read-time { font-size: 0.8rem; color: var(--text-light); }
+.post-title { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 0.5rem; line-height: 1.4; }
+.post-excerpt { font-size: 0.9rem; color: var(--text); margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.post-author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
+.author-avatar { font-size: 1.2rem; }
+.author-name { font-weight: 600; color: var(--dark); }
+.post-date { color: var(--text-light); }
+
+/* Posts Grid */
+.section-title { font-size: 1.35rem; font-weight: 700; color: var(--dark); margin-bottom: 1.25rem; }
+.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
+
+/* Blog Sidebar */
+.blog-sidebar { position: sticky; top: 80px; }
+.sidebar-widget { background: var(--white); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }
+.sidebar-widget h3 { font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 1rem; }
+.category-list { list-style: none; }
+.category-list li { border-bottom: 1px solid var(--border); }
+.category-list li:last-child { border-bottom: none; }
+.category-link { display: flex; justify-content: space-between; padding: 0.6rem 0; font-size: 0.9rem; color: var(--text); transition: color 0.2s; }
+.category-link:hover { color: var(--primary); }
+.category-count { background: var(--bg); padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.75rem; font-weight: 600; color: var(--text-light); }
+.popular-list { list-style: none; }
+.popular-link { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
+.popular-list li:last-child .popular-link { border-bottom: none; }
+.popular-title { font-size: 0.9rem; font-weight: 600; color: var(--dark); display: block; }
+.popular-date { font-size: 0.75rem; color: var(--text-light); }
+.newsletter-widget p { font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.75rem; }
+.newsletter-input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; margin-bottom: 0.75rem; }
+.newsletter-input:focus { outline: none; border-color: var(--primary); }
+
+/* Post Detail */
+.post-detail-page { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
+.post-article { max-width: 100%; }
+.back-link { display: inline-block; color: var(--primary); font-weight: 500; margin-bottom: 1.5rem; }
+.back-link:hover { text-decoration: underline; }
+.post-detail-header { margin-bottom: 2rem; }
+.post-detail-header h1 { font-size: 2rem; font-weight: 800; color: var(--dark); margin: 0.75rem 0; line-height: 1.3; }
+.post-detail-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+.post-hero-image { height: 300px; display: flex; align-items: center; justify-content: center; font-size: 6rem; background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-radius: var(--radius); margin-bottom: 2rem; }
+.post-body { font-size: 1.05rem; line-height: 1.8; }
+.post-body p { margin-bottom: 1.25rem; }
+.post-tags { display: flex; gap: 0.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
+.tag { background: #eef2ff; color: var(--primary); padding: 0.3rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
+
+/* Category Page */
+.category-page { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
+.category-header { margin-bottom: 2rem; }
+.category-header h1 { font-size: 1.75rem; font-weight: 700; color: var(--dark); margin: 0.5rem 0 0.25rem; }
+.category-header p { color: var(--text-light); }
+
+/* About Page */
+.about-page { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem; }
+.about-hero { text-align: center; margin-bottom: 3rem; }
+.about-hero h1 { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 0.75rem; }
+.about-hero p { font-size: 1.1rem; color: var(--text-light); max-width: 600px; margin: 0 auto; }
+.about-section { margin-bottom: 2.5rem; }
+.about-section h2 { font-size: 1.35rem; font-weight: 700; color: var(--dark); margin-bottom: 1rem; }
+.about-section p { font-size: 1rem; color: var(--text); margin-bottom: 0.75rem; }
+.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
+.team-card { background: var(--white); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; }
+.team-avatar { font-size: 3rem; margin-bottom: 0.75rem; }
+.team-card h3 { font-size: 1rem; font-weight: 700; color: var(--dark); }
+.team-role { font-size: 0.8rem; color: var(--primary); font-weight: 600; margin-bottom: 0.5rem; }
+.team-bio { font-size: 0.85rem; color: var(--text-light); }
+.contact-info { display: flex; gap: 2rem; margin-top: 1rem; }
+.contact-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
+
+/* Empty / Not Found */
+.not-found, .empty-state { text-align: center; padding: 3rem 1.5rem; }
+.not-found h2 { color: var(--dark); margin-bottom: 0.5rem; }
+.empty-state p { color: var(--text-light); margin-bottom: 1rem; }
+
+/* Buttons */
+.btn { display: inline-block; padding: 0.625rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; font-size: 0.9rem; }
+.btn-primary { background: var(--primary); color: var(--white); }
+.btn-primary:hover { background: var(--primary-hover); }
+.btn-full { width: 100%; text-align: center; }
+
+/* Footer */
+.blog-footer { background: var(--dark); color: #d1d5db; padding: 3rem 1.5rem 1.5rem; margin-top: 4rem; }
+.footer-container { max-width: 1100px; margin: 0 auto; }
+.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
+.footer-section h3 { color: var(--white); font-size: 1.15rem; margin-bottom: 0.75rem; }
+.footer-section h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 0.75rem; }
+.footer-section p { font-size: 0.85rem; line-height: 1.6; }
+.footer-section ul { list-style: none; }
+.footer-section li { padding: 0.2rem 0; font-size: 0.85rem; cursor: pointer; }
+.footer-section li:hover, .footer-section a:hover { color: var(--white); }
+.social-links { display: flex; gap: 1rem; font-size: 1.4rem; }
+.footer-bottom { border-top: 1px solid #374151; padding-top: 1.5rem; text-align: center; font-size: 0.8rem; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .blog-layout { grid-template-columns: 1fr; }
+  .post-card.featured { grid-template-columns: 1fr; }
+  .post-card.featured .post-image { height: 200px; font-size: 4rem; }
+  .posts-grid { grid-template-columns: 1fr; }
+  .post-detail-header h1 { font-size: 1.5rem; }
+  .post-hero-image { height: 200px; font-size: 4rem; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+  .team-grid { grid-template-columns: 1fr; }
+  .contact-info { flex-direction: column; gap: 0.75rem; }
+  .blog-nav { gap: 0.75rem; }
+}
+
+@media (max-width: 480px) {
+  .footer-grid { grid-template-columns: 1fr; }
+}

package/templates/overlays/blog/nextjs/src/app/layout.tsx

@@ -0,0 +1,20 @@
+import './globals.css';
+import { BlogHeader } from './components/BlogHeader';
+import { BlogFooter } from './components/BlogFooter';
+
+export const metadata = {
+  title: '{{projectName}} - Blog',
+  description: 'Latest articles and insights from {{projectName}}',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <BlogHeader />
+        <main>{children}</main>
+        <BlogFooter />
+      </body>
+    </html>
+  );
+}

package/templates/overlays/blog/nextjs/src/app/page.tsx

@@ -0,0 +1,36 @@
+import { PostCard, Post } from './components/PostCard';
+import { BlogSidebar } from './components/BlogSidebar';
+
+const posts: Post[] = [
+  { id: 1, title: 'Getting Started with Next.js 15', excerpt: 'Learn the fundamentals of Next.js 15 App Router, server components, and file-based routing in this comprehensive guide.', content: '', author: 'Alex Rivera', date: 'Jan 15, 2025', category: 'Technology', readTime: '8 min read', image: '⚛️', authorAvatar: '👨‍💻' },
+  { id: 2, title: 'Building Better User Interfaces', excerpt: 'Explore modern UI patterns and best practices for creating intuitive, accessible, and beautiful user interfaces.', content: '', author: 'Priya Sharma', date: 'Jan 12, 2025', category: 'Design', readTime: '6 min read', image: '🎨', authorAvatar: '👩‍🎨' },
+  { id: 3, title: 'Design Systems That Scale', excerpt: 'How to build and maintain design systems that grow with your organization while maintaining consistency.', content: '', author: 'Marcus Chen', date: 'Jan 10, 2025', category: 'Design', readTime: '10 min read', image: '📐', authorAvatar: '👨' },
+  { id: 4, title: 'TypeScript Tips and Tricks', excerpt: 'Advanced TypeScript patterns that will make your code more type-safe, readable, and maintainable.', content: '', author: 'Sofia Andersen', date: 'Jan 8, 2025', category: 'Technology', readTime: '7 min read', image: '📘', authorAvatar: '👩' },
+  { id: 5, title: 'The Future of Web Development', excerpt: 'A look at emerging trends and technologies that are shaping the future of how we build for the web.', content: '', author: 'Alex Rivera', date: 'Jan 3, 2025', category: 'Technology', readTime: '12 min read', image: '🌐', authorAvatar: '👨‍💻' },
+  { id: 6, title: 'Mastering CSS Grid Layout', excerpt: 'A deep dive into CSS Grid with practical examples for creating complex, responsive layouts with ease.', content: '', author: 'Priya Sharma', date: 'Dec 28, 2024', category: 'Tutorial', readTime: '9 min read', image: '📏', authorAvatar: '👩‍🎨' },
+];
+
+export default function BlogHomePage() {
+  const featuredPost = posts[0];
+  const remainingPosts = posts.slice(1);
+
+  return (
+    <div className="blog-home">
+      <section className="featured-section">
+        <PostCard post={featuredPost} featured />
+      </section>
+
+      <div className="blog-layout">
+        <section className="posts-list">
+          <h2 className="section-title">Latest Articles</h2>
+          <div className="posts-grid">
+            {remainingPosts.map((post) => (
+              <PostCard key={post.id} post={post} />
+            ))}
+          </div>
+        </section>
+        <BlogSidebar />
+      </div>
+    </div>
+  );
+}

package/templates/overlays/blog/nextjs/src/app/post/[id]/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import { BlogSidebar } from '../../components/BlogSidebar';
+
+interface Post {
+  id: number;
+  title: string;
+  excerpt: string;
+  content: string;
+  author: string;
+  date: string;
+  category: string;
+  readTime: string;
+  image: string;
+  authorAvatar: string;
+}
+
+const posts: Post[] = [
+  { id: 1, title: 'Getting Started with Next.js 15', excerpt: 'Learn the fundamentals of Next.js 15 App Router.', content: 'Next.js 15 introduces powerful features that make building web applications easier than ever. The App Router provides a new way to structure your application with file-based routing, server components, and streaming.\n\nThe App Router uses a file-system based approach where folders define routes. Each folder represents a route segment that maps to a URL segment. Special files like page.tsx, layout.tsx, and loading.tsx provide the UI for each route.\n\nServer Components are the default in the App Router. They allow you to render components on the server, reducing the JavaScript bundle sent to the client. This results in faster page loads and better performance.\n\nFile-based routing is intuitive and powerful. Simply create a page.tsx file in a folder, and it becomes a route. Dynamic routes use bracket notation like [id], and you can nest routes by nesting folders.\n\nStreaming allows you to progressively render UI from the server. Work is split into chunks and streamed to the client as it becomes ready. This means users can see parts of the page before the entire content has finished loading.', author: 'Alex Rivera', date: 'Jan 15, 2025', category: 'Technology', readTime: '8 min read', image: '⚛️', authorAvatar: '👨‍💻' },
+  { id: 2, title: 'Building Better User Interfaces', excerpt: 'Explore modern UI patterns and best practices.', content: 'Creating great user interfaces is both an art and a science. It requires understanding user psychology, visual design principles, and modern web technologies.\n\nStart with user research to understand who your users are and what they need. Create personas and user journeys to guide your design decisions. Every interface element should serve a purpose.\n\nConsistency is key to a good UI. Use a design system with defined colors, typography, spacing, and components. This ensures a cohesive experience across your entire application.\n\nAccessibility should be built in from the start, not added as an afterthought. Use semantic HTML, provide alt text for images, ensure sufficient color contrast, and make sure all interactive elements are keyboard accessible.\n\nPerformance directly impacts user experience. Optimize images, minimize JavaScript, and use loading states to keep users informed. A fast interface feels more responsive and professional.', author: 'Priya Sharma', date: 'Jan 12, 2025', category: 'Design', readTime: '6 min read', image: '🎨', authorAvatar: '👩‍🎨' },
+  { id: 3, title: 'Design Systems That Scale', excerpt: 'Build and maintain design systems that grow.', content: 'A design system is more than a component library. It is a complete set of standards, documentation, and tools that help teams build consistent digital products.\n\nStart small and grow organically. Do not try to design every component upfront. Begin with the most commonly used elements: buttons, inputs, typography, and spacing. Add new components as needs arise.\n\nDocumentation is crucial. Each component should have clear usage guidelines, code examples, and accessibility notes. Good documentation reduces questions and ensures proper usage.\n\nVersion your design system carefully. Use semantic versioning so consumers know what to expect with each update. Provide migration guides for breaking changes.\n\nMeasure adoption and gather feedback. Track which components are most used, identify pain points, and continuously improve based on real-world usage data.', author: 'Marcus Chen', date: 'Jan 10, 2025', category: 'Design', readTime: '10 min read', image: '📐', authorAvatar: '👨' },
+  { id: 4, title: 'TypeScript Tips and Tricks', excerpt: 'Advanced TypeScript patterns for better code.', content: 'TypeScript adds static typing to JavaScript, catching errors at compile time and improving developer experience. Here are some advanced patterns to level up your TypeScript code.\n\nUtility types like Partial, Required, Pick, and Omit let you transform existing types without repeating yourself. They are essential for creating flexible, reusable type definitions.\n\nConditional types allow you to create types that depend on conditions. Combined with generics, they enable powerful type-level programming that can express complex relationships.\n\nTemplate literal types let you create string types from patterns. They are perfect for defining valid CSS values, API endpoints, or any structured string format.\n\nThe satisfies operator, introduced in TypeScript 4.9, lets you validate that an expression matches a type without changing the inferred type. This is useful for catching errors while preserving narrow types.', author: 'Sofia Andersen', date: 'Jan 8, 2025', category: 'Technology', readTime: '7 min read', image: '📘', authorAvatar: '👩' },
+  { id: 5, title: 'The Future of Web Development', excerpt: 'Emerging trends and technologies shaping the web.', content: 'The web is constantly evolving, and staying ahead of trends is crucial for developers. Here is a look at what is shaping the future of web development.\n\nEdge computing is bringing server-side logic closer to users. Frameworks like Next.js and platforms like Vercel and Cloudflare Workers enable code to run at the edge, reducing latency and improving performance.\n\nAI-powered development tools are changing how we write code. From code completion to automated testing, AI assistants are becoming integral to the development workflow.\n\nWeb Components are gaining traction as a framework-agnostic way to build reusable UI components. They work everywhere HTML works and can be used alongside any framework.\n\nWebAssembly continues to expand the capabilities of the web. Languages like Rust and Go can now run in the browser at near-native speed, enabling complex applications that were previously desktop-only.', author: 'Alex Rivera', date: 'Jan 3, 2025', category: 'Technology', readTime: '12 min read', image: '🌐', authorAvatar: '👨‍💻' },
+  { id: 6, title: 'Mastering CSS Grid Layout', excerpt: 'A deep dive into CSS Grid with practical examples.', content: 'CSS Grid is one of the most powerful layout systems available in CSS. It allows you to create complex, responsive layouts with clean, readable code.\n\nGrid works in two dimensions: rows and columns. Unlike Flexbox which is one-dimensional, Grid lets you control both axes simultaneously. This makes it perfect for page-level layouts.\n\nThe fr unit is unique to Grid and represents a fraction of available space. It is more flexible than percentages because it accounts for gaps and fixed-size tracks automatically.\n\nGrid areas let you name regions of your layout and place items into them by name. This makes your CSS more readable and easier to maintain, especially for complex layouts.\n\nThe minmax function combined with auto-fill or auto-fit creates responsive grids without media queries. The grid automatically adjusts the number of columns based on available space.', author: 'Priya Sharma', date: 'Dec 28, 2024', category: 'Tutorial', readTime: '9 min read', image: '📏', authorAvatar: '👩‍🎨' },
+];
+
+export default function PostDetailPage() {
+  const params = useParams();
+  const post = posts.find((p) => p.id === Number(params.id));
+
+  if (!post) {
+    return (
+      <div className="not-found">
+        <h2>Post Not Found</h2>
+        <p>The article you are looking for does not exist.</p>
+        <Link href="/" className="btn btn-primary">Back to Blog</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="post-detail-page">
+      <div className="blog-layout">
+        <article className="post-article">
+          <Link href="/" className="back-link">← Back to Blog</Link>
+          <div className="post-detail-header">
+            <Link href={`/category/${post.category.toLowerCase()}`} className="post-category">
+              {post.category}
+            </Link>
+            <h1>{post.title}</h1>
+            <div className="post-detail-meta">
+              <div className="post-author">
+                <span className="author-avatar">{post.authorAvatar}</span>
+                <span className="author-name">{post.author}</span>
+              </div>
+              <span className="post-date">{post.date}</span>
+              <span className="post-read-time">{post.readTime}</span>
+            </div>
+          </div>
+          <div className="post-hero-image">{post.image}</div>
+          <div className="post-body">
+            {post.content.split('\n\n').map((paragraph, i) => (
+              <p key={i}>{paragraph}</p>
+            ))}
+          </div>
+          <div className="post-tags">
+            <span className="tag">#{post.category.toLowerCase()}</span>
+            <span className="tag">#webdev</span>
+            <span className="tag">#programming</span>
+          </div>
+        </article>
+        <BlogSidebar />
+      </div>
+    </div>
+  );
+}

package/templates/overlays/blog/nuxt/app.vue

@@ -0,0 +1,27 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  color: #374151;
+  background-color: #f9fafb;
+  line-height: 1.8;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+</style>

package/templates/overlays/blog/nuxt/components/BlogFooter.vue

@@ -0,0 +1,48 @@
+<template>
+  <footer class="blog-footer">
+    <div class="footer-inner">
+      <p>&copy; 2024 {{projectName}}. All rights reserved.</p>
+      <div class="footer-links">
+        <NuxtLink to="/">Home</NuxtLink>
+        <NuxtLink to="/about">About</NuxtLink>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.blog-footer {
+  background: #111827;
+  color: #9ca3af;
+  padding: 1.5rem 1rem;
+  margin-top: auto;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.footer-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.footer-inner p {
+  font-size: 0.875rem;
+}
+
+.footer-links {
+  display: flex;
+  gap: 1.25rem;
+}
+
+.footer-links a {
+  color: #9ca3af;
+  font-size: 0.875rem;
+  transition: color 0.2s;
+}
+
+.footer-links a:hover {
+  color: white;
+}
+</style>

package/templates/overlays/blog/nuxt/components/BlogHeader.vue

@@ -0,0 +1,55 @@
+<template>
+  <header class="blog-header">
+    <div class="header-inner">
+      <NuxtLink to="/" class="logo">📝 {{projectName}}</NuxtLink>
+      <nav class="header-nav">
+        <NuxtLink to="/" class="nav-link">Home</NuxtLink>
+        <NuxtLink to="/about" class="nav-link">About</NuxtLink>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.blog-header {
+  background: #111827;
+  color: white;
+  padding: 0 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.header-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+}
+
+.logo {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: white;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.header-nav {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.nav-link {
+  color: #d1d5db;
+  font-weight: 500;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  transition: color 0.2s;
+}
+
+.nav-link:hover {
+  color: white;
+}
+</style>

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

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+const categories = [
+  { name: 'Technology', slug: 'technology', count: 3 },
+  { name: 'Design', slug: 'design', count: 2 },
+  { name: 'Business', slug: 'business', count: 2 },
+  { name: 'Lifestyle', slug: 'lifestyle', count: 1 },
+];
+
+const email = ref('');
+
+function handleSubscribe() {
+  if (email.value) {
+    alert('Thanks for subscribing!');
+    email.value = '';
+  }
+}
+</script>
+
+<template>
+  <aside class="blog-sidebar">
+    <div class="sidebar-card">
+      <h3 class="sidebar-title">Categories</h3>
+      <ul class="category-list">
+        <li v-for="cat in categories" :key="cat.slug">
+          <NuxtLink :to="`/category/${cat.slug}`" class="category-link">
+            <span>{{ cat.name }}</span>
+            <span class="category-count">{{ cat.count }}</span>
+          </NuxtLink>
+        </li>
+      </ul>
+    </div>
+
+    <div class="sidebar-card">
+      <h3 class="sidebar-title">Newsletter</h3>
+      <p class="newsletter-desc">Get the latest posts delivered to your inbox.</p>
+      <form class="newsletter-form" @submit.prevent="handleSubscribe">
+        <input
+          v-model="email"
+          type="email"
+          placeholder="your@email.com"
+          class="newsletter-input"
+          required
+        />
+        <button type="submit" class="newsletter-btn">Subscribe</button>
+      </form>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.blog-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.sidebar-card {
+  background: white;
+  border-radius: 10px;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.sidebar-title {
+  font-size: 1.1rem;
+  color: #111827;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid #e5e7eb;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.category-list {
+  list-style: none;
+}
+
+.category-link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+  color: #374151;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  font-size: 0.95rem;
+  transition: color 0.2s;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.category-link:hover {
+  color: #4f46e5;
+}
+
+.category-count {
+  background: #f3f4f6;
+  color: #6b7280;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.15rem 0.5rem;
+  border-radius: 10px;
+}
+
+.newsletter-desc {
+  font-size: 0.9rem;
+  color: #6b7280;
+  margin-bottom: 1rem;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.newsletter-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.newsletter-input {
+  padding: 0.65rem 0.875rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  outline: none;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.newsletter-input:focus {
+  border-color: #4f46e5;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.newsletter-btn {
+  background: #4f46e5;
+  color: white;
+  border: none;
+  padding: 0.65rem;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  transition: background 0.2s;
+}
+
+.newsletter-btn:hover {
+  background: #4338ca;
+}
+</style>