docs: update doocusaurus to 2.0.1 (#1997)
This commit is contained in:
@@ -1,50 +1,45 @@
|
||||
import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
|
||||
import {
|
||||
findFirstCategoryLink,
|
||||
useDocById,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
|
||||
import Link from '@docusaurus/Link';
|
||||
/**
|
||||
* 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 clsx from 'clsx';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import styles from './styles.module.css';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
|
||||
function CardContainer({href, children}) {
|
||||
const className = clsx(
|
||||
'card margin-bottom--lg padding--lg',
|
||||
styles.cardContainer,
|
||||
href && styles.cardContainerLink,
|
||||
);
|
||||
return href ? (
|
||||
<Link href={href} className={className}>
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={clsx('card padding--lg', styles.cardContainer)}>
|
||||
{children}
|
||||
</Link>
|
||||
) : (
|
||||
<div className={className}>{children}</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLayout({href, icon, title, description}) {
|
||||
return (
|
||||
<CardContainer href={href}>
|
||||
<h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
|
||||
{icon} {title}
|
||||
</h2>
|
||||
<div
|
||||
className={clsx('text--truncate', styles.cardDescription)}
|
||||
title={description}>
|
||||
{description}
|
||||
</div>
|
||||
{description && (
|
||||
<p
|
||||
className={clsx('text--truncate', styles.cardDescription)}
|
||||
title={description}>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</CardContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function CardCategory({item}) {
|
||||
const href = findFirstCategoryLink(item);
|
||||
// Unexpected: categories that don't have a link have been filtered upfront
|
||||
if (!href) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<CardLayout
|
||||
href={href}
|
||||
@@ -57,14 +52,11 @@ function CardCategory({item}) {
|
||||
description:
|
||||
'The default description for a category card in the generated index about how many items this category includes',
|
||||
},
|
||||
{
|
||||
count: item.items.length,
|
||||
},
|
||||
{count: item.items.length},
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLink({item}) {
|
||||
let icon;
|
||||
if (item.customProps && item.customProps.image) {
|
||||
@@ -74,7 +66,6 @@ function CardLink({item}) {
|
||||
} else {
|
||||
icon = isInternalUrl(item.href) ? '📄️' : '🔗';
|
||||
}
|
||||
|
||||
const doc = useDocById(item.docId ?? undefined);
|
||||
return (
|
||||
<CardLayout
|
||||
@@ -85,15 +76,12 @@ function CardLink({item}) {
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DocCard({item}) {
|
||||
switch (item.type) {
|
||||
case 'link':
|
||||
return <CardLink item={item} />;
|
||||
|
||||
case 'category':
|
||||
return <CardCategory item={item} />;
|
||||
|
||||
default:
|
||||
throw new Error(`unknown item type ${JSON.stringify(item)}`);
|
||||
}
|
||||
|
||||
100
www/docs/src/theme/DocCard/index_OLD.js
Normal file
100
www/docs/src/theme/DocCard/index_OLD.js
Normal file
@@ -0,0 +1,100 @@
|
||||
import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
|
||||
|
||||
import Link from '@docusaurus/Link';
|
||||
/**
|
||||
* 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 clsx from 'clsx';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import styles from './styles.module.css';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
|
||||
function CardContainer({href, children}) {
|
||||
const className = clsx(
|
||||
'card margin-bottom--lg padding--lg',
|
||||
styles.cardContainer,
|
||||
href && styles.cardContainerLink,
|
||||
);
|
||||
return href ? (
|
||||
<Link href={href} className={className}>
|
||||
{children}
|
||||
</Link>
|
||||
) : (
|
||||
<div className={className}>{children}</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLayout({href, icon, title, description}) {
|
||||
return (
|
||||
<CardContainer href={href}>
|
||||
<h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
|
||||
{icon} {title}
|
||||
</h2>
|
||||
<div
|
||||
className={clsx('text--truncate', styles.cardDescription)}
|
||||
title={description}>
|
||||
{description}
|
||||
</div>
|
||||
</CardContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function CardCategory({item}) {
|
||||
const href = findFirstCategoryLink(item);
|
||||
return (
|
||||
<CardLayout
|
||||
href={href}
|
||||
icon="🗃️"
|
||||
title={item.label}
|
||||
description={translate(
|
||||
{
|
||||
message: '{count} items',
|
||||
id: 'theme.docs.DocCard.categoryDescription',
|
||||
description:
|
||||
'The default description for a category card in the generated index about how many items this category includes',
|
||||
},
|
||||
{
|
||||
count: item.items.length,
|
||||
},
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLink({item}) {
|
||||
let icon;
|
||||
if (item.customProps && item.customProps.image) {
|
||||
icon = <img src={item.customProps.image} alt={item.label} width={24} height={24} />;
|
||||
} else if (item.customProps && item.customProps.icon) {
|
||||
icon = item.customProps.icon;
|
||||
} else {
|
||||
icon = isInternalUrl(item.href) ? '📄️' : '🔗';
|
||||
}
|
||||
|
||||
const doc = useDocById(item.docId ?? undefined);
|
||||
return (
|
||||
<CardLayout
|
||||
href={item.href}
|
||||
icon={icon}
|
||||
title={item.label}
|
||||
description={doc?.description}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DocCard({item}) {
|
||||
switch (item.type) {
|
||||
case 'link':
|
||||
return <CardLink item={item} />;
|
||||
|
||||
case 'category':
|
||||
return <CardCategory item={item} />;
|
||||
|
||||
default:
|
||||
throw new Error(`unknown item type ${JSON.stringify(item)}`);
|
||||
}
|
||||
}
|
||||
@@ -1,48 +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.
|
||||
*/
|
||||
|
||||
.cardContainer {
|
||||
height: 8rem;
|
||||
color: var(--ifm-color-emphasis-800);
|
||||
--ifm-link-color: var(--ifm-color-emphasis-800);
|
||||
--ifm-link-hover-color: var(--ifm-color-emphasis-800);
|
||||
--ifm-link-hover-color: var(--ifm-color-emphasis-700);
|
||||
--ifm-link-hover-decoration: none;
|
||||
|
||||
/* box-shadow: var(--ifm-global-shadow-lw); */
|
||||
box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
transition: box-shadow var(--ifm-transition-fast) ease,
|
||||
background-color var(--ifm-transition-fast) ease;
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
transition-property: border, box-shadow;
|
||||
}
|
||||
|
||||
.cardContainer.cardContainerLink:hover {
|
||||
/* box-shadow: var(--ifm-global-shadow-md); */
|
||||
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
|
||||
.cardContainer:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .cardContainer.cardContainerLink:hover {
|
||||
--ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
|
||||
}
|
||||
|
||||
.cardContainer:not(.cardContainerLink) {
|
||||
cursor: not-allowed;
|
||||
.cardContainer *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 1.2rem;
|
||||
min-height: 1.2rem;
|
||||
}
|
||||
|
||||
.cardTitle img {
|
||||
vertical-align: bottom;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.cardDescription {
|
||||
font-size: 0.8rem;
|
||||
min-height: 0.8rem;
|
||||
}
|
||||
|
||||
.cardTitle img {
|
||||
vertical-align: bottom;
|
||||
margin-right: 2px;
|
||||
}
|
||||
@@ -1,19 +1,16 @@
|
||||
/**
|
||||
* 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 {
|
||||
HtmlClassNameProvider,
|
||||
isRegexpStringMatch,
|
||||
useEvent,
|
||||
usePluralForm,
|
||||
} from '@docusaurus/theme-common';
|
||||
/* eslint-disable jsx-a11y/no-autofocus */
|
||||
import React, {useEffect, useReducer, useRef, useState} from 'react';
|
||||
import Translate, {translate} from '@docusaurus/Translate';
|
||||
import {
|
||||
isRegexpStringMatch,
|
||||
useDynamicCallback,
|
||||
usePluralForm,
|
||||
useSearchPage,
|
||||
useTitleFormatter,
|
||||
} from '@docusaurus/theme-common';
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
|
||||
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
|
||||
import Head from '@docusaurus/Head';
|
||||
@@ -25,7 +22,6 @@ import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
import {useAllDocsData} from '@docusaurus/plugin-content-docs/client';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
|
||||
// Very simple pluralization: probably good enough for now
|
||||
function useDocumentsFoundPlural() {
|
||||
const {selectMessage} = usePluralForm();
|
||||
@@ -111,7 +107,7 @@ function SearchVersionSelectList({docsSearchVersionsHelpers}) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function SearchPage() {
|
||||
function SearchPageContent() {
|
||||
const {
|
||||
siteConfig: {themeConfig},
|
||||
i18n: {currentLocale},
|
||||
@@ -175,7 +171,7 @@ export default function SearchPage() {
|
||||
algoliaHelper.on(
|
||||
'result',
|
||||
({results: {query, hits, page, nbHits, nbPages}}) => {
|
||||
if (query === '' || !(hits instanceof Array)) {
|
||||
if (query === '' || !Array.isArray(hits)) {
|
||||
searchResultStateDispatcher({type: 'reset'});
|
||||
return;
|
||||
}
|
||||
@@ -223,7 +219,7 @@ export default function SearchPage() {
|
||||
const [loaderRef, setLoaderRef] = useState(null);
|
||||
const prevY = useRef(0);
|
||||
const observer = useRef(
|
||||
ExecutionEnvironment.canUseDOM &&
|
||||
ExecutionEnvironment.canUseIntersectionObserver &&
|
||||
new IntersectionObserver(
|
||||
(entries) => {
|
||||
const {
|
||||
@@ -255,7 +251,7 @@ export default function SearchPage() {
|
||||
message: 'Search the documentation',
|
||||
description: 'The search page title for empty query',
|
||||
});
|
||||
const makeSearch = useDynamicCallback((page = 0) => {
|
||||
const makeSearch = useEvent((page = 0) => {
|
||||
algoliaHelper.setQuery(searchQuery).setPage(page).search();
|
||||
});
|
||||
useEffect(() => {
|
||||
@@ -285,7 +281,7 @@ export default function SearchPage() {
|
||||
makeSearch(searchResultState.lastPage);
|
||||
}, [makeSearch, searchResultState.lastPage]);
|
||||
return (
|
||||
<Layout wrapperClassName="search-page-wrapper">
|
||||
<Layout>
|
||||
<Head>
|
||||
<title>{useTitleFormatter(getTitle())}</title>
|
||||
{/*
|
||||
@@ -445,3 +441,10 @@ export default function SearchPage() {
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
export default function SearchPage() {
|
||||
return (
|
||||
<HtmlClassNameProvider className="search-page-wrapper">
|
||||
<SearchPageContent />
|
||||
</HtmlClassNameProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,3 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.searchQueryInput,
|
||||
.searchVersionInput {
|
||||
border-radius: var(--ifm-global-radius);
|
||||
|
||||
Reference in New Issue
Block a user