Skip to content

Commit

Permalink
docs: update docs, add docs-serve to preview them
Browse files Browse the repository at this point in the history
  • Loading branch information
@ejfox
ejfox committed Dec 27, 2024
1 parent dfb7274 commit 1cf551b
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 107 deletions.
202 changes: 96 additions & 106 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,120 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vulpecula Chat - A Second Brain for Your AI</title>
<title>Vulpecula Loom - A Second Brain for Your AI</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
vulpecula: {
300: '#7cc5fb',
400: '#36a7f6',
500: '#0c89e8',
600: '#006bc6',
700: '#0055a1',
}
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
font-family: 'Inter', sans-serif;
.gradient-text {
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.terminal {
background: rgba(0, 0, 0, 0.8);
border-radius: 8px;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(12px);
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
</style>
</head>

<body class="bg-gray-900 text-gray-100">
<div class="min-h-screen flex flex-col">
<nav class="p-6">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="text-2xl font-bold text-vulpecula-300">Vulpecula Chat</div>
<a href="https://github.com/room302studio/vulpecula-loom"
class="px-4 py-2 bg-vulpecula-700 hover:bg-vulpecula-600 rounded-lg transition-colors">
GitHub
</a>
</div>
</nav>

<main class="flex-1">
<div class="max-w-7xl mx-auto px-6 py-24">
<h1
class="text-6xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-vulpecula-300 to-vulpecula-500">
A Second Brain for Your AI
</h1>
<p class="text-xl text-gray-400 mb-12 max-w-2xl">
Not just another AI interface. A power tool for those who understand
that every conversation is valuable data, every context matters, and
interfaces should enhance - not limit - your capabilities.
</p>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<header class="py-20 px-6 text-center">
<h1 class="text-5xl font-bold mb-6 gradient-text">Vulpecula Loom</h1>
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-600 dark:text-gray-300">
A powerful desktop application that combines modern AI language models with seamless Obsidian integration.
Your second brain, enhanced by AI.
</p>
<div class="flex justify-center gap-4">
<a href="https://github.com/ejfox/vulpecula-loom/releases"
class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition">
Download
</a>
<a href="https://github.com/ejfox/vulpecula-loom"
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">
GitHub
</a>
</div>
</header>

<!-- Terminal Demo -->
<div class="terminal p-6 mb-12">
<div class="flex items-center mb-4">
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="font-mono text-sm space-y-2">
<div>
<span class="text-green-400">$</span>
<span class="text-vulpecula-300">@file:roadmap.md</span>
<span class="text-gray-400"># Pull in project context</span>
</div>
<div>
<span class="text-green-400">$</span>
<span class="text-vulpecula-300">:context +tool:API 0.8</span>
<span class="text-gray-400"># Boost API knowledge</span>
</div>
<div>
<span class="text-green-400">$</span>
<span class="text-vulpecula-300">:model claude</span>
<span class="text-gray-400"># Switch models seamlessly</span>
</div>
</div>
<main class="max-w-6xl mx-auto px-6 pb-20">
<section class="mb-20">
<h2 class="text-3xl font-bold mb-12 text-center">Key Features</h2>
<div class="feature-grid">
<div class="p-6 rounded-xl bg-white dark:bg-gray-800 shadow-lg">
<h3 class="text-xl font-semibold mb-4">🤖 Advanced AI Integration</h3>
<ul class="space-y-2 text-gray-600 dark:text-gray-300">
<li>• Support for Claude 3 (Opus & Sonnet)</li>
<li>• GPT-4 and GPT-3.5 Turbo via OpenRouter</li>
<li>• Real-time token counting</li>
<li>• Cost tracking</li>
</ul>
</div>

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

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

<footer class="py-12 text-center text-gray-500">
Built by <a href="https://github.com/room302studio" class="text-vulpecula-300 hover:text-vulpecula-200">Room 302
Studio</a>
for those who take AI seriously.
</footer>
</div>
<section class="text-center mb-20">
<h2 class="text-3xl font-bold mb-6">Built with Modern Technology</h2>
<p class="text-gray-600 dark:text-gray-300 mb-8">
Powered by Electron, Vue 3, and TypeScript for a fast, reliable, and type-safe experience.
</p>
<div class="flex flex-wrap justify-center gap-4">
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">Electron</span>
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">Vue 3</span>
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">TypeScript</span>
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">OpenRouter</span>
<span class="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow">Supabase</span>
</div>
</section>

<section class="text-center">
<h2 class="text-3xl font-bold mb-6">Get Started Today</h2>
<p class="text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
Download Vulpecula Loom and experience the future of AI-assisted writing and research.
All you need is Node.js v18+, an OpenRouter API key, and optionally, an Obsidian vault.
</p>
<a href="https://github.com/ejfox/vulpecula-loom#getting-started"
class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition">
Installation Guide
</a>
</section>
</main>

<footer class="text-center py-8 text-gray-600 dark:text-gray-400">
<p>Created by EJ Fox • MIT License</p>
</footer>

<script>
// Simple dark mode toggle based on system preference
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark')
}
</script>
</body>

</html>
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@
"build": "vue-tsc --noEmit && vite build && electron-builder",
"preview": "vite preview",
"rebuild": "electron-rebuild",
"postinstall": "electron-builder install-app-deps"
"postinstall": "electron-builder install-app-deps",
"docs-serve": "npx serve docs"
},
"devDependencies": {
"@electron/rebuild": "^3.7.1",
Expand Down

0 comments on commit 1cf551b

Please sign in to comment.