docs: website design uplift #2872
There are no files selected for viewing
webrdaniel marked this conversation as resolved.
Show resolved
Hide resolved
webrdaniel marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. 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 🙏
Collaborator
Author
There was a problem hiding this comment. Ok, shouldn't we also use the action links as in the cards below, to indicate it is clickable? There was a problem hiding this comment. No no, it is different kind of element and the clickable indication should be the hover state 🙏
webrdaniel marked this conversation as resolved.
Show resolved
Hide resolved
webrdaniel marked this conversation as resolved.
Show resolved
Hide resolved
baldasseva marked this conversation as resolved.
Show resolved
Hide resolved
baldasseva marked this conversation as resolved.
Show resolved
Hide resolved
baldasseva marked this conversation as resolved.
Show resolved
Hide resolved
baldasseva marked this conversation as resolved.
Show resolved
Hide resolved
webrdaniel marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. There is still missing Run on Apify button on Python site 🙏 There was a problem hiding this comment. @webrdaniel I haven't read the comment so please ignore this 🙏 ❤️ There was a problem hiding this comment. The drop down menu opens on tablet screen size when scrolling 🤔 There was a problem hiding this comment. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import Link from '@docusaurus/Link'; | ||
| import clsx from 'clsx'; | ||
| import React from 'react'; | ||
|
|
||
| import styles from './Button.module.css'; | ||
| import CrawleeSvg from '../../static/img/crawlee-logo-monocolor.svg'; | ||
|
|
||
| export default function Button({ children, to, withIcon, type = 'primary', className, isBig }) { | ||
| return ( | ||
| <Link to={to} target="_self" rel="dofollow"> | ||
| <span className={clsx( | ||
| className, | ||
| styles.button, | ||
| type === 'primary' && styles.buttonPrimary, | ||
| type === 'secondary' && styles.buttonSecondary, | ||
| isBig && styles.big, | ||
| )}> | ||
| {withIcon && <CrawleeSvg />} | ||
| {children} | ||
| </span> | ||
| </Link> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| .button { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| text-align: center; | ||
| padding: 8px 16px; | ||
| border-radius: 8px; | ||
| font-family: (--ifm-font-family-base); | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: 24px; | ||
| cursor: pointer; | ||
| transition: background-color 0.2s; | ||
|
|
||
| svg { | ||
| margin-right: 8px; | ||
| } | ||
| } | ||
|
|
||
| .buttonPrimary { | ||
| background-color: var(--color-black-action); | ||
| color: var(--color-text-on-primary); | ||
| border: none; | ||
|
|
||
| path { | ||
| stroke: var(--color-text-on-primary); | ||
| &:first-child { | ||
| fill: var(--color-text-on-primary); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .buttonPrimary:hover { | ||
| background-color: var(--color-primary-action-hover); | ||
| } | ||
|
|
||
| .buttonSecondary { | ||
| background-color: var(--color-background); | ||
| color: var(--color-text); | ||
| border: 1px solid var(--color-border); | ||
|
|
||
| path { | ||
| stroke: var(--color-black-action); | ||
| &:first-child { | ||
| fill: var(--color-black-action); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .buttonSecondary:hover { | ||
| border: 1px solid var(--color-text); | ||
| } | ||
|
|
||
| .big { | ||
| padding: 12px 24px; | ||
| } | ||
|
|
||
| /* TABLET */ | ||
| @media (min-width: 768px) { | ||
| .button { | ||
| width: auto; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /* eslint-disable max-len */ | ||
| import clsx from 'clsx'; | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import styles from './CopyButton.module.css'; | ||
|
|
||
| export default function CopyButton({ copyText, compact = false, className }) { | ||
| const [copied, setCopied] = useState(false); | ||
| const copy = async () => { | ||
| await navigator.clipboard.writeText(copyText); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); | ||
| }; | ||
| return <button | ||
| type="button" | ||
| aria-label="Copy code to clipboard" | ||
| title="Copy" | ||
| onClick={copy} | ||
| className={clsx(className, styles.copyButton, compact ? styles.copyButtonCompact : styles.copyButtonDefault)} | ||
| > | ||
| {copied | ||
| ? <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | ||
| <path fillRule="evenodd" clipRule="evenodd" d="M18.0303 5.09467C18.3232 5.38756 18.3232 5.86244 18.0303 6.15533L8.03033 16.1553C7.73744 16.4482 7.26256 16.4482 6.96967 16.1553L2.59467 11.7803C2.30178 11.4874 2.30178 11.0126 2.59467 10.7197C2.88756 10.4268 3.36244 10.4268 3.65533 10.7197L7.5 14.5643L16.9697 5.09467C17.2626 4.80178 17.7374 4.80178 18.0303 5.09467Z" /> | ||
| </svg> | ||
|
|
||
| : <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M8.375 2.375C7.13236 2.375 6.125 3.38236 6.125 4.625V6.125H4.625C3.38236 6.125 2.375 7.13236 2.375 8.375V15.375C2.375 16.6176 3.38236 17.625 4.625 17.625H11.625C12.8676 17.625 13.875 16.6176 13.875 15.375V13.875H15.375C16.6176 13.875 17.625 12.8676 17.625 11.625V4.625C17.625 3.38236 16.6176 2.375 15.375 2.375H8.375ZM13.875 12.375H15.375C15.7892 12.375 16.125 12.0392 16.125 11.625V4.625C16.125 4.21079 15.7892 3.875 15.375 3.875H8.375C7.96079 3.875 7.625 4.21079 7.625 4.625V6.125H11.625C12.8676 6.125 13.875 7.13236 13.875 8.375V12.375ZM4.625 7.625C4.21079 7.625 3.875 7.96079 3.875 8.375V15.375C3.875 15.7892 4.21079 16.125 4.625 16.125H11.625C12.0392 16.125 12.375 15.7892 12.375 15.375V8.375C12.375 7.96079 12.0392 7.625 11.625 7.625H4.625Z" /> | ||
| </svg> | ||
| } | ||
| </button>; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| .copyButton { | ||
| all: unset; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| box-sizing: border-box; | ||
| cursor: pointer; | ||
| fill: var(--color-icon); | ||
|
|
||
| svg { | ||
| flex-shrink: 0; | ||
| } | ||
| } | ||
|
|
||
| .copyButtonDefault { | ||
| width: 28px; | ||
| height: 28px; | ||
| background-color: var(--color-background-muted); | ||
| border: 1px solid var(--color-border); | ||
| border-radius: 6px; | ||
| transition: background-color 0.12s ease-out; | ||
|
|
||
| &:hover { | ||
| background-color: var(--color-hover); | ||
| } | ||
|
|
||
| svg { | ||
| padding: 1px; | ||
| } | ||
| } | ||
|
|
||
| .copyButtonCompact { | ||
| svg { | ||
| width: 16px; | ||
| height: 16px; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react'; | ||
|
|
||
| import CopyButton from '../CopyButton'; | ||
| import styles from './HomepageCliExample.module.css'; | ||
|
|
||
| const cliCommand = `npx crawlee create my-crawler`; | ||
|
|
||
| export default function CliExample() { | ||
| return ( | ||
| <section className={styles.cliExampleSection}> | ||
| <div className={styles.cliExampleTitle}> | ||
| Or start with a template from our CLI | ||
| </div> | ||
| <code className={styles.cliExampleCodeBlock}> | ||
| <pre> | ||
| <span className={styles.cliCommandPrefix}>$</span> | ||
| {cliCommand} | ||
| <CopyButton copyText={cliCommand} /> | ||
| </pre> | ||
| </code> | ||
| <div className={styles.cliExampleSubtitle}> | ||
| Built with 🤍 by Apify. Forever free and open-source. | ||
| </div> | ||
| </section> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| .cliExampleSection { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| text-align: center; | ||
| padding: 16px; | ||
| } | ||
|
|
||
| .cliExampleTitle { | ||
| color: var(--color-text-muted); | ||
| font-size: 18px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 28px; | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| .cliExampleCodeBlock { | ||
| width: fit-content; | ||
| height: fit-content; | ||
| padding: 0; | ||
| border: 0; | ||
| margin-bottom: 18px; | ||
| width: 100%; | ||
|
|
||
| pre { | ||
| margin: 0; | ||
| width: 100%; | ||
| padding: 8px 16px; | ||
| background-color: var(--color-background-muted); | ||
| border: 1px solid var(--color-border); | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 16px; | ||
| font-size: 14px; | ||
| line-height: 20px; | ||
|
|
||
| button { | ||
| margin-left: auto; | ||
| } | ||
| } | ||
|
|
||
| .cliCommandPrefix { | ||
| color: var(--color-text-muted); | ||
| user-select: none; | ||
| } | ||
|
|
||
| /* TABLET */ | ||
| @media (min-width: 768px) { | ||
| max-width: 526px; | ||
| } | ||
| } | ||
|
|
||
| .cliExampleSubtitle { | ||
| color: var(--color-text-subtle); | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 24px; | ||
| } | ||
|
|
||
| /* TABLET */ | ||
| @media (min-width: 768px) { | ||
| .cliExampleSection { | ||
| padding: 64px 0; | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.