feat(components): add code snippet component

docusaurus.config.js

@@ -37,7 +37,7 @@ const config = {
       attributes: {
         'http-equiv': 'Content-Security-Policy',
         content:
-          "default-src 'self' 'unsafe-inline' 'unsafe-eval' data: https://avatars.githubusercontent.com https://github.com https://kit.fontawesome.com/ https://ka-f.fontawesome.com/;",
+          "default-src 'self' 'unsafe-inline' 'unsafe-eval' data: https://avatars.githubusercontent.com https://github.com https://kit.fontawesome.com/ https://ka-f.fontawesome.com/ https://fonts.googleapis.com/ https://fonts.gstatic.com;",
       },
     },
     {
@@ -106,7 +106,11 @@ const config = {
           editUrl: `https://github.com/owilliams320/${projectName}/tree/main`,
         },
         theme: {
-          customCss: ['./node_modules/@covalent/tokens/index.css', './src/css/custom.css'],
+          customCss: [
+            './node_modules/@covalent/tokens/index.css',
+            './src/css/custom.css',
+            './node_modules/@bsahitya/td-doc-design/dist/assets/main.css',
+          ],
         },
       }),
     ],

package.json

@@ -14,7 +14,7 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@bsahitya/td-doc-design": "^0.2.9",
+    "@bsahitya/td-doc-design": "^0.3.2",
     "@covalent/tokens": "^8.10.1",
     "@docusaurus/core": "3.2.0",
     "@docusaurus/preset-classic": "3.2.0",

src/css/custom.css

@@ -50,6 +50,7 @@
   --ifm-color-info-dark: var(--cv-theme-light-colors-primary);
   --ifm-breadcrumb-item-background-active: none;
   --ifm-breadcrumb-color-active: none;
+  --mdc-theme-surface-canvas: var(--cv-theme-surface-container);
 }
 
 body {

src/theme/CodeBlock/Content/Element.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+import Container from '@theme/CodeBlock/Container';
+import styles from './styles.module.css';
+// <pre> tags in markdown map to CodeBlocks. They may contain JSX children. When
+// the children is not a simple string, we just return a styled block without
+// actually highlighting.
+export default function CodeBlockJSX({children, className}) {
+  return (
+    <Container
+      as="pre"
+      tabIndex={0}
+      className={clsx(styles.codeBlockStandalone, 'thin-scrollbar', className)}>
+      <code className={styles.codeBlockLines}>{children}</code>
+    </Container>
+  );
+}

src/theme/CodeBlock/Content/String.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import {
+  parseCodeBlockTitle,
+  parseLanguage,
+} from '@docusaurus/theme-common/internal';
+import { CodeSnippet } from '@bsahitya/td-doc-design';
+
+// Prism languages are always lowercase
+// We want to fail-safe and allow both "php" and "PHP"
+// See https://github.com/facebook/docusaurus/issues/9012
+function normalizeLanguage(language) {
+  return language?.toLowerCase();
+}
+export default function CodeBlockString({
+  children,
+  className: blockClassName = '',
+  metastring,
+  title: titleProp,
+  language: languageProp,
+}) {
+  const {
+    prism: { defaultLanguage },
+  } = useThemeConfig();
+  const language = normalizeLanguage(
+    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage
+  );
+
+  const title = parseCodeBlockTitle(metastring) || titleProp;
+
+  return (
+    <CodeSnippet
+      key={title}
+      label={title}
+      maxHeight={0}
+      language={language || 'text'}
+      content={children}
+      hideHeader={!title}
+    ></CodeSnippet>
+  );
+}

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

@@ -0,0 +1,18 @@
+cv-code-snippet {
+  background-color: var(--cv-theme-surface-container);
+  --mdc-theme-surface-canvas: var(--cv-theme-surface-container);
+  margin-bottom: var(--ifm-leading);
+}
+
+.codeBlockStandalone {
+  padding: 0;
+  background-color: var(--cv-theme-surface-container);
+}
+
+.codeBlockLines {
+  font: inherit;
+  /* rtl:ignore */
+  float: left;
+  min-width: 100%;
+  padding: var(--ifm-pre-padding);
+}

src/theme/CodeBlock/index.js

@@ -0,0 +1,32 @@
+import React, { isValidElement } from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import ElementContent from '@theme/CodeBlock/Content/Element';
+import StringContent from '@theme/CodeBlock/Content/String';
+/**
+ * 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;
+  return (
+    <CodeBlockComp key={String(isBrowser)} {...props}>
+      {children}
+    </CodeBlockComp>
+  );
+}