256 lines
14 KiB
HTML
256 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VoidRaft - An elegant text snippet recording tool designed for developers.</title>
|
|
<meta name="description" content="VoidRaft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.">
|
|
<meta name="keywords" content="text editor, code snippets, developer tools, syntax highlighting, code formatting, multi-language, VoidRaft">
|
|
<meta name="author" content="VoidRaft Team">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="https://landaiqing.github.io/voidraft/">
|
|
|
|
<!-- Internationalization / hreflang -->
|
|
<link rel="alternate" hreflang="en" href="https://landaiqing.github.io/voidraft/">
|
|
<link rel="alternate" hreflang="zh" href="https://landaiqing.github.io/voidraft/?lang=zh">
|
|
<link rel="alternate" hreflang="x-default" href="https://landaiqing.github.io/voidraft/">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://landaiqing.github.io/voidraft/">
|
|
<meta property="og:title" content="VoidRaft - An elegant text snippet recording tool designed for developers">
|
|
<meta property="og:description" content="VoidRaft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.">
|
|
<meta property="og:image" content="https://landaiqing.github.io/voidraft/img/screenshot-dark.png">
|
|
<meta property="og:site_name" content="VoidRaft">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="https://landaiqing.github.io/voidraft/">
|
|
<meta property="twitter:title" content="VoidRaft - An elegant text snippet recording tool designed for developers">
|
|
<meta property="twitter:description" content="VoidRaft is an elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.">
|
|
<meta property="twitter:image" content="https://landaiqing.github.io/voidraft/img/screenshot-dark.png">
|
|
|
|
<link rel="stylesheet" href="./css/styles.css">
|
|
<link rel="icon" href="./img/favicon.ico" type="image/x-icon">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Structured Data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "VoidRaft",
|
|
"description": "An elegant text snippet recording tool designed for developers. Features multi-language code blocks, syntax highlighting, code formatting, custom themes, and more.",
|
|
"url": "https://landaiqing.github.io/voidraft/",
|
|
"downloadUrl": "https://github.com/landaiqing/voidraft/releases",
|
|
"author": {
|
|
"@type": "Organization",
|
|
"name": "VoidRaft"
|
|
},
|
|
"operatingSystem": ["Windows", "macOS", "Linux"],
|
|
"applicationCategory": "DeveloperApplication",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "USD"
|
|
},
|
|
"screenshot": "https://landaiqing.github.io/voidraft/img/screenshot-dark.png",
|
|
"softwareVersion": "Latest",
|
|
"programmingLanguage": ["Go", "TypeScript", "Vue.js"],
|
|
"codeRepository": "https://github.com/landaiqing/voidraft"
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="theme-dark">
|
|
<div class="container">
|
|
<!-- 主卡片 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h1 class="card-title">VoidRaft</h1>
|
|
<div class="card-controls">
|
|
<button id="theme-toggle" class="btn btn-secondary" title="切换主题">
|
|
<i class="fas fa-sun"></i> <span data-en="Theme" data-zh="主题">Theme</span>
|
|
</button>
|
|
<button id="lang-toggle" class="btn btn-secondary">
|
|
<i class="fas fa-language"></i> 中/EN
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<!-- Logo和介绍 -->
|
|
<div class="logo-container">
|
|
<div class="logo-frame">
|
|
<img src="img/logo.png" alt="VoidRaft Logo" class="logo-image">
|
|
</div>
|
|
<h2 class="logo-text" data-en="VoidRaft" data-zh="VoidRaft">VoidRaft</h2>
|
|
<p class="tagline" data-en="An elegant text snippet recording tool" data-zh="优雅的文本片段记录工具">An elegant text snippet recording tool</p>
|
|
</div>
|
|
|
|
<div class="intro-box">
|
|
<p class="intro-text" data-en="Designed for developers to record, organize, and manage various text snippets anytime, anywhere." data-zh="专为开发者打造，随时随地记录、整理和管理各种文本片段。">Designed for developers to record, organize, and manage various text snippets anytime, anywhere.</p>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<a href="https://github.com/landaiqing/voidraft/releases" class="btn" data-en="Download" data-zh="下载">
|
|
<i class="fas fa-download"></i> Download
|
|
</a>
|
|
<a href="https://github.com/landaiqing/voidraft" class="btn btn-secondary" data-en="Source Code" data-zh="源代码">
|
|
<i class="fab fa-github"></i> Source Code
|
|
</a>
|
|
<a href="changelog.html" class="btn btn-secondary" data-en="Changelog" data-zh="更新日志">
|
|
<i class="fas fa-history"></i> Changelog
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 特性部分 -->
|
|
<h2 data-en="Core Features" data-zh="核心特性">Core Features</h2>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
<h3 class="feature-title" data-en="Developer-Friendly" data-zh="开发者友好">Developer-Friendly</h3>
|
|
<p class="feature-desc" data-en="Multi-language code blocks with syntax highlighting for 30+ programming languages" data-zh="多语言代码块支持，为30+种编程语言提供语法高亮">Multi-language code blocks with syntax highlighting for 30+ programming languages</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-magic"></i>
|
|
</div>
|
|
<h3 class="feature-title" data-en="Code Formatting" data-zh="代码格式化">Code Formatting</h3>
|
|
<p class="feature-desc" data-en="Built-in Prettier support for one-click code beautification" data-zh="内置Prettier支持，一键美化代码">Built-in Prettier support for one-click code beautification</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-palette"></i>
|
|
</div>
|
|
<h3 class="feature-title" data-en="Custom Themes" data-zh="自定义主题">Custom Themes</h3>
|
|
<p class="feature-desc" data-en="Dark/Light themes with full customization options" data-zh="深色/浅色主题，支持完全自定义">Dark/Light themes with full customization options</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-clone"></i>
|
|
</div>
|
|
<h3 class="feature-title" data-en="Multi-Window" data-zh="多窗口支持">Multi-Window</h3>
|
|
<p class="feature-desc" data-en="Edit multiple documents simultaneously" data-zh="同时编辑多个文档">Edit multiple documents simultaneously</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-layer-group"></i>
|
|
</div>
|
|
<h3 class="feature-title" data-en="Block Editing" data-zh="块状编辑">Block Editing</h3>
|
|
<p class="feature-desc" data-en="Split content into independent code blocks with different language settings" data-zh="将内容分割为独立的代码块，每个块可设置不同语言">Split content into independent code blocks with different language settings</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-puzzle-piece"></i>
|
|
</div>
|
|
<h3 class="feature-title" data-en="Extensions" data-zh="丰富扩展">Extensions</h3>
|
|
<p class="feature-desc" data-en="Rainbow brackets, VSCode-style search, color picker, translation tool, and more" data-zh="彩虹括号、VSCode风格搜索、颜色选择器、翻译工具等多种扩展">Rainbow brackets, VSCode-style search, color picker, translation tool, and more</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 预览部分 -->
|
|
<h2 data-en="Preview" data-zh="预览">Preview</h2>
|
|
|
|
<div class="preview-container">
|
|
<div class="preview-window">
|
|
<div class="preview-header">
|
|
<div class="preview-controls">
|
|
<span class="preview-btn"></span>
|
|
<span class="preview-btn"></span>
|
|
<span class="preview-btn"></span>
|
|
</div>
|
|
<div class="preview-title">voidraft</div>
|
|
</div>
|
|
<div class="preview-content">
|
|
<div class="code-block-wrapper">
|
|
<div class="block-header">
|
|
<div class="block-language">javascript</div>
|
|
</div>
|
|
<pre class="code-block">
|
|
<span class="keyword">function</span> <span class="function">createDocument</span>() {
|
|
<span class="keyword">const</span> <span class="variable">doc</span> = <span class="keyword">new</span> <span class="class">Document</span>();
|
|
|
|
<span class="variable">doc</span>.<span class="function">addCodeBlock</span>(<span class="string">'javascript'</span>, <span class="string">`
|
|
<span class="keyword">function</span> <span class="function">greeting</span>(<span class="parameter">name</span>) {
|
|
<span class="keyword">return</span> <span class="string">`Hello, </span>${<span class="parameter">name</span>}<span class="string">!`</span>;
|
|
}
|
|
|
|
<span class="built-in">console</span>.<span class="function">log</span>(<span class="function">greeting</span>(<span class="string">'World'</span>));
|
|
`</span>);
|
|
|
|
<span class="keyword">return</span> <span class="variable">doc</span>;
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="code-block-wrapper" style="margin-top: 10px;">
|
|
<div class="block-header">
|
|
<div class="block-language">text</div>
|
|
</div>
|
|
<pre class="code-block">
|
|
<span class="comment">// VoidRaft - An elegant text snippet recording tool</span>
|
|
<span class="comment">// Multi-language support | Code formatting | Custom themes</span>
|
|
<span class="comment">// A modern text editor designed for developers</span></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-window">
|
|
<img src="img/screenshot-dark.png" alt="VoidRaft 界面预览" class="preview-image dark-theme-img">
|
|
<img src="img/screenshot-light.png" alt="VoidRaft 界面预览" class="preview-image light-theme-img" style="display: none;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 技术栈部分 -->
|
|
<h2 data-en="Technical Stack" data-zh="技术栈">Technical Stack</h2>
|
|
|
|
<ul class="tech-list">
|
|
<li class="tech-item">
|
|
<div class="tech-icon"><i class="fas fa-desktop"></i></div>
|
|
<span class="tech-name">Wails3</span>
|
|
<span class="tech-desc" data-en="Cross-platform desktop application framework" data-zh="跨平台桌面应用框架">Cross-platform desktop application framework</span>
|
|
</li>
|
|
<li class="tech-item">
|
|
<div class="tech-icon"><i class="fas fa-cogs"></i></div>
|
|
<span class="tech-name">Go 1.21+</span>
|
|
<span class="tech-desc" data-en="Fast and efficient backend language" data-zh="快速高效的后端语言">Fast and efficient backend language</span>
|
|
</li>
|
|
<li class="tech-item">
|
|
<div class="tech-icon"><i class="fab fa-vuejs"></i></div>
|
|
<span class="tech-name">Vue 3 + TypeScript</span>
|
|
<span class="tech-desc" data-en="Modern frontend framework" data-zh="现代化前端框架">Modern frontend framework</span>
|
|
</li>
|
|
<li class="tech-item">
|
|
<div class="tech-icon"><i class="fas fa-edit"></i></div>
|
|
<span class="tech-name">CodeMirror 6</span>
|
|
<span class="tech-desc" data-en="Modern code editor with extension support" data-zh="支持扩展的现代化代码编辑器">Modern code editor with extension support</span>
|
|
</li>
|
|
<li class="tech-item">
|
|
<div class="tech-icon"><i class="fas fa-database"></i></div>
|
|
<span class="tech-name">SQLite</span>
|
|
<span class="tech-desc" data-en="Lightweight database for document storage" data-zh="轻量级文档存储数据库">Lightweight database for document storage</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<p class="footer-text" data-en="© 2025 VoidRaft - An elegant text snippet recording tool designed for developers" data-zh="© 2025 VoidRaft - 专为开发者打造的优雅文本片段记录工具">© 2025 VoidRaft - An elegant text snippet recording tool designed for developers</p>
|
|
<div class="footer-links">
|
|
<a href="https://github.com/landaiqing/voidraft" target="_blank" class="footer-link">GitHub</a>
|
|
<a href="https://github.com/landaiqing/voidraft/issues" target="_blank" class="footer-link" data-en="Issues" data-zh="问题反馈">Issues</a>
|
|
<a href="https://github.com/landaiqing/voidraft/releases" target="_blank" class="footer-link" data-en="Releases" data-zh="版本发布">Releases</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |