Merge branch 'master' into development-web-ide

.eslintrc.json

@@ -66,5 +66,6 @@
                 "@typescript-eslint/promise-function-async": "off"
             }
         }
-    ]
+    ],
+    "ignorePatterns": ["examples/"]
 }

.github/CODEOWNERS

@@ -1,4 +1,6 @@
-# Documentation codeowner
-
+# Documentation
 *.md @TC-MO
 *.mdx @TC-MO
+
+# Academy
+/sources/academy/ @honzajavorek

.github/workflows/check-pr-title.yaml

@@ -9,6 +9,6 @@ jobs:
         name: 'Check PR title'
         runs-on: ubuntu-latest
         steps:
-            -   uses: amannn/action-semantic-pull-request@v5.4.0
+            -   uses: amannn/action-semantic-pull-request@v5.5.2
                 env:
                     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lychee.yml

@@ -27,7 +27,7 @@ jobs:
             NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
             SMARTLOOK_PROJECT_KEY: ${{ secrets.SMARTLOOK_PROJECT_KEY }}
 
-      - uses: lycheeverse/lychee-action@v1.9.3
+      - uses: lycheeverse/lychee-action@v1.10.0
         env:
           GITHUB_TOKEN: ${{ secrets.APIFY_SERVICE_ACCOUNT_GITHUB_TOKEN }}
         with:

.github/workflows/test.yaml

@@ -41,7 +41,7 @@ jobs:
 
             - name: Get changed files
               id: changed-files
-              uses: tj-actions/changed-files@v44.0.1
+              uses: tj-actions/changed-files@v44.4.0
               with:
                 files: |
                     **/*.md

.github/workflows/vale.yaml

@@ -13,7 +13,7 @@ jobs:
 
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@v44.0.1
+        uses: tj-actions/changed-files@v44.4.0
         with:
           files: |
             **/*.{md,mdx}

CONTRIBUTING.md

@@ -79,13 +79,26 @@ For example:
 
 Over time, we should track which items are useful and which don't get any traffic. Also, as Apify Docs expand, we may need to add more cards and update which articles we link to.
 
-## Local setup
+## Installation and setup
 
-If you want to work only on the main documentation content, cloning this repository is enough. Once you run `npm install` to install all dependencies and run `npm start`, the main portal will open on <http://localhost:3000>. All the links in the navbar and footer need to be absolute, and they will use a different hostname, configured to `docs.apify.loc` - to use that, follow the steps below and set up the Nginx server.
+1. Use Git to clone this repository.
+2. To install packages prefixed with `@apify-packages`, first go to GitHub and navigate to [Settings / Personal access tokens / Tokens (classic)](https://github.com/settings/tokens). Despite the UI suggesting you should use the new fine-grained tokens, generate a **classic token** with scopes **repo** and **write:packages**. Keep the token somewhere safe. Then run the following command and use your GitHub username together with the token as credentials:
 
-Alternatively, you can skip the Nginx part and navigate to <http://localhost:3000/academy> or <http://localhost:3000/platform> manually instead of using links in the navbar. All relative links should work fine there. The problem with absolute links is only with shared components. The Nginx server is needed only for testing the whole setup and mapping all the different ports to a single one.
+   ```bash
+   npm login --scope=@apify-packages --registry=https://npm.pkg.github.com --auth-type=legacy
+   ```
 
-Clone all the repositories, and start the Docusaurus instances in them.
+   Read [#909](https://github.com/apify/apify-docs/issues/909) if you want to understand why this is needed.
+3. Run `npm install`.
+4. Run `npm start`. The website should open at <http://localhost:3000>.
+
+This is sufficient to work on the main content, i.e. the Academy and Platform docs. If you want to also work on the other parts of the docs, you may want to first join them all together using Nginx.
+
+### Join all the docs repos together using Nginx
+
+By default, the parts of the docs sourced from other repositories will give you 404s. If you need to locally run the project with all the other repositories included, clone them all and setup an Nginx server according to the steps below.
+
+For the setup to work, use `npm start:dev` instead of `npm start` when starting `apify-docs`. This causes all links in the top navigation and the footer to be absolute. They will now use `docs.apify.loc` as a hostname. Clone all the remaining docs repositories, and start their Docusaurus instances. To run Docusaurus on a specific port, use `npm start -- --port XXXX`.
 
 | repo                | port |
 |---------------------|------|
@@ -96,9 +109,7 @@ Clone all the repositories, and start the Docusaurus instances in them.
 | apify-sdk-python    | 3004 |
 | apify-cli           | 3005 |
 
-> To run Docusaurus on a specific port, use `npm start -- --port XXXX`.
-
-To route them, you will need an Nginx server with the following config:
+To serve them together as a single website, setup an Nginx server with the following config:
 
 ```nginx
 server {
@@ -125,12 +136,14 @@ server {
 }
 ```
 
-And add a record to `/etc/hosts` to map the `docs.apify.loc` hostname to localhost:
+Add a record to `/etc/hosts`, which maps the `docs.apify.loc` hostname to a localhost:
 
 ```text
 127.0.0.1 docs.apify.loc
 ```
 
+Now you should be able to open <http://docs.apify.loc> in your browser and see all the documentation projects joined together, with the top navigation allowing you to browse not only Academy or Platform docs, but also CLI, SDK, and all the other docs.
+
 ## Linting
 
 ### Markdown and code

README.md

@@ -4,7 +4,7 @@
 
 ## Intro
 
-This repository is the home of Apify's documentation, which you can find at [docs.apify.com](https://docs.apify.com/). The documentation is written using [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). Source files of the [platform documentation](https://docs.apify.com/platform) are located in the [/sources](https://github.com/apify/apify-docs/tree/master/sources) directory. However, other sections, such as SDKs for [Javascript/Node.js](https://docs.apify.com/sdk/js/), [Python](https://docs.apify.com/sdk/python/), or [CLI](https://docs.apify.com/cli), have their own repositories. For more information, see the [Contributing guidelines](./CONTRIBUTING.md).
+This repository is the home of Apify's documentation, which you can find at [docs.apify.com](https://docs.apify.com/). The documentation is written using [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). Source files of the [platform documentation](https://docs.apify.com/platform) are located in the [/sources](https://github.com/apify/apify-docs/tree/master/sources) directory. However, other sections, such as SDKs for [JavaScript/Node.js](https://docs.apify.com/sdk/js/), [Python](https://docs.apify.com/sdk/python/), or [CLI](https://docs.apify.com/cli), have their own repositories. For more information, see the [Contributing guidelines](./CONTRIBUTING.md).
 
 ## Before you start contributing
 

apify-docs-theme/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.114",
+    "version": "1.0.117",
     "description": "",
     "main": "./src/index.js",
     "files": [

apify-docs-theme/src/config.js

@@ -43,6 +43,9 @@ const themeConfig = ({
             {
                 label: 'API',
                 type: 'dropdown',
+                to: `${absoluteUrl}/api`,
+                target: '_self',
+                rel: 'dofollow',
                 activeBasePath: 'api',
                 position: 'left',
                 items: [
@@ -69,8 +72,11 @@ const themeConfig = ({
             {
                 label: 'SDK',
                 type: 'dropdown',
+                to: `${absoluteUrl}/sdk`,
                 activeBasePath: 'sdk',
                 position: 'left',
+                target: '_self',
+                rel: 'dofollow',
                 items: [
                     {
                         label: 'SDK for JavaScript',
@@ -90,6 +96,7 @@ const themeConfig = ({
                 label: 'CLI',
                 href: `${absoluteUrl}/cli/`, // we need a trailing slash here, we'd get redirected there anyway
                 position: 'left',
+                activeBasePath: 'cli',
                 target: '_self',
                 rel: 'dofollow',
             },

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

@@ -1,22 +1,23 @@
-import React from 'react';
+import { useLocation } from '@docusaurus/router';
 import { useThemeConfig, isRegexpStringMatch } from '@docusaurus/theme-common';
-import { usePluginData } from '@docusaurus/useGlobalData';
 import {
     splitNavbarItems,
 } from '@docusaurus/theme-common/internal';
-import NavbarLogo from '@theme/Navbar/Logo';
-import NavbarItem from '@theme/NavbarItem';
+import { usePluginData } from '@docusaurus/useGlobalData';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
-import NavbarSearch from '@theme/Navbar/Search';
+import NavbarLogo from '@theme/Navbar/Logo';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
-import { useLocation } from '@docusaurus/router';
-import SearchBar from '../../SearchBar';
+import NavbarSearch from '@theme/Navbar/Search';
+import NavbarItem from '@theme/NavbarItem';
+import React from 'react';
+
 import styles from './styles.module.css';
+import SearchBar from '../../SearchBar';
 
 function NavbarItems({ items }) {
     return (
         <>
-            {items.map((item, i) => <NavbarItem {...item} key={i}/>)}
+            {items.map((item, i) => <NavbarItem {...item} key={i} />)}
         </>
     );
 }
@@ -35,6 +36,14 @@ function NavbarContentLayout({
     );
 }
 
+function SubNavbarTitle({ titleIcon, title }) {
+    return titleIcon
+        ? <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+            <img src={`img/${titleIcon}`} width={24} height={24} /> {title}
+        </div>
+        : title;
+}
+
 function SubNavbar() {
     const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
     const location = useLocation();
@@ -45,9 +54,13 @@ function SubNavbar() {
                 <div className="navbar__container">
                     <div className="navbar__items">
                         <div className="navbar__sub--title">
-                            <NavbarItem label={subNavbar.title} to={subNavbar.to ?? '/'} activeBaseRegex='(?!)' />
+                            <NavbarItem
+                                label={<SubNavbarTitle title={subNavbar.title} titleIcon={subNavbar.titleIcon} />}
+                                to={subNavbar.to ?? '/'}
+                                activeBaseRegex='(?!)'
+                            />
                         </div>
-                        <NavbarItems items={subNavbar.items}/>
+                        <NavbarItems items={subNavbar.items} />
                     </div>
                 </div>
             </div>
@@ -72,24 +85,24 @@ export default function NavbarContent() {
             <NavbarContentLayout
                 left={
                     <>
-                        <NavbarMobileSidebarToggle/>
-                        <NavbarLogo/>
-                        <NavbarItems items={leftItems}/>
+                        <NavbarMobileSidebarToggle />
+                        <NavbarLogo />
+                        <NavbarItems items={leftItems} />
                     </>
                 }
                 right={
                     <>
-                        <NavbarColorModeToggle className={styles.colorModeToggle}/>
-                        <NavbarItems items={rightItems}/>
+                        <NavbarColorModeToggle className={styles.colorModeToggle} />
+                        <NavbarItems items={rightItems} />
                         {!searchBarItem && (
                             <NavbarSearch>
-                                <SearchBar/>
+                                <SearchBar />
                             </NavbarSearch>
                         )}
                     </>
                 }
             />
-            <SubNavbar/>
+            <SubNavbar />
         </div>
     );
 }

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

@@ -1,12 +1,12 @@
-import React from 'react';
-import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl_ from '@docusaurus/isInternalUrl';
-import IconExternalLink from '@theme/Icon/ExternalLink';
+import Link from '@docusaurus/Link';
 import { useLocation } from '@docusaurus/router';
 import { isRegexpStringMatch, useThemeConfig } from '@docusaurus/theme-common';
-import { usePluginData } from '@docusaurus/useGlobalData';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { usePluginData } from '@docusaurus/useGlobalData';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+import React from 'react';
 
 export default function NavbarNavLink({
     activeBasePath,
@@ -83,7 +83,8 @@ export default function NavbarNavLink({
                 // eslint-disable-next-line no-shadow
                 isActive: (_match, location) => (activeBaseRegex
                     ? isRegexpStringMatch(activeBaseRegex, location.pathname) || dropDownHasActiveItem
-                    : location.pathname.startsWith(activeBaseUrl)),
+                    : location.pathname.startsWith(`/${activeBasePath}`)),
+                activeClassName: 'navbar__link--active',
             })}
             {...props}
             {...linkContentProps}

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
     presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+    plugins: ['babel-plugin-styled-components'],
 };

docusaurus.config.js

@@ -93,13 +93,28 @@ module.exports = {
                 sidebarPath: require.resolve('./sources/academy/sidebars.js'),
             },
         ],
+        [
+            '@docusaurus/plugin-content-docs',
+            {
+                id: 'legal',
+                path: './sources/legal',
+                routeBasePath: 'legal',
+                rehypePlugins: [externalLinkProcessor],
+                // Docusaurus shows the author and date of last commit to entire repo, which doesn't make sense,
+                // so let's just disable showing author and last modification
+                showLastUpdateAuthor: false,
+                showLastUpdateTime: false,
+                breadcrumbs: false,
+                sidebarPath: require.resolve('./sources/legal/sidebars.js'),
+            },
+        ],
         () => ({
             configureWebpack() {
                 return {
                     module: {
                         rules: [
                             {
-                                test: /@apify-packages\/ui-components\/.*/,
+                                test: /@apify-packages\/ui-library\/.*/,
                                 resolve: {
                                     fullySpecified: false,
                                 },
@@ -130,4 +145,10 @@ module.exports = {
     },
     themeConfig: config.themeConfig,
     staticDirectories: ['apify-docs-theme/static', 'static'],
+    customFields: {
+        forbiddenGiscusDocRegExpStrings: [
+            '^/legal',
+            '^/legal/*',
+        ],
+    },
 };