foliko 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,155 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>插件开发 - Foliko</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <style>
9
+ .sidebar { position: fixed; left: 0; top: 60px; width: 250px; height: calc(100vh - 60px); background: var(--bg-card); border-right: 1px solid var(--border); padding: 2rem 1rem; overflow-y: auto; }
10
+ .sidebar ul { list-style: none; }
11
+ .sidebar li { margin-bottom: 0.5rem; }
12
+ .sidebar a { color: var(--text-secondary); text-decoration: none; display: block; padding: 0.5rem; border-radius: 4px; }
13
+ .sidebar a:hover, .sidebar a.active { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
14
+ .main-content { margin-left: 250px; padding: 2rem; max-width: 900px; }
15
+ .main-content h1 { font-size: 2rem; margin-bottom: 1rem; }
16
+ .main-content h2 { font-size: 1.5rem; margin: 2rem 0 1rem; color: var(--secondary); }
17
+ .main-content p { margin-bottom: 1rem; color: var(--text-secondary); }
18
+ .main-content pre { background: var(--bg-card); padding: 1rem; border-radius: 8px; overflow-x: auto; margin-bottom: 1rem; }
19
+ .main-content code { font-family: 'Fira Code', monospace; background: var(--bg-dark); padding: 0.2rem 0.4rem; border-radius: 4px; }
20
+ .warning { background: rgba(251, 191, 36, 0.1); border: 1px solid #fbbf24; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
21
+ .tip { background: rgba(34, 211, 238, 0.1); border: 1px solid var(--secondary); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
22
+ @media (max-width: 768px) { .sidebar { display: none; } .main-content { margin-left: 0; } }
23
+ </style>
24
+ </head>
25
+ <body>
26
+ <header>
27
+ <nav>
28
+ <div class="logo">Foliko</div>
29
+ <ul class="nav-links">
30
+ <li><a href="../index.html">首页</a></li>
31
+ <li><a href="../index.html#features">特性</a></li>
32
+ <li><a href="../index.html#quickstart">快速开始</a></li>
33
+ <li><a href="../index.html#docs">文档</a></li>
34
+ </ul>
35
+ </nav>
36
+ </header>
37
+
38
+ <div class="sidebar">
39
+ <ul>
40
+ <li><a href="project-structure.html">项目结构</a></li>
41
+ <li><a href="configuration.html">配置指南</a></li>
42
+ <li><a href="plugin-development.html" class="active">插件开发</a></li>
43
+ <li><a href="skill-development.html">技能开发</a></li>
44
+ <li><a href="api.html">API 参考</a></li>
45
+ </ul>
46
+ </div>
47
+
48
+ <div class="main-content">
49
+ <h1>插件开发</h1>
50
+
51
+ <div class="warning">
52
+ <strong>重要:</strong> 禁止创建目录!插件必须是单个 `.js` 文件。
53
+ </div>
54
+
55
+ <h2>快速开始</h2>
56
+ <p>在 <code>.agent/plugins/</code> 目录下创建插件文件:</p>
57
+ <pre><code>// .agent/plugins/my-plugin.js
58
+ module.exports = function(Plugin) {
59
+ return class MyPlugin extends Plugin {
60
+ constructor(config = {}) {
61
+ super()
62
+ this.name = 'my-plugin'
63
+ this.version = '1.0.0'
64
+ this.description = '我的工具插件'
65
+ this.priority = 10
66
+ }
67
+
68
+ install(framework) {
69
+ const { z } = require('zod')
70
+ framework.registerTool({
71
+ name: 'my_tool',
72
+ description: '我的工具',
73
+ inputSchema: z.object({
74
+ param: z.string().describe('参数描述')
75
+ }),
76
+ execute: async (args, framework) => {
77
+ return { success: true, result: args.param }
78
+ }
79
+ })
80
+ return this
81
+ }
82
+ }
83
+ }</code></pre>
84
+
85
+ <h2>插件结构</h2>
86
+
87
+ <h3>必须属性</h3>
88
+ <ul>
89
+ <li><code>name</code> - 唯一名称</li>
90
+ <li><code>version</code> - 版本号(可选,默认 1.0.0)</li>
91
+ <li><code>description</code> - 描述(可选)</li>
92
+ <li><code>priority</code> - 优先级(可选,默认 10)</li>
93
+ </ul>
94
+
95
+ <h3>生命周期</h3>
96
+ <ul>
97
+ <li><code>install(framework)</code> - 安装时调用,注册工具</li>
98
+ <li><code>start(framework)</code> - 启动时调用</li>
99
+ <li><code>reload(framework)</code> - 热重载时调用</li>
100
+ <li><code>uninstall(framework)</code> - 卸载时调用</li>
101
+ </ul>
102
+
103
+ <h2>注册工具</h2>
104
+ <pre><code>framework.registerTool({
105
+ name: 'tool_name',
106
+ description: '工具描述',
107
+ inputSchema: z.object({
108
+ param: z.string().describe('参数描述')
109
+ }),
110
+ execute: async (args, framework) => {
111
+ return { success: true, result: '...' }
112
+ }
113
+ })</code></pre>
114
+
115
+ <div class="tip">
116
+ <strong>提示:</strong> 如果插件需要第三方库(如 zod),需要先调用 <code>install</code> 工具安装依赖。
117
+ </div>
118
+
119
+ <h2>第三方依赖</h2>
120
+ <p>如果插件需要使用第三方 npm 包:</p>
121
+ <ol>
122
+ <li>创建插件文件(暂不加载)</li>
123
+ <li>调用 <code>install { package: "包名" }</code> 安装依赖</li>
124
+ <li>调用 <code>reload_plugins</code> 重载插件</li>
125
+ </ol>
126
+
127
+ <h2>Python 插件</h2>
128
+ <p>除了 JavaScript 插件,框架还支持 Python 插件。创建 <code>.agent/plugins/*.py</code> 文件:</p>
129
+ <pre><code># .agent/plugins/my-python-plugin.py
130
+
131
+ plugin_info = {
132
+ "name": "my-python-plugin",
133
+ "version": "1.0.0",
134
+ "description": "我的 Python 插件"
135
+ }
136
+
137
+ def execute_tool(tool_name, params):
138
+ """执行工具"""
139
+ if tool_name == "hello":
140
+ return {"success": True, "result": f"Hello, {params.get('name', 'World')}!"}
141
+ return {"success": False, "error": "Unknown tool"}</code></pre>
142
+
143
+ <p>使用 Python 插件工具:</p>
144
+ <pre><code>python_plugin {
145
+ plugin: "my-python-plugin",
146
+ tool: "hello",
147
+ params: { name: "Foliko" }
148
+ }</code></pre>
149
+
150
+ <div class="tip">
151
+ <strong>提示:</strong> Python 插件会自动加载并注册到框架中。
152
+ </div>
153
+ </div>
154
+ </body>
155
+ </html>
@@ -0,0 +1,142 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>项目结构 - Foliko</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <style>
9
+ .sidebar {
10
+ position: fixed;
11
+ left: 0;
12
+ top: 60px;
13
+ width: 250px;
14
+ height: calc(100vh - 60px);
15
+ background: var(--bg-card);
16
+ border-right: 1px solid var(--border);
17
+ padding: 2rem 1rem;
18
+ overflow-y: auto;
19
+ }
20
+ .sidebar ul {
21
+ list-style: none;
22
+ }
23
+ .sidebar li {
24
+ margin-bottom: 0.5rem;
25
+ }
26
+ .sidebar a {
27
+ color: var(--text-secondary);
28
+ text-decoration: none;
29
+ display: block;
30
+ padding: 0.5rem;
31
+ border-radius: 4px;
32
+ }
33
+ .sidebar a:hover, .sidebar a.active {
34
+ background: rgba(99, 102, 241, 0.2);
35
+ color: var(--primary);
36
+ }
37
+ .main-content {
38
+ margin-left: 250px;
39
+ padding: 2rem;
40
+ max-width: 900px;
41
+ }
42
+ .main-content h1 {
43
+ font-size: 2rem;
44
+ margin-bottom: 1rem;
45
+ }
46
+ .main-content h2 {
47
+ font-size: 1.5rem;
48
+ margin: 2rem 0 1rem;
49
+ color: var(--secondary);
50
+ }
51
+ .main-content p {
52
+ margin-bottom: 1rem;
53
+ color: var(--text-secondary);
54
+ }
55
+ .main-content pre {
56
+ background: var(--bg-card);
57
+ padding: 1rem;
58
+ border-radius: 8px;
59
+ overflow-x: auto;
60
+ margin-bottom: 1rem;
61
+ }
62
+ @media (max-width: 768px) {
63
+ .sidebar {
64
+ display: none;
65
+ }
66
+ .main-content {
67
+ margin-left: 0;
68
+ }
69
+ }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <header>
74
+ <nav>
75
+ <div class="logo">Foliko</div>
76
+ <ul class="nav-links">
77
+ <li><a href="../index.html">首页</a></li>
78
+ <li><a href="../index.html#features">特性</a></li>
79
+ <li><a href="../index.html#quickstart">快速开始</a></li>
80
+ <li><a href="../index.html#docs">文档</a></li>
81
+ </ul>
82
+ </nav>
83
+ </header>
84
+
85
+ <div class="sidebar">
86
+ <ul>
87
+ <li><a href="project-structure.html" class="active">项目结构</a></li>
88
+ <li><a href="configuration.html">配置指南</a></li>
89
+ <li><a href="plugin-development.html">插件开发</a></li>
90
+ <li><a href="skill-development.html">技能开发</a></li>
91
+ <li><a href="api.html">API 参考</a></li>
92
+ </ul>
93
+ </div>
94
+
95
+ <div class="main-content">
96
+ <h1>项目结构</h1>
97
+
98
+ <h2>目录结构</h2>
99
+ <pre><code>vb-agent/
100
+ ├── cli/ # 命令行入口
101
+ │ ├── bin/foliko.js # CLI 入口脚本
102
+ │ └── src/
103
+ │ ├── commands/ # 命令实现
104
+ │ ├── ui/ # UI 组件
105
+ │ └── utils/ # 工具函数
106
+ ├── src/ # 核心框架
107
+ │ ├── core/ # 核心组件
108
+ │ ├── capabilities/ # 能力插件
109
+ │ └── executors/ # 执行器
110
+ ├── plugins/ # 内置插件
111
+ ├── skills/ # 技能目录
112
+ ├── examples/ # 示例
113
+ └── docs/ # 文档</code></pre>
114
+
115
+ <h2>核心目录</h2>
116
+ <h3>cli/</h3>
117
+ <p>命令行界面相关代码,包含聊天模式、命令解析等。</p>
118
+
119
+ <h3>src/core/</h3>
120
+ <p>框架核心组件,包括:</p>
121
+ <ul>
122
+ <li><code>agent.js</code> - Agent 类</li>
123
+ <li><code>framework.js</code> - 框架容器</li>
124
+ <li><code>plugin-manager.js</code> - 插件管理器</li>
125
+ <li><code>tool-registry.js</code> - 工具注册表</li>
126
+ </ul>
127
+
128
+ <h3>plugins/</h3>
129
+ <p>内置插件,提供核心功能:AI、存储、工具、工作流等。</p>
130
+
131
+ <h3>.agent/</h3>
132
+ <p>用户配置目录(项目根目录下),包含:</p>
133
+ <pre><code>.agent/
134
+ ├── config # 配置文件
135
+ ├── ai.json # AI 配置
136
+ ├── mcp_config.json # MCP 配置
137
+ ├── plugins/ # 用户插件
138
+ ├── skills/ # 用户技能
139
+ └── data/ # 数据存储</code></pre>
140
+ </div>
141
+ </body>
142
+ </html>
@@ -0,0 +1,85 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>技能开发 - Foliko</title>
7
+ <link rel="stylesheet" href="../styles.css">
8
+ <style>
9
+ .sidebar { position: fixed; left: 0; top: 60px; width: 250px; height: calc(100vh - 60px); background: var(--bg-card); border-right: 1px solid var(--border); padding: 2rem 1rem; overflow-y: auto; }
10
+ .sidebar ul { list-style: none; }
11
+ .sidebar li { margin-bottom: 0.5rem; }
12
+ .sidebar a { color: var(--text-secondary); text-decoration: none; display: block; padding: 0.5rem; border-radius: 4px; }
13
+ .sidebar a:hover, .sidebar a.active { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
14
+ .main-content { margin-left: 250px; padding: 2rem; max-width: 900px; }
15
+ .main-content h1 { font-size: 2rem; margin-bottom: 1rem; }
16
+ .main-content h2 { font-size: 1.5rem; margin: 2rem 0 1rem; color: var(--secondary); }
17
+ .main-content p { margin-bottom: 1rem; color: var(--text-secondary); }
18
+ .main-content pre { background: var(--bg-card); padding: 1rem; border-radius: 8px; overflow-x: auto; margin-bottom: 1rem; }
19
+ .main-content code { font-family: 'Fira Code', monospace; background: var(--bg-dark); padding: 0.2rem 0.4rem; border-radius: 4px; }
20
+ @media (max-width: 768px) { .sidebar { display: none; } .main-content { margin-left: 0; } }
21
+ </style>
22
+ </head>
23
+ <body>
24
+ <header>
25
+ <nav>
26
+ <div class="logo">Foliko</div>
27
+ <ul class="nav-links">
28
+ <li><a href="../index.html">首页</a></li>
29
+ <li><a href="../index.html#features">特性</a></li>
30
+ <li><a href="../index.html#quickstart">快速开始</a></li>
31
+ <li><a href="../index.html#docs">文档</a></li>
32
+ </ul>
33
+ </nav>
34
+ </header>
35
+
36
+ <div class="sidebar">
37
+ <ul>
38
+ <li><a href="project-structure.html">项目结构</a></li>
39
+ <li><a href="configuration.html">配置指南</a></li>
40
+ <li><a href="plugin-development.html">插件开发</a></li>
41
+ <li><a href="skill-development.html" class="active">技能开发</a></li>
42
+ <li><a href="api.html">API 参考</a></li>
43
+ </ul>
44
+ </div>
45
+
46
+ <div class="main-content">
47
+ <h1>技能开发</h1>
48
+
49
+ <h2>目录结构</h2>
50
+ <p>在 <code>.agent/skills/</code> 目录下创建技能:</p>
51
+ <pre><code>.agent/skills/
52
+ └── my-skill/
53
+ └── SKILL.md</code></pre>
54
+
55
+ <h2>SKILL.md 格式</h2>
56
+ <pre><code>---
57
+ name: my-skill
58
+ description: 技能描述
59
+ allowed-tools: tool1, tool2
60
+ ---
61
+
62
+ # 技能名称
63
+
64
+ 这里是技能的详细说明和使用指南...
65
+
66
+ ## 使用示例
67
+
68
+ ```
69
+ 示例代码或用法说明
70
+ ```</code></pre>
71
+
72
+ <h2>Frontmatter 字段</h2>
73
+ <ul>
74
+ <li><code>name</code> - 技能名称</li>
75
+ <li><code>description</code> - 技能描述</li>
76
+ <li><code>allowed-tools</code> - 允许使用的工具列表(逗号分隔)</li>
77
+ </ul>
78
+
79
+ <h2>加载技能</h2>
80
+ <p>Agent 启动时自动加载技能目录下的所有技能。</p>
81
+ <p>使用 <code>loadSkill</code> 工具加载特定技能:</p>
82
+ <pre><code>loadSkill { skill: "my-skill" }</code></pre>
83
+ </div>
84
+ </body>
85
+ </html>
@@ -0,0 +1,197 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Foliko - 简约的插件化 Agent 框架</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ </head>
9
+ <body>
10
+ <header>
11
+ <nav>
12
+ <div class="logo">Foliko</div>
13
+ <ul class="nav-links">
14
+ <li><a href="#home">首页</a></li>
15
+ <li><a href="#features">特性</a></li>
16
+ <li><a href="#quickstart">快速开始</a></li>
17
+ <li><a href="#docs">文档</a></li>
18
+ <li><a href="#plugins">插件</a></li>
19
+ </ul>
20
+ </nav>
21
+ </header>
22
+
23
+ <main>
24
+ <section id="home" class="hero">
25
+ <h1>Foliko</h1>
26
+ <p class="tagline">简约的插件化 Agent 框架</p>
27
+ <p class="description">
28
+ 核心简单,功能强大。通过插件扩展无限可能。
29
+ </p>
30
+ <div class="cta-buttons">
31
+ <a href="#quickstart" class="btn btn-primary">快速开始</a>
32
+ <a href="https://github.com/your-username/vb-agent" class="btn btn-secondary">GitHub</a>
33
+ </div>
34
+ </section>
35
+
36
+ <section id="features" class="features">
37
+ <h2>核心特性</h2>
38
+ <div class="feature-grid">
39
+ <div class="feature-card">
40
+ <div class="feature-icon">🔌</div>
41
+ <h3>插件化架构</h3>
42
+ <p>核心简单,通过插件扩展功能。轻松定制你的 Agent。</p>
43
+ </div>
44
+ <div class="feature-card">
45
+ <div class="feature-icon">⚡</div>
46
+ <h3>流式输出</h3>
47
+ <p>实时流式输出,即时响应。体验流畅的对话过程。</p>
48
+ </div>
49
+ <div class="feature-card">
50
+ <div class="feature-icon">🤖</div>
51
+ <h3>多 AI 支持</h3>
52
+ <p>支持 Anthropic、DeepSeek、MiniMax 等多种 AI 提供商。</p>
53
+ </div>
54
+ <div class="feature-card">
55
+ <div class="feature-icon">🛠️</div>
56
+ <h3>内置工具</h3>
57
+ <p>Shell、Python、MCP、文件系统等,开箱即用。</p>
58
+ </div>
59
+ <div class="feature-card">
60
+ <div class="feature-icon">📚</div>
61
+ <h3>技能系统</h3>
62
+ <p>可扩展的 Skill 管理,让 Agent 掌握更多能力。</p>
63
+ </div>
64
+ <div class="feature-card">
65
+ <div class="feature-icon">💬</div>
66
+ <h3>会话管理</h3>
67
+ <p>支持多会话切换,随时切换不同任务上下文。</p>
68
+ </div>
69
+ </div>
70
+ </section>
71
+
72
+ <section id="quickstart" class="quickstart">
73
+ <h2>快速开始</h2>
74
+
75
+ <div class="code-block">
76
+ <h3>安装</h3>
77
+ <pre><code># PowerShell (Windows)
78
+ irm https://raw.githubusercontent.com/your-username/vb-agent/main/install.ps1 | iex
79
+
80
+ # 或者克隆仓库
81
+ git clone https://github.com/your-username/vb-agent.git
82
+ cd vb-agent
83
+ npm install
84
+ npm link</code></pre>
85
+ </div>
86
+
87
+ <div class="code-block">
88
+ <h3>配置</h3>
89
+ <pre><code># 创建配置目录
90
+ mkdir .agent
91
+
92
+ # 创建配置文件
93
+ echo "ai_key: your-api-key" > .agent/config
94
+ echo "ai_model: MiniMax-M2.7" >> .agent/config
95
+ echo "ai_provider: minimax" >> .agent/config</code></pre>
96
+ </div>
97
+
98
+ <div class="code-block">
99
+ <h3>启动</h3>
100
+ <pre><code>foliko chat</code></pre>
101
+ </div>
102
+ </section>
103
+
104
+ <section id="docs" class="docs">
105
+ <h2>文档</h2>
106
+ <div class="docs-grid">
107
+ <a href="docs/project-structure.html" class="doc-card">
108
+ <h3>项目结构</h3>
109
+ <p>了解 Foliko 的目录结构和模块组织</p>
110
+ </a>
111
+ <a href="docs/configuration.html" class="doc-card">
112
+ <h3>配置指南</h3>
113
+ <p>详细的配置选项和说明</p>
114
+ </a>
115
+ <a href="docs/plugin-development.html" class="doc-card">
116
+ <h3>插件开发</h3>
117
+ <p>开发你自己的插件</p>
118
+ </a>
119
+ <a href="docs/skill-development.html" class="doc-card">
120
+ <h3>技能开发</h3>
121
+ <p>创建和管理自定义技能</p>
122
+ </a>
123
+ </div>
124
+ </section>
125
+
126
+ <section id="plugins" class="builtin-plugins">
127
+ <h2>内置插件</h2>
128
+ <table class="plugin-table">
129
+ <thead>
130
+ <tr>
131
+ <th>插件</th>
132
+ <th>说明</th>
133
+ <th>工具</th>
134
+ </tr>
135
+ </thead>
136
+ <tbody>
137
+ <tr>
138
+ <td>AI</td>
139
+ <td>AI 提供商集成</td>
140
+ <td>chat, chatStream</td>
141
+ </tr>
142
+ <tr>
143
+ <td>Storage</td>
144
+ <td>数据持久化</td>
145
+ <td>save, load, delete</td>
146
+ </tr>
147
+ <tr>
148
+ <td>Tools</td>
149
+ <td>内置工具集</td>
150
+ <td>多个工具</td>
151
+ </tr>
152
+ <tr>
153
+ <td>Workflow</td>
154
+ <td>工作流引擎</td>
155
+ <td>workflow_execute</td>
156
+ </tr>
157
+ <tr>
158
+ <td>Shell</td>
159
+ <td>Shell 命令执行</td>
160
+ <td>shell_execute</td>
161
+ </tr>
162
+ <tr>
163
+ <td>Python</td>
164
+ <td>Python 代码执行</td>
165
+ <td>python_execute</td>
166
+ </tr>
167
+ <tr>
168
+ <td>MCP</td>
169
+ <td>MCP 协议支持</td>
170
+ <td>mcp_execute, mcp_reload</td>
171
+ </tr>
172
+ <tr>
173
+ <td>Session</td>
174
+ <td>会话管理</td>
175
+ <td>session_*</td>
176
+ </tr>
177
+ <tr>
178
+ <td>Audit</td>
179
+ <td>审计日志</td>
180
+ <td>audit_query</td>
181
+ </tr>
182
+ </tbody>
183
+ </table>
184
+ </section>
185
+ </main>
186
+
187
+ <footer>
188
+ <p>&copy; 2024 Foliko. MIT License.</p>
189
+ <p>
190
+ <a href="https://github.com/your-username/vb-agent">GitHub</a> |
191
+ <a href="docs/api.html">API 文档</a>
192
+ </p>
193
+ </footer>
194
+
195
+ <script src="script.js"></script>
196
+ </body>
197
+ </html>
@@ -0,0 +1,77 @@
1
+ // Smooth scrolling
2
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
3
+ anchor.addEventListener('click', function (e) {
4
+ e.preventDefault();
5
+ const target = document.querySelector(this.getAttribute('href'));
6
+ if (target) {
7
+ target.scrollIntoView({
8
+ behavior: 'smooth',
9
+ block: 'start'
10
+ });
11
+ }
12
+ });
13
+ });
14
+
15
+ // Header background on scroll
16
+ const header = document.querySelector('header');
17
+ window.addEventListener('scroll', () => {
18
+ if (window.scrollY > 50) {
19
+ header.style.background = 'rgba(15, 23, 42, 0.98)';
20
+ } else {
21
+ header.style.background = 'rgba(15, 23, 42, 0.95)';
22
+ }
23
+ });
24
+
25
+ // Animate elements on scroll
26
+ const observerOptions = {
27
+ threshold: 0.1,
28
+ rootMargin: '0px 0px -50px 0px'
29
+ };
30
+
31
+ const observer = new IntersectionObserver((entries) => {
32
+ entries.forEach(entry => {
33
+ if (entry.isIntersecting) {
34
+ entry.target.style.opacity = '1';
35
+ entry.target.style.transform = 'translateY(0)';
36
+ }
37
+ });
38
+ }, observerOptions);
39
+
40
+ // Apply animation to feature cards
41
+ document.querySelectorAll('.feature-card, .doc-card').forEach((el, index) => {
42
+ el.style.opacity = '0';
43
+ el.style.transform = 'translateY(20px)';
44
+ el.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
45
+ observer.observe(el);
46
+ });
47
+
48
+ // Copy code blocks
49
+ document.querySelectorAll('.code-block pre').forEach(pre => {
50
+ const button = document.createElement('button');
51
+ button.className = 'copy-btn';
52
+ button.textContent = 'Copy';
53
+ button.style.cssText = `
54
+ position: absolute;
55
+ top: 0.5rem;
56
+ right: 0.5rem;
57
+ padding: 0.25rem 0.75rem;
58
+ background: var(--primary);
59
+ color: white;
60
+ border: none;
61
+ border-radius: 4px;
62
+ cursor: pointer;
63
+ font-size: 0.8rem;
64
+ `;
65
+ pre.style.position = 'relative';
66
+ pre.appendChild(button);
67
+
68
+ button.addEventListener('click', () => {
69
+ const code = pre.querySelector('code').textContent;
70
+ navigator.clipboard.writeText(code).then(() => {
71
+ button.textContent = 'Copied!';
72
+ setTimeout(() => {
73
+ button.textContent = 'Copy';
74
+ }, 2000);
75
+ });
76
+ });
77
+ });