3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-05 04:12:53 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore(v2): replace classnames with clsx (#2895)

Browse source
This commit is contained in:
Alexey Pyltsyn 2020-06-07 08:40:06 +03:00 • committed by GitHub
parent 600ef7ae28
commit afe9ff91a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 76 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-init/templates/classic/package.json
View file

@ -11,7 +11,7 @@
"dependencies": { "dependencies": {
"@docusaurus/core": "^2.0.0-alpha.56", "@docusaurus/core": "^2.0.0-alpha.56",
"@docusaurus/preset-classic": "^2.0.0-alpha.56", "@docusaurus/preset-classic": "^2.0.0-alpha.56",
"classnames": "^2.2.6", "clsx": "^1.1.1",
"react": "^16.8.4", "react": "^16.8.4",
"react-dom": "^16.8.4" "react-dom": "^16.8.4"
}, },

8
packages/docusaurus-init/templates/classic/src/pages/index.js
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -42,7 +42,7 @@ const features = [
function Feature({imageUrl, title, description}) { function Feature({imageUrl, title, description}) {
const imgUrl = useBaseUrl(imageUrl); const imgUrl = useBaseUrl(imageUrl);
return ( return (
<div className={classnames('col col--4', styles.feature)}> <div className={clsx('col col--4', styles.feature)}>
{imgUrl && ( {imgUrl && (
<div className="text--center"> <div className="text--center">
<img className={styles.featureImage} src={imgUrl} alt={title} /> <img className={styles.featureImage} src={imgUrl} alt={title} />
@ -61,13 +61,13 @@ function Home() {
<Layout <Layout
title={`Hello from ${siteConfig.title}`} title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />"> description="Description will go into a meta tag in <head />">
<header className={classnames('hero hero--primary', styles.heroBanner)}> <header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container"> <div className="container">
<h1 className="hero__title">{siteConfig.title}</h1> <h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p> <p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}> <div className={styles.buttons}>
<Link <Link
className={classnames( className={clsx(
'button button--outline button--secondary button--lg', 'button button--outline button--secondary button--lg',
styles.getStarted, styles.getStarted,
)} )}

2
packages/docusaurus-init/templates/facebook/package.json
View file

@ -15,7 +15,7 @@
"dependencies": { "dependencies": {
"@docusaurus/core": "^2.0.0-alpha.56", "@docusaurus/core": "^2.0.0-alpha.56",
"@docusaurus/preset-classic": "^2.0.0-alpha.56", "@docusaurus/preset-classic": "^2.0.0-alpha.56",
"classnames": "^2.2.6", "clsx": "^1.1.1",
"react": "^16.8.4", "react": "^16.8.4",
"react-dom": "^16.8.4" "react-dom": "^16.8.4"
}, },

8
packages/docusaurus-init/templates/facebook/src/pages/index.js
View file

@ -8,7 +8,7 @@
*/ */
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -51,7 +51,7 @@ const features = [
function Feature({imageUrl, title, description}) { function Feature({imageUrl, title, description}) {
const imgUrl = useBaseUrl(imageUrl); const imgUrl = useBaseUrl(imageUrl);
return ( return (
<div className={classnames('col col--4', styles.feature)}> <div className={clsx('col col--4', styles.feature)}>
{imgUrl && ( {imgUrl && (
<div className="text--center"> <div className="text--center">
<img className={styles.featureImage} src={imgUrl} alt={title} /> <img className={styles.featureImage} src={imgUrl} alt={title} />
@ -70,13 +70,13 @@ function Home() {
<Layout <Layout
title={`Hello from ${siteConfig.title}`} title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />"> description="Description will go into a meta tag in <head />">
<header className={classnames('hero hero--primary', styles.heroBanner)}> <header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container"> <div className="container">
<h1 className="hero__title">{siteConfig.title}</h1> <h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p> <p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}> <div className={styles.buttons}>
<Link <Link
className={classnames( className={clsx(
'button button--outline button--secondary button--lg', 'button button--outline button--secondary button--lg',
styles.getStarted, styles.getStarted,
)} )}

2
packages/docusaurus-theme-classic/package.json
View file

@ -10,8 +10,8 @@
"dependencies": { "dependencies": {
"@mdx-js/mdx": "^1.5.8", "@mdx-js/mdx": "^1.5.8",
"@mdx-js/react": "^1.5.8", "@mdx-js/react": "^1.5.8",
"classnames": "^2.2.6",
"clipboard": "^2.0.6", "clipboard": "^2.0.6",
"clsx": "^1.1.1",
"infima": "0.2.0-alpha.12", "infima": "0.2.0-alpha.12",
"parse-numeric-range": "^0.0.2", "parse-numeric-range": "^0.0.2",
"prism-react-renderer": "^1.1.0", "prism-react-renderer": "^1.1.0",

4
packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
View file

@ -6,7 +6,7 @@
*/ */
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import {MDXProvider} from '@mdx-js/react'; import {MDXProvider} from '@mdx-js/react';
import Head from '@docusaurus/Head'; import Head from '@docusaurus/Head';
@ -58,7 +58,7 @@ function BlogPostItem(props) {
return ( return (
<header> <header>
<TitleHeading <TitleHeading
className={classnames('margin-bottom--sm', styles.blogPostTitle)}> className={clsx('margin-bottom--sm', styles.blogPostTitle)}>
{isBlogPostPage ? title : <Link to={permalink}>{title}</Link>} {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
</TitleHeading> </TitleHeading>
<div className="margin-vert--md"> <div className="margin-vert--md">

6
packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
View file

@ -8,7 +8,7 @@
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */ /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
import React, {useEffect, useState, useRef} from 'react'; import React, {useEffect, useState, useRef} from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import Highlight, {defaultProps} from 'prism-react-renderer'; import Highlight, {defaultProps} from 'prism-react-renderer';
import Clipboard from 'clipboard'; import Clipboard from 'clipboard';
import rangeParser from 'parse-numeric-range'; import rangeParser from 'parse-numeric-range';
@ -221,7 +221,7 @@ export default ({children, className: languageClassName, metastring}) => {
ref={button} ref={button}
type="button" type="button"
aria-label="Copy code to clipboard" aria-label="Copy code to clipboard"
className={classnames(styles.copyButton, { className={clsx(styles.copyButton, {
[styles.copyButtonWithTitle]: codeBlockTitle, [styles.copyButtonWithTitle]: codeBlockTitle,
})} })}
onClick={handleCopyCode}> onClick={handleCopyCode}>
@ -229,7 +229,7 @@ export default ({children, className: languageClassName, metastring}) => {
</button> </button>
<div <div
tabIndex="0" tabIndex="0"
className={classnames(className, styles.codeBlock, { className={clsx(className, styles.codeBlock, {
[styles.codeBlockWithTitle]: codeBlockTitle, [styles.codeBlockWithTitle]: codeBlockTitle,
})}> })}>
<div ref={target} className={styles.codeBlockLines} style={style}> <div ref={target} className={styles.codeBlockLines} style={style}>

9
packages/docusaurus-theme-classic/src/theme/DocItem/index.js
View file

@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
import DocPaginator from '@theme/DocPaginator'; import DocPaginator from '@theme/DocPaginator';
import useTOCHighlight from '@theme/hooks/useTOCHighlight'; import useTOCHighlight from '@theme/hooks/useTOCHighlight';
import classnames from 'classnames'; import clsx from 'clsx';
import styles from './styles.module.css'; import styles from './styles.module.css';
const LINK_CLASS_NAME = 'table-of-contents__link'; const LINK_CLASS_NAME = 'table-of-contents__link';
@ -102,13 +102,10 @@ function DocItem(props) {
{permalink && <link rel="canonical" href={siteUrl + permalink} />} {permalink && <link rel="canonical" href={siteUrl + permalink} />}
</Head> </Head>
<div <div
className={classnames( className={clsx('container padding-vert--lg', styles.docItemWrapper)}>
'container padding-vert--lg',
styles.docItemWrapper,
)}>
<div className="row"> <div className="row">
<div <div
className={classnames('col', { className={clsx('col', {
[styles.docItemCol]: !hideTableOfContents, [styles.docItemCol]: !hideTableOfContents,
})}> })}>
<div className={styles.docItemContainer}> <div className={styles.docItemContainer}>

14
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
View file

@ -6,7 +6,7 @@
*/ */
import React, {useState, useCallback, useEffect, useRef} from 'react'; import React, {useState, useCallback, useEffect, useRef} from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext'; import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll'; import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
@ -82,12 +82,12 @@ function DocSidebarItemCategory({
return ( return (
<li <li
className={classnames('menu__list-item', { className={clsx('menu__list-item', {
'menu__list-item--collapsed': collapsed, 'menu__list-item--collapsed': collapsed,
})} })}
key={label}> key={label}>
<a <a
className={classnames('menu__link', { className={clsx('menu__link', {
'menu__link--sublist': collapsible, 'menu__link--sublist': collapsible,
'menu__link--active': collapsible && isActive, 'menu__link--active': collapsible && isActive,
[styles.menuLinkText]: !collapsible, [styles.menuLinkText]: !collapsible,
@ -125,7 +125,7 @@ function DocSidebarItemLink({
return ( return (
<li className="menu__list-item" key={label}> <li className="menu__list-item" key={label}>
<Link <Link
className={classnames('menu__link', { className={clsx('menu__link', {
'menu__link--active': isActive, 'menu__link--active': isActive,
})} })}
to={href} to={href}
@ -191,7 +191,7 @@ function DocSidebar(props) {
return ( return (
<div <div
className={classnames(styles.sidebar, { className={clsx(styles.sidebar, {
[styles.sidebarWithHideableNavbar]: hideOnScroll, [styles.sidebarWithHideableNavbar]: hideOnScroll,
})}> })}>
{hideOnScroll && ( {hideOnScroll && (
@ -207,7 +207,7 @@ function DocSidebar(props) {
</Link> </Link>
)} )}
<div <div
className={classnames('menu', 'menu--responsive', styles.menu, { className={clsx('menu', 'menu--responsive', styles.menu, {
'menu--show': showResponsiveSidebar, 'menu--show': showResponsiveSidebar,
[styles.menuWithAnnouncementBar]: [styles.menuWithAnnouncementBar]:
!isAnnouncementBarClosed && scrollY === 0, !isAnnouncementBarClosed && scrollY === 0,
@ -222,7 +222,7 @@ function DocSidebar(props) {
}}> }}>
{showResponsiveSidebar ? ( {showResponsiveSidebar ? (
<span <span
className={classnames( className={clsx(
styles.sidebarMenuIcon, styles.sidebarMenuIcon,
styles.sidebarMenuCloseIcon, styles.sidebarMenuCloseIcon,
)}> )}>

4
packages/docusaurus-theme-classic/src/theme/Footer/index.js
View file

@ -6,7 +6,7 @@
*/ */
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -54,7 +54,7 @@ function Footer() {
return ( return (
<footer <footer
className={classnames('footer', { className={clsx('footer', {
'footer--dark': footer.style === 'dark', 'footer--dark': footer.style === 'dark',
})}> })}>
<div className="container"> <div className="container">

4
packages/docusaurus-theme-classic/src/theme/Heading/index.js
View file

@ -8,7 +8,7 @@
/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import './styles.css'; import './styles.css';
@ -31,7 +31,7 @@ const Heading = (Tag) =>
<a <a
aria-hidden="true" aria-hidden="true"
tabIndex="-1" tabIndex="-1"
className={classnames('anchor', { className={clsx('anchor', {
[styles.enhancedAnchor]: !hideOnScroll, [styles.enhancedAnchor]: !hideOnScroll,
})} })}
id={id} id={id}

12
packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file

@ -6,7 +6,7 @@
*/ */
import React, {useCallback, useState} from 'react'; import React, {useCallback, useState} from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
@ -71,7 +71,7 @@ function NavItem({
...props ...props
}) { }) {
const navLinkClassNames = (extraClassName, isDropdownItem = false) => const navLinkClassNames = (extraClassName, isDropdownItem = false) =>
classnames( clsx(
{ {
'navbar__item navbar__link': !isDropdownItem, 'navbar__item navbar__link': !isDropdownItem,
dropdown__link: isDropdownItem, dropdown__link: isDropdownItem,
@ -85,7 +85,7 @@ function NavItem({
return ( return (
<div <div
className={classnames('navbar__item', 'dropdown', 'dropdown--hoverable', { className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
'dropdown--left': position === 'left', 'dropdown--left': position === 'left',
'dropdown--right': position === 'right', 'dropdown--right': position === 'right',
})}> })}>
@ -118,7 +118,7 @@ function NavItem({
function MobileNavItem({items, position, className, ...props}) { function MobileNavItem({items, position, className, ...props}) {
// Need to destructure position from props so that it doesn't get passed on. // Need to destructure position from props so that it doesn't get passed on.
const navLinkClassNames = (extraClassName, isSubList = false) => const navLinkClassNames = (extraClassName, isSubList = false) =>
classnames( clsx(
'menu__link', 'menu__link',
{ {
'menu__link--sublist': isSubList, 'menu__link--sublist': isSubList,
@ -206,7 +206,7 @@ function Navbar() {
return ( return (
<nav <nav
ref={navbarRef} ref={navbarRef}
className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', { className={clsx('navbar', 'navbar--light', 'navbar--fixed-top', {
'navbar-sidebar--show': sidebarShown, 'navbar-sidebar--show': sidebarShown,
[styles.navbarHideable]: hideOnScroll, [styles.navbarHideable]: hideOnScroll,
[styles.navbarHidden]: !isNavbarVisible, [styles.navbarHidden]: !isNavbarVisible,
@ -250,7 +250,7 @@ function Navbar() {
)} )}
{title != null && ( {title != null && (
<strong <strong
className={classnames('navbar__title', { className={clsx('navbar__title', {
[styles.hideLogoText]: isSearchBarExpanded, [styles.hideLogoText]: isSearchBarExpanded,
})}> })}>
{title} {title}

6
packages/docusaurus-theme-classic/src/theme/Tabs/index.js
View file

@ -8,7 +8,7 @@
import React, {useState, Children} from 'react'; import React, {useState, Children} from 'react';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext'; import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import classnames from 'classnames'; import clsx from 'clsx';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -80,7 +80,7 @@ function Tabs(props) {
<ul <ul
role="tablist" role="tablist"
aria-orientation="horizontal" aria-orientation="horizontal"
className={classnames('tabs', { className={clsx('tabs', {
'tabs--block': block, 'tabs--block': block,
})}> })}>
{values.map(({value, label}) => ( {values.map(({value, label}) => (
@ -88,7 +88,7 @@ function Tabs(props) {
role="tab" role="tab"
tabIndex="0" tabIndex="0"
aria-selected={selectedValue === value} aria-selected={selectedValue === value}
className={classnames('tabs__item', styles.tabItem, { className={clsx('tabs__item', styles.tabItem, {
'tabs__item--active': selectedValue === value, 'tabs__item--active': selectedValue === value,
})} })}
key={value} key={value}

6
packages/docusaurus-theme-classic/src/theme/Toggle/index.js
View file

@ -10,11 +10,11 @@ import Toggle from 'react-toggle';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import classnames from 'classnames'; import clsx from 'clsx';
import styles from './styles.module.css'; import styles from './styles.module.css';
const Moon = () => <span className={classnames(styles.toggle, styles.moon)} />; const Moon = () => <span className={clsx(styles.toggle, styles.moon)} />;
const Sun = () => <span className={classnames(styles.toggle, styles.sun)} />; const Sun = () => <span className={clsx(styles.toggle, styles.sun)} />;
export default function (props) { export default function (props) {
const {isClient} = useDocusaurusContext(); const {isClient} = useDocusaurusContext();

2
packages/docusaurus-theme-live-codeblock/package.json
View file

@ -9,8 +9,8 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@philpl/buble": "^0.19.7", "@philpl/buble": "^0.19.7",
"classnames": "^2.2.6",
"clipboard": "^2.0.6", "clipboard": "^2.0.6",
"clsx": "^1.1.1",
"parse-numeric-range": "^0.0.2", "parse-numeric-range": "^0.0.2",
"prism-react-renderer": "^1.1.0", "prism-react-renderer": "^1.1.0",
"react-live": "^2.2.1" "react-live": "^2.2.1"

6
packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
View file

@ -7,7 +7,7 @@
import * as React from 'react'; import * as React from 'react';
import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'; import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
import classnames from 'classnames'; import clsx from 'clsx';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -19,7 +19,7 @@ function Playground({children, theme, transformCode, ...props}) {
theme={theme} theme={theme}
{...props}> {...props}>
<div <div
className={classnames( className={clsx(
styles.playgroundHeader, styles.playgroundHeader,
styles.playgroundEditorHeader, styles.playgroundEditorHeader,
)}> )}>
@ -27,7 +27,7 @@ function Playground({children, theme, transformCode, ...props}) {
</div> </div>
<LiveEditor className={styles.playgroundEditor} /> <LiveEditor className={styles.playgroundEditor} />
<div <div
className={classnames( className={clsx(
styles.playgroundHeader, styles.playgroundHeader,
styles.playgroundPreviewHeader, styles.playgroundPreviewHeader,
)}> )}>

2
packages/docusaurus-theme-search-algolia/package.json
View file

@ -10,7 +10,7 @@
"dependencies": { "dependencies": {
"algoliasearch": "^3.24.5", "algoliasearch": "^3.24.5",
"algoliasearch-helper": "^3.1.1", "algoliasearch-helper": "^3.1.1",
"classnames": "^2.2.6", "clsx": "^1.1.1",
"docsearch.js": "^2.6.3", "docsearch.js": "^2.6.3",
"eta": "^1.1.1" "eta": "^1.1.1"
}, },

13
packages/docusaurus-theme-search-algolia/src/pages/search/index.js
View file

@ -11,7 +11,7 @@ import React, {useEffect, useState, useReducer, useRef} from 'react';
import algoliaSearch from 'algoliasearch/lite'; import algoliaSearch from 'algoliasearch/lite';
import algoliaSearchHelper from 'algoliasearch-helper'; import algoliaSearchHelper from 'algoliasearch-helper';
import classnames from 'classnames'; import clsx from 'clsx';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -230,7 +230,7 @@ function Search() {
<form className="row" onSubmit={(e) => e.preventDefault()}> <form className="row" onSubmit={(e) => e.preventDefault()}>
<div <div
className={classnames('col', styles.searchQueryColumn, { className={clsx('col', styles.searchQueryColumn, {
'col--9': versioningEnabled, 'col--9': versioningEnabled,
'col--12': !versioningEnabled, 'col--12': !versioningEnabled,
})}> })}>
@ -249,7 +249,7 @@ function Search() {
{versioningEnabled && ( {versioningEnabled && (
<div <div
className={classnames( className={clsx(
'col', 'col',
'col--3', 'col--3',
'padding-left--none', 'padding-left--none',
@ -269,9 +269,8 @@ function Search() {
)} )}
</form> </form>
<div className={classnames('row', 'margin-vert--sm')}> <div className={clsx('row', 'margin-vert--sm')}>
<div <div className={clsx('col', 'col--8', styles.searchResultsColumn)}>
className={classnames('col', 'col--8', styles.searchResultsColumn)}>
{!!searchResultState.totalResults && ( {!!searchResultState.totalResults && (
<strong> <strong>
{searchResultState.totalResults}{' '} {searchResultState.totalResults}{' '}
@ -280,7 +279,7 @@ function Search() {
)} )}
</div> </div>
<div className={classnames('col', 'col--4', styles.searchLogoColumn)}> <div className={clsx('col', 'col--4', styles.searchLogoColumn)}>
<a <a
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"

6
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file

@ -6,7 +6,7 @@
*/ */
import React, {useState, useRef, useCallback} from 'react'; import React, {useState, useRef, useCallback} from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {useHistory} from '@docusaurus/router'; import {useHistory} from '@docusaurus/router';
@ -109,7 +109,7 @@ const Search = ({handleSearchBarToggle, isSearchBarExpanded}) => {
<span <span
aria-label="expand searchbar" aria-label="expand searchbar"
role="button" role="button"
className={classnames(styles.searchIconButton, { className={clsx(styles.searchIconButton, {
[styles.searchIconButtonHidden]: isSearchBarExpanded, [styles.searchIconButtonHidden]: isSearchBarExpanded,
})} })}
onClick={toggleSearchInput} onClick={toggleSearchInput}
@ -122,7 +122,7 @@ const Search = ({handleSearchBarToggle, isSearchBarExpanded}) => {
type="search" type="search"
placeholder="Search" placeholder="Search"
aria-label="Search" aria-label="Search"
className={classnames('navbar__search-input', styles.searchInput, { className={clsx('navbar__search-input', styles.searchInput, {
[styles.searchInputExpanded]: isSearchBarExpanded, [styles.searchInputExpanded]: isSearchBarExpanded,
})} })}
onMouseOver={handleSearchInput} onMouseOver={handleSearchInput}

1
packages/docusaurus/package.json
View file

@ -48,7 +48,6 @@
"cache-loader": "^4.1.0", "cache-loader": "^4.1.0",
"chalk": "^3.0.0", "chalk": "^3.0.0",
"chokidar": "^3.3.0", "chokidar": "^3.3.0",
"classnames": "^2.2.6",
"commander": "^4.0.1", "commander": "^4.0.1",
"copy-webpack-plugin": "^5.0.5", "copy-webpack-plugin": "^5.0.5",
"core-js": "^2.6.5", "core-js": "^2.6.5",

2
website/docs/migrating-from-v1-to-v2.md
View file

@ -105,7 +105,7 @@ A typical Docusaurus 2 `package.json` may look like this:
"dependencies": { "dependencies": {
"@docusaurus/core": "^2.0.0-alpha.40", "@docusaurus/core": "^2.0.0-alpha.40",
"@docusaurus/preset-classic": "^2.0.0-alpha.40", "@docusaurus/preset-classic": "^2.0.0-alpha.40",
"classnames": "^2.2.6", "clsx": "^1.1.1",
"react": "^16.10.2", "react": "^16.10.2",
"react-dom": "^16.10.2" "react-dom": "^16.10.2"
}, },

2
website/package.json
View file

@ -13,7 +13,7 @@
"@docusaurus/plugin-ideal-image": "^2.0.0-alpha.56", "@docusaurus/plugin-ideal-image": "^2.0.0-alpha.56",
"@docusaurus/preset-classic": "^2.0.0-alpha.56", "@docusaurus/preset-classic": "^2.0.0-alpha.56",
"@docusaurus/theme-live-codeblock": "^2.0.0-alpha.56", "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.56",
"classnames": "^2.2.6", "clsx": "^1.1.1",
"color": "^3.1.2", "color": "^3.1.2",
"npm-to-yarn": "^1.0.0-2", "npm-to-yarn": "^1.0.0-2",
"react": "^16.8.4", "react": "^16.8.4",

4
website/src/pages/feedback/index.js
View file

@ -9,7 +9,7 @@ import React, {useEffect} from 'react';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import canny from '../../scripts/canny'; import canny from '../../scripts/canny';
import classnames from 'classnames'; import clsx from 'clsx';
import styles from './styles.module.css'; import styles from './styles.module.css';
const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91'; const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91';
@ -30,7 +30,7 @@ function Feedback() {
title="Feedback" title="Feedback"
description="Docusaurus 2 Feedback page"> description="Docusaurus 2 Feedback page">
<main <main
className={classnames( className={clsx(
'container', 'container',
'margin-vert--xl', 'margin-vert--xl',
styles.feedbackBackground, styles.feedbackBackground,

22
website/src/pages/index.js
View file

@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
import Image from '@theme/IdealImage'; import Image from '@theme/IdealImage';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import classnames from 'classnames'; import clsx from 'clsx';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -69,8 +69,7 @@ function Home() {
title={tagline} title={tagline}
description={customFields.description}> description={customFields.description}>
<main> <main>
<div <div className={clsx(styles.announcement, styles.announcementDark)}>
className={classnames(styles.announcement, styles.announcementDark)}>
<div className={styles.announcementInner}> <div className={styles.announcementInner}>
Black Lives Matter.{' '} Black Lives Matter.{' '}
<Link to="https://support.eji.org/give/153413/#!/donation/checkout"> <Link to="https://support.eji.org/give/153413/#!/donation/checkout">
@ -112,8 +111,7 @@ function Home() {
</div> </div>
</div> </div>
</div> </div>
<div <div className={clsx(styles.announcement, styles.announcementDark)}>
className={classnames(styles.announcement, styles.announcementDark)}>
<div className={styles.announcementInner}> <div className={styles.announcementInner}>
Coming from v1? Check out our{' '} Coming from v1? Check out our{' '}
<Link to={useBaseUrl('/docs/migrating-from-v1-to-v2')}> <Link to={useBaseUrl('/docs/migrating-from-v1-to-v2')}>
@ -131,7 +129,7 @@ function Home() {
alt="Powered by MDX" alt="Powered by MDX"
src={useBaseUrl('img/undraw_typewriter.svg')} src={useBaseUrl('img/undraw_typewriter.svg')}
/> />
<h2 className={classnames(styles.featureHeading)}> <h2 className={clsx(styles.featureHeading)}>
Powered by Markdown Powered by Markdown
</h2> </h2>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
@ -148,7 +146,7 @@ function Home() {
className={styles.featureImage} className={styles.featureImage}
src={useBaseUrl('img/undraw_react.svg')} src={useBaseUrl('img/undraw_react.svg')}
/> />
<h2 className={classnames(styles.featureHeading)}> <h2 className={clsx(styles.featureHeading)}>
Built Using React Built Using React
</h2> </h2>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
@ -163,7 +161,7 @@ function Home() {
className={styles.featureImage} className={styles.featureImage}
src={useBaseUrl('img/undraw_around_the_world.svg')} src={useBaseUrl('img/undraw_around_the_world.svg')}
/> />
<h2 className={classnames(styles.featureHeading)}> <h2 className={clsx(styles.featureHeading)}>
Ready for Translations Ready for Translations
</h2> </h2>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
@ -181,7 +179,7 @@ function Home() {
className={styles.featureImage} className={styles.featureImage}
src={useBaseUrl('img/undraw_version_control.svg')} src={useBaseUrl('img/undraw_version_control.svg')}
/> />
<h2 className={classnames(styles.featureHeading)}> <h2 className={clsx(styles.featureHeading)}>
Document Versioning Document Versioning
</h2> </h2>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
@ -196,9 +194,7 @@ function Home() {
className={styles.featureImage} className={styles.featureImage}
src={useBaseUrl('img/undraw_algolia.svg')} src={useBaseUrl('img/undraw_algolia.svg')}
/> />
<h2 className={classnames(styles.featureHeading)}> <h2 className={clsx(styles.featureHeading)}>Content Search</h2>
Content Search
</h2>
<p className="padding-horiz--md"> <p className="padding-horiz--md">
Make it easy for your community to find what they need in your Make it easy for your community to find what they need in your
documentation. We proudly support Algolia documentation documentation. We proudly support Algolia documentation
@ -208,7 +204,7 @@ function Home() {
</div> </div>
</div> </div>
</div> </div>
<div className={classnames(styles.section, styles.sectionAlt)}> <div className={clsx(styles.section, styles.sectionAlt)}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
{QUOTES.map((quote) => ( {QUOTES.map((quote) => (

4
website/src/pages/showcase/index.js
View file

@ -10,7 +10,7 @@ import React, {useEffect} from 'react';
import Image from '@theme/IdealImage'; import Image from '@theme/IdealImage';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import classnames from 'classnames'; import clsx from 'clsx';
import styles from './styles.module.css'; import styles from './styles.module.css';
import users from '../../data/users'; import users from '../../data/users';
@ -29,7 +29,7 @@ function Showcase() {
<div className="row"> <div className="row">
{users.map((user) => ( {users.map((user) => (
<div key={user.title} className="col col--4 margin-bottom--lg"> <div key={user.title} className="col col--4 margin-bottom--lg">
<div className={classnames('card', styles.showcaseUser)}> <div className={clsx('card', styles.showcaseUser)}>
<div className="card__image"> <div className="card__image">
<Image img={user.preview} alt={user.title} /> <Image img={user.preview} alt={user.title} />
</div> </div>

5
yarn.lock
View file

@ -5088,6 +5088,11 @@ clone@^1.0.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
clsx@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
co@^4.6.0: co@^4.6.0:
version "4.6.0" version "4.6.0"
resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"