docs: update doocusaurus to 2.0.1 (#1997)

This commit is contained in:
Shahed Nasser
2022-08-04 19:09:36 +03:00
committed by GitHub
parent 3746099288
commit b126ab4dec
8 changed files with 2531 additions and 1706 deletions

View File

@@ -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)}`);
}

View 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)}`);
}
}

View File

@@ -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;
}

View File

@@ -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>
);
}

View File

@@ -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);