Skip to content

Commit 7ad9eca

Browse files
davila7davila7
committed
add blog
1 parent 593cb4b commit 7ad9eca

File tree

14 files changed

+1683
-3
lines changed

14 files changed

+1683
-3
lines changed

‎cli-tool/docs_to_claude/BLOG_WRITING_GUIDE.md‎

Lines changed: 438 additions & 0 deletions
Large diffs are not rendered by default.

COMMANDS_GUIDE.md renamed to cli-tool/docs_to_claude/COMMANDS_GUIDE.md

File renamed without changes.

DOWNLOAD_TRACKING.md renamed to cli-tool/docs_to_claude/DOWNLOAD_TRACKING.md

File renamed without changes.

HOOKS_GUIDE.md renamed to cli-tool/docs_to_claude/HOOKS_GUIDE.md

File renamed without changes.

STATUSLINE_GUIDE.md renamed to cli-tool/docs_to_claude/STATUSLINE_GUIDE.md

File renamed without changes.

SUBAGENTS_GUIDE.md renamed to cli-tool/docs_to_claude/SUBAGENTS_GUIDE.md

File renamed without changes.

‎docs/blog/assets/aitmpl-supabase-search.png‎

53.9 KB
Loading

‎docs/blog/assets/supabase-claude-code-templates-cover.png‎

17.3 KB
Loading

‎docs/blog/code-copy.js‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
// Code Copy Functionality for Blog Articles
2+
class CodeCopy {
3+
constructor() {
4+
this.initCodeBlocks();
5+
this.setupCopyFunctionality();
6+
}
7+
8+
initCodeBlocks() {
9+
// Convert existing pre elements to new code-block structure
10+
const preElements = document.querySelectorAll('.article-content-full pre:not(.converted)');
11+
12+
preElements.forEach(pre => {
13+
const code = pre.querySelector('code');
14+
if (!code) return;
15+
16+
// Detect language from class or content
17+
const language = this.detectLanguage(code);
18+
const isTerminal = language === 'bash' || language === 'terminal';
19+
20+
// Create new code block structure
21+
const codeBlock = document.createElement('div');
22+
codeBlock.className = isTerminal ? 'code-block terminal-block' : 'code-block';
23+
24+
// Create header
25+
const header = document.createElement('div');
26+
header.className = 'code-header';
27+
28+
const languageSpan = document.createElement('span');
29+
languageSpan.className = 'code-language';
30+
languageSpan.textContent = language;
31+
32+
const copyButton = document.createElement('button');
33+
copyButton.className = 'copy-button';
34+
copyButton.innerHTML = `
35+
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
36+
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
37+
</svg>
38+
Copy
39+
`;
40+
41+
header.appendChild(languageSpan);
42+
header.appendChild(copyButton);
43+
44+
// Clone and prepare the pre element
45+
const newPre = pre.cloneNode(true);
46+
newPre.classList.add('converted');
47+
48+
// Assemble new structure
49+
codeBlock.appendChild(header);
50+
codeBlock.appendChild(newPre);
51+
52+
// Replace original pre
53+
pre.parentNode.replaceChild(codeBlock, pre);
54+
});
55+
}
56+
57+
detectLanguage(codeElement) {
58+
// Check for class-based language detection
59+
const className = codeElement.className;
60+
if (className.includes('language-')) {
61+
return className.match(/language-(\w+)/)[1];
62+
}
63+
64+
// Check content patterns
65+
const content = codeElement.textContent;
66+
67+
if (content.includes('npm ') || content.includes('$ ') || content.includes('claude-code ')) {
68+
return 'bash';
69+
}
70+
if (content.includes('import ') && content.includes('from ')) {
71+
return 'javascript';
72+
}
73+
if (content.includes('CREATE TABLE') || content.includes('SELECT ')) {
74+
return 'sql';
75+
}
76+
if (content.includes('{') && content.includes('"')) {
77+
return 'json';
78+
}
79+
if (content.includes('def ') || content.includes('import ')) {
80+
return 'python';
81+
}
82+
83+
return 'text';
84+
}
85+
86+
setupCopyFunctionality() {
87+
document.addEventListener('click', async (e) => {
88+
if (!e.target.closest('.copy-button')) return;
89+
90+
const button = e.target.closest('.copy-button');
91+
const codeBlock = button.closest('.code-block');
92+
const pre = codeBlock.querySelector('pre');
93+
const code = pre.querySelector('code');
94+
95+
if (!code) return;
96+
97+
try {
98+
// Get clean text content
99+
let textToCopy = code.textContent;
100+
101+
// Clean up terminal prompts if it's a terminal block
102+
if (codeBlock.classList.contains('terminal-block')) {
103+
textToCopy = this.cleanTerminalOutput(textToCopy);
104+
}
105+
106+
await navigator.clipboard.writeText(textToCopy);
107+
108+
// Update button state
109+
const originalContent = button.innerHTML;
110+
button.innerHTML = `
111+
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
112+
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
113+
</svg>
114+
Copied!
115+
`;
116+
button.classList.add('copied');
117+
118+
// Reset after 2 seconds
119+
setTimeout(() => {
120+
button.innerHTML = originalContent;
121+
button.classList.remove('copied');
122+
}, 2000);
123+
124+
} catch (err) {
125+
console.error('Failed to copy code:', err);
126+
127+
// Fallback: select text
128+
const selection = window.getSelection();
129+
const range = document.createRange();
130+
range.selectNodeContents(code);
131+
selection.removeAllRanges();
132+
selection.addRange(range);
133+
}
134+
});
135+
}
136+
137+
cleanTerminalOutput(text) {
138+
// Remove common terminal prompts and clean output
139+
return text
140+
.split('\n')
141+
.map(line => {
142+
// Remove prompts like "$ ", "❯ ", "claude-code> "
143+
line = line.replace(/^[\$❯]\s*/, '').replace(/^claude-code>\s*/, '');
144+
145+
// Remove output/result comments (lines starting with # ✓)
146+
if (line.trim().startsWith('# ✓') ||
147+
line.trim().startsWith('# Start using') ||
148+
line.trim().startsWith('# Your .claude') ||
149+
line.trim().startsWith('# This will') ||
150+
line.includes('Components will be installed') ||
151+
line.includes('directory now contains')) {
152+
return '';
153+
}
154+
155+
return line;
156+
})
157+
.filter(line => line.trim() !== '') // Remove empty lines
158+
.join('\n')
159+
.trim();
160+
}
161+
}
162+
163+
// Initialize when DOM is loaded
164+
if (document.readyState === 'loading') {
165+
document.addEventListener('DOMContentLoaded', () => new CodeCopy());
166+
} else {
167+
new CodeCopy();
168+
}

‎docs/blog/index.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Blog - Claude Code Templates</title>
7+
<meta name="description" content="Latest articles about Claude Code, AI development, and automation tools. Learn how to supercharge your development workflow with Anthropic's Claude Code.">
8+
9+
<!-- Open Graph / Facebook -->
10+
<meta property="og:type" content="website">
11+
<meta property="og:url" content="https://davila7.github.io/claude-code-templates/blog/">
12+
<meta property="og:title" content="Blog - Claude Code Templates">
13+
<meta property="og:description" content="Latest articles about Claude Code, AI development, and automation tools. Learn how to supercharge your development workflow with Anthropic's Claude Code.">
14+
<meta property="og:image" content="https://raw.githubusercontent.com/davila7/claude-code-templates/main/social-preview.png">
15+
16+
<!-- Twitter -->
17+
<meta property="twitter:card" content="summary_large_image">
18+
<meta property="twitter:url" content="https://davila7.github.io/claude-code-templates/blog/">
19+
<meta property="twitter:title" content="Blog - Claude Code Templates">
20+
<meta property="twitter:description" content="Latest articles about Claude Code, AI development, and automation tools.">
21+
<meta property="twitter:image" content="https://raw.githubusercontent.com/davila7/claude-code-templates/main/social-preview.png">
22+
23+
<link rel="canonical" href="https://davila7.github.io/claude-code-templates/blog/">
24+
<link rel="stylesheet" href="../css/styles.css">
25+
<link rel="stylesheet" href="../css/blog.css">
26+
<link rel="preconnect" href="https://fonts.googleapis.com">
27+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
28+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
29+
</head>
30+
<body>
31+
<header class="header">
32+
<div class="container">
33+
<div class="header-content">
34+
<div class="terminal-header">
35+
<div class="ascii-title">
36+
<pre class="ascii-art">
37+
██████╗ ██╗ ██████╗ ██████╗
38+
██╔══██╗██║ ██╔═══██╗██╔════╝
39+
██████╔╝██║ ██║ ██║██║ ███╗
40+
██╔══██╗██║ ██║ ██║██║ ██║
41+
██████╔╝███████╗╚██████╔╝╚██████╔╝
42+
╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝
43+
</pre>
44+
</div>
45+
<div class="terminal-subtitle">
46+
<span class="status-dot"></span>
47+
Latest articles about <strong>Claude Code</strong> and AI development
48+
</div>
49+
</div>
50+
<div class="header-actions">
51+
<a href="../index.html" class="header-btn">
52+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
53+
<path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
54+
</svg>
55+
Home
56+
</a>
57+
<a href="https://github.com/davila7/claude-code-templates" target="_blank" class="header-btn">
58+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
59+
<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.30 3.297-1.30.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"/>
60+
</svg>
61+
GitHub
62+
</a>
63+
</div>
64+
</div>
65+
</div>
66+
</header>
67+
68+
<main class="terminal">
69+
<section class="blog-hero">
70+
<div class="container">
71+
<div class="terminal-command">
72+
<div class="header-content">
73+
<h1 class="search-title">
74+
<span class="terminal-dot"></span>
75+
<strong>Blog</strong>
76+
<span class="title-params">(articles/tutorials/guides)</span>
77+
</h1>
78+
<p class="search-subtitle">⎿ Learn how to maximize your AI-powered development with Claude Code</p>
79+
</div>
80+
</div>
81+
</div>
82+
</section>
83+
84+
<section class="blog-articles">
85+
<div class="container">
86+
<div class="articles-grid">
87+
88+
<article class="article-card">
89+
<a href="supabase-claude-code-integration/" class="article-link">
90+
<div class="article-image">
91+
<img src="assets/supabase-claude-code-templates-cover.png" alt="Supabase and Claude Code Integration" loading="lazy">
92+
<div class="article-category">Database</div>
93+
</div>
94+
<div class="article-content">
95+
<div class="article-meta">
96+
<time datetime="2025-01-28">January 28, 2025</time>
97+
<span class="read-time">5 min read</span>
98+
</div>
99+
<h2>Supercharge Your Database Development with Supabase and Claude Code</h2>
100+
<p>Learn how to integrate Supabase with Claude Code using MCP servers, specialized agents, and automated commands for lightning-fast database development.</p>
101+
<div class="article-tags">
102+
<span class="tag">Supabase</span>
103+
<span class="tag">Database</span>
104+
<span class="tag">Agents</span>
105+
<span class="tag">Commands</span>
106+
<span class="tag">MCP</span>
107+
</div>
108+
</div>
109+
</a>
110+
</article>
111+
112+
</div>
113+
</div>
114+
</section>
115+
</main>
116+
117+
<footer class="footer">
118+
<div class="container">
119+
<div class="footer-content">
120+
<div class="footer-left">
121+
<div class="footer-ascii">
122+
<pre class="footer-ascii-art"> █████╗ ██╗████████╗███╗ ███╗██████╗ ██╗
123+
██╔══██╗██║╚══██╔══╝████╗ ████║██╔══██╗██║
124+
███████║██║ ██║ ██╔████╔██║██████╔╝██║
125+
██╔══██║██║ ██║ ██║╚██╔╝██║██╔═══╝ ██║
126+
██║ ██║██║ ██║ ██║ ╚═╝ ██║██║ ███████╗
127+
╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚══════╝</pre>
128+
<p class="footer-tagline">Supercharge Anthropic's Claude Code</p>
129+
</div>
130+
</div>
131+
132+
<div class="footer-right">
133+
<p class="footer-copyright">&copy; 2025 Claude Code Templates. Open source project.</p>
134+
<div class="footer-links">
135+
<a href="../trending.html" class="footer-link">
136+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
137+
<path d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"/>
138+
</svg>
139+
Trending
140+
</a>
141+
<a href="https://docs.aitmpl.com/" target="_blank" class="footer-link">
142+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
143+
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
144+
</svg>
145+
Documentation
146+
</a>
147+
<a href="https://github.com/davila7/claude-code-templates" target="_blank" class="footer-link">
148+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
149+
<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.30 3.297-1.30.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"/>
150+
</svg>
151+
GitHub
152+
</a>
153+
</div>
154+
</div>
155+
</div>
156+
</div>
157+
</footer>
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)