@apify/docs-theme 1.0.2 → 1.0.4

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@apify/docs-theme",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
-  "main": "./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": "",
   "license": "ISC",
   "dependencies": {
-    "@docusaurus/theme-common": "^2.2.0"
+    "@docusaurus/theme-common": "^2.2.0",
+    "babel-loader": "^9.1.0"
   }
 }

package/src/index.js

@@ -0,0 +1,41 @@
+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: /(@apify\/|apify-)docs-theme\/src\/theme\/.*?\.jsx?$/,
+                            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/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/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/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>
+        </>
+    );
+}