Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: website design uplift #2872

Open
wants to merge 38 commits into
base: master
Choose a base branch
from
+4,630 −936
Open

docs: website design uplift #2872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
5e5f937
feat(website): header and footer design uplift (#2862)
webrdaniel Mar 5, 2025
67a75d2
Navbar dropdown small fixes
webrdaniel Mar 5, 2025
2c8d966
feat(website): search modal design uplift (#2867)
webrdaniel Mar 5, 2025
89e31d2
feat(website): redesign homepages (#2871)
baldasseva Mar 6, 2025
5e4eedc
add decorations to cta section
baldasseva Mar 6, 2025
97357bc
add decorative circle to cta section
baldasseva Mar 6, 2025
c676a32
LanguageInfoWidget improvements
webrdaniel Mar 7, 2025
c70965c
languageGetStartedContainer fix alignment
webrdaniel Mar 7, 2025
c79c6ab
codeblock fixes
webrdaniel Mar 7, 2025
70db3b0
cli example improvements
webrdaniel Mar 7, 2025
a99f877
fix ctaImage
webrdaniel Mar 7, 2025
7c32c7a
cta logo alignment
webrdaniel Mar 7, 2025
11331ec
small fixes
webrdaniel Mar 7, 2025
3893ff3
Merge branch 'master' of github.com:apify/crawlee into feat/design-up…
webrdaniel Mar 7, 2025
f1871cf
yarn lock fix
webrdaniel Mar 7, 2025
bcac624
yarn.lock fix
webrdaniel Mar 7, 2025
d8c8c8a
code blocks smaller padding
webrdaniel Mar 7, 2025
0c28c83
codeblock fix
webrdaniel Mar 7, 2025
0787a67
buttons fix
webrdaniel Mar 7, 2025
fbb52e1
fix blinking logo
webrdaniel Mar 7, 2025
f2078b3
navigation hiding versions fix
webrdaniel Mar 7, 2025
083e8aa
python codeblock fixes
webrdaniel Mar 7, 2025
722b423
navbar button hover
webrdaniel Mar 7, 2025
d90ed0e
logo loading fix
webrdaniel Mar 7, 2025
05b08c1
navbar logo not clickable
webrdaniel Mar 7, 2025
6ae3c43
code examples update
webrdaniel Mar 10, 2025
162ceae
remove comment
webrdaniel Mar 10, 2025
7a9e56c
updated code example
webrdaniel Mar 11, 2025
c76831b
CR fixes
webrdaniel Mar 12, 2025
b826212
update title
webrdaniel Mar 12, 2025
ad5046e
navigation hover
webrdaniel Mar 12, 2025
eac42f0
fix paddings
baldasseva Mar 13, 2025
4cd595f
fix search bar in header in tablet
baldasseva Mar 13, 2025
73c1bec
animated logo
webrdaniel Mar 13, 2025
7da5e44
Merge branch 'feat/design-uplift-2025' of github.com:apify/crawlee in…
webrdaniel Mar 13, 2025
2d54cac
align code centrally
baldasseva Mar 13, 2025
82f051c
Merge branch 'feat/design-uplift-2025' of https://github.com/apify/cr…
baldasseva Mar 13, 2025
9de6e99
optimized logo
webrdaniel Mar 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
371 changes: 180 additions & 191 deletions website/docusaurus.config.js
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be actually a clickable card element, here are defined the hover states for the cards and each section should lead to a specific docs part. I will ask Banán, where it should exactly lead 🙏
Screenshot 2025-03-11 at 16 39 14

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, shouldn't we also use the action links as in the cards below, to indicate it is clickable?
Screenshot 2025-03-12 at 8 20 26

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No no, it is different kind of element and the clickable indication should be the hover state 🙏

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noticed that the fonts feel a bit thicker then in designs but in code the font-weight is correct, do you know what could be the problem? If not we can let it be 🤓
Screenshot 2025-03-13 at 9 40 22
Screenshot 2025-03-13 at 9 41 44

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

It probably depends on the font files we're using. I remember we had a similar issue in web and it was solved by using a different font file.
In the code we have some font definitions like this:

@font-face {
    font-family: 'Lota Grotesque';
    src:
        url('/font/lota.woff2') format('woff2'),
        url('/font/lota.woff') format('woff');
    font-weight: 600;
}

So I suppose the Lota.woff file we have is for a 600 thickness. We should change the file or add a file for a 400 thickness. If you feel like this is important, could you find us the lota.woff (and lota.woff2) files that have the correct thickness, or tell us where to find them? Thanks.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alrighty, let's release it without the 400 weight and I will check if we can find something and we can possibly change it next week ✨

Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
/* eslint-disable global-require,import/no-extraneous-dependencies */
/* eslint-disable global-require */
const { cp } = require('fs');

const { externalLinkProcessor } = require('./tools/utils/externalLink');

const packages = [
Expand Down Expand Up @@ -34,7 +36,7 @@ const packagesOrder = [

/** @type {Partial<import('@docusaurus/types').DocusaurusConfig>} */
module.exports = {
title: 'Crawlee · Build reliable crawlers. Fast.',
title: 'Crawlee for JavaScript · Build reliable crawlers. Fast.',
tagline: 'Build reliable crawlers. Fast.',
url: 'https://crawlee.dev',
baseUrl: '/',
Expand Down Expand Up @@ -170,202 +172,189 @@ module.exports = {
},
};
},
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({
docs: {
versionPersistence: 'localStorage',
sidebar: {
hideable: true,
},
},
// announcementBar: {
// id: `crawlee-for-python-webinar`,
// content: `🎉️ <b><a href="https://crawlee.dev/python/">Crawlee for Python is open to early adopters!</a></b> 🥳️`,
// },
navbar: {
hideOnScroll: true,
title: 'Crawlee',
logo: {
src: 'img/crawlee-light.svg',
srcDark: 'img/crawlee-dark.svg',
},
items: [
{
type: 'doc',
docId: 'quick-start/quick-start',
label: 'Docs',
position: 'left',
},
{
type: 'doc',
docId: '/examples',
label: 'Examples',
position: 'left',
},
{
type: 'custom-api',
to: 'core',
label: 'API',
position: 'left',
activeBaseRegex: 'api/(?!.*/changelog)',
},
{
type: 'custom-api',
to: 'core/changelog',
label: 'Changelog',
position: 'left',
className: 'changelog',
activeBaseRegex: 'changelog',
},
{
to: 'blog',
label: 'Blog',
position: 'left',
},
{
type: 'dropdown',
label: 'Node.js',
position: 'left',
items: [
{
label: 'Node.js',
href: '#',
target: '_self',
rel: 'dofollow',
},
{
label: 'Python',
href: 'https://crawlee.dev/python',
target: '_self',
rel: 'dofollow',
},
],
},
{
type: 'docsVersionDropdown',
position: 'left',
dropdownItemsAfter: [
{
href: 'https://sdk.apify.com/docs/guides/getting-started',
label: '2.2',
// skipping svgo for animated crawlee logo
async function doNotUseSVGO() {
return {
name: 'docusaurus-svgo',
configureWebpack(config) {
// find the svg rule
const svgRule = config.module.rules.find((r) => typeof r === 'object' && r.test.toString() === '/\\.svg$/i');

// find the svgr loader
const svgrLoader = svgRule?.oneOf?.[0];

// make copy of svgr loader and disable svgo
const svgrLoaderCopy = JSON.parse(JSON.stringify(svgrLoader));

// turn off svgo
svgrLoaderCopy.use[0].options.svgo = false;

// insert the copy after the original svgr loader
svgRule.oneOf.splice(1, 0, svgrLoaderCopy);

// exclude animated logo from the first svgr loader (with svgo enabled)
svgrLoader.exclude = /animated-crawlee-logo/;
return {
mergeStrategy: {
'module.rules': 'replace',
},
{
href: 'https://sdk.apify.com/docs/1.3.1/guides/getting-started',
label: '1.3',
module: {
rules: config.module.rules,
},
],
},
{
href: 'https://github.com/apify/crawlee',
label: 'GitHub',
title: 'View on GitHub',
position: 'right',
className: 'icon',
},
{
href: 'https://discord.com/invite/jyEM2PRvMU',
label: 'Discord',
title: 'Chat on Discord',
position: 'right',
className: 'icon',
};
},
],
},
colorMode: {
defaultMode: 'light',
disableSwitch: false,
respectPrefersColorScheme: true,
},
prism: {
defaultLanguage: 'typescript',
theme: require('prism-react-renderer').themes.github,
darkTheme: require('prism-react-renderer').themes.dracula,
additionalLanguages: ['docker', 'log', 'bash', 'diff', 'json'],
};
},
metadata: [
// eslint-disable-next-line max-len
{ name: 'description', content: `Crawlee helps you build and maintain your crawlers. It's open source, but built by developers who scrape millions of pages every day for a living.` },
// eslint-disable-next-line max-len
{ name: 'og:description', content: `Crawlee helps you build and maintain your crawlers. It's open source, but built by developers who scrape millions of pages every day for a living.` },
],
image: 'img/crawlee-og.png',
footer: {
links: [
{
title: 'Docs',
items: [
{
label: 'Guides',
to: 'docs/guides',
},
{
label: 'Examples',
to: 'docs/examples',
},
{
label: 'API reference',
to: 'api/core',
},
{
label: 'Upgrading to v3',
to: 'docs/upgrading/upgrading-to-v3',
},
],
},
{
title: 'Community',
items: [
{
label: 'Blog',
to: 'blog',
},
{
label: 'Discord',
href: 'https://discord.com/invite/jyEM2PRvMU',
},
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/crawlee',
},
{
label: 'Twitter',
href: 'https://twitter.com/apify',
},
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({
docs: {
versionPersistence: 'localStorage',
sidebar: {
hideable: true,
},
{
title: 'More',
items: [
{
label: 'Apify Platform',
href: 'https://apify.com',
},
{
label: 'Docusaurus',
href: 'https://docusaurus.io',
},
{
label: 'GitHub',
href: 'https://github.com/apify/crawlee',
},
],
},
// announcementBar: {
// id: `crawlee-for-python-webinar`,
// content: `🎉️ <b><a href="https://crawlee.dev/python/">Crawlee for Python is open to early adopters!</a></b> 🥳️`,
// },
navbar: {
hideOnScroll: true,
title: 'Crawlee',
logo: {
src: 'img/crawlee-light.svg',
srcDark: 'img/crawlee-dark.svg',
},
items: [
{
type: 'doc',
docId: 'quick-start/quick-start',
label: 'Docs',
position: 'left',
},
{
type: 'doc',
docId: '/examples',
label: 'Examples',
position: 'left',
},
{
type: 'custom-api',
to: 'core',
label: 'API',
position: 'left',
activeBaseRegex: 'api/(?!.*/changelog)',
},
{
type: 'custom-api',
to: 'core/changelog',
label: 'Changelog',
position: 'left',
className: 'changelog',
activeBaseRegex: 'changelog',
},
{
to: 'blog',
label: 'Blog',
position: 'left',
},
],
},
colorMode: {
defaultMode: 'light',
disableSwitch: false,
respectPrefersColorScheme: true,
},
prism: {
defaultLanguage: 'typescript',
theme: require('prism-react-renderer').themes.github,
darkTheme: require('prism-react-renderer').themes.dracula,
additionalLanguages: ['docker', 'log', 'bash', 'diff', 'json'],
},
metadata: [
// eslint-disable-next-line max-len
{ name: 'description', content: `Crawlee helps you build and maintain your crawlers. It's open source, but built by developers who scrape millions of pages every day for a living.` },
// eslint-disable-next-line max-len
{ name: 'og:description', content: `Crawlee helps you build and maintain your crawlers. It's open source, but built by developers who scrape millions of pages every day for a living.` },
],
logo: {
src: 'img/apify_logo.svg',
href: '/',
width: '60px',
height: '60px',
image: 'img/crawlee-og.png',
footer: {
links: [
{
title: 'Docs',
items: [
{
label: 'Guides',
to: 'docs/guides',
},
{
label: 'Examples',
to: 'docs/examples',
},
{
label: 'API reference',
to: 'api/core',
},
{
label: 'Changelog',
to: 'api/core/changelog',
},
],
},
{
title: 'Product',
items: [
{
label: 'Discord',
href: 'https://discord.com/invite/jyEM2PRvMU',
},
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/crawlee',
},
{
label: 'Twitter',
href: 'https://twitter.com/apify',
},
{
label: 'YouTube',
href: 'https://www.youtube.com/apify',
},

],
},
{
title: 'More',
items: [
{
label: 'Apify Platform',
href: 'https://apify.com',
},
{
label: 'Docusaurus',
href: 'https://docusaurus.io',
},
{
label: 'GitHub',
href: 'https://github.com/apify/crawlee',
},
],
},
],
},
},
algolia: {
appId: '5JC94MPMLY',
apiKey: '267679200b833c2ca1255ab276731869', // search only (public) API key
indexName: 'crawlee',
algoliaOptions: {
facetFilters: ['version:VERSION'],
algolia: {
appId: '5JC94MPMLY',
apiKey: '267679200b833c2ca1255ab276731869', // search only (public) API key
indexName: 'crawlee',
placeholder: 'Search documentation',
algoliaOptions: {
facetFilters: ['version:VERSION'],
},
translations: {
button: {
buttonText: 'Search documentation...',
},
},
},
},
}),
}),
};
Loading