@docusaurus/theme-classic 0.0.0-4962 → 0.0.0-4967

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.
@@ -14,6 +14,7 @@ import styles from './styles.module.css';
14
14
  import clsx from 'clsx';
15
15
  import Link from '@docusaurus/Link';
16
16
  import useBaseUrl from '@docusaurus/useBaseUrl';
17
+ import {translate} from '@docusaurus/Translate';
17
18
  import IconHome from '@theme/IconHome'; // TODO move to design system folder
18
19
 
19
20
  function BreadcrumbsItemLink({children, href, isLast}) {
@@ -30,20 +31,24 @@ function BreadcrumbsItemLink({children, href, isLast}) {
30
31
  return href ? (
31
32
  <Link className={className} href={href} itemProp="item">
32
33
  <span itemProp="name">{children}</span>
33
- </Link>
34
+ </Link> // TODO Google search console doesn't like breadcrumb items without href.
34
35
  ) : (
35
- <span className={className} itemProp="item name">
36
- {children}
37
- </span>
36
+ // The schema doesn't seem to require `id` for each `item`, although Google
37
+ // insist to infer one, even if it's invalid. Removing `itemProp="item
38
+ // name"` for now, since I don't know how to properly fix it.
39
+ // See https://github.com/facebook/docusaurus/issues/7241
40
+ <span className={className}>{children}</span>
38
41
  );
39
42
  } // TODO move to design system folder
40
43
 
41
- function BreadcrumbsItem({children, active, index}) {
44
+ function BreadcrumbsItem({children, active, index, addMicrodata}) {
42
45
  return (
43
46
  <li
44
- itemScope
45
- itemProp="itemListElement"
46
- itemType="https://schema.org/ListItem"
47
+ {...(addMicrodata && {
48
+ itemScope: true,
49
+ itemProp: 'itemListElement',
50
+ itemType: 'https://schema.org/ListItem',
51
+ })}
47
52
  className={clsx('breadcrumbs__item', {
48
53
  'breadcrumbs__item--active': active,
49
54
  })}>
@@ -58,9 +63,14 @@ function HomeBreadcrumbItem() {
58
63
  return (
59
64
  <li className="breadcrumbs__item">
60
65
  <Link
66
+ aria-label={translate({
67
+ id: 'theme.docs.breadcrumbs.home',
68
+ message: 'Home page',
69
+ description: 'The ARIA label for the home page in the breadcrumbs',
70
+ })}
61
71
  className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
62
72
  href={homeHref}>
63
- <IconHome className={styles.icon} />
73
+ <IconHome className={styles.breadcrumbHomeIcon} />
64
74
  </Link>
65
75
  </li>
66
76
  );
@@ -80,7 +90,11 @@ export default function DocBreadcrumbs() {
80
90
  ThemeClassNames.docs.docBreadcrumbs,
81
91
  styles.breadcrumbsContainer,
82
92
  )}
83
- aria-label="breadcrumbs">
93
+ aria-label={translate({
94
+ id: 'theme.docs.breadcrumbs.navAriaLabel',
95
+ message: 'Breadcrumbs',
96
+ description: 'The ARIA label for the breadcrumbs',
97
+ })}>
84
98
  <ul
85
99
  className="breadcrumbs"
86
100
  itemScope
@@ -89,7 +103,11 @@ export default function DocBreadcrumbs() {
89
103
  {breadcrumbs.map((item, idx) => {
90
104
  const isLast = idx === breadcrumbs.length - 1;
91
105
  return (
92
- <BreadcrumbsItem key={idx} active={isLast} index={idx}>
106
+ <BreadcrumbsItem
107
+ key={idx}
108
+ active={isLast}
109
+ index={idx}
110
+ addMicrodata={!!item.href}>
93
111
  <BreadcrumbsItemLink href={item.href} isLast={isLast}>
94
112
  {item.label}
95
113
  </BreadcrumbsItemLink>
@@ -10,8 +10,10 @@
10
10
  margin-bottom: 0.8rem;
11
11
  }
12
12
 
13
- .icon {
14
- vertical-align: middle;
13
+ .breadcrumbHomeIcon {
14
+ position: relative;
15
+ top: 1px;
16
+ vertical-align: top;
15
17
  height: 1.1rem;
16
18
  width: 1.1rem;
17
19
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-classic",
3
- "version": "0.0.0-4962",
3
+ "version": "0.0.0-4967",
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-4962",
25
- "@docusaurus/plugin-content-blog": "0.0.0-4962",
26
- "@docusaurus/plugin-content-docs": "0.0.0-4962",
27
- "@docusaurus/plugin-content-pages": "0.0.0-4962",
28
- "@docusaurus/theme-common": "0.0.0-4962",
29
- "@docusaurus/theme-translations": "0.0.0-4962",
30
- "@docusaurus/utils": "0.0.0-4962",
31
- "@docusaurus/utils-common": "0.0.0-4962",
32
- "@docusaurus/utils-validation": "0.0.0-4962",
24
+ "@docusaurus/core": "0.0.0-4967",
25
+ "@docusaurus/plugin-content-blog": "0.0.0-4967",
26
+ "@docusaurus/plugin-content-docs": "0.0.0-4967",
27
+ "@docusaurus/plugin-content-pages": "0.0.0-4967",
28
+ "@docusaurus/theme-common": "0.0.0-4967",
29
+ "@docusaurus/theme-translations": "0.0.0-4967",
30
+ "@docusaurus/utils": "0.0.0-4967",
31
+ "@docusaurus/utils-common": "0.0.0-4967",
32
+ "@docusaurus/utils-validation": "0.0.0-4967",
33
33
  "@mdx-js/react": "^1.6.22",
34
34
  "clsx": "^1.1.1",
35
35
  "copy-text-to-clipboard": "^3.0.1",
@@ -46,8 +46,8 @@
46
46
  "@babel/cli": "^7.17.10",
47
47
  "@babel/core": "^7.17.10",
48
48
  "@babel/preset-typescript": "^7.16.7",
49
- "@docusaurus/module-type-aliases": "0.0.0-4962",
50
- "@docusaurus/types": "0.0.0-4962",
49
+ "@docusaurus/module-type-aliases": "0.0.0-4967",
50
+ "@docusaurus/types": "0.0.0-4967",
51
51
  "@types/mdx-js__react": "^1.5.5",
52
52
  "@types/nprogress": "^0.2.0",
53
53
  "@types/prismjs": "^1.26.0",
@@ -64,5 +64,5 @@
64
64
  "engines": {
65
65
  "node": ">=14"
66
66
  },
67
- "gitHead": "09d93ecee8d2d83cd27166af3c6bf4fb12abf2e7"
67
+ "gitHead": "bc45d84f5714bd2f8503336e88dad76e3d9268b5"
68
68
  }
@@ -15,6 +15,7 @@ import styles from './styles.module.css';
15
15
  import clsx from 'clsx';
16
16
  import Link from '@docusaurus/Link';
17
17
  import useBaseUrl from '@docusaurus/useBaseUrl';
18
+ import {translate} from '@docusaurus/Translate';
18
19
  import IconHome from '@theme/IconHome';
19
20
 
20
21
  // TODO move to design system folder
@@ -40,9 +41,12 @@ function BreadcrumbsItemLink({
40
41
  <span itemProp="name">{children}</span>
41
42
  </Link>
42
43
  ) : (
43
- <span className={className} itemProp="item name">
44
- {children}
45
- </span>
44
+ // TODO Google search console doesn't like breadcrumb items without href.
45
+ // The schema doesn't seem to require `id` for each `item`, although Google
46
+ // insist to infer one, even if it's invalid. Removing `itemProp="item
47
+ // name"` for now, since I don't know how to properly fix it.
48
+ // See https://github.com/facebook/docusaurus/issues/7241
49
+ <span className={className}>{children}</span>
46
50
  );
47
51
  }
48
52
 
@@ -51,16 +55,20 @@ function BreadcrumbsItem({
51
55
  children,
52
56
  active,
53
57
  index,
58
+ addMicrodata,
54
59
  }: {
55
60
  children: ReactNode;
56
61
  active?: boolean;
57
62
  index: number;
63
+ addMicrodata: boolean;
58
64
  }): JSX.Element {
59
65
  return (
60
66
  <li
61
- itemScope
62
- itemProp="itemListElement"
63
- itemType="https://schema.org/ListItem"
67
+ {...(addMicrodata && {
68
+ itemScope: true,
69
+ itemProp: 'itemListElement',
70
+ itemType: 'https://schema.org/ListItem',
71
+ })}
64
72
  className={clsx('breadcrumbs__item', {
65
73
  'breadcrumbs__item--active': active,
66
74
  })}>
@@ -75,9 +83,14 @@ function HomeBreadcrumbItem() {
75
83
  return (
76
84
  <li className="breadcrumbs__item">
77
85
  <Link
86
+ aria-label={translate({
87
+ id: 'theme.docs.breadcrumbs.home',
88
+ message: 'Home page',
89
+ description: 'The ARIA label for the home page in the breadcrumbs',
90
+ })}
78
91
  className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
79
92
  href={homeHref}>
80
- <IconHome className={styles.icon} />
93
+ <IconHome className={styles.breadcrumbHomeIcon} />
81
94
  </Link>
82
95
  </li>
83
96
  );
@@ -97,7 +110,11 @@ export default function DocBreadcrumbs(): JSX.Element | null {
97
110
  ThemeClassNames.docs.docBreadcrumbs,
98
111
  styles.breadcrumbsContainer,
99
112
  )}
100
- aria-label="breadcrumbs">
113
+ aria-label={translate({
114
+ id: 'theme.docs.breadcrumbs.navAriaLabel',
115
+ message: 'Breadcrumbs',
116
+ description: 'The ARIA label for the breadcrumbs',
117
+ })}>
101
118
  <ul
102
119
  className="breadcrumbs"
103
120
  itemScope
@@ -106,7 +123,11 @@ export default function DocBreadcrumbs(): JSX.Element | null {
106
123
  {breadcrumbs.map((item, idx) => {
107
124
  const isLast = idx === breadcrumbs.length - 1;
108
125
  return (
109
- <BreadcrumbsItem key={idx} active={isLast} index={idx}>
126
+ <BreadcrumbsItem
127
+ key={idx}
128
+ active={isLast}
129
+ index={idx}
130
+ addMicrodata={!!item.href}>
110
131
  <BreadcrumbsItemLink href={item.href} isLast={isLast}>
111
132
  {item.label}
112
133
  </BreadcrumbsItemLink>
@@ -10,8 +10,10 @@
10
10
  margin-bottom: 0.8rem;
11
11
  }
12
12
 
13
- .icon {
14
- vertical-align: middle;
13
+ .breadcrumbHomeIcon {
14
+ position: relative;
15
+ top: 1px;
16
+ vertical-align: top;
15
17
  height: 1.1rem;
16
18
  width: 1.1rem;
17
19
  }