claude-code-templates 1.21.13 → 1.21.14

package/docs/blog/css/blog-controls.css

@@ -0,0 +1,254 @@
+/**
+ * Blog Search and Filter Controls Styles
+ */
+
+/* Main controls container */
+.blog-controls {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Search container */
+.search-container {
+    position: relative;
+    flex: 0 1 400px;
+    min-width: 280px;
+}
+
+.search-icon {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #d57455;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.blog-search-input {
+    width: 100%;
+    padding: 0.875rem 3rem 0.875rem 3rem;
+    background: rgba(213, 116, 85, 0.05);
+    border: 2px solid rgba(213, 116, 85, 0.2);
+    border-radius: 8px;
+    color: #E0E0E0;
+    font-size: 0.95rem;
+    font-family: 'Inter', monospace;
+    transition: all 0.3s ease;
+}
+
+.blog-search-input:focus {
+    outline: none;
+    border-color: #d57455;
+    background: rgba(213, 116, 85, 0.1);
+    box-shadow: 0 0 0 3px rgba(213, 116, 85, 0.1);
+}
+
+.blog-search-input::placeholder {
+    color: #666;
+}
+
+.clear-search-btn {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(213, 116, 85, 0.1);
+    border: none;
+    border-radius: 4px;
+    padding: 0.375rem;
+    cursor: pointer;
+    color: #d57455;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.clear-search-btn:hover {
+    background: rgba(213, 116, 85, 0.2);
+}
+
+.clear-search-btn:active {
+    transform: translateY(-50%) scale(0.95);
+}
+
+/* Sort container */
+.sort-container {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.sort-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #d57455;
+    font-size: 0.9rem;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.sort-label svg {
+    flex-shrink: 0;
+}
+
+.sort-select {
+    padding: 0.75rem 2.5rem 0.75rem 1rem;
+    background: rgba(213, 116, 85, 0.05);
+    border: 2px solid rgba(213, 116, 85, 0.2);
+    border-radius: 8px;
+    color: #E0E0E0;
+    font-size: 0.9rem;
+    font-family: 'Inter', monospace;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%23d57455' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.875rem center;
+}
+
+.sort-select:hover {
+    border-color: #d57455;
+    background-color: rgba(213, 116, 85, 0.08);
+}
+
+.sort-select:focus {
+    outline: none;
+    border-color: #d57455;
+    box-shadow: 0 0 0 3px rgba(213, 116, 85, 0.1);
+}
+
+.sort-select option {
+    background: #1a1a1a;
+    color: #E0E0E0;
+    padding: 0.5rem;
+}
+
+/* Results info */
+.results-info {
+    display: none;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    background: rgba(0, 208, 132, 0.05);
+    border-left: 3px solid #00D084;
+    border-radius: 4px;
+    margin-bottom: 1.5rem;
+    font-size: 0.9rem;
+    color: #E0E0E0;
+}
+
+#results-count {
+    flex: 1;
+}
+
+.clear-filters-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(0, 208, 132, 0.1);
+    border: 1px solid rgba(0, 208, 132, 0.3);
+    border-radius: 6px;
+    color: #00D084;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.clear-filters-btn:hover {
+    background: rgba(0, 208, 132, 0.2);
+    border-color: #00D084;
+}
+
+.clear-filters-btn:active {
+    transform: scale(0.98);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .blog-controls {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .search-container {
+        width: 100%;
+        min-width: auto;
+    }
+
+    .sort-container {
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .sort-select {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .results-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.75rem;
+    }
+
+    .clear-filters-btn {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .blog-search-input {
+        font-size: 0.875rem;
+        padding: 0.75rem 2.75rem 0.75rem 2.75rem;
+    }
+
+    .sort-select {
+        font-size: 0.875rem;
+        padding: 0.65rem 2.5rem 0.65rem 0.875rem;
+    }
+
+    .sort-label {
+        font-size: 0.85rem;
+    }
+}
+
+/* Animation for results */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.results-info {
+    animation: fadeIn 0.3s ease;
+}
+
+/* Dark mode optimization */
+@media (prefers-color-scheme: dark) {
+    .blog-search-input,
+    .sort-select {
+        background: rgba(213, 116, 85, 0.03);
+    }
+
+    .blog-search-input:focus,
+    .sort-select:hover {
+        background: rgba(213, 116, 85, 0.08);
+    }
+}

package/docs/blog/e2b-claude-code-sandbox/index.html

@@ -4,6 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>E2B + Claude Code Sandbox: Secure Cloud Development Environment Guide</title>
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="../../static/favicon/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="../../static/favicon/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../../static/favicon/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="../../static/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="../../static/favicon/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="../../static/favicon/android-chrome-512x512.png">
+
     <meta name="description" content="Complete guide to run Claude Code in isolated E2B cloud sandbox. Install components safely, execute prompts in secure environment, and develop without local system risks.">
     
     <!-- Open Graph / Facebook -->

package/docs/blog/index.html

@@ -21,8 +21,18 @@
     <meta property="twitter:image" content="https://www.aitmpl.com/blog/assets/supabase-claude-code-templates-cover.png">
     
     <link rel="canonical" href="https://aitmpl.com/blog/">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="../static/favicon/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="../static/favicon/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../static/favicon/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="../static/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="../static/favicon/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="../static/favicon/android-chrome-512x512.png">
+
     <link rel="stylesheet" href="../css/styles.css">
     <link rel="stylesheet" href="../css/blog.css">
+    <link rel="stylesheet" href="css/blog-controls.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -95,109 +105,82 @@
 
         <section class="blog-articles">
             <div class="container">
-                <div class="articles-grid" style="grid-template-columns: 1fr;">
-                    <article class="article-card">
-                        <a href="e2b-claude-code-sandbox/" class="article-link">
-                            <div class="article-image">
-                                <img src="https://www.aitmpl.com/blog/assets/e2b-claude-code-sandbox-cover.png" alt="E2B Claude Code Sandbox" loading="lazy">
-                                <div class="article-category">Cloud Development</div>
-                            </div>
-                            <div class="article-content">
-                                <div class="article-meta">
-                                    <time datetime="2025-01-31">January 31, 2025</time>
-                                    <span class="read-time">6 min read</span>
-                                </div>
-                                <h2>E2B + Claude Code Sandbox: Secure Cloud Development</h2>
-                                <p>Complete guide to run Claude Code in isolated E2B cloud sandbox. Install components safely, execute prompts in secure environment.</p>
-                                <div class="article-tags">
-                                    <span class="tag">E2B</span>
-                                    <span class="tag">Sandbox</span>
-                                    <span class="tag">Security</span>
-                                    <span class="tag">Cloud</span>
-                                </div>
-                            </div>
-                        </a>
-                    </article>
-                    
-                    <article class="article-card">
-                        <a href="nextjs-vercel-claude-code-integration/" class="article-link">
-                            <div class="article-image">
-                                <img src="https://www.aitmpl.com/blog/assets/nextjs-vercel-claude-code-templates-cover.png" alt="Next.js, Vercel and Claude Code Integration" loading="lazy">
-                                <div class="article-category">Frontend</div>
-                            </div>
-                            <div class="article-content">
-                                <div class="article-meta">
-                                    <time datetime="2025-01-31">January 31, 2025</time>
-                                    <span class="read-time">8 min read</span>
-                                </div>
-                                <h2>Claude Code + Next.js and Vercel Integration</h2>
-                                <p>Learn how to integrate Next.js and Vercel with Claude Code using Agents, Commands and Hooks for faster frontend development.</p>
-                                <div class="article-tags">
-                                    <span class="tag">Next.js</span>
-                                    <span class="tag">Vercel</span>
-                                    <span class="tag">Hooks</span>
-                                    <span class="tag">Agents</span>
-                                </div>
-                            </div>
-                        </a>
-                    </article>
-                    
-                    <article class="article-card">
-                        <a href="supabase-claude-code-integration/" class="article-link">
-                            <div class="article-image">
-                                <img src="https://www.aitmpl.com/blog/assets/supabase-claude-code-templates-cover.png" alt="Supabase and Claude Code Integration" loading="lazy">
-                                <div class="article-category">Database</div>
-                            </div>
-                            <div class="article-content">
-                                <div class="article-meta">
-                                    <time datetime="2025-01-28">January 28, 2025</time>
-                                    <span class="read-time">5 min read</span>
-                                </div>
-                                <h2>Claude Code + Supabase Integration</h2>
-                                <p>Learn how to integrate Supabase with Claude Code using MCP, Agents, and Commands for faster database development.</p>
-                                <div class="article-tags">
-                                    <span class="tag">Supabase</span>
-                                    <span class="tag">Database</span>
-                                    <span class="tag">Agents</span>
-                                    <span class="tag">Commands</span>
-                                    <span class="tag">MCP</span>
-                                </div>
-                            </div>
-                        </a>
-                    </article>
-                    
+                <!-- Featured Posts Carousel -->
+                <div class="featured-posts-section" id="featured-posts-section" style="display: none;">
+                    <div class="featured-header">
+                        <h2 class="featured-title">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/>
+                            </svg>
+                            Featured Posts
+                        </h2>
+                    </div>
+                    <div class="featured-carousel-wrapper">
+                        <button class="carousel-nav carousel-prev" id="carousel-prev" aria-label="Previous">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"/>
+                            </svg>
+                        </button>
+                        <div class="featured-carousel" id="featured-carousel">
+                            <!-- Featured posts will be loaded here dynamically -->
+                        </div>
+                        <button class="carousel-nav carousel-next" id="carousel-next" aria-label="Next">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/>
+                            </svg>
+                        </button>
+                    </div>
                 </div>
-            </div>
-        </section>
 
-        <section class="newsletter-section">
-            <div class="container">
-                <div class="newsletter-container">
-                    <div id="newsletter-success" class="newsletter-message success-message" style="display: none;">
-                        ✓ Subscribed successfully
+                <!-- Search and Filter Controls -->
+                <div class="blog-controls">
+                    <div class="search-container">
+                        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <path d="m21 21-4.35-4.35"></path>
+                        </svg>
+                        <input
+                            type="text"
+                            id="blog-search"
+                            class="blog-search-input"
+                            placeholder="Search articles by title, description, tags..."
+                            autocomplete="off"
+                        >
+                        <button id="clear-search" class="clear-search-btn" style="display: none;">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <line x1="18" y1="6" x2="6" y2="18"></line>
+                                <line x1="6" y1="6" x2="18" y2="18"></line>
+                            </svg>
+                        </button>
                     </div>
-                    
-                    <div id="newsletter-error" class="newsletter-message error-message" style="display: none;">
-                        ✗ Error. Try again.
+
+                    <div class="sort-container">
+                        <label for="sort-by" class="sort-label">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z"/>
+                            </svg>
+                            Sort by:
+                        </label>
+                        <select id="sort-by" class="sort-select">
+                            <option value="date-desc">Newest First</option>
+                            <option value="date-asc">Oldest First</option>
+                            <option value="difficulty-asc">Difficulty: Basic → Advanced</option>
+                            <option value="difficulty-desc">Difficulty: Advanced → Basic</option>
+                        </select>
                     </div>
-                    
-                    <form id="newsletter-form" method="POST" action="https://817715f5.sibforms.com/serve/MUIFAAfji55QSo2kjmh_3Y4i1XrFpOiTqwu6ZKbWQtps1SHh-4OOCCzhwRCvknpSybxI0_-V0KWocb0_b12iXBT-OahbBE4YiCQc9nVU0mD2R18vQfpP9wN11ZW8XqgTo5I9EGLrt-qdfR_1rxbmJX4uiWGXbJSYYrTVno0hUd0Pp42BOLsWJ3hssO3NMq2fdWhVZa9OIIWW3L85" data-type="subscription" class="newsletter-form" target="hidden_iframe">
-                        <div class="newsletter-header">
-                            <span class="newsletter-prompt">Get updates via email</span>
-                        </div>
-                        <div class="input-group">
-                            <input type="email" id="EMAIL" name="EMAIL" placeholder="your@email.com" required class="newsletter-input">
-                            <button type="submit" class="newsletter-submit">
-                                <span class="submit-text">→</span>
-                            </button>
-                        </div>
-                        <input type="text" name="email_address_check" value="" style="display: none;">
-                        <input type="hidden" name="locale" value="en">
-                    </form>
-                    <iframe name="hidden_iframe" style="display: none;"></iframe>
                 </div>
+
+                <!-- Results Info -->
+                <div class="results-info" id="results-info" style="display: none;">
+                    <span id="results-count"></span>
+                    <button id="clear-filters" class="clear-filters-btn" style="display: none;">Clear filters</button>
+                </div>
+
+                <!-- Articles will be loaded dynamically from blog-articles.json -->
+                <div class="articles-grid" style="grid-template-columns: 1fr;"></div>
             </div>
         </section>
+
     </main>
 
     <footer class="footer">
@@ -242,33 +225,7 @@
         </div>
     </footer>
     
-    <!-- Newsletter Form JavaScript -->
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const form = document.getElementById('newsletter-form');
-            const successMessage = document.getElementById('newsletter-success');
-            const errorMessage = document.getElementById('newsletter-error');
-            const submitButton = form.querySelector('.newsletter-submit');
-            const submitText = submitButton.querySelector('.submit-text');
-            
-            form.addEventListener('submit', (e) => {
-                // Set loading state
-                submitButton.disabled = true;
-                submitText.textContent = '...';
-                
-                // Hide messages initially
-                successMessage.style.display = 'none';
-                errorMessage.style.display = 'none';
-                
-                // Show success message after form submits to iframe
-                setTimeout(() => {
-                    successMessage.style.display = 'block';
-                    submitButton.disabled = false;
-                    submitText.textContent = '→';
-                    form.reset();
-                }, 1500);
-            });
-        });
-    </script>
+    <!-- Blog Articles Dynamic Loader -->
+    <script src="js/blog-loader.js"></script>
 </body>
 </html>