Mzk/sandbox nav update

docs/composedb/examples/index.mdx

@@ -2,7 +2,7 @@
 Looking for code samples, starter applications, and tutorials to kickstart your development process? Check out some of the examples below for inspiration. 
 
 ## Starter Applications
-- [**Official ComposeDB Example App**](https://github.com/ceramicstudio/ComposeDbExampleApp) - A starter application built around a social media platform use-case (this application utilizes the same data models used by the [ComposeDB Sandbox](../../../sandbox)). A great first step if you haven't done anything with ComposeDB yet.
+- [**Official ComposeDB Example App**](https://github.com/ceramicstudio/ComposeDbExampleApp) - A starter application built around a social media platform use-case (this application utilizes the same data models used by the [ComposeDB Sandbox](/docs/composedb/sandbox)). A great first step if you haven't done anything with ComposeDB yet.
 - [**Lit Protocol with ComposeDB**](https://github.com/ceramicstudio/lit-composedb) - Encrypt and decrypt data based on on-chain condition logic using Lit Protocol while storing on ComposeDB
 - [**Ethereum Attestation Service on ComposeDB**](https://github.com/ceramicstudio/ceramic-eas) - Save attestations generated using the Ethereum Attestation Service to the Ceramic Network using ComposeDB.
 - [**OpenAI Realtime Chat with ComposeDB**](https://github.com/ceramicstudio/ceramic-ai) - Interact with an OpenAI API endpoint in the form of a realtime chat application with storage on ComposeDB.

docs/composedb/getting-started.mdx

@@ -13,12 +13,6 @@ In this getting started guide, you will learn how to:
 3. [Interact with data](./interact-with-data.mdx)
 -->
 
-### But First - ComposeDB API Sandbox
-Before moving on to setting up your local environment, creating composites, and querying your local node, test your GraphQL query skill by executing requests to a live ComposeDB endpoint directly from your browser! 
-
-### [ComposeDB Sandbox](/sandbox) 
-<br />
-
 Follow the steps below to get started building a social application on ComposeDB in your local environment.
 
 <DocCardList />

docs/composedb/introduction.mdx

@@ -38,7 +38,7 @@ Thank you for being a ComposeDB pioneer and understanding that great Web3 protoc
 ### [Get Started →](./getting-started) 
 Build a Hello World application and interact from the CLI.
 
-### [ComposeDB Sandbox →](/sandbox) 
+### [ComposeDB Sandbox →](/docs/composedb/sandbox) 
 Test example queries to ComposeDB directly in your browser.
 
 ### [Development Guides →](./getting-started)

docs/composedb/sandbox.mdx

@@ -0,0 +1,74 @@
+---
+title: ComposeDB API Sandbox
+description: Test out example GraphQL queries on ComposeDB to learn how to access documents by relations, how to filter, and more.
+---
+
+import Sandbox from '../../src/components/sandbox/Sandbox';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+# Sandbox
+
+Test out several pre-made example queries below to gain hands-on exposure to accessing documents by relations, filtering and ordering by fields, and combining query logic.
+
+For a deeper dive into querying, visit the [**queries**](/docs/composedb/interact-with-data) page.
+
+## Reading Data
+
+---
+
+#### Data Models
+
+The schema definitions that this section of the sandbox uses are outlined in [**this repository**](https://github.com/ceramicstudio/ComposeDBExampleApp/tree/main/composites). The sandbox has been pre-populated with data corresponding to several fictionary people.
+
+#### Instructions
+
+To interact with the ComposeDB read-only Sandbox, simply press the pink play icon to execute the pre-written queries in the left-hand side of the embedded GraphiQL IDE. Results returned from your query will populate in the right-hand side of the interface.
+
+You can also alter your query logic however you see fit, or build your own queries entirely from scratch based on the schema definitions.
+
+### Reading Profiles
+
+---
+
+Use the example queries below to access data related to the `BasicProfile` model:
+
+
+
+<Sandbox queries='profiles' />
+
+<br />
+---
+
+### Reading Posts
+
+---
+
+Use the example queries below to access data related to the `Posts` model:
+
+
+
+<Sandbox queries='posts' />
+
+<br />
+---
+
+### Reading Comments
+
+---
+
+Use the example queries below to access data related to the `Comments` model:
+
+
+<Sandbox queries='comments' />
+
+
+<br />
+---
+
+## Next Steps
+
+---
+
+To begin building with ComposeDB in your local environment using the same data models you just queried, get started with setting up your environment.

docs/introduction/composedb-overview.md

@@ -38,7 +38,7 @@ Thank you for being a ComposeDB pioneer and understanding that great Web3 protoc
 ### [Get Started →](../composedb/getting-started) 
 Build a Hello World application and interact from the CLI.
 
-### [ComposeDB Sandbox →](/sandbox) 
+### [ComposeDB Sandbox →](/docs/composedb/sandbox) 
 Test example queries to ComposeDB directly in your browser.
 
 ### [Development Guides →](../composedb/guides)

docusaurus.config.ts

@@ -58,6 +58,10 @@ const config: Config = {
       {
         fromExtensions: ['html', 'htm'],
         redirects: [
+          {
+            to: '/docs/composedb/sandbox',
+            from: '/composedb/sandbox',
+          },
           {
             to: '/docs/composedb/guides/data-modeling',
             from: '/docs/advanced/standards/data-models/',

package.json

@@ -20,6 +20,7 @@
     "@ceramicnetwork/common": "^2.39.0",
     "@ceramicnetwork/http-client": "^2.36.0",
     "@composedb/client": "^0.5.0",
+    "@didtools/pkh-ethereum": "^0.5.0",
     "@docusaurus/core": "^3.0.0",
     "@docusaurus/plugin-client-redirects": "3.0.0",
     "@docusaurus/plugin-content-docs": "^3.0.0",
@@ -29,14 +30,17 @@
     "@graphiql/toolkit": "^0.9.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "did-session": "^3.0.2",
     "graphiql": "^3.0.9",
     "graphql": "^16.8.1",
     "graphql-ws": "^5.14.2",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "semantic-ui-react": "^2.1.5"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.0"