@edtools/cli 0.6.1 → 0.7.0

package/dist/adapters/html/templates/blog-post-new.ejs

@@ -0,0 +1,612 @@
+<%
+// Prepare data for base layout
+const pageTitle = metadata.title;
+const pageDescription = metadata.description;
+const pageKeywords = metadata.keywords;
+const pageAuthor = metadata.author;
+const publishDate = metadata.datePublished;
+const canonicalUrl = (blogConfig.websiteUrl || '') + metadata.url;
+const pageType = 'article';
+const pageCategory = metadata.category;
+const pageTags = metadata.tags;
+const ogImage = metadata.ogImage || (blogConfig.defaultOgImage || '');
+const ogImageAlt = metadata.ogImageAlt || metadata.title;
+
+// Breadcrumbs data for Schema.org
+const breadcrumbs = [
+  { label: 'Home', url: blogConfig.websiteUrl || '/' },
+  { label: 'Blog', url: (blogConfig.websiteUrl || '') + '/blog/' },
+  { label: metadata.title, url: canonicalUrl }
+];
+
+// Social share data
+const shareData = {
+  title: metadata.title,
+  description: metadata.description,
+  url: canonicalUrl,
+  via: blogConfig.social && blogConfig.social.twitter ? blogConfig.social.twitter.replace('https://twitter.com/', '').replace('@', '') : null
+};
+
+// Custom styles for blog post
+const customStyles = `
+<style>
+  .post-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+  }
+
+  .post-header {
+    margin-bottom: 2rem;
+  }
+
+  .post-meta {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+    font-size: 0.875rem;
+    color: var(--text-light);
+    margin-bottom: 1.5rem;
+  }
+
+  .post-meta-item {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .post-category {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 9999px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-decoration: none;
+  }
+
+  .post-category:hover {
+    opacity: 0.9;
+    text-decoration: none;
+  }
+
+  .breadcrumbs {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--text-light);
+    margin-bottom: 1.5rem;
+  }
+
+  .breadcrumbs a {
+    color: var(--primary-color);
+  }
+
+  .breadcrumbs span {
+    color: var(--text-light);
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+  }
+
+  .post-intro {
+    font-size: 1.125rem;
+    color: var(--text-light);
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  /* Table of Contents */
+  .table-of-contents {
+    background: var(--bg-light);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .toc-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .toc-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .toc-item {
+    margin-bottom: 0.5rem;
+  }
+
+  .toc-item-level-2 {
+    padding-left: 0;
+  }
+
+  .toc-item-level-3 {
+    padding-left: 1rem;
+  }
+
+  .toc-item-level-4 {
+    padding-left: 2rem;
+  }
+
+  .toc-link {
+    color: var(--text-color);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    transition: color 0.2s;
+  }
+
+  .toc-link:hover {
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  /* Post content */
+  .post-content h2 {
+    font-size: 1.875rem;
+    font-weight: 600;
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+  }
+
+  .post-content h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-top: 2rem;
+    margin-bottom: 0.75rem;
+    color: var(--text-color);
+  }
+
+  .post-content h4 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-color);
+  }
+
+  .post-content p {
+    margin-bottom: 1rem;
+    color: var(--text-color);
+  }
+
+  .post-content section {
+    margin-bottom: 2.5rem;
+  }
+
+  /* Comparison table */
+  .comparison-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+    font-size: 0.9375rem;
+  }
+
+  .comparison-table thead {
+    background: var(--bg-light);
+  }
+
+  .comparison-table th,
+  .comparison-table td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border: 1px solid var(--border-color);
+  }
+
+  .comparison-table th {
+    font-weight: 600;
+    color: var(--text-color);
+  }
+
+  .comparison-table tbody tr:hover {
+    background: var(--bg-light);
+  }
+
+  /* Lists */
+  .content-list {
+    margin: 1.5rem 0;
+    padding-left: 1.5rem;
+  }
+
+  .content-list li {
+    margin-bottom: 1rem;
+  }
+
+  .content-list strong {
+    color: var(--text-color);
+    display: block;
+    margin-bottom: 0.25rem;
+  }
+
+  /* Code blocks */
+  .code-block {
+    margin: 1.5rem 0;
+    background: var(--bg-light);
+    border: 1px solid var(--border-color);
+    border-radius: 0.375rem;
+    overflow: hidden;
+  }
+
+  .code-caption {
+    padding: 0.5rem 1rem;
+    background: #e5e7eb;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .code-block pre {
+    padding: 1rem;
+    overflow-x: auto;
+  }
+
+  .code-block code {
+    font-family: 'Monaco', 'Courier New', monospace;
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  /* Conclusion */
+  .post-conclusion {
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--border-color);
+  }
+
+  /* CTA */
+  .post-cta {
+    margin-top: 3rem;
+    padding: 2rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 0.5rem;
+    text-align: center;
+  }
+
+  .post-cta a {
+    display: inline-block;
+    padding: 1rem 2rem;
+    background: white;
+    color: var(--primary-color);
+    font-weight: 600;
+    font-size: 1.125rem;
+    border-radius: 0.375rem;
+    transition: transform 0.2s;
+    text-decoration: none;
+  }
+
+  .post-cta a:hover {
+    transform: translateY(-2px);
+    text-decoration: none;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Related posts */
+  .related-posts {
+    margin-top: 4rem;
+    padding-top: 2rem;
+    border-top: 2px solid var(--border-color);
+  }
+
+  .related-posts h3 {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+  }
+
+  .related-posts-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .related-post-card {
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    transition: box-shadow 0.2s;
+  }
+
+  .related-post-card:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  .related-post-title {
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 0.5rem;
+  }
+
+  .related-post-title a {
+    color: var(--text-color);
+    text-decoration: none;
+  }
+
+  .related-post-title a:hover {
+    color: var(--primary-color);
+  }
+
+  .related-post-excerpt {
+    color: var(--text-light);
+    font-size: 0.875rem;
+  }
+
+  /* Post navigation */
+  .post-navigation {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .post-nav-link {
+    display: block;
+    padding: 1.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+
+  .post-nav-link:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    text-decoration: none;
+  }
+
+  .post-nav-link.prev {
+    text-align: left;
+  }
+
+  .post-nav-link.next {
+    text-align: right;
+  }
+
+  .post-nav-label {
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: var(--text-light);
+    letter-spacing: 0.05em;
+    margin-bottom: 0.5rem;
+  }
+
+  .post-nav-title {
+    color: var(--text-color);
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  /* Tags */
+  .post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 2rem;
+  }
+
+  .post-tag {
+    display: inline-block;
+    padding: 0.375rem 0.75rem;
+    background: var(--bg-light);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+
+  .post-tag:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  /* Mobile responsive */
+  @media (max-width: 768px) {
+    h1 {
+      font-size: 2rem;
+    }
+
+    .post-navigation {
+      grid-template-columns: 1fr;
+    }
+
+    .post-nav-link.next {
+      text-align: left;
+    }
+
+    .related-posts-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
+`;
+
+// Render content block
+const content = `
+<article class="post-container">
+  <!-- Breadcrumbs -->
+  <nav class="breadcrumbs" aria-label="Breadcrumb">
+    <a href="${blogConfig.websiteUrl || '/'}">Home</a>
+    <span>/</span>
+    <a href="${(blogConfig.websiteUrl || '') + '/blog/'}">Blog</a>
+    <% if (metadata.category) { %>
+    <span>/</span>
+    <a href="/blog/category/${metadata.category.toLowerCase().replace(/\\s+/g, '-')}/">${metadata.category}</a>
+    <% } %>
+    <span>/</span>
+    <span>${metadata.title}</span>
+  </nav>
+
+  <header class="post-header">
+    <h1>${metadata.title}</h1>
+
+    <div class="post-meta">
+      <% if (metadata.category) { %>
+      <a href="/blog/category/${metadata.category.toLowerCase().replace(/\\s+/g, '-')}/" class="post-category">
+        ${metadata.category}
+      </a>
+      <% } %>
+      <div class="post-meta-item">
+        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="10"></circle>
+          <polyline points="12 6 12 12 16 14"></polyline>
+        </svg>
+        <span>${metadata.readTime}</span>
+      </div>
+      <div class="post-meta-item">
+        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="16" y1="2" x2="16" y2="6"></line>
+          <line x1="8" y1="2" x2="8" y2="6"></line>
+          <line x1="3" y1="10" x2="21" y2="10"></line>
+        </svg>
+        <time datetime="${metadata.datePublished}">${new Date(metadata.datePublished).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' })}</time>
+      </div>
+      <% if (metadata.author) { %>
+      <div class="post-meta-item">
+        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+          <circle cx="12" cy="7" r="4"></circle>
+        </svg>
+        <span>${metadata.author}</span>
+      </div>
+      <% } %>
+    </div>
+  </header>
+
+  <div class="post-intro">
+    <%- intro %>
+  </div>
+
+  <% if (tableOfContents && tableOfContents.length > 0) { %>
+  <!-- Table of Contents -->
+  <nav class="table-of-contents" aria-label="Table of Contents">
+    <div class="toc-title">Table of Contents</div>
+    <ul class="toc-list">
+      <% tableOfContents.forEach(item => { %>
+      <li class="toc-item toc-item-level-${item.level}">
+        <a href="#${item.id}" class="toc-link">${item.text}</a>
+      </li>
+      <% }) %>
+    </ul>
+  </nav>
+  <% } %>
+
+  <div class="post-content">
+    <% sections.forEach(section => { %>
+      <section id="${section.heading.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')}">
+        <h${section.level}>${section.heading}</h${section.level}>
+        <%- section.content %>
+      </section>
+    <% }) %>
+  </div>
+
+  <div class="post-conclusion">
+    <%- conclusion %>
+  </div>
+
+  <!-- Tags -->
+  <% if (metadata.tags && metadata.tags.length > 0) { %>
+  <div class="post-tags">
+    <% metadata.tags.forEach(tag => { %>
+    <a href="/blog/tag/${tag.toLowerCase().replace(/\\s+/g, '-')}/" class="post-tag">#${tag}</a>
+    <% }) %>
+  </div>
+  <% } %>
+
+  <!-- Social Share -->
+  <%- include('components/social-share', { shareData }) %>
+
+  <div class="post-cta">
+    <a href="${cta.url}">${cta.text}</a>
+  </div>
+
+  <% if (relatedPosts && relatedPosts.length > 0) { %>
+  <!-- Related Posts -->
+  <div class="related-posts">
+    <h3>Related Articles</h3>
+    <div class="related-posts-grid">
+      <% relatedPosts.forEach(post => { %>
+      <div class="related-post-card">
+        <div class="related-post-title">
+          <a href="${post.url}">${post.title}</a>
+        </div>
+        <% if (post.excerpt) { %>
+        <p class="related-post-excerpt">${post.excerpt}</p>
+        <% } %>
+      </div>
+      <% }) %>
+    </div>
+  </div>
+  <% } %>
+
+  <% if (prevPost || nextPost) { %>
+  <!-- Post Navigation -->
+  <nav class="post-navigation" aria-label="Post navigation">
+    <% if (prevPost) { %>
+    <a href="${prevPost.url}" class="post-nav-link prev" rel="prev">
+      <div class="post-nav-label">← Previous</div>
+      <div class="post-nav-title">${prevPost.title}</div>
+    </a>
+    <% } else { %>
+    <div></div>
+    <% } %>
+
+    <% if (nextPost) { %>
+    <a href="${nextPost.url}" class="post-nav-link next" rel="next">
+      <div class="post-nav-label">Next →</div>
+      <div class="post-nav-title">${nextPost.title}</div>
+    </a>
+    <% } %>
+  </nav>
+  <% } %>
+</article>
+
+<!-- AI-friendly metadata in comments for LLM parsing -->
+<!--
+METADATA:
+- Title: ${metadata.title}
+- Category: ${metadata.category}
+- Keywords: ${metadata.keywords.join(', ')}
+- Published: ${metadata.datePublished}
+- SEO Score: ${seoScore}/100
+-->
+`;
+
+%>
+<%- include('base-layout', {
+  blogConfig,
+  pageTitle,
+  pageDescription,
+  pageKeywords,
+  pageAuthor,
+  publishDate,
+  canonicalUrl,
+  pageType,
+  pageCategory,
+  pageTags,
+  ogImage,
+  ogImageAlt,
+  breadcrumbs,
+  schemaOrg,
+  customStyles,
+  content
+}) %>