NoteDiscovery/docs/index.html

1340 lines
51 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>NoteDiscovery - Your Self-Hosted Knowledge Base</title>
<meta name="title" content="NoteDiscovery - Your Self-Hosted Knowledge Base">
<meta name="description" content="Self-hosted Markdown knowledge base with AI assistant integration (MCP) for Claude & Cursor, wikilinks, graph view, drawing editor, LaTeX, Mermaid — free and open source.">
<meta name="keywords" content="markdown notes, self-hosted, knowledge base, MCP, Claude, Cursor, obsidian alternative, open source">
<meta name="author" content="Gamosoft">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://www.notediscovery.com">
<!-- Preconnect / DNS prefetch for performance -->
<link rel="dns-prefetch" href="https://ko-fi.com">
<link rel="dns-prefetch" href="https://www.pikapods.com">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.notediscovery.com">
<meta property="og:title" content="NoteDiscovery - Your Self-Hosted Knowledge Base">
<meta property="og:description" content="AI-powered note-taking with MCP integration for Claude, Cursor & more. Wikilinks, graph view, drawing editor, LaTeX, Mermaid. Self-hosted, free, open source.">
<meta property="og:image" content="https://www.notediscovery.com/og-image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="NoteDiscovery — self-hosted Markdown knowledge base">
<meta property="og:site_name" content="NoteDiscovery">
<meta property="og:locale" content="en_US">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@gamosoft">
<meta name="twitter:creator" content="@gamosoft">
<meta name="twitter:url" content="https://www.notediscovery.com">
<meta name="twitter:title" content="NoteDiscovery - Your Self-Hosted Knowledge Base">
<meta name="twitter:description" content="AI-powered note-taking with MCP for Claude & Cursor. Wikilinks, graph view, drawing editor, LaTeX, Mermaid. Self-hosted, free, open source.">
<meta name="twitter:image" content="https://www.notediscovery.com/og-image.png">
<meta name="twitter:image:alt" content="NoteDiscovery — self-hosted Markdown knowledge base">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="apple-touch-icon" href="logo.svg">
<!-- Theme Color -->
<meta name="theme-color" content="#667eea">
<style>
:root {
--bg-gradient-start: #667eea;
--bg-gradient-end: #764ba2;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-header: #334155;
--card-bg: #ffffff;
--card-secondary: #f8fafc;
--shadow: rgba(0, 0, 0, 0.3);
--shadow-light: rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] {
--bg-gradient-start: #1e293b;
--bg-gradient-end: #0f172a;
--text-primary: #e2e8f0;
--text-secondary: #cbd5e1;
--text-header: #f1f5f9;
--card-bg: #1e293b;
--card-secondary: #334155;
--shadow: rgba(0, 0, 0, 0.6);
--shadow-light: rgba(0, 0, 0, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-primary);
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
min-height: 100vh;
transition: background 0.3s ease, color 0.3s ease;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
header {
text-align: center;
padding: 3rem 0;
color: white;
position: relative;
}
.header-buttons {
position: fixed;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.75rem;
align-items: center;
z-index: 1000;
}
.theme-toggle {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
.kofi-mini {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
color: #1e293b;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
.kofi-mini:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
/* Dark theme Ko-fi button */
[data-theme="dark"] .kofi-mini {
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.logo {
width: 120px;
height: 120px;
margin: 0 auto 1rem;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.tagline {
font-size: 1.5rem;
opacity: 0.95;
font-weight: 300;
}
.hero {
background: var(--card-bg);
border-radius: 20px;
padding: 3rem;
margin: 2rem 0;
box-shadow: 0 20px 60px var(--shadow);
transition: background 0.3s ease;
}
.hero-content {
text-align: center;
margin-bottom: 2rem;
}
.hero-content h2 {
font-size: 2rem;
color: var(--text-header);
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.cta-button {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem 2.5rem;
border-radius: 50px;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
.cta-button.demo {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.cta-button.demo:hover {
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}
.cta-button.demo::before {
content: "▶ ";
}
.demo-notice {
margin-top: 1rem;
font-size: 0.85rem;
color: #6b7280;
font-style: italic;
opacity: 0.9;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.feature {
background: var(--card-secondary);
padding: 2rem;
border-radius: 15px;
text-align: center;
transition: transform 0.2s, background 0.3s ease;
}
.feature:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.feature h3 {
font-size: 1.3rem;
color: var(--text-header);
margin-bottom: 0.5rem;
}
.feature p {
color: var(--text-secondary);
font-size: 1rem;
}
.benefits {
background: var(--card-bg);
border-radius: 20px;
padding: 3rem;
margin: 2rem 0;
box-shadow: 0 10px 30px var(--shadow-light);
transition: background 0.3s ease;
}
.benefits h2 {
text-align: center;
font-size: 2rem;
color: var(--text-header);
margin-bottom: 2rem;
}
.benefit-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.benefit-item .emoji {
font-size: 1.5rem;
flex-shrink: 0;
}
.benefit-item .text {
color: var(--text-secondary);
}
.benefit-item strong {
color: var(--text-header);
display: block;
margin-bottom: 0.25rem;
}
/* Scroll Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.animate-on-scroll {
opacity: 0;
}
.animate-on-scroll.animated {
animation: fadeInUp 0.6s ease-out forwards;
}
.animate-on-scroll.animated-scale {
animation: fadeInScale 0.6s ease-out forwards;
}
/* Stagger animation delays for feature cards (15 cards) */
.feature.animated:nth-child(1) { animation-delay: 0s; }
.feature.animated:nth-child(2) { animation-delay: 0.1s; }
.feature.animated:nth-child(3) { animation-delay: 0.2s; }
.feature.animated:nth-child(4) { animation-delay: 0.05s; }
.feature.animated:nth-child(5) { animation-delay: 0.15s; }
.feature.animated:nth-child(6) { animation-delay: 0.25s; }
.feature.animated:nth-child(7) { animation-delay: 0.1s; }
.feature.animated:nth-child(8) { animation-delay: 0.2s; }
.feature.animated:nth-child(9) { animation-delay: 0.3s; }
.feature.animated:nth-child(10) { animation-delay: 0.15s; }
.feature.animated:nth-child(11) { animation-delay: 0.25s; }
.feature.animated:nth-child(12) { animation-delay: 0.35s; }
.feature.animated:nth-child(13) { animation-delay: 0.2s; }
.feature.animated:nth-child(14) { animation-delay: 0.3s; }
.feature.animated:nth-child(15) { animation-delay: 0.4s; }
.screenshot-section {
margin: 4rem 0 3rem 0;
text-align: center;
}
.screenshot-section h2 {
font-size: 2rem;
color: white;
margin-bottom: 1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.screenshot-section p {
color: rgba(255, 255, 255, 0.95);
font-size: 1.1rem;
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.screenshot-container {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 0 1rem;
}
/* Screenshot Carousel */
.carousel {
position: relative;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
}
.carousel-slide {
width: 100%;
min-width: 100%;
flex: 0 0 100%;
}
.screenshot-frame {
background: var(--card-bg);
border-radius: 12px;
padding: 0.5rem;
box-shadow: 0 20px 60px var(--shadow);
transition: box-shadow 0.3s ease, background 0.3s ease;
overflow: hidden;
}
.screenshot-frame:hover {
box-shadow: 0 25px 80px var(--shadow);
}
.screenshot-window-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.8rem;
background: var(--card-secondary);
border-radius: 8px 8px 0 0;
margin-bottom: 0.5rem;
}
.screenshot-title {
flex: 1;
text-align: center;
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
.screenshot-dots {
display: flex;
gap: 0.4rem;
}
.screenshot-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.screenshot-dot:nth-child(1) { background: #ff5f56; }
.screenshot-dot:nth-child(2) { background: #ffbd2e; }
.screenshot-dot:nth-child(3) { background: #27c93f; }
.screenshot-frame img {
width: 100%;
height: auto;
display: block;
border-radius: 0 0 8px 8px;
}
/* Carousel Navigation */
.carousel-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
}
.carousel-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
width: 44px;
height: 44px;
cursor: pointer;
font-size: 1.2rem;
color: white;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
}
.carousel-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.carousel-indicators {
display: flex;
gap: 0.5rem;
}
.carousel-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-indicator.active {
background: white;
transform: scale(1.2);
}
.carousel-indicator:hover {
background: rgba(255, 255, 255, 0.6);
}
footer {
text-align: center;
padding: 3rem 0;
color: white;
}
footer p {
opacity: 0.9;
margin-bottom: 1rem;
}
.github-link {
color: white;
text-decoration: underline;
font-weight: 500;
}
.support-button {
display: inline-block;
background: #0070ba;
color: white;
padding: 0.6rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
margin-top: 1rem;
box-shadow: 0 2px 8px rgba(0, 112, 186, 0.3);
}
.support-button:hover {
background: #005a92;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 112, 186, 0.4);
}
.support-button::before {
content: "☕ ";
margin-right: 0.3rem;
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.tagline {
font-size: 1.2rem;
}
.hero, .benefits {
padding: 2rem;
}
.features {
grid-template-columns: 1fr;
}
.header-buttons {
top: 0.5rem;
right: 0.5rem;
gap: 0.5rem;
}
.theme-toggle {
padding: 0.4rem 0.8rem;
font-size: 1rem;
}
.kofi-mini {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
}
.logo {
width: 80px;
height: 80px;
}
.support-button {
padding: 0.5rem 1.2rem;
font-size: 0.9rem;
}
.screenshot-section {
margin: 3rem 0 2rem 0;
}
.screenshot-section h2 {
font-size: 1.5rem;
}
.screenshot-section p {
font-size: 1rem;
padding: 0 1rem;
}
.screenshot-frame {
box-shadow: 0 10px 40px var(--shadow);
}
.screenshot-window-bar {
padding: 0.5rem 0.6rem;
}
.screenshot-dot {
width: 10px;
height: 10px;
}
.screenshot-title {
font-size: 0.75rem;
}
.carousel-btn {
width: 36px;
height: 36px;
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-button {
width: 100%;
max-width: 280px;
text-align: center;
}
}
</style>
<!-- Google Analytics — only loads on the canonical domain.
Forks and clones deployed elsewhere never contact Google. -->
<script>
(function () {
var h = location.hostname;
window.__analyticsEnabled = (h === 'notediscovery.com' || h.endsWith('.notediscovery.com'));
if (!window.__analyticsEnabled) return;
var GA_ID = 'G-2TVGZ9N7LF';
var s = document.createElement('script');
s.async = true;
s.src = 'https://www.googletagmanager.com/gtag/js?id=' + GA_ID;
document.head.appendChild(s);
window.dataLayer = window.dataLayer || [];
window.gtag = function gtag(){ dataLayer.push(arguments); };
gtag('js', new Date());
gtag('config', GA_ID);
})();
</script>
</head>
<body>
<div class="container">
<header>
<div class="header-buttons">
<a href="https://ko-fi.com/gamosoft" class="kofi-mini" target="_blank" rel="noopener" aria-label="Support on Ko-fi" data-track="cta_kofi_click" data-track-location="header">
<span></span>
<span>Support</span>
</a>
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
<span id="theme-icon">🌙</span>
</button>
</div>
<img src="logo.svg" alt="NoteDiscovery Logo" class="logo">
<h1>NoteDiscovery</h1>
<p class="tagline">Your Self-Hosted Knowledge Base</p>
</header>
<div class="hero animate-on-scroll">
<div class="hero-content">
<h2>Take Control of Your Notes</h2>
<p>A lightweight, privacy-focused note-taking application with powerful features: AI assistant integration (MCP), LaTeX math equations, Mermaid diagrams, an embedded drawing editor for quick sketches, smart tags, custom templates, code highlighting, and more. Write and organize your notes with a beautiful, modern interface all running on your own server.</p>
<div class="cta-buttons">
<a href="https://gamosoft-notediscovery-demo.hf.space" class="cta-button demo" target="_blank" rel="noopener" data-track="cta_demo_click" data-track-location="header">Try Live Demo</a>
<a href="https://github.com/gamosoft/NoteDiscovery" class="cta-button" target="_blank" rel="noopener" data-track="cta_github_click" data-track-location="header" data-track-intent="get_started">Get Started on GitHub →</a>
</div>
<p class="demo-notice">✨ Demo resets daily · For demonstration purposes only</p>
<div class="pikapods-deploy" style="margin-top: 1.5rem;">
<p style="margin-bottom: 0.75rem; font-size: 0.95rem;">☁️ Or deploy your own instance in one click:</p>
<a href="https://www.pikapods.com/pods?run=notediscovery" target="_blank" rel="noopener" data-track="cta_pikapods_click" data-track-location="header">
<img src="https://www.pikapods.com/static/run-button.svg" alt="Run on PikaPods" style="height: 40px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
</a>
</div>
</div>
</div>
<div class="screenshot-section animate-on-scroll">
<h2>See It in Action</h2>
<p>A clean, intuitive interface designed for productivity and focus</p>
<div class="screenshot-container">
<div class="carousel" role="region" aria-roledescription="carousel" aria-label="Product screenshots">
<div class="carousel-track" id="carouselTrack">
<!-- Slide 1: Main Interface -->
<div class="carousel-slide">
<div class="screenshot-frame">
<div class="screenshot-window-bar">
<div class="screenshot-dots" aria-hidden="true">
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
</div>
<span class="screenshot-title">Editor View • Main Interface</span>
</div>
<img src="carousel-1.jpg" alt="NoteDiscovery editor showing Markdown preview and sidebar" width="1600" height="1000" fetchpriority="high" decoding="async">
</div>
</div>
<!-- Slide 2: Search -->
<div class="carousel-slide">
<div class="screenshot-frame">
<div class="screenshot-window-bar">
<div class="screenshot-dots" aria-hidden="true">
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
</div>
<span class="screenshot-title">Smart Search • Find Anything Instantly</span>
</div>
<img src="carousel-2.jpg" alt="NoteDiscovery smart full-text search results" width="1600" height="1000" loading="lazy" decoding="async">
</div>
</div>
<!-- Slide 3: Tag Filter -->
<div class="carousel-slide">
<div class="screenshot-frame">
<div class="screenshot-window-bar">
<div class="screenshot-dots" aria-hidden="true">
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
</div>
<span class="screenshot-title">Tag Filtering • Organize by Topics</span>
</div>
<img src="carousel-3.jpg" alt="NoteDiscovery tag filtering panel" width="1600" height="1000" loading="lazy" decoding="async">
</div>
</div>
<!-- Slide 4: Outline -->
<div class="carousel-slide">
<div class="screenshot-frame">
<div class="screenshot-window-bar">
<div class="screenshot-dots" aria-hidden="true">
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
</div>
<span class="screenshot-title">Outline Panel • Navigate Headings</span>
</div>
<img src="carousel-4.jpg" alt="NoteDiscovery outline panel for heading navigation" width="1600" height="1000" loading="lazy" decoding="async">
</div>
</div>
<!-- Slide 5: Card View -->
<div class="carousel-slide">
<div class="screenshot-frame">
<div class="screenshot-window-bar">
<div class="screenshot-dots" aria-hidden="true">
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
</div>
<span class="screenshot-title">Card View • Visual Organization</span>
</div>
<img src="carousel-5.jpg" alt="NoteDiscovery card view homepage with recent notes" width="1600" height="1000" loading="lazy" decoding="async">
</div>
</div>
<!-- Slide 6: Graph View -->
<div class="carousel-slide">
<div class="screenshot-frame">
<div class="screenshot-window-bar">
<div class="screenshot-dots" aria-hidden="true">
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
</div>
<span class="screenshot-title">Graph View • Visualize Connections</span>
</div>
<img src="carousel-6.jpg" alt="NoteDiscovery graph view of linked notes" width="1600" height="1000" loading="lazy" decoding="async">
</div>
</div>
<!-- Slide 7: Mobile Support -->
<div class="carousel-slide">
<div class="screenshot-frame">
<div class="screenshot-window-bar">
<div class="screenshot-dots" aria-hidden="true">
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
<div class="screenshot-dot"></div>
</div>
<span class="screenshot-title">Mobile Ready • Notes On The Go</span>
</div>
<img src="carousel-7.png" alt="NoteDiscovery responsive mobile interface" width="800" height="1400" loading="lazy" decoding="async">
</div>
</div>
</div>
</div>
<!-- Carousel Navigation -->
<div class="carousel-nav">
<button class="carousel-btn" onclick="moveCarousel(-1)" aria-label="Previous screenshot"></button>
<div class="carousel-indicators">
<button class="carousel-indicator active" onclick="goToSlide(0)" aria-label="Slide 1"></button>
<button class="carousel-indicator" onclick="goToSlide(1)" aria-label="Slide 2"></button>
<button class="carousel-indicator" onclick="goToSlide(2)" aria-label="Slide 3"></button>
<button class="carousel-indicator" onclick="goToSlide(3)" aria-label="Slide 4"></button>
<button class="carousel-indicator" onclick="goToSlide(4)" aria-label="Slide 5"></button>
<button class="carousel-indicator" onclick="goToSlide(5)" aria-label="Slide 6"></button>
<button class="carousel-indicator" onclick="goToSlide(6)" aria-label="Slide 7"></button>
</div>
<button class="carousel-btn" onclick="moveCarousel(1)" aria-label="Next screenshot"></button>
</div>
</div>
</div>
<div class="features">
<div class="feature animate-on-scroll">
<div class="feature-icon">🔒</div>
<h3>100% Private</h3>
<p>Your notes never leave your server. Complete data ownership and privacy.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">💰</div>
<h3>Completely Free</h3>
<p>No subscriptions, no hidden fees. Free and open source forever.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">🤖</div>
<h3>AI Assistant Ready</h3>
<p>MCP integration lets Claude, Cursor & other AI tools search, create, and organize your notes.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">🧮</div>
<h3>LaTeX Math</h3>
<p>Beautiful equation rendering with MathJax. Perfect for scientific notes.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">📊</div>
<h3>Diagrams</h3>
<p>Create flowcharts, mind maps, and diagrams with Mermaid syntax.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">✏️</div>
<h3>Drawing editor</h3>
<p>Sketch and annotate directly in the browser—PNG files saved alongside your notes with autosave, shapes, eraser, eyedropper, and undo/redo.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">💻</div>
<h3>Code Highlighting</h3>
<p>Syntax highlighting for popular coding languages. Developer-friendly notes.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">🏷️</div>
<h3>Smart Tags</h3>
<p>Organize with YAML frontmatter tags. Collapsible properties panel shows metadata at a glance.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">📋</div>
<h3>Note Templates</h3>
<p>Create from custom templates with dynamic placeholders. Meeting notes, journals, and more.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">🕸️</div>
<h3>Graph View</h3>
<p>Interactive visualization of connected notes. Drag to explore relationships.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">📂</div>
<h3>Simple Storage</h3>
<p>Plain markdown files in folders. No vendor lock-in, easy backups.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">🎨</div>
<h3>Beautiful Themes</h3>
<p>Several built-in themes with dark/light modes and full customization.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">📑</div>
<h3>Outline Panel</h3>
<p>Navigate headings with a click-to-jump table of contents. Link to sections with anchors.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">🔌</div>
<h3>Extensible</h3>
<p>Plugin system lets you add custom features and integrations.</p>
</div>
<div class="feature animate-on-scroll">
<div class="feature-icon">📲</div>
<h3>Install as App</h3>
<p>Progressive Web App (PWA) - install on desktop or mobile for a native experience.</p>
</div>
</div>
<div class="benefits animate-on-scroll">
<h2>Why Choose NoteDiscovery?</h2>
<div class="benefit-list">
<div class="benefit-item">
<span class="emoji"></span>
<div class="text">
<strong>Easy Setup</strong>
Run with Docker in seconds
</div>
</div>
<div class="benefit-item">
<span class="emoji">📱</span>
<div class="text">
<strong>Responsive Design</strong>
Works on desktop, tablet, and mobile
</div>
</div>
<div class="benefit-item">
<span class="emoji">🔍</span>
<div class="text">
<strong>Powerful Search</strong>
Find anything instantly
</div>
</div>
<div class="benefit-item">
<span class="emoji">📝</span>
<div class="text">
<strong>Markdown Editor</strong>
Write with live preview
</div>
</div>
<div class="benefit-item">
<span class="emoji">🖼️</span>
<div class="text">
<strong>Image Support</strong>
Drag & drop images directly
</div>
</div>
<div class="benefit-item">
<span class="emoji">📄</span>
<div class="text">
<strong>HTML Export</strong>
Share standalone HTML files
</div>
</div>
<div class="benefit-item">
<span class="emoji">⌨️</span>
<div class="text">
<strong>Keyboard Shortcuts</strong>
Navigate and create with speed
</div>
</div>
<div class="benefit-item">
<span class="emoji">🔍</span>
<div class="text">
<strong>Quick Switcher</strong>
Jump to any note with a shortcut
</div>
</div>
<div class="benefit-item">
<span class="emoji">🔐</span>
<div class="text">
<strong>Optional Auth</strong>
Password protection when needed
</div>
</div>
<div class="benefit-item">
<span class="emoji">🌐</span>
<div class="text">
<strong>Public Sharing</strong>
Share notes via link (works with auth on) and manage them from a dedicated Shared panel in the sidebar
</div>
</div>
<div class="benefit-item">
<span class="emoji">🔗</span>
<div class="text">
<strong>Wikilinks</strong>
[[Link notes]] Obsidian-style
</div>
</div>
<div class="benefit-item">
<span class="emoji">🌍</span>
<div class="text">
<strong>Multi-Language</strong>
Multiple interface languages; add your own via locale files
</div>
</div>
</div>
</div>
<div class="hero animate-on-scroll">
<div class="hero-content">
<h2>Ready to Get Started?</h2>
<p>Join the self-hosting community and take back control of your notes today.</p>
<div class="cta-buttons">
<a href="https://gamosoft-notediscovery-demo.hf.space" class="cta-button demo" target="_blank" rel="noopener" data-track="cta_demo_click" data-track-location="footer">Try Live Demo</a>
<a href="https://github.com/gamosoft/NoteDiscovery" class="cta-button" target="_blank" rel="noopener" data-track="cta_github_click" data-track-location="footer" data-track-intent="view">View on GitHub →</a>
</div>
<p class="demo-notice">✨ Demo resets daily · For demonstration purposes only</p>
<div class="pikapods-deploy" style="margin-top: 1.5rem;">
<p style="margin-bottom: 0.75rem; font-size: 0.95rem;">☁️ Don't want to self-host? Deploy on PikaPods:</p>
<a href="https://www.pikapods.com/pods?run=notediscovery" target="_blank" rel="noopener" data-track="cta_pikapods_click" data-track-location="footer">
<img src="https://www.pikapods.com/static/run-button.svg" alt="Run on PikaPods" style="height: 40px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
</a>
</div>
</div>
</div>
<footer>
<p>Made with ❤️ for the self-hosting community</p>
<p>
<a href="https://github.com/gamosoft/NoteDiscovery" class="github-link" target="_blank" rel="noopener" data-track="cta_github_click" data-track-location="footer_link" data-track-intent="star">Star on GitHub</a>
<a href="https://github.com/gamosoft/NoteDiscovery/issues" class="github-link" target="_blank" rel="noopener" data-track="cta_issues_click" data-track-location="footer_link">Report Issues</a>
</p>
<p style="font-size: 0.85rem; opacity: 0.7; margin-top: 1.5rem;">
Also by Gamosoft: <a href="https://chipsound.com" class="github-link" target="_blank" rel="noopener" data-track="cta_chipsound_click" data-track-location="footer">Chipsound</a> — chiptune music player for the modern web
</p>
</footer>
</div>
<script>
// Theme management
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
// Update icon
const icon = document.getElementById('theme-icon');
icon.textContent = newTheme === 'light' ? '🌙' : '☀️';
}
function getBrowserThemePreference() {
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
return prefersDarkMode ? 'dark' : 'light';
}
// Load saved theme on page load
(function() {
const savedTheme = localStorage.getItem('theme') || getBrowserThemePreference();
document.documentElement.setAttribute('data-theme', savedTheme);
// Update icon
const icon = document.getElementById('theme-icon');
icon.textContent = savedTheme === 'light' ? '🌙' : '☀️';
})();
// Scroll Animations with Intersection Observer
(function() {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animated');
// Optionally stop observing after animation
// observer.unobserve(entry.target);
}
});
}, observerOptions);
// Observe all animate-on-scroll elements
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
});
})();
// Screenshot Carousel
let currentSlide = 0;
const totalSlides = 7;
let autoPlayInterval;
function updateCarousel() {
const track = document.getElementById('carouselTrack');
if (track) {
track.style.transform = `translateX(-${currentSlide * 100}%)`;
}
// Update indicators
document.querySelectorAll('.carousel-indicator').forEach((indicator, index) => {
indicator.classList.toggle('active', index === currentSlide);
});
}
function moveCarousel(direction) {
currentSlide = (currentSlide + direction + totalSlides) % totalSlides;
updateCarousel();
resetAutoPlay();
}
function goToSlide(index) {
currentSlide = index;
updateCarousel();
resetAutoPlay();
}
function resetAutoPlay() {
clearInterval(autoPlayInterval);
autoPlayInterval = setInterval(() => moveCarousel(1), 5000);
}
// Start auto-play on load
document.addEventListener('DOMContentLoaded', () => {
autoPlayInterval = setInterval(() => moveCarousel(1), 5000);
});
// Pause auto-play on hover
document.addEventListener('DOMContentLoaded', () => {
const carousel = document.querySelector('.carousel');
if (carousel) {
carousel.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));
carousel.addEventListener('mouseleave', resetAutoPlay);
}
});
// Touch/Swipe support for mobile
(function() {
let touchStartX = 0;
let touchEndX = 0;
document.addEventListener('DOMContentLoaded', () => {
const carousel = document.querySelector('.carousel');
if (!carousel) return;
carousel.addEventListener('touchstart', e => {
touchStartX = e.changedTouches[0].screenX;
}, { passive: true });
carousel.addEventListener('touchend', e => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, { passive: true });
function handleSwipe() {
const swipeThreshold = 50;
const diff = touchStartX - touchEndX;
if (Math.abs(diff) > swipeThreshold) {
if (diff > 0) {
moveCarousel(1); // Swipe left = next
} else {
moveCarousel(-1); // Swipe right = prev
}
}
}
});
})();
// Reads data-track / data-track-* attributes for declarative wiring.
(function () {
if (!window.__analyticsEnabled) return;
function track(event, params) {
if (typeof gtag !== 'function') return;
gtag('event', event, params || {});
}
document.addEventListener('click', function (e) {
const el = e.target.closest('[data-track]');
if (!el) return;
const params = { transport_type: 'beacon' };
for (const attr of el.attributes) {
if (attr.name.startsWith('data-track-')) {
params[attr.name.slice('data-track-'.length)] = attr.value;
}
}
track(el.dataset.track, params);
});
})();
</script>
<!-- Structured Data / JSON-LD for Rich Snippets -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "NoteDiscovery",
"alternateName": "NoteDiscovery - Your Self-Hosted Knowledge Base",
"description": "A lightweight, AI-powered Markdown note-taking application with MCP integration for Claude, Cursor and other AI assistants. Features wikilinks, graph view, drawing editor, LaTeX math, Mermaid diagrams, tags, templates, and code highlighting. Self-hosted Obsidian/Evernote alternative. Free and open source.",
"url": "https://www.notediscovery.com",
"image": "https://www.notediscovery.com/og-image.png",
"screenshot": [
"https://www.notediscovery.com/carousel-1.jpg",
"https://www.notediscovery.com/carousel-2.jpg",
"https://www.notediscovery.com/carousel-3.jpg",
"https://www.notediscovery.com/carousel-4.jpg",
"https://www.notediscovery.com/carousel-5.jpg",
"https://www.notediscovery.com/carousel-6.jpg",
"https://www.notediscovery.com/carousel-7.png"
],
"applicationCategory": "ProductivityApplication",
"applicationSubCategory": "NoteTakingApplication",
"operatingSystem": "Linux, Windows, macOS",
"browserRequirements": "Requires a modern browser with JavaScript enabled",
"softwareVersion": "0.22.1",
"datePublished": "2025-01-15",
"dateModified": "2026-04-24",
"license": "https://opensource.org/licenses/MIT",
"downloadUrl": "https://github.com/gamosoft/NoteDiscovery",
"codeRepository": "https://github.com/gamosoft/NoteDiscovery",
"isAccessibleForFree": true,
"featureList": "AI assistant integration, MCP (Model Context Protocol), Claude integration, Cursor integration, Markdown editor, Wikilinks, Graph view, Drawing editor, LaTeX math equations, Mermaid diagrams, Code syntax highlighting, Dark mode, Plugin system, Internal links, Properties panel, HTML export, Full-text search, Public sharing with dedicated sidebar panel, Self-hosted, Obsidian alternative, Evernote alternative, Notion alternative, Second brain, AI-powered notes",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
},
"author": {
"@type": "Person",
"name": "Gamosoft",
"url": "https://github.com/gamosoft"
},
"publisher": {
"@type": "Organization",
"name": "Gamosoft",
"url": "https://github.com/gamosoft",
"logo": {
"@type": "ImageObject",
"url": "https://www.notediscovery.com/logo.png",
"width": 512,
"height": 512
}
}
}
</script>
<!-- FAQ Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Is NoteDiscovery really free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. NoteDiscovery is free and open source under the MIT license. There are no paid tiers, no accounts, and no telemetry. You self-host it on your own server."
}
},
{
"@type": "Question",
"name": "Does it work with AI tools like Claude or Cursor?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. NoteDiscovery ships with a built-in MCP (Model Context Protocol) server, so AI assistants like Claude Desktop and Cursor can read and edit your notes directly, without any copy-pasting back and forth."
}
},
{
"@type": "Question",
"name": "Do my notes ever leave my computer?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Everything stays on the server you choose. There is no cloud sync and no third-party storage. The AI integration runs locally over MCP, and your notes are never sent anywhere unless you explicitly publish a share link."
}
},
{
"@type": "Question",
"name": "Can I move my notes in or out easily?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Notes are plain Markdown files in normal folders. You can drop an existing Obsidian vault straight in, or open the same files in any other Markdown editor. There is no proprietary database to escape from."
}
},
{
"@type": "Question",
"name": "Do I need to be a developer to install it?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Not really. The recommended setup is a single Docker command, and there is a one-click PikaPods option if you would rather not touch the command line at all."
}
}
]
}
</script>
</body>
</html>