chore(docs): add Docusaurus supporting elements

Sidebar, index page, ToCs

packages/docs/src/pages/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+
+import Heading from '@theme/Heading';
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  const homePageGif = useBaseUrl('/images/HomePage/home-animation.gif');
+  
+  return (
+    <header className={clsx(styles.heroBanner)}>
+      <div className={clsx('container', styles.heroContainer)}>
+        <div className={styles.heroContent}>
+          <div className={styles.heroText}>
+            <div className={styles.developerDocsLabel}>Developer docs</div>
+            <Heading as="h1" className={styles.heroTitle}>
+              Build with Blockly
+            </Heading>
+            <p className={styles.heroDescription}>
+             An open-source, flexible library for developers to build visual programming editors with drag-and-drop blocks - powering the world’s most popular block-based coding platforms.
+            </p>
+            <div className={styles.buttons}>
+              <Link
+                className={clsx(styles.button, 'getStarted')}
+                to="/guides/get-started/what-is-blockly">
+                Get started
+              </Link>
+            </div>
+          </div>
+          <div className={styles.heroVisual}>
+            <img 
+              src={homePageGif}
+              alt="Blockly code block example" 
+              className={styles.blocklyGif}
+            />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`${siteConfig.title}`}
+      description="A JavaScript library for building visual programming editors.">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}

packages/docs/toc.yaml

@@ -0,0 +1,58 @@
+
+- label: 'Get started'
+  items:
+    - label: 'What is Blockly?'
+      id: 'guides/get-started/what-is-blockly'
+    - label: 'Visual glossary'
+      id: 'guides/get-started/workspace-anatomy'
+
+- label: 'Programming considerations'
+  items:
+    - label: 'Fork Blockly'
+      id: 'guides/programming/forking_blockly'
+
+- label: 'Build your editor'
+  items:
+    - label: 'Workspaces'
+      items:
+        - label: 'Create a workspace'
+          items:
+            - label: 'Create a workspace'
+              id: 'guides/configure/web/configuration_struct'
+
+    - label: 'Localization'
+      id: 'guides/configure/web/translations'
+
+- label: 'Build your blocks'
+  items:
+    - label: 'Block definitions'
+      items:
+        - label: 'Ways to define blocks'
+          items:
+            - label: 'JSON and JavaScript'
+              id: 'guides/create-custom-blocks/define/json-and-js'
+
+            - label: 'Legacy Blockly Developer Tools'
+              id: 'guides/create-custom-blocks/define/legacy-blockly-developer-tools'
+
+        - label: 'Block structure'
+          items:
+            - label: 'Anatomy of a block'
+              id: 'guides/create-custom-blocks/define/block-anatomy'
+
+    - label: 'Code generation'
+      items:
+        - label: 'Block-code generators'
+          id: 'guides/create-custom-blocks/code-generation/block-code'
+
+    - label: 'Fields'
+      items:
+        - label: 'Built-in fields'
+          items:
+            - label: 'Dropdown'
+              id: 'guides/create-custom-blocks/fields/built-in-fields/dropdown'
+        - label: 'Custom fields'
+          items:
+            - label: 'Create a custom field'
+              id: 'guides/create-custom-blocks/fields/customizing-fields/creating'
+