Skip to content

Commit e1d6292

Browse files
3v0k4slorber
3v0k4
and
slorber
authored
fix(theme-classic) extract HomeBreadcrumbItem + fix swizzle bugs (#8445)
Co-authored-by: Sébastien Lorber <[email protected]> Co-authored-by: sebastienlorber <[email protected]>
1 parent 022e005 commit e1d6292

File tree

9 files changed

+131
-32
lines changed

9 files changed

+131
-32
lines changed

‎packages/docusaurus-theme-classic/src/getSwizzleConfig.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,14 @@ export default function getSwizzleConfig(): SwizzleConfig {
143143
description:
144144
'The color mode toggle to switch between light and dark mode.',
145145
},
146+
'DocBreadcrumbs/Items': {
147+
actions: {
148+
eject: 'unsafe',
149+
wrap: 'forbidden', // Can't wrap a folder
150+
},
151+
description:
152+
'The components responsible for rendering the breadcrumb items',
153+
},
146154
DocCardList: {
147155
actions: {
148156
eject: 'safe',

‎packages/docusaurus-theme-classic/src/theme-classic.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1488,3 +1488,7 @@ declare module '@theme/prism-include-languages' {
14881488
PrismObject: typeof PrismNamespace,
14891489
): void;
14901490
}
1491+
1492+
declare module '@theme/DocBreadcrumbs/Items/Home' {
1493+
export default function HomeBreadcrumbItem(): JSX.Element;
1494+
}

‎packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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 useBaseUrl from '@docusaurus/useBaseUrl';
11+
import {translate} from '@docusaurus/Translate';
12+
import IconHome from '@theme/Icon/Home';
13+
14+
import styles from './styles.module.css';
15+
16+
export default function HomeBreadcrumbItem(): JSX.Element {
17+
const homeHref = useBaseUrl('/');
18+
19+
return (
20+
<li className="breadcrumbs__item">
21+
<Link
22+
aria-label={translate({
23+
id: 'theme.docs.breadcrumbs.home',
24+
message: 'Home page',
25+
description: 'The ARIA label for the home page in the breadcrumbs',
26+
})}
27+
className="breadcrumbs__link"
28+
href={homeHref}>
29+
<IconHome className={styles.breadcrumbHomeIcon} />
30+
</Link>
31+
</li>
32+
);
33+
}

‎packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
.breadcrumbHomeIcon {
9+
position: relative;
10+
top: 1px;
11+
vertical-align: top;
12+
height: 1.1rem;
13+
width: 1.1rem;
14+
}

‎packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,8 @@ import {
1313
useHomePageRoute,
1414
} from '@docusaurus/theme-common/internal';
1515
import Link from '@docusaurus/Link';
16-
import useBaseUrl from '@docusaurus/useBaseUrl';
1716
import {translate} from '@docusaurus/Translate';
18-
import IconHome from '@theme/Icon/Home';
17+
import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
1918

2019
import styles from './styles.module.css';
2120

@@ -79,24 +78,6 @@ function BreadcrumbsItem({
7978
);
8079
}
8180

82-
function HomeBreadcrumbItem() {
83-
const homeHref = useBaseUrl('/');
84-
return (
85-
<li className="breadcrumbs__item">
86-
<Link
87-
aria-label={translate({
88-
id: 'theme.docs.breadcrumbs.home',
89-
message: 'Home page',
90-
description: 'The ARIA label for the home page in the breadcrumbs',
91-
})}
92-
className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
93-
href={homeHref}>
94-
<IconHome className={styles.breadcrumbHomeIcon} />
95-
</Link>
96-
</li>
97-
);
98-
}
99-
10081
export default function DocBreadcrumbs(): JSX.Element | null {
10182
const breadcrumbs = useSidebarBreadcrumbs();
10283
const homePageRoute = useHomePageRoute();

‎packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,3 @@
99
--ifm-breadcrumb-size-multiplier: 0.8;
1010
margin-bottom: 0.8rem;
1111
}
12-
13-
.breadcrumbHomeIcon {
14-
position: relative;
15-
top: 1px;
16-
vertical-align: top;
17-
height: 1.1rem;
18-
width: 1.1rem;
19-
}

‎packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/index.css 1`] = `
4+
".testClass {
5+
background: black;
6+
}
7+
"
8+
`;
9+
10+
exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = `
11+
".testClass {
12+
background: black;
13+
}
14+
"
15+
`;
16+
17+
exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/styles.module.css 1`] = `
18+
".testClass {
19+
background: black;
20+
}
21+
"
22+
`;
23+
324
exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/Sibling.css 1`] = `
425
".testClass {
526
background: black;
@@ -17,10 +38,44 @@ exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/index.css 1`] = `
1738
exports[`swizzle eject ComponentInFolder JS: theme dir tree 1`] = `
1839
"theme
1940
└── ComponentInFolder
41+
├── ComponentInSubFolder
42+
│ ├── index.css
43+
│ ├── styles.css
44+
│ └── styles.module.css
2045
├── Sibling.css
2146
└── index.css"
2247
`;
2348

49+
exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/index.css 1`] = `
50+
".testClass {
51+
background: black;
52+
}
53+
"
54+
`;
55+
56+
exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/index.tsx 1`] = `
57+
"import React from 'react';
58+
59+
export default function ComponentInSubFolder() {
60+
return <div>ComponentInSubFolder</div>;
61+
}
62+
"
63+
`;
64+
65+
exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = `
66+
".testClass {
67+
background: black;
68+
}
69+
"
70+
`;
71+
72+
exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/styles.module.css 1`] = `
73+
".testClass {
74+
background: black;
75+
}
76+
"
77+
`;
78+
2479
exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/Sibling.css 1`] = `
2580
".testClass {
2681
background: black;
@@ -56,6 +111,11 @@ export default function ComponentInFolder() {
56111
exports[`swizzle eject ComponentInFolder TS: theme dir tree 1`] = `
57112
"theme
58113
└── ComponentInFolder
114+
├── ComponentInSubFolder
115+
│ ├── index.css
116+
│ ├── index.tsx
117+
│ ├── styles.css
118+
│ └── styles.module.css
59119
├── Sibling.css
60120
├── Sibling.tsx
61121
├── index.css

‎packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,10 @@ describe('eject', () => {
110110
it(`eject ${Components.ComponentInFolder}`, async () => {
111111
const result = await testEject('eject', Components.ComponentInFolder);
112112
expect(result.createdFiles).toEqual([
113-
// TODO do we really want to copy those Sibling components?
114-
// It's hard to filter those reliably
115-
// (index.* is not good, we need to include styles.css too)
113+
'ComponentInFolder/ComponentInSubFolder/index.css',
114+
'ComponentInFolder/ComponentInSubFolder/index.tsx',
115+
'ComponentInFolder/ComponentInSubFolder/styles.css',
116+
'ComponentInFolder/ComponentInSubFolder/styles.module.css',
116117
'ComponentInFolder/Sibling.css',
117118
'ComponentInFolder/Sibling.tsx',
118119
'ComponentInFolder/index.css',
@@ -121,6 +122,11 @@ describe('eject', () => {
121122
expect(result.tree).toMatchInlineSnapshot(`
122123
"theme
123124
└── ComponentInFolder
125+
├── ComponentInSubFolder
126+
│ ├── index.css
127+
│ ├── index.tsx
128+
│ ├── styles.css
129+
│ └── styles.module.css
124130
├── Sibling.css
125131
├── Sibling.tsx
126132
├── index.css

‎packages/docusaurus/src/commands/swizzle/actions.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export async function eject({
5656
const isDirectory = await isDir(fromPath);
5757
const globPattern = isDirectory
5858
? // Do we really want to copy all components?
59-
path.join(fromPath, '*')
59+
path.join(fromPath, '**/*')
6060
: `${fromPath}.*`;
6161

6262
const globPatternPosix = posixPath(globPattern);
@@ -67,6 +67,7 @@ export async function eject({
6767
// When ejecting JS components, we want to avoid emitting TS files
6868
// In particular the .d.ts files that theme build output contains
6969
typescript ? null : '**/*.{d.ts,ts,tsx}',
70+
'**/{__fixtures__,__tests__}/*',
7071
]),
7172
});
7273

0 commit comments

Comments
 (0)