feat: header facelift v2

apify-docs-theme/package.json

@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@apify/docs-search-modal": "^1.2.2",
-        "@docusaurus/theme-common": "3.7.0",
+        "@docusaurus/theme-common": "^3.7.0",
         "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
         "algoliasearch": "^5.19.0",
         "algoliasearch-helper": "^3.22.6",

apify-docs-theme/src/config.js

@@ -137,13 +137,6 @@ const themeConfig = {
                     },
                 ],
             },
-            {
-                href: 'https://github.com/apify',
-                label: 'GitHub',
-                title: 'Apify on GitHub',
-                position: 'right',
-                className: 'icon',
-            },
             {
                 href: 'https://discord.com/invite/jyEM2PRvMU',
                 label: 'Discord',
@@ -256,6 +249,10 @@ const themeConfig = {
                         label: 'GitHub',
                         href: 'https://github.com/apify',
                     },
+                    {
+                        href: 'https://discord.com/invite/jyEM2PRvMU',
+                        label: 'Discord',
+                    },
                     {
                         label: 'Trust Center',
                         href: 'https://trust.apify.com',
@@ -274,9 +271,15 @@ const themeConfig = {
         appId: 'N8EOCSBQGH',
         apiKey: 'e97714a64e2b4b8b8fe0b01cd8592870', // search only (public) API key
         indexName: 'apify_sdk_v2',
+        placeholder: 'Search documentation',
         algoliaOptions: {
             facetFilters: ['version:VERSION'],
         },
+        translations: {
+            button: {
+                buttonText: 'Search documentation…',
+            },
+        },
     },
     hubspot: {
         accountId: '19497222',

apify-docs-theme/src/theme/Footer/index.jsx

@@ -1,5 +1,6 @@
 import { useThemeConfig } from '@docusaurus/theme-common';
 import LinkItem from '@theme/Footer/LinkItem';
+import ColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -8,7 +9,7 @@ import styles from './index.module.css';
 function FooterLinksColumn({ column }) {
     return (
         <>
-            <div className={styles.footerTitle}>{column.title}</div>
+            <div className={styles.title}>{column.title}</div>
             <ul className={clsx(styles.footerItem, 'clean-list')}>
                 {column.items.map((item, i) => (
                     <li key={i} className="footer__item">
@@ -28,21 +29,24 @@ function Footer() {
     const { links, style } = footer;
     return (
         <footer className={clsx(styles.footer, style)}>
-            <div className="container padding-horiz--lg">
-                <div className="row" style={{ justifyContent: 'space-between' }}>
+            <div className={styles.container}>
+                <div className={clsx('row', styles.top)}>
                     { links.map((column, i) => (
                         <div key={i} className={`col col--2`}>
                             <FooterLinksColumn {...{ column }} />
                         </div>
                     ))
                     }
                 </div>
-                <div className="row padding-vert--md padding-top--lg">
-                    <div className="col padding-vert--md col--6">
+                <div className={clsx('row', styles.bottom)}>
+                    <div className="col col--6">
                         <a href="https://apify.com" target={'_blank'} rel={'dofollow noreferrer'}>
-                            <span className={styles.footerLogo}></span>
+                            <span className={styles.logo}></span>
                         </a>
                     </div>
+                    <div className="col col--6">
+                        <ColorModeToggle className={styles.toggle} />
+                    </div>
                 </div>
             </div>
         </footer>

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

@@ -1,5 +1,14 @@
 .footer {
-    padding-top: 64px;
+    padding: 4rem 1.6rem 8rem;
+    border-top: 1px solid var(--color-neutral-separator-subtle);
+}
+
+.container {
+    max-width: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
 }
 
 .builtBy {
@@ -33,29 +42,79 @@
     fill: #6f7490;
 }
 
-.footerTitle {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-        'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 20px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: #8d92af;
-    margin-bottom: 20px;
+.title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 2.4rem;
+    margin-bottom: 1.6rem;
+}
+
+.top {
+    justify-content: space-between;
+}
+
+.bottom {
+    padding-top: 8rem;
+
+    :global(.col) {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.toggle {
+    margin-left: auto;
 }
 
-.footerLogo {
+.logo {
     display: inline-block;
     width: 90px;
     height: 24px;
     background-image: url('/img/footer-apify-logo-black.svg');
     background-repeat: no-repeat;
 }
 
-html[data-theme='dark'] .footerLogo {
+html[data-theme='dark'] .logo {
     background-image: url('/img/footer-apify-logo-white.svg');
 }
 
+@media (max-width: 996px) {
+    .footer {
+        padding: 3.2rem 1.6rem;
+    }
+
+    .container {
+        flex-direction: column-reverse;
+    }
+
+    .bottom {
+        padding-top: 0;
+        gap: 1.6rem;
+
+        :global(.col) {
+            justify-content: center;
+        }
+    }
+
+    .toggle {
+        margin-left: unset;
+    }
+
+    .top {
+        padding: 3.2rem 0;
+        gap: 3.2rem;
+        text-align: center;
+    }
+
+    .top::before {
+        width: 100%;
+        height: 1px;
+        margin: 0 -1.6rem;
+        padding: 0 1.6rem;
+        content: '';
+        display: block;
+        background-color: var(--color-neutral-separator-subtle);
+    }
+}
+
 /** dummy comment just to trigger theme publishing 3 */

apify-docs-theme/src/theme/Layout/index.jsx

@@ -12,7 +12,7 @@ export default function LayoutWrapper(props) {
 
     return (
         <div style={{
-            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '123px' : '68px',
+            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '126px' : '68px',
             margin: 0,
             padding: 0,
             boxSizing: 'border-box',

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

@@ -0,0 +1,7 @@
+import styles from './styles.module.css';
+
+export default function NavbarCTA() {
+    return (
+        <a href="https://console.apify.com" className={styles.getStarted}>Get started</a>
+    );
+}

apify-docs-theme/src/theme/Navbar/CTA/styles.module.css

@@ -0,0 +1,59 @@
+.getStarted {
+  height: 4rem;
+  padding: 0.8rem 1.6rem !important;
+  background-color: var(--color-primary-black-action);
+  border-radius: 2rem;
+  color: var(--color-neutral-text-on-primary);
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 2.4rem;
+  border: none;
+  box-shadow: none;
+  outline: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  position: relative;
+  text-align: center;
+  transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--button-gradient);
+    opacity: 0.4;
+    border-radius: inherit;
+    transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+  }
+
+  &:hover {
+    background-color: var(--color-primary-black-action-hover);
+    color: var(--color-neutral-text-on-primary);
+
+    &::before {
+      opacity: 1;
+    }
+  }
+}
+
+:global(.navbar-sidebar) .getStarted {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .getStarted {
+    width: 100%;
+  }
+
+  :global(.navbar__inner) .getStarted {
+    display: none;
+  }
+
+  :global(.navbar-sidebar) .getStarted {
+    display: block;
+  }
+}

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

@@ -4,15 +4,14 @@ import {
     splitNavbarItems,
 } from '@docusaurus/theme-common/internal';
 import { usePluginData } from '@docusaurus/useGlobalData';
-import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import NavbarLogo from '@theme/Navbar/Logo';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarSearch from '@theme/Navbar/Search';
 import NavbarItem from '@theme/NavbarItem';
 import React from 'react';
 
 import SearchBar from '../../SearchBar';
-import styles from './styles.module.css';
+import NavbarCTA from '../CTA';
 
 function NavbarItems({ items }) {
     return (
@@ -72,6 +71,7 @@ export default function NavbarContent() {
     const { navbar: { items } } = useThemeConfig();
     const [leftItems, rightItems] = splitNavbarItems(items);
     const searchBarItem = items.find((item) => item.type === 'search');
+
     return (
         <div
             style={{
@@ -85,20 +85,20 @@ export default function NavbarContent() {
             <NavbarContentLayout
                 left={
                     <>
-                        <NavbarMobileSidebarToggle />
                         <NavbarLogo />
                         <NavbarItems items={leftItems} />
                     </>
                 }
                 right={
                     <>
-                        <NavbarColorModeToggle className={styles.colorModeToggle} />
                         <NavbarItems items={rightItems} />
                         {!searchBarItem && (
                             <NavbarSearch>
                                 <SearchBar />
                             </NavbarSearch>
                         )}
+                        <NavbarCTA />
+                        <NavbarMobileSidebarToggle />
                     </>
                 }
             />

apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx

@@ -0,0 +1,46 @@
+import { useNavbarMobileSidebar, useThemeConfig } from '@docusaurus/theme-common/internal';
+import IconClose from '@theme/Icon/Close';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+import React from 'react';
+
+import SearchBar from '../../../SearchBar';
+import NavbarCTA from '../../CTA';
+
+export default function NavbarMobileSidebarHeader() {
+    const mobileSidebar = useNavbarMobileSidebar();
+
+    const { navbar: { items } } = useThemeConfig();
+    const searchBarItem = items.find((item) => item.type === 'search');
+
+    function onSearchClick(event) {
+        event.preventDefault();
+        mobileSidebar.toggle();
+    }
+
+    return (
+        <>
+            <div className="navbar-sidebar__brand">
+                <NavbarLogo />
+                <button
+                    type="button"
+                    className="clean-btn navbar-sidebar__close"
+                    onClick={mobileSidebar.toggle}
+                    aria-label="Close navigation bar"
+                >
+                    <IconClose />
+                </button>
+            </div>
+            <div className="navbar-sidebar__actions">
+                <div className="navbar-sidebar__actions__container">
+                    <NavbarCTA />
+                    {!searchBarItem && (
+                        <NavbarSearch>
+                            <SearchBar onClick={onSearchClick} />
+                        </NavbarSearch>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+}