Skip to content

Commit 90ff436

Browse files
katzinokatzino
authored
feat: header facelift v2 (#1676)
1 parent 9c14e10 commit 90ff436

File tree

16 files changed

+1373
-1368
lines changed

16 files changed

+1373
-1368
lines changed

‎apify-docs-theme/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
},
2121
"dependencies": {
2222
"@apify/docs-search-modal": "^1.2.2",
23-
"@docusaurus/theme-common": "3.7.0",
23+
"@docusaurus/theme-common": "^3.7.0",
2424
"@stackql/docusaurus-plugin-hubspot": "^1.1.0",
2525
"algoliasearch": "^5.19.0",
2626
"algoliasearch-helper": "^3.22.6",

‎apify-docs-theme/src/config.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -137,13 +137,6 @@ const themeConfig = {
137137
},
138138
],
139139
},
140-
{
141-
href: 'https://github.com/apify',
142-
label: 'GitHub',
143-
title: 'Apify on GitHub',
144-
position: 'right',
145-
className: 'icon',
146-
},
147140
{
148141
href: 'https://discord.com/invite/jyEM2PRvMU',
149142
label: 'Discord',
@@ -256,6 +249,10 @@ const themeConfig = {
256249
label: 'GitHub',
257250
href: 'https://github.com/apify',
258251
},
252+
{
253+
href: 'https://discord.com/invite/jyEM2PRvMU',
254+
label: 'Discord',
255+
},
259256
{
260257
label: 'Trust Center',
261258
href: 'https://trust.apify.com',
@@ -274,9 +271,15 @@ const themeConfig = {
274271
appId: 'N8EOCSBQGH',
275272
apiKey: 'e97714a64e2b4b8b8fe0b01cd8592870', // search only (public) API key
276273
indexName: 'apify_sdk_v2',
274+
placeholder: 'Search documentation',
277275
algoliaOptions: {
278276
facetFilters: ['version:VERSION'],
279277
},
278+
translations: {
279+
button: {
280+
buttonText: 'Search documentation…',
281+
},
282+
},
280283
},
281284
hubspot: {
282285
accountId: '19497222',

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useThemeConfig } from '@docusaurus/theme-common';
22
import LinkItem from '@theme/Footer/LinkItem';
3+
import ColorModeToggle from '@theme/Navbar/ColorModeToggle';
34
import clsx from 'clsx';
45
import React from 'react';
56

@@ -8,7 +9,7 @@ import styles from './index.module.css';
89
function FooterLinksColumn({ column }) {
910
return (
1011
<>
11-
<div className={styles.footerTitle}>{column.title}</div>
12+
<div className={styles.title}>{column.title}</div>
1213
<ul className={clsx(styles.footerItem, 'clean-list')}>
1314
{column.items.map((item, i) => (
1415
<li key={i} className="footer__item">
@@ -28,21 +29,24 @@ function Footer() {
2829
const { links, style } = footer;
2930
return (
3031
<footer className={clsx(styles.footer, style)}>
31-
<div className="container padding-horiz--lg">
32-
<div className="row" style={{ justifyContent: 'space-between' }}>
32+
<div className={styles.container}>
33+
<div className={clsx('row', styles.top)}>
3334
{ links.map((column, i) => (
3435
<div key={i} className={`col col--2`}>
3536
<FooterLinksColumn {...{ column }} />
3637
</div>
3738
))
3839
}
3940
</div>
40-
<div className="row padding-vert--md padding-top--lg">
41-
<div className="col padding-vert--md col--6">
41+
<div className={clsx('row', styles.bottom)}>
42+
<div className="col col--6">
4243
<a href="https://apify.com" target={'_blank'} rel={'dofollow noreferrer'}>
43-
<span className={styles.footerLogo}></span>
44+
<span className={styles.logo}></span>
4445
</a>
4546
</div>
47+
<div className="col col--6">
48+
<ColorModeToggle className={styles.toggle} />
49+
</div>
4650
</div>
4751
</div>
4852
</footer>

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

Lines changed: 73 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
.footer {
2-
padding-top: 64px;
2+
padding: 4rem 1.6rem 8rem;
3+
border-top: 1px solid var(--color-neutral-separator-subtle);
4+
}
5+
6+
.container {
7+
max-width: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
8+
width: 100%;
9+
margin: 0 auto;
10+
display: flex;
11+
flex-direction: column;
312
}
413

514
.builtBy {
@@ -33,29 +42,79 @@
3342
fill: #6f7490;
3443
}
3544

36-
.footerTitle {
37-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
38-
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
39-
'Helvetica Neue', sans-serif;
40-
font-weight: 600;
41-
font-size: 16px;
42-
line-height: 20px;
43-
letter-spacing: 0.1em;
44-
text-transform: uppercase;
45-
color: #8d92af;
46-
margin-bottom: 20px;
45+
.title {
46+
font-size: 1.6rem;
47+
font-weight: 700;
48+
line-height: 2.4rem;
49+
margin-bottom: 1.6rem;
50+
}
51+
52+
.top {
53+
justify-content: space-between;
54+
}
55+
56+
.bottom {
57+
padding-top: 8rem;
58+
59+
:global(.col) {
60+
display: flex;
61+
align-items: center;
62+
}
63+
}
64+
65+
.toggle {
66+
margin-left: auto;
4767
}
4868

49-
.footerLogo {
69+
.logo {
5070
display: inline-block;
5171
width: 90px;
5272
height: 24px;
5373
background-image: url('/img/footer-apify-logo-black.svg');
5474
background-repeat: no-repeat;
5575
}
5676

57-
html[data-theme='dark'] .footerLogo {
77+
html[data-theme='dark'] .logo {
5878
background-image: url('/img/footer-apify-logo-white.svg');
5979
}
6080

81+
@media (max-width: 996px) {
82+
.footer {
83+
padding: 3.2rem 1.6rem;
84+
}
85+
86+
.container {
87+
flex-direction: column-reverse;
88+
}
89+
90+
.bottom {
91+
padding-top: 0;
92+
gap: 1.6rem;
93+
94+
:global(.col) {
95+
justify-content: center;
96+
}
97+
}
98+
99+
.toggle {
100+
margin-left: unset;
101+
}
102+
103+
.top {
104+
padding: 3.2rem 0;
105+
gap: 3.2rem;
106+
text-align: center;
107+
}
108+
109+
.top::before {
110+
width: 100%;
111+
height: 1px;
112+
margin: 0 -1.6rem;
113+
padding: 0 1.6rem;
114+
content: '';
115+
display: block;
116+
background-color: var(--color-neutral-separator-subtle);
117+
}
118+
}
119+
61120
/** dummy comment just to trigger theme publishing 3 */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function LayoutWrapper(props) {
1212

1313
return (
1414
<div style={{
15-
'--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '123px' : '68px',
15+
'--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '126px' : '68px',
1616
margin: 0,
1717
padding: 0,
1818
boxSizing: 'border-box',

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import styles from './styles.module.css';
2+
3+
export default function NavbarCTA() {
4+
return (
5+
<a href="https://console.apify.com" className={styles.getStarted}>Get started</a>
6+
);
7+
}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.getStarted {
2+
height: 4rem;
3+
padding: 0.8rem 1.6rem !important;
4+
background-color: var(--color-primary-black-action);
5+
border-radius: 2rem;
6+
color: var(--color-neutral-text-on-primary);
7+
font-size: 1.6rem;
8+
font-weight: 500;
9+
line-height: 2.4rem;
10+
border: none;
11+
box-shadow: none;
12+
outline: none;
13+
box-sizing: border-box;
14+
cursor: pointer;
15+
display: block;
16+
position: relative;
17+
text-align: center;
18+
transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
19+
20+
&::before {
21+
content: '';
22+
position: absolute;
23+
top: 0;
24+
right: 0;
25+
bottom: 0;
26+
left: 0;
27+
background: var(--button-gradient);
28+
opacity: 0.4;
29+
border-radius: inherit;
30+
transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
31+
}
32+
33+
&:hover {
34+
background-color: var(--color-primary-black-action-hover);
35+
color: var(--color-neutral-text-on-primary);
36+
37+
&::before {
38+
opacity: 1;
39+
}
40+
}
41+
}
42+
43+
:global(.navbar-sidebar) .getStarted {
44+
display: none;
45+
}
46+
47+
@media (max-width: 768px) {
48+
.getStarted {
49+
width: 100%;
50+
}
51+
52+
:global(.navbar__inner) .getStarted {
53+
display: none;
54+
}
55+
56+
:global(.navbar-sidebar) .getStarted {
57+
display: block;
58+
}
59+
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import {
44
splitNavbarItems,
55
} from '@docusaurus/theme-common/internal';
66
import { usePluginData } from '@docusaurus/useGlobalData';
7-
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
87
import NavbarLogo from '@theme/Navbar/Logo';
98
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
109
import NavbarSearch from '@theme/Navbar/Search';
1110
import NavbarItem from '@theme/NavbarItem';
1211
import React from 'react';
1312

1413
import SearchBar from '../../SearchBar';
15-
import styles from './styles.module.css';
14+
import NavbarCTA from '../CTA';
1615

1716
function NavbarItems({ items }) {
1817
return (
@@ -72,6 +71,7 @@ export default function NavbarContent() {
7271
const { navbar: { items } } = useThemeConfig();
7372
const [leftItems, rightItems] = splitNavbarItems(items);
7473
const searchBarItem = items.find((item) => item.type === 'search');
74+
7575
return (
7676
<div
7777
style={{
@@ -85,20 +85,20 @@ export default function NavbarContent() {
8585
<NavbarContentLayout
8686
left={
8787
<>
88-
<NavbarMobileSidebarToggle />
8988
<NavbarLogo />
9089
<NavbarItems items={leftItems} />
9190
</>
9291
}
9392
right={
9493
<>
95-
<NavbarColorModeToggle className={styles.colorModeToggle} />
9694
<NavbarItems items={rightItems} />
9795
{!searchBarItem && (
9896
<NavbarSearch>
9997
<SearchBar />
10098
</NavbarSearch>
10199
)}
100+
<NavbarCTA />
101+
<NavbarMobileSidebarToggle />
102102
</>
103103
}
104104
/>

‎apify-docs-theme/src/theme/Navbar/Content/styles.module.css

Lines changed: 0 additions & 8 deletions
This file was deleted.

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { useNavbarMobileSidebar, useThemeConfig } from '@docusaurus/theme-common/internal';
2+
import IconClose from '@theme/Icon/Close';
3+
import NavbarLogo from '@theme/Navbar/Logo';
4+
import NavbarSearch from '@theme/Navbar/Search';
5+
import React from 'react';
6+
7+
import SearchBar from '../../../SearchBar';
8+
import NavbarCTA from '../../CTA';
9+
10+
export default function NavbarMobileSidebarHeader() {
11+
const mobileSidebar = useNavbarMobileSidebar();
12+
13+
const { navbar: { items } } = useThemeConfig();
14+
const searchBarItem = items.find((item) => item.type === 'search');
15+
16+
function onSearchClick(event) {
17+
event.preventDefault();
18+
mobileSidebar.toggle();
19+
}
20+
21+
return (
22+
<>
23+
<div className="navbar-sidebar__brand">
24+
<NavbarLogo />
25+
<button
26+
type="button"
27+
className="clean-btn navbar-sidebar__close"
28+
onClick={mobileSidebar.toggle}
29+
aria-label="Close navigation bar"
30+
>
31+
<IconClose />
32+
</button>
33+
</div>
34+
<div className="navbar-sidebar__actions">
35+
<div className="navbar-sidebar__actions__container">
36+
<NavbarCTA />
37+
{!searchBarItem && (
38+
<NavbarSearch>
39+
<SearchBar onClick={onSearchClick} />
40+
</NavbarSearch>
41+
)}
42+
</div>
43+
</div>
44+
</>
45+
);
46+
}

0 commit comments

Comments
 (0)