docs: redesigned code blocks (#2745)

* docs: redesigned code blocks to include titles

* docs: added a title where necessary

www/docs/src/theme/CodeBlock/Content/String.js

@@ -1,20 +1,23 @@
-import React from 'react';
-import clsx from 'clsx';
-import {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common';
+import Highlight, {defaultProps} from 'prism-react-renderer';
+import React, { useEffect } from 'react';
 import {
+  containsLineNumbers,
   parseCodeBlockTitle,
   parseLanguage,
   parseLines,
-  containsLineNumbers,
   useCodeWordWrap,
 } from '@docusaurus/theme-common/internal';
-import Highlight, {defaultProps} from 'prism-react-renderer';
-import Line from '@theme/CodeBlock/Line';
+import {usePrismTheme, useThemeConfig} from '@docusaurus/theme-common';
+
 import Container from '@theme/CodeBlock/Container';
-import styles from './styles.module.css';
 import CopyButton from '../../CopyButton';
+import Line from '@theme/CodeBlock/Line';
 import ThemedImage from '@theme/ThemedImage';
+import Tooltip from '../../Tooltip';
+import clsx from 'clsx';
+import styles from './styles.module.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 export default function CodeBlockString({
   children,
@@ -23,14 +26,17 @@ export default function CodeBlockString({
   title: titleProp,
   showLineNumbers: showLineNumbersProp,
   language: languageProp,
+  noReport = false
 }) {
   const {
     prism: {defaultLanguage, magicComments},
+    reportCodeLinkPrefix
   } = useThemeConfig();
   const language =
     languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
   const prismTheme = usePrismTheme();
   const wordWrap = useCodeWordWrap();
+  const isBrowser = useIsBrowser();
   // We still parse the metastring in case we want to support more syntax in the
   // future. Note that MDX doesn't strip quotes when parsing metastring:
   // "title=\"xyz\"" => title: "\"xyz\""
@@ -63,7 +69,7 @@ export default function CodeBlockString({
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
               ref={wordWrap.codeBlockRef}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar', tokens.length === 1 ? styles.thinCodeWrapper : '')}>
               <code
                 className={clsx(
                   styles.codeBlockLines,
@@ -85,7 +91,16 @@ export default function CodeBlockString({
           )}
         </Highlight>
         <div className={styles.buttonGroup}>
-          {/* <CopyButton className={styles.codeButton} code={code} /> */}
+          {!noReport && (
+            <Tooltip text="Report Incorrect Code">
+              <a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} 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={code}>
             <ThemedImage alt='Copy to Clipboard' sources={{
               light: useBaseUrl('/img/clipboard-copy.png'),

www/docs/src/theme/CodeBlock/Content/styles.module.css

@@ -58,11 +58,11 @@
   display: flex;
   column-gap: 0.2rem;
   position: absolute;
-  right: calc(var(--ifm-pre-padding) / 4 - 2px);
-  top: calc(var(--ifm-pre-padding) / 4 - 2px);
+  right: var(--ifm-pre-padding);
+  top: var(--ifm-pre-padding);
 }
 
-.buttonGroup button {
+.buttonGroup .code-action {
   display: flex;
   align-items: center;
   background: var(--prism-background-color);
@@ -80,6 +80,10 @@
   opacity: 1 !important;
 }
 
+.thinCodeWrapper + .buttonGroup {
+  top: calc(var(--ifm-pre-padding) / 4 - 2px) !important;
+}
+
 :global(.theme-code-block:hover) .buttonGroup button {
   opacity: 0.4;
 }

www/docs/src/theme/CodeBlock/index.js

@@ -1,13 +1,8 @@
 import React, {isValidElement} from 'react';
 
-import CopyButton from '../CopyButton';
 import ElementContent from '@theme/CodeBlock/Content/Element';
 import StringContent from '@theme/CodeBlock/Content/String';
-import ThemedImage from '@theme/ThemedImage';
-import Tooltip from '../Tooltip';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import {useThemeConfig} from '@docusaurus/theme-common';
 
 /**
  * Best attempt to make the children a plain string so it is copyable. If there
@@ -22,7 +17,7 @@ function maybeStringifyChildren(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, noHeader = false, ...props}) {
+export default function CodeBlock({children: rawChildren, noReport = false, ...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
@@ -31,29 +26,18 @@ export default function CodeBlock({children: rawChildren, noHeader = false, ...p
   const children = maybeStringifyChildren(rawChildren);
   const CodeBlockComp =
     typeof children === 'string' ? StringContent : ElementContent;
-  const {reportCodeLinkPrefix} = useThemeConfig();
+
+  const title = props.title;
+  delete props.title;
 
   return (
     <div className='code-wrapper'>
-      {!noHeader && (
+      {title && (
         <div className='code-header'>
-          <Tooltip text="Report Incorrect Code">
-            <a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} 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>
+          {title}
         </div>
       )}
-      <CodeBlockComp key={String(isBrowser)} {...props} className={noHeader ? 'no-header-block' : ''}>
+      <CodeBlockComp key={String(isBrowser)} {...props} noReport={noReport} className={title ? '' : 'no-header-block'}>
         {children}
       </CodeBlockComp>
     </div>