Skip to content

Commit c3e0a8b

Browse files
janbucharjanbuchar
committed
Add components
1 parent 6b5712b commit c3e0a8b

File tree

6 files changed

+285
-0
lines changed

6 files changed

+285
-0
lines changed

‎website/src/components/ApiLink.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
// eslint-disable-next-line import/no-extraneous-dependencies
4+
import { useDocsVersion } from '@docusaurus/theme-common/internal';
5+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
6+
7+
// const pkg = require('../../../packages/crawlee/package.json');
8+
//
9+
// const [v1, v2] = pkg.version.split('.');
10+
// const stable = [v1, v2].join('.');
11+
12+
const ApiLink = ({ to, children }) => {
13+
return (
14+
<Link to={`/api/${to}`}>{children}</Link>
15+
);
16+
17+
// const version = useDocsVersion();
18+
// const { siteConfig } = useDocusaurusContext();
19+
//
20+
// // if (siteConfig.presets[0][1].docs.disableVersioning || version.version === stable) {
21+
// if (siteConfig.presets[0][1].docs.disableVersioning) {
22+
// return (
23+
// <Link to={`/api/${to}`}>{children}</Link>
24+
// );
25+
// }
26+
//
27+
// return (
28+
// <Link to={`/api/${version.version === 'current' ? 'next' : version.version}/${to}`}>{children}</Link>
29+
// );
30+
};
31+
32+
export default ApiLink;

‎website/src/components/Gradients.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
3+
export default function Gradients() {
4+
return (
5+
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0" fill="none">
6+
<defs>
7+
<linearGradient id="gradient-1" x1="26.6667" y1="12" x2="14.2802" y2="34.5208"
8+
gradientUnits="userSpaceOnUse">
9+
<stop offset="0%" stop-color="#9dceff"/>
10+
<stop offset="70%" stop-color="#4584b6"/>
11+
<stop offset="100%" stop-color="#4584b6"/>
12+
</linearGradient>
13+
<linearGradient id="gradient-2" x1="29.6667" y1="0" x2="-1.80874" y2="26.2295"
14+
gradientUnits="userSpaceOnUse">
15+
<stop offset="0%" stop-color="#4584b6"/>
16+
</linearGradient>
17+
</defs>
18+
</svg>
19+
);
20+
}

‎website/src/components/Highlights.jsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import styles from './Highlights.module.css';
4+
import Gradients from './Gradients';
5+
6+
const FeatureList = [
7+
{
8+
title: 'Python with type hints',
9+
Svg: require('../../static/img/features/runs-on-py.svg').default,
10+
description: (
11+
<>
12+
Crawlee for Python is written in a modern way using type hints, providing code completion in your IDE
13+
and helping you catch bugs early on build time.
14+
</>
15+
),
16+
},
17+
// {
18+
// title: 'HTTP scraping',
19+
// Svg: require('../../static/img/features/fingerprints.svg').default,
20+
// description: (
21+
// <>
22+
// Crawlee makes HTTP requests that <a href="https://crawlee.dev/docs/guides/avoid-blocking"><b>mimic browser headers and TLS fingerprints</b></a>.
23+
// It also rotates them automatically based on data about real-world traffic. Popular HTML
24+
// parsers <b><a href="https://crawlee.dev/docs/guides/cheerio-crawler-guide">Cheerio</a>&nbsp;
25+
// and <a href="https://crawlee.dev/docs/guides/jsdom-crawler-guide">JSDOM</a></b> are included.
26+
// </>
27+
// ),
28+
// },
29+
{
30+
title: 'Headless browsers',
31+
Svg: require('../../static/img/features/works-everywhere.svg').default,
32+
description: (
33+
<>
34+
Switch your crawlers from HTTP to a <a href="https://crawlee.dev/python/api/class/PlaywrightCrawler">headless browser</a> in 3 lines of code.
35+
Crawlee builds on top of <b>Playwright</b> and adds its own features. Chrome, Firefox and more.
36+
</>
37+
),
38+
39+
// TODO: this is not true yet
40+
// Crawlee builds on top of <b>Playwright</b> and adds its own <b>anti-blocking features and human-like fingerprints</b>. Chrome, Firefox and more.
41+
},
42+
{
43+
title: 'Automatic scaling and proxy management',
44+
Svg: require('../../static/img/features/auto-scaling.svg').default,
45+
description: (
46+
<>
47+
Crawlee automatically manages concurrency based on <a href="https://crawlee.dev/python/api/class/AutoscaledPool">available system resources</a> and&nbsp;
48+
<a href="https://crawlee.dev/python/api/class/ProxyConfiguration">smartly rotates proxies</a>.
49+
Proxies that often time-out, return network errors or bad HTTP codes like 401 or 403 are discarded.
50+
</>
51+
),
52+
},
53+
// {
54+
// title: 'Queue and Storage',
55+
// Svg: require('../../static/img/features/storage.svg').default,
56+
// description: (
57+
// <>
58+
// You can <a href="https://crawlee.dev/docs/guides/result-storage">save files, screenshots and JSON results</a> to disk with one line of code
59+
// or plug an adapter for your DB. Your URLs are <a href="https://crawlee.dev/docs/guides/request-storage">kept in a queue</a> that ensures their
60+
// uniqueness and that you don't lose progress when something fails.
61+
// </>
62+
// ),
63+
// },
64+
// {
65+
// title: 'Helpful utils and configurability',
66+
// Svg: require('../../static/img/features/node-requests.svg').default,
67+
// description: (
68+
// <>
69+
// Crawlee includes tools for <a href="https://crawlee.dev/api/utils/namespace/social">extracting social handles</a> or phone numbers, infinite scrolling, blocking
70+
// unwanted assets <a href="https://crawlee.dev/api/utils">and many more</a>. It works great out of the box, but also provides&nbsp;
71+
// <a href="https://crawlee.dev/api/basic-crawler/interface/BasicCrawlerOptions">rich configuration options</a>.
72+
// </>
73+
// ),
74+
// },
75+
];
76+
77+
function Feature({ Svg, title, description }) {
78+
return (
79+
<div className={clsx('col col--4')}>
80+
<div className="padding-horiz--md padding-bottom--md">
81+
<div className={styles.featureIcon}>
82+
{Svg ? <Svg alt={title}/> : null}
83+
</div>
84+
<h3>{title}</h3>
85+
<p>{description}</p>
86+
</div>
87+
</div>
88+
);
89+
}
90+
91+
export default function Highlights() {
92+
return (
93+
<section className={styles.features}>
94+
<Gradients />
95+
<div className="container">
96+
<div className="row">
97+
{FeatureList.map((props, idx) => (
98+
<Feature key={idx} {...props} />
99+
))}
100+
</div>
101+
</div>
102+
</section>
103+
);
104+
}

‎website/src/components/Highlights.module.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.features {
2+
display: flex;
3+
align-items: center;
4+
width: 100%;
5+
font-size: 18px;
6+
line-height: 32px;
7+
color: #41465d;
8+
}
9+
10+
html[data-theme="dark"] .features {
11+
color: #b3b8d2;
12+
}
13+
14+
.feature svg {
15+
height: 60px;
16+
width: 60px;
17+
}
18+
19+
.features svg path:nth-child(1) {
20+
fill: url(#gradient-1) !important;
21+
}
22+
23+
.features svg path:nth-child(n + 1) {
24+
fill: url(#gradient-2) !important;
25+
}
26+
27+
html[data-theme="dark"] .featureIcon {
28+
background: #272c3d;
29+
}
30+
31+
.featureIcon {
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
margin-bottom: 24px;
36+
border-radius: 8px;
37+
background-color: #f2f3fb;
38+
width: 48px;
39+
height: 48px;
40+
}
41+
42+
.features h3 {
43+
font-weight: 700;
44+
font-size: 18px;
45+
line-height: 32px;
46+
}

‎website/src/components/RunnableCodeBlock.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import CodeBlock from '@theme/CodeBlock';
4+
import Link from '@docusaurus/Link';
5+
import styles from './RunnableCodeBlock.module.css';
6+
7+
const EXAMPLE_RUNNERS = {
8+
playwright: '6i5QsHBMtm3hKph70',
9+
puppeteer: '7tWSD8hrYzuc9Lte7',
10+
cheerio: 'kk67IcZkKSSBTslXI',
11+
};
12+
13+
const RunnableCodeBlock = ({ children, actor, hash, type, ...props }) => {
14+
hash = hash ?? children.hash;
15+
16+
if (!children.code) {
17+
throw new Error(`RunnableCodeBlock requires "code" and "hash" props
18+
Make sure you are importing the code block contents with the roa-loader.`);
19+
}
20+
21+
if (!hash) {
22+
return (
23+
<CodeBlock {...props}>
24+
{ children.code }
25+
</CodeBlock>
26+
);
27+
}
28+
29+
const href = `https://console.apify.com/actors/${actor ?? EXAMPLE_RUNNERS[type ?? 'playwright']}?runConfig=${hash}&asrc=run_on_apify`;
30+
31+
return (
32+
<div className={clsx(styles.container, 'runnable-code-block')}>
33+
<Link href={href} className={styles.button} rel="follow">
34+
Run on
35+
<svg width="91" height="25" viewBox="0 0 91 25" fill="none" xmlns="http://www.w3.org/2000/svg" className="apify-logo-light alignMiddle_src-theme-Footer-index-module"><path d="M3.135 2.85A3.409 3.409 0 0 0 .227 6.699l2.016 14.398 8.483-19.304-7.59 1.059Z" fill="#97D700"></path><path d="M23.604 14.847 22.811 3.78a3.414 3.414 0 0 0-3.64-3.154c-.077 0-.153.014-.228.025l-3.274.452 7.192 16.124c.54-.67.805-1.52.743-2.379Z" fill="#71C5E8"></path><path d="M5.336 24.595c.58.066 1.169-.02 1.706-.248l12.35-5.211L13.514 5.97 5.336 24.595Z" fill="#FF9013"></path><path d="M33.83 5.304h3.903l5.448 14.623h-3.494l-1.022-2.994h-5.877l-1.025 2.994h-3.384L33.83 5.304Zm-.177 9.032h4.14l-2-5.994h-.086l-2.054 5.994ZM58.842 5.304h3.302v14.623h-3.302V5.304ZM64.634 5.304h10.71v2.7h-7.4v4.101h5.962v2.632h-5.963v5.186h-3.309V5.303ZM82.116 14.38l-5.498-9.076h3.748l3.428 6.016h.085l3.599-6.016H91l-5.56 9.054v5.569h-3.324v-5.548ZM51.75 5.304h-7.292v14.623h3.3v-4.634h3.993a4.995 4.995 0 1 0 0-9.99Zm-.364 7.417h-3.628V7.875h3.627a2.423 2.423 0 0 1 0 4.846Z" className="apify-logo" fill="#000"></path></svg>
36+
</Link>
37+
<CodeBlock {...props} className={clsx(styles.codeBlock, 'code-block', props.title != null ? 'has-title' : 'no-title')}>
38+
{ children.code }
39+
</CodeBlock>
40+
</div>
41+
);
42+
};
43+
44+
export default RunnableCodeBlock;

‎website/src/components/RunnableCodeBlock.module.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.button {
2+
display: inline-block;
3+
padding: 3px 10px;
4+
position: absolute;
5+
top: 9px;
6+
right: 9px;
7+
z-index: 1;
8+
font-size: 16px;
9+
line-height: 28px;
10+
background: var(--prism-background-color);
11+
color: var(--prism-color);
12+
border: 1px solid var(--ifm-color-emphasis-300);
13+
border-radius: var(--ifm-global-radius);
14+
opacity: 0.7;
15+
font-weight: 600;
16+
width: 155px;
17+
}
18+
19+
@media screen and (max-width: 768px) {
20+
.button {
21+
display: none;
22+
}
23+
}
24+
25+
.button svg {
26+
height: 20px;
27+
position: absolute;
28+
top: 7.5px;
29+
right: 0;
30+
}
31+
32+
.button:hover {
33+
opacity: 1;
34+
color: var(--prism-color);
35+
}
36+
37+
.container {
38+
position: relative;
39+
}

0 commit comments

Comments
 (0)