Skip to content

Commit 0462179

Browse files
baldassevabaldasseva
authored
docs: Add SDK landing page (#995)
### 🎨 What Design → [desktop](https://www.figma.com/file/r6aPCnTKl1Gy3rPytKgndK/Documentation?type=design&node-id=2859-20664&mode=design&t=DZHUNiUbNnI4xab3-0) ### 🛠️ How - I tried coordinating with PR for API as much as possible -> #991 - The design of the background is not respected. Until this PR is closed and for a reasonable amount of time, I will try to implement it. It is certainly possible, but I don't know how much rewriting of existing or writing of new code is necessary.
1 parent 1aba14d commit 0462179

File tree

13 files changed

+336
-32
lines changed

13 files changed

+336
-32
lines changed

‎apify-docs-theme/src/config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,11 @@ const themeConfig = ({
7272
{
7373
label: 'SDK',
7474
type: 'dropdown',
75+
to: '/sdk',
7576
activeBasePath: 'sdk',
7677
position: 'left',
78+
target: '_self',
79+
rel: 'dofollow',
7780
items: [
7881
{
7982
label: 'SDK for JavaScript',
@@ -93,6 +96,7 @@ const themeConfig = ({
9396
label: 'CLI',
9497
href: `${absoluteUrl}/cli/`, // we need a trailing slash here, we'd get redirected there anyway
9598
position: 'left',
99+
activeBasePath: 'cli',
96100
target: '_self',
97101
rel: 'dofollow',
98102
},

‎apify-docs-theme/src/theme/Navbar/Content/index.jsx

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
1-
import React from 'react';
1+
import { useLocation } from '@docusaurus/router';
22
import { useThemeConfig, isRegexpStringMatch } from '@docusaurus/theme-common';
3-
import { usePluginData } from '@docusaurus/useGlobalData';
43
import {
54
splitNavbarItems,
65
} from '@docusaurus/theme-common/internal';
7-
import NavbarLogo from '@theme/Navbar/Logo';
8-
import NavbarItem from '@theme/NavbarItem';
6+
import { usePluginData } from '@docusaurus/useGlobalData';
97
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
10-
import NavbarSearch from '@theme/Navbar/Search';
8+
import NavbarLogo from '@theme/Navbar/Logo';
119
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
12-
import { useLocation } from '@docusaurus/router';
13-
import SearchBar from '../../SearchBar';
10+
import NavbarSearch from '@theme/Navbar/Search';
11+
import NavbarItem from '@theme/NavbarItem';
12+
import React from 'react';
13+
1414
import styles from './styles.module.css';
15+
import SearchBar from '../../SearchBar';
1516

1617
function NavbarItems({ items }) {
1718
return (
1819
<>
19-
{items.map((item, i) => <NavbarItem {...item} key={i}/>)}
20+
{items.map((item, i) => <NavbarItem {...item} key={i} />)}
2021
</>
2122
);
2223
}
@@ -35,6 +36,14 @@ function NavbarContentLayout({
3536
);
3637
}
3738

39+
function SubNavbarTitle({ titleIcon, title }) {
40+
return titleIcon
41+
? <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
42+
<img src={`img/${titleIcon}`} width={24} height={24} /> {title}
43+
</div>
44+
: title;
45+
}
46+
3847
function SubNavbar() {
3948
const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
4049
const location = useLocation();
@@ -45,9 +54,13 @@ function SubNavbar() {
4554
<div className="navbar__container">
4655
<div className="navbar__items">
4756
<div className="navbar__sub--title">
48-
<NavbarItem label={subNavbar.title} to={subNavbar.to ?? '/'} activeBaseRegex='(?!)' />
57+
<NavbarItem
58+
label={<SubNavbarTitle title={subNavbar.title} titleIcon={subNavbar.titleIcon} />}
59+
to={subNavbar.to ?? '/'}
60+
activeBaseRegex='(?!)'
61+
/>
4962
</div>
50-
<NavbarItems items={subNavbar.items}/>
63+
<NavbarItems items={subNavbar.items} />
5164
</div>
5265
</div>
5366
</div>
@@ -72,24 +85,24 @@ export default function NavbarContent() {
7285
<NavbarContentLayout
7386
left={
7487
<>
75-
<NavbarMobileSidebarToggle/>
76-
<NavbarLogo/>
77-
<NavbarItems items={leftItems}/>
88+
<NavbarMobileSidebarToggle />
89+
<NavbarLogo />
90+
<NavbarItems items={leftItems} />
7891
</>
7992
}
8093
right={
8194
<>
82-
<NavbarColorModeToggle className={styles.colorModeToggle}/>
83-
<NavbarItems items={rightItems}/>
95+
<NavbarColorModeToggle className={styles.colorModeToggle} />
96+
<NavbarItems items={rightItems} />
8497
{!searchBarItem && (
8598
<NavbarSearch>
86-
<SearchBar/>
99+
<SearchBar />
87100
</NavbarSearch>
88101
)}
89102
</>
90103
}
91104
/>
92-
<SubNavbar/>
105+
<SubNavbar />
93106
</div>
94107
);
95108
}

‎apify-docs-theme/src/theme/NavbarItem/NavbarNavLink.jsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React from 'react';
2-
import Link from '@docusaurus/Link';
3-
import useBaseUrl from '@docusaurus/useBaseUrl';
41
import isInternalUrl_ from '@docusaurus/isInternalUrl';
5-
import IconExternalLink from '@theme/Icon/ExternalLink';
2+
import Link from '@docusaurus/Link';
63
import { useLocation } from '@docusaurus/router';
74
import { isRegexpStringMatch, useThemeConfig } from '@docusaurus/theme-common';
8-
import { usePluginData } from '@docusaurus/useGlobalData';
5+
import useBaseUrl from '@docusaurus/useBaseUrl';
96
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
7+
import { usePluginData } from '@docusaurus/useGlobalData';
8+
import IconExternalLink from '@theme/Icon/ExternalLink';
9+
import React from 'react';
1010

1111
export default function NavbarNavLink({
1212
activeBasePath,
@@ -83,7 +83,8 @@ export default function NavbarNavLink({
8383
// eslint-disable-next-line no-shadow
8484
isActive: (_match, location) => (activeBaseRegex
8585
? isRegexpStringMatch(activeBaseRegex, location.pathname) || dropDownHasActiveItem
86-
: location.pathname.startsWith(activeBaseUrl)),
86+
: location.pathname.startsWith(`/${activeBasePath}`)),
87+
activeClassName: 'navbar__link--active',
8788
})}
8889
{...props}
8990
{...linkContentProps}

‎apify-docs-theme/static/img/javascript-40x40.svg

Lines changed: 11 additions & 0 deletions
Loading

‎apify-docs-theme/static/img/python-40x40.svg

Lines changed: 19 additions & 0 deletions
Loading

‎nginx.conf

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ server {
190190
rewrite ^/academy/web-scraping-for-beginners/crawling/processing-data$ /academy/web-scraping-for-beginners/crawling/exporting-data permanent;
191191
rewrite ^/academy/web-scraping-for-beginners/crawling/recap-collection-basics$ /academy/web-scraping-for-beginners/crawling/recap-extraction-basics permanent;
192192
rewrite ^/academy/php/using-apify-scraper-with-php$ /academy/php/use-apify-from-php permanent;
193-
rewrite ^/api/client?$ /api redirect;
193+
rewrite ^/api/client/?$ /api redirect;
194194

195195
# sdk/js/api -> sdk/js/reference
196196
rewrite ^/sdk/js/api/apify(.*)$ /sdk/js/reference$1 permanent;

‎src/components/Button.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import styled, { css } from 'styled-components';
66
export const BUTTON_VARIANTS = {
77
DEFAULT: 'DEFAULT',
88
PRIMARY: 'PRIMARY',
9+
SUCCESS: 'SUCCESS',
910
};
1011

1112
export const BUTTON_SIZES = {
@@ -67,6 +68,16 @@ const BUTTON_VARIANTS_CSS = {
6768
background-color: ${theme.color.primary.actionActive};
6869
}
6970
`,
71+
[BUTTON_VARIANTS.SUCCESS]: css`
72+
background-color: ${theme.color.success.action};
73+
color: ${theme.color.neutral.textOnPrimary};
74+
&:hover, &:focus {
75+
background-color: ${theme.color.success.actionHover};
76+
}
77+
&:active {
78+
background-color: ${theme.color.success.actionActive};
79+
}
80+
`,
7081
};
7182

7283
const getButtonSizeCss = ({ size = BUTTON_SIZES.MEDIUM }: ButtonProps) => BUTTON_SIZES_CSS[size];

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,19 @@
1414
}
1515

1616
@media (min-width: 768px) {
17-
.heroBannerContent { max-width: 738px; align-items: flex-start; text-align: left; }
18-
.heroBannerContent.heroBannerContentCentered { max-width: 738px; align-items: center; }
19-
.heroBanner { margin-bottom: 0; }
17+
.heroBannerContent {
18+
max-width: 738px;
19+
align-items: flex-start;
20+
text-align: left;
21+
}
22+
.heroBannerContent.heroBannerContentCentered {
23+
max-width: 738px;
24+
align-items: center;
25+
text-align: center;
26+
}
27+
.heroBanner {
28+
margin-bottom: 0;
29+
}
2030
}
2131

2232
@media (min-width: 1024px) {

‎src/components/SdkSection/SdkSection.tsx

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import { ActionLink, Button, CodeBlock, theme } from '@apify-packages/ui-library';
2+
import { useColorMode } from '@docusaurus/theme-common';
3+
import useBaseUrl from '@docusaurus/useBaseUrl';
4+
import ThemedImage from '@theme/ThemedImage';
5+
import React from 'react';
6+
import GitHubButton from 'react-github-btn';
7+
import styled from 'styled-components';
8+
9+
import { Heading } from '../Heading';
10+
import { Text } from '../Text';
11+
12+
const StyledButton = styled(Button)`
13+
font-weight: 650;
14+
`;
15+
16+
const StyledSdkSection = styled.div`
17+
display: flex;
18+
gap: ${theme.space.space24};
19+
20+
@media (max-width: ${theme.layout.tablet}) {
21+
flex-direction: column;
22+
}
23+
24+
.SdkSectionTitle {
25+
display: flex;
26+
align-items: center;
27+
gap: ${theme.space.space8};
28+
margin-bottom: ${theme.space.space8};
29+
}
30+
31+
.SdkSectionDescription {
32+
flex: 1 0 0;
33+
display: flex;
34+
flex-direction: column;
35+
align-items: flex-start;
36+
gap: ${theme.space.space24};
37+
}
38+
39+
.SdkSectionActionButtons {
40+
display: flex;
41+
align-items: center;
42+
gap: ${theme.space.space16};
43+
44+
@media (max-width: ${theme.layout.tablet}) {
45+
flex-direction: column;
46+
align-items: flex-start;
47+
}
48+
}
49+
50+
.SdkSectionCodeExamples {
51+
flex: 1 0 0;
52+
display: flex;
53+
flex-direction: column;
54+
gap: ${theme.space.space16};
55+
width: 50%;
56+
}
57+
`;
58+
59+
interface SdkSectionProps {
60+
title: string;
61+
description: string;
62+
installCodeSnippet: string;
63+
exampleCodeSnippet: string;
64+
language: 'JavaScript' | 'Python';
65+
githubRepoUrl: string;
66+
gettingStartedUrl: string;
67+
referenceUrl: string;
68+
}
69+
70+
export default function SdkSection({
71+
title,
72+
description,
73+
installCodeSnippet,
74+
exampleCodeSnippet,
75+
language,
76+
githubRepoUrl,
77+
gettingStartedUrl,
78+
referenceUrl,
79+
}: SdkSectionProps) {
80+
const { colorMode } = useColorMode();
81+
const lowerCaseLanguage = language.toLowerCase();
82+
83+
return (
84+
<StyledSdkSection>
85+
<div className="SdkSectionDescription">
86+
<div>
87+
<div className="SdkSectionTitle">
88+
<ThemedImage
89+
height={24}
90+
width={24}
91+
sources={{ dark: useBaseUrl(`/img/${lowerCaseLanguage}-40x40.svg`), light: useBaseUrl(`/img/${lowerCaseLanguage}-40x40.svg`) }}
92+
/>
93+
<Heading type="titleXl" style={{ verticalAlign: 'center' }}>{title}</Heading>
94+
</div>
95+
<Text size='medium' color={theme.color.neutral.textMuted}>
96+
{description}
97+
</Text>
98+
</div>
99+
<GitHubButton
100+
href={githubRepoUrl}
101+
data-color-scheme={colorMode}
102+
data-size="large"
103+
data-show-count="true"
104+
aria-label={`Star apify/apify-sdk-${lowerCaseLanguage === 'javascript' ? 'js' : lowerCaseLanguage} on GitHub`}
105+
>
106+
Star
107+
</GitHubButton>
108+
<div className="SdkSectionActionButtons">
109+
<StyledButton hideExternalIcon color='success' to={gettingStartedUrl}>Get started</StyledButton>
110+
<ActionLink hideExternalIcon to={referenceUrl} >{`${language} SDK Reference`}</ActionLink>
111+
</div>
112+
</div>
113+
<div className="SdkSectionCodeExamples">
114+
<CodeBlock language="bash" content={installCodeSnippet} fullHeight />
115+
<CodeBlock language={lowerCaseLanguage} hideLineNumbers content={exampleCodeSnippet} />
116+
</div>
117+
</StyledSdkSection>
118+
);
119+
}

‎src/components/Section/Section.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@ interface SectionProps {
1010
heading?: string;
1111
description?: React.ReactNode;
1212
className?: string;
13+
headingClassName?: string;
1314
children?: React.ReactNode;
1415
}
1516

16-
export default function Section({ heading, description, className, children }: SectionProps) {
17+
export default function Section({ heading, description, className, children, headingClassName }: SectionProps) {
1718
return (
1819
<section className={clsx(styles.section, className)}>
1920
{(heading || description) && <div className={styles.sectionHeader}>
20-
{heading && <Heading type='titleXl'>{heading}</Heading>}
21+
{heading && <Heading className={headingClassName} type='titleXl'>{heading}</Heading>}
2122
{description && <Text color={theme.color.neutral.textMuted}>{description}</Text>}
2223
</div>}
2324
{children}

0 commit comments

Comments
 (0)