feat(v2): polyfill automatically depending on browserslist (#1857)

* feat(v2): polyfill corejs and ie11 compat

* use corejs/stable

* useBuiltIns => usage instead of entry

* chngelo

* nits

* breaking: withBaseUrl -> useBaseUrl

* nits

* loose mode for faster perf and smaller bundle
This commit is contained in:
Endi 2019-10-21 11:09:16 +07:00 committed by GitHub
parent ee936f62b5
commit abdc647b07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 181 additions and 163 deletions

View file

@ -10,7 +10,7 @@ import classnames from 'classnames';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import withBaseUrl from '@docusaurus/withBaseUrl';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
const features = [
@ -46,6 +46,21 @@ const features = [
},
];
function Feature({imageUrl, title, description}) {
const imgUrl = useBaseUrl(imageUrl);
return (
<div className={classnames('col col--4', styles.feature)}>
{imgUrl && (
<div className="text--center">
<img className={styles.featureImage} src={imgUrl} alt={title} />
</div>
)}
<h3>{title}</h3>
<p>{description}</p>
</div>
);
}
function Home() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
@ -63,7 +78,7 @@ function Home() {
'button button--outline button--secondary button--lg',
styles.getStarted,
)}
to={withBaseUrl('docs/doc1')}>
to={useBaseUrl('docs/doc1')}>
Get Started
</Link>
</div>
@ -74,22 +89,8 @@ function Home() {
<section className={styles.features}>
<div className="container">
<div className="row">
{features.map(({imageUrl, title, description}, idx) => (
<div
key={idx}
className={classnames('col col--4', styles.feature)}>
{imageUrl && (
<div className="text--center">
<img
className={styles.featureImage}
src={withBaseUrl(imageUrl)}
alt={title}
/>
</div>
)}
<h3>{title}</h3>
<p>{description}</p>
</div>
{features.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>