3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-03 16:59:06 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore(v2): modify docusaurus-2 homepage (#1315)

Browse source 
* chore(v2): modify docusaurus-2 homepage

* Update styles.module.css
This commit is contained in:
Endilie Yacop Sucipto 2019-03-28 23:31:15 +08:00 • committed by Yangshun Tay
parent 94928f8e53
commit f04eea6b48
2 changed files with 162 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

61
website/pages/index.js
View file

@ -5,8 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/
import React, {useEffect, useState} from 'react';
import React, {useEffect, useState, useContext} from 'react';
import Head from '@docusaurus/Head';
import DocusaurusContext from '@docusaurus/context';
import classnames from 'classnames';
@ -112,6 +113,8 @@ const QUOTES = [
];
function Home() {
const context = useContext(DocusaurusContext);
const {siteConfig = {}} = context;
const [featureIndex, setFeatureIndex] = useState(0);
useEffect(() => {
const timer = window.setTimeout(() => {
@ -129,29 +132,49 @@ function Home() {
<Head key={featureIndex}>
<title>Docusaurus</title>
</Head>
<div className={classnames(styles.section, styles.banner)}>
<div className={classnames(styles.sectionInner, styles.bannerInner)}>
<h1 className={styles.header}>Docusaurus</h1>
<h2 className={styles.subtitle}>
Easy to maintain Open Source
<br />
Documentation websites
</h2>
<div className={styles.headerLinksContainer}>
<a className={styles.headerLink} href="/docs/installation">
<div className={styles['index-hero']}>
<div className={styles['index-hero-inner']}>
<h1 className={styles['index-hero-project-tagline']}>
<img
alt="Docusaurus with Keytar"
className={styles['index-hero-logo']}
src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`}
/>
{siteConfig.title} makes it easy to maintain{' '}
<span className={styles['index-hero-project-keywords']}>
Open Source
</span>{' '}
documentation websites.
</h1>
<div className={styles['index-ctas']}>
<a
className={styles['index-ctas-get-started-button']}
href={`${siteConfig.baseUrl}docs/installation`}>
Get Started
</a>
<a
className={classnames(styles.headerLink, styles.gitHubLink)}
href="https://github.com/facebook/docusaurus"
rel="noopener noreferrer"
target="_blank">
GitHub
</a>
<div />
<span className={styles['index-ctas-github-button']}>
<iframe
src="https://ghbtns.com/github-btn.html?user=facebook&amp;repo=docusaurus&amp;type=star&amp;count=true&amp;size=large"
frameBorder={0}
scrolling={0}
width={160}
height={30}
title="GitHub Stars"
/>
</span>
</div>
</div>
</div>
<div className={styles['announcement']}>
<div className={styles['announcement-inner']}>
We're working on{' '}
<a href="https://github.com/facebook/Docusaurus/issues/789">
Docusaurus 2
</a>
, contribute to its roadmap by suggesting features or giving feedback{' '}
<a href={`${siteConfig.baseUrl}feedback`}>here</a>!
</div>
</div>
<div className={styles.section}>
<div className={styles.sectionInner}>
<div className={styles.row}>