Skip to content

Commit db97f61

Browse files
jancurnjancurn
authored
feat: Improved docs homepage, in particular "Open-source tools" section (#2173)
This is follow up to #2172, the open source projects were outdated <!-- CURSOR_SUMMARY --> > [!NOTE] > Revamps the docs homepage and the Open‑source tools section. > > - Overhauls `OpenSourceCards`: makes images clickable, updates Crawlee copy, replaces Got Scraping with `Fingerprint Suite`, and adds new cards for `impit`, `mcpc`, `proxy-chain`, and the `Actor whitepaper`; updates GitHub links/labels and adds placeholder visuals > - Adds CSS for clickable image wrappers and placeholder hover/dark‑mode styles > - Homepage tweaks: updates hero description; swaps and relabels API/SDK cards (API first), adds API reference link, standardizes headings to “Apify API/SDK/CLI,” and refines Support card copy/casing > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 2ebd528. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 8081a93 commit db97f61

3 files changed

Lines changed: 194 additions & 67 deletions

File tree

‎src/components/OpenSourceCards/OpenSourceCards.tsx‎

Lines changed: 127 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,19 @@ const OpenSourceCards: React.FC = () => {
1919
<>
2020
<CardWithImageAndContent
2121
image={
22-
<ThemedImage
23-
sources={{
24-
light: useBaseUrl(
25-
'/img/landing-pages/crawlee_with_background.svg',
26-
),
27-
dark: useBaseUrl(
28-
'/img/landing-pages/crawlee_with_background_dark.svg',
29-
),
30-
}}
31-
alt="Crawlee"
32-
/>
22+
<Link to="https://crawlee.dev" className={styles.imageLink}>
23+
<ThemedImage
24+
sources={{
25+
light: useBaseUrl(
26+
'/img/landing-pages/crawlee_with_background.svg',
27+
),
28+
dark: useBaseUrl(
29+
'/img/landing-pages/crawlee_with_background_dark.svg',
30+
),
31+
}}
32+
alt="Crawlee"
33+
/>
34+
</Link>
3335
}
3436
content={
3537
<div className='cardContentWrapper'>
@@ -38,7 +40,7 @@ const OpenSourceCards: React.FC = () => {
3840
<Heading type="titleM">Crawlee</Heading>
3941
</Link>
4042
<Text color={theme.color.neutral.textMuted}>
41-
A popular web scraping and browser automation library.
43+
Web crawling, scraping, and browser automation library for Node.js and Python with autoscaling and proxies.
4244
</Text>
4345
</div>
4446
<div className={styles.githubButtonWrapper}>
@@ -57,35 +59,37 @@ const OpenSourceCards: React.FC = () => {
5759
/>
5860
<CardWithImageAndContent
5961
image={
60-
<ThemedImage
61-
sources={{
62-
light: useBaseUrl(
63-
'/img/landing-pages/got_scraping_with_background.svg',
64-
),
65-
dark: useBaseUrl(
66-
'/img/landing-pages/got_scraping_with_background_dark.svg',
67-
),
68-
}}
69-
alt="Got Scraping"
70-
/>
62+
<Link to="https://github.com/apify/fingerprint-suite" className={styles.imageLink}>
63+
<ThemedImage
64+
sources={{
65+
light: useBaseUrl(
66+
'/img/landing-pages/fingerprint_suite_with_background.svg',
67+
),
68+
dark: useBaseUrl(
69+
'/img/landing-pages/fingerprint_suite_with_background_dark.svg',
70+
),
71+
}}
72+
alt="Fingerprint Suite"
73+
/>
74+
</Link>
7175
}
7276
content={
7377
<div className="cardContentWrapper">
7478
<div className="cardContentWrapperText">
75-
<Link to="https://github.com/apify/got-scraping" className={styles.headingLink}>
76-
<Heading type="titleM">Got Scraping</Heading>
79+
<Link to="https://github.com/apify/fingerprint-suite" className={styles.headingLink}>
80+
<Heading type="titleM">Fingerprint Suite</Heading>
7781
</Link>
7882
<Text color={theme.color.neutral.textMuted}>
79-
An HTTP client made for scraping based on Got.
83+
Toolkit for generating and injecting realistic browser fingerprints into Playwright and Puppeteer.
8084
</Text>
8185
</div>
8286
<div className={styles.githubButtonWrapper}>
8387
<GitHubButton
84-
href="https://github.com/apify/got-scraping"
88+
href="https://github.com/apify/fingerprint-suite"
8589
data-color-scheme={colorMode}
8690
data-size="large"
8791
data-show-count="true"
88-
aria-label="Star apify/got-scraping on GitHub"
92+
aria-label="Star apify/fingerprint-suite on GitHub"
8993
>
9094
Star
9195
</GitHubButton>
@@ -95,43 +99,121 @@ const OpenSourceCards: React.FC = () => {
9599
/>
96100
<CardWithImageAndContent
97101
image={
98-
<ThemedImage
99-
sources={{
100-
light: useBaseUrl(
101-
'/img/landing-pages/fingerprint_suite_with_background.svg',
102-
),
103-
dark: useBaseUrl(
104-
'/img/landing-pages/fingerprint_suite_with_background_dark.svg',
105-
),
106-
}}
107-
alt="Fingerprint Suite"
108-
/>
102+
<Link to="https://github.com/apify/impit" className={styles.imageLink}>
103+
<div className={styles.placeholderImage}>
104+
<span>impit</span>
105+
</div>
106+
</Link>
109107
}
110108
content={
111109
<div className="cardContentWrapper">
112110
<div className="cardContentWrapperText">
113-
<Link to="https://github.com/apify/fingerprint-suite" className={styles.headingLink}>
114-
<Heading type="titleM">Fingerprint Suite</Heading>
111+
<Link to="https://github.com/apify/impit" className={styles.headingLink}>
112+
<Heading type="titleM">impit</Heading>
115113
</Link>
116114
<Text color={theme.color.neutral.textMuted}>
117-
Browser fingerprinting tools for anonymizing your
118-
scrapers.
115+
Rust-based HTTP client with browser impersonation. Bindings for Node.js, Python, and CLI.
119116
</Text>
120117
</div>
121118
<div className={styles.githubButtonWrapper}>
122119
<GitHubButton
123-
href="https://github.com/apify/fingerprint-suite"
120+
href="https://github.com/apify/impit"
124121
data-color-scheme={colorMode}
125122
data-size="large"
126123
data-show-count="true"
127-
aria-label="Star apify/fingerprint-suite on GitHub"
124+
aria-label="Star apify/impit on GitHub"
128125
>
129126
Star
130127
</GitHubButton>
131128
</div>
132129
</div>
133130
}
134131
/>
132+
<CardWithImageAndContent
133+
image={
134+
<Link to="https://github.com/apify/mcp-cli" className={styles.imageLink}>
135+
<div className={styles.placeholderImage}>
136+
<span>mcpc</span>
137+
</div>
138+
</Link>
139+
}
140+
content={
141+
<div className="cardContentWrapper">
142+
<div className="cardContentWrapperText">
143+
<Link to="https://github.com/apify/mcp-cli" className={styles.headingLink}>
144+
<Heading type="titleM">mcpc</Heading>
145+
</Link>
146+
<Text color={theme.color.neutral.textMuted}>
147+
Command-line client for the Model Context Protocol (MCP) for exploration, scripting, and code mode.
148+
</Text>
149+
</div>
150+
<div className={styles.githubButtonWrapper}>
151+
<GitHubButton
152+
href="https://github.com/apify/mcp-cli"
153+
data-color-scheme={colorMode}
154+
data-size="large"
155+
data-show-count="true"
156+
aria-label="Star apify/mcp-cli on GitHub"
157+
>
158+
Star
159+
</GitHubButton>
160+
</div>
161+
</div>
162+
}
163+
/>
164+
<CardWithImageAndContent
165+
image={
166+
<Link to="https://github.com/apify/proxy-chain" className={styles.imageLink}>
167+
<div className={styles.placeholderImage}>
168+
<span>proxy-chain</span>
169+
</div>
170+
</Link>
171+
}
172+
content={
173+
<div className="cardContentWrapper">
174+
<div className="cardContentWrapperText">
175+
<Link to="https://github.com/apify/proxy-chain" className={styles.headingLink}>
176+
<Heading type="titleM">proxy-chain</Heading>
177+
</Link>
178+
<Text color={theme.color.neutral.textMuted}>
179+
Node.js proxy server with SSL, authentication, and upstream proxy chaining.
180+
</Text>
181+
</div>
182+
<div className={styles.githubButtonWrapper}>
183+
<GitHubButton
184+
href="https://github.com/apify/proxy-chain"
185+
data-color-scheme={colorMode}
186+
data-size="large"
187+
data-show-count="true"
188+
aria-label="Star apify/proxy-chain on GitHub"
189+
>
190+
Star
191+
</GitHubButton>
192+
</div>
193+
</div>
194+
}
195+
/>
196+
<CardWithImageAndContent
197+
image={
198+
<Link to="https://whitepaper.actor" className={styles.imageLink}>
199+
<div className={styles.placeholderImage}>
200+
<span>Actor whitepaper</span>
201+
</div>
202+
</Link>
203+
}
204+
content={
205+
<div className="cardContentWrapper">
206+
<div className="cardContentWrapperText">
207+
<Link to="https://whitepaper.actor" className={styles.headingLink}>
208+
<Heading type="titleM">Actor whitepaper</Heading>
209+
</Link>
210+
<Text color={theme.color.neutral.textMuted}>
211+
Open specification for building serverless microapps in any programming language.
212+
</Text>
213+
</div>
214+
</div>
215+
}
216+
/>
135217
</>
136218
);
137219
};

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

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
height: 2rem;
2626
width: 2rem;
2727
transition: margin 200ms ease-in-out;
28-
2928
}
3029

3130
.headingLink:hover::after {
@@ -43,3 +42,50 @@ html[data-theme='dark'] .headingLink:hover::after {
4342
.githubButtonWrapper {
4443
margin-top: auto;
4544
}
45+
46+
/* Clickable image wrapper */
47+
.imageLink {
48+
display: block;
49+
width: 100%;
50+
height: 100%;
51+
}
52+
53+
.imageLink img {
54+
transition: filter 200ms ease-in-out;
55+
}
56+
57+
.imageLink:hover img {
58+
filter: brightness(0.97);
59+
}
60+
61+
html[data-theme='dark'] .imageLink:hover img {
62+
filter: brightness(1.05);
63+
}
64+
65+
/* Placeholder image styles */
66+
.placeholderImage {
67+
display: flex;
68+
justify-content: center;
69+
align-items: center;
70+
width: 100%;
71+
aspect-ratio: 384 / 124;
72+
background: linear-gradient(135deg, #e8eaed 0%, #d1d5db 100%);
73+
border-radius: 12px;
74+
color: #6b7280;
75+
font-size: 1.5rem;
76+
font-weight: 600;
77+
transition: background 200ms ease-in-out;
78+
}
79+
80+
.imageLink:hover .placeholderImage {
81+
background: linear-gradient(135deg, #d1d5db 0%, #c4c9d0 100%);
82+
}
83+
84+
html[data-theme='dark'] .placeholderImage {
85+
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
86+
color: #9ca3af;
87+
}
88+
89+
html[data-theme='dark'] .imageLink:hover .placeholderImage {
90+
background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
91+
}

‎src/pages/index.tsx‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,7 @@ export default function Home() {
7171
}}
7272
description={
7373
<Text color={theme.color.neutral.textMuted} size="large">
74-
Learn how to extract value from the web with the Apify
75-
platform.
74+
Learn how to put the web to work with Apify.
7675
</Text>
7776
}
7877
/>
@@ -192,24 +191,25 @@ export default function Home() {
192191
image={
193192
<ThemedImage
194193
sources={{
195-
light: useBaseUrl('/img/landing-pages/sdk.svg'),
196-
dark: useBaseUrl('/img/landing-pages/sdk_dark.svg'),
194+
light: useBaseUrl('/img/landing-pages/api.svg'),
195+
dark: useBaseUrl('/img/landing-pages/api_dark.svg'),
197196
}}
198-
alt="Apify SDK"
197+
alt="Apify API"
199198
/>
200199
}
201200
content={
202201
<div className={styles.cardContentWrapper}>
203202
<div className="cardContentWrapperText">
204-
<Heading type='titleXl' as="h3">SDK</Heading>
203+
<Heading type='titleXl' as="h3">Apify API</Heading>
205204
<Text color={theme.color.neutral.textMuted}>
206-
Software toolkits for developing new Actors.
205+
Interact with the Apify platform from your applications.
207206
</Text>
208207
</div>
209208
<Text>
210209
<ul className={styles.cardContentList}>
211-
<li><Link to={new URL('/sdk/js', siteConfig.url).href}>SDK for JavaScript</Link></li>
212-
<li><Link to={new URL('/sdk/python', siteConfig.url).href}>SDK for Python</Link></li>
210+
<li><Link to={new URL('/api/client/js', siteConfig.url).href}>API client for JavaScript</Link></li>
211+
<li><Link to={new URL('/api/client/python', siteConfig.url).href}>API client for Python</Link></li>
212+
<li><Link to={new URL('/api/v2', siteConfig.url).href}>API reference</Link></li>
213213
</ul>
214214
</Text>
215215
</div>
@@ -219,25 +219,24 @@ export default function Home() {
219219
image={
220220
<ThemedImage
221221
sources={{
222-
light: useBaseUrl('/img/landing-pages/api.svg'),
223-
dark: useBaseUrl('/img/landing-pages/api_dark.svg'),
222+
light: useBaseUrl('/img/landing-pages/sdk.svg'),
223+
dark: useBaseUrl('/img/landing-pages/sdk_dark.svg'),
224224
}}
225-
alt="Apify API"
225+
alt="Apify SDK"
226226
/>
227227
}
228228
content={
229229
<div className={styles.cardContentWrapper}>
230230
<div className="cardContentWrapperText">
231-
<Heading type='titleXl' as="h3">API</Heading>
231+
<Heading type='titleXl' as="h3">Apify SDK</Heading>
232232
<Text color={theme.color.neutral.textMuted}>
233-
Interact with the Apify platform from your applications.
233+
Software toolkits for developing new Actors.
234234
</Text>
235235
</div>
236236
<Text>
237237
<ul className={styles.cardContentList}>
238-
<li><Link to={new URL('/api/client/js', siteConfig.url).href}>API client for JavaScript</Link></li>
239-
<li><Link to={new URL('/api/client/python', siteConfig.url).href}>API client for Python</Link></li>
240-
<li><Link to={new URL('/api/v2', siteConfig.url).href}>API Reference</Link></li>
238+
<li><Link to={new URL('/sdk/js', siteConfig.url).href}>SDK for JavaScript</Link></li>
239+
<li><Link to={new URL('/sdk/python', siteConfig.url).href}>SDK for Python</Link></li>
241240
</ul>
242241
</Text>
243242
</div>
@@ -256,14 +255,14 @@ export default function Home() {
256255
content={
257256
<div className={styles.cardContentWrapper}>
258257
<div className="cardContentWrapperText">
259-
<Heading type='titleXl' as="h3">CLI</Heading>
258+
<Heading type='titleXl' as="h3">Apify CLI</Heading>
260259
<Text color={theme.color.neutral.textMuted}>
261260
Control the Apify platform from terminal or shell scripts.
262261
</Text>
263262
</div>
264263
<Text>
265264
<ul className={styles.cardContentList}>
266-
<li><Link to={new URL('/cli', siteConfig.url).href}>CLI Reference</Link></li>
265+
<li><Link to={new URL('/cli', siteConfig.url).href}>CLI reference</Link></li>
267266
</ul>
268267
</Text>
269268
</div>
@@ -358,8 +357,8 @@ export default function Home() {
358357
}}
359358
alt="Intercom logo"
360359
/>}
361-
title="Help & Support"
362-
description="Find answers to common questions or get help from our support team."
360+
title="Support"
361+
description="Find answers to common questions or get help from the Apify support team."
363362
to="https://help.apify.com/"
364363
/>
365364
</div>

0 commit comments

Comments
 (0)