Skip to content

Commit d04c28f

Browse files
devongovettdevongovett
authored
docs: Improve root page (#9009)
1 parent 6d8af92 commit d04c28f

File tree

5 files changed

+82
-6
lines changed

5 files changed

+82
-6
lines changed

‎packages/dev/s2-docs/assets/wallpaper_collaborative_S2_desktop.webp‎

49.7 KB
Loading

‎packages/dev/s2-docs/pages/WelcomeHeader.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import {ProductCard, Content, Footer, Text, LinkButton} from '@react-spectrum/s2';
2+
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
3+
import {TAB_DEFS} from '../src/constants';
4+
// @ts-ignore
5+
import url from 'url:../assets/wallpaper_collaborative_S2_desktop.webp';
6+
7+
export function WelcomeHeader() {
8+
return (
9+
<header
10+
style={{
11+
backgroundImage: `url(${url})`,
12+
backgroundSize: 'cover'
13+
}}
14+
className={style({
15+
paddingX: 48,
16+
paddingY: 96,
17+
marginTop: {
18+
default: -12,
19+
lg: -40
20+
},
21+
marginX: {
22+
default: -12,
23+
lg: -40
24+
},
25+
marginBottom: 48
26+
})}>
27+
<h1 className={style({font: 'heading-2xl', color: 'white'})}>
28+
React Spectrum Libraries
29+
</h1>
30+
</header>
31+
);
32+
}
33+
34+
export function LibraryCards() {
35+
return (
36+
<div className={style({display: 'flex', gap: 20, flexWrap: 'wrap', justifyContent: {default: 'center', lg: 'start'}})}>
37+
<ProductCard size="L">
38+
{TAB_DEFS['react-spectrum'].icon}
39+
<Content>
40+
<Text slot="title">{TAB_DEFS['react-spectrum'].label}</Text>
41+
<Text slot="description">{TAB_DEFS['react-spectrum'].description}</Text>
42+
</Content>
43+
<Footer>
44+
<LinkButton href="s2/index.html" variant="accent">Get started</LinkButton>
45+
</Footer>
46+
</ProductCard>
47+
48+
<ProductCard size="L">
49+
{TAB_DEFS['react-aria'].icon}
50+
<Content>
51+
<Text slot="title">{TAB_DEFS['react-aria'].label}</Text>
52+
<Text slot="description">{TAB_DEFS['react-aria'].description}</Text>
53+
</Content>
54+
<Footer>
55+
<LinkButton href="react-aria/Autocomplete.html" variant="accent">Explore</LinkButton>
56+
</Footer>
57+
</ProductCard>
58+
59+
<ProductCard size="L">
60+
{TAB_DEFS['internationalized'].icon}
61+
<Content>
62+
<Text slot="title">{TAB_DEFS['internationalized'].label}</Text>
63+
<Text slot="description">{TAB_DEFS['internationalized'].description}</Text>
64+
</Content>
65+
<Footer>
66+
<LinkButton href="internationalized/date/index.html" variant="accent">Show Packages</LinkButton>
67+
</Footer>
68+
</ProductCard>
69+
</div>
70+
);
71+
}

‎packages/dev/s2-docs/pages/index.mdx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import {Layout} from '../src/Layout';
2-
import {LinkButton} from '@react-spectrum/s2';
2+
import {WelcomeHeader, LibraryCards} from './WelcomeHeader';
33
export default Layout;
44

55
export const section = 'Getting started';
6+
export const hideNav = true;
67

7-
# Welcome!
8+
<WelcomeHeader />
89

910
The React Spectrum docs have a new look! This is a **beta preview** so keep in mind that we will be continuing to make improvements before the full release.
1011

11-
<LinkButton href="s2/getting-started.html" variant="accent" size="L">Get Started with Spectrum 2</LinkButton>
12+
<LibraryCards />
1213

1314
## What's new?
1415

@@ -22,4 +23,4 @@ The React Spectrum docs have a new look! This is a **beta preview** so keep in m
2223

2324
## Roadmap
2425

25-
The existing docs are still available [here](https://react-spectrum.adobe.com/react-spectrum/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!
26+
The existing docs are still available [here](https://react-spectrum.adobe.com/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!

‎packages/dev/s2-docs/src/Layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ let articleStyles = style({
101101

102102
export function Layout(props: PageProps & {children: ReactElement<any>}) {
103103
let {pages, currentPage, children} = props;
104-
let hasToC = currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents[0].children.length > 0;
104+
let hasToC = !currentPage.exports?.hideNav && currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents?.[0]?.children?.length > 0;
105105
return (
106106
<Provider elementType="html" locale="en" background="layer-1" styles={style({scrollPaddingTop: {default: 64, lg: 0}})}>
107107
<head>
@@ -150,7 +150,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
150150
pages={pages}
151151
currentPage={currentPage} />
152152
<div className={style({display: 'flex', width: 'full'})}>
153-
<Nav pages={pages} currentPage={currentPage} />
153+
{currentPage.exports?.hideNav ? null : <Nav pages={pages} currentPage={currentPage} />}
154154
<main
155155
key={currentPage.url}
156156
style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}

‎packages/dev/s2-docs/src/Nav.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export function Nav({pages, currentPage}: PageProps) {
1111
let currentLibrary = getLibraryFromPage(currentPage);
1212
let sections = new Map();
1313
for (let page of pages) {
14+
if (page.exports?.hideNav) {
15+
continue;
16+
}
17+
1418
let library = getLibraryFromPage(page);
1519
if (library !== currentLibrary) {
1620
continue;

0 commit comments

Comments
 (0)