Skip to content

Commit 15b73ac

Browse files
8bitAlex8bitAlex
committed
Refactor homepage features and styles; update installation instructions and terminal demo
1 parent d21f36d commit 15b73ac

6 files changed

Lines changed: 273 additions & 70 deletions

File tree

‎docusaurus.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const config: Config = {
3333
{
3434
docs: {
3535
sidebarPath: './sidebars.ts',
36-
editUrl: 'https://github.com/8bitalex/raid/tree/gh-pages/',
36+
editUrl: 'https://github.com/8bitalex/raid/tree/docsite-source/',
3737
},
3838
blog: false,
3939
theme: {

‎src/components/HomepageFeatures/index.tsx‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,54 +4,64 @@ import Heading from '@theme/Heading';
44
import styles from './styles.module.css';
55

66
type FeatureItem = {
7+
icon: string;
78
title: string;
8-
Svg: React.ComponentType<React.ComponentProps<'svg'>>;
99
description: ReactNode;
1010
};
1111

1212
const FeatureList: FeatureItem[] = [
1313
{
14-
title: 'Easy to Use',
15-
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
14+
icon: '⚡',
15+
title: 'One-command onboarding',
1616
description: (
1717
<>
18-
Docusaurus was designed from the ground up to be easily installed and
19-
used to get your website up and running quickly.
18+
<code>raid install</code> clones every repo in your profile and runs
19+
their install tasks concurrently. A new teammate is fully set up before
20+
they finish their coffee.
2021
</>
2122
),
2223
},
2324
{
24-
title: 'Focus on What Matters',
25-
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
25+
icon: '📋',
26+
title: 'Tribal knowledge, codified',
2627
description: (
2728
<>
28-
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
29-
ahead and move your docs into the <code>docs</code> directory.
29+
Every setup step, script, and gotcha lives in <code>raid.yaml</code>{' '}
30+
alongside the code. No wiki to update, no Slack thread to dig through —
31+
the repo <em>is</em> the runbook.
3032
</>
3133
),
3234
},
3335
{
34-
title: 'Powered by React',
35-
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
36+
icon: '🛠️',
37+
title: 'Shared team commands',
3638
description: (
3739
<>
38-
Extend or customize your website layout by reusing React. Docusaurus can
39-
be extended while reusing the same header and footer.
40+
Define custom commands once in your profile — <code>raid deploy</code>,{' '}
41+
<code>raid migrate</code>, whatever your team needs. Everyone gets the
42+
same commands without any extra setup.
43+
</>
44+
),
45+
},
46+
{
47+
icon: '🌍',
48+
title: 'Environment switching',
49+
description: (
50+
<>
51+
<code>raid env staging</code> writes the right <code>.env</code> files
52+
into every repo and runs environment tasks across all of them at once.
53+
Switch contexts in seconds, not minutes.
4054
</>
4155
),
4256
},
4357
];
4458

45-
function Feature({title, Svg, description}: FeatureItem) {
59+
function Feature({icon, title, description}: FeatureItem) {
4660
return (
47-
<div className={clsx('col col--4')}>
48-
<div className="text--center">
49-
<Svg className={styles.featureSvg} role="img" />
50-
</div>
51-
<div className="text--center padding-horiz--md">
52-
<Heading as="h3">{title}</Heading>
53-
<p>{description}</p>
54-
</div>
61+
<div className={clsx('col col--3', styles.feature)}>
62+
<div className={styles.featureIcon}>{icon}</div>
63+
<Heading as="h3" className={styles.featureTitle}>{title}</Heading>
64+
<p className={styles.featureDesc}>{description}</p>
5565
</div>
5666
);
5767
}

‎src/components/HomepageFeatures/styles.module.css‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,34 @@
11
.features {
2-
display: flex;
3-
align-items: center;
4-
padding: 2rem 0;
2+
padding: 4rem 0;
53
width: 100%;
64
}
75

8-
.featureSvg {
9-
height: 200px;
10-
width: 200px;
6+
.feature {
7+
padding: 1.5rem 1.25rem;
8+
text-align: left;
9+
}
10+
11+
.featureIcon {
12+
font-size: 2.25rem;
13+
margin-bottom: 0.75rem;
14+
line-height: 1;
15+
}
16+
17+
.featureTitle {
18+
font-size: 1.1rem;
19+
font-weight: 700;
20+
margin-bottom: 0.5rem;
21+
}
22+
23+
.featureDesc {
24+
font-size: 0.95rem;
25+
color: var(--ifm-color-emphasis-700);
26+
line-height: 1.6;
27+
margin: 0;
28+
}
29+
30+
@media screen and (max-width: 996px) {
31+
.feature {
32+
padding: 1.25rem 0.75rem;
33+
}
1134
}

‎src/css/custom.css‎

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,22 @@
1-
/**
2-
* Any CSS included here will be global. The classic template
3-
* bundles Infima by default. Infima is a CSS framework designed to
4-
* work well for content-centric websites.
5-
*/
6-
7-
/* You can override the default Infima variables here. */
81
:root {
9-
--ifm-color-primary: #2e8555;
10-
--ifm-color-primary-dark: #29784c;
11-
--ifm-color-primary-darker: #277148;
12-
--ifm-color-primary-darkest: #205d3b;
13-
--ifm-color-primary-light: #33925d;
14-
--ifm-color-primary-lighter: #359962;
15-
--ifm-color-primary-lightest: #3cad6e;
2+
--ifm-color-primary: #4f46e5;
3+
--ifm-color-primary-dark: #4338ca;
4+
--ifm-color-primary-darker: #3730a3;
5+
--ifm-color-primary-darkest: #312e81;
6+
--ifm-color-primary-light: #6366f1;
7+
--ifm-color-primary-lighter: #818cf8;
8+
--ifm-color-primary-lightest: #a5b4fc;
169
--ifm-code-font-size: 95%;
17-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
10+
--docusaurus-highlighted-code-line-bg: rgba(79, 70, 229, 0.1);
1811
}
1912

20-
/* For readability concerns, you should choose a lighter palette in dark mode. */
2113
[data-theme='dark'] {
22-
--ifm-color-primary: #25c2a0;
23-
--ifm-color-primary-dark: #21af90;
24-
--ifm-color-primary-darker: #1fa588;
25-
--ifm-color-primary-darkest: #1a8870;
26-
--ifm-color-primary-light: #29d5b0;
27-
--ifm-color-primary-lighter: #32d8b4;
28-
--ifm-color-primary-lightest: #4fddbf;
29-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
14+
--ifm-color-primary: #818cf8;
15+
--ifm-color-primary-dark: #6366f1;
16+
--ifm-color-primary-darker: #4f46e5;
17+
--ifm-color-primary-darkest: #4338ca;
18+
--ifm-color-primary-light: #a5b4fc;
19+
--ifm-color-primary-lighter: #c7d2fe;
20+
--ifm-color-primary-lightest: #e0e7ff;
21+
--docusaurus-highlighted-code-line-bg: rgba(129, 140, 248, 0.15);
3022
}

‎src/pages/index.module.css‎

Lines changed: 137 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,153 @@
1-
/**
2-
* CSS files with the .module.css suffix will be treated as CSS modules
3-
* and scoped locally.
4-
*/
5-
61
.heroBanner {
7-
padding: 4rem 0;
2+
padding: 5rem 0 3rem;
83
text-align: center;
4+
background: radial-gradient(ellipse at 60% 0%, rgba(79, 70, 229, 0.12) 0%, transparent 70%),
5+
var(--ifm-background-color);
96
position: relative;
107
overflow: hidden;
118
}
129

10+
[data-theme='dark'] .heroBanner {
11+
background: radial-gradient(ellipse at 60% 0%, rgba(79, 70, 229, 0.25) 0%, transparent 70%),
12+
var(--ifm-background-color);
13+
}
14+
1315
@media screen and (max-width: 996px) {
1416
.heroBanner {
15-
padding: 2rem;
17+
padding: 3rem 1rem 2rem;
18+
}
19+
}
20+
21+
.heroTitle {
22+
font-size: 3rem;
23+
font-weight: 800;
24+
line-height: 1.15;
25+
margin-bottom: 1.25rem;
26+
color: var(--ifm-font-color-base);
27+
}
28+
29+
@media screen and (max-width: 996px) {
30+
.heroTitle {
31+
font-size: 2rem;
1632
}
1733
}
1834

35+
.heroSubtitle {
36+
font-size: 1.25rem;
37+
color: var(--ifm-color-emphasis-700);
38+
margin-bottom: 2rem;
39+
line-height: 1.6;
40+
}
41+
1942
.buttons {
2043
display: flex;
2144
align-items: center;
2245
justify-content: center;
46+
gap: 1rem;
47+
margin-bottom: 3rem;
48+
flex-wrap: wrap;
49+
}
50+
51+
.buttonGhost {
52+
border: 2px solid var(--ifm-color-emphasis-400);
53+
color: var(--ifm-font-color-base);
54+
}
55+
56+
.buttonGhost:hover {
57+
border-color: var(--ifm-color-primary);
58+
color: var(--ifm-color-primary);
59+
text-decoration: none;
60+
}
61+
62+
/* Terminal */
63+
.terminal {
64+
max-width: 600px;
65+
margin: 0 auto;
66+
border-radius: 10px;
67+
overflow: hidden;
68+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
69+
text-align: left;
70+
background: #1e1e2e;
71+
}
72+
73+
.terminalBar {
74+
background: #313244;
75+
padding: 0.6rem 1rem;
76+
display: flex;
77+
gap: 6px;
78+
align-items: center;
79+
}
80+
81+
.dot {
82+
width: 12px;
83+
height: 12px;
84+
border-radius: 50%;
85+
display: inline-block;
86+
background: #585b70;
87+
}
88+
89+
.dot:first-child { background: #f38ba8; }
90+
.dot:nth-child(2) { background: #f9e2af; }
91+
.dot:nth-child(3) { background: #a6e3a1; }
92+
93+
.terminalBody {
94+
margin: 0;
95+
padding: 1.25rem 1.5rem;
96+
font-family: var(--ifm-font-family-monospace);
97+
font-size: 0.85rem;
98+
line-height: 1.7;
99+
color: #cdd6f4;
100+
background: #1e1e2e;
101+
white-space: pre;
102+
overflow-x: auto;
103+
}
104+
105+
/* Install section */
106+
.install {
107+
padding: 4rem 0;
108+
background: var(--ifm-color-emphasis-100);
109+
text-align: center;
110+
}
111+
112+
.installTitle {
113+
font-size: 1.75rem;
114+
margin-bottom: 2rem;
115+
}
116+
117+
.installOptions {
118+
display: flex;
119+
flex-direction: column;
120+
gap: 1rem;
121+
max-width: 640px;
122+
margin: 0 auto;
123+
}
124+
125+
.installOption {
126+
display: flex;
127+
align-items: center;
128+
gap: 1rem;
129+
background: var(--ifm-background-color);
130+
border: 1px solid var(--ifm-color-emphasis-300);
131+
border-radius: 8px;
132+
padding: 0.75rem 1.25rem;
133+
text-align: left;
134+
}
135+
136+
.installLabel {
137+
font-size: 0.75rem;
138+
font-weight: 600;
139+
text-transform: uppercase;
140+
letter-spacing: 0.05em;
141+
color: var(--ifm-color-emphasis-600);
142+
min-width: 70px;
143+
}
144+
145+
.installCmd {
146+
font-family: var(--ifm-font-family-monospace);
147+
font-size: 0.875rem;
148+
background: none;
149+
color: var(--ifm-color-primary);
150+
padding: 0;
151+
overflow-x: auto;
152+
white-space: nowrap;
23153
}

0 commit comments

Comments
 (0)