@docusaurus/theme-classic 2.0.0-beta.12faed89d → 2.0.0-beta.14

package/src/theme/CodeBlock/index.tsx

@@ -5,91 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect, useState, useRef} from 'react';
+import React, {useEffect, useState} from 'react';
 import clsx from 'clsx';
 import Highlight, {defaultProps, Language} from 'prism-react-renderer';
 import copy from 'copy-text-to-clipboard';
-import rangeParser from 'parse-numeric-range';
+import Translate, {translate} from '@docusaurus/Translate';
+import {
+  useThemeConfig,
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import type {Props} from '@theme/CodeBlock';
-import Translate, {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
 
-import {useThemeConfig, parseCodeBlockTitle} from '@docusaurus/theme-common';
-
-const highlightLinesRangeRegex = /{([\d,-]+)}/;
-const getHighlightDirectiveRegex = (
-  languages = ['js', 'jsBlock', 'jsx', 'python', 'html'],
-) => {
-  // supported types of comments
-  const comments = {
-    js: {
-      start: '\\/\\/',
-      end: '',
-    },
-    jsBlock: {
-      start: '\\/\\*',
-      end: '\\*\\/',
-    },
-    jsx: {
-      start: '\\{\\s*\\/\\*',
-      end: '\\*\\/\\s*\\}',
-    },
-    python: {
-      start: '#',
-      end: '',
-    },
-    html: {
-      start: '<!--',
-      end: '-->',
-    },
-  };
-  // supported directives
-  const directives = [
-    'highlight-next-line',
-    'highlight-start',
-    'highlight-end',
-  ].join('|');
-  // to be more reliable, the opening and closing comment must match
-  const commentPattern = languages
-    .map(
-      (lang) =>
-        `(?:${comments[lang].start}\\s*(${directives})\\s*${comments[lang].end})`,
-    )
-    .join('|');
-  // white space is allowed, but otherwise it should be on it's own line
-  return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
-};
-// select comment styles based on language
-const highlightDirectiveRegex = (lang) => {
-  switch (lang) {
-    case 'js':
-    case 'javascript':
-    case 'ts':
-    case 'typescript':
-      return getHighlightDirectiveRegex(['js', 'jsBlock']);
-
-    case 'jsx':
-    case 'tsx':
-      return getHighlightDirectiveRegex(['js', 'jsBlock', 'jsx']);
-
-    case 'html':
-      return getHighlightDirectiveRegex(['js', 'jsBlock', 'html']);
-
-    case 'python':
-    case 'py':
-      return getHighlightDirectiveRegex(['python']);
-
-    default:
-      // all comment types
-      return getHighlightDirectiveRegex();
-  }
-};
-
 export default function CodeBlock({
   children,
-  className: languageClassName,
+  className: blockClassName,
   metastring,
   title,
 }: Props): JSX.Element {
@@ -112,78 +47,16 @@ export default function CodeBlock({
   // so we probably don't need to parse the metastring
   // (note: title="xyz" => title prop still has the quotes)
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
-
-  const button = useRef(null);
-  let highlightLines: number[] = [];
-
   const prismTheme = usePrismTheme();
 
   // In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
-  const content = Array.isArray(children) ? children.join('') : children;
-
-  if (metastring && highlightLinesRangeRegex.test(metastring)) {
-    // Tested above
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)![1];
-    highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0);
-  }
-
-  let language =
-    languageClassName &&
-    // Force Prism's language union type to `any` because it does not contain all available languages
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ((languageClassName.replace(/language-/, '') as Language) as any);
-
-  if (!language && prism.defaultLanguage) {
-    language = prism.defaultLanguage;
-  }
+  const content = Array.isArray(children)
+    ? children.join('')
+    : (children as string);
 
-  // only declaration OR directive highlight can be used for a block
-  let code = content.replace(/\n$/, '');
-  if (highlightLines.length === 0 && language !== undefined) {
-    let range = '';
-    const directiveRegex = highlightDirectiveRegex(language);
-    // go through line by line
-    const lines = content.replace(/\n$/, '').split('\n');
-    let blockStart;
-    // loop through lines
-    for (let index = 0; index < lines.length; ) {
-      const line = lines[index];
-      // adjust for 0-index
-      const lineNumber = index + 1;
-      const match = line.match(directiveRegex);
-      if (match !== null) {
-        const directive = match
-          .slice(1)
-          .reduce(
-            (final: string | undefined, item) => final || item,
-            undefined,
-          );
-        switch (directive) {
-          case 'highlight-next-line':
-            range += `${lineNumber},`;
-            break;
-
-          case 'highlight-start':
-            blockStart = lineNumber;
-            break;
-
-          case 'highlight-end':
-            range += `${blockStart}-${lineNumber - 1},`;
-            break;
-
-          default:
-            break;
-        }
-        lines.splice(index, 1);
-      } else {
-        // lines without directives are unchanged
-        index += 1;
-      }
-    }
-    highlightLines = rangeParser(range);
-    code = lines.join('\n');
-  }
+  const language =
+    parseLanguage(blockClassName) ?? (prism.defaultLanguage as Language);
+  const {highlightLines, code} = parseLines(content, metastring, language);
 
   const handleCopyCode = () => {
     copy(code);
@@ -200,7 +73,12 @@ export default function CodeBlock({
       code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockContainer}>
+        <div
+          className={clsx(
+            styles.codeBlockContainer,
+            blockClassName,
+            ThemeClassNames.common.codeBlock,
+          )}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
@@ -210,19 +88,17 @@ export default function CodeBlock({
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar', {
-                [styles.codeBlockWithTitle]: codeBlockTitle,
-              })}
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
               style={style}>
               <code className={styles.codeBlockLines}>
                 {tokens.map((line, i) => {
-                  if (line.length === 1 && line[0].content === '') {
-                    line[0].content = '\n'; // eslint-disable-line no-param-reassign
+                  if (line.length === 1 && line[0].content === '\n') {
+                    line[0].content = '';
                   }
 
                   const lineProps = getLineProps({line, key: i});
 
-                  if (highlightLines.includes(i + 1)) {
+                  if (highlightLines.includes(i)) {
                     lineProps.className += ' docusaurus-highlight-code-line';
                   }
 
@@ -231,6 +107,7 @@ export default function CodeBlock({
                       {line.map((token, key) => (
                         <span key={key} {...getTokenProps({token, key})} />
                       ))}
+                      <br />
                     </span>
                   );
                 })}
@@ -238,7 +115,6 @@ export default function CodeBlock({
             </pre>
 
             <button
-              ref={button}
               type="button"
               aria-label={translate({
                 id: 'theme.CodeBlock.copyButtonAriaLabel',

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

@@ -7,6 +7,8 @@
 
 .codeBlockContainer {
   margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
 }
 
 .codeBlockContent {
@@ -16,23 +18,25 @@
 }
 
 .codeBlockTitle {
-  border-top-left-radius: var(--ifm-global-radius);
-  border-top-right-radius: var(--ifm-global-radius);
   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: var(--ifm-global-radius);
+  border-top-right-radius: var(--ifm-global-radius);
 }
 
-.codeBlock {
-  padding: 0;
-}
-
-.codeBlockWithTitle {
+.codeBlockTitle + .codeBlockContent .codeBlock {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
+.codeBlock {
+  margin: 0;
+  padding: 0;
+  border-radius: var(--ifm-global-radius);
+}
+
 .copyButton {
   background: rgba(0, 0, 0, 0.3);
   border-radius: var(--ifm-global-radius);
@@ -54,11 +58,10 @@
 
 .codeBlockLines {
   font: inherit;
+  /*rtl:ignore*/
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);
-  display: flex;
-  flex-direction: column;
 }
 
 @media print {

package/src/theme/Details/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * 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 {Details as DetailsGeneric} from '@docusaurus/theme-common';
+import type {Props} from '@theme/Details';
+import styles from './styles.module.css';
+
+// Should we have a custom details/summary comp in Infima instead of reusing alert classes?
+const InfimaClasses = 'alert alert--info';
+
+export default function Details({...props}: Props): JSX.Element {
+  return (
+    <DetailsGeneric
+      {...props}
+      className={clsx(InfimaClasses, styles.details, props.className)}
+    />
+  );
+}

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

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+
+.details {
+  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  border: 1px solid var(--ifm-alert-border-color);
+}

package/src/theme/DocCard/index.tsx

@@ -0,0 +1,100 @@
+/**
+ * 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, {ReactNode} from 'react';
+import Link from '@docusaurus/Link';
+import {
+  PropSidebarItemCategory,
+  PropSidebarItemLink,
+} from '@docusaurus/plugin-content-docs';
+import type {Props} from '@theme/DocCard';
+import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+
+function CardContainer({
+  href,
+  children,
+}: {
+  href?: string;
+  children: ReactNode;
+}): JSX.Element {
+  const className = clsx(
+    'card margin-bottom--lg padding--lg',
+    styles.cardContainer,
+    href && styles.cardContainerLink,
+  );
+  return href ? (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  ) : (
+    <div className={className}>{children}</div>
+  );
+}
+
+function CardLayout({
+  href,
+  icon,
+  title,
+  description,
+}: {
+  href?: string;
+  icon: ReactNode;
+  title: string;
+  description?: string;
+}): JSX.Element {
+  return (
+    <CardContainer href={href}>
+      <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
+        {icon} {title}
+      </h2>
+      <div
+        className={clsx('text--truncate', styles.cardDescription)}
+        title={description}>
+        {description}
+      </div>
+    </CardContainer>
+  );
+}
+
+function CardCategory({item}: {item: PropSidebarItemCategory}): JSX.Element {
+  const href = findFirstCategoryLink(item);
+  return (
+    <CardLayout
+      href={href}
+      icon="🗃️"
+      title={item.label}
+      description={`${item.items.length} items`}
+    />
+  );
+}
+
+function CardLink({item}: {item: PropSidebarItemLink}): JSX.Element {
+  const icon = isInternalUrl(item.href) ? '📄️' : '🔗';
+  const doc = useDocById(item.docId ?? undefined);
+  return (
+    <CardLayout
+      href={item.href}
+      icon={icon}
+      title={item.label}
+      description={doc?.description}
+    />
+  );
+}
+
+export default function DocCard({item}: Props): JSX.Element {
+  switch (item.type) {
+    case 'link':
+      return <CardLink item={item} />;
+    case 'category':
+      return <CardCategory item={item} />;
+    default:
+      throw new Error(`unknown item type ${JSON.stringify(item)}`);
+  }
+}

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

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+.cardContainer {
+  height: 8rem;
+
+  color: var(--ifm-color-emphasis-800);
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-decoration: none;
+
+  /* box-shadow: var(--ifm-global-shadow-lw); */
+  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: box-shadow var(--ifm-transition-fast) ease,
+    background-color var(--ifm-transition-fast) ease;
+}
+
+.cardContainer.cardContainerLink:hover {
+  /* box-shadow: var(--ifm-global-shadow-md); */
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+html[data-theme='dark'] .cardContainer.cardContainerLink:hover {
+  --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
+}
+
+.cardContainer:not(.cardContainerLink) {
+  cursor: not-allowed;
+}
+
+.cardTitle {
+  font-size: 1.2rem;
+  min-height: 1.2rem;
+}
+
+.cardDescription {
+  font-size: 0.8rem;
+  min-height: 0.8rem;
+}

package/src/theme/DocCardList/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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 DocCard from '@theme/DocCard';
+import {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+
+export default function DocCardList({
+  items,
+}: {
+  items: PropSidebarItem[];
+}): JSX.Element {
+  return (
+    <div className="row">
+      {items.map((item, index) => (
+        <article key={index} className="col col--6">
+          <DocCard item={item} />
+        </article>
+      ))}
+    </div>
+  );
+}

package/src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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 {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocCategoryGeneratedIndexPage';
+import DocCardList from '@theme/DocCardList';
+import DocPaginator from '@theme/DocPaginator';
+import Seo from '@theme/Seo';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import {MainHeading} from '@theme/Heading';
+
+import styles from './styles.module.css';
+
+export default function DocCategoryGeneratedIndexPage({
+  categoryGeneratedIndex,
+}: Props): JSX.Element {
+  const category = useCurrentSidebarCategory();
+  return (
+    <>
+      <Seo
+        title={categoryGeneratedIndex.title}
+        description={categoryGeneratedIndex.description}
+      />
+      <div className={styles.generatedIndexPage}>
+        <DocVersionBanner />
+        <DocVersionBadge />
+        <header>
+          <MainHeading className={styles.title}>
+            {categoryGeneratedIndex.title}
+          </MainHeading>
+          {categoryGeneratedIndex.description && (
+            <p>{categoryGeneratedIndex.description}</p>
+          )}
+        </header>
+        <main className="margin-top--lg">
+          <DocCardList items={category.items} />
+        </main>
+        <footer className="margin-top--lg">
+          <DocPaginator
+            previous={categoryGeneratedIndex.navigation.previous}
+            next={categoryGeneratedIndex.navigation.next}
+          />
+        </footer>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +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.
+ */
+
+@media (min-width: 997px) {
+  .generatedIndexPage {
+    max-width: 75% !important;
+  }
+}
+
+/* Duplicated from .markdown h1 */
+.title {
+  --ifm-h1-font-size: 3rem;
+  margin-bottom: calc(1.25 * var(--ifm-leading));
+}