Updated docs homepage

jetstreamapp · Jun 17, 2023 · 27a3d0f · 27a3d0f
1 parent 9d7abb6
commit 27a3d0f
Show file tree

Hide file tree

Showing 8 changed files with 1,078 additions and 891 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -55,7 +55,7 @@ const config = {
         respectPrefersColorScheme: true,
       },
       navbar: {
-        title: 'Home',
+        title: '',
         logo: {
           alt: 'Logo',
           src: 'img/soql-parser-js-logo.svg',

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -15,8 +15,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-rc.1",
-    "@docusaurus/preset-classic": "2.0.0-rc.1",
+    "@docusaurus/core": "^2.4.1",
+    "@docusaurus/preset-classic": "^2.4.1",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
@@ -25,7 +25,7 @@
     "soql-parser-js": "^4.9.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-rc.1",
+    "@docusaurus/module-type-aliases": "^2.4.1",
     "@tsconfig/docusaurus": "^1.0.5",
     "typescript": "^4.7.4"
   },

diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx
@@ -4,54 +4,108 @@ import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
   description: JSX.Element;
 };
 
+const exampleSoql = `SELECT Name
+FROM Account
+WHERE Industry = 'media'
+ORDER BY BillingPostalCode ASC NULLS LAST
+LIMIT 125`;
+
+const exampleCompose = JSON.stringify(
+  {
+    fields: [
+      {
+        type: 'Field',
+        field: 'Name',
+      },
+    ],
+    sObject: 'Account',
+    where: {
+      left: {
+        field: 'Industry',
+        operator: '=',
+        literalType: 'STRING',
+        value: "'media'",
+      },
+    },
+    orderBy: [
+      {
+        field: 'BillingPostalCode',
+        order: 'ASC',
+        nulls: 'LAST',
+      },
+    ],
+    limit: 125,
+  },
+  null,
+  2,
+);
+
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Blazing fast',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: 'Parse',
     description: (
       <>
-        Soql Parser JS is built using{' '}
-        <a href="https://chevrotain.io/docs/" target="_blank">
-          Chevrotain
-        </a>
-        , which is faster and lighter-weight than other comparable parsing frameworks.
+        <p className={styles.featuresSubHeading}>turn</p>
+        <div>
+          <pre>
+            <code>{exampleSoql}</code>
+          </pre>
+        </div>
+        <p className={styles.featuresSubHeading}>into</p>
+        <pre>
+          <code>{exampleCompose}</code>
+        </pre>
       </>
     ),
   },
   {
-    title: 'Battle tested',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: 'Compose',
     description: (
       <>
-        Soql Parser JS powers{' '}
-        <a href="https://getjetstream.app/" target="_blank">
-          Jetstream
-        </a>{' '}
-        and has been used in production for years and has been invoked millions of times. In addition, this library includes a ton of
-        test-cases of parsing queries and turning those back into soql queries and confirming the results match the original soql query. You
-        can have confidence that your parsed query will not lose any fidelity.
+        <p className={styles.featuresSubHeading}>turn</p>
+        <div>
+          <pre>
+            <code>{exampleCompose}</code>
+          </pre>
+        </div>
+        <p className={styles.featuresSubHeading}>into</p>
+        <pre>
+          <code>{exampleSoql}</code>
+        </pre>
       </>
     ),
   },
   {
-    title: 'Written with TypeScript',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: <>Soql Parser JS is written using TypeScript - you get type completion in your project.</>,
+    title: 'Battle Tested',
+    description: (
+      <>
+        <p>
+          Your SOQL query is parsed using a proper language parser,{' '}
+          <a href="https://chevrotain.io/docs/features/blazing_fast.html" target="_blank">
+            Chevrotain JS
+          </a>
+          , and aims to support every SOQL feature.
+        </p>
+        <p>
+          This library has been powering{' '}
+          <a href="https://getjetstream.app/" target="_blank">
+            Jetstream
+          </a>{' '}
+          in production for many years and has parsed and composed millions of queries from thousands of users.
+        </p>
+      </>
+    ),
   },
 ];
 
-function Feature({ title, Svg, description }: FeatureItem) {
+function Feature({ title, description }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
+      <div className="padding-horiz--md">
+        <h2 className="text--center">{title}</h2>
         <p>{description}</p>
       </div>
     </div>

diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css
@@ -5,6 +5,12 @@
   width: 100%;
 }
 
+.featuresSubHeading {
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: semi-bold;
+}
+
 .featureSvg {
   height: 200px;
   width: 200px;

diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
@@ -20,4 +20,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
 }
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -10,13 +10,16 @@ import styles from './index.module.css';
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx('hero', styles.heroBanner)}>
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link className="button button--secondary button--lg" to="/docs/overview">
-            Check out the documentation
+            Documentation
+          </Link>
+          <Link className="button button--secondary button--lg" to="/playground">
+            Playground
           </Link>
         </div>
       </div>
@@ -27,7 +30,7 @@ function HomepageHeader() {
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />">
+    <Layout title={siteConfig.title} description="Javascript SOQL parser and builder.">
       <HomepageHeader />
       <main>
         <HomepageFeatures />

diff --git a/package-lock.json b/package-lock.json