@docusaurus/theme-classic 2.0.0-beta.1decd6f80 → 2.0.0-beta.20

package/src/theme/TagsListInline/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 Translate from '@docusaurus/Translate';
+import Tag from '@theme/Tag';
+import type {Props} from '@theme/TagsListInline';
+
+import styles from './styles.module.css';
+
+export default function TagsListInline({tags}: Props): JSX.Element {
+  return (
+    <>
+      <b>
+        <Translate
+          id="theme.tags.tagsListLabel"
+          description="The label alongside a tag list">
+          Tags:
+        </Translate>
+      </b>
+      <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
+        {tags.map(({label, permalink: tagPermalink}) => (
+          <li key={tagPermalink} className={styles.tag}>
+            <Tag label={label} permalink={tagPermalink} />
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

package/src/theme/TagsListInline/styles.module.css

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+.tags {
+  display: inline;
+}
+
+.tag {
+  margin: 0 0.4rem 0.5rem 0;
+  display: inline-block;
+}

package/src/theme/ThemedImage/index.tsx

@@ -8,23 +8,24 @@
 import React from 'react';
 import clsx from 'clsx';
 
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useThemeContext from '@theme/hooks/useThemeContext';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {useColorMode} from '@docusaurus/theme-common';
 import type {Props} from '@theme/ThemedImage';
 
 import styles from './styles.module.css';
 
-const ThemedImage = (props: Props): JSX.Element => {
-  const {isClient} = useDocusaurusContext();
-  const {isDarkTheme} = useThemeContext();
-  const {sources, className, alt = '', ...propsRest} = props;
+export default function ThemedImage(props: Props): JSX.Element {
+  const isBrowser = useIsBrowser();
+  const {colorMode} = useColorMode();
+  const {sources, className, alt, ...propsRest} = props;
 
   type SourceName = keyof Props['sources'];
 
-  const renderedSourceNames: SourceName[] = isClient
-    ? isDarkTheme
-      ? ['dark']
-      : ['light']
+  const clientThemes: SourceName[] =
+    colorMode === 'dark' ? ['dark'] : ['light'];
+
+  const renderedSourceNames: SourceName[] = isBrowser
+    ? clientThemes
     : // We need to render both images on the server to avoid flash
       // See https://github.com/facebook/docusaurus/pull/3730
       ['light', 'dark'];
@@ -46,6 +47,4 @@ const ThemedImage = (props: Props): JSX.Element => {
       ))}
     </>
   );
-};
-
-export default ThemedImage;
+}

package/src/theme/ThemedImage/styles.module.css

@@ -1,11 +1,18 @@
+/**
+ * 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.
+ */
+
 .themedImage {
   display: none;
 }
 
-html[data-theme='light'] .themedImage--light {
+[data-theme='light'] .themedImage--light {
   display: initial;
 }
 
-html[data-theme='dark'] .themedImage--dark {
+[data-theme='dark'] .themedImage--dark {
   display: initial;
 }

package/src/theme/prism-include-languages.ts

@@ -5,24 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import siteConfig from '@generated/docusaurus.config';
 import type * as PrismNamespace from 'prismjs';
 
-const prismIncludeLanguages = (PrismObject: typeof PrismNamespace): void => {
-  if (ExecutionEnvironment.canUseDOM) {
-    const {
-      themeConfig: {prism: {additionalLanguages = []} = {}},
-    } = siteConfig;
+export default function prismIncludeLanguages(
+  PrismObject: typeof PrismNamespace,
+): void {
+  const {
+    themeConfig: {prism},
+  } = siteConfig;
+  const {additionalLanguages} = prism as {additionalLanguages: string[]};
 
-    window.Prism = PrismObject;
+  // Prism components work on the Prism instance on the window, while prism-
+  // react-renderer uses its own Prism instance. We temporarily mount the
+  // instance onto window, import components to enhance it, then remove it to
+  // avoid polluting global namespace.
+  // You can mutate PrismObject: registering plugins, deleting languages... As
+  // long as you don't re-assign it
+  globalThis.Prism = PrismObject;
 
-    additionalLanguages.forEach((lang: string) => {
-      require(`prismjs/components/prism-${lang}`); // eslint-disable-line
-    });
+  additionalLanguages.forEach((lang) => {
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    require(`prismjs/components/prism-${lang}`);
+  });
 
-    delete (window as Window & {Prism?: typeof PrismNamespace}).Prism;
-  }
-};
-
-export default prismIncludeLanguages;
+  delete (globalThis as Global & {Prism?: typeof PrismNamespace}).Prism;
+}