mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-24 06:27:02 +02:00
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:
parent
d910ff118e
commit
b91f02dee2
12 changed files with 377 additions and 2 deletions
|
@ -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}>
|
||||
« {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} »
|
||||
</Link>
|
||||
)}
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -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}>
|
||||
« {previous.title}
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
<li className="page-item ml-2">
|
||||
{next && (
|
||||
<Link className="page-link" to={next.permalink}>
|
||||
{next.title} »
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default DocPaginator;
|
Loading…
Add table
Add a link
Reference in a new issue