llmapi-v2 2.1.0

package/views/pages/blog-post.ejs

@@ -0,0 +1,378 @@
+<%- include('../partials/header') %>
+
+<!-- JSON-LD Structured Data -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Article",
+  "headline": "<%= post.title %>",
+  "description": "<%= post.description %>",
+  "author": {
+    "@type": "Person",
+    "name": "<%= post.author %>"
+  },
+  "datePublished": "<%= post.date %>",
+  "publisher": {
+    "@type": "Organization",
+    "name": "LLM API",
+    "url": "https://llmapi.pro"
+  },
+  "mainEntityOfPage": {
+    "@type": "WebPage",
+    "@id": "https://llmapi.pro/blog/<%= post.slug %>"
+  }
+}
+</script>
+
+<!-- marked.js for Markdown rendering -->
+<script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>
+
+<%- include('../partials/nav') %>
+
+<!-- Breadcrumb -->
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6">
+  <nav class="flex items-center text-sm text-gray-400 space-x-2">
+    <a href="/" class="hover:text-claude-orange transition-colors">Home</a>
+    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+    <a href="/blog" class="hover:text-claude-orange transition-colors">Blog</a>
+    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+    <span class="text-gray-600 truncate max-w-xs"><%= post.title %></span>
+  </nav>
+</div>
+
+<!-- Post Content -->
+<section class="pb-20 sm:pb-24">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8">
+    <div class="flex flex-col lg:flex-row gap-10">
+
+      <!-- Main Content -->
+      <article class="lg:w-2/3">
+        <!-- Post Header -->
+        <header class="mb-8">
+          <span class="inline-block px-2.5 py-0.5 text-xs font-medium text-claude-orange bg-claude-orange/10 rounded-full mb-4">
+            <%= post.category %>
+          </span>
+          <h1 class="text-3xl sm:text-4xl font-bold text-claude-dark leading-tight mb-4">
+            <%= post.title %>
+          </h1>
+          <div class="flex flex-wrap items-center gap-4 text-sm text-gray-400">
+            <span class="flex items-center gap-1.5">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+              </svg>
+              <%= post.author %>
+            </span>
+            <span class="flex items-center gap-1.5">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+              </svg>
+              <%= post.date %>
+            </span>
+            <span class="flex items-center gap-1.5">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+              </svg>
+              <%= post.readTime %>
+            </span>
+          </div>
+        </header>
+
+        <!-- Post Body -->
+        <div id="post-content" class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 sm:p-8">
+          <!-- Markdown content will be rendered here -->
+          <div class="text-gray-400 text-sm">Loading content...</div>
+        </div>
+
+        <!-- Hidden raw markdown -->
+        <script id="raw-markdown" type="text/plain"><%= post.content %></script>
+
+        <!-- Share & Actions -->
+        <div class="flex items-center justify-between mt-6 pt-6 border-t border-gray-100">
+          <div class="text-sm text-gray-400">Share this article</div>
+          <div class="flex items-center gap-3">
+            <a
+              href="https://twitter.com/intent/tweet?text=<%= encodeURIComponent(post.title) %>&url=<%= encodeURIComponent('https://llmapi.pro/blog/' + post.slug) %>"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2 px-3 py-1.5 text-sm text-gray-600 bg-white border border-gray-200 rounded-lg hover:border-claude-orange hover:text-claude-orange transition-colors"
+            >
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+              </svg>
+              Share on X
+            </a>
+          </div>
+        </div>
+
+        <!-- CTA Banner -->
+        <div class="mt-10 bg-gradient-to-r from-claude-dark to-gray-800 rounded-2xl p-8 text-white text-center">
+          <h3 class="text-xl font-bold mb-2">Start using LLM API</h3>
+          <p class="text-gray-300 mb-6">Free tier available. One-line configuration for Claude Code.</p>
+          <a href="/register" class="inline-flex items-center px-6 py-3 text-sm font-medium text-white bg-claude-orange rounded-xl hover:bg-opacity-90 transition-all shadow-md hover:shadow-lg">
+            Get Started Free
+            <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
+            </svg>
+          </a>
+        </div>
+      </article>
+
+      <!-- Sidebar -->
+      <aside class="lg:w-1/3">
+        <div class="sticky top-24 space-y-6">
+
+          <!-- Table of Contents -->
+          <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
+            <h3 class="text-base font-semibold text-claude-dark mb-4">Table of Contents</h3>
+            <nav id="toc" class="space-y-1">
+              <div class="text-sm text-gray-400">Loading...</div>
+            </nav>
+          </div>
+
+          <!-- Related Posts -->
+          <% if (typeof recentPosts !== 'undefined' && recentPosts.length > 0) { %>
+            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
+              <h3 class="text-base font-semibold text-claude-dark mb-4">Related Posts</h3>
+              <ul class="space-y-4">
+                <% recentPosts.forEach(function(rp) { %>
+                  <li>
+                    <a href="/blog/<%= rp.slug %>" class="group block">
+                      <span class="inline-block px-2 py-0.5 text-[10px] font-medium text-claude-orange bg-claude-orange/10 rounded-full mb-1"><%= rp.category %></span>
+                      <h4 class="text-sm font-medium text-claude-dark group-hover:text-claude-orange transition-colors leading-snug">
+                        <%= rp.title %>
+                      </h4>
+                      <span class="text-xs text-gray-400 mt-1 block"><%= rp.date %></span>
+                    </a>
+                  </li>
+                <% }); %>
+              </ul>
+            </div>
+          <% } %>
+
+        </div>
+      </aside>
+
+    </div>
+  </div>
+</section>
+
+<!-- Footer -->
+<footer class="border-t border-gray-200 bg-white">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div class="flex flex-col md:flex-row items-center justify-between gap-4">
+      <div class="flex items-center space-x-2">
+        <span class="text-lg font-bold text-claude-dark">LLM <span class="text-claude-orange">API</span></span>
+      </div>
+      <div class="flex items-center space-x-6 text-sm text-gray-500">
+        <a href="/pricing" class="hover:text-claude-orange transition-colors">Pricing</a>
+        <a href="/docs" class="hover:text-claude-orange transition-colors">Docs</a>
+        <a href="/blog" class="hover:text-claude-orange transition-colors">Blog</a>
+        <a href="/terms" class="hover:text-claude-orange transition-colors">Terms</a>
+        <a href="/privacy" class="hover:text-claude-orange transition-colors">Privacy</a>
+      </div>
+      <p class="text-sm text-gray-400">&copy; <%= new Date().getFullYear() %> LLM API. All rights reserved.</p>
+    </div>
+  </div>
+</footer>
+
+<!-- Markdown Rendering & TOC Generation -->
+<style>
+  /* Prose-like styling for rendered markdown */
+  #post-content h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: #1A1915;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #f3f4f6;
+  }
+  #post-content h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    color: #1A1915;
+  }
+  #post-content p {
+    margin-bottom: 1rem;
+    line-height: 1.75;
+    color: #4b5563;
+  }
+  #post-content a {
+    color: #D97757;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  #post-content a:hover {
+    color: #c4663f;
+  }
+  #post-content ul,
+  #post-content ol {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    color: #4b5563;
+  }
+  #post-content ul {
+    list-style-type: disc;
+  }
+  #post-content ol {
+    list-style-type: decimal;
+  }
+  #post-content li {
+    margin-bottom: 0.375rem;
+    line-height: 1.75;
+  }
+  #post-content blockquote {
+    border-left: 4px solid #D97757;
+    padding: 0.75rem 1rem;
+    margin: 1.5rem 0;
+    background-color: #faf6f1;
+    color: #4b5563;
+    border-radius: 0 0.5rem 0.5rem 0;
+  }
+  #post-content blockquote p {
+    margin-bottom: 0;
+  }
+  #post-content code {
+    background-color: #f3f4f6;
+    color: #d97757;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+  }
+  #post-content pre {
+    background-color: #111827;
+    color: #4ade80;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+    font-size: 0.875rem;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+  }
+  #post-content pre code {
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+    border-radius: 0;
+    font-size: inherit;
+  }
+  #post-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+    font-size: 0.875rem;
+  }
+  #post-content thead th {
+    background-color: #f3f4f6;
+    font-weight: 600;
+    text-align: left;
+    padding: 0.625rem 0.75rem;
+    border: 1px solid #e5e7eb;
+    color: #1A1915;
+  }
+  #post-content tbody td {
+    padding: 0.625rem 0.75rem;
+    border: 1px solid #e5e7eb;
+    color: #4b5563;
+  }
+  #post-content tbody tr:hover {
+    background-color: #faf6f1;
+  }
+  #post-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    margin: 1.5rem 0;
+  }
+  #post-content hr {
+    border: none;
+    border-top: 1px solid #e5e7eb;
+    margin: 2rem 0;
+  }
+  #post-content strong {
+    font-weight: 600;
+    color: #1A1915;
+  }
+
+  /* TOC styling */
+  #toc a {
+    display: block;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8125rem;
+    color: #6b7280;
+    border-left: 2px solid transparent;
+    border-radius: 0 0.25rem 0.25rem 0;
+    transition: all 150ms;
+    text-decoration: none;
+  }
+  #toc a:hover,
+  #toc a.active {
+    color: #D97757;
+    border-left-color: #D97757;
+    background-color: rgba(217, 119, 87, 0.05);
+  }
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  var rawEl = document.getElementById('raw-markdown');
+  var contentEl = document.getElementById('post-content');
+  var tocEl = document.getElementById('toc');
+
+  if (!rawEl || !contentEl) return;
+
+  var md = rawEl.textContent || rawEl.innerText || '';
+
+  // Configure marked
+  if (typeof marked !== 'undefined') {
+    marked.setOptions({
+      breaks: false,
+      gfm: true
+    });
+    contentEl.innerHTML = marked.parse(md);
+  } else {
+    // Fallback: render raw text
+    contentEl.innerHTML = '<div class="text-gray-500">Content could not be rendered.</div>';
+  }
+
+  // Generate Table of Contents from h2 elements
+  var headings = contentEl.querySelectorAll('h2');
+  if (headings.length > 0) {
+    tocEl.innerHTML = '';
+    headings.forEach(function(h, i) {
+      var id = 'section-' + i;
+      h.setAttribute('id', id);
+      var link = document.createElement('a');
+      link.href = '#' + id;
+      link.textContent = h.textContent;
+      tocEl.appendChild(link);
+    });
+
+    // Highlight active TOC item on scroll
+    var tocLinks = tocEl.querySelectorAll('a');
+    var observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          tocLinks.forEach(function(l) { l.classList.remove('active'); });
+          var activeLink = tocEl.querySelector('a[href="#' + entry.target.id + '"]');
+          if (activeLink) activeLink.classList.add('active');
+        }
+      });
+    }, { rootMargin: '-80px 0px -70% 0px', threshold: 0 });
+
+    headings.forEach(function(h) { observer.observe(h); });
+  } else {
+    tocEl.innerHTML = '<div class="text-sm text-gray-400">No sections found.</div>';
+  }
+});
+</script>
+
+</body>
+</html>

package/views/pages/blog.ejs

@@ -0,0 +1,148 @@
+<%- include('../partials/header') %>
+
+<%- include('../partials/nav') %>
+
+<!-- Hero Section -->
+<section class="relative overflow-hidden">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-12 sm:pt-20 sm:pb-16">
+    <div class="text-center max-w-3xl mx-auto">
+      <div class="inline-flex items-center px-3 py-1 mb-6 text-xs font-medium text-claude-orange bg-claude-orange/10 rounded-full">
+        LLM API Blog
+      </div>
+      <h1 class="text-4xl sm:text-5xl font-bold text-claude-dark tracking-tight leading-tight">
+        Blog
+      </h1>
+      <p class="mt-4 text-lg text-gray-500 leading-relaxed">
+        Insights on AI coding, Claude Code optimization, and cost-effective development
+      </p>
+    </div>
+  </div>
+  <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-gradient-to-b from-claude-orange/5 to-transparent rounded-full blur-3xl -z-10"></div>
+</section>
+
+<!-- Blog Content -->
+<section class="pb-20 sm:pb-24">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex flex-col lg:flex-row gap-10">
+
+      <!-- Posts Grid -->
+      <div class="lg:w-2/3">
+        <% if (typeof posts !== 'undefined' && posts.length > 0) { %>
+          <div class="grid sm:grid-cols-2 gap-6">
+            <% posts.forEach(function(post) { %>
+              <article class="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col">
+                <div class="p-6 flex flex-col flex-1">
+                  <div class="flex items-center gap-3 mb-3">
+                    <span class="inline-block px-2.5 py-0.5 text-xs font-medium text-claude-orange bg-claude-orange/10 rounded-full">
+                      <%= post.category %>
+                    </span>
+                  </div>
+                  <h2 class="text-lg font-semibold text-claude-dark mb-2 leading-snug">
+                    <a href="/blog/<%= post.slug %>" class="hover:text-claude-orange transition-colors">
+                      <%= post.title %>
+                    </a>
+                  </h2>
+                  <p class="text-sm text-gray-500 leading-relaxed mb-4 flex-1">
+                    <%= post.description %>
+                  </p>
+                  <div class="flex items-center justify-between text-xs text-gray-400 pt-4 border-t border-gray-50">
+                    <div class="flex items-center gap-3">
+                      <span class="flex items-center gap-1">
+                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                        </svg>
+                        <%= post.date %>
+                      </span>
+                      <span class="flex items-center gap-1">
+                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        <%= post.readTime %>
+                      </span>
+                    </div>
+                    <span class="text-gray-400"><%= post.author %></span>
+                  </div>
+                </div>
+              </article>
+            <% }); %>
+          </div>
+        <% } else { %>
+          <div class="text-center py-20">
+            <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
+              </svg>
+            </div>
+            <p class="text-gray-500 text-lg">No posts yet. Check back soon!</p>
+          </div>
+        <% } %>
+      </div>
+
+      <!-- Sidebar -->
+      <aside class="lg:w-1/3">
+        <div class="sticky top-24 space-y-6">
+
+          <!-- Categories -->
+          <% if (typeof categories !== 'undefined' && categories.length > 0) { %>
+            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
+              <h3 class="text-base font-semibold text-claude-dark mb-4">Categories</h3>
+              <ul class="space-y-2">
+                <% categories.forEach(function(cat) { %>
+                  <li>
+                    <a href="/blog?category=<%= encodeURIComponent(cat.name) %>" class="flex items-center justify-between px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-claude-orange/5 hover:text-claude-orange transition-colors">
+                      <span><%= cat.name %></span>
+                      <span class="inline-flex items-center justify-center w-6 h-6 text-xs font-medium text-gray-400 bg-gray-100 rounded-full"><%= cat.count %></span>
+                    </a>
+                  </li>
+                <% }); %>
+              </ul>
+            </div>
+          <% } %>
+
+          <!-- Get Started CTA -->
+          <div class="bg-gradient-to-br from-claude-dark to-gray-800 rounded-2xl p-6 text-white">
+            <div class="w-10 h-10 bg-claude-orange/20 rounded-xl flex items-center justify-center mb-4">
+              <svg class="w-5 h-5 text-claude-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+              </svg>
+            </div>
+            <h3 class="text-lg font-semibold mb-2">Get Started with LLM API</h3>
+            <p class="text-sm text-gray-300 leading-relaxed mb-4">
+              Claude Code compatible API service. One-line configuration, reliable and fast.
+            </p>
+            <a href="/register" class="inline-flex items-center px-4 py-2.5 text-sm font-medium text-white bg-claude-orange rounded-xl hover:bg-opacity-90 transition-all shadow-sm hover:shadow">
+              Sign Up Free
+              <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
+              </svg>
+            </a>
+          </div>
+
+        </div>
+      </aside>
+
+    </div>
+  </div>
+</section>
+
+<!-- Footer -->
+<footer class="border-t border-gray-200 bg-white">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div class="flex flex-col md:flex-row items-center justify-between gap-4">
+      <div class="flex items-center space-x-2">
+        <span class="text-lg font-bold text-claude-dark">LLM <span class="text-claude-orange">API</span></span>
+      </div>
+      <div class="flex items-center space-x-6 text-sm text-gray-500">
+        <a href="/pricing" class="hover:text-claude-orange transition-colors">Pricing</a>
+        <a href="/docs" class="hover:text-claude-orange transition-colors">Docs</a>
+        <a href="/blog" class="hover:text-claude-orange transition-colors">Blog</a>
+        <a href="/terms" class="hover:text-claude-orange transition-colors">Terms</a>
+        <a href="/privacy" class="hover:text-claude-orange transition-colors">Privacy</a>
+      </div>
+      <p class="text-sm text-gray-400">&copy; <%= new Date().getFullYear() %> LLM API. All rights reserved.</p>
+    </div>
+  </div>
+</footer>
+
+</body>
+</html>