@edtools/cli 0.6.1 → 0.7.0

package/dist/adapters/html/templates/components/footer.ejs

@@ -0,0 +1,330 @@
+<!-- Global Blog Footer Component -->
+<footer class="blog-footer">
+  <div class="footer-container">
+    <div class="footer-content">
+      <!-- Brand/About Section -->
+      <div class="footer-section footer-brand">
+        <% if (blogConfig.logo) { %>
+          <img src="<%= blogConfig.logo %>" alt="<%= blogConfig.name %>" class="footer-logo">
+        <% } else { %>
+          <h3 class="footer-title"><%= blogConfig.name %></h3>
+        <% } %>
+        <% if (blogConfig.description) { %>
+          <p class="footer-description"><%= blogConfig.description %></p>
+        <% } %>
+      </div>
+
+      <!-- Navigation Links -->
+      <% if (blogConfig.footerLinks && blogConfig.footerLinks.length > 0) { %>
+        <div class="footer-section footer-links">
+          <h4 class="footer-section-title">Navigation</h4>
+          <ul class="footer-link-list">
+            <% blogConfig.footerLinks.forEach(link => { %>
+              <li>
+                <a href="<%= link.url %>" class="footer-link">
+                  <%= link.label %>
+                </a>
+              </li>
+            <% }) %>
+          </ul>
+        </div>
+      <% } %>
+
+      <!-- Resources/Categories -->
+      <% if (blogConfig.categories && blogConfig.categories.length > 0) { %>
+        <div class="footer-section footer-categories">
+          <h4 class="footer-section-title">Categories</h4>
+          <ul class="footer-link-list">
+            <% blogConfig.categories.slice(0, 6).forEach(category => { %>
+              <li>
+                <a href="/blog/category/<%= category.slug %>/" class="footer-link">
+                  <%= category.name %>
+                </a>
+              </li>
+            <% }) %>
+          </ul>
+        </div>
+      <% } %>
+
+      <!-- Social Media & Contact -->
+      <div class="footer-section footer-social">
+        <h4 class="footer-section-title">Connect</h4>
+        <% if (blogConfig.social) { %>
+          <div class="social-links">
+            <% if (blogConfig.social.twitter) { %>
+              <a href="<%= blogConfig.social.twitter %>"
+                 class="social-link"
+                 aria-label="Twitter"
+                 target="_blank"
+                 rel="noopener noreferrer">
+                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+            <% } %>
+            <% if (blogConfig.social.linkedin) { %>
+              <a href="<%= blogConfig.social.linkedin %>"
+                 class="social-link"
+                 aria-label="LinkedIn"
+                 target="_blank"
+                 rel="noopener noreferrer">
+                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
+                  <circle cx="4" cy="4" r="2"></circle>
+                </svg>
+              </a>
+            <% } %>
+            <% if (blogConfig.social.github) { %>
+              <a href="<%= blogConfig.social.github %>"
+                 class="social-link"
+                 aria-label="GitHub"
+                 target="_blank"
+                 rel="noopener noreferrer">
+                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+                </svg>
+              </a>
+            <% } %>
+            <% if (blogConfig.social.youtube) { %>
+              <a href="<%= blogConfig.social.youtube %>"
+                 class="social-link"
+                 aria-label="YouTube"
+                 target="_blank"
+                 rel="noopener noreferrer">
+                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path>
+                </svg>
+              </a>
+            <% } %>
+          </div>
+        <% } %>
+
+        <!-- RSS Feed Link -->
+        <div class="rss-link-container">
+          <a href="/blog/rss.xml" class="footer-link rss-link">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 0.5rem;">
+              <path d="M4 11a9 9 0 019 9M4 4a16 16 0 0116 16M6.5 17.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"></path>
+            </svg>
+            RSS Feed
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Bar -->
+    <div class="footer-bottom">
+      <div class="footer-copyright">
+        <p>
+          © <%= new Date().getFullYear() %> <%= blogConfig.name %><% if (blogConfig.companyName && blogConfig.companyName !== blogConfig.name) { %> by <%= blogConfig.companyName %><% } %>. All rights reserved.
+        </p>
+      </div>
+
+      <div class="footer-legal">
+        <% if (blogConfig.legalLinks && blogConfig.legalLinks.length > 0) { %>
+          <% blogConfig.legalLinks.forEach((link, index) => { %>
+            <a href="<%= link.url %>" class="footer-legal-link"><%= link.label %></a><% if (index < blogConfig.legalLinks.length - 1) { %> · <% } %>
+          <% }) %>
+        <% } else { %>
+          <a href="/privacy" class="footer-legal-link">Privacy</a> ·
+          <a href="/terms" class="footer-legal-link">Terms</a>
+        <% } %>
+      </div>
+    </div>
+
+    <!-- AI Crawler Notice (if enabled) -->
+    <% if (blogConfig.allowAICrawlers !== false) { %>
+      <div class="ai-notice">
+        <p>
+          This content is optimized for AI assistants (Claude, ChatGPT, etc.).
+          Generated with <a href="https://www.npmjs.com/package/@edtools/cli" target="_blank" rel="noopener noreferrer">@edtools/cli</a>
+        </p>
+      </div>
+    <% } %>
+  </div>
+</footer>
+
+<style>
+  .blog-footer {
+    background: var(--bg-light);
+    border-top: 1px solid var(--border-color);
+    margin-top: 4rem;
+    padding: 3rem 0 2rem;
+  }
+
+  .footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1.5rem;
+  }
+
+  .footer-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: 2rem;
+    margin-bottom: 3rem;
+  }
+
+  .footer-section-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .footer-brand .footer-logo {
+    height: 32px;
+    width: auto;
+    margin-bottom: 1rem;
+  }
+
+  .footer-brand .footer-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.75rem;
+  }
+
+  .footer-brand .footer-description {
+    color: var(--text-light);
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    max-width: 300px;
+  }
+
+  .footer-link-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .footer-link-list li {
+    margin-bottom: 0.75rem;
+  }
+
+  .footer-link {
+    color: var(--text-light);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    transition: color 0.2s;
+  }
+
+  .footer-link:hover {
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  .social-links {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: white;
+    color: var(--text-light);
+    transition: all 0.2s;
+    text-decoration: none;
+  }
+
+  .social-link:hover {
+    background: var(--primary-color);
+    color: white;
+    transform: translateY(-2px);
+  }
+
+  .rss-link-container {
+    margin-top: 0.5rem;
+  }
+
+  .rss-link {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .footer-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 2rem;
+    border-top: 1px solid var(--border-color);
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .footer-copyright p {
+    color: var(--text-light);
+    font-size: 0.875rem;
+    margin: 0;
+  }
+
+  .footer-legal {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .footer-legal-link {
+    color: var(--text-light);
+    text-decoration: none;
+    font-size: 0.875rem;
+    transition: color 0.2s;
+  }
+
+  .footer-legal-link:hover {
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  .ai-notice {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--border-color);
+    text-align: center;
+  }
+
+  .ai-notice p {
+    color: var(--text-light);
+    font-size: 0.8125rem;
+    margin: 0;
+  }
+
+  .ai-notice a {
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  .ai-notice a:hover {
+    text-decoration: underline;
+  }
+
+  /* Mobile responsive */
+  @media (max-width: 1024px) {
+    .footer-content {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .footer-content {
+      grid-template-columns: 1fr;
+    }
+
+    .footer-bottom {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .footer-legal {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+</style>

package/dist/adapters/html/templates/components/header.ejs

@@ -0,0 +1,208 @@
+<!-- Global Blog Header Component -->
+<header class="blog-header">
+  <div class="header-container">
+    <div class="header-logo">
+      <% if (blogConfig.logo) { %>
+        <a href="<%= blogConfig.websiteUrl || '/' %>">
+          <img src="<%= blogConfig.logo %>" alt="<%= blogConfig.name %>" class="logo-image">
+        </a>
+      <% } else { %>
+        <a href="<%= blogConfig.websiteUrl || '/' %>" class="logo-text">
+          <%= blogConfig.name %>
+        </a>
+      <% } %>
+    </div>
+
+    <nav class="header-nav" aria-label="Main navigation">
+      <% if (blogConfig.navigation && blogConfig.navigation.length > 0) { %>
+        <% blogConfig.navigation.forEach(item => { %>
+          <a href="<%= item.url %>" class="nav-link <%= item.active ? 'active' : '' %>">
+            <%= item.label %>
+          </a>
+        <% }) %>
+      <% } else { %>
+        <!-- Default navigation if not configured -->
+        <a href="<%= blogConfig.websiteUrl || '/' %>" class="nav-link">Home</a>
+        <a href="/blog/" class="nav-link active">Blog</a>
+      <% } %>
+    </nav>
+
+    <% if (blogConfig.cta) { %>
+      <div class="header-cta">
+        <a href="<%= blogConfig.cta.url %>" class="cta-button">
+          <%= blogConfig.cta.text %>
+        </a>
+      </div>
+    <% } %>
+
+    <!-- Mobile Menu Toggle -->
+    <button class="mobile-menu-toggle" aria-label="Toggle menu" onclick="toggleMobileMenu()">
+      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="3" y1="12" x2="21" y2="12"></line>
+        <line x1="3" y1="6" x2="21" y2="6"></line>
+        <line x1="3" y1="18" x2="21" y2="18"></line>
+      </svg>
+    </button>
+  </div>
+
+  <!-- Mobile Menu (hidden by default) -->
+  <div class="mobile-menu" id="mobile-menu">
+    <% if (blogConfig.navigation && blogConfig.navigation.length > 0) { %>
+      <% blogConfig.navigation.forEach(item => { %>
+        <a href="<%= item.url %>" class="mobile-nav-link <%= item.active ? 'active' : '' %>">
+          <%= item.label %>
+        </a>
+      <% }) %>
+    <% } %>
+    <% if (blogConfig.cta) { %>
+      <a href="<%= blogConfig.cta.url %>" class="mobile-cta-button">
+        <%= blogConfig.cta.text %>
+      </a>
+    <% } %>
+  </div>
+</header>
+
+<style>
+  .blog-header {
+    background: white;
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .header-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+  }
+
+  .header-logo .logo-image {
+    height: 40px;
+    width: auto;
+  }
+
+  .header-logo .logo-text {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-color);
+    text-decoration: none;
+  }
+
+  .header-logo .logo-text:hover {
+    color: var(--primary-color);
+  }
+
+  .header-nav {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    flex: 1;
+  }
+
+  .nav-link {
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.9375rem;
+    transition: color 0.2s;
+  }
+
+  .nav-link:hover,
+  .nav-link.active {
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  .header-cta .cta-button {
+    display: inline-block;
+    padding: 0.5rem 1.25rem;
+    background: var(--primary-color);
+    color: white;
+    font-weight: 600;
+    font-size: 0.9375rem;
+    border-radius: 0.375rem;
+    text-decoration: none;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+
+  .header-cta .cta-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    text-decoration: none;
+  }
+
+  .mobile-menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-color);
+    padding: 0.5rem;
+  }
+
+  .mobile-menu {
+    display: none;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--border-color);
+    background: white;
+  }
+
+  .mobile-menu.active {
+    display: flex;
+  }
+
+  .mobile-nav-link {
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    transition: background 0.2s;
+  }
+
+  .mobile-nav-link:hover,
+  .mobile-nav-link.active {
+    background: var(--bg-light);
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  .mobile-cta-button {
+    display: inline-block;
+    padding: 0.75rem 1.25rem;
+    background: var(--primary-color);
+    color: white;
+    font-weight: 600;
+    text-align: center;
+    border-radius: 0.375rem;
+    text-decoration: none;
+    margin-top: 0.5rem;
+  }
+
+  /* Mobile responsive */
+  @media (max-width: 768px) {
+    .header-nav,
+    .header-cta {
+      display: none;
+    }
+
+    .mobile-menu-toggle {
+      display: block;
+    }
+  }
+</style>
+
+<script>
+  function toggleMobileMenu() {
+    const menu = document.getElementById('mobile-menu');
+    menu.classList.toggle('active');
+  }
+</script>