Skip to content

Commit 5a1579f

Browse files
thetaPCthetaPC
committed
chore(swizzled): update to latest changes
1 parent 8e0f80b commit 5a1579f

File tree

9 files changed

+84
-44
lines changed

9 files changed

+84
-44
lines changed

‎docusaurus.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ module.exports = {
8181
},
8282
exclude: ['README.md'],
8383
lastVersion: 'current',
84+
/** @type {import('@docusaurus/plugin-content-docs').VersionOptions} */
8485
versions: {
8586
current: {
8687
label: 'v8',
@@ -333,6 +334,7 @@ module.exports = {
333334
},
334335
},
335336
plugins: [
337+
// Allows usage of Sass/SCSS in the CSS preprocessor.
336338
'docusaurus-plugin-sass',
337339
[
338340
'docusaurus-plugin-module-alias',

‎src/styles/components/_markdown.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ html[data-theme='dark'] {
2424
--ifm-h5-font-size: 1rem;
2525
--ifm-h6-font-size: 0.875rem;
2626

27+
position: relative;
28+
2729
strong,
2830
b {
2931
font-weight: 600;
@@ -40,7 +42,7 @@ html[data-theme='dark'] {
4042

4143
.encapsulation-pill {
4244
position: absolute;
43-
top: calc(var(--ifm-navbar-height) + 4rem);
45+
top: 0;
4446
}
4547

4648
> * {

‎src/styles/custom.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,6 @@ body {
113113
margin: 0;
114114
}
115115

116-
.theme-doc-version-banner {
117-
display: none;
118-
}
119-
120116
.theme-doc-version-badge {
121117
display: none;
122118
}

‎src/theme/DocItem/Layout/index.tsx

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
/**
2+
* DocItemLayout is a component that renders the layout of a page like
3+
* the individual component pages, guide pages, etc.
4+
*
25
* Original source:
36
* @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx
47
*
@@ -17,6 +20,7 @@ import DocItemFooter from '@theme/DocItem/Footer';
1720
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
1821
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
1922
import DocItemContent from '@theme/DocItem/Content';
23+
import ContentVisibility from '@theme/ContentVisibility';
2024
import type {Props} from '@theme/DocItem/Layout';
2125
import styles from '@docusaurus/theme-classic/lib/theme/DocItem/Layout/styles.module.css';
2226

@@ -64,34 +68,42 @@ function useDocDemo() {
6468

6569
export default function DocItemLayout({children, ...props}: Props): JSX.Element {
6670
const docTOC = useDocTOC();
71+
const {metadata} = useDoc();
6772
// CUSTOM CODE
6873
const {demoUrl, demoSourceUrl} = useDocDemo();
6974
// CUSTOM CODE END
7075
return (
71-
<div className="row">
72-
<div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
73-
<DocVersionBanner />
74-
<div className={styles.docItemContainer}>
75-
<article>
76-
<DocVersionBadge />
77-
{docTOC.mobile}
78-
<DocItemContent>{children}</DocItemContent>
79-
<DocItemFooter />
80-
</article>
81-
<DocItemPaginator />
82-
</div>
83-
</div>
76+
<>
8477
{/* ------- CUSTOM CODE -------- */}
85-
{/* Ideally this would only render if there is a demoUrl and the it's a mobile device. However,the `windowSize` does not provide a tablet so we have to hide it through CSS. */}
86-
{demoUrl && (
87-
<div className='col col--4'>
88-
<div className='doc-demo-wrapper'>
89-
<DocDemo url={demoUrl} source={demoSourceUrl} />
78+
{/* Moved to be on top of the inner content. */}
79+
{/* The banner is rendered per version based on the versions config on docusaurus.config.js */}
80+
<DocVersionBanner />
81+
{/* ------- CUSTOM CODE END -------- */}
82+
<div className="row">
83+
<div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
84+
<ContentVisibility metadata={metadata} />
85+
<div className={styles.docItemContainer}>
86+
<article>
87+
<DocVersionBadge />
88+
{docTOC.mobile}
89+
<DocItemContent>{children}</DocItemContent>
90+
<DocItemFooter />
91+
</article>
92+
<DocItemPaginator />
9093
</div>
9194
</div>
92-
)}
93-
{/* ------- CUSTOM CODE END -------- */}
94-
{docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
95-
</div>
95+
{/* ------- CUSTOM CODE -------- */}
96+
{/* Ideally this would only render if there is a demoUrl and the it's a mobile device. However,the `windowSize` does not provide a tablet so we have to hide it through CSS. */}
97+
{demoUrl && (
98+
<div className='col col--4'>
99+
<div className='doc-demo-wrapper'>
100+
<DocDemo url={demoUrl} source={demoSourceUrl} />
101+
</div>
102+
</div>
103+
)}
104+
{/* ------- CUSTOM CODE END -------- */}
105+
{docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
106+
</div>
107+
</>
96108
);
97109
}

‎src/theme/Icon/Edit/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
* - Changed the icon to be the GitHub icon since the icon is used on the `Edit this page` link, which links to the GitHub repo.
77
*/
88

9-
import React from 'react';
9+
import React, { type ReactNode } from 'react';
1010
import clsx from 'clsx';
1111
import type { Props } from '@theme/Icon/Edit';
12+
1213
import styles from '@docusaurus/theme-classic/src/theme/Icon/Edit/styles.module.css';
1314

14-
export default function IconEdit({ className, ...restProps }: Props): JSX.Element {
15+
export default function IconEdit({ className, ...restProps }: Props): ReactNode {
1516
return (
1617
<svg
1718
fill="none"

‎src/theme/Icon/Language/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
* - Changed the language icon in the navbar to use the Ionicons language icon. This provides a bolded version of the language icon.
77
*/
88

9-
import React from 'react';
10-
export default function IconLanguage({ width = 22, height = 22, ...props }) {
9+
import React, { type ReactNode } from 'react';
10+
import type { Props } from '@theme/Icon/Language';
11+
12+
export default function IconLanguage({ width = 22, height = 22, ...props }: Props): ReactNode {
1113
return (
1214
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width={width} height={height} aria-hidden {...props}>
1315
<path

‎src/theme/Layout/index.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* - Removed the navbar. It's been moved to the top of the docs page ({@link ../../DocRoot/Layout/index.tsx}).
77
*/
88

9-
import React from 'react';
9+
import React, { type ReactNode } from 'react';
1010
import clsx from 'clsx';
1111
import ErrorBoundary from '@docusaurus/ErrorBoundary';
1212
import { PageMetadata, SkipToContentFallbackId, ThemeClassNames } from '@docusaurus/theme-common';
@@ -19,7 +19,7 @@ import ErrorPageContent from '@theme/ErrorPageContent';
1919
import type { Props } from '@theme/Layout';
2020
import styles from '@docusaurus/theme-classic/src/theme/Layout/styles.module.css';
2121

22-
export default function Layout(props: Props): JSX.Element {
22+
export default function Layout(props: Props): ReactNode {
2323
const {
2424
children,
2525
noFooter,
@@ -28,7 +28,9 @@ export default function Layout(props: Props): JSX.Element {
2828
title,
2929
description,
3030
} = props;
31+
3132
useKeyboardNavigation();
33+
3234
return (
3335
<LayoutProvider>
3436
<PageMetadata title={title} description={description} />
@@ -42,7 +44,12 @@ export default function Layout(props: Props): JSX.Element {
4244

4345
<div
4446
id={SkipToContentFallbackId}
45-
className={clsx(ThemeClassNames.wrapper.main, styles.mainWrapper, wrapperClassName)}
47+
className={clsx(
48+
// ThemeClassNames.layout.main.container,
49+
ThemeClassNames.wrapper.main,
50+
styles.mainWrapper,
51+
wrapperClassName
52+
)}
4653
>
4754
<ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>{children}</ErrorBoundary>
4855
</div>

‎src/theme/MDXComponents/Table.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/**
2+
* This file is not part of Docusaurus, it is a custom component.
3+
*/
4+
15
import React from 'react';
26

37
export default function MDXTable({ children, ...props }) {

‎src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,42 @@
77
* - Removed the original styles that were applied to the language icon. We want to use our own styles.
88
*/
99

10-
import React from 'react';
10+
import React, { type ReactNode } from 'react';
1111
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
1212
import { useAlternatePageUtils } from '@docusaurus/theme-common/internal';
1313
import { translate } from '@docusaurus/Translate';
1414
import { useLocation } from '@docusaurus/router';
1515
import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
1616
import IconLanguage from '@theme/Icon/Language';
17-
import styles from './styles.module.css';
18-
export default function LocaleDropdownNavbarItem({ mobile, dropdownItemsBefore, dropdownItemsAfter, ...props }) {
17+
import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem';
18+
import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem';
19+
20+
import styles from '@docusaurus/theme-classic/lib/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css';
21+
import customStyles from './styles.module.css';
22+
23+
export default function LocaleDropdownNavbarItem({
24+
mobile,
25+
dropdownItemsBefore,
26+
dropdownItemsAfter,
27+
queryString = '',
28+
...props
29+
}: Props): ReactNode {
1930
const {
2031
i18n: { currentLocale, locales, localeConfigs },
2132
} = useDocusaurusContext();
2233
const alternatePageUtils = useAlternatePageUtils();
2334
const { search, hash } = useLocation();
24-
const localeItems = locales.map((locale) => {
35+
36+
const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
2537
const baseTo = `pathname://${alternatePageUtils.createUrl({
2638
locale,
2739
fullyQualified: false,
2840
})}`;
2941
// preserve ?search#hash suffix on locale switches
30-
const to = `${baseTo}${search}${hash}`;
42+
const to = `${baseTo}${search}${hash}${queryString}`;
3143
return {
32-
label: localeConfigs[locale].label,
33-
lang: localeConfigs[locale].htmlLang,
44+
label: localeConfigs[locale]!.label,
45+
lang: localeConfigs[locale]!.htmlLang,
3446
to,
3547
target: '_self',
3648
autoAddBaseUrl: false,
@@ -46,25 +58,27 @@ export default function LocaleDropdownNavbarItem({ mobile, dropdownItemsBefore,
4658
: '',
4759
};
4860
});
61+
4962
const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
63+
5064
// Mobile is handled a bit differently
5165
const dropdownLabel = mobile
5266
? translate({
5367
message: 'Languages',
5468
id: 'theme.navbar.mobileLanguageDropdown.label',
5569
description: 'The label for the mobile language switcher dropdown',
5670
})
57-
: localeConfigs[currentLocale].label;
71+
: localeConfigs[currentLocale]!.label;
5872

5973
return (
6074
<DropdownNavbarItem
6175
{...props}
6276
mobile={mobile}
6377
label={
6478
<>
65-
<IconLanguage />
79+
<IconLanguage className={styles.iconLanguage} />
6680
{/* CUSTOM CODE - added span in order to hide the text */}
67-
<span className={styles.localeVisuallyHidden}>{dropdownLabel}</span>
81+
<span className={customStyles.localeVisuallyHidden}>{dropdownLabel}</span>
6882
</>
6983
}
7084
items={items}

0 commit comments

Comments
 (0)