Skip to content

Commit 3fdf296

Browse files
committed
docs(getting-started): update progressive setup guide with timeline component
- Replace CardGrid component with Timeline component - Update content structure to use Step components for each setup stage - Improve readability and visual progression of the setup instructions
1 parent 0560585 commit 3fdf296

File tree

1 file changed

+21
-21
lines changed

1 file changed

+21
-21
lines changed

src/content/docs/getting-started.mdx

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,29 @@ title: 'Getting Started: Local Setup'
33
description: An overview of the local setup process for the entire Flutter News App ecosystem.
44
---
55

6-
import { Card, CardGrid } from '@astrojs/starlight/components';
6+
import { Timeline, Step } from '@astrojs/starlight/components';
77

88
Welcome to the local setup guide for the Flutter News App Toolkit. To get the full ecosystem running on your local machine, you will need to set up each of the three core components: the **API Server**, the **Web Dashboard**, and the **Mobile Client**.
99

1010
Follow the guides below in the recommended order to ensure a smooth setup process.
1111

12-
<CardGrid>
13-
<Card title="1. Set Up the API Server" icon="cloud">
14-
Start by getting the backend running. The API server handles data, authentication, and configuration for both the dashboard and the mobile app.
15-
<a href="/docs/api-server/local-setup/" style={{ display: 'block', marginTop: '1rem' }}>
16-
Go to API Setup Guide &rarr;
17-
</a>
18-
</Card>
19-
<Card title="2. Set Up the Web Dashboard" icon="laptop">
20-
Next, run the web-based administrative dashboard. You'll use this to manage content and configure the application.
21-
<a href="/docs/web-dashboard/local-setup/" style={{ display: 'block', marginTop: '1rem' }}>
22-
Go to Dashboard Setup Guide &rarr;
23-
</a>
24-
</Card>
25-
<Card title="3. Set Up the Mobile Client" icon="phone">
26-
Finally, set up the Flutter mobile app for iOS and Android to see the end-user experience.
27-
<a href="/docs/mobile-client/local-setup/" style={{ display: 'block', marginTop: '1rem' }}>
28-
Go to Mobile App Setup Guide &rarr;
29-
</a>
30-
</Card>
31-
</CardGrid>
12+
<Timeline>
13+
<Step title="Set Up the API Server">
14+
Start by getting the backend running. The API server handles data,
15+
authentication, and configuration for both the dashboard and the mobile app.
16+
17+
[Go to API Setup Guide &rarr;](/docs/api-server/local-setup/)
18+
</Step>
19+
<Step title="Set Up the Web Dashboard">
20+
Next, run the web-based administrative dashboard. You'll use this to manage
21+
content and configure the application.
22+
23+
[Go to Dashboard Setup Guide &rarr;](/docs/web-dashboard/local-setup/)
24+
</Step>
25+
<Step title="Set Up the Mobile Client">
26+
Finally, set up the Flutter mobile app for iOS and Android to see the
27+
end-user experience.
28+
29+
[Go to Mobile App Setup Guide &rarr;](/docs/mobile-client/local-setup/)
30+
</Step>
31+
</Timeline>

0 commit comments

Comments
 (0)