@apify/docs-theme 1.0.1 → 1.0.3

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@apify/docs-theme",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
-  "main": "./dist/index.js",
+  "main": "./src/index.js",
+  "files": [
+    "src"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rimraf ./dist && tsc && npm run copyStyles && npm run copyImages",
-    "copyStyles": "rsync -a -m --include '*/' --include '*.css' --exclude '*' ./src/theme/ ./dist/theme",
-    "copyImages": "cp -r src/img ./dist/img"
+    "build": "echo 'Building @apify/docs-theme!'"
   },
   "keywords": [],
   "author": "",

package/src/img/footer-apify-logo.svg

@@ -0,0 +1,6 @@
+<svg width="91" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <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 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.124a3.4 3.4 0 0 0 .743-2.379Z" fill="#71C5E8"/>
+    <path d="M5.336 24.595a3.39 3.39 0 0 0 1.706-.248l12.35-5.211L13.514 5.97 5.336 24.595Z" fill="#FF9013"/>
+    <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.994Zm25.189-9.032h3.302v14.623h-3.302V5.304Zm5.792 0h10.71v2.7h-7.4v4.101h5.962v2.632h-5.963v5.186h-3.309V5.303Zm17.482 9.076-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" fill="#fff"/>
+</svg>

package/src/img/footer-open-source.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M23.85 21.4261L22.07 18.5161C22.0223 18.4379 21.998 18.3477 22 18.2561V14.1261C22 12.3461 20.29 11.0561 18.48 9.67613C18.4235 9.63333 18.3765 9.5792 18.342 9.51722C18.3076 9.45523 18.2865 9.38675 18.28 9.31613C18.2746 9.24341 18.2842 9.17036 18.3083 9.10153C18.3324 9.0327 18.3704 8.96959 18.42 8.91613C19.2176 8.18843 19.7543 7.21901 19.9476 6.15676C20.1409 5.09451 19.9801 3.99817 19.49 3.03613C19.1249 2.3284 18.5986 1.7164 17.9535 1.24953C17.3084 0.782657 16.5625 0.473992 15.7761 0.348443C14.9897 0.222895 14.1849 0.28398 13.4264 0.526769C12.668 0.769557 11.9773 1.18725 11.41 1.74613L10.35 2.74613C10.2604 2.83348 10.1402 2.88237 10.015 2.88237C9.88984 2.88237 9.76963 2.83348 9.68 2.74613L8.62 1.74613C8.05176 1.18725 7.36022 0.769615 6.60107 0.526864C5.84192 0.284114 5.03637 0.223031 4.24929 0.348535C3.46221 0.474039 2.71561 0.782623 2.0696 1.24944C1.42359 1.71625 0.896234 2.32824 0.529996 3.03613C0.0712553 3.97975 -0.0790193 5.04376 0.100451 6.07751C0.279922 7.11126 0.780043 8.06236 1.53 8.79613L9.29 16.7961C9.39004 16.8988 9.50986 16.98 9.64221 17.035C9.77456 17.09 9.91668 17.1176 10.06 17.1161C10.2048 17.1178 10.3485 17.0904 10.4825 17.0354C10.6165 16.9804 10.7381 16.899 10.84 16.7961C10.9225 16.7101 10.9793 16.6027 11.004 16.4861C11.0288 16.3695 11.0204 16.2483 10.98 16.1361C10.8286 15.6925 10.7607 15.2245 10.78 14.7561C10.8094 14.1798 10.9714 13.6181 11.2535 13.1146C11.5355 12.6112 11.9299 12.1796 12.406 11.8535C12.8821 11.5274 13.427 11.3156 13.9983 11.2345C14.5697 11.1535 15.152 11.2053 15.7 11.3861C15.7886 11.4152 15.8836 11.4184 15.9739 11.3954C16.0643 11.3724 16.1462 11.3241 16.21 11.2561L16.36 11.1061C16.445 11.0188 16.559 10.9655 16.6805 10.9563C16.8021 10.9471 16.9228 10.9826 17.02 11.0561L17.32 11.2861C18.54 12.2061 20.05 13.3561 20.05 14.1361V18.6861C20.0494 18.8734 20.1014 19.057 20.2 19.2161L22.2 22.4761C22.2519 22.6119 22.3328 22.7347 22.437 22.8361C22.5412 22.9374 22.6663 23.0148 22.8034 23.0628C22.9406 23.1109 23.0866 23.1285 23.2313 23.1143C23.376 23.1002 23.5158 23.0547 23.6411 22.981C23.7664 22.9073 23.8741 22.8072 23.9567 22.6876C24.0394 22.568 24.095 22.4319 24.1196 22.2886C24.1442 22.1454 24.1374 21.9985 24.0994 21.8581C24.0615 21.7178 23.9935 21.5875 23.9 21.4761L23.85 21.4261Z"
+        fill="#B3B8D2"/>
+    <path
+        d="M16.09 13.1961C15.6537 12.7991 15.0849 12.5791 14.495 12.5791C13.9051 12.5791 13.3363 12.7991 12.9 13.1961C12.6632 13.4054 12.4704 13.6597 12.333 13.9442C12.1955 14.2288 12.1161 14.5378 12.0993 14.8534C12.0826 15.169 12.1288 15.4847 12.2354 15.7822C12.3419 16.0797 12.5067 16.353 12.72 16.5861L14.35 18.3561C14.4307 18.4514 14.4765 18.5713 14.48 18.6961V19.6961C14.48 20.9961 16 22.2861 16.48 22.6461C16.6349 22.7659 16.8242 22.8325 17.02 22.8361C17.2022 22.8349 17.3795 22.7771 17.5275 22.6707C17.6754 22.5644 17.7867 22.4147 17.846 22.2424C17.9053 22.0701 17.9096 21.8836 17.8584 21.7087C17.8071 21.5339 17.7029 21.3792 17.56 21.2661C16.9911 20.869 16.5388 20.3269 16.25 19.6961V18.1261C16.2512 17.9074 16.1689 17.6964 16.02 17.5361L14.02 15.3561C13.9611 15.2977 13.9155 15.2272 13.8861 15.1496C13.8568 15.072 13.8445 14.9889 13.85 14.9061C13.8613 14.738 13.9364 14.5806 14.06 14.4661C14.1771 14.3621 14.3283 14.3047 14.485 14.3047C14.6416 14.3047 14.7929 14.3621 14.91 14.4661L16.91 16.3261C17.0797 16.4839 17.3052 16.5679 17.5368 16.5594C17.7684 16.551 17.9872 16.4509 18.145 16.2811C18.3028 16.1114 18.3867 15.8859 18.3783 15.6543C18.3698 15.4227 18.2697 15.2039 18.1 15.0461L16.09 13.1961Z"
+        fill="#B3B8D2"/>
+</svg>

package/src/index.js

@@ -0,0 +1,40 @@
+function theme(
+    context,
+    options,
+) {
+    return {
+        name: '@apify/docs-theme',
+        getThemePath() {
+            return '../src/theme';
+        },
+        getTypeScriptThemePath() {
+            return '../src/theme';
+        },
+        contentLoaded({ actions }) {
+            const { setGlobalData } = actions;
+            setGlobalData({
+                options,
+            });
+        },
+        getClientModules() {
+            return [
+                require.resolve('./theme/custom.css'),
+            ];
+        },
+        configureWebpack() {
+            return {
+                module: {
+                    rules: [
+                        {
+                            test: /\.(js|jsx)$/,
+                            exclude: /node_modules/,
+                            use: { loader: 'babel-loader' },
+                        },
+                    ],
+                },
+            };
+        },
+    };
+}
+
+exports.default = theme;

package/src/theme/ColorModeToggle/index.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import clsx from 'clsx';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { translate } from '@docusaurus/Translate';
+import IconLightMode from '../Icon/LightMode';
+import IconDarkMode from '../Icon/DarkMode';
+import styles from './styles.module.css';
+
+function ColorModeToggle({
+    className,
+    value,
+    onChange
+}) {
+    const isBrowser = useIsBrowser();
+    const title = translate(
+        {
+            message: 'Switch between dark and light mode (currently {mode})',
+            id: 'theme.colorToggle.ariaLabel',
+            description: 'The ARIA label for the navbar color mode toggle',
+        },
+        {
+            mode:
+                value === 'dark'
+                    ? translate({
+                        message: 'dark mode',
+                        id: 'theme.colorToggle.ariaLabel.mode.dark',
+                        description: 'The name for the dark color mode',
+                    })
+                    : translate({
+                        message: 'light mode',
+                        id: 'theme.colorToggle.ariaLabel.mode.light',
+                        description: 'The name for the light color mode',
+                    }),
+        },
+    );
+    return (
+        <div className={clsx(styles.toggle, className)}>
+            <button
+                className={clsx(
+                    'clean-btn',
+                    styles.toggleButton,
+                    !isBrowser && styles.toggleButtonDisabled,
+                )}
+                type="button"
+                onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
+                disabled={!isBrowser}
+                title={title}
+                aria-label={title}>
+                <span>
+                    <IconLightMode
+                        className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
+                        width={14} height={14}
+                    />
+                    <IconDarkMode
+                        className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
+                        width={14} height={14}
+                    />
+                </span>
+            </button>
+        </div>
+    );
+}
+
+export default React.memo(ColorModeToggle);

package/src/theme/ColorModeToggle/styles.module.css

@@ -0,0 +1,53 @@
+.toggle {
+    padding: 3px;
+}
+
+.toggleButton {
+    width: 52px;
+    height: 26px;
+    background: #cfd4eb;
+    border-radius: 160px;
+    display: flex;
+    align-items: center;
+    transition: all var(--ifm-transition-fast);
+}
+
+[data-theme='dark'] .toggleButton {
+    background: #585e76;
+}
+
+.toggleButton span {
+    -webkit-tap-highlight-color: transparent;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #fff;
+    vertical-align: middle;
+    margin: 3px;
+    position: relative;
+    transition: all var(--ifm-transition-fast);
+    left: 0;
+    color: #585e76;
+}
+
+[data-theme='dark'] .toggleButton span {
+    background: #1a1b23;
+    color: #b3b8d2;
+    left: 25px;
+}
+
+.toggleButton:hover span {
+    background: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='light'] .darkToggleIcon,
+[data-theme='dark'] .lightToggleIcon {
+    display: none;
+}
+
+.toggleButtonDisabled {
+    cursor: not-allowed;
+}

package/src/theme/DocSidebarItem/Link/index.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import clsx from 'clsx';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { isActiveSidebarItem } from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+import styles from './styles.module.css';
+
+export default function DocSidebarItemLink({
+    item,
+    onItemClick,
+    activePath,
+    level,
+    index,
+    ...props
+}) {
+    const {
+        href,
+        label,
+        className,
+        autoAddBaseUrl,
+    } = item;
+    const isActive = isActiveSidebarItem(item, activePath);
+    const isInternalLink = isInternalUrl(href);
+    const baseUrl = useDocusaurusContext().siteConfig.url;
+
+    if (href.startsWith(baseUrl)) {
+        props.target = '_self';
+    }
+
+    return (
+        <li
+            className={clsx(
+                ThemeClassNames.docs.docSidebarItemLink,
+                ThemeClassNames.docs.docSidebarItemLinkLevel(level),
+                'menu__list-item',
+                className,
+            )}
+            key={label}>
+            <Link
+                className={clsx(
+                    'menu__link',
+                    !isInternalLink && styles.menuExternalLink,
+                    {
+                        'menu__link--active': isActive,
+                    },
+                )}
+                autoAddBaseUrl={autoAddBaseUrl}
+                aria-current={isActive ? 'page' : undefined}
+                to={href}
+                {...(isInternalLink && {
+                    onClick: onItemClick ? () => onItemClick(item) : undefined,
+                })}
+                {...props}>
+                {label}
+                {!isInternalLink && <IconExternalLink />}
+            </Link>
+        </li>
+    );
+}

package/src/theme/DocSidebarItem/Link/styles.module.css

@@ -0,0 +1,3 @@
+.menuExternalLink {
+  align-items: center;
+}

package/src/theme/Footer/index.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import clsx from 'clsx';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useThemeConfig } from '@docusaurus/theme-common';
+import LinkItem from '@theme/Footer/LinkItem';
+import styles from './index.module.css';
+
+function FooterLinksColumn({ column }) {
+    return (
+        <>
+            <div className={styles.footerTitle}>{column.title}</div>
+            <ul className={clsx(styles.footerItem, 'clean-list')}>
+                {column.items.map((item, i) => (
+                    <li key={i} className="footer__item">
+                        <LinkItem item={item} />
+                    </li>
+                ))}
+            </ul>
+        </>
+    );
+}
+
+function Footer() {
+    const { footer } = useThemeConfig();
+    if (!footer) {
+        return null;
+    }
+    const { links, style } = footer;
+    const OpenSourceIcon = require('../../img/footer-open-source.svg').default;
+    const ApifyLogo = require('../../img/footer-apify-logo.svg').default;
+    return (
+        <footer className={clsx(styles.footer, style)}>
+            <div className="container padding-horiz--lg">
+                <div className="row">
+                    <div className="col col--5">
+                        <div className="row">
+                            <div className="col col--6">
+                                <FooterLinksColumn column={links[0]} />
+                            </div>
+                            <div className="col col--6">
+                                <FooterLinksColumn column={links[1]} />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col col--7">
+                        <div className="row">
+                            <div className="col col--3 col--offset-9">
+                                <FooterLinksColumn column={links[2]} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="row padding-vert--md padding-top--lg">
+                    <div className="col padding-vert--md col--6">
+                        <div className={styles.freeAndOpenSource}>
+                            <OpenSourceIcon className={styles.alignMiddle} />
+                            <span className={styles.alignMiddle}>Apify SDK is free and open source</span>
+                        </div>
+                    </div>
+                    <div className="col padding-vert--md col--6 text--right">
+                        <span className={styles.builtBy}>
+                            <span className={styles.alignMiddle}>Built by</span>
+                            <ApifyLogo className={styles.alignMiddle} />
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+}
+
+export default React.memo(Footer);

package/src/theme/Footer/index.module.css

@@ -0,0 +1,46 @@
+.footer {
+    background: #272c3d;
+    padding-top: 64px;
+}
+
+.builtBy {
+    color: #b3b8d2;
+}
+
+.builtBy svg {
+    margin-left: 10px;
+    width: 90px;
+    height: 24px;
+}
+
+.freeAndOpenSource {
+    color: #b3b8d2;
+}
+
+.alignMiddle {
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.freeAndOpenSource svg {
+    margin-right: 10px;
+}
+
+.freeAndOpenSource svg path {
+    fill: #b3b8d2 !important;
+}
+
+.footer .footer__item svg path {
+    fill: #6f7490;
+}
+
+.footerTitle {
+    font-family: 'Lota Grotesque', sans-serif;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #8d92af;
+    margin-bottom: 20px;
+}

package/src/theme/Icon/DarkMode/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function IconDarkMode(props) {
+    return (
+        <svg viewBox="0 0 13 12" width={14} height={14} {...props}>
+            <path d="M10.7001 6.39501C10.6215 7.24611 10.3021 8.05721 9.77927 8.7334C9.25646 9.40959 8.55189 9.92291 7.748 10.2133C6.9441 10.5036 6.07414 10.5591 5.2399 10.3731C4.40565 10.187 3.64164 9.76728 3.03726 9.1629C2.43287 8.55851 2.01312 7.7945 1.8271 6.96026C1.64108 6.12602 1.6965 5.25605 1.98688 4.45216C2.27725 3.64826 2.79056 2.94369 3.46675 2.42088C4.14294 1.89808 4.95404 1.57866 5.80515 1.50001C5.30685 2.17414 5.06707 3.00473 5.12941 3.84071C5.19175 4.6767 5.55208 5.46254 6.14485 6.05531C6.73762 6.64808 7.52346 7.0084 8.35944 7.07074C9.19542 7.13308 10.026 6.8933 10.7001 6.39501Z" stroke="currentColor" fill="transparent" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    );
+}
+
+export default React.memo(IconDarkMode);

package/src/theme/Icon/LightMode/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+function IconLightMode(props) {
+    return (
+        <svg viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg" width={14} height={14} {...props}>
+            <g clipPath="url(#clip0_833_8168)">
+                <path
+                    d="M6.59998 8.49999C7.98069 8.49999 9.09998 7.3807 9.09998 5.99999C9.09998 4.61928 7.98069 3.49999 6.59998 3.49999C5.21926 3.49999 4.09998 4.61928 4.09998 5.99999C4.09998 7.3807 5.21926 8.49999 6.59998 8.49999Z"
+                    stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M6.59985 0.5V1.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M6.59985 10.5V11.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M2.7099 2.11L3.4199 2.82" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M9.77991 9.17999L10.4899 9.88999" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M1.09998 6H2.09998" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M11.0999 6H12.0999" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M2.7099 9.88999L3.4199 9.17999" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M9.77991 2.82L10.4899 2.11" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
+            </g>
+            <defs>
+                <clipPath id="clip0_833_8168">
+                    <rect width="12" height="12" fill="white" transform="translate(0.599976)"/>
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}
+
+export default React.memo(IconLightMode);

package/src/theme/Navbar/Content/index.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import { usePluginData } from '@docusaurus/useGlobalData';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {
+    splitNavbarItems,
+} from '@docusaurus/theme-common/internal';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarItem from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import NavbarSearch from '@theme/Navbar/Search';
+import SearchBar from '@theme/SearchBar';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import styles from './styles.module.css';
+
+function NavbarItems({ items }) {
+    return (
+        <>
+            {items.map((item, i) => (
+                <NavbarItem {...item} key={i}/>
+            ))}
+        </>
+    );
+}
+
+function NavbarContentLayout({
+    left,
+    right,
+}) {
+    return (
+        <div className="navbar__inner">
+            <div className="navbar__items">{left}</div>
+            <div className="navbar__items navbar__items--right">{right}</div>
+        </div>
+    );
+}
+
+function SubNavbar() {
+    const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
+    const pageTitle = useDocusaurusContext().siteConfig.title;
+    return (
+        subNavbar ? (
+            <div className="navbar__inner">
+                <div className="navbar__items">
+                    <NavbarItems items={[
+                        {
+                            label: pageTitle,
+                            to: '/',
+                        },
+                        ...subNavbar,
+                    ]}/>
+                </div>
+            </div>
+        ) : null
+    );
+}
+
+export default function NavbarContent() {
+    const { navbar: { items } } = useThemeConfig();
+    const [leftItems, rightItems] = splitNavbarItems(items);
+    const searchBarItem = items.find((item) => item.type === 'search');
+    return (
+        <div
+            style={{
+                width: '100%',
+                height: '100%',
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+            }}
+        >
+            <NavbarContentLayout
+                left={
+                    <>
+                        <NavbarMobileSidebarToggle/>
+                        <NavbarLogo/>
+                        <NavbarItems items={leftItems}/>
+                    </>
+                }
+                right={
+                    <>
+                        <NavbarColorModeToggle className={styles.colorModeToggle}/>
+                        <NavbarItems items={rightItems}/>
+                        {!searchBarItem && (
+                            <NavbarSearch>
+                                <SearchBar/>
+                            </NavbarSearch>
+                        )}
+                    </>
+                }
+            />
+            <SubNavbar/>
+        </div>
+    );
+}

package/src/theme/Navbar/Content/styles.module.css

@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}

package/src/theme/NavbarItem/ComponentTypes.jsx

@@ -0,0 +1,101 @@
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+import { useDocsVersion, useLayoutDoc } from '@docusaurus/theme-common/internal';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React from 'react';
+
+// const versions = require('../../../versions.json');
+//
+// const stable = versions[0];
+const stable = '1';
+
+function DocNavbarItem({
+    docId,
+    label: staticLabel,
+    docsPluginId,
+    ...props
+}) {
+    const doc = useLayoutDoc(docId, docsPluginId);
+    // Draft items are not displayed in the navbar.
+    if (doc === null) {
+        return null;
+    }
+    return (
+        <DefaultNavbarItem
+            exact
+            {...props}
+            label={staticLabel ?? doc.id}
+            to={doc.path}
+        />
+    );
+}
+
+function ApiNavbarItem(ctx) {
+    let version = {};
+
+    try {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        version = useDocsVersion();
+    } catch {
+        version.version = stable;
+    }
+
+    const { siteConfig } = useDocusaurusContext();
+
+    if (siteConfig.presets[0][1].docs.disableVersioning || version.version === stable) {
+        return (
+            <DefaultNavbarItem
+                exact
+                {...ctx}
+                label={ctx.label}
+                to={`api/${ctx.to}`}
+            />
+        );
+    }
+
+    // skip changelog button for older versions
+    if (+version.version < 3 && ctx.className === 'changelog') {
+        return null;
+    }
+
+    // link directly to the old API docs under /docs/x.x/api
+    if (+version.version < 3) {
+        return (
+            <DefaultNavbarItem
+                exact
+                {...ctx}
+                label={ctx.label}
+                to={`docs/${version.version === 'current' ? 'next' : version.version}/api/${ctx.to}`}
+            />
+        );
+    }
+
+    return (
+        <DefaultNavbarItem
+            exact
+            {...ctx}
+            label={ctx.label}
+            to={`api/${version.version === 'current' ? 'next' : version.version}/${ctx.to}`}
+        />
+    );
+}
+
+const ComponentTypes = {
+    'default': DefaultNavbarItem,
+    'localeDropdown': LocaleDropdownNavbarItem,
+    'search': SearchNavbarItem,
+    'dropdown': DropdownNavbarItem,
+    'html': HtmlNavbarItem,
+    'custom-api': ApiNavbarItem,
+    'doc': DocNavbarItem,
+    'docSidebar': DocSidebarNavbarItem,
+    'docsVersion': DocsVersionNavbarItem,
+    'docsVersionDropdown': DocsVersionDropdownNavbarItem,
+};
+export default ComponentTypes;

package/src/theme/NavbarItem/NavbarNavLink.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import { useLocation } from '@docusaurus/router';
+import { isRegexpStringMatch } from '@docusaurus/theme-common';
+
+export default function NavbarNavLink({
+    activeBasePath,
+    activeBaseRegex,
+    to,
+    href,
+    label,
+    html,
+    isDropdownLink,
+    prependBaseUrlToHref,
+    ...props
+}) {
+    const location = useLocation();
+    // TODO all this seems hacky
+    // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
+    const toUrl = useBaseUrl(to);
+    const activeBaseUrl = useBaseUrl(activeBasePath);
+    const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true });
+    // const isExternalLink = label && href && !isInternalUrl(href);
+    const isExternalLink = false;
+    // Link content is set through html XOR label
+    const linkContentProps = html
+        ? { dangerouslySetInnerHTML: { __html: html } }
+        : {
+            children: (
+                <>
+                    {label}
+                    {isExternalLink && (
+                        <IconExternalLink
+                            {...(isDropdownLink && { width: 12, height: 12 })}
+                        />
+                    )}
+                </>
+            ),
+        };
+    if (href) {
+        return (
+            <Link
+                href={prependBaseUrlToHref ? normalizedHref : href}
+                {...props}
+                {...(activeBaseUrl && {
+                    className: location.pathname.startsWith(`/${activeBasePath}`)
+                        ? 'navbar__item navbar__link navbar__link--active'
+                        : 'navbar__item navbar__link',
+                })}
+                {...linkContentProps}
+            />
+        );
+    }
+    return (
+        <Link
+            to={toUrl}
+            isNavLink
+            {...((activeBasePath || activeBaseRegex) && {
+                isActive: (_match, location) => (activeBaseRegex
+                    ? isRegexpStringMatch(activeBaseRegex, location.pathname)
+                    : location.pathname.startsWith(activeBaseUrl)),
+            })}
+            {...props}
+            {...linkContentProps}
+        />
+    );
+}

package/src/theme/NotFound.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { PageMetadata } from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import Layout from '@theme/Layout';
+
+export default function NotFound() {
+    const redirectedV2Url = useBaseUrl('/docs/api');
+    const redirectedV1Url = useBaseUrl('/docs/1.3.1/api');
+    const baseUrlForV2Redirect = useBaseUrl(`/docs/2.3/api/`);
+    const baseUrlForV1Redirect = useBaseUrl(`/docs/1.3/api/`);
+    const isBrowser = useIsBrowser();
+
+    if (isBrowser) {
+        const path = window.location.pathname;
+        let href = '';
+        let redirect = false;
+
+        if (path.startsWith(redirectedV2Url)) {
+            href = baseUrlForV2Redirect + path.substring(redirectedV2Url.length + 1);
+            redirect = true;
+        }
+
+        if (path.match(/\/docs\/2\.\d+\.\d+\/api/)) {
+            href = baseUrlForV2Redirect + path.substring(redirectedV1Url.length + 1);
+            redirect = true;
+        }
+
+        if (path.match(/\/api\/[12]\.\d+\/\w+/)) {
+            const [, v, id] = path.match(/\/api\/([12])\.\d+\/(.*)/);
+            href = (v === '1' ? baseUrlForV1Redirect : baseUrlForV2Redirect) + id;
+            redirect = true;
+        }
+
+        if (path.match(/\/docs\/[01]\.\d+\.\d+\/api\/(.*)/)) {
+            const id = path.match(/\/docs\/[01]\.\d+\.\d+\/api\/(.*)/)[1];
+            href = baseUrlForV1Redirect + id;
+            redirect = true;
+        }
+
+        if (redirect && window.location.href !== href) {
+            window.location.href = href;
+        }
+    }
+
+    return (
+        <>
+            <PageMetadata title={'Page Not Found'} />
+            <Layout>
+                <main className="container margin-vert--xl">
+                    <div className="row">
+                        <div className="col col--6 col--offset-3">
+                            <h1 className="hero__title">
+                                Page Not Found
+                            </h1>
+                            <p>
+                                We could not find what you were looking for 😢
+                            </p>
+                            <p>
+                                Recently we <b>released Apify SDK v3 </b>
+                                and we significantly upgraded the documentation.
+                            </p>
+                            <p>
+                                If you're looking for documentation of <b>Apify SDK v2</b>,
+                                <Link to={'/docs/2.3/guides/apify-platform'}> you can find it here</Link>.
+                            </p>
+                            <p>
+                                For <b>Apify SDK v3 docs</b>, go to the <Link to={'/'}>homepage</Link>.
+                            </p>
+                        </div>
+                    </div>
+                </main>
+            </Layout>
+        </>
+    );
+}

package/src/theme/custom.css

@@ -0,0 +1,378 @@
+@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&display=swap');
+
+html[data-theme='dark'] {
+    --ifm-navbar-background-color: #1a1b23;
+    --ifm-background-color: #1a1b23;
+    --ifm-background-surface-color: #242736;
+
+    --ifm-font-color-base: #f2f3fb;
+
+    --ifm-pre-background: #242736;
+
+    --ifm-color-primary: #5d9df1;
+    --ifm-link-color: #5d9df1;
+    --ifm-heading-color: #f2f3fb;
+    --ifm-navbar-link-color: #f2f3fb;
+
+    --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
+    --docsearch-text-color: #8d92af;
+}
+
+:root {
+    /* use default system font based on https://devhints.io/css-system-font-stack */
+    --ifm-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --ifm-heading-font-family: 'Lota Grotesque', sans-serif;
+    --ifm-font-weight-semibold: 600;
+    --ifm-font-color-base: #242736;
+
+    --ifm-navbar-item-padding-horizontal: 1.75rem;
+    --ifm-navbar-link-color: #41465d;
+    --ifm-navbar-shadow: none;
+
+    --ifm-heading-margin-top: var(--ifm-heading-margin-bottom);
+    --ifm-hero-background-color: transparent;
+
+    --ifm-code-background: var(--ifm-pre-background) !important;
+    --ifm-code-padding-horizontal: 0.4rem;
+    --ifm-code-padding-vertical: 0.2rem;
+
+    --ifm-color-primary-lightest: #5d9df1;
+    --ifm-color-primary-lighter: #3a87ee;
+    --ifm-color-primary-light: #2e80ed;
+    --ifm-color-primary: #1672eb;
+    --ifm-color-primary-dark: #1266d5;
+    --ifm-color-primary-darker: #1161c9;
+    --ifm-color-primary-darkest: #0e50a6;
+
+    --ifm-link-color: hsl(214, 84%, 50%);
+    --ifm-link-hover-color: hsl(214, 84%, 65%);
+    --ifm-link-hover-decoration: none;
+
+    --ifm-footer-background-color: #272c3d;
+    --ifm-footer-title-color: #f2f3fb;
+    --ifm-footer-link-color: #f2f3fb;
+    --max-layout-width: 1680px;
+
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+    --ifm-heading-color: #242736;
+}
+
+@font-face {
+    font-family: 'Lota Grotesque';
+    src: url('/font/lota.woff2') format('woff2'),
+    url('/font/lota.woff') format('woff');
+    font-weight: 600;
+}
+
+.footer__title {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.footer__bottom a {
+    opacity: 0.75;
+}
+
+.footer__copyright {
+    color: var(--ifm-footer-title-color);
+}
+
+.navbar__title {
+    /* Replaced by SVG */
+    display: none;
+}
+
+.navbar__inner {
+    /* .container */
+    max-width: calc(var(--max-layout-width) - 32px);
+    padding: 0 var(--ifm-spacing-horizontal);
+    width: 100%;
+}
+
+.navbar__item.dropdown {
+    padding: 0;
+}
+
+.DocSearch-Button-Placeholder {
+    font-size: 14px !important;
+}
+
+html .DocSearch-Button {
+    border-radius: 6px !important;
+    font-weight: 400 !important;
+    background: #f9fafd;
+    border: 1px solid #c1c6dd;
+
+    /* Annoying, but needed */
+    /* https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically/26140154 */
+    font-family: inherit;
+}
+
+html .DocSearch-Button .DocSearch-Search-Icon {
+    color: var(--docsearch-muted-color);
+}
+
+html[data-theme="dark"] .DocSearch-Button {
+    background: none;
+    border: 1px solid var(--docsearch-muted-color);
+}
+
+html[data-theme="dark"] .DocSearch-Button .DocSearch-Search-Icon {
+    color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button:hover {
+    box-shadow: none !important;
+}
+
+.navbar, .main-wrapper {
+    justify-content: center;
+}
+
+html.plugin-pages .main-wrapper {
+    overflow-x: hidden;
+}
+
+.main-wrapper > div {
+    max-width: var(--max-layout-width);
+}
+
+aside > div > a {
+    padding-left: 16px;
+}
+
+aside > div > a > b {
+    display: none;
+}
+
+.dropdown > .navbar__link::after {
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 0.1em 0.1em 0 0;
+    content: '';
+    display: inline-block;
+    height: 0.4em;
+    left: 0.3em;
+    position: relative;
+    vertical-align: top;
+    width: 0.4em;
+    top: 9px;
+    transform: rotate(135deg);
+}
+
+.navbar .icon {
+    font-size: 0;
+    padding: 4px;
+    margin-left: 20px;
+    line-height: 0;
+}
+
+.navbar .icon::before {
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+    background-size: cover;
+}
+
+.navbar .icon[href*=github]::before {
+    background-image: url('/static/img/github-brand.svg');
+}
+
+html[data-theme="dark"] .navbar .navbar__link[href*=github]:before {
+    background-image: url('/static/img/github-brand-dark.svg');
+}
+
+.navbar .icon[href*=discord]::before {
+    background-image: url('/static/img/discord-brand.svg');
+}
+
+html[data-theme="dark"] .navbar .navbar__link[href*=discord]:before {
+    background-image: url('/static/img/discord-brand-dark.svg');
+}
+
+.navbar svg[class*=iconExternalLink],
+aside svg[class*=iconExternalLink] {
+    display: none;
+}
+
+header.hero div[class^=heroButtons] {
+    justify-content: inherit;
+}
+
+article .card h2 {
+    margin-top: 0;
+}
+
+.tsd-kind-icon,
+.menu__link,
+.table-of-contents__link {
+    text-overflow: ellipsis;
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.menu__caret:before,
+.menu__link--sublist:after {
+    float: right;
+}
+
+.table-of-contents__link {
+    height: 20px;
+}
+
+nav.navbar .dropdown__menu {
+    min-width: 6rem;
+}
+
+.navbar__logo {
+    width: 11rem;
+    height: 3rem;
+    padding: 10px 0;
+}
+
+.navbar__link.subnav {
+    font-size: 0.8em;
+    padding: 5px;
+}
+
+.main-wrapper a[class*='sidebarLogo'] img {
+    height: 3rem;
+}
+
+html.plugin-pages h2 {
+    font-size: 36px;
+    line-height: 48px;
+}
+
+html.plugin-docs .theme-doc-markdown {
+    font-size: 18px;
+    line-height: 32px;
+}
+
+html.plugin-docs .theme-doc-markdown h1 {
+    font-weight: 600;
+    font-size: 48px;
+    line-height: 64px;
+    color: #000;
+}
+
+html[data-theme='dark'].plugin-docs .theme-doc-markdown h1 {
+    color: #fff;
+}
+
+html.plugin-typedoc-api .theme-doc-markdown h1 {
+    color: #000;
+}
+
+html[data-theme='dark'].plugin-typedoc-api .theme-doc-markdown h1 {
+    color: #fff;
+}
+
+html.plugin-docs .theme-doc-markdown h2 {
+    font-size: 36px;
+    line-height: 48px;
+}
+
+html.plugin-docs .theme-doc-markdown h3 {
+    font-size: 28px;
+    line-height: 36px;
+    /*color: #242736;*/
+}
+
+.theme-doc-toc-desktop .table-of-contents {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.theme-doc-sidebar-menu .menu__link,
+.theme-doc-toc-desktop .table-of-contents .toc-highlight {
+    height: auto;
+    color: #6f7490;
+    background: none;
+}
+
+.theme-doc-sidebar-menu .menu__link:hover {
+    background: inherit;
+}
+
+.theme-doc-sidebar-menu .menu__link {
+    font-weight: 400;
+}
+
+.theme-doc-sidebar-menu .menu__link--active {
+    font-weight: 700;
+}
+
+.theme-doc-sidebar-menu .menu__list-item-collapsible,
+.theme-doc-sidebar-menu .menu__list-item-collapsible--active {
+    background: none;
+}
+
+.theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
+    font-weight: 700;
+}
+
+html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link,
+html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .toc-highlight {
+    color: #b3b8d2;
+}
+
+html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link--active,
+html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
+    color: #f2f3fb;
+}
+
+.theme-doc-sidebar-menu .menu__link:hover,
+.theme-doc-sidebar-menu .menu__link--active,
+.theme-doc-toc-desktop .table-of-contents .table-of-contents__link:hover,
+.theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
+    color: #242736;
+}
+
+.hero {
+    position: relative;
+}
+
+.apiItemContainer .tsd-readme h1:first-child {
+    display: none;
+}
+
+@media (min-width: 997px) and (max-width: 1250px) {
+    .navbar__items--right a.icon {
+        display: none;
+    }
+}
+
+@media (min-width: 997px) and (max-width: 1130px) {
+    .navbar__link.changelog {
+        display: none;
+    }
+}
+
+@media (min-width: 997px) and (max-width: 1439px) {
+    footer .col--offset-9 {
+        --ifm-col-width: calc(4 / 12 * 100%);
+        margin-left: calc(8 / 12 * 100%);
+    }
+}
+
+html .theme-doc-sidebar-container {
+    border: 0;
+}
+
+html .theme-doc-sidebar-container button {
+    border: 0;
+    border-radius: 10px;
+}
+
+html .table-of-contents {
+    border-left: 0;
+}
+
+html .table-of-contents ul {
+    border-left: 2px solid #dfe2f5;
+}