3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-22 21:47:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(core,theme): useRouteContext + HtmlClassNameProvider (#6933)

Browse source 
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
This commit is contained in:
Sébastien Lorber 2022-03-18 10:57:32 +01:00 • committed by GitHub
parent 9b4ba78f45
commit 8a1421a938
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 235 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

56
packages/docusaurus-theme-common/src/utils/metadataUtilsTemp.tsx Normal file
View file

@ -0,0 +1,56 @@
/**
* 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, {type ReactNode} from 'react';
import Head from '@docusaurus/Head';
import clsx from 'clsx';
import useRouteContext from '@docusaurus/useRouteContext';
const HtmlClassNameContext = React.createContext<string | undefined>(undefined);
// This wrapper is necessary because Helmet does not "merge" classes
// See https://github.com/staylor/react-helmet-async/issues/161
export function HtmlClassNameProvider({
className: classNameProp,
children,
}: {
className: string;
children: ReactNode;
}): JSX.Element {
const classNameContext = React.useContext(HtmlClassNameContext);
const className = clsx(classNameContext, classNameProp);
return (
<HtmlClassNameContext.Provider value={className}>
<Head>
<html className={className} />
</Head>
{children}
</HtmlClassNameContext.Provider>
);
}
function pluginNameToClassName(pluginName: string) {
return `plugin-${pluginName.replace(
/docusaurus-(?:plugin|theme)-(?:content-)?/gi,
'',
)}`;
}
export function PluginHtmlClassNameProvider({
children,
}: {
children: ReactNode;
}): JSX.Element {
const routeContext = useRouteContext();
const nameClass = pluginNameToClassName(routeContext.plugin.name);
const idClass = `plugin-id-${routeContext.plugin.id}`;
return (
<HtmlClassNameProvider className={clsx(nameClass, idClass)}>
{children}
</HtmlClassNameProvider>
);
}