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

feat(theme-classic): allow stylizing doc paginator arrows (#6053)

Browse source 
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
Yaroslav Serhieiev 2021-12-21 16:55:24 +02:00 • committed by GitHub
parent dedf5ace5f
commit 9d95d786fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 62 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-theme-classic/package.json
View file

@ -36,7 +36,7 @@
"clsx": "^1.1.1",
"copy-text-to-clipboard": "^3.0.1",
"globby": "^11.0.2",
"infima": "0.2.0-alpha.36",
"infima": "0.2.0-alpha.37",
"lodash": "^4.17.20",
"postcss": "^8.3.7",
"prism-react-renderer": "^1.2.1",

17
packages/docusaurus-theme-classic/src/theme-classic.d.ts vendored
View file

@ -123,13 +123,22 @@ declare module '@theme/CodeBlock' {
declare module '@theme/DocPaginator' {
import type {PropNavigation} from '@docusaurus/plugin-content-docs';
type PageInfo = {readonly permalink: string; readonly title: string};
// May be simpler to provide a {navigation: PropNavigation} prop?
export interface Props extends PropNavigation {}
const DocPaginator: (props: Props) => JSX.Element;
export default DocPaginator;
export default function DocPaginator(props: Props): JSX.Element;
}
declare module '@theme/DocPaginatorNavLink' {
import type {PropNavigationLink} from '@docusaurus/plugin-content-docs';
// May be simpler to provide a {navigation: PropNavigation} prop?
export interface Props {
navLink: PropNavigationLink;
next?: boolean;
}
export default function DocPaginatorNavLink(props: Props): JSX.Element;
}
declare module '@theme/DocSidebar' {

36
packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
View file

@ -6,11 +6,11 @@
*/
import React from 'react';
import Link from '@docusaurus/Link';
import Translate, {translate} from '@docusaurus/Translate';
import type {PropNavigation} from '@docusaurus/plugin-content-docs';
import {translate} from '@docusaurus/Translate';
import DocPaginatorNavLink from '@theme/DocPaginatorNavLink';
import type {Props} from '@theme/DocPaginator';
function DocPaginator(props: PropNavigation): JSX.Element {
function DocPaginator(props: Props): JSX.Element {
const {previous, next} = props;
return (
@ -22,34 +22,10 @@ function DocPaginator(props: PropNavigation): JSX.Element {
description: 'The ARIA label for the docs pagination',
})}>
<div className="pagination-nav__item">
{previous && (
<Link className="pagination-nav__link" to={previous.permalink}>
<div className="pagination-nav__sublabel">
<Translate
id="theme.docs.paginator.previous"
description="The label used to navigate to the previous doc">
Previous
</Translate>
</div>
<div className="pagination-nav__label">
&laquo; {previous.title}
</div>
</Link>
)}
{previous && <DocPaginatorNavLink navLink={previous} />}
</div>
<div className="pagination-nav__item pagination-nav__item--next">
{next && (
<Link className="pagination-nav__link" to={next.permalink}>
<div className="pagination-nav__sublabel">
<Translate
id="theme.docs.paginator.next"
description="The label used to navigate to the next doc">
Next
</Translate>
</div>
<div className="pagination-nav__label">{next.title} &raquo;</div>
</Link>
)}
{next && <DocPaginatorNavLink navLink={next} next />}
</div>
</nav>
);

38
packages/docusaurus-theme-classic/src/theme/DocPaginatorNavLink/index.tsx Normal file
View file

@ -0,0 +1,38 @@
/**
* 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 clsx from 'clsx';
import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
import type {Props} from '@theme/DocPaginatorNavLink';
function DocPaginatorNavLink(props: Props): JSX.Element {
const {navLink, next} = props;
return (
<Link className={clsx('pagination-nav__link')} to={navLink.permalink}>
<div className="pagination-nav__sublabel">
{next ? (
<Translate
id="theme.docs.paginator.next"
description="The label used to navigate to the next doc">
Next
</Translate>
) : (
<Translate
id="theme.docs.paginator.previous"
description="The label used to navigate to the previous doc">
Previous
</Translate>
)}
</div>
<div className="pagination-nav__label">{navLink.title}</div>
</Link>
);
}
export default DocPaginatorNavLink;

8
yarn.lock
View file

@ -10645,10 +10645,10 @@ infer-owner@^1.0.3, infer-owner@^1.0.4:
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
infima@0.2.0-alpha.36:
version "0.2.0-alpha.36"
resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.36.tgz#205515680e2dc588ec1a07b6ce108e49b29cc810"
integrity sha512-tlhQa7S09+QzQs8hCZ9oBeD6xOFap1f2zDO4I5HRZ4SMFKKGk9sIhwaou1FWpYoqM6aaoK2YN+G1fND+Sad1Qw==
infima@0.2.0-alpha.37:
version "0.2.0-alpha.37"
resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.37.tgz#b87ff42d528d6d050098a560f0294fbdd12adb78"
integrity sha512-4GX7Baw+/lwS4PPW/UJNY89tWSvYG1DL6baKVdpK6mC593iRgMssxNtORMTFArLPJ/A/lzsGhRmx+z6MaMxj0Q==
inflight@^1.0.4:
version "1.0.6"