Merge pull request #247 from jetstreamapp/chore/update-docs-dependencies

Update documentation dependencies
jetstreamapp · Jun 16, 2024 · 7acbf11 · 7acbf11
2 parents 5136a96 + 51401ff
commit 7acbf11
Show file tree

Hide file tree

Showing 14 changed files with 13,202 additions and 10,350 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -1,23 +1,25 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const { themes } = require('prism-react-renderer');
+
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.shadesOfPurple;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'Soql Parser JS',
+  title: 'SOQL Parser JS',
   tagline: 'Parse and generate SOQL queries',
-  url: 'https://jetstreamapp.github.io',
-  baseUrl: '/soql-parser-js/',
+  url: 'https://soql-parser-js.getjetstream.app',
+  baseUrl: '/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'jetstreamapp',
-  projectName: '@jetstreamapp/soql-parser-js',
+  projectName: 'soql-parser-js',
   deploymentBranch: 'gh-pages',
   trailingSlash: false,
 
@@ -93,10 +95,18 @@ const config = {
           },
         ],
       },
+      markdown: {
+        mdx1Compat: {
+          comments: false,
+          admonitions: false,
+          headingIds: false,
+        },
+      },
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
       },
+      additionalLanguages: ['javascript', 'json', 'sql'],
     }),
 };
 

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -15,20 +15,21 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/core": "3.4.0",
+    "@docusaurus/preset-classic": "3.4.0",
     "@jetstreamapp/soql-parser-js": "^6.0.0",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "soql-parser-js": "^5.0.2"
+    "@mdx-js/react": "^3.0.1",
+    "clsx": "^2.1.1",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.1",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
+    "@docusaurus/module-type-aliases": "3.4.0",
+    "@docusaurus/types": "3.0.0",
+    "@docusaurus/tsconfig": "3.4.0",
+    "@types/react": "^18.3.3",
+    "typescript": "~5.4.5"
   },
   "browserslist": {
     "production": [
@@ -43,6 +44,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }
diff --git a/docs/src/components/ComposeQueries/ParsedOutput/index.tsx b/docs/src/components/ComposeQueries/ParsedOutput/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Highlight } from '../../Utilities/Highlight';
 
 export interface ParsedOutputProps {
   query: string;
@@ -10,9 +11,7 @@ export default function ParsedOutput({ query }: ParsedOutputProps): JSX.Element
       {query && (
         <>
           <div className="label">Output</div>
-          <pre>
-            <code>{query}</code>
-          </pre>
+          <Highlight code={query} language="sql" />
         </>
       )}
     </div>

diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import { Highlight } from '../Utilities/Highlight';
 
 type FeatureItem = {
   title: string;
@@ -48,33 +49,19 @@ const FeatureList: FeatureItem[] = [
     title: 'Parse',
     description: (
       <>
-        <p className={styles.featuresSubHeading}>turn</p>
-        <div>
-          <pre>
-            <code>{exampleSoql}</code>
-          </pre>
-        </div>
+        <Highlight code={exampleSoql} language="sql" />
         <p className={styles.featuresSubHeading}>into</p>
-        <pre>
-          <code>{exampleCompose}</code>
-        </pre>
+        <Highlight code={exampleCompose} language="json" />
       </>
     ),
   },
   {
     title: 'Compose',
     description: (
       <>
-        <p className={styles.featuresSubHeading}>turn</p>
-        <div>
-          <pre>
-            <code>{exampleCompose}</code>
-          </pre>
-        </div>
+        <Highlight code={exampleCompose} language="json" />
         <p className={styles.featuresSubHeading}>into</p>
-        <pre>
-          <code>{exampleSoql}</code>
-        </pre>
+        <Highlight code={exampleSoql} language="sql" />
       </>
     ),
   },
@@ -83,7 +70,7 @@ const FeatureList: FeatureItem[] = [
     description: (
       <>
         <p>
-          Your SOQL query is parsed using a proper language parser,{' '}
+          Your SOQL query is parsed using a language parser,{' '}
           <a href="https://chevrotain.io/docs/features/blazing_fast.html" target="_blank">
             Chevrotain JS
           </a>
@@ -106,7 +93,7 @@ function Feature({ title, description }: FeatureItem) {
     <div className={clsx('col col--4')}>
       <div className="padding-horiz--md">
         <h2 className="text--center">{title}</h2>
-        <p>{description}</p>
+        {description}
       </div>
     </div>
   );

diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css
@@ -9,6 +9,7 @@
   text-align: center;
   text-transform: uppercase;
   font-weight: semi-bold;
+  margin: 0.5rem 0;
 }
 
 .featureSvg {

diff --git a/docs/src/components/ParseQueries/ParsedOutput/index.tsx b/docs/src/components/ParseQueries/ParsedOutput/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { parseQuery, Query } from '@jetstreamapp/soql-parser-js';
+import { Highlight } from '../../Utilities/Highlight';
 
 export interface ParsedOutputProps {
   query: string;
@@ -24,6 +25,8 @@ export default function ParsedOutput({ query }: ParsedOutputProps): JSX.Element
     }
   }, [query, allowPartialQuery, ignoreParseErrors, allowApexBindVariables]);
 
+  const code = parsedQuery ? JSON.stringify(parsedQuery, null, 2) : invalidMessage;
+
   return (
     <div className="">
       <fieldset>
@@ -50,9 +53,7 @@ export default function ParsedOutput({ query }: ParsedOutputProps): JSX.Element
       {(parsedQuery || invalidMessage) && (
         <>
           <div className="label">Output</div>
-          <pre>
-            <code>{parsedQuery ? JSON.stringify(parsedQuery, null, 2) : invalidMessage}</code>
-          </pre>
+          <Highlight code={code} language="json" />
         </>
       )}
     </div>

diff --git a/docs/src/components/SoqlList/index.tsx b/docs/src/components/SoqlList/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import sampleQueriesJson from '@site/static/sample-queries-json.json';
+import { Highlight } from '../Utilities/Highlight';
 
 const sampleQueries: string[] = sampleQueriesJson;
 
@@ -26,7 +27,7 @@ export default function SoqlList({ isOpen = true, selected, onSelected, onToggle
               className={clsx(styles.listItem, { [styles.selected]: selected === query })}
               onClick={() => onSelected(query)}
             >
-              {query}
+              <Highlight code={query} language="sql" classNames={{ pre: 'wrap-text' }} />
             </li>
           ))}
         </ul>

diff --git a/docs/src/components/SoqlList/styles.module.css b/docs/src/components/SoqlList/styles.module.css
@@ -27,28 +27,25 @@
   padding: 0;
   max-height: calc(100vh - var(--ifm-navbar-height) - 62px - 1rem);
   overflow-y: scroll;
+  margin-top: 0.2rem;
 }
 
 .listItem {
   padding: 0.5rem;
-  border-top: 1px solid #e5e5e5;
   cursor: pointer;
-}
-
-[data-theme='dark'] .listItem.selected {
-  background-color: #373535;
+  border-left: 5px solid transparent;
 }
 
 .listItem.selected {
-  background-color: #d7d1d1;
+  border-left: 5px solid #808080;
 }
 
 [data-theme='dark'] .listItem:hover {
-  background-color: #373535;
+  border-left: 5px solid #e5e5e5;
   text-decoration: none;
 }
 
 .listItem:hover {
-  background-color: #d7d1d1;
+  border-left: 5px solid #808080;
   text-decoration: none;
 }
diff --git a/docs/src/components/Utilities/Highlight.tsx b/docs/src/components/Utilities/Highlight.tsx
@@ -0,0 +1,38 @@
+import { Language, Highlight as PrismaHighlight, themes } from 'prism-react-renderer';
+import { useColorMode } from '@docusaurus/theme-common';
+
+interface HighlightProps {
+  code: string;
+  language: Language;
+  classNames?: {
+    pre?: string;
+  };
+}
+
+export function Highlight({ code, language, classNames = {} }: HighlightProps) {
+  const { colorMode } = useColorMode();
+
+  const theme = colorMode === 'light' ? themes.github : themes.shadesOfPurple;
+
+  return (
+    <PrismaHighlight theme={theme} code={code} language={language}>
+      {({ style, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className={classNames?.pre}
+          style={{
+            ...style,
+            margin: 0,
+          }}
+        >
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </PrismaHighlight>
+  );
+}
diff --git a/docs/src/components/Utilities/index.tsx b/docs/src/components/Utilities/index.tsx
@@ -33,6 +33,7 @@ import {
   ValueWithDateNLiteralCondition,
   WhereClause,
 } from '@jetstreamapp/soql-parser-js';
+import { Highlight } from './Highlight';
 
 const sampleQuery: Query = {
   fields: [
@@ -316,15 +317,11 @@ export default function Utilities({}: UtilitiesProps) {
           <div className="row">
             <div className="col col--6">
               <div>Input</div>
-              <pre>
-                <code>{item.input}</code>
-              </pre>
+              <Highlight code={item.input} language="javascript" />
             </div>
             <div className="col col--6">
               <div>Output</div>
-              <pre>
-                <code>{item.output}</code>
-              </pre>
+              <Highlight code={item.output} language="javascript" />
             </div>
           </div>
         </div>

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -51,3 +51,8 @@ label > input[type='checkbox'] {
 label > input[type='number'] {
   margin-left: 0.5rem;
 }
+
+.wrap-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
diff --git a/docs/static/CNAME b/docs/static/CNAME
@@ -0,0 +1 @@
+soql-parser-js.getjetstream.app
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -1,6 +1,6 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": ".",
     "resolveJsonModule": true