docs: redesign homepage and fix i18n issues
- Redesign homepage with elegant layout, gradient hero, SVG feature icons, tech stack badges, and card-based features section - Fix favicon to use logo.svg - Fix deprecated onBrokenMarkdownLinks config - Add missing i18n files: code.json, footer.json for English locale - Fix navbar.json to translate "文档" label - Fix logo path using useBaseUrl for correct loading in /en/ locale Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
KangandClaude Opus 4.6 committed
1 parent
7de160ed04
commit
c03d3a62b5
8 files changed
+507
-49
No files matched your search
@@ -5,7 +5,7 @@ import type * as Preset from '@docusaurus/preset-classic';
|
||||
const config: Config = {
|
||||
title: 'Dragonfly',
|
||||
tagline: '现代高性能 SSH 客户端',
|
||||
favicon: 'img/favicon.ico',
|
||||
favicon: 'img/logo.svg',
|
||||
|
||||
url: 'https://dragonfly.coderkang.top',
|
||||
baseUrl: '/',
|
||||
@@ -14,7 +14,12 @@ const config: Config = {
|
||||
projectName: 'dragonfly',
|
||||
|
||||
onBrokenLinks: 'throw',
|
||||
onBrokenMarkdownLinks: 'warn',
|
||||
|
||||
markdown: {
|
||||
hooks: {
|
||||
onBrokenMarkdownLinks: 'warn',
|
||||
},
|
||||
},
|
||||
|
||||
i18n: {
|
||||
defaultLocale: 'zh-CN',
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"安全高效的 SSH 连接": {
|
||||
"message": "Secure & Fast SSH"
|
||||
},
|
||||
"基于 Rust russh 库构建，提供安全、高性能的 SSH 连接。支持密码和密钥认证、代理转发、TOFU 主机密钥验证。": {
|
||||
"message": "Built on Rust's russh library for secure, high-performance SSH connections. Supports password and key authentication, proxy forwarding, and TOFU host key verification."
|
||||
},
|
||||
"集成 SFTP 文件管理": {
|
||||
"message": "Integrated SFTP File Manager"
|
||||
},
|
||||
"内置文件浏览器，直接在侧边栏管理远程文件。支持上传、下载、重命名、权限修改等操作，传输进度实时可见。": {
|
||||
"message": "Built-in file explorer to manage remote files directly from the sidebar. Supports upload, download, rename, permission changes, and real-time transfer progress."
|
||||
},
|
||||
"多标签终端界面": {
|
||||
"message": "Multi-Tab Terminal"
|
||||
},
|
||||
"同时管理多个 SSH 和本地终端会话。支持 WebGL 硬件加速渲染、自定义字体、关键词高亮、命令历史模糊搜索。": {
|
||||
"message": "Manage multiple SSH and local terminal sessions simultaneously. WebGL hardware-accelerated rendering, custom fonts, keyword highlighting, and fuzzy command history search."
|
||||
},
|
||||
"高度可定制": {
|
||||
"message": "Highly Customizable"
|
||||
},
|
||||
"深色/浅色主题切换、可调整面板布局、快捷命令管理、多语言翻译、快捷键自定义，打造专属工作流。": {
|
||||
"message": "Dark/light theme switching, resizable panel layouts, quick command management, multi-language translation, customizable shortcuts — build your own workflow."
|
||||
},
|
||||
"现代高性能 SSH 客户端": {
|
||||
"message": "Modern, High-Performance SSH Client"
|
||||
},
|
||||
"基于 Tauri 和 React 构建，跨平台、安全、快速": {
|
||||
"message": "Built with Tauri and React — cross-platform, secure, and fast"
|
||||
},
|
||||
"快速开始": {
|
||||
"message": "Get Started"
|
||||
},
|
||||
"首页": {
|
||||
"message": "Home"
|
||||
},
|
||||
"现代高性能 SSH 客户端，基于 Tauri 和 React 构建": {
|
||||
"message": "A modern, high-performance SSH client built with Tauri and React"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"link.title.文档": {
|
||||
"message": "Docs"
|
||||
},
|
||||
"link.title.开发": {
|
||||
"message": "Development"
|
||||
},
|
||||
"link.title.更多": {
|
||||
"message": "More"
|
||||
},
|
||||
"link.item.label.快速开始": {
|
||||
"message": "Quick Start"
|
||||
},
|
||||
"link.item.label.使用指南": {
|
||||
"message": "User Guide"
|
||||
},
|
||||
"link.item.label.架构说明": {
|
||||
"message": "Architecture"
|
||||
},
|
||||
"link.item.label.贡献指南": {
|
||||
"message": "Contributing"
|
||||
},
|
||||
"link.item.label.GitHub": {
|
||||
"message": "GitHub"
|
||||
},
|
||||
"link.item.label.问题反馈": {
|
||||
"message": "Issues"
|
||||
},
|
||||
"copyright": {
|
||||
"message": "Copyright © {year} CoderKang. Built with Docusaurus."
|
||||
}
|
||||
}
|
||||
@@ -2,13 +2,13 @@
|
||||
"title": {
|
||||
"message": "Dragonfly"
|
||||
},
|
||||
"tagline": {
|
||||
"message": "Modern, High-Performance SSH Client"
|
||||
"logo.alt": {
|
||||
"message": "Dragonfly Logo"
|
||||
},
|
||||
"theme.docs.sidebar.collapseButtonTitle": {
|
||||
"message": "Collapse sidebar"
|
||||
"item.label.文档": {
|
||||
"message": "Docs"
|
||||
},
|
||||
"theme.docs.sidebar.expandButtonTitle": {
|
||||
"message": "Expand sidebar"
|
||||
"item.label.GitHub": {
|
||||
"message": "GitHub"
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,14 @@
|
||||
--ifm-color-primary-lighter: #60a5fa;
|
||||
--ifm-color-primary-lightest: #93bbfd;
|
||||
--ifm-code-font-size: 95%;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
--ifm-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
--ifm-heading-font-weight: 700;
|
||||
--ifm-footer-background-color: #f8fafc;
|
||||
--ifm-footer-color: #64748b;
|
||||
--ifm-footer-link-color: #334155;
|
||||
--ifm-footer-title-color: #0f172a;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
@@ -18,5 +25,37 @@
|
||||
--ifm-color-primary-light: #93bbfd;
|
||||
--ifm-color-primary-lighter: #bfdbfe;
|
||||
--ifm-color-primary-lightest: #dbeafe;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
--ifm-background-color: #0b1120;
|
||||
--ifm-background-surface-color: #0f172a;
|
||||
--ifm-footer-background-color: #070d1a;
|
||||
--ifm-footer-color: #64748b;
|
||||
--ifm-footer-link-color: #94a3b8;
|
||||
--ifm-footer-title-color: #e2e8f0;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(96, 165, 250, 0.1);
|
||||
}
|
||||
|
||||
/* Smooth transitions for theme switch */
|
||||
html {
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Navbar refinement */
|
||||
.navbar {
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid var(--ifm-toc-border-color);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .navbar {
|
||||
background: rgba(11, 17, 32, 0.85);
|
||||
}
|
||||
|
||||
/* Sidebar refinement */
|
||||
.theme-doc-sidebar-container {
|
||||
border-right-color: var(--ifm-toc-border-color) !important;
|
||||
}
|
||||
|
||||
/* Footer refinement */
|
||||
.footer--dark {
|
||||
--ifm-footer-background-color: #070d1a;
|
||||
}
|
||||
@@ -1,31 +1,299 @@
|
||||
/* ── Hero ── */
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 6rem 2rem 4rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(168deg, #f0f5ff 0%, #e8f0fe 40%, #f8faff 100%);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .heroBanner {
|
||||
background: linear-gradient(168deg, #0a1628 0%, #101d33 40%, #0d1520 100%);
|
||||
}
|
||||
|
||||
.heroGlow {
|
||||
position: absolute;
|
||||
top: -40%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .heroGlow {
|
||||
background: radial-gradient(circle, rgba(96, 165, 250, 0.06) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.heroInner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroLogoWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.heroLogo {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 22px;
|
||||
filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.18));
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.heroLogo:hover {
|
||||
transform: scale(1.06) translateY(-2px);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .heroLogo {
|
||||
filter: drop-shadow(0 8px 24px rgba(96, 165, 250, 0.2));
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #0f172a;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .heroTitle {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .heroSubtitle {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.heroDescription {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
font-size: 1.05rem;
|
||||
color: #64748b;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
[data-theme='dark'] .heroDescription {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.heroButtons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.features {
|
||||
.btnPrimary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
color: #fff !important;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 0.7rem 1.6rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 12px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.btnPrimary:hover {
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
|
||||
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
|
||||
transform: translateY(-1px);
|
||||
color: #fff !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btnIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.btnSecondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: transparent;
|
||||
color: #334155 !important;
|
||||
border: 1.5px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
padding: 0.7rem 1.6rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btnSecondary:hover {
|
||||
border-color: #94a3b8;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
transform: translateY(-1px);
|
||||
color: #1e293b !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .btnSecondary {
|
||||
color: #cbd5e1 !important;
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .btnSecondary:hover {
|
||||
border-color: #475569;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
.btnGithubIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* ── Tech badges ── */
|
||||
|
||||
.techBadges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.featureIcon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
.techBadge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.3rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid #e2e8f0;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .techBadge {
|
||||
color: #94a3b8;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: #1e293b;
|
||||
}
|
||||
|
||||
.techDot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
/* ── Features ── */
|
||||
|
||||
.features {
|
||||
padding: 4rem 0 5rem;
|
||||
}
|
||||
|
||||
.featureGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 996px) {
|
||||
.featureGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.featureGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.heroTitle {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.featureCard {
|
||||
padding: 1.75rem 1.5rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.featureCard:hover {
|
||||
border-color: #bfdbfe;
|
||||
box-shadow: 0 4px 24px rgba(37, 99, 235, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .featureCard {
|
||||
background: #0f172a;
|
||||
border-color: #1e293b;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .featureCard:hover {
|
||||
border-color: #1e3a5f;
|
||||
box-shadow: 0 4px 24px rgba(96, 165, 250, 0.06);
|
||||
}
|
||||
|
||||
.featureIconWrapper {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .featureIconWrapper {
|
||||
background: linear-gradient(135deg, #172554 0%, #1e3a5f 100%);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.featureTitle {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .featureTitle {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.featureDescription {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.6;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .featureDescription {
|
||||
color: #94a3b8;
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import clsx from 'clsx';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import Layout from '@theme/Layout';
|
||||
import Heading from '@theme/Heading';
|
||||
import Link from '@docusaurus/Link';
|
||||
@@ -10,7 +11,13 @@ import styles from './index.module.css';
|
||||
const features = [
|
||||
{
|
||||
title: <Translate>安全高效的 SSH 连接</Translate>,
|
||||
icon: '🔒',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={styles.featureSvg}>
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||
<circle cx="12" cy="16" r="1" />
|
||||
</svg>
|
||||
),
|
||||
description: (
|
||||
<Translate>
|
||||
基于 Rust russh 库构建，提供安全、高性能的 SSH 连接。支持密码和密钥认证、代理转发、TOFU 主机密钥验证。
|
||||
@@ -19,7 +26,13 @@ const features = [
|
||||
},
|
||||
{
|
||||
title: <Translate>集成 SFTP 文件管理</Translate>,
|
||||
icon: '📂',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={styles.featureSvg}>
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
|
||||
<line x1="12" y1="11" x2="12" y2="17" />
|
||||
<polyline points="9 14 12 11 15 14" />
|
||||
</svg>
|
||||
),
|
||||
description: (
|
||||
<Translate>
|
||||
内置文件浏览器，直接在侧边栏管理远程文件。支持上传、下载、重命名、权限修改等操作，传输进度实时可见。
|
||||
@@ -28,7 +41,12 @@ const features = [
|
||||
},
|
||||
{
|
||||
title: <Translate>多标签终端界面</Translate>,
|
||||
icon: '📑',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={styles.featureSvg}>
|
||||
<polyline points="4 17 10 11 4 5" />
|
||||
<line x1="12" y1="19" x2="20" y2="19" />
|
||||
</svg>
|
||||
),
|
||||
description: (
|
||||
<Translate>
|
||||
同时管理多个 SSH 和本地终端会话。支持 WebGL 硬件加速渲染、自定义字体、关键词高亮、命令历史模糊搜索。
|
||||
@@ -37,7 +55,12 @@ const features = [
|
||||
},
|
||||
{
|
||||
title: <Translate>高度可定制</Translate>,
|
||||
icon: '🎨',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={styles.featureSvg}>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
),
|
||||
description: (
|
||||
<Translate>
|
||||
深色/浅色主题切换、可调整面板布局、快捷命令管理、多语言翻译、快捷键自定义，打造专属工作流。
|
||||
@@ -46,15 +69,31 @@ const features = [
|
||||
},
|
||||
];
|
||||
|
||||
const techStack = [
|
||||
{ name: 'Tauri 2', color: '#FFC131' },
|
||||
{ name: 'React 19', color: '#61DAFB' },
|
||||
{ name: 'Rust', color: '#DEA584' },
|
||||
{ name: 'TypeScript', color: '#3178C6' },
|
||||
{ name: 'xterm.js', color: '#0EAD69' },
|
||||
];
|
||||
|
||||
function HomepageHeader() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
const logoUrl = useBaseUrl('/img/logo.svg');
|
||||
return (
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<Heading as="h1" className="hero__title">
|
||||
<header className={styles.heroBanner}>
|
||||
<div className={styles.heroInner}>
|
||||
<div className={styles.heroLogoWrapper}>
|
||||
<img
|
||||
src={logoUrl}
|
||||
alt="Dragonfly Logo"
|
||||
className={styles.heroLogo}
|
||||
/>
|
||||
</div>
|
||||
<Heading as="h1" className={styles.heroTitle}>
|
||||
{siteConfig.title}
|
||||
</Heading>
|
||||
<p className="hero__subtitle">
|
||||
<p className={styles.heroSubtitle}>
|
||||
<Translate>现代高性能 SSH 客户端</Translate>
|
||||
</p>
|
||||
<p className={styles.heroDescription}>
|
||||
@@ -62,32 +101,47 @@ function HomepageHeader() {
|
||||
基于 Tauri 和 React 构建，跨平台、安全、快速
|
||||
</Translate>
|
||||
</p>
|
||||
<div className={styles.buttons}>
|
||||
<div className={styles.heroButtons}>
|
||||
<Link
|
||||
className="button button--secondary button--lg"
|
||||
className={clsx('button button--lg', styles.btnPrimary)}
|
||||
to="/docs/getting-started/installation">
|
||||
<Translate>快速开始</Translate>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={styles.btnIcon}>
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</svg>
|
||||
</Link>
|
||||
<Link
|
||||
className="button button--outline button--secondary button--lg"
|
||||
href="https://git.coderkang.top/Tauri/dragonfly"
|
||||
style={{marginLeft: '1rem'}}>
|
||||
className={clsx('button button--lg', styles.btnSecondary)}
|
||||
href="https://git.coderkang.top/Tauri/dragonfly">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" className={styles.btnGithubIcon}>
|
||||
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
|
||||
</svg>
|
||||
GitHub
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.techBadges}>
|
||||
{techStack.map((tech) => (
|
||||
<span key={tech.name} className={styles.techBadge}>
|
||||
<span className={styles.techDot} style={{backgroundColor: tech.color}} />
|
||||
{tech.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.heroGlow} />
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function Feature({title, icon, description}: {title: React.ReactNode; icon: string; description: React.ReactNode}) {
|
||||
function Feature({title, icon, description}: {title: React.ReactNode; icon: React.ReactNode; description: React.ReactNode}) {
|
||||
return (
|
||||
<div className={clsx('col col--3')}>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<div className={styles.featureIcon}>{icon}</div>
|
||||
<Heading as="h3">{title}</Heading>
|
||||
<p>{description}</p>
|
||||
<div className={styles.featureCard}>
|
||||
<div className={styles.featureIconWrapper}>
|
||||
{icon}
|
||||
</div>
|
||||
<Heading as="h3" className={styles.featureTitle}>{title}</Heading>
|
||||
<p className={styles.featureDescription}>{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -96,7 +150,7 @@ function HomepageFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={styles.featureGrid}>
|
||||
{features.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
@@ -106,8 +160,8 @@ function HomepageFeatures() {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default function Home(): React.ReactElement {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title={translate({message: '首页'})}
|
||||
|
||||
@@ -1,6 +1,25 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
||||
<circle cx="50" cy="50" r="45" fill="#2563eb" opacity="0.1"/>
|
||||
<path d="M50 15 C30 15 15 30 15 50 C15 70 30 85 50 85 C70 85 85 70 85 50 C85 30 70 15 50 15Z" fill="none" stroke="#2563eb" stroke-width="2"/>
|
||||
<path d="M35 40 L50 25 L65 40 M35 60 L50 75 L65 60" fill="none" stroke="#2563eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="50" y1="25" x2="50" y2="75" stroke="#2563eb" stroke-width="3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<svg width="256" height="256" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<defs>
|
||||
<linearGradient id="tailwind-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color: var(--grad-from, #06b6d4); stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color: var(--grad-to, #2563eb); stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<rect x="0" y="0" width="1024" height="1024" fill="url(#tailwind-gradient)" rx="192" ry="192"/>
|
||||
|
||||
<g id="dragonfly-icon-white">
|
||||
<path d="M192 277.333333h298.666667v42.666667H149.333333s-47.594667 8-84.757333 23.872c0.042667 0.298667 0.256 0.490667 0.298667 0.789333h-0.128C64.512 343.552 64 342.528 64 341.333333c0-42.666667 128-64 128-64z" fill="#FFFFFF" p-id="9393"></path>
|
||||
<path d="M213.333333 478.506667l277.333334-170.666667v42.666667s-19.221333 12.885333-40.128 35.008L195.413333 542.506667s-27.690667 27.733333-47.573333 59.456C133.888 558.122667 213.333333 478.506667 213.333333 478.506667zM832 277.333333H533.333333v42.666667h341.333334s47.594667 8 84.757333 23.872c-0.042667 0.298667-0.256 0.490667-0.298667 0.789333h0.128c0.234667-1.109333 0.746667-2.133333 0.746667-3.328 0-42.666667-128-64-128-64z" fill="#FFFFFF" p-id="9394"></path>
|
||||
<path d="M810.666667 478.506667l-277.333334-170.666667v42.666667s19.221333 12.885333 40.128 35.008L828.586667 542.506667s27.690667 27.733333 47.573333 59.456C890.112 558.122667 810.666667 478.506667 810.666667 478.506667z" fill="#FFFFFF" p-id="9395"></path>
|
||||
<path d="M64.576 343.872C101.738667 328 149.333333 320 149.333333 320h320v8.789333c-0.298667 0.128-134.229333 55.210667-192 55.210667-62.656 0-206.677333-0.106667-212.757333-40.128zM450.538667 385.493333c-25.642667 24.725333-42.965333 64.896-45.205334 71.658667-21.333333 64-229.013333 203.306667-256 149.333333-0.704-1.408-1.024-3.008-1.493333-4.544 19.904-31.722667 47.573333-59.456 47.573333-59.456l255.125334-156.992zM959.424 343.872C922.261333 328 874.666667 320 874.666667 320H554.666667v8.789333c0.298667 0.128 134.208 55.210667 192 55.210667 62.656 0 206.677333-0.106667 212.757333-40.128zM573.461333 385.493333c25.642667 24.725333 42.965333 64.896 45.205334 71.658667 21.333333 64 229.013333 203.306667 256 149.333333 0.704-1.408 1.024-3.008 1.493333-4.544-19.904-31.722667-47.573333-59.456-47.573333-59.456L573.461333 385.493333z" fill="#FFFFFF" p-id="9396"></path>
|
||||
<path d="M533.333333 874.666667c0 23.552-21.333333 21.333333-21.333333 21.333333s-21.333333 2.218667-21.333333-21.333333l-21.333334-405.333334a42.666667 42.666667 0 0 1 85.333334 0l-21.333334 405.333334z" fill="#FFFFFF" p-id="9397"></path>
|
||||
<path d="M554.666667 170.666667c0 23.552-19.114667 85.333333-42.666667 85.333333s-42.666667-61.781333-42.666667-85.333333 19.114667-42.666667 42.666667-42.666667 42.666667 19.114667 42.666667 42.666667z" fill="#FFFFFF" p-id="9398"></path>
|
||||
<path d="M512 160.256A52.821333 52.821333 0 0 0 480 149.333333a53.333333 53.333333 0 1 0 0 106.666667H512c-24.661333-35.328-12.885333-86.016 0-95.744zM544 149.333333c-12.053333 0-23.061333 4.16-32 10.922667 12.885333 9.728 24.661333 63.424 0 95.744h32a53.333333 53.333333 0 1 0 0-106.666667z" fill="#FFFFFF" p-id="9399"></path>
|
||||
<path d="M512 426.666667a42.666667 42.666667 0 0 0-42.666667 42.666666l2.24 42.666667h80.832L554.666667 469.333333a42.666667 42.666667 0 0 0-42.666667-42.666666z" fill="#FFFFFF" p-id="9400"></path>
|
||||
<path d="M477.184 618.666667h69.632l4.48-85.333334h-78.592z" fill="#FFFFFF" p-id="9401"></path>
|
||||
<path d="M576 320c0 42.666667-21.333333 106.666667-64 106.666667s-64-64-64-106.666667c0-35.328 0-64 64-64s64 28.672 64 64zM512 426.666667a42.666667 42.666667 0 0 0-42.666667 42.666666l3.370667 64h78.592L554.666667 469.333333a42.666667 42.666667 0 0 0-42.666667-42.666666z" fill="#FFFFFF" p-id="9402"></path>
|
||||
<path d="M481.685333 704h60.629334l4.501333-85.333333h-69.632z" fill="#FFFFFF" p-id="9403"></path>
|
||||
<path d="M486.165333 789.333333h51.669334l4.48-85.333333h-60.629334z" fill="#FFFFFF" p-id="9404"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 551 B After Width: | Height: | Size: 4.0 KiB |
Reference in new issue
Block a user