From 7981e272116bebd73f9086fba15ceb5b6625a330 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jind=C5=99ich=20B=C3=A4r?= Date: Tue, 23 Jun 2026 11:58:29 +0200 Subject: [PATCH 1/5] feat: revamp docs navbar --- apify-docs-theme/src/config.js | 167 ++++++++---------- .../src/theme/Navbar/CTA/index.jsx | 2 +- .../src/theme/Navbar/Content/index.jsx | 30 +++- .../src/theme/SearchBar/styles.css | 13 +- 4 files changed, 108 insertions(+), 104 deletions(-) diff --git a/apify-docs-theme/src/config.js b/apify-docs-theme/src/config.js index a039615cf7..c120a62e1d 100644 --- a/apify-docs-theme/src/config.js +++ b/apify-docs-theme/src/config.js @@ -20,33 +20,78 @@ const themeConfig = { }, items: [ { - label: 'Academy', - href: `${absoluteUrl}/academy`, - activeBasePath: 'academy', + label: 'Actors', + href: `${absoluteUrl}/platform/actors`, + className: 'navbar__active', + activeBasePath: 'platform/actors', + position: 'left', + target: '_self', + rel: 'dofollow', + }, + { + label: 'Storage', + href: `${absoluteUrl}/platform/storage`, + className: 'navbar__active', + activeBasePath: 'platform/storage', + position: 'left', + target: '_self', + rel: 'dofollow', + }, + { + label: 'Proxy', + href: `${absoluteUrl}/platform/proxy`, + className: 'navbar__active', + activeBasePath: 'platform/proxy', + position: 'left', + target: '_self', + rel: 'dofollow', + }, + { + label: 'Integrations', + href: `${absoluteUrl}/platform/integrations`, + className: 'navbar__active', + activeBasePath: 'platform/integrations', + position: 'left', + target: '_self', + rel: 'dofollow', + }, + { + label: 'Limits', + href: `${absoluteUrl}/platform/limits`, + className: 'navbar__active', + activeBasePath: 'platform/limits', position: 'left', target: '_self', rel: 'dofollow', }, { - label: 'Platform', - href: `${absoluteUrl}/platform`, + label: 'Security', + href: `${absoluteUrl}/platform/security`, className: 'navbar__active', - activeBasePath: 'platform', + activeBasePath: 'platform/security', position: 'left', target: '_self', rel: 'dofollow', }, { - label: 'API', + label: 'Academy', + href: `${absoluteUrl}/academy`, + activeBasePath: 'academy', + position: 'right', + target: '_self', + rel: 'dofollow', + }, + { + label: 'API & SDK', type: 'dropdown', to: `${absoluteUrl}/api`, target: '_self', rel: 'dofollow', activeBasePath: 'api', - position: 'left', + position: 'right', items: [ { - label: 'Reference', + label: 'API Reference', href: `${absoluteUrl}/api/v2`, target: '_self', rel: 'dofollow', @@ -63,17 +108,6 @@ const themeConfig = { target: '_self', rel: 'dofollow', }, - ], - }, - { - label: 'SDK', - type: 'dropdown', - to: `${absoluteUrl}/sdk`, - activeBasePath: 'sdk', - position: 'left', - target: '_self', - rel: 'dofollow', - items: [ { label: 'SDK for JavaScript', href: `${absoluteUrl}/sdk/js/docs/overview`, @@ -86,63 +120,14 @@ const themeConfig = { target: '_self', rel: 'dofollow', }, - ], - }, - { - label: 'CLI', - href: `${absoluteUrl}/cli/docs`, - position: 'left', - activeBasePath: 'cli', - target: '_self', - rel: 'dofollow', - }, - { - label: 'Open source', - type: 'dropdown', - to: `${absoluteUrl}/open-source`, - activeBasePath: 'open-source', - target: '_self', - position: 'left', - className: 'navbar__item', - items: [ { - label: 'Crawlee', - href: 'https://crawlee.dev', + label: 'CLI', + href: `${absoluteUrl}/cli/docs`, + target: '_self', rel: 'dofollow', }, - { - label: 'Fingerprint Suite', - href: 'https://github.com/apify/fingerprint-suite', - }, - { - label: 'impit', - href: 'https://github.com/apify/impit', - }, - { - label: 'MCP CLI', - href: 'https://github.com/apify/mcpc', - }, - { - label: 'Actor whitepaper', - href: 'https://whitepaper.actor', - }, - { - label: 'proxy-chain', - href: 'https://github.com/apify/proxy-chain', - }, - { - label: 'Apify on GitHub', - href: 'https://github.com/apify', - }, ], }, - { - href: 'https://discord.com/invite/jyEM2PRvMU', - label: 'Discord', - title: 'Chat on Discord', - position: 'right', - className: 'icon', - }, ], }, colorMode: { @@ -293,31 +278,31 @@ const themeConfig = { }, announcementBar: process.env.APIFY_DOCS_ABSOLUTE_URL ? (() => { - const parsedUrl = new URL(process.env.APIFY_DOCS_ABSOLUTE_URL); + const parsedUrl = new URL(process.env.APIFY_DOCS_ABSOLUTE_URL); - const { hostname } = parsedUrl; + const { hostname } = parsedUrl; - if (!hostname.includes('pr-') && !hostname.includes('preview')) { - return undefined; - } + if (!hostname.includes('pr-') && !hostname.includes('preview')) { + return undefined; + } - const prNumber = hostname.split('.')[0]?.split('-')[1]; + const prNumber = hostname.split('.')[0]?.split('-')[1]; - if (!prNumber) { - return undefined; - } + if (!prNumber) { + return undefined; + } - // TODO: once we support multiple preview deployments, we should pass in the repository name as an env variable - const githubUrl = `https://github.com/apify/apify-docs/pull/${prNumber}`; + // TODO: once we support multiple preview deployments, we should pass in the repository name as an env variable + const githubUrl = `https://github.com/apify/apify-docs/pull/${prNumber}`; - return { - id: 'apify-docs-preview-banner', - content: `You are visiting a preview build for PR ${prNumber} of the Apify Docs.`, - backgroundColor: '#B80F0A', - textColor: '#FFFFFF', - isCloseable: false, - }; - })() + return { + id: 'apify-docs-preview-banner', + content: `You are visiting a preview build for PR ${prNumber} of the Apify Docs.`, + backgroundColor: '#B80F0A', + textColor: '#FFFFFF', + isCloseable: false, + }; + })() : undefined, }; diff --git a/apify-docs-theme/src/theme/Navbar/CTA/index.jsx b/apify-docs-theme/src/theme/Navbar/CTA/index.jsx index 4c8f82b2f2..2cf0aa5c12 100644 --- a/apify-docs-theme/src/theme/Navbar/CTA/index.jsx +++ b/apify-docs-theme/src/theme/Navbar/CTA/index.jsx @@ -1,6 +1,6 @@ import styles from './styles.module.css'; -const buttonText = 'Go to Console'; +const buttonText = 'Get started'; function clickHandler() { if (window.analytics) { diff --git a/apify-docs-theme/src/theme/Navbar/Content/index.jsx b/apify-docs-theme/src/theme/Navbar/Content/index.jsx index 3f3ae39748..5c173e8497 100644 --- a/apify-docs-theme/src/theme/Navbar/Content/index.jsx +++ b/apify-docs-theme/src/theme/Navbar/Content/index.jsx @@ -22,11 +22,12 @@ function NavbarItems({ items }) { ); } -function NavbarContentLayout({ left, right }) { +function NavbarContentLayout({ left, center, right }) { return (
{left}
+
{center}
{right}
@@ -88,22 +89,35 @@ export default function NavbarContent() { left={ <> - } + center={!searchBarItem && ( + + + + )} right={ <> - - {!searchBarItem && ( - - - - )} + + Discord + } /> + + + + } + right={ + <> + + + } + /> ); diff --git a/apify-docs-theme/src/theme/SearchBar/styles.css b/apify-docs-theme/src/theme/SearchBar/styles.css index 01baaaa5c0..13adb949fc 100644 --- a/apify-docs-theme/src/theme/SearchBar/styles.css +++ b/apify-docs-theme/src/theme/SearchBar/styles.css @@ -26,14 +26,13 @@ .AskAI-Button { height: 4rem; padding: 0.8rem 1.6rem !important; - background-color: var(--ifm-color-primary); + background-color: rgba(255, 255, 255, 0); border-radius: 8px; - color: var(--color-neutral-text-on-primary); font-family: inherit; font-size: 1.6rem; - font-weight: 500; + font-weight: 400; line-height: 2.4rem; - border: none; + border: 1px solid var(--color-neutral-border); box-shadow: none; outline: none; box-sizing: border-box; @@ -53,6 +52,12 @@ display: none; } +@media (min-width: 769px) { + .DocSearch-Button { + width: 30rem; + } +} + @media (max-width: 768px) { .SearchButton-Container { width: 100%; From a765e512b07011cc440e9e35547b0399f986c47e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jind=C5=99ich=20B=C3=A4r?= Date: Tue, 23 Jun 2026 13:11:18 +0200 Subject: [PATCH 2/5] chore: run formatter --- apify-docs-theme/src/config.js | 38 +++++++++---------- .../src/theme/Navbar/Content/index.jsx | 19 +++++++--- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/apify-docs-theme/src/config.js b/apify-docs-theme/src/config.js index c120a62e1d..28550f7540 100644 --- a/apify-docs-theme/src/config.js +++ b/apify-docs-theme/src/config.js @@ -278,31 +278,31 @@ const themeConfig = { }, announcementBar: process.env.APIFY_DOCS_ABSOLUTE_URL ? (() => { - const parsedUrl = new URL(process.env.APIFY_DOCS_ABSOLUTE_URL); + const parsedUrl = new URL(process.env.APIFY_DOCS_ABSOLUTE_URL); - const { hostname } = parsedUrl; + const { hostname } = parsedUrl; - if (!hostname.includes('pr-') && !hostname.includes('preview')) { - return undefined; - } + if (!hostname.includes('pr-') && !hostname.includes('preview')) { + return undefined; + } - const prNumber = hostname.split('.')[0]?.split('-')[1]; + const prNumber = hostname.split('.')[0]?.split('-')[1]; - if (!prNumber) { - return undefined; - } + if (!prNumber) { + return undefined; + } - // TODO: once we support multiple preview deployments, we should pass in the repository name as an env variable - const githubUrl = `https://github.com/apify/apify-docs/pull/${prNumber}`; + // TODO: once we support multiple preview deployments, we should pass in the repository name as an env variable + const githubUrl = `https://github.com/apify/apify-docs/pull/${prNumber}`; - return { - id: 'apify-docs-preview-banner', - content: `You are visiting a preview build for PR ${prNumber} of the Apify Docs.`, - backgroundColor: '#B80F0A', - textColor: '#FFFFFF', - isCloseable: false, - }; - })() + return { + id: 'apify-docs-preview-banner', + content: `You are visiting a preview build for PR ${prNumber} of the Apify Docs.`, + backgroundColor: '#B80F0A', + textColor: '#FFFFFF', + isCloseable: false, + }; + })() : undefined, }; diff --git a/apify-docs-theme/src/theme/Navbar/Content/index.jsx b/apify-docs-theme/src/theme/Navbar/Content/index.jsx index 5c173e8497..d5f82735ec 100644 --- a/apify-docs-theme/src/theme/Navbar/Content/index.jsx +++ b/apify-docs-theme/src/theme/Navbar/Content/index.jsx @@ -91,14 +91,21 @@ export default function NavbarContent() { } - center={!searchBarItem && ( - - - - )} + center={ + !searchBarItem && ( + + + + ) + } right={ <> - + Discord From 006d0ab23258c1ea00426643dc6b60019704b9b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jind=C5=99ich=20B=C3=A4r?= Date: Wed, 24 Jun 2026 11:06:27 +0200 Subject: [PATCH 3/5] feat: new Discord button design, sparkles icons --- .../src/theme/Navbar/Content/DiscordIcon.jsx | 10 +++++ .../src/theme/Navbar/Content/index.jsx | 3 +- .../src/theme/SearchBar/SparklesIcon.jsx | 13 +++++++ apify-docs-theme/src/theme/SearchBar/index.js | 2 + .../src/theme/SearchBar/styles.css | 4 +- apify-docs-theme/src/theme/custom.css | 38 +++++-------------- .../static/img/discord-brand-dark.svg | 3 -- apify-docs-theme/static/img/discord-brand.svg | 3 -- 8 files changed, 40 insertions(+), 36 deletions(-) create mode 100644 apify-docs-theme/src/theme/Navbar/Content/DiscordIcon.jsx create mode 100644 apify-docs-theme/src/theme/SearchBar/SparklesIcon.jsx delete mode 100644 apify-docs-theme/static/img/discord-brand-dark.svg delete mode 100644 apify-docs-theme/static/img/discord-brand.svg diff --git a/apify-docs-theme/src/theme/Navbar/Content/DiscordIcon.jsx b/apify-docs-theme/src/theme/Navbar/Content/DiscordIcon.jsx new file mode 100644 index 0000000000..009b8f5871 --- /dev/null +++ b/apify-docs-theme/src/theme/Navbar/Content/DiscordIcon.jsx @@ -0,0 +1,10 @@ +export function DiscordIcon({ color = 'currentColor', size = 24 }) { + return ( + + + + ); +} diff --git a/apify-docs-theme/src/theme/Navbar/Content/index.jsx b/apify-docs-theme/src/theme/Navbar/Content/index.jsx index d5f82735ec..d781c53430 100644 --- a/apify-docs-theme/src/theme/Navbar/Content/index.jsx +++ b/apify-docs-theme/src/theme/Navbar/Content/index.jsx @@ -11,6 +11,7 @@ import React from 'react'; // import SearchBar from '../../SearchBar'; import NavbarCTA from '../CTA'; +import { DiscordIcon } from './DiscordIcon'; function NavbarItems({ items }) { return ( @@ -106,7 +107,7 @@ export default function NavbarContent() { target="_blank" rel="noopener noreferrer" > - Discord + diff --git a/apify-docs-theme/src/theme/SearchBar/SparklesIcon.jsx b/apify-docs-theme/src/theme/SearchBar/SparklesIcon.jsx new file mode 100644 index 0000000000..dc446c6245 --- /dev/null +++ b/apify-docs-theme/src/theme/SearchBar/SparklesIcon.jsx @@ -0,0 +1,13 @@ +export function SparklesIcon({ color = 'currentColor', size = 16 }) { + return ( + + ); +} diff --git a/apify-docs-theme/src/theme/SearchBar/index.js b/apify-docs-theme/src/theme/SearchBar/index.js index 2cdc2e439c..1a3dd6c2fc 100644 --- a/apify-docs-theme/src/theme/SearchBar/index.js +++ b/apify-docs-theme/src/theme/SearchBar/index.js @@ -6,6 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { useState, useCallback } from 'react'; import { ApifySearch } from '@apify/docs-search-modal'; +import { SparklesIcon } from './SparklesIcon'; // needs to be imported as the last thing, so that it can override the default styles // TODO: update simple-import-sort to allow importing css as last. @@ -106,6 +107,7 @@ function KapaAIButton({ onClick }) { {() => (
diff --git a/apify-docs-theme/src/theme/SearchBar/styles.css b/apify-docs-theme/src/theme/SearchBar/styles.css index 13adb949fc..7e0f6da2bc 100644 --- a/apify-docs-theme/src/theme/SearchBar/styles.css +++ b/apify-docs-theme/src/theme/SearchBar/styles.css @@ -37,7 +37,9 @@ outline: none; box-sizing: border-box; cursor: pointer; - display: block; + display: flex; + align-items: center; + gap: 0.6rem; position: relative; text-align: center; transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default); diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css index a27c724bdf..e13fbed652 100644 --- a/apify-docs-theme/src/theme/custom.css +++ b/apify-docs-theme/src/theme/custom.css @@ -551,34 +551,16 @@ aside > div > a > b { top: 10px; } -.navbar .icon { - font-size: 0; - padding: 4px; - line-height: 0; -} - -.navbar .icon::before { - content: ''; - display: block; - width: 24px; - height: 24px; - background-size: cover; -} - -.navbar .icon[href*='github']::before { - background-image: url('/img/github-brand.svg'); -} - -html[data-theme='dark'] .navbar .navbar__link[href*='github']:before { - background-image: url('/img/github-brand-dark.svg'); -} - -.navbar .icon[href*='discord']::before { - background-image: url('/img/discord-brand.svg'); -} - -html[data-theme='dark'] .navbar .navbar__link[href*='discord']:before { - background-image: url('/img/discord-brand-dark.svg'); +.navbar .icon[href*='discord'] { + display: flex; + align-items: center; + justify-content: center; + width: 4rem; + height: 4rem; + background-color: var(--color-Neutral_BackgroundMuted); + border: 1px solid var(--color-neutral-border); + border-radius: 4px; + color: var(--ifm-navbar-link-color); } .navbar .icon svg[class*='iconExternalLink'], diff --git a/apify-docs-theme/static/img/discord-brand-dark.svg b/apify-docs-theme/static/img/discord-brand-dark.svg deleted file mode 100644 index 8b97b4c5d8..0000000000 --- a/apify-docs-theme/static/img/discord-brand-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apify-docs-theme/static/img/discord-brand.svg b/apify-docs-theme/static/img/discord-brand.svg deleted file mode 100644 index 58254473b9..0000000000 --- a/apify-docs-theme/static/img/discord-brand.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From 61ef33fe197cc32f4df8008ee365b3221a014172 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jind=C5=99ich=20B=C3=A4r?= Date: Wed, 24 Jun 2026 11:08:22 +0200 Subject: [PATCH 4/5] chore: run formatter --- apify-docs-theme/src/theme/SearchBar/SparklesIcon.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apify-docs-theme/src/theme/SearchBar/SparklesIcon.jsx b/apify-docs-theme/src/theme/SearchBar/SparklesIcon.jsx index dc446c6245..b9cee3f227 100644 --- a/apify-docs-theme/src/theme/SearchBar/SparklesIcon.jsx +++ b/apify-docs-theme/src/theme/SearchBar/SparklesIcon.jsx @@ -1,6 +1,13 @@ export function SparklesIcon({ color = 'currentColor', size = 16 }) { return ( -