3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 10:17:55 +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

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

@ -14,77 +14,63 @@ 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={classnames('card', styles.showcaseUser)}>
<div className="card__image">
<Image img={user.preview} alt={user.title} />
</div>
<div className="card__body">
<div className="avatar">
<div className="avatar__intro margin-left--none">
<h4 className="avatar__name">{user.title}</h4>
<small className="avatar__subtitle">
{user.description}
</small>
</div>
</div>
</div>
{(user.website || user.source) && (
<div className="card__footer">
<div className="button-group button-group--block">
{user.website && (
<a
className="button button--small button--secondary button--block"
href={user.website}
target="_blank"
rel="noreferrer noopener">
Website
</a>
)}
{user.source && (
<a
className="button button--small button--secondary button--block"
href={user.source}
target="_blank"
rel="noreferrer noopener">
Source
</a>
)}
</div>
</div>
)}
<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} />
</div>
<div className="card__body">
<div className="avatar">
<div className="avatar__intro margin-left--none">
<h4 className="avatar__name">{user.title}</h4>
<small className="avatar__subtitle">
{user.description}
</small>
</div>
</div>
</div>
{(user.website || user.source) && (
<div className="card__footer">
<div className="button-group button-group--block">
{user.website && (
<a
className="button button--small button--secondary button--block"
href={user.website}
target="_blank"
rel="noreferrer noopener">
Website
</a>
)}
{user.source && (
<a
className="button button--small button--secondary button--block"
href={user.source}
target="_blank"
rel="noreferrer noopener">
Source
</a>
)}
</div>
</div>
)}
</div>
))}
</div>
))}
</div>
))}
</div>
</div>
</Layout>
);