@docusaurus/theme-classic 0.0.0-4835 → 0.0.0-4838
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/theme-classic.d.ts +24 -4
- package/lib-next/theme/BlogLayout/index.js +1 -5
- package/lib-next/theme/BlogSidebar/Desktop/index.js +41 -0
- package/lib-next/theme/BlogSidebar/{styles.module.css → Desktop/styles.module.css} +1 -5
- package/lib-next/theme/BlogSidebar/Mobile/index.js +36 -0
- package/lib-next/theme/BlogSidebar/index.js +7 -47
- package/lib-next/theme/BlogTagsListPage/index.js +2 -3
- package/lib-next/theme/BlogTagsPostsPage/index.js +4 -6
- package/lib-next/theme/DocTagDocListPage/index.js +3 -3
- package/lib-next/theme/Tag/index.js +2 -3
- package/lib-next/theme/TagsListInline/index.js +1 -1
- package/package.json +13 -13
- package/src/theme/BlogLayout/index.tsx +1 -5
- package/src/theme/BlogSidebar/Desktop/index.tsx +45 -0
- package/src/theme/BlogSidebar/{styles.module.css → Desktop/styles.module.css} +1 -5
- package/src/theme/BlogSidebar/Mobile/index.tsx +38 -0
- package/src/theme/BlogSidebar/index.tsx +7 -49
- package/src/theme/BlogTagsListPage/index.tsx +2 -3
- package/src/theme/BlogTagsPostsPage/index.tsx +8 -5
- package/src/theme/DocTagDocListPage/index.tsx +3 -4
- package/src/theme/Tag/index.tsx +2 -4
- package/src/theme/TagsListInline/index.tsx +1 -1
- package/src/theme-classic.d.ts +24 -4
package/lib/theme-classic.d.ts
CHANGED
|
@@ -47,13 +47,33 @@ declare module '@theme/BlogListPaginator' {
|
|
|
47
47
|
export default function BlogListPaginator(props: Props): JSX.Element;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
declare module '@theme/BlogSidebar' {
|
|
50
|
+
declare module '@theme/BlogSidebar/Desktop' {
|
|
51
|
+
import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
|
|
52
|
+
|
|
53
|
+
export interface Props {
|
|
54
|
+
readonly sidebar: BlogSidebar;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default function BlogSidebarDesktop(props: Props): JSX.Element;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
declare module '@theme/BlogSidebar/Mobile' {
|
|
51
61
|
import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
|
|
52
62
|
|
|
53
63
|
export interface Props {
|
|
54
64
|
readonly sidebar: BlogSidebar;
|
|
55
65
|
}
|
|
56
66
|
|
|
67
|
+
export default function BlogSidebarMobile(props: Props): JSX.Element;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
declare module '@theme/BlogSidebar' {
|
|
71
|
+
import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
|
|
72
|
+
|
|
73
|
+
export interface Props {
|
|
74
|
+
readonly sidebar?: BlogSidebar;
|
|
75
|
+
}
|
|
76
|
+
|
|
57
77
|
export default function BlogSidebar(props: Props): JSX.Element;
|
|
58
78
|
}
|
|
59
79
|
|
|
@@ -1011,7 +1031,7 @@ declare module '@theme/IconExternalLink' {
|
|
|
1011
1031
|
}
|
|
1012
1032
|
|
|
1013
1033
|
declare module '@theme/TagsListByLetter' {
|
|
1014
|
-
import type {TagsListItem} from '@docusaurus/
|
|
1034
|
+
import type {TagsListItem} from '@docusaurus/types';
|
|
1015
1035
|
|
|
1016
1036
|
export interface Props {
|
|
1017
1037
|
readonly tags: readonly TagsListItem[];
|
|
@@ -1020,7 +1040,7 @@ declare module '@theme/TagsListByLetter' {
|
|
|
1020
1040
|
}
|
|
1021
1041
|
|
|
1022
1042
|
declare module '@theme/TagsListInline' {
|
|
1023
|
-
import type {Tag} from '@docusaurus/
|
|
1043
|
+
import type {Tag} from '@docusaurus/types';
|
|
1024
1044
|
|
|
1025
1045
|
export interface Props {
|
|
1026
1046
|
readonly tags: readonly Tag[];
|
|
@@ -1029,7 +1049,7 @@ declare module '@theme/TagsListInline' {
|
|
|
1029
1049
|
}
|
|
1030
1050
|
|
|
1031
1051
|
declare module '@theme/Tag' {
|
|
1032
|
-
import type {TagsListItem} from '@docusaurus/
|
|
1052
|
+
import type {TagsListItem} from '@docusaurus/types';
|
|
1033
1053
|
import type {Optional} from 'utility-types';
|
|
1034
1054
|
|
|
1035
1055
|
export interface Props extends Optional<TagsListItem, 'count'> {}
|
|
@@ -15,11 +15,7 @@ export default function BlogLayout(props) {
|
|
|
15
15
|
<Layout {...layoutProps}>
|
|
16
16
|
<div className="container margin-vert--lg">
|
|
17
17
|
<div className="row">
|
|
18
|
-
{
|
|
19
|
-
<aside className="col col--3">
|
|
20
|
-
<BlogSidebar sidebar={sidebar} />
|
|
21
|
-
</aside>
|
|
22
|
-
)}
|
|
18
|
+
<BlogSidebar sidebar={sidebar} />
|
|
23
19
|
<main
|
|
24
20
|
className={clsx('col', {
|
|
25
21
|
'col--7': hasSidebar,
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import clsx from 'clsx';
|
|
9
|
+
import Link from '@docusaurus/Link';
|
|
10
|
+
import {translate} from '@docusaurus/Translate';
|
|
11
|
+
import styles from './styles.module.css';
|
|
12
|
+
export default function BlogSidebarDesktop({sidebar}) {
|
|
13
|
+
return (
|
|
14
|
+
<aside className="col col--3">
|
|
15
|
+
<nav
|
|
16
|
+
className={clsx(styles.sidebar, 'thin-scrollbar')}
|
|
17
|
+
aria-label={translate({
|
|
18
|
+
id: 'theme.blog.sidebar.navAriaLabel',
|
|
19
|
+
message: 'Blog recent posts navigation',
|
|
20
|
+
description: 'The ARIA label for recent posts in the blog sidebar',
|
|
21
|
+
})}>
|
|
22
|
+
<div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
|
|
23
|
+
{sidebar.title}
|
|
24
|
+
</div>
|
|
25
|
+
<ul className={styles.sidebarItemList}>
|
|
26
|
+
{sidebar.items.map((item) => (
|
|
27
|
+
<li key={item.permalink} className={styles.sidebarItem}>
|
|
28
|
+
<Link
|
|
29
|
+
isNavLink
|
|
30
|
+
to={item.permalink}
|
|
31
|
+
className={styles.sidebarItemLink}
|
|
32
|
+
activeClassName={styles.sidebarItemLinkActive}>
|
|
33
|
+
{item.title}
|
|
34
|
+
</Link>
|
|
35
|
+
</li>
|
|
36
|
+
))}
|
|
37
|
+
</ul>
|
|
38
|
+
</nav>
|
|
39
|
+
</aside>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import Link from '@docusaurus/Link';
|
|
9
|
+
import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
|
|
10
|
+
|
|
11
|
+
function BlogSidebarMobileSecondaryMenu({sidebar}) {
|
|
12
|
+
return (
|
|
13
|
+
<ul className="menu__list">
|
|
14
|
+
{sidebar.items.map((item) => (
|
|
15
|
+
<li key={item.permalink} className="menu__list-item">
|
|
16
|
+
<Link
|
|
17
|
+
isNavLink
|
|
18
|
+
to={item.permalink}
|
|
19
|
+
className="menu__link"
|
|
20
|
+
activeClassName="menu__link--active">
|
|
21
|
+
{item.title}
|
|
22
|
+
</Link>
|
|
23
|
+
</li>
|
|
24
|
+
))}
|
|
25
|
+
</ul>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export default function BlogSidebarMobile(props) {
|
|
30
|
+
return (
|
|
31
|
+
<NavbarSecondaryMenuFiller
|
|
32
|
+
component={BlogSidebarMobileSecondaryMenu}
|
|
33
|
+
props={props}
|
|
34
|
+
/>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
@@ -5,59 +5,19 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
NavbarSecondaryMenuFiller,
|
|
13
|
-
useWindowSize,
|
|
14
|
-
} from '@docusaurus/theme-common';
|
|
15
|
-
import styles from './styles.module.css';
|
|
16
|
-
|
|
17
|
-
function BlogSidebarContent({sidebar, className}) {
|
|
18
|
-
return (
|
|
19
|
-
<nav
|
|
20
|
-
className={clsx(styles.sidebar, 'thin-scrollbar', className)}
|
|
21
|
-
aria-label={translate({
|
|
22
|
-
id: 'theme.blog.sidebar.navAriaLabel',
|
|
23
|
-
message: 'Blog recent posts navigation',
|
|
24
|
-
description: 'The ARIA label for recent posts in the blog sidebar',
|
|
25
|
-
})}>
|
|
26
|
-
<div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
|
|
27
|
-
{sidebar.title}
|
|
28
|
-
</div>
|
|
29
|
-
<ul className={styles.sidebarItemList}>
|
|
30
|
-
{sidebar.items.map((item) => (
|
|
31
|
-
<li key={item.permalink} className={styles.sidebarItem}>
|
|
32
|
-
<Link
|
|
33
|
-
isNavLink
|
|
34
|
-
to={item.permalink}
|
|
35
|
-
className={styles.sidebarItemLink}
|
|
36
|
-
activeClassName={styles.sidebarItemLinkActive}>
|
|
37
|
-
{item.title}
|
|
38
|
-
</Link>
|
|
39
|
-
</li>
|
|
40
|
-
))}
|
|
41
|
-
</ul>
|
|
42
|
-
</nav>
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export default function BlogSidebar(props) {
|
|
8
|
+
import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
|
|
9
|
+
import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
|
|
10
|
+
import {useWindowSize} from '@docusaurus/theme-common';
|
|
11
|
+
export default function BlogSidebar({sidebar}) {
|
|
47
12
|
const windowSize = useWindowSize();
|
|
48
13
|
|
|
49
|
-
if (
|
|
14
|
+
if (!sidebar?.items.length) {
|
|
50
15
|
return null;
|
|
51
16
|
} // Mobile sidebar doesn't need to be server-rendered
|
|
52
17
|
|
|
53
18
|
if (windowSize === 'mobile') {
|
|
54
|
-
return
|
|
55
|
-
<NavbarSecondaryMenuFiller
|
|
56
|
-
component={BlogSidebarContent}
|
|
57
|
-
props={{...props, className: 'margin-left--md'}}
|
|
58
|
-
/>
|
|
59
|
-
);
|
|
19
|
+
return <BlogSidebarMobile sidebar={sidebar} />;
|
|
60
20
|
}
|
|
61
21
|
|
|
62
|
-
return <
|
|
22
|
+
return <BlogSidebarDesktop sidebar={sidebar} />;
|
|
63
23
|
}
|
|
@@ -15,8 +15,7 @@ import {
|
|
|
15
15
|
} from '@docusaurus/theme-common';
|
|
16
16
|
import SearchMetadata from '../SearchMetadata';
|
|
17
17
|
import clsx from 'clsx';
|
|
18
|
-
export default function BlogTagsListPage(
|
|
19
|
-
const {tags, sidebar} = props;
|
|
18
|
+
export default function BlogTagsListPage({tags, sidebar}) {
|
|
20
19
|
const title = translateTagsPageTitle();
|
|
21
20
|
return (
|
|
22
21
|
<HtmlClassNameProvider
|
|
@@ -28,7 +27,7 @@ export default function BlogTagsListPage(props) {
|
|
|
28
27
|
<SearchMetadata tag="blog_tags_list" />
|
|
29
28
|
<BlogLayout sidebar={sidebar}>
|
|
30
29
|
<h1>{title}</h1>
|
|
31
|
-
<TagsListByLetter tags={
|
|
30
|
+
<TagsListByLetter tags={tags} />
|
|
32
31
|
</BlogLayout>
|
|
33
32
|
</HtmlClassNameProvider>
|
|
34
33
|
);
|
|
@@ -38,9 +38,7 @@ function useBlogPostsPlural() {
|
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
export default function BlogTagsPostsPage(
|
|
42
|
-
const {metadata, items, sidebar, listMetadata} = props;
|
|
43
|
-
const {allTagsPath, name: tagName, count} = metadata;
|
|
41
|
+
export default function BlogTagsPostsPage({tag, items, sidebar, listMetadata}) {
|
|
44
42
|
const blogPostsPlural = useBlogPostsPlural();
|
|
45
43
|
const title = translate(
|
|
46
44
|
{
|
|
@@ -49,8 +47,8 @@ export default function BlogTagsPostsPage(props) {
|
|
|
49
47
|
message: '{nPosts} tagged with "{tagName}"',
|
|
50
48
|
},
|
|
51
49
|
{
|
|
52
|
-
nPosts: blogPostsPlural(count),
|
|
53
|
-
tagName,
|
|
50
|
+
nPosts: blogPostsPlural(tag.count),
|
|
51
|
+
tagName: tag.label,
|
|
54
52
|
},
|
|
55
53
|
);
|
|
56
54
|
return (
|
|
@@ -65,7 +63,7 @@ export default function BlogTagsPostsPage(props) {
|
|
|
65
63
|
<header className="margin-bottom--xl">
|
|
66
64
|
<h1>{title}</h1>
|
|
67
65
|
|
|
68
|
-
<Link href={allTagsPath}>
|
|
66
|
+
<Link href={tag.allTagsPath}>
|
|
69
67
|
<Translate
|
|
70
68
|
id="theme.tags.tagsPageLink"
|
|
71
69
|
description="The label of the link targeting the tag list page">
|
|
@@ -56,8 +56,8 @@ export default function DocTagDocListPage({tag}) {
|
|
|
56
56
|
message: '{nDocsTagged} with "{tagName}"',
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
|
-
nDocsTagged: nDocsTaggedPlural(tag.
|
|
60
|
-
tagName: tag.
|
|
59
|
+
nDocsTagged: nDocsTaggedPlural(tag.count),
|
|
60
|
+
tagName: tag.label,
|
|
61
61
|
},
|
|
62
62
|
);
|
|
63
63
|
return (
|
|
@@ -83,7 +83,7 @@ export default function DocTagDocListPage({tag}) {
|
|
|
83
83
|
</Link>
|
|
84
84
|
</header>
|
|
85
85
|
<section className="margin-vert--lg">
|
|
86
|
-
{tag.
|
|
86
|
+
{tag.items.map((doc) => (
|
|
87
87
|
<DocItem key={doc.id} doc={doc} />
|
|
88
88
|
))}
|
|
89
89
|
</section>
|
|
@@ -8,8 +8,7 @@ import React from 'react';
|
|
|
8
8
|
import clsx from 'clsx';
|
|
9
9
|
import Link from '@docusaurus/Link';
|
|
10
10
|
import styles from './styles.module.css';
|
|
11
|
-
export default function Tag(
|
|
12
|
-
const {permalink, name, count} = props;
|
|
11
|
+
export default function Tag({permalink, label, count}) {
|
|
13
12
|
return (
|
|
14
13
|
<Link
|
|
15
14
|
href={permalink}
|
|
@@ -17,7 +16,7 @@ export default function Tag(props) {
|
|
|
17
16
|
styles.tag,
|
|
18
17
|
count ? styles.tagWithCount : styles.tagRegular,
|
|
19
18
|
)}>
|
|
20
|
-
{
|
|
19
|
+
{label}
|
|
21
20
|
{count && <span>{count}</span>}
|
|
22
21
|
</Link>
|
|
23
22
|
);
|
|
@@ -22,7 +22,7 @@ export default function TagsListInline({tags}) {
|
|
|
22
22
|
<ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
|
|
23
23
|
{tags.map(({label, permalink: tagPermalink}) => (
|
|
24
24
|
<li key={tagPermalink} className={styles.tag}>
|
|
25
|
-
<Tag
|
|
25
|
+
<Tag label={label} permalink={tagPermalink} />
|
|
26
26
|
</li>
|
|
27
27
|
))}
|
|
28
28
|
</ul>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docusaurus/theme-classic",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-4838",
|
|
4
4
|
"description": "Classic theme for Docusaurus",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/theme-classic.d.ts",
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
"format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@docusaurus/core": "0.0.0-
|
|
25
|
-
"@docusaurus/plugin-content-blog": "0.0.0-
|
|
26
|
-
"@docusaurus/plugin-content-docs": "0.0.0-
|
|
27
|
-
"@docusaurus/plugin-content-pages": "0.0.0-
|
|
28
|
-
"@docusaurus/theme-common": "0.0.0-
|
|
29
|
-
"@docusaurus/theme-translations": "0.0.0-
|
|
30
|
-
"@docusaurus/utils": "0.0.0-
|
|
31
|
-
"@docusaurus/utils-common": "0.0.0-
|
|
32
|
-
"@docusaurus/utils-validation": "0.0.0-
|
|
24
|
+
"@docusaurus/core": "0.0.0-4838",
|
|
25
|
+
"@docusaurus/plugin-content-blog": "0.0.0-4838",
|
|
26
|
+
"@docusaurus/plugin-content-docs": "0.0.0-4838",
|
|
27
|
+
"@docusaurus/plugin-content-pages": "0.0.0-4838",
|
|
28
|
+
"@docusaurus/theme-common": "0.0.0-4838",
|
|
29
|
+
"@docusaurus/theme-translations": "0.0.0-4838",
|
|
30
|
+
"@docusaurus/utils": "0.0.0-4838",
|
|
31
|
+
"@docusaurus/utils-common": "0.0.0-4838",
|
|
32
|
+
"@docusaurus/utils-validation": "0.0.0-4838",
|
|
33
33
|
"@mdx-js/react": "^1.6.22",
|
|
34
34
|
"clsx": "^1.1.1",
|
|
35
35
|
"copy-text-to-clipboard": "^3.0.1",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"rtlcss": "^3.5.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@docusaurus/module-type-aliases": "0.0.0-
|
|
46
|
-
"@docusaurus/types": "0.0.0-
|
|
45
|
+
"@docusaurus/module-type-aliases": "0.0.0-4838",
|
|
46
|
+
"@docusaurus/types": "0.0.0-4838",
|
|
47
47
|
"@types/mdx-js__react": "^1.5.5",
|
|
48
48
|
"@types/prismjs": "^1.26.0",
|
|
49
49
|
"@types/rtlcss": "^3.1.3",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"engines": {
|
|
60
60
|
"node": ">=14"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "e9b56f063a75e637632bdede9cc507bece7c06f1"
|
|
63
63
|
}
|
|
@@ -20,11 +20,7 @@ export default function BlogLayout(props: Props): JSX.Element {
|
|
|
20
20
|
<Layout {...layoutProps}>
|
|
21
21
|
<div className="container margin-vert--lg">
|
|
22
22
|
<div className="row">
|
|
23
|
-
{
|
|
24
|
-
<aside className="col col--3">
|
|
25
|
-
<BlogSidebar sidebar={sidebar} />
|
|
26
|
-
</aside>
|
|
27
|
-
)}
|
|
23
|
+
<BlogSidebar sidebar={sidebar} />
|
|
28
24
|
<main
|
|
29
25
|
className={clsx('col', {
|
|
30
26
|
'col--7': hasSidebar,
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import clsx from 'clsx';
|
|
10
|
+
import Link from '@docusaurus/Link';
|
|
11
|
+
import {translate} from '@docusaurus/Translate';
|
|
12
|
+
|
|
13
|
+
import styles from './styles.module.css';
|
|
14
|
+
import type {Props} from '@theme/BlogSidebar/Desktop';
|
|
15
|
+
|
|
16
|
+
export default function BlogSidebarDesktop({sidebar}: Props): JSX.Element {
|
|
17
|
+
return (
|
|
18
|
+
<aside className="col col--3">
|
|
19
|
+
<nav
|
|
20
|
+
className={clsx(styles.sidebar, 'thin-scrollbar')}
|
|
21
|
+
aria-label={translate({
|
|
22
|
+
id: 'theme.blog.sidebar.navAriaLabel',
|
|
23
|
+
message: 'Blog recent posts navigation',
|
|
24
|
+
description: 'The ARIA label for recent posts in the blog sidebar',
|
|
25
|
+
})}>
|
|
26
|
+
<div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
|
|
27
|
+
{sidebar.title}
|
|
28
|
+
</div>
|
|
29
|
+
<ul className={styles.sidebarItemList}>
|
|
30
|
+
{sidebar.items.map((item) => (
|
|
31
|
+
<li key={item.permalink} className={styles.sidebarItem}>
|
|
32
|
+
<Link
|
|
33
|
+
isNavLink
|
|
34
|
+
to={item.permalink}
|
|
35
|
+
className={styles.sidebarItemLink}
|
|
36
|
+
activeClassName={styles.sidebarItemLinkActive}>
|
|
37
|
+
{item.title}
|
|
38
|
+
</Link>
|
|
39
|
+
</li>
|
|
40
|
+
))}
|
|
41
|
+
</ul>
|
|
42
|
+
</nav>
|
|
43
|
+
</aside>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import Link from '@docusaurus/Link';
|
|
10
|
+
import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
|
|
11
|
+
import type {Props} from '@theme/BlogSidebar/Mobile';
|
|
12
|
+
|
|
13
|
+
function BlogSidebarMobileSecondaryMenu({sidebar}: Props): JSX.Element {
|
|
14
|
+
return (
|
|
15
|
+
<ul className="menu__list">
|
|
16
|
+
{sidebar.items.map((item) => (
|
|
17
|
+
<li key={item.permalink} className="menu__list-item">
|
|
18
|
+
<Link
|
|
19
|
+
isNavLink
|
|
20
|
+
to={item.permalink}
|
|
21
|
+
className="menu__link"
|
|
22
|
+
activeClassName="menu__link--active">
|
|
23
|
+
{item.title}
|
|
24
|
+
</Link>
|
|
25
|
+
</li>
|
|
26
|
+
))}
|
|
27
|
+
</ul>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default function BlogSidebarMobile(props: Props): JSX.Element {
|
|
32
|
+
return (
|
|
33
|
+
<NavbarSecondaryMenuFiller
|
|
34
|
+
component={BlogSidebarMobileSecondaryMenu}
|
|
35
|
+
props={props}
|
|
36
|
+
/>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
@@ -6,61 +6,19 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
NavbarSecondaryMenuFiller,
|
|
14
|
-
useWindowSize,
|
|
15
|
-
} from '@docusaurus/theme-common';
|
|
9
|
+
import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
|
|
10
|
+
import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
|
|
11
|
+
import {useWindowSize} from '@docusaurus/theme-common';
|
|
16
12
|
import type {Props} from '@theme/BlogSidebar';
|
|
17
|
-
import styles from './styles.module.css';
|
|
18
13
|
|
|
19
|
-
function
|
|
20
|
-
sidebar,
|
|
21
|
-
className,
|
|
22
|
-
}: Props & {className?: string}): JSX.Element {
|
|
23
|
-
return (
|
|
24
|
-
<nav
|
|
25
|
-
className={clsx(styles.sidebar, 'thin-scrollbar', className)}
|
|
26
|
-
aria-label={translate({
|
|
27
|
-
id: 'theme.blog.sidebar.navAriaLabel',
|
|
28
|
-
message: 'Blog recent posts navigation',
|
|
29
|
-
description: 'The ARIA label for recent posts in the blog sidebar',
|
|
30
|
-
})}>
|
|
31
|
-
<div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
|
|
32
|
-
{sidebar.title}
|
|
33
|
-
</div>
|
|
34
|
-
<ul className={styles.sidebarItemList}>
|
|
35
|
-
{sidebar.items.map((item) => (
|
|
36
|
-
<li key={item.permalink} className={styles.sidebarItem}>
|
|
37
|
-
<Link
|
|
38
|
-
isNavLink
|
|
39
|
-
to={item.permalink}
|
|
40
|
-
className={styles.sidebarItemLink}
|
|
41
|
-
activeClassName={styles.sidebarItemLinkActive}>
|
|
42
|
-
{item.title}
|
|
43
|
-
</Link>
|
|
44
|
-
</li>
|
|
45
|
-
))}
|
|
46
|
-
</ul>
|
|
47
|
-
</nav>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
export default function BlogSidebar(props: Props): JSX.Element | null {
|
|
14
|
+
export default function BlogSidebar({sidebar}: Props): JSX.Element | null {
|
|
52
15
|
const windowSize = useWindowSize();
|
|
53
|
-
if (
|
|
16
|
+
if (!sidebar?.items.length) {
|
|
54
17
|
return null;
|
|
55
18
|
}
|
|
56
19
|
// Mobile sidebar doesn't need to be server-rendered
|
|
57
20
|
if (windowSize === 'mobile') {
|
|
58
|
-
return
|
|
59
|
-
<NavbarSecondaryMenuFiller
|
|
60
|
-
component={BlogSidebarContent}
|
|
61
|
-
props={{...props, className: 'margin-left--md'}}
|
|
62
|
-
/>
|
|
63
|
-
);
|
|
21
|
+
return <BlogSidebarMobile sidebar={sidebar} />;
|
|
64
22
|
}
|
|
65
|
-
return <
|
|
23
|
+
return <BlogSidebarDesktop sidebar={sidebar} />;
|
|
66
24
|
}
|
|
@@ -19,8 +19,7 @@ import {
|
|
|
19
19
|
import SearchMetadata from '../SearchMetadata';
|
|
20
20
|
import clsx from 'clsx';
|
|
21
21
|
|
|
22
|
-
export default function BlogTagsListPage(
|
|
23
|
-
const {tags, sidebar} = props;
|
|
22
|
+
export default function BlogTagsListPage({tags, sidebar}: Props): JSX.Element {
|
|
24
23
|
const title = translateTagsPageTitle();
|
|
25
24
|
return (
|
|
26
25
|
<HtmlClassNameProvider
|
|
@@ -32,7 +31,7 @@ export default function BlogTagsListPage(props: Props): JSX.Element {
|
|
|
32
31
|
<SearchMetadata tag="blog_tags_list" />
|
|
33
32
|
<BlogLayout sidebar={sidebar}>
|
|
34
33
|
<h1>{title}</h1>
|
|
35
|
-
<TagsListByLetter tags={
|
|
34
|
+
<TagsListByLetter tags={tags} />
|
|
36
35
|
</BlogLayout>
|
|
37
36
|
</HtmlClassNameProvider>
|
|
38
37
|
);
|
|
@@ -40,9 +40,12 @@ function useBlogPostsPlural() {
|
|
|
40
40
|
);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
export default function BlogTagsPostsPage(
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
export default function BlogTagsPostsPage({
|
|
44
|
+
tag,
|
|
45
|
+
items,
|
|
46
|
+
sidebar,
|
|
47
|
+
listMetadata,
|
|
48
|
+
}: Props): JSX.Element {
|
|
46
49
|
const blogPostsPlural = useBlogPostsPlural();
|
|
47
50
|
const title = translate(
|
|
48
51
|
{
|
|
@@ -50,7 +53,7 @@ export default function BlogTagsPostsPage(props: Props): JSX.Element {
|
|
|
50
53
|
description: 'The title of the page for a blog tag',
|
|
51
54
|
message: '{nPosts} tagged with "{tagName}"',
|
|
52
55
|
},
|
|
53
|
-
{nPosts: blogPostsPlural(count), tagName},
|
|
56
|
+
{nPosts: blogPostsPlural(tag.count), tagName: tag.label},
|
|
54
57
|
);
|
|
55
58
|
|
|
56
59
|
return (
|
|
@@ -65,7 +68,7 @@ export default function BlogTagsPostsPage(props: Props): JSX.Element {
|
|
|
65
68
|
<header className="margin-bottom--xl">
|
|
66
69
|
<h1>{title}</h1>
|
|
67
70
|
|
|
68
|
-
<Link href={allTagsPath}>
|
|
71
|
+
<Link href={tag.allTagsPath}>
|
|
69
72
|
<Translate
|
|
70
73
|
id="theme.tags.tagsPageLink"
|
|
71
74
|
description="The label of the link targeting the tag list page">
|
|
@@ -15,7 +15,6 @@ import {
|
|
|
15
15
|
ThemeClassNames,
|
|
16
16
|
usePluralForm,
|
|
17
17
|
} from '@docusaurus/theme-common';
|
|
18
|
-
import type {PropTagDocListDoc} from '@docusaurus/plugin-content-docs';
|
|
19
18
|
import Translate, {translate} from '@docusaurus/Translate';
|
|
20
19
|
import type {Props} from '@theme/DocTagDocListPage';
|
|
21
20
|
import SearchMetadata from '@theme/SearchMetadata';
|
|
@@ -39,7 +38,7 @@ function useNDocsTaggedPlural() {
|
|
|
39
38
|
);
|
|
40
39
|
}
|
|
41
40
|
|
|
42
|
-
function DocItem({doc}: {doc:
|
|
41
|
+
function DocItem({doc}: {doc: Props['tag']['items'][number]}): JSX.Element {
|
|
43
42
|
return (
|
|
44
43
|
<article className="margin-vert--lg">
|
|
45
44
|
<Link to={doc.permalink}>
|
|
@@ -58,7 +57,7 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
|
|
|
58
57
|
description: 'The title of the page for a docs tag',
|
|
59
58
|
message: '{nDocsTagged} with "{tagName}"',
|
|
60
59
|
},
|
|
61
|
-
{nDocsTagged: nDocsTaggedPlural(tag.
|
|
60
|
+
{nDocsTagged: nDocsTaggedPlural(tag.count), tagName: tag.label},
|
|
62
61
|
);
|
|
63
62
|
|
|
64
63
|
return (
|
|
@@ -84,7 +83,7 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
|
|
|
84
83
|
</Link>
|
|
85
84
|
</header>
|
|
86
85
|
<section className="margin-vert--lg">
|
|
87
|
-
{tag.
|
|
86
|
+
{tag.items.map((doc) => (
|
|
88
87
|
<DocItem key={doc.id} doc={doc} />
|
|
89
88
|
))}
|
|
90
89
|
</section>
|
package/src/theme/Tag/index.tsx
CHANGED
|
@@ -12,9 +12,7 @@ import type {Props} from '@theme/Tag';
|
|
|
12
12
|
|
|
13
13
|
import styles from './styles.module.css';
|
|
14
14
|
|
|
15
|
-
export default function Tag(
|
|
16
|
-
const {permalink, name, count} = props;
|
|
17
|
-
|
|
15
|
+
export default function Tag({permalink, label, count}: Props): JSX.Element {
|
|
18
16
|
return (
|
|
19
17
|
<Link
|
|
20
18
|
href={permalink}
|
|
@@ -22,7 +20,7 @@ export default function Tag(props: Props): JSX.Element {
|
|
|
22
20
|
styles.tag,
|
|
23
21
|
count ? styles.tagWithCount : styles.tagRegular,
|
|
24
22
|
)}>
|
|
25
|
-
{
|
|
23
|
+
{label}
|
|
26
24
|
{count && <span>{count}</span>}
|
|
27
25
|
</Link>
|
|
28
26
|
);
|
|
@@ -26,7 +26,7 @@ export default function TagsListInline({tags}: Props): JSX.Element {
|
|
|
26
26
|
<ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
|
|
27
27
|
{tags.map(({label, permalink: tagPermalink}) => (
|
|
28
28
|
<li key={tagPermalink} className={styles.tag}>
|
|
29
|
-
<Tag
|
|
29
|
+
<Tag label={label} permalink={tagPermalink} />
|
|
30
30
|
</li>
|
|
31
31
|
))}
|
|
32
32
|
</ul>
|
package/src/theme-classic.d.ts
CHANGED
|
@@ -47,13 +47,33 @@ declare module '@theme/BlogListPaginator' {
|
|
|
47
47
|
export default function BlogListPaginator(props: Props): JSX.Element;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
declare module '@theme/BlogSidebar' {
|
|
50
|
+
declare module '@theme/BlogSidebar/Desktop' {
|
|
51
|
+
import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
|
|
52
|
+
|
|
53
|
+
export interface Props {
|
|
54
|
+
readonly sidebar: BlogSidebar;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default function BlogSidebarDesktop(props: Props): JSX.Element;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
declare module '@theme/BlogSidebar/Mobile' {
|
|
51
61
|
import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
|
|
52
62
|
|
|
53
63
|
export interface Props {
|
|
54
64
|
readonly sidebar: BlogSidebar;
|
|
55
65
|
}
|
|
56
66
|
|
|
67
|
+
export default function BlogSidebarMobile(props: Props): JSX.Element;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
declare module '@theme/BlogSidebar' {
|
|
71
|
+
import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
|
|
72
|
+
|
|
73
|
+
export interface Props {
|
|
74
|
+
readonly sidebar?: BlogSidebar;
|
|
75
|
+
}
|
|
76
|
+
|
|
57
77
|
export default function BlogSidebar(props: Props): JSX.Element;
|
|
58
78
|
}
|
|
59
79
|
|
|
@@ -1011,7 +1031,7 @@ declare module '@theme/IconExternalLink' {
|
|
|
1011
1031
|
}
|
|
1012
1032
|
|
|
1013
1033
|
declare module '@theme/TagsListByLetter' {
|
|
1014
|
-
import type {TagsListItem} from '@docusaurus/
|
|
1034
|
+
import type {TagsListItem} from '@docusaurus/types';
|
|
1015
1035
|
|
|
1016
1036
|
export interface Props {
|
|
1017
1037
|
readonly tags: readonly TagsListItem[];
|
|
@@ -1020,7 +1040,7 @@ declare module '@theme/TagsListByLetter' {
|
|
|
1020
1040
|
}
|
|
1021
1041
|
|
|
1022
1042
|
declare module '@theme/TagsListInline' {
|
|
1023
|
-
import type {Tag} from '@docusaurus/
|
|
1043
|
+
import type {Tag} from '@docusaurus/types';
|
|
1024
1044
|
|
|
1025
1045
|
export interface Props {
|
|
1026
1046
|
readonly tags: readonly Tag[];
|
|
@@ -1029,7 +1049,7 @@ declare module '@theme/TagsListInline' {
|
|
|
1029
1049
|
}
|
|
1030
1050
|
|
|
1031
1051
|
declare module '@theme/Tag' {
|
|
1032
|
-
import type {TagsListItem} from '@docusaurus/
|
|
1052
|
+
import type {TagsListItem} from '@docusaurus/types';
|
|
1033
1053
|
import type {Optional} from 'utility-types';
|
|
1034
1054
|
|
|
1035
1055
|
export interface Props extends Optional<TagsListItem, 'count'> {}
|