| 1 | --- |
| 2 | type ActiveItem = 'features' | 'surfaces' | 'skills' | 'community' | 'docs' | 'changelog'; |
| 3 | |
| 4 | const { |
| 5 | active, |
| 6 | scrolled = false, |
| 7 | accountSlot = false, |
| 8 | } = Astro.props as { |
| 9 | active?: ActiveItem; |
| 10 | scrolled?: boolean; |
| 11 | accountSlot?: boolean; |
| 12 | }; |
| 13 | |
| 14 | const base = import.meta.env.BASE_URL.replace(/\/$/, ''); |
| 15 | const repo = 'https://github.com/esengine/DeepSeek-Reasonix'; |
| 16 | const items: Array<{ |
| 17 | id: ActiveItem; |
| 18 | href: string; |
| 19 | en: string; |
| 20 | zh: string; |
| 21 | secondary?: boolean; |
| 22 | }> = [ |
| 23 | { id: 'features', href: `${base}/#features`, en: 'Features', zh: '特性' }, |
| 24 | { id: 'surfaces', href: `${base}/#surfaces`, en: 'Surfaces', zh: '使用形态', secondary: true }, |
| 25 | { id: 'skills', href: `${base}/skills/`, en: 'Skills', zh: '技能市场' }, |
| 26 | { id: 'community', href: `${base}/#community`, en: 'Community', zh: '社区', secondary: true }, |
| 27 | { id: 'docs', href: `${base}/docs/`, en: 'Docs', zh: '文档' }, |
| 28 | { id: 'changelog', href: `${base}/changelog/`, en: 'Changelog', zh: '更新日志' }, |
| 29 | ]; |
| 30 | --- |
| 31 | |
| 32 | <header class:list={['nav', { scrolled }]}> |
| 33 | <div class="nav-inner"> |
| 34 | <a class="brand" href={`${base}/`}> |
| 35 | <picture class="brand-picture"> |
| 36 | <source media="(max-width: 400px)" srcset={`${base}/favicon.svg`} /> |
| 37 | <img src={`${base}/logo.svg`} alt="Reasonix logo" /> |
| 38 | </picture> |
| 39 | </a> |
| 40 | <nav class="nav-links" aria-label="Primary navigation"> |
| 41 | {items.map((item) => ( |
| 42 | <a |
| 43 | class:list={[{ here: active === item.id, 'nav-link--secondary': item.secondary }]} |
| 44 | href={item.href} |
| 45 | aria-current={active === item.id ? 'page' : undefined} |
| 46 | > |
| 47 | <span class="l-en">{item.en}</span> |
| 48 | <span class="l-zh">{item.zh}</span> |
| 49 | </a> |
| 50 | ))} |
| 51 | </nav> |
| 52 | <a |
| 53 | class="nav-github" |
| 54 | href={repo} |
| 55 | target="_blank" |
| 56 | rel="noreferrer" |
| 57 | aria-label="Reasonix GitHub repository" |
| 58 | > |
| 59 | <svg viewBox="0 0 24 24" aria-hidden="true"> |
| 60 | <path fill="currentColor" d="M12 .7a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.3c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.6-.3-5.4-1.3-5.4-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.3 2.8.1 3.1.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.4 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .7Z" /> |
| 61 | </svg> |
| 62 | <span class="nav-github-label">GitHub</span> |
| 63 | </a> |
| 64 | <div class="lang-switch" role="group" aria-label="Language"> |
| 65 | <button type="button" data-lang="en" class="active">EN</button> |
| 66 | <button type="button" data-lang="zh">中文</button> |
| 67 | </div> |
| 68 | <div class="theme-switch" role="group" aria-label="Theme"> |
| 69 | <button type="button" data-theme="system" class="active" aria-label="System theme"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></button> |
| 70 | <button type="button" data-theme="light" aria-label="Light theme"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><line x1="12" y1="1" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="23"/><line x1="4.2" y1="4.2" x2="6.3" y2="6.3"/><line x1="17.7" y1="17.7" x2="19.8" y2="19.8"/><line x1="1" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="23" y2="12"/><line x1="4.2" y1="19.8" x2="6.3" y2="17.7"/><line x1="17.7" y1="6.3" x2="19.8" y2="4.2"/></svg></button> |
| 71 | <button type="button" data-theme="dark" aria-label="Dark theme"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg></button> |
| 72 | </div> |
| 73 | {accountSlot ? ( |
| 74 | <span class="nav-acct" data-account-slot></span> |
| 75 | ) : ( |
| 76 | <a class="btn btn-ghost nav-sign-in" href={`${base}/login/`}> |
| 77 | <span class="l-en">Sign in</span> |
| 78 | <span class="l-zh">登录</span> |
| 79 | </a> |
| 80 | )} |
| 81 | <a class="btn btn-dark nav-install" href={`${base}/#start`}> |
| 82 | <span class="l-en">Install</span> |
| 83 | <span class="l-zh">安装</span> |
| 84 | </a> |
| 85 | <button |
| 86 | class="nav-menu-toggle" |
| 87 | type="button" |
| 88 | data-mobile-nav-toggle |
| 89 | aria-controls="site-mobile-nav" |
| 90 | aria-expanded="false" |
| 91 | aria-label="Open navigation" |
| 92 | title="Open navigation" |
| 93 | > |
| 94 | <svg viewBox="0 0 24 24" aria-hidden="true"> |
| 95 | <path d="M4 6h16M4 12h16M4 18h16" /> |
| 96 | </svg> |
| 97 | </button> |
| 98 | </div> |
| 99 | <div class="mobile-nav" id="site-mobile-nav" data-mobile-nav hidden> |
| 100 | <button class="mobile-nav-backdrop" type="button" data-mobile-nav-close aria-label="Close navigation"></button> |
| 101 | <aside class="mobile-nav-panel" role="dialog" aria-modal="true" aria-labelledby="site-mobile-nav-title"> |
| 102 | <div class="mobile-nav-head"> |
| 103 | <span id="site-mobile-nav-title"><span class="l-en">Navigation</span><span class="l-zh">导航</span></span> |
| 104 | <button class="mobile-nav-close" type="button" data-mobile-nav-close aria-label="Close navigation" title="Close navigation"> |
| 105 | <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg> |
| 106 | </button> |
| 107 | </div> |
| 108 | <nav class="mobile-nav-links" aria-label="Mobile primary navigation"> |
| 109 | {items.map((item) => ( |
| 110 | <a class:list={[{ here: active === item.id }]} href={item.href} aria-current={active === item.id ? 'page' : undefined}> |
| 111 | <span class="l-en">{item.en}</span> |
| 112 | <span class="l-zh">{item.zh}</span> |
| 113 | </a> |
| 114 | ))} |
| 115 | </nav> |
| 116 | <div class="mobile-nav-actions"> |
| 117 | <a class="mobile-nav-github" href={repo} target="_blank" rel="noreferrer"> |
| 118 | <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 .7a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.3c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.6-.3-5.4-1.3-5.4-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.3 2.8.1 3.1.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.4 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .7Z" /></svg> |
| 119 | GitHub |
| 120 | </a> |
| 121 | {accountSlot ? ( |
| 122 | <span class="nav-acct" data-account-slot></span> |
| 123 | ) : ( |
| 124 | <a class="btn btn-ghost" href={`${base}/login/`}><span class="l-en">Sign in</span><span class="l-zh">登录</span></a> |
| 125 | )} |
| 126 | <a class="btn btn-dark" href={`${base}/#start`}><span class="l-en">Install</span><span class="l-zh">安装</span></a> |
| 127 | </div> |
| 128 | </aside> |
| 129 | </div> |
| 130 | </header> |
| 131 |