3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 18:27:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): simplify markup of Showcase page (#2180)

Browse source
This commit is contained in:
Alexey Pyltsyn 2020-01-03 05:40:43 +03:00 • committed by Yangshun Tay
parent 24206de744
commit 7074754252
1 changed files with 44 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
website/src/pages/showcase/index.js
View file

@ -14,34 +14,21 @@ import classnames from 'classnames';
import styles from './styles.module.css';
import users from '../../data/users';
const ITEMS_PER_ROW = 3; // Sync up the item col width if this is changed.
const TITLE = 'Showcase';
const DESCRIPTION =
'See the awesome websites people are building with Docusaurus';
function chunkArray(array, size) {
const chunks = [];
const copied = [...array];
const numChunks = Math.ceil(copied.length / size); // Round up to the nearest integer.
for (let i = 0; i < numChunks; i++) {
chunks.push(copied.splice(0, size));
}
return chunks;
}
function Showcase() {
return (
<Layout title={TITLE} description={DESCRIPTION}>
<div className="container margin-vert--xl">
<div className="container margin-vert--lg">
<div className="text--center margin-bottom--xl">
<h1>{TITLE}</h1>
<p>{DESCRIPTION}</p>
</div>
{chunkArray(users, ITEMS_PER_ROW).map((row, i) => (
<div key={`row${i}`} className="row margin-vert--lg">
{row.map(user => (
<div key={user.title} className="col col--4">
<div className="row">
{users.map(user => (
<div key={user.title} className="col col--4 margin-bottom--lg">
<div className={classnames('card', styles.showcaseUser)}>
<div className="card__image">
<Image img={user.preview} alt={user.title} />
@ -84,7 +71,6 @@ function Showcase() {
</div>
))}
</div>
))}
</div>
</Layout>
);