Merge branch 'master' into feat/lychee-link-checker

.eslintrc.json

@@ -12,19 +12,59 @@
         },
         "ecmaVersion": 2022
     },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "root": true,
     "env": {
-        "browser": true
+        "browser": true,
+        "es2020": true,
+        "node": true
     },
     "settings": {
         "react": {
             "version": "detect"
         }
     },
-    "root": true,
     "rules": {
         "quote-props": ["error", "consistent"],
         "react/prop-types": ["off"],
         "import/extensions": ["off"],
         "no-void": ["off"]
-    }
+    },
+    "overrides": [
+        {
+            "files": [
+                "CONTRIBUTING.md",
+                "README.md",
+                "./sources/**/*.{js,json,ts,md}"
+            ],
+            "parserOptions": {
+                "files": ["*.js", "*.jsx", "*.ts", "*.tsx", "*.md", "*.mdx"],
+                "project": null,
+                "ecmaFeatures": {
+                    "jsx": true
+                },
+                "ecmaVersion": 2022
+            },
+            "extends":[
+                "@apify/eslint-config-ts",
+                "plugin:markdown/recommended",
+                "plugin:json/recommended-with-comments"
+            ],
+            "rules": {
+                // general things that are fine to have in code snippets
+                "import/no-extraneous-dependencies": "off",
+                "import/order": "off",
+                "no-console": "off",
+                "no-underscore-dangle": "off",
+                "@typescript-eslint/no-unused-vars": "off",
+                // not possible to use those for markdown code snippets
+                "@typescript-eslint/no-floating-promises": "off",
+                "@typescript-eslint/await-thenable": "off",
+                "@typescript-eslint/no-misused-promises": "off",
+                "@typescript-eslint/promise-function-async": "off"
+            }
+        }
+    ]
 }

.github/workflows/publish-theme.yaml

@@ -44,9 +44,11 @@ jobs:
                     node-version: 18
                     cache: 'npm'
                     cache-dependency-path: 'package-lock.json'
+                    always-auth: 'true'
                     registry-url: 'https://npm.pkg.github.com/'
                     scope: '@apify-packages'
-
+                env:
+                    NODE_AUTH_TOKEN: ${{ secrets.APIFY_SERVICE_ACCOUNT_NPM_TOKEN }}
 
             -   name: Setup git user and npm
                 run: |

.github/workflows/test.yaml

@@ -39,7 +39,7 @@ jobs:
 
             - name: Get changed files
               id: changed-files
-              uses: tj-actions/[email protected].2
+              uses: tj-actions/[email protected].4
               with:
                 files: |
                     **/*.md

.github/workflows/vale.yaml

@@ -13,7 +13,7 @@ jobs:
 
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/[email protected].2
+        uses: tj-actions/[email protected].4
         with:
           files: |
             **/*.{md,mdx}

CONTRIBUTING.md

@@ -11,13 +11,13 @@ Apify documentation consists of six different repositories:
 - apify-cli
 - apify-docs (this repository)
 
-The main documentation content for Platform docs and Academy is inside the `./sources` directory. Every project repository then has its own Docusaurus instance and is available on a URL prefix (used as the `baseUrl` in Docusaurus) that's  routed via nginx reverse proxy to the main domain. All those Docusaurus instances are deployed to GH pages on push.
+The main documentation content for Platform docs and Academy is inside the `./sources` directory. Every project repository then has its own Docusaurus instance and is available on a URL prefix (used as the `baseUrl` in Docusaurus) that's routed via nginx reverse proxy to the main domain. All those Docusaurus instances are deployed to GH pages on push.
 
 We use a shared Docusaurus theme published to NPM as `@apify/docs-theme`, which is automatically synced in all the repositories via CI.
 
 ### Shared theme
 
-The `@apify/docs-theme` is a Docusaurus theme package with custom components and styles to be used in all the Apify Docuaurus instances.
+The `@apify/docs-theme` is a Docusaurus theme package with custom components and styles to be used in all the Apify Docusaurus instances.
 Aside from the regular Docusaurus theme interface, it also exports the common parts of the Docusaurus config, such as the navbar contents, URL, `og:image`, etc.
 
 The theme is available on npm as `@apify/docs-theme` and can be installed in any Docusaurus instance by running `npm install @apify/docs-theme`.
@@ -40,8 +40,9 @@ The `./sources/platform/api_v2` directory contains the source file for the API r
 #### Local testing
 
 1. Install Apiary gem `gem install apiaryio`
-2. After that, you can open the generated doc with the
-   command: `apiary preview --path="./sources/platform/api_v2/api_v2_reference.apib"`
+2. After that, you can:
+    - Open the generated doc with the command: `apiary preview --path="./sources/platform/api_v2/api_v2_reference.apib"`
+    - Log into [Apiary](https://apiary.io/) to get the document analyzed for warnings (there is no automatic linter)
 
 #### Pre-release testing
 

apify-docs-theme/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.102",
+    "version": "1.0.104",
     "description": "",
     "main": "./src/index.js",
     "files": [
@@ -29,6 +29,7 @@
         "prism-react-renderer": "^2.0.6"
     },
     "peerDependencies": {
+        "clsx": "*",
         "react": "*",
         "react-dom": "*"
     }

apify-docs-theme/src/roa-loader/index.js

@@ -1,6 +1,7 @@
-const { urlToRequest } = require('loader-utils');
 const { inspect } = require('util');
 
+const { urlToRequest } = require('loader-utils');
+
 const signingUrl = new URL('https://api.apify.com/v2/tools/encode-and-sign');
 signingUrl.searchParams.set('token', process.env.APIFY_SIGNING_TOKEN);
 const queue = [];

apify-docs-theme/src/theme.js

@@ -1,7 +1,9 @@
-const postcssPreset = require('postcss-preset-env');
-const path = require('path');
 const fs = require('fs');
+const path = require('path');
+
 const axios = require('axios');
+const postcssPreset = require('postcss-preset-env');
+
 const { updateChangelog } = require('./markdown');
 
 function findPathInParent(endPath) {

apify-docs-theme/src/theme/DocBreadcrumbs/Items/Home/index.js

@@ -1,9 +1,10 @@
-import React from 'react';
 import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import { useLocation } from '@docusaurus/router';
 import { translate } from '@docusaurus/Translate';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import IconHome from '@theme/Icon/Home';
+import React from 'react';
+
 import styles from './styles.module.css';
 
 export default function HomeBreadcrumbItem() {

apify-docs-theme/src/theme/DocBreadcrumbs/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import clsx from 'clsx';
+import Link from '@docusaurus/Link';
 import { ThemeClassNames } from '@docusaurus/theme-common';
 import {
     useSidebarBreadcrumbs,
     useHomePageRoute,
 } from '@docusaurus/theme-common/internal';
-import Link from '@docusaurus/Link';
 import { translate } from '@docusaurus/Translate';
 import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
+import clsx from 'clsx';
+import React from 'react';
+
 import styles from './styles.module.css';
 
 // TODO move to design system folder

apify-docs-theme/src/theme/Footer/LinkItem/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import isInternalUrl_ from '@docusaurus/isInternalUrl';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import isInternalUrl_ from '@docusaurus/isInternalUrl';
-import IconExternalLink from '@theme/Icon/ExternalLink';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+import React from 'react';
 
 export default function FooterLinkItem({ item }) {
     const {

apify-docs-theme/src/theme/Footer/index.module.css

@@ -58,4 +58,4 @@ html[data-theme='dark'] .footerLogo {
     background-image: url('/img/footer-apify-logo-white.svg');
 }
 
-/** dummy comment just to trigger theme publishing 2 */
+/** dummy comment just to trigger theme publishing 3 */

apify-docs-theme/src/theme/Logo/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
 import Link from '@docusaurus/Link';
+import { useThemeConfig } from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { useThemeConfig } from '@docusaurus/theme-common';
 import ThemedImage from '@theme/ThemedImage';
+import React from 'react';
 
 function LogoThemedImage({ logo, alt, imageClassName }) {
     const sources = {

apify-docs-theme/src/theme/MDXComponents/Code.js

@@ -1,5 +1,5 @@
-import React, { isValidElement } from 'react';
 import CodeBlock from '@theme/CodeBlock';
+import React, { isValidElement } from 'react';
 
 export default function MDXCode(props) {
     const inlineElements = [

apify-docs-theme/src/theme/MDXComponents/Details.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import Details from '@theme/Details';
+import React from 'react';
 
 export default function MDXDetails(props) {
     const items = React.Children.toArray(props.children);

apify-docs-theme/src/theme/MDXComponents/Head.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import Head from '@docusaurus/Head';
+import React from 'react';
 // MDX elements are wrapped through the MDX pragma. In some cases (notably usage
 // with Head/Helmet) we need to unwrap those elements.
 function unwrapMDXElement(element) {

apify-docs-theme/src/theme/MDXComponents/Heading.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import Heading from '@theme/Heading';
+import React from 'react';
 
 export default function MDXHeading(props) {
     return <Heading {...props} />;

apify-docs-theme/src/theme/MDXComponents/Img/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import clsx from 'clsx';
+import React from 'react';
+
 import styles from './styles.module.css';
 
 function transformImgClassName(className) {

apify-docs-theme/src/theme/MDXComponents/Pre.js

@@ -1,5 +1,5 @@
-import React, { isValidElement } from 'react';
 import CodeBlock from '@theme/CodeBlock';
+import React, { isValidElement } from 'react';
 
 export default function MDXPre(props) {
     return (

apify-docs-theme/src/theme/MDXComponents/Ul/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import clsx from 'clsx';
+import React from 'react';
+
 import styles from './styles.module.css';
 
 function transformUlClassName(className) {

apify-docs-theme/src/theme/MDXComponents/index.js

@@ -1,14 +1,15 @@
-import React from 'react';
-import MDXHead from '@theme/MDXComponents/Head';
-import MDXCode from '@theme/MDXComponents/Code';
+import Admonition from '@theme/Admonition';
 import MDXA from '@theme/MDXComponents/A';
-import MDXPre from '@theme/MDXComponents/Pre';
+import MDXCode from '@theme/MDXComponents/Code';
 import MDXDetails from '@theme/MDXComponents/Details';
+import MDXHead from '@theme/MDXComponents/Head';
 import MDXHeading from '@theme/MDXComponents/Heading';
-import MDXUl from '@theme/MDXComponents/Ul';
 import MDXImg from '@theme/MDXComponents/Img';
-import Admonition from '@theme/Admonition';
+import MDXPre from '@theme/MDXComponents/Pre';
+import MDXUl from '@theme/MDXComponents/Ul';
 import Mermaid from '@theme/Mermaid';
+import React from 'react';
+
 import RunnableCodeBlock from '../RunnableCodeBlock/RunnableCodeBlock';
 
 const MDXComponents = {

apify-docs-theme/src/theme/SearchBar/index.js

@@ -1,11 +1,9 @@
-import React, { useCallback } from 'react';
-
 import { ApifySearch } from '@apify/docs-search-modal';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { useLocation, useHistory } from '@docusaurus/router';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-
 import RouterLink from '@docusaurus/Link';
+import { useLocation, useHistory } from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React, { useCallback } from 'react';
 
 /**
  * Tests whether the given href is pointing to the current docusaurus instance (so we can use the router link).

apify-docs-theme/src/theme/SearchMetadata/index.js

@@ -1,7 +1,7 @@
-import React from 'react';
 import Head from '@docusaurus/Head';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { useThemeConfig } from '@docusaurus/theme-common';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React from 'react';
 
 export default function SearchMetadata({ locale, version, tag }) {
     const { siteConfig } = useDocusaurusContext();

apify-docs-theme/src/theme/custom.css

@@ -18,6 +18,10 @@ html[data-theme='dark'] {
     --ifm-navbar-height: 68px;
     --ifm-line-height-base: 1.65;
 
+    --ifm-code-background: var(--ifm-pre-background) !important;
+    --ifm-footer-title-color: #f2f3fb;
+    --ifm-footer-link-color: #8d92af;
+
     --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
     --docsearch-text-color: #8d92af;
 
@@ -136,7 +140,6 @@ html[data-theme='dark'] {
     --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: 6.4px;
     --ifm-code-padding-vertical: 3.2px;
 
@@ -155,10 +158,12 @@ html[data-theme='dark'] {
     --ifm-link-hover-decoration: none;
 
     --ifm-footer-background-color: #272c3d;
-    --ifm-footer-title-color: #f2f3fb;
-    --ifm-footer-link-color: #8d92af;
+    --ifm-footer-title-color: #60626e;
+    --ifm-footer-link-color: #6b6e80;
     --max-layout-width: 1440px;
 
+    --ifm-code-background: #f6f8fa;
+
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
     --ifm-heading-color: #242736;
@@ -574,6 +579,10 @@ header.hero div[class^=heroButtons] {
     padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
 }
 
+html[data-theme='dark'] .markdown code {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
 article .card h2 {
     margin-top: 0;
 }

docusaurus.config.js

@@ -1,7 +1,8 @@
 const { join } = require('path');
+
 const { config } = require('./apify-docs-theme');
-const { externalLinkProcessor } = require('./tools/utils/externalLink');
 const { collectSlugs } = require('./tools/utils/collectSlugs');
+const { externalLinkProcessor } = require('./tools/utils/externalLink');
 
 /** @type {Partial<import('@docusaurus/types').DocusaurusConfig>} */
 module.exports = {