Skip to content

Commit

Permalink
fix(theme-classic) extract HomeBreadcrumbItem + fix swizzle bugs (#8445)
Browse files Browse the repository at this point in the history
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
  • Loading branch information
3 people committed Jan 26, 2023
1 parent 25a4ec3 commit 704365c
Show file tree
Hide file tree
Showing 9 changed files with 131 additions and 32 deletions.
8 changes: 8 additions & 0 deletions packages/docusaurus-theme-classic/src/getSwizzleConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 4 additions & 0 deletions packages/docusaurus-theme-classic/src/theme-classic.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
@@ -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 (
<li className="breadcrumbs__item">
<Link
aria-label={translate({
id: 'theme.docs.breadcrumbs.home',
message: 'Home page',
description: 'The ARIA label for the home page in the breadcrumbs',
})}
className="breadcrumbs__link"
href={homeHref}>
<IconHome className={styles.breadcrumbHomeIcon} />
</Link>
</li>
);
}
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -79,24 +78,6 @@ function BreadcrumbsItem({
);
}

function HomeBreadcrumbItem() {
const homeHref = useBaseUrl('/');
return (
<li className="breadcrumbs__item">
<Link
aria-label={translate({
id: 'theme.docs.breadcrumbs.home',
message: 'Home page',
description: 'The ARIA label for the home page in the breadcrumbs',
})}
className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
href={homeHref}>
<IconHome className={styles.breadcrumbHomeIcon} />
</Link>
</li>
);
}

export default function DocBreadcrumbs(): JSX.Element | null {
const breadcrumbs = useSidebarBreadcrumbs();
const homePageRoute = useHomePageRoute();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 <div>ComponentInSubFolder</div>;
}
"
`;

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;
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
Expand Down
3 changes: 2 additions & 1 deletion packages/docusaurus/src/commands/swizzle/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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__}/*',
]),
});

Expand Down

0 comments on commit 704365c

Please sign in to comment.