@docusaurus/theme-classic 0.0.0-4834 → 0.0.0-4837

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.
@@ -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
 
@@ -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
- {hasSidebar && (
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
+ }
@@ -40,11 +40,7 @@
40
40
  }
41
41
 
42
42
  @media (max-width: 996px) {
43
- .sidebarDesktop {
44
- display: none;
45
- }
46
-
47
43
  .sidebar {
48
- top: 0;
44
+ display: none;
49
45
  }
50
46
  }
@@ -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 clsx from 'clsx';
9
- import Link from '@docusaurus/Link';
10
- import {translate} from '@docusaurus/Translate';
11
- import {
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 (props.sidebar.items.length === 0) {
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 <BlogSidebarContent {...props} className={styles.sidebarDesktop} />;
22
+ return <BlogSidebarDesktop sidebar={sidebar} />;
63
23
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-classic",
3
- "version": "0.0.0-4834",
3
+ "version": "0.0.0-4837",
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-4834",
25
- "@docusaurus/plugin-content-blog": "0.0.0-4834",
26
- "@docusaurus/plugin-content-docs": "0.0.0-4834",
27
- "@docusaurus/plugin-content-pages": "0.0.0-4834",
28
- "@docusaurus/theme-common": "0.0.0-4834",
29
- "@docusaurus/theme-translations": "0.0.0-4834",
30
- "@docusaurus/utils": "0.0.0-4834",
31
- "@docusaurus/utils-common": "0.0.0-4834",
32
- "@docusaurus/utils-validation": "0.0.0-4834",
24
+ "@docusaurus/core": "0.0.0-4837",
25
+ "@docusaurus/plugin-content-blog": "0.0.0-4837",
26
+ "@docusaurus/plugin-content-docs": "0.0.0-4837",
27
+ "@docusaurus/plugin-content-pages": "0.0.0-4837",
28
+ "@docusaurus/theme-common": "0.0.0-4837",
29
+ "@docusaurus/theme-translations": "0.0.0-4837",
30
+ "@docusaurus/utils": "0.0.0-4837",
31
+ "@docusaurus/utils-common": "0.0.0-4837",
32
+ "@docusaurus/utils-validation": "0.0.0-4837",
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-4834",
46
- "@docusaurus/types": "0.0.0-4834",
45
+ "@docusaurus/module-type-aliases": "0.0.0-4837",
46
+ "@docusaurus/types": "0.0.0-4837",
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": "1d9bc61905d4fa9b83867a74f78d59bb6cd95559"
62
+ "gitHead": "475b73ed768e51837beba5fb7bb3885716120e9a"
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
- {hasSidebar && (
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
+ }
@@ -40,11 +40,7 @@
40
40
  }
41
41
 
42
42
  @media (max-width: 996px) {
43
- .sidebarDesktop {
44
- display: none;
45
- }
46
-
47
43
  .sidebar {
48
- top: 0;
44
+ display: none;
49
45
  }
50
46
  }
@@ -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 clsx from 'clsx';
10
- import Link from '@docusaurus/Link';
11
- import {translate} from '@docusaurus/Translate';
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 BlogSidebarContent({
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 (props.sidebar.items.length === 0) {
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 <BlogSidebarContent {...props} className={styles.sidebarDesktop} />;
23
+ return <BlogSidebarDesktop sidebar={sidebar} />;
66
24
  }
@@ -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