3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-19 09:37:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

style(v2): add static footer component (#1019)

Browse source
This commit is contained in:
Yangshun Tay 2018-10-05 00:27:37 -07:00 • committed by Endilie Yacop Sucipto
parent 41aaed64a7
commit bdbbfaee91
2 changed files with 126 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

84
v2/lib/theme/Footer/index.js
View file

@ -1,24 +1,76 @@
import React from 'react';
import {Link} from 'react-router-dom';
import styles from './styles.css';
function Footer(props) {
const {pagesMetadatas, docsMetadatas, location} = props;
const docsFlatMetadatas = Object.values(docsMetadatas);
const routeLinks = [...pagesMetadatas, ...docsFlatMetadatas].map(
data =>
data.permalink !== location.pathname && (
<li key={data.permalink}>
<Link to={data.permalink}>{data.permalink}</Link>
</li>
),
);
function Footer() {
return (
<div className={styles.footer}>
<ul className={styles.routeLinks}>{routeLinks}</ul>
</div>
<footer className={styles.footer}>
<section className={styles.footerRow}>
<div className={styles.footerColumn}>
<h3 className={styles.footerColumnTitle}>Docs</h3>
<ul className={styles.footerList}>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Getting Started
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Versioning
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Localization
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Adding Search
</a>
</li>
</ul>
</div>
<div className={styles.footerColumn}>
<h3 className={styles.footerColumnTitle}>Community</h3>
<ul className={styles.footerList}>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
User Showcase
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Stack Overflow
</a>
</li>
</ul>
</div>
<div className={styles.footerColumn}>
<h3 className={styles.footerColumnTitle}>Social</h3>
<ul className={styles.footerList}>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
GitHub
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Facebook
</a>
</li>
<li className={styles.footerListItem}>
<a className={styles.footerLink} href="/">
Twitter
</a>
</li>
</ul>
</div>
</section>
<section className={styles.copyright}>
<span>Copyright © {new Date().getFullYear()} Facebook Inc.</span>
</section>
</footer>
);
}