feat(v2): bootstrap doc paginator (#2734)

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

* fix(v2): margin and spacing of footer

* feat(v2): add navbar component

* ádd collapse classname

* feat(v2): add dependencies

* feat(v2): remove unused code

* feat(v2): remove unused links

* feat(v2): add reactstrap components :|

* feat(v2): add brand and other nav componnets

* feat(v2): Add the layout tag

* feat(v2): bootstrap start doc components

* feat(v2: Add syntax highlight

* Ádd Page components

* feat(v2): Bootstrap MDX Componnets

* fix(v2): Fix layout height

* fix(v2): Fix spacings

* feat:(v2): Add the layout in doc content

* feat(v2): Start the pagination

* feat(v2): Finish pagination

* Fix margins in mobile

* feat(v2): Add theme
This commit is contained in:
Fanny 2020-05-17 11:51:03 -03:00 committed by GitHub
parent d910ff118e
commit b91f02dee2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 377 additions and 2 deletions

View file

@ -16,14 +16,14 @@ function BlogPostPaginator(props) {
<ul className="pagination justify-content-between">
<li className="pagination__item">
{prevItem && (
<Link className="page-link rounded-pill" to={prevItem.permalink}>
<Link className="page-link" to={prevItem.permalink}>
&laquo; {prevItem.title}
</Link>
)}
</li>
<li className="pagination__item">
{nextItem && (
<Link className="page-link rounded-pill" to={nextItem.permalink}>
<Link className="page-link" to={nextItem.permalink}>
{nextItem.title} &raquo;
</Link>
)}

View file

@ -0,0 +1,57 @@
/**
* 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 isInternalUrl from '@docusaurus/isInternalUrl';
import Head from '@docusaurus/Head';
import DocPaginator from '@theme/DocPaginator';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
function DocItem(props) {
const {siteConfig = {}} = useDocusaurusContext();
const {url: siteUrl, title: siteTitle} = siteConfig;
const {content: DocContent} = props;
const {metadata} = DocContent;
const {description, title, permalink} = metadata;
const {
frontMatter: {image: metaImage, keywords},
} = DocContent;
const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
let metaImageUrl = siteUrl + useBaseUrl(metaImage);
if (!isInternalUrl(metaImage)) {
metaImageUrl = metaImage;
}
return (
<>
<Head>
<title>{metaTitle}</title>
<meta property="og:title" content={metaTitle} />
{description && <meta name="description" content={description} />}
{description && (
<meta property="og:description" content={description} />
)}
{keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} />
)}
{metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && <meta property="twitter:image" content={metaImageUrl} />}
{metaImage && (
<meta name="twitter:image:alt" content={`Image for ${title}`} />
)}
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
</Head>
<main className="col col-8 p-0">
<DocContent />
<DocPaginator metadata={metadata} />
</main>
</>
);
}
export default DocItem;

View file

@ -0,0 +1,30 @@
/**
* 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 renderRoutes from '@docusaurus/renderRoutes';
import MDXComponents from '@theme/MDXComponents';
import Layout from '@theme/Layout';
import {MDXProvider} from '@mdx-js/react';
function DocPage(props) {
const {route: baseRoute} = props;
return (
<Layout title="Blog page" description="My blog page">
<div className="container mt-4">
<section className="row justify-content-center">
<MDXProvider components={MDXComponents}>
{renderRoutes(baseRoute.routes)}
</MDXProvider>
</section>
</div>
</Layout>
);
}
export default DocPage;

View file

@ -0,0 +1,36 @@
/**
* 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 Link from '@docusaurus/Link';
function DocPaginator(props) {
const {previous, next} = props.metadata;
return (
<nav aria-label="Blog list page navigation" className="my-5 p-0">
<ul className="pagination justify-content-between">
<li className="page-item mr-2">
{previous && (
<Link className="page-link" to={previous.permalink}>
&laquo; {previous.title}
</Link>
)}
</li>
<li className="page-item ml-2">
{next && (
<Link className="page-link" to={next.permalink}>
{next.title} &raquo;
</Link>
)}
</li>
</ul>
</nav>
);
}
export default DocPaginator;