docs: added code blocks without headers (#2560)

2022-11-07 17:36:51 +02:00
parent bbf4039147
commit c0639ef708
35 changed files with 336 additions and 98 deletions
--- a/www/docs/src/css/_code.css
+++ b/www/docs/src/css/_code.css
@@ -97,10 +97,14 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
  font-size: 13px;
 }

-.theme-code-block {
+.theme-code-block:not(.no-header-block) {
  border-radius: 0 0 var(--ifm-code-border-radius) var(--ifm-code-border-radius) !important;
 }

+.theme-code-block.no-header-block {
+  border-radius: var(--ifm-code-border-radius);
+}
+
 .code-action {
  background-color: transparent;
  border: none;
@@ -128,10 +132,15 @@ a.code-action {
  width: 20px;
 }

-.theme-code-block [class*=buttonGroup] {
+.theme-code-block:not(.no-header-block) [class*=buttonGroup] {
  display: none;
 }

+.theme-code-block.no-header-block [class*=buttonGroup] button {
+  opacity: 1 !important;
+  border: none;
+}
+
 .copy-action {
  cursor: pointer;
 }
@@ -145,8 +154,19 @@ a.code-action {
  border-bottom: none;
 }

-[data-theme="dark"] .theme-code-block {
-  border-top: none;
+html:not([data-theme="dark"]) .theme-code-block:not(.no-header-block) {
+  --ifm-code-border-color: #393939;
+
+  border-top: 1px solid var(--ifm-code-border-color);
+}
+
+.theme-code-block.no-header-block code:not(.thin-code),
+.theme-code-block:not(.no-header-block) code {
+  padding: var(--ifm-pre-padding);
+}
+
+.theme-code-block.no-header-block .thin-code {
+  padding: calc(var(--ifm-pre-padding) / 2);
 }

@media screen and (min-width: 568px) {
--- a/www/docs/src/css/_docspage.css
+++ b/www/docs/src/css/_docspage.css
@@ -137,6 +137,10 @@ html:not([data-theme="dark"]) .doc-footer {
  z-index: var(--ifm-z-index-overlay);
 }

+details > div {
+  --docusaurus-details-decoration-color: transparent !important;
+}
+
@media (min-width: 1440px) {
  .markdown-doc-wrapper {
    max-width: var(--ifm-container-width-xl) !important;
--- a/www/docs/src/css/_note.css
+++ b/www/docs/src/css/_note.css
@@ -19,9 +19,11 @@
 html:not([data-theme="dark"]) [class*=alert--] {
  --ifm-code-background: #F9FAFB !important;
  --ifm-alert-background-color-highlight: #F9FAFB !important;
+  --ifm-link-color: #4B5563 !important;
 }

 [data-theme="dark"] [class*=alert--] {
  --ifm-code-background: #222222 !important;
  --ifm-alert-background-color-highlight: #222222 !important;
+  --ifm-link-color: #8A8A8A !important;
 }
--- a/www/docs/src/css/_variables.css
+++ b/www/docs/src/css/_variables.css
@@ -86,6 +86,8 @@
  --ifm-code-tabs-active-bg: transparent;
  --ifm-code-tabs-active-color: #F4F4F4;
  --ifm-code-action-hover-bg: rgba(141, 141, 141, 0.16);
+  --ifm-pre-padding: 16px;
+  --docusaurus-highlighted-code-line-bg: #393939;

  /* Tooltip */
  --ifm-tooltip-background-color: #fff;
@@ -143,12 +145,7 @@ html[data-theme="dark"] {
  --ifm-hr-background-color: #2D2D2D;

  /* Colors */
-  --ifm-color-primary-dark: #6231ff;
-  --ifm-color-primary-darker: #5520ff;
-  --ifm-color-primary-darkest: #3800ed;
-  --ifm-color-primary: #9675ff;
-  --ifm-color-primary-lighter: #a386ff;
-  --ifm-color-primary-lightest: #c9b8ff;
+  --ifm-color-primary: #F3F3F3;
  --ifm-background-color: #161616;
  --ifm-background-surface-color: #161616;
  --ifm-medusa-gray: #292929;
@@ -237,4 +234,7 @@ html[data-theme="dark"] {
  --ifm-announcement-bar-icon-bg: #393939;
  --ifm-announcement-bar-icon-border-color: #393939;
  --ifm-announcement-bar-text-color: #737373;
+
+  /* Tabs */
+  --ifm-tabs-color-active: #F3F3F3;
 }
--- a/www/docs/src/theme/CodeBlock/Content/String.js
+++ b/www/docs/src/theme/CodeBlock/Content/String.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common';
+import {
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+  containsLineNumbers,
+  useCodeWordWrap,
+} from '@docusaurus/theme-common/internal';
+import Highlight, {defaultProps} from 'prism-react-renderer';
+import Line from '@theme/CodeBlock/Line';
+import Container from '@theme/CodeBlock/Container';
+import styles from './styles.module.css';
+import CopyButton from '../../CopyButton';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+export default function CodeBlockString({
+  children,
+  className: blockClassName = '',
+  metastring,
+  title: titleProp,
+  showLineNumbers: showLineNumbersProp,
+  language: languageProp,
+}) {
+  const {
+    prism: {defaultLanguage, magicComments},
+  } = useThemeConfig();
+  const language =
+    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
+  const prismTheme = usePrismTheme();
+  const wordWrap = useCodeWordWrap();
+  // 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\""
+  const title = parseCodeBlockTitle(metastring) || titleProp;
+  const {lineClassNames, code} = parseLines(children, {
+    metastring,
+    language,
+    magicComments,
+  });
+  const showLineNumbers =
+    showLineNumbersProp ?? containsLineNumbers(metastring);
+  return (
+    <Container
+      as="div"
+      className={clsx(
+        blockClassName,
+        language &&
+          !blockClassName.includes(`language-${language}`) &&
+          `language-${language}`,
+      )}>
+      {title && <div className={styles.codeBlockTitle}>{title}</div>}
+      <div className={styles.codeBlockContent}>
+        <Highlight
+          {...defaultProps}
+          theme={prismTheme}
+          code={code}
+          language={language ?? 'text'}>
+          {({className, tokens, getLineProps, getTokenProps}) => (
+            <pre
+              /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+              tabIndex={0}
+              ref={wordWrap.codeBlockRef}
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              <code
+                className={clsx(
+                  styles.codeBlockLines,
+                  showLineNumbers && styles.codeBlockLinesWithNumbering,
+                  tokens.length === 1 ? 'thin-code' : ''
+                )}>
+                {tokens.map((line, i) => (
+                  <Line
+                    key={i}
+                    line={line}
+                    getLineProps={getLineProps}
+                    getTokenProps={getTokenProps}
+                    classNames={lineClassNames[i]}
+                    showLineNumbers={showLineNumbers}
+                  />
+                ))}
+              </code>
+            </pre>
+          )}
+        </Highlight>
+        <div className={styles.buttonGroup}>
+          {/* <CopyButton className={styles.codeButton} code={code} /> */}
+          <CopyButton buttonClassName='code-action' text={code}>
+            <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>
+      </div>
+    </Container>
+  );
+}
--- a/www/docs/src/theme/CodeBlock/Content/styles.module.css
+++ b/www/docs/src/theme/CodeBlock/Content/styles.module.css
@@ -0,0 +1,85 @@
+/**
+ * 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.
+ */
+
+ .codeBlockContent {
+  position: relative;
+  /* rtl:ignore */
+  direction: ltr;
+  border-radius: inherit;
+}
+
+.codeBlockTitle {
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  font-size: var(--ifm-code-font-size);
+  font-weight: 500;
+  padding: 0.75rem var(--ifm-pre-padding);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.codeBlock {
+  --ifm-pre-background: var(--prism-background-color);
+  margin: 0;
+  padding: 0;
+}
+
+.codeBlockTitle + .codeBlockContent .codeBlock {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.codeBlockStandalone {
+  padding: 0;
+}
+
+.codeBlockLines {
+  font: inherit;
+  /* rtl:ignore */
+  float: left;
+  min-width: 100%;
+}
+
+.codeBlockLinesWithNumbering {
+  display: table;
+  padding: var(--ifm-pre-padding) 0;
+}
+
+@media print {
+  .codeBlockLines {
+    white-space: pre-wrap;
+  }
+}
+
+.buttonGroup {
+  display: flex;
+  column-gap: 0.2rem;
+  position: absolute;
+  right: calc(var(--ifm-pre-padding) / 4 - 2px);
+  top: calc(var(--ifm-pre-padding) / 4 - 2px);
+}
+
+.buttonGroup button {
+  display: flex;
+  align-items: center;
+  background: var(--prism-background-color);
+  color: var(--prism-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  padding: 0.4rem;
+  line-height: 0;
+  transition: opacity 200ms ease-in-out;
+  opacity: 0;
+}
+
+.buttonGroup button:focus-visible,
+.buttonGroup button:hover {
+  opacity: 1 !important;
+}
+
+:global(.theme-code-block:hover) .buttonGroup button {
+  opacity: 0.4;
+}
--- a/www/docs/src/theme/CodeBlock/index.js
+++ b/www/docs/src/theme/CodeBlock/index.js
@@ -1,4 +1,4 @@
-import React, {isValidElement, useCallback, useEffect, useState} from 'react';
+import React, {isValidElement} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import ElementContent from '@theme/CodeBlock/Content/Element';
@@ -21,7 +21,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, ...props}) {
+export default function CodeBlock({children: rawChildren, noHeader = 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
@@ -34,23 +34,25 @@ export default function CodeBlock({children: rawChildren, ...props}) {

  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 ? 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')
+      {!noHeader && (
+        <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" />
-          </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}>
+          </CopyButton>
+        </div>
+      )}
+      <CodeBlockComp key={String(isBrowser)} {...props} className={noHeader ? 'no-header-block' : ''}>
        {children}
      </CodeBlockComp>
    </div>
--- a/www/docs/src/theme/DocCard/styles.module.css
+++ b/www/docs/src/theme/DocCard/styles.module.css
@@ -1,6 +1,4 @@
 .cardContainer {
-  --ifm-link-color: var(--ifm-color-emphasis-800);
-  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
  --ifm-link-hover-decoration: none;
  --ifm-background-color: #fff;
  --ifm-background-color-hover: #F9FAFB;