@beknurakhmed/webforge-cli 0.1.0 → 0.1.2

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

@@ -0,0 +1,86 @@
+import { posts, categories } from '../main';
+
+export function renderCategory(params?: Record<string, string>): string {
+  const categoryName = params?.name || 'Technology';
+  const filteredPosts = posts.filter(p => p.category === categoryName);
+
+  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}" class="${c === categoryName ? 'active' : ''}">${c}</a>
+          `).join('')}
+          <a href="#/about">About</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="blog-main">
+      <section class="category-header">
+        <h1>${categoryName}</h1>
+        <p>${filteredPosts.length} article${filteredPosts.length !== 1 ? 's' : ''} in this category</p>
+      </section>
+
+      <div class="category-filters" style="margin-bottom: 2rem;">
+        ${categories.map(c => `
+          <a href="${c === 'All' ? '#/' : '#/category/' + c}" class="filter-btn ${c === categoryName ? 'active' : ''}">${c}</a>
+        `).join('')}
+      </div>
+
+      ${filteredPosts.length === 0 ? `
+        <div class="not-found">
+          <h2>No articles found</h2>
+          <p>There are no articles in the "${categoryName}" category yet.</p>
+          <a href="#/" class="btn-primary">Browse All Articles</a>
+        </div>
+      ` : `
+        <div class="posts-grid">
+          ${filteredPosts.map(p => `
+            <article class="post-card">
+              <a href="#/post/${p.id}" class="post-card-link">
+                <div class="post-card-image">${p.image}</div>
+                <div class="post-card-content">
+                  <span class="post-category">${p.category}</span>
+                  <h3>${p.title}</h3>
+                  <p>${p.excerpt}</p>
+                  <div class="post-meta">
+                    <span class="post-author">${p.authorAvatar} ${p.author}</span>
+                    <span class="post-date">${p.date}</span>
+                    <span class="post-read-time">${p.readTime}</span>
+                  </div>
+                </div>
+              </a>
+            </article>
+          `).join('')}
+        </div>
+      `}
+    </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>
+  `;
+}

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

@@ -0,0 +1,103 @@
+import { posts, categories } from '../main';
+
+export function renderHome(): string {
+  const featured = posts[0];
+  const recent = posts.slice(1);
+
+  return `
+    <header class="blog-header">
+      <div class="header-container">
+        <a href="#/" class="blog-logo">📝 {{projectName}}</a>
+        <nav class="blog-nav">
+          <a href="#/" class="active">Home</a>
+          ${categories.filter(c => c !== 'All').map(c => `
+            <a href="#/category/${c}">${c}</a>
+          `).join('')}
+          <a href="#/about">About</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="blog-main">
+      <section class="hero-post">
+        <a href="#/post/${featured.id}" class="hero-post-link">
+          <div class="hero-post-image">${featured.image}</div>
+          <div class="hero-post-content">
+            <span class="post-category">${featured.category}</span>
+            <h1>${featured.title}</h1>
+            <p>${featured.excerpt}</p>
+            <div class="post-meta">
+              <span class="post-author">${featured.authorAvatar} ${featured.author}</span>
+              <span class="post-date">${featured.date}</span>
+              <span class="post-read-time">${featured.readTime}</span>
+            </div>
+          </div>
+        </a>
+      </section>
+
+      <section class="posts-section">
+        <div class="section-header">
+          <h2>Latest Articles</h2>
+          <div class="category-filters">
+            ${categories.map(c => `
+              <a href="${c === 'All' ? '#/' : '#/category/' + c}" class="filter-btn ${c === 'All' ? 'active' : ''}">${c}</a>
+            `).join('')}
+          </div>
+        </div>
+
+        <div class="posts-grid">
+          ${recent.map(p => `
+            <article class="post-card">
+              <a href="#/post/${p.id}" class="post-card-link">
+                <div class="post-card-image">${p.image}</div>
+                <div class="post-card-content">
+                  <span class="post-category">${p.category}</span>
+                  <h3>${p.title}</h3>
+                  <p>${p.excerpt}</p>
+                  <div class="post-meta">
+                    <span class="post-author">${p.authorAvatar} ${p.author}</span>
+                    <span class="post-date">${p.date}</span>
+                    <span class="post-read-time">${p.readTime}</span>
+                  </div>
+                </div>
+              </a>
+            </article>
+          `).join('')}
+        </div>
+      </section>
+
+      <section class="newsletter">
+        <h2>Subscribe to Our Newsletter</h2>
+        <p>Get the latest articles and insights delivered straight to your inbox.</p>
+        <div class="newsletter-form">
+          <input type="email" placeholder="Enter your email address" class="newsletter-input" />
+          <button class="newsletter-btn">Subscribe</button>
+        </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>
+  `;
+}

package/templates/overlays/blog/vanilla/src/pages/post-detail.ts

@@ -0,0 +1,108 @@
+import { posts, categories } from '../main';
+
+export function renderPostDetail(params?: Record<string, string>): string {
+  const id = parseInt(params?.id || '1');
+  const post = posts.find(p => p.id === id);
+
+  if (!post) {
+    return `
+      <header class="blog-header">
+        <div class="header-container">
+          <a href="#/" class="blog-logo">📝 {{projectName}}</a>
+          <nav class="blog-nav">
+            <a href="#/">Home</a>
+            <a href="#/about">About</a>
+          </nav>
+        </div>
+      </header>
+      <main class="blog-main">
+        <div class="not-found">
+          <h2>Post Not Found</h2>
+          <p>The article you are looking for does not exist.</p>
+          <a href="#/" class="btn-primary">Back to Home</a>
+        </div>
+      </main>
+    `;
+  }
+
+  const relatedPosts = posts.filter(p => p.category === post.category && p.id !== post.id).slice(0, 3);
+
+  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}" class="${c === post.category ? 'active' : ''}">${c}</a>
+          `).join('')}
+          <a href="#/about">About</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="blog-main">
+      <article class="post-detail">
+        <div class="post-detail-header">
+          <div class="breadcrumb">
+            <a href="#/">Home</a> / <a href="#/category/${post.category}">${post.category}</a> / <span>${post.title}</span>
+          </div>
+          <span class="post-category">${post.category}</span>
+          <h1>${post.title}</h1>
+          <div class="post-meta post-meta-detail">
+            <span class="post-author">${post.authorAvatar} ${post.author}</span>
+            <span class="post-date">📅 ${post.date}</span>
+            <span class="post-read-time">⏱️ ${post.readTime}</span>
+          </div>
+        </div>
+
+        <div class="post-detail-image">${post.image}</div>
+
+        <div class="post-detail-body">
+          ${post.content.split('\n\n').map(paragraph => `<p>${paragraph}</p>`).join('')}
+        </div>
+
+        <div class="post-tags">
+          ${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+        </div>
+
+        <div class="post-author-card">
+          <span class="author-card-avatar">${post.authorAvatar}</span>
+          <div class="author-card-info">
+            <h4>${post.author}</h4>
+            <p>Writer and contributor at {{projectName}}. Passionate about sharing knowledge with the community.</p>
+          </div>
+        </div>
+      </article>
+
+      ${relatedPosts.length > 0 ? `
+        <section class="related-posts">
+          <h2>Related Articles</h2>
+          <div class="posts-grid">
+            ${relatedPosts.map(p => `
+              <article class="post-card">
+                <a href="#/post/${p.id}" class="post-card-link">
+                  <div class="post-card-image">${p.image}</div>
+                  <div class="post-card-content">
+                    <span class="post-category">${p.category}</span>
+                    <h3>${p.title}</h3>
+                    <div class="post-meta">
+                      <span class="post-author">${p.authorAvatar} ${p.author}</span>
+                      <span class="post-read-time">${p.readTime}</span>
+                    </div>
+                  </div>
+                </a>
+              </article>
+            `).join('')}
+          </div>
+        </section>
+      ` : ''}
+    </main>
+
+    <footer class="blog-footer">
+      <div class="footer-bottom">
+        <p>&copy; 2024 {{projectName}}. All rights reserved.</p>
+      </div>
+    </footer>
+  `;
+}

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

@@ -0,0 +1,33 @@
+interface Route {
+  path: string;
+  render: (params?: Record<string, string>) => string;
+}
+
+export function createRouter(routes: Route[], container: HTMLElement): void {
+  function matchRoute(): void {
+    const hash = window.location.hash.slice(1) || '/';
+    for (const route of routes) {
+      if (route.path.includes(':')) {
+        const paramNames: string[] = [];
+        const pattern = route.path.replace(/:(\w+)/g, (_, name) => {
+          paramNames.push(name);
+          return '([^/]+)';
+        });
+        const match = hash.match(new RegExp('^' + pattern + '$'));
+        if (match) {
+          const params: Record<string, string> = {};
+          paramNames.forEach((name, i) => params[name] = match[i + 1]);
+          container.innerHTML = route.render(params);
+          return;
+        }
+      } else if (route.path === hash) {
+        container.innerHTML = route.render();
+        return;
+      }
+    }
+    container.innerHTML = routes[0].render();
+  }
+
+  window.addEventListener('hashchange', matchRoute);
+  matchRoute();
+}