mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-03 00:39:45 +02:00
chore: clean up ESLint config, enable a few rules (#6514)
* chore: clean up ESLint config, enable a few rules * enable max-len for comments * fix build
This commit is contained in:
Joshua Chen
GitHub
parent
b8ccb869f1
commit
aa446b7a9c
167 changed files with 1157 additions and 960 deletions
|
|
@ -23,7 +23,7 @@ const ContextReplacementPlugin: typeof webpack.ContextReplacementPlugin =
|
|||
requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin');
|
||||
|
||||
// Need to be inlined to prevent dark mode FOUC
|
||||
// Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
|
||||
// Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
|
||||
const ThemeStorageKey = 'theme';
|
||||
const noFlashColorMode = ({
|
||||
defaultMode,
|
||||
|
|
@ -64,15 +64,17 @@ const noFlashColorMode = ({
|
|||
}
|
||||
})();`;
|
||||
|
||||
// Duplicated constant. Unfortunately we can't import it from theme-common, as we need to support older nodejs versions without ESM support
|
||||
// Duplicated constant. Unfortunately we can't import it from theme-common, as
|
||||
// we need to support older nodejs versions without ESM support
|
||||
// TODO: import from theme-common once we only support Node.js with ESM support
|
||||
// + move all those announcementBar stuff there too
|
||||
export const AnnouncementBarDismissStorageKey =
|
||||
'docusaurus.announcement.dismiss';
|
||||
const AnnouncementBarDismissDataAttribute =
|
||||
'data-announcement-bar-initially-dismissed';
|
||||
// We always render the announcement bar html on the server, to prevent layout shifts on React hydration
|
||||
// The theme can use CSS + the data attribute to hide the announcement bar asap (before React hydration)
|
||||
// We always render the announcement bar html on the server, to prevent layout
|
||||
// shifts on React hydration. The theme can use CSS + the data attribute to hide
|
||||
// the announcement bar asap (before React hydration)
|
||||
const AnnouncementBarInlineJavaScript = `
|
||||
(function() {
|
||||
function isDismissed() {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@ const threshold = 300;
|
|||
// TODO proper detection is currently unreliable!
|
||||
// see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
|
||||
const SupportsNativeSmoothScrolling = false;
|
||||
// const SupportsNativeSmoothScrolling = ExecutionEnvironment.canUseDOM && 'scrollBehavior' in document.documentElement.style;
|
||||
// const SupportsNativeSmoothScrolling =
|
||||
// ExecutionEnvironment.canUseDOM &&
|
||||
// 'scrollBehavior' in document.documentElement.style;
|
||||
|
||||
type CancelScrollTop = () => void;
|
||||
|
||||
|
|
@ -44,13 +46,14 @@ function smoothScrollTopPolyfill(): CancelScrollTop {
|
|||
}
|
||||
rafRecursion();
|
||||
|
||||
// Break the recursion
|
||||
// Prevents the user from "fighting" against that recursion producing a weird UX
|
||||
// Break the recursion. Prevents the user from "fighting" against that
|
||||
// recursion producing a weird UX
|
||||
return () => raf && cancelAnimationFrame(raf);
|
||||
}
|
||||
|
||||
type UseSmoothScrollTopReturn = {
|
||||
// We use a cancel function because the non-native smooth scroll-top implementation must be interrupted if user scroll down
|
||||
// We use a cancel function because the non-native smooth scroll-top
|
||||
// implementation must be interrupted if user scroll down
|
||||
smoothScrollTop: () => void;
|
||||
cancelScrollToTop: CancelScrollTop;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,27 +21,24 @@ function BlogPostAuthor({author}: Props): JSX.Element {
|
|||
</Link>
|
||||
)}
|
||||
|
||||
{
|
||||
// Note: only legacy author front matter allow empty name (not frontMatter.authors)
|
||||
name && (
|
||||
<div
|
||||
className="avatar__intro"
|
||||
itemProp="author"
|
||||
itemScope
|
||||
itemType="https://schema.org/Person">
|
||||
<div className="avatar__name">
|
||||
<Link href={url} itemProp="url">
|
||||
<span itemProp="name">{name}</span>
|
||||
</Link>
|
||||
</div>
|
||||
{title && (
|
||||
<small className="avatar__subtitle" itemProp="description">
|
||||
{title}
|
||||
</small>
|
||||
)}
|
||||
{name && (
|
||||
<div
|
||||
className="avatar__intro"
|
||||
itemProp="author"
|
||||
itemScope
|
||||
itemType="https://schema.org/Person">
|
||||
<div className="avatar__name">
|
||||
<Link href={url} itemProp="url">
|
||||
<span itemProp="name">{name}</span>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{title && (
|
||||
<small className="avatar__subtitle" itemProp="description">
|
||||
{title}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,8 +53,9 @@ function BlogPostPage(props: Props): JSX.Element {
|
|||
) : undefined
|
||||
}>
|
||||
<Seo
|
||||
// TODO refactor needed: it's a bit annoying but Seo MUST be inside BlogLayout
|
||||
// otherwise default image (set by BlogLayout) would shadow the custom blog post image
|
||||
// TODO refactor needed: it's a bit annoying but Seo MUST be inside
|
||||
// BlogLayout, otherwise default image (set by BlogLayout) would shadow
|
||||
// the custom blog post image
|
||||
title={title}
|
||||
description={description}
|
||||
keywords={keywords}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,8 @@ export default function CodeBlock({
|
|||
const prismTheme = usePrismTheme();
|
||||
|
||||
// <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
|
||||
// When the children is not a simple string, we just return a styled block without actually highlighting.
|
||||
// When the children is not a simple string, we just return a styled block
|
||||
// without actually highlighting.
|
||||
if (React.Children.toArray(children).some((el) => isValidElement(el))) {
|
||||
return (
|
||||
<Highlight
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ import {Details as DetailsGeneric} from '@docusaurus/theme-common';
|
|||
import type {Props} from '@theme/Details';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
// Should we have a custom details/summary comp in Infima instead of reusing alert classes?
|
||||
// Should we have a custom details/summary comp in Infima instead of reusing
|
||||
// alert classes?
|
||||
const InfimaClasses = 'alert alert--info';
|
||||
|
||||
export default function Details({...props}: Props): JSX.Element {
|
||||
|
|
|
|||
|
|
@ -75,8 +75,9 @@ export default function DocItem(props: Props): JSX.Element {
|
|||
<div
|
||||
className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
|
||||
{/*
|
||||
Title can be declared inside md content or declared through front matter and added manually
|
||||
To make both cases consistent, the added title is added under the same div.markdown block
|
||||
Title can be declared inside md content or declared through
|
||||
front matter and added manually. To make both cases consistent,
|
||||
the added title is added under the same div.markdown block
|
||||
See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
|
||||
*/}
|
||||
{shouldAddTitle && (
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ function DocPage(props: Props): JSX.Element {
|
|||
return (
|
||||
<>
|
||||
<Head>
|
||||
{/* TODO we should add a core addRoute({htmlClassName}) generic plugin option */}
|
||||
{/* TODO we should add a core addRoute({htmlClassName}) action */}
|
||||
<html className={versionMetadata.className} />
|
||||
</Head>
|
||||
<DocsVersionProvider version={versionMetadata}>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@ export default function DocSidebarItem({
|
|||
}
|
||||
}
|
||||
|
||||
// If we navigate to a category and it becomes active, it should automatically expand itself
|
||||
// If we navigate to a category and it becomes active, it should automatically
|
||||
// expand itself
|
||||
function useAutoExpandActiveCategory({
|
||||
isActive,
|
||||
collapsed,
|
||||
|
|
@ -67,11 +68,14 @@ function useAutoExpandActiveCategory({
|
|||
}, [isActive, wasActive, collapsed, setCollapsed]);
|
||||
}
|
||||
|
||||
// When a collapsible category has no link, we still link it to its first child during SSR as a temporary fallback
|
||||
// This allows to be able to navigate inside the category even when JS fails to load, is delayed or simply disabled
|
||||
// React hydration becomes an optional progressive enhancement
|
||||
// see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
|
||||
// see https://github.com/facebook/docusaurus/issues/3030
|
||||
/**
|
||||
* When a collapsible category has no link, we still link it to its first child
|
||||
* during SSR as a temporary fallback. This allows to be able to navigate inside
|
||||
* the category even when JS fails to load, is delayed or simply disabled
|
||||
* React hydration becomes an optional progressive enhancement
|
||||
* see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
|
||||
* see https://github.com/facebook/docusaurus/issues/3030
|
||||
*/
|
||||
function useCategoryHrefWithSSRFallback(
|
||||
item: PropSidebarItemCategory,
|
||||
): string | undefined {
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ import type {MDXComponentsObject} from '@theme/MDXComponents';
|
|||
|
||||
import './styles.css';
|
||||
|
||||
// MDX elements are wrapped through the MDX pragma
|
||||
// In some cases (notably usage with Head/Helmet) we need to unwrap those elements.
|
||||
// MDX elements are wrapped through the MDX pragma. In some cases (notably usage
|
||||
// with Head/Helmet) we need to unwrap those elements.
|
||||
function unwrapMDXElement(element: ReactElement) {
|
||||
if (element?.props?.mdxType && element?.props?.originalType) {
|
||||
const {mdxType, originalType, ...newProps} = element.props;
|
||||
|
|
@ -55,7 +55,8 @@ const MDXComponents: MDXComponentsObject = {
|
|||
),
|
||||
details: (props): JSX.Element => {
|
||||
const items = React.Children.toArray(props.children) as ReactElement[];
|
||||
// Split summary item from the rest to pass it as a separate prop to the Details theme component
|
||||
// Split summary item from the rest to pass it as a separate prop to the
|
||||
// Details theme component
|
||||
const summary: ReactElement<ComponentProps<'summary'>> = items.find(
|
||||
(item) => item?.props?.mdxType === 'summary',
|
||||
)!;
|
||||
|
|
|
|||
|
|
@ -78,8 +78,8 @@ export default function DocsVersionDropdownNavbarItem({
|
|||
? undefined
|
||||
: getVersionMainDoc(dropdownVersion).path;
|
||||
|
||||
// We don't want to render a version dropdown with 0 or 1 item
|
||||
// If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
|
||||
// We don't want to render a version dropdown with 0 or 1 item. If we build
|
||||
// the site with a single docs version (onlyIncludeVersions: ['1.0.0']),
|
||||
// We'd rather render a button instead of a dropdown
|
||||
if (items.length <= 1) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ const NavbarItemComponents: Record<
|
|||
search: () => SearchNavbarItem,
|
||||
dropdown: () => DropdownNavbarItem,
|
||||
|
||||
// Need to lazy load these items as we don't know for sure the docs plugin is loaded
|
||||
// See https://github.com/facebook/docusaurus/issues/3360
|
||||
// Need to lazy load these items as we don't know for sure the docs plugin is
|
||||
// loaded. See https://github.com/facebook/docusaurus/issues/3360
|
||||
/* eslint-disable @typescript-eslint/no-var-requires, global-require */
|
||||
docsVersion: () => require('@theme/NavbarItem/DocsVersionNavbarItem').default,
|
||||
docsVersionDropdown: () =>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
// By default, the classic theme does not provide any SearchBar implementation
|
||||
// If you swizzled this file, it is your responsibility to provide an implementation
|
||||
// If you swizzled this, it is your responsibility to provide an implementation
|
||||
// Tip: swizzle the SearchBar from the Algolia theme for inspiration:
|
||||
// npm run swizzle @docusaurus/theme-search-algolia SearchBar
|
||||
export {default} from '@docusaurus/Noop';
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import TOCItems from '@theme/TOCItems';
|
|||
import styles from './styles.module.css';
|
||||
|
||||
// Using a custom className
|
||||
// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
|
||||
// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
|
||||
const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
|
||||
const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ function TabsComponent(props: Props): JSX.Element {
|
|||
});
|
||||
const values =
|
||||
valuesProp ??
|
||||
// We only pick keys that we recognize. MDX would inject some keys by default
|
||||
// Only pick keys that we recognize. MDX would inject some keys by default
|
||||
children.map(({props: {value, label, attributes}}) => ({
|
||||
value,
|
||||
label,
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ export function translateThemeConfig({
|
|||
themeConfig,
|
||||
translationFiles,
|
||||
}: {
|
||||
// Why partial? To make TS correctly figure out the contravariance in parameter.
|
||||
// To make TS correctly figure out the contravariance in parameter.
|
||||
// In practice it's always normalized
|
||||
themeConfig: ThemeConfig;
|
||||
translationFiles: TranslationFile[];
|
||||
|
|
|
|||
|
|
@ -54,8 +54,8 @@ const NavbarItemBaseSchema = Joi.object({
|
|||
label: Joi.string(),
|
||||
className: Joi.string(),
|
||||
})
|
||||
// We allow any unknown attributes on the links
|
||||
// (users may need additional attributes like target, aria-role, data-customAttribute...)
|
||||
// We allow any unknown attributes on the links (users may need additional
|
||||
// attributes like target, aria-role, data-customAttribute...)
|
||||
.unknown();
|
||||
|
||||
const DefaultNavbarItemSchema = NavbarItemBaseSchema.append({
|
||||
|
|
@ -251,8 +251,8 @@ const FooterLinkItemSchema = Joi.object({
|
|||
.with('to', 'label')
|
||||
.with('href', 'label')
|
||||
.nand('html', 'label')
|
||||
// We allow any unknown attributes on the links
|
||||
// (users may need additional attributes like target, aria-role, data-customAttribute...)
|
||||
// We allow any unknown attributes on the links (users may need additional
|
||||
// attributes like target, aria-role, data-customAttribute...)
|
||||
.unknown();
|
||||
|
||||
const CustomCssSchema = Joi.alternatives()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue