Skip to content

Commit 6f1bb9b

Browse files
a19q3a19q3
committed
Refine hero navigation and docs header
1 parent e859d0a commit 6f1bb9b

6 files changed

Lines changed: 37 additions & 120 deletions

File tree

‎src/components/HeroStatus.astro‎

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import githubActivity from "../data/github-activity.json";
33
import { defaultLocale, translations } from "../i18n/translations";
4-
import { MessageCircle, Radio } from "lucide-astro";
4+
import { Radio } from "lucide-astro";
55
66
interface Props {
77
compact?: boolean;
@@ -11,33 +11,15 @@ const { compact = false } = Astro.props;
1111
const t = translations[defaultLocale];
1212
const releases = (githubActivity as { releases: any[] }).releases;
1313
const release = releases[0];
14-
const community = "https://talk.nervos.org/t/cellscript-a-dsl-for-cell-based-contracts/10193/9";
15-
const feedback = "https://talk.nervos.org/t/cellscript-website-v0-is-live/10403/2";
1614
---
1715

1816
<aside class:list={["hero-status", compact && "hero-status-compact"]} aria-label={t.heroStatus.activity}>
1917
{release && (
20-
<a class="hero-status-item" href={release.url} target="_blank" rel="noopener noreferrer">
18+
<div class="hero-release-tag">
2119
<Radio aria-hidden="true" />
22-
<span>
23-
<small data-i18n="heroStatus.release">{t.heroStatus.release}</small>
24-
<strong>{release.tag}</strong>
25-
</span>
20+
<small data-i18n="heroStatus.release">{t.heroStatus.release}</small>
21+
<strong>{release.tag}</strong>
2622
<time>{release.date}</time>
27-
</a>
23+
</div>
2824
)}
29-
<a class="hero-status-item" href={community} target="_blank" rel="noopener noreferrer">
30-
<MessageCircle aria-hidden="true" />
31-
<span>
32-
<small data-i18n="heroStatus.community">{t.heroStatus.community}</small>
33-
<strong data-i18n="heroStatus.discussion">{t.heroStatus.discussion}</strong>
34-
</span>
35-
</a>
36-
<a class="hero-status-item hero-status-feedback" href={feedback} target="_blank" rel="noopener noreferrer">
37-
<MessageCircle aria-hidden="true" />
38-
<span>
39-
<small data-i18n="heroStatus.feedback">{t.heroStatus.feedback}</small>
40-
<strong data-i18n="heroStatus.websiteFeedback">{t.heroStatus.websiteFeedback}</strong>
41-
</span>
42-
</a>
4325
</aside>

‎src/data/site.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const repoRoot = resolve(here, "..", "..", "..");
99

1010
export const links = {
1111
docs: "/docs/",
12+
discussion: "https://talk.nervos.org/t/cellscript-a-dsl-for-cell-based-contracts/10193/9",
1213
examples: "https://github.com/CellScript-Labs/CellScript/tree/main/examples",
1314
source: "https://github.com/CellScript-Labs/CellScript",
1415
wiki: "https://github.com/CellScript-Labs/CellScript/wiki",

‎src/i18n/translations.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const translations = {
2323
playground: "Playground",
2424
source: "Source",
2525
registry: "Registry",
26-
overview: "Overview",
26+
overview: "Home",
2727
registryHome: "Registry Home",
2828
registryBrowse: "Registry",
2929
registryBrowseSoon: "Soon",
@@ -582,7 +582,7 @@ export const translations = {
582582
playground: "试写区",
583583
source: "源码",
584584
registry: "包注册表",
585-
overview: "总览",
585+
overview: "首页",
586586
registryHome: "包注册表首页",
587587
registryBrowse: "包注册表",
588588
registryBrowseSoon: "即将上线",

‎src/layouts/DocsLayout.astro‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import SiteHeader from "../components/SiteHeader.astro";
44
import { ClientRouter } from "astro:transitions";
55
import { defaultLocale, translations } from "../i18n/translations";
66
import type { DocsNeighbor, DocsPage } from "../lib/docs";
7-
import { ArrowLeft, ArrowRight, Github, ListTree } from "lucide-astro";
7+
import { ArrowLeft, ArrowRight, ListTree } from "lucide-astro";
88
99
interface Props {
1010
page: DocsPage;
@@ -72,10 +72,6 @@ const title = `${page.title} — CellScript Docs`;
7272
<header class="docs-hero">
7373
<p class="docs-eyebrow">CellScript Wiki</p>
7474
<h1>{page.title}</h1>
75-
<a class="docs-github-link" href={`https://github.com/CellScript-Labs/CellScript/wiki/${page.file.replace(/\.md$/, "")}`} target="_blank" rel="noopener noreferrer">
76-
<Github aria-hidden="true" />
77-
<span>Open mirror</span>
78-
</a>
7975
</header>
8076

8177
<div class="docs-content" set:html={page.html} />

‎src/pages/index.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@ const workflowIconComponents = {
134134
<p data-i18n="hero.subtitle">{t.hero.subtitle}</p>
135135
<div class="hero-actions">
136136
<a class="button primary" href={`/playground?example=${heroExamples[0].id}`} data-i18n="hero.playground.cta">{t.hero.playground.cta}</a>
137-
<a class="button" href={links.docs} target="_blank" rel="noopener noreferrer" data-i18n="nav.docs">{t.nav.docs}</a>
137+
<a class="button" href={links.docs} data-i18n="nav.docs">{t.nav.docs}</a>
138+
<a class="button" href={links.discussion} target="_blank" rel="noopener noreferrer" data-i18n="heroStatus.discussion">{t.heroStatus.discussion}</a>
138139
</div>
139140
<HeroStatus compact />
140141
</div>

‎src/styles/global.css‎

Lines changed: 26 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -670,102 +670,67 @@ body.home-body {
670670
}
671671

672672
.hero-status {
673-
display: grid;
674-
grid-template-columns: repeat(3, minmax(0, 1fr));
675-
gap: 10px;
673+
display: flex;
674+
flex-wrap: wrap;
675+
align-items: center;
676+
gap: 8px;
676677
width: 100%;
677-
margin: 18px 0 0;
678+
margin: 16px 0 0;
678679
}
679680

680-
.hero-status-item {
681+
.hero-release-tag {
681682
min-width: 0;
682-
min-height: 78px;
683-
display: grid;
684-
grid-template-columns: 22px minmax(0, 1fr);
683+
min-height: 34px;
684+
display: inline-flex;
685685
align-items: center;
686-
gap: 10px;
687-
padding: 12px;
686+
gap: 8px;
687+
padding: 0 11px;
688688
border: 1px solid var(--line-soft);
689-
border-radius: 8px;
690-
color: var(--text);
691-
text-decoration: none;
689+
border-radius: 999px;
690+
color: var(--muted);
692691
background:
693692
linear-gradient(180deg, var(--line-inner-soft), var(--color-transparent)),
694693
var(--panel-soft);
695-
box-shadow: 0 12px 38px var(--shadow-soft);
696-
transition:
697-
border-color var(--duration-fast) var(--ease-standard),
698-
background-color var(--duration-fast) var(--ease-standard),
699-
transform var(--duration-fast) var(--ease-quick);
700-
}
701-
702-
.hero-status-item:hover,
703-
.hero-status-item:focus-visible {
704-
border-color: var(--accent-line);
705-
background: var(--accent-surface);
706-
transform: translateY(-2px);
694+
box-shadow: 0 10px 30px var(--shadow-soft);
707695
}
708696

709-
.hero-status-item svg {
710-
width: 20px;
711-
height: 20px;
697+
.hero-release-tag svg {
698+
width: 16px;
699+
height: 16px;
700+
flex: 0 0 auto;
712701
color: var(--accent);
713702
}
714703

715-
.hero-status-item span {
716-
min-width: 0;
717-
display: grid;
718-
gap: 3px;
719-
}
720-
721-
.hero-status-item small {
704+
.hero-release-tag small {
722705
color: var(--dim);
723706
font-size: 0.68rem;
724-
font-weight: 700;
707+
font-weight: 750;
725708
line-height: 1;
726709
text-transform: uppercase;
727710
}
728711

729-
.hero-status-item strong {
712+
.hero-release-tag strong {
730713
min-width: 0;
731714
overflow: hidden;
732715
color: var(--text);
733716
font-size: 0.82rem;
734-
font-weight: 650;
735-
line-height: 1.25;
717+
font-weight: 700;
718+
line-height: 1;
736719
text-overflow: ellipsis;
737720
white-space: nowrap;
738721
}
739722

740-
.hero-status-item time,
741-
.hero-status-item code {
742-
grid-column: 2;
743-
overflow: hidden;
723+
.hero-release-tag time {
744724
color: var(--dim);
745725
font-family: var(--font-mono);
746726
font-size: 0.68rem;
747727
line-height: 1;
748-
text-overflow: ellipsis;
749728
white-space: nowrap;
750729
}
751730

752-
.hero-status-compact {
753-
grid-template-columns: repeat(2, minmax(0, 1fr));
754-
}
755-
756-
.hero-status-compact .hero-status-item {
757-
min-height: 66px;
758-
padding: 10px 11px;
759-
}
760-
761-
.hero-status-compact .hero-status-feedback {
762-
display: none;
763-
}
764-
765731
.hero-copy .hero-status {
766-
grid-template-columns: repeat(2, minmax(0, 1fr));
767732
max-width: 680px;
768-
margin-top: 22px;
733+
margin-top: 18px;
769734
}
770735

771736

@@ -1486,34 +1451,6 @@ body.home-body {
14861451
line-height: 1.62;
14871452
}
14881453

1489-
.docs-github-link {
1490-
width: fit-content;
1491-
display: inline-flex;
1492-
align-items: center;
1493-
gap: 8px;
1494-
margin-top: 24px;
1495-
padding: 9px 12px;
1496-
border: 1px solid var(--line-soft);
1497-
border-radius: 7px;
1498-
color: var(--text-soft);
1499-
background: var(--surface-button);
1500-
text-decoration: none;
1501-
font-size: 0.88rem;
1502-
font-weight: 600;
1503-
}
1504-
1505-
.docs-github-link:hover {
1506-
color: var(--text);
1507-
border-color: var(--accent-line);
1508-
background: var(--accent-surface);
1509-
}
1510-
1511-
.docs-github-link svg {
1512-
width: 17px;
1513-
height: 17px;
1514-
color: var(--accent);
1515-
}
1516-
15171454
.docs-content {
15181455
margin-top: clamp(32px, 4vw, 48px);
15191456
color: var(--text-soft);
@@ -3247,7 +3184,7 @@ tr:last-child td {
32473184
@media (max-width: 1100px) {
32483185
.hero-status,
32493186
.hero-status-compact {
3250-
grid-template-columns: repeat(2, minmax(0, 1fr));
3187+
justify-content: flex-start;
32513188
}
32523189

32533190
.docs-shell {
@@ -3484,7 +3421,7 @@ tr:last-child td {
34843421

34853422
.hero-status,
34863423
.hero-status-compact {
3487-
grid-template-columns: 1fr;
3424+
justify-content: flex-start;
34883425
}
34893426

34903427
.theme-toggle {

0 commit comments

Comments
 (0)