diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 9a0b041a..e0cdf316 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -32,15 +32,20 @@ module.exports = { ] ], themeConfig: { + docs: { + sidebar: { + hideable: true, + }, + }, image: '/img/getsynth_favicon.png', fathomAnalytics: { siteId: isTargetVercel() ? 'QRVYRJEG' : 'HSFEOKWQ', }, algolia: { + appId: 'synth', apiKey: 'b0583a1f7732cee4e8c80f4a86adf57c', indexName: 'synth', }, - hideableSidebar: true, colorMode: { defaultMode: 'dark', disableSwitch: false, diff --git a/docs/src/theme/CodeBlock/index.tsx b/docs/src/theme/CodeBlock/index.tsx deleted file mode 100644 index 60b3b1c8..00000000 --- a/docs/src/theme/CodeBlock/index.tsx +++ /dev/null @@ -1,315 +0,0 @@ -/** - * 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, {useEffect, useState, useRef} 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 usePrismTheme from '@theme/hooks/usePrismTheme'; -import type {Props} from '@theme/CodeBlock'; -import Translate, {translate} from '@docusaurus/Translate'; -import PlaygroundBlock from "../PlaygroundBlock"; - -import styles from './styles.module.css'; - -import {useThemeConfig, parseCodeBlockTitle} from '@docusaurus/theme-common'; - -const HighlightLinesRangeRegex = /{([\d,-]+)}/; - -const HighlightLanguages = ['js', 'jsBlock', 'jsx', 'python', 'html'] as const; -type HighlightLanguage = typeof HighlightLanguages[number]; - -type HighlightLanguageConfig = { - start: string; - end: string; -}; - -// Supported types of highlight comments -const HighlightComments: Record = { - js: { - start: '\\/\\/', - end: '', - }, - jsBlock: { - start: '\\/\\*', - end: '\\*\\/', - }, - jsx: { - start: '\\{\\s*\\/\\*', - end: '\\*\\/\\s*\\}', - }, - python: { - start: '#', - end: '', - }, - html: { - start: '', - }, -}; - -// Supported highlight directives -const HighlightDirectives = [ - 'highlight-next-line', - 'highlight-start', - 'highlight-end', -]; - -const getHighlightDirectiveRegex = ( - languages: readonly HighlightLanguage[] = HighlightLanguages, -) => { - // to be more reliable, the opening and closing comment must match - const commentPattern = languages - .map((lang) => { - const {start, end} = HighlightComments[lang]; - return `(?:${start}\\s*(${HighlightDirectives.join('|')})\\s*${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: string) => { - 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, - metastring, - title, - isResult = false - }: Props): JSX.Element { - const {prism} = useThemeConfig(); - - const [showCopied, setShowCopied] = useState(false); - const [mounted, setMounted] = useState(false); - const [showResult, setShowResult] = useState(0); - // 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. There will be a flash seen of the original - // styles seen using this current approach but that's probably ok. Fixing - // the flash will require changing the theming approach and is not worth it - // at this point. - useEffect(() => { - setMounted(true); - }, []); - - // TODO: the title is provided by MDX as props automatically - // 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 runButton = useRef(null); - - const prismTheme = usePrismTheme(); - - // In case interleaved Markdown (e.g. when using CodeBlock as standalone component). - const content = Array.isArray(children) - ? children.join('') - : (children as string); - - if (metastring && HighlightLinesRangeRegex.test(metastring)) { - // Tested above - const highlightLinesRange = metastring.match(HighlightLinesRangeRegex)![1]; - highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0); - } - - let language = languageClassName?.replace(/language-/, '') as Language; - - if (!language && prism.defaultLanguage) { - language = prism.defaultLanguage as Language; - } - - // 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: number; - // 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 codeWithoutComments = code.replace(/\/\/.*/g, ''); - - const handleCopyCode = () => { - copy(code); - setShowCopied(true); - - setTimeout(() => setShowCopied(false), 2000); - }; - - const handleShowResult = () => { - setShowResult(showResult + 1); - }; - - return ( - <> - - {({className, style, tokens, getLineProps, getTokenProps}) => ( -
- {codeBlockTitle && ( -
- {codeBlockTitle} -
- )} -
- 
-                              
-                                {tokens.map((line, i) => {
-                                    if (line.length === 1 && line[0].content === '') {
-                                        line[0].content = '\n'; // eslint-disable-line no-param-reassign
-                                    }
-
-                                    const lineProps = getLineProps({line, key: i});
-
-                                    if (highlightLines.includes(i + 1)) {
-                                        lineProps.className += ' docusaurus-highlight-code-line';
-                                    }
-
-                                    return (
-                                        
-                                      {line.map((token, key) => (
-                                          
-                                      ))}
-                                    
-                                    );
-                                })}
-                              
-
-
- { - !isResult && - } - { - (!isResult && metastring == "synth") && - - } - { - isResult && - - Output - - } -
-
- { - (showResult != 0) && - - } -
- )} - - - ); -} diff --git a/docs/src/theme/CodeBlock/styles.module.css b/docs/src/theme/CodeBlock/styles.module.css deleted file mode 100644 index 138d76db..00000000 --- a/docs/src/theme/CodeBlock/styles.module.css +++ /dev/null @@ -1,104 +0,0 @@ -/** - * 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. - */ - -.codeBlockContainer { - margin-bottom: var(--ifm-leading); - border-radius: var(--ifm-global-radius); - box-shadow: var(--ifm-global-shadow-lw); - overflow: hidden; -} - -.codeBlockWithTitle { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.codeBlockWithResult { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.codeBlockContent { - position: relative; - /*rtl:ignore*/ - direction: ltr; -} - -.resultBlockContent { - background-color: var(--ifm-color-gray-600); - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: var(--ifm-global-radius); - border-bottom-right-radius: var(--ifm-global-radius); -} - -.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); -} - -.codeBlock { - margin: 0; - padding: 0; - border-radius: 0; -} - -.buttonsBlock { - position: absolute; - right: calc(var(--ifm-pre-padding) / 2); - top: calc(var(--ifm-pre-padding) / 2); -} - -.codeButton { - border: none; - background: rgba(0, 0, 0, 0.3); - border-radius: var(--ifm-global-radius); - color: var(--ifm-color-white); - cursor: pointer; - transition: opacity 200ms ease-in-out; - opacity: 1; - user-select: none; - padding: 0.4rem 0.5rem; -} - -.copyButton { -} - -.outputButton { - color: var(--ifm-color-dark-400); - font-size: 14px; - background-color: rgba(0, 0, 0, 0.2); -} - -.runButton { - background: var(--ifm-color-primary-dark); - margin-left: 0.5rem; -} - -.codeBlockTitle:hover + .codeBlockContent .copyButton, -.codeBlockContent:hover > .copyButton, -.copyButton:focus { - opacity: 1; -} - -.codeBlockLines { - font: inherit; - /*rtl:ignore*/ - float: left; - min-width: 100%; - padding: var(--ifm-pre-padding); - display: flex; - flex-direction: column; -} - -@media print { - .codeBlockLines { - white-space: pre-wrap; - } -}