Skip to content

Commit 1cf551b

Browse files
ejfoxejfox
committed
docs: update docs, add docs-serve to preview them
1 parent dfb7274 commit 1cf551b

File tree

2 files changed

+98
-107
lines changed

2 files changed

+98
-107
lines changed

‎docs/index.html

+96-106
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,120 @@
11
<!DOCTYPE html>
2-
<html lang="en" class="dark">
2+
<html lang="en">
33

44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vulpecula Chat - A Second Brain for Your AI</title>
7+
<title>Vulpecula Loom - A Second Brain for Your AI</title>
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
89
<script src="https://cdn.tailwindcss.com"></script>
9-
<script>
10-
tailwind.config = {
11-
darkMode: 'class',
12-
theme: {
13-
extend: {
14-
colors: {
15-
vulpecula: {
16-
300: '#7cc5fb',
17-
400: '#36a7f6',
18-
500: '#0c89e8',
19-
600: '#006bc6',
20-
700: '#0055a1',
21-
}
22-
}
23-
}
24-
}
25-
}
26-
</script>
2710
<style>
28-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
29-
30-
body {
31-
font-family: 'Inter', sans-serif;
11+
.gradient-text {
12+
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
13+
-webkit-background-clip: text;
14+
background-clip: text;
15+
color: transparent;
3216
}
3317

34-
.terminal {
35-
background: rgba(0, 0, 0, 0.8);
36-
border-radius: 8px;
37-
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
38-
backdrop-filter: blur(12px);
18+
.feature-grid {
19+
display: grid;
20+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
21+
gap: 2rem;
3922
}
4023
</style>
4124
</head>
4225

43-
<body class="bg-gray-900 text-gray-100">
44-
<div class="min-h-screen flex flex-col">
45-
<nav class="p-6">
46-
<div class="max-w-7xl mx-auto flex justify-between items-center">
47-
<div class="text-2xl font-bold text-vulpecula-300">Vulpecula Chat</div>
48-
<a href="https://github.com/room302studio/vulpecula-loom"
49-
class="px-4 py-2 bg-vulpecula-700 hover:bg-vulpecula-600 rounded-lg transition-colors">
50-
GitHub
51-
</a>
52-
</div>
53-
</nav>
54-
55-
<main class="flex-1">
56-
<div class="max-w-7xl mx-auto px-6 py-24">
57-
<h1
58-
class="text-6xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-vulpecula-300 to-vulpecula-500">
59-
A Second Brain for Your AI
60-
</h1>
61-
<p class="text-xl text-gray-400 mb-12 max-w-2xl">
62-
Not just another AI interface. A power tool for those who understand
63-
that every conversation is valuable data, every context matters, and
64-
interfaces should enhance - not limit - your capabilities.
65-
</p>
26+
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
27+
<header class="py-20 px-6 text-center">
28+
<h1 class="text-5xl font-bold mb-6 gradient-text">Vulpecula Loom</h1>
29+
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
30+
A powerful desktop application that combines modern AI language models with seamless Obsidian integration.
31+
Your second brain, enhanced by AI.
32+
</p>
33+
<div class="flex justify-center gap-4">
34+
<a href="https://github.com/ejfox/vulpecula-loom/releases"
35+
class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition">
36+
Download
37+
</a>
38+
<a href="https://github.com/ejfox/vulpecula-loom"
39+
class="bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 px-8 py-3 rounded-lg font-medium transition">
40+
GitHub
41+
</a>
42+
</div>
43+
</header>
6644

67-
<!-- Terminal Demo -->
68-
<div class="terminal p-6 mb-12">
69-
<div class="flex items-center mb-4">
70-
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
71-
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
72-
<div class="w-3 h-3 rounded-full bg-green-500"></div>
73-
</div>
74-
<div class="font-mono text-sm space-y-2">
75-
<div>
76-
<span class="text-green-400">$</span>
77-
<span class="text-vulpecula-300">@file:roadmap.md</span>
78-
<span class="text-gray-400"># Pull in project context</span>
79-
</div>
80-
<div>
81-
<span class="text-green-400">$</span>
82-
<span class="text-vulpecula-300">:context +tool:API 0.8</span>
83-
<span class="text-gray-400"># Boost API knowledge</span>
84-
</div>
85-
<div>
86-
<span class="text-green-400">$</span>
87-
<span class="text-vulpecula-300">:model claude</span>
88-
<span class="text-gray-400"># Switch models seamlessly</span>
89-
</div>
90-
</div>
45+
<main class="max-w-6xl mx-auto px-6 pb-20">
46+
<section class="mb-20">
47+
<h2 class="text-3xl font-bold mb-12 text-center">Key Features</h2>
48+
<div class="feature-grid">
49+
<div class="p-6 rounded-xl bg-white dark:bg-gray-800 shadow-lg">
50+
<h3 class="text-xl font-semibold mb-4">🤖 Advanced AI Integration</h3>
51+
<ul class="space-y-2 text-gray-600 dark:text-gray-300">
52+
<li>• Support for Claude 3 (Opus & Sonnet)</li>
53+
<li>• GPT-4 and GPT-3.5 Turbo via OpenRouter</li>
54+
<li>• Real-time token counting</li>
55+
<li>• Cost tracking</li>
56+
</ul>
9157
</div>
9258

93-
<!-- Features Grid -->
94-
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-24">
95-
<div class="p-6 rounded-lg bg-gray-800">
96-
<h3 class="text-xl font-semibold mb-4 text-vulpecula-300">Markdown-Based Memory</h3>
97-
<p class="text-gray-400">Every conversation is stored in plain-text markdown. Your chat history is yours—and
98-
it's actually useful.</p>
99-
</div>
100-
<div class="p-6 rounded-lg bg-gray-800">
101-
<h3 class="text-xl font-semibold mb-4 text-vulpecula-300">@Everything Integration</h3>
102-
<p class="text-gray-400">Quickly reference files, notes, and context with @ commands. Pull in anything,
103-
anytime.</p>
104-
</div>
105-
<div class="p-6 rounded-lg bg-gray-800">
106-
<h3 class="text-xl font-semibold mb-4 text-vulpecula-300">Dynamic Context Control</h3>
107-
<p class="text-gray-400">Debug what your AI knows, adjust weights on the fly, and save successful recipes.
108-
</p>
109-
</div>
59+
<div class="p-6 rounded-xl bg-white dark:bg-gray-800 shadow-lg">
60+
<h3 class="text-xl font-semibold mb-4">📚 Obsidian Integration</h3>
61+
<ul class="space-y-2 text-gray-600 dark:text-gray-300">
62+
<li>• Quick note references with @mentions</li>
63+
<li>• Real-time vault search</li>
64+
<li>• Multiple file references per message</li>
65+
<li>• Secure local-only access</li>
66+
</ul>
11067
</div>
11168

112-
<!-- CTA -->
113-
<div class="text-center">
114-
<a href="https://github.com/room302studio/vulpecula-loom"
115-
class="inline-block px-8 py-4 bg-vulpecula-500 hover:bg-vulpecula-400 rounded-lg text-lg font-semibold transition-colors">
116-
Get Early Access
117-
</a>
69+
<div class="p-6 rounded-xl bg-white dark:bg-gray-800 shadow-lg">
70+
<h3 class="text-xl font-semibold mb-4">💫 Modern Interface</h3>
71+
<ul class="space-y-2 text-gray-600 dark:text-gray-300">
72+
<li>• Dark/Light mode support</li>
73+
<li>• Native system integration</li>
74+
<li>• Markdown rendering with syntax highlighting</li>
75+
<li>• Responsive design with smooth transitions</li>
76+
</ul>
11877
</div>
11978
</div>
120-
</main>
79+
</section>
12180

122-
<footer class="py-12 text-center text-gray-500">
123-
Built by <a href="https://github.com/room302studio" class="text-vulpecula-300 hover:text-vulpecula-200">Room 302
124-
Studio</a>
125-
for those who take AI seriously.
126-
</footer>
127-
</div>
81+
<section class="text-center mb-20">
82+
<h2 class="text-3xl font-bold mb-6">Built with Modern Technology</h2>
83+
<p class="text-gray-600 dark:text-gray-300 mb-8">
84+
Powered by Electron, Vue 3, and TypeScript for a fast, reliable, and type-safe experience.
85+
</p>
86+
<div class="flex flex-wrap justify-center gap-4">
87+
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">Electron</span>
88+
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">Vue 3</span>
89+
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">TypeScript</span>
90+
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">OpenRouter</span>
91+
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">Supabase</span>
92+
</div>
93+
</section>
94+
95+
<section class="text-center">
96+
<h2 class="text-3xl font-bold mb-6">Get Started Today</h2>
97+
<p class="text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
98+
Download Vulpecula Loom and experience the future of AI-assisted writing and research.
99+
All you need is Node.js v18+, an OpenRouter API key, and optionally, an Obsidian vault.
100+
</p>
101+
<a href="https://github.com/ejfox/vulpecula-loom#getting-started"
102+
class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition">
103+
Installation Guide
104+
</a>
105+
</section>
106+
</main>
107+
108+
<footer class="text-center py-8 text-gray-600 dark:text-gray-400">
109+
<p>Created by EJ Fox • MIT License</p>
110+
</footer>
111+
112+
<script>
113+
// Simple dark mode toggle based on system preference
114+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
115+
document.documentElement.classList.add('dark')
116+
}
117+
</script>
128118
</body>
129119

130120
</html>

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"build": "vue-tsc --noEmit && vite build && electron-builder",
2828
"preview": "vite preview",
2929
"rebuild": "electron-rebuild",
30-
"postinstall": "electron-builder install-app-deps"
30+
"postinstall": "electron-builder install-app-deps",
31+
"docs-serve": "npx serve docs"
3132
},
3233
"devDependencies": {
3334
"@electron/rebuild": "^3.7.1",

0 commit comments

Comments
 (0)