docs: redesigned documentation (#2539)

* docs: redesigned navigation bar (#2478) * docs: redesigned homepage (#2480) * docs: redesigned homepage * fixed link * docs: redesigned notes (#2491) * docs: Applied Typography redesign rules (#2516) * changes to typography * small changes and fixes * docs: redesigned table of content (#2518) * redesigning toc * finalized table of content design * docs: redesigned code blocks (#2519) * docs: redesigned code blocks * removed unused package * docs: redesigned survey and content footer (#2522) * fixes to inline code * redesigned doc footer * docs: redesigned footer (#2523) * docs: changed dark mode colors (#2524) * docs: redesigned sidebar (#2535) * docs: redesigned search modal (#2537) * docs: resolved loose ends (#2538) * added spacing for tabs * docs: added no-zoom class for deploy images * fix to tooltip design for inline code
2022-11-03 18:59:46 +02:00
parent aee53884a4
commit 76a16aa131
146 changed files with 3449 additions and 1193 deletions
--- a/www/docs/src/theme/CodeBlock/index.js
+++ b/www/docs/src/theme/CodeBlock/index.js
@@ -0,0 +1,58 @@
+import React, {isValidElement} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ElementContent from '@theme/CodeBlock/Content/Element';
+import StringContent from '@theme/CodeBlock/Content/String';
+import ThemedImage from '@theme/ThemedImage';
+import Tooltip from '../Tooltip';
+import CopyButton from '../CopyButton';
+import {useThemeConfig} from '@docusaurus/theme-common';
+
+/**
+ * Best attempt to make the children a plain string so it is copyable. If there
+ * are react elements, we will not be able to copy the content, and it will
+ * return `children` as-is; otherwise, it concatenates the string children
+ * together.
+ */
+function maybeStringifyChildren(children) {
+  if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+    return children;
+  }
+  // The children is now guaranteed to be one/more plain strings
+  return Array.isArray(children) ? children.join('') : children;
+}
+export default function CodeBlock({children: rawChildren, ...props}) {
+  // The Prism theme on SSR is always the default theme but the site theme can
+  // be in a different mode. React hydration doesn't update DOM styles that come
+  // from SSR. Hence force a re-render after mounting to apply the current
+  // relevant styles.
+  const isBrowser = useIsBrowser();
+  const children = maybeStringifyChildren(rawChildren);
+  const CodeBlockComp =
+    typeof children === 'string' ? StringContent : ElementContent;
+  const {reportCodeLinkPrefix} = useThemeConfig();
+
+  return (
+    <div className='code-wrapper'>
+      <div className='code-header'>
+        <Tooltip text="Report Incorrect Code">
+          <a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? document?.title : ''}`)}`} target="_blank" className='report-code code-action img-url'>
+            <ThemedImage alt='Report Incorrect Code' sources={{
+              light: useBaseUrl('/img/alert-code.png'),
+              dark: useBaseUrl('/img/alert-code-dark.png')
+            }} className="no-zoom-img" />
+          </a>
+        </Tooltip>
+        <CopyButton buttonClassName='code-action' text={children}>
+          <ThemedImage alt='Copy to Clipboard' sources={{
+            light: useBaseUrl('/img/clipboard-copy.png'),
+            dark: useBaseUrl('/img/clipboard-copy-dark.png')
+          }} className="no-zoom-img" />
+        </CopyButton>
+      </div>
+      <CodeBlockComp key={String(isBrowser)} {...props}>
+        {children}
+      </CodeBlockComp>
+    </div>
+  );
+}