diff --git a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts
index 3a800e8617d7..833c28465c89 100644
--- a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts
+++ b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts
@@ -28,6 +28,14 @@ export default function getSwizzleConfig(): SwizzleConfig {
description:
'The color mode toggle to switch between light and dark mode.',
},
+ 'DocBreadcrumbs/Items': {
+ actions: {
+ eject: 'unsafe',
+ wrap: 'forbidden', // Can't wrap a folder
+ },
+ description:
+ 'The components responsible for rendering the breadcrumb items',
+ },
DocCardList: {
actions: {
eject: 'safe',
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index b3b5a250a256..eac330fc4e6d 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -1371,3 +1371,7 @@ declare module '@theme/prism-include-languages' {
PrismObject: typeof PrismNamespace,
): void;
}
+
+declare module '@theme/DocBreadcrumbs/Items/Home' {
+ export default function HomeBreadcrumbItem(): JSX.Element;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx
new file mode 100644
index 000000000000..cb8ae8d518b3
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx
@@ -0,0 +1,33 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate';
+import IconHome from '@theme/Icon/Home';
+
+import styles from './styles.module.css';
+
+export default function HomeBreadcrumbItem(): JSX.Element {
+ const homeHref = useBaseUrl('/');
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css
new file mode 100644
index 000000000000..81c9f729b749
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css
@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+.breadcrumbHomeIcon {
+ position: relative;
+ top: 1px;
+ vertical-align: top;
+ height: 1.1rem;
+ width: 1.1rem;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
index 1e296be0bded..74e02efdf119 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
@@ -13,9 +13,8 @@ import {
useHomePageRoute,
} from '@docusaurus/theme-common/internal';
import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
import {translate} from '@docusaurus/Translate';
-import IconHome from '@theme/Icon/Home';
+import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
import styles from './styles.module.css';
@@ -79,24 +78,6 @@ function BreadcrumbsItem({
);
}
-function HomeBreadcrumbItem() {
- const homeHref = useBaseUrl('/');
- return (
-
-
-
-
-
- );
-}
-
export default function DocBreadcrumbs(): JSX.Element | null {
const breadcrumbs = useSidebarBreadcrumbs();
const homePageRoute = useHomePageRoute();
diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css
index 5794e1b3c9fa..a400c5d9e622 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css
@@ -9,11 +9,3 @@
--ifm-breadcrumb-size-multiplier: 0.8;
margin-bottom: 0.8rem;
}
-
-.breadcrumbHomeIcon {
- position: relative;
- top: 1px;
- vertical-align: top;
- height: 1.1rem;
- width: 1.1rem;
-}
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
index 2971f6e9f8c7..31c20d35685a 100644
--- a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap
@@ -1,5 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/index.css 1`] = `
+".testClass {
+ background: black;
+}
+"
+`;
+
+exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = `
+".testClass {
+ background: black;
+}
+"
+`;
+
+exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/styles.module.css 1`] = `
+".testClass {
+ background: black;
+}
+"
+`;
+
exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/Sibling.css 1`] = `
".testClass {
background: black;
@@ -17,10 +38,44 @@ exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/index.css 1`] = `
exports[`swizzle eject ComponentInFolder JS: theme dir tree 1`] = `
"theme
└── ComponentInFolder
+ ├── ComponentInSubFolder
+ │ ├── index.css
+ │ ├── styles.css
+ │ └── styles.module.css
├── Sibling.css
└── index.css"
`;
+exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/index.css 1`] = `
+".testClass {
+ background: black;
+}
+"
+`;
+
+exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/index.tsx 1`] = `
+"import React from 'react';
+
+export default function ComponentInSubFolder() {
+ return ComponentInSubFolder
;
+}
+"
+`;
+
+exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = `
+".testClass {
+ background: black;
+}
+"
+`;
+
+exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/styles.module.css 1`] = `
+".testClass {
+ background: black;
+}
+"
+`;
+
exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/Sibling.css 1`] = `
".testClass {
background: black;
@@ -56,6 +111,11 @@ export default function ComponentInFolder() {
exports[`swizzle eject ComponentInFolder TS: theme dir tree 1`] = `
"theme
└── ComponentInFolder
+ ├── ComponentInSubFolder
+ │ ├── index.css
+ │ ├── index.tsx
+ │ ├── styles.css
+ │ └── styles.module.css
├── Sibling.css
├── Sibling.tsx
├── index.css
diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts b/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts
index b6e7bed38bde..d13a32cc5bd6 100644
--- a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts
+++ b/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts
@@ -110,9 +110,10 @@ describe('eject', () => {
it(`eject ${Components.ComponentInFolder}`, async () => {
const result = await testEject('eject', Components.ComponentInFolder);
expect(result.createdFiles).toEqual([
- // TODO do we really want to copy those Sibling components?
- // It's hard to filter those reliably
- // (index.* is not good, we need to include styles.css too)
+ 'ComponentInFolder/ComponentInSubFolder/index.css',
+ 'ComponentInFolder/ComponentInSubFolder/index.tsx',
+ 'ComponentInFolder/ComponentInSubFolder/styles.css',
+ 'ComponentInFolder/ComponentInSubFolder/styles.module.css',
'ComponentInFolder/Sibling.css',
'ComponentInFolder/Sibling.tsx',
'ComponentInFolder/index.css',
@@ -121,6 +122,11 @@ describe('eject', () => {
expect(result.tree).toMatchInlineSnapshot(`
"theme
└── ComponentInFolder
+ ├── ComponentInSubFolder
+ │ ├── index.css
+ │ ├── index.tsx
+ │ ├── styles.css
+ │ └── styles.module.css
├── Sibling.css
├── Sibling.tsx
├── index.css
diff --git a/packages/docusaurus/src/commands/swizzle/actions.ts b/packages/docusaurus/src/commands/swizzle/actions.ts
index a9082737c104..1bbdb6f47d79 100644
--- a/packages/docusaurus/src/commands/swizzle/actions.ts
+++ b/packages/docusaurus/src/commands/swizzle/actions.ts
@@ -56,7 +56,7 @@ export async function eject({
const isDirectory = await isDir(fromPath);
const globPattern = isDirectory
? // Do we really want to copy all components?
- path.join(fromPath, '*')
+ path.join(fromPath, '**/*')
: `${fromPath}.*`;
const globPatternPosix = posixPath(globPattern);
@@ -67,6 +67,7 @@ export async function eject({
// When ejecting JS components, we want to avoid emitting TS files
// In particular the .d.ts files that theme build output contains
typescript ? null : '**/*.{d.ts,ts,tsx}',
+ '**/{__fixtures__,__tests__}/*',
]),
});