feat(v2): bootstrap layout footer (#2635)

* feat(v2): add minor adjustements and footer component

* fix(v2): margin and spacing of footer

* fix(v2): spacings

* fix(v2): remove unrelated links of the bootstrap template

* fix(v2): remove unrelated links of the bootstrap template
This commit is contained in:
Fanny 2020-04-21 08:54:12 -03:00 committed by GitHub
parent 852b5e8f13
commit 2bc54a80fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 81 additions and 4 deletions

View file

@ -7,12 +7,13 @@
import React from 'react';
import BlogPostCard from '@theme/BlogPostItem';
import Footer from '@theme/Footer';
function BlogListPage(props) {
const {items} = props;
return (
<div className="container-fluid my-5">
<div className="container-fluid mt-5">
<div className="row row-cols-1 row-cols-sm-1">
{items.map(({content: BlogPostContent}) => (
<div
@ -26,6 +27,7 @@ function BlogListPage(props) {
</BlogPostCard>
</div>
))}
<Footer />
</div>
</div>
);

View file

@ -49,7 +49,7 @@ function BlogPostItem(props) {
const day = parseInt(match[2], 10);
return (
<article className="card h-100">
<article className="card h-100 shadow">
<div className="row no-gutters rows-col-2 m-3">
<div className="col-xs mr-3">
{authorImageURL && (

View file

@ -15,7 +15,7 @@ function BlogTagsListPage(props) {
<Link
href={tags[tag].permalink}
key={tag}
className="btn btn-primary m-2">
className="btn btn-primary list-inline-item my-2">
{tags[tag].name}{' '}
<span className="badge badge-light">{tags[tag].count}</span>
</Link>
@ -26,7 +26,7 @@ function BlogTagsListPage(props) {
return (
<div className="container my-3 justify-content-center">
<h1 className="text-primary">Tags</h1>
<ul className="my-xl-4">{renderAllTags()}</ul>
<ul className="my-xl-4 list-inline">{renderAllTags()}</ul>
</div>
);
}

View file

@ -0,0 +1,75 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
function FooterLink({to, href, label, ...props}) {
const toUrl = useBaseUrl(to);
return (
<Link
{...(href
? {
target: '_blank',
rel: 'noopener noreferrer',
href,
}
: {
to: toUrl,
})}
{...props}>
{label}
</Link>
);
}
function Footer() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {themeConfig = {}} = siteConfig;
const {footer} = themeConfig;
const {links} = footer || {};
return (
<footer className="container p-0 m-0">
<div className="row bg-light no-gutters justify-content-center">
{links && links.length > 0 && (
<>
{links.map((linkItem, i) => (
<div className="col col-xs-1 col-xl-1 mx-4 my-4" key={i}>
{linkItem.title != null && <h5>{linkItem.title}</h5>}
<ul className="list-unstyled">
{linkItem.items.map((item, key) =>
item.html ? (
<li
key={key}
className="mb-2"
dangerouslySetInnerHTML={{
__html: item.html,
}}
/>
) : (
<li className="mb-1" key={item.href || item.to}>
<FooterLink {...item} />
</li>
),
)}
</ul>
</div>
))}
</>
)}
</div>
</footer>
);
}
export default Footer;