docs: more docs polish

- added 'Requirements' page and 'Syncosaurus CLI' page - edits and polish to existing pages, mainly core-concept pages - resize latency slider - removed unnecessary imports in HomePageFeatures component Co-authored-by: Alex Sklar <[email protected]> Co-authored-by: Erik Margetis <[email protected]>
syncosaurus · Apr 24, 2024 · aa36e36 · aa36e36
1 parent 3b574b0
commit aa36e36
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 34 deletions.
diff --git a/docs/getting-started/add-to-existing-project.md b/docs/getting-started/add-to-existing-project.md
@@ -71,12 +71,10 @@ If your application was configured correctly, the URL to your deployed applicati
 
 ```shell
 ❯ npx syncosaurus deploy
- 🦖 syncosaurus 0.7.1
+Checking for Syncosaurus installation...... found
+Deploying your Syncosaurus worker...... done!
 --------------------------------------------------
-
-Evolving your Syncosaurus server... done!
-
-✅ Success! Your Syncosaurus server is available at https://dino-arcade.petrie.workers.dev
+🦖 Your deployed Syncosaurus worker is ready at https://dino-arcade.petrie.workers.dev
 ```
 
 To deploy your frontend, simply add the provided Syncosaurus server URL as an environment variable to your frontend deployment.
diff --git a/docs/getting-started/requirements.md b/docs/getting-started/requirements.md
@@ -0,0 +1,19 @@
+---
+sidebar_position: 1
+---
+
+# Requirements
+
+Before using Syncosaurus, ensure the following requirements are met:
+
+- [Node](https://nodejs.org/en) v18+
+- [npm](https://www.npmjs.com/)
+- A frontend that utilizes [React](https://react.dev/) v16.8+
+- Paid Cloudflare account with access to [Durable Objects](https://developers.cloudflare.com/durable-objects/)
+- Access to the [Syncosaurus CLI](https://github.com/syncosaurus/syncosaurus-cli)
+  - This requirement can be fulfilled in two ways:
+    - *Recommended*: Use the [`npx`](https://www.npmjs.com/package/npx) feature to directly run Syncosaurus CLI commands without installing the Syncosaurus CLI application
+    - Alternatively, you may also install the Syncosaurus CLI locally:
+      ```shell
+      npm install -g syncosaurus-cli
+      ```
diff --git a/docs/getting-started/start-a-new-project.md b/docs/getting-started/start-a-new-project.md
@@ -24,7 +24,7 @@ npx syncosaurus dev
 
 If your file structure adheres to Syncosaurus rules, and your configuration settings are correct, two localhost addresses will be displayed in your terminal output:
 - a localhost address for your local Syncosaurus server
-	- The port used will be the port you designated in the `syncosaurus.json` file. If one is not specified there, the local Syncosaurus server will default to port 3001.
+	- The port used will be the port you designated in the `syncosaurus.json` file. If one is not specified there, the local Syncosaurus server will default to port 8787.
 - a localhost address for your local Vite UI server
 	- The port used will be determined by Vite. Vite's default port is port 5173. If that port is being used, Vite will find and designate the next available port.
 
@@ -81,12 +81,10 @@ If your application was configured correctly, the URL to your deployed applicati
 
 ```shell
 ❯ npx syncosaurus deploy
- 🦖 syncosaurus 0.7.1
+Checking for Syncosaurus installation...... found
+Deploying your Syncosaurus worker...... done!
 --------------------------------------------------
-
-Evolving your Syncosaurus server... done!
-
-✅ Success! Your Syncosaurus server is available at https://dino-arcade.ducky.workers.dev
+🦖 Your deployed Syncosaurus worker is ready at https://dino-arcade.ducky.workers.dev
 ```
 
 To deploy your frontend, simply add the provided Syncosaurus server URL as an environment variable to your frontend deployment.
diff --git a/docs/getting-started/walkthrough.md b/docs/getting-started/walkthrough.md
diff --git a/docs/guides/analytics.md b/docs/guides/analytics.md
@@ -8,7 +8,7 @@ Syncosaurus includes an application analytics tool to easily view and analyze ag
 
 ## Setup
 
-1. Clone the repository to your local environment, and install the required dependencies:
+1. Clone the following repository to your local environment:
    ```shell
    git clone https://github.com/syncosaurus/syncosaurus-dashboard.git
    ```

diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md
@@ -16,7 +16,7 @@ This is the name of your Syncosaurus project. This value will be used when deplo
 
 ### `msgFrequency`
 
-This is the amount of time (in milliseconds) that subsequent message broadcast of app updates should be delayed.
+This is the amount of time (in milliseconds) that subsequent message broadcasts of app updates should be delayed.
 The default value of `msgFrequency` is `16` (ms), which equates to approximately 62.5 broadcasted updates per second.
 
 ### `useStorage`

diff --git a/docs/guides/syncosaurus-cli.md b/docs/guides/syncosaurus-cli.md
@@ -0,0 +1,93 @@
+---
+sidebar_position: 4
+---
+
+# Syncosaurus CLI
+
+The Syncosaurus CLI application is used to conveniently create, configure, manage, and deploy Syncosaurus applications. Built in Typescript with the [oclif](https://oclif.io/) framework.
+
+## Installation
+
+- It is recommended to utilize the Syncosaurus CLI with `npx` commands, without having to install the application locally.
+- If you still wish to install the Syncosaurus CLI locally, run `npm install -g syncosaurus-cli`.
+
+## Setup and Development Commands
+
+If you are electing to run the Syncosaurus CLI locally, simply remove the `npx` at the beginning of the commands below.
+
+### `syncosaurus init`
+
+- Create a new React application, pre-configured with a Syncosaurus multiplayer backend. Note that this command will create a `syncosaurus.json` configuration file in your root directory.
+
+  ```bash
+  npx syncosaurus init
+  ```
+
+### `syncosaurus setup`
+
+- Add Syncosaurus to an existing React-based application. Note that this command will also create a `syncosaurus.json` configuration file in your root directory.
+
+  ```bash
+  npx syncosaurus setup
+  ```
+
+### `syncosaurus dev`
+
+- Start a local Syncosaurus development environment. Run without any flags to start up both a local Syncosaurus server and a local Vite UI server. Run with the `-b`/`-backendOnly` flag to start up only a local Syncosaurus server.
+  - The local Syncosaurus server will use the designated port, as specified by a `PORT` value in your local `.env` file. If no such value exists, it will default to port 8787.
+
+  ```bash
+  npx syncosaurus dev [-b]
+  ```
+  <br></br>
+## Deployment Commands
+
+### `syncosaurus deploy`
+
+- Deploy your Syncosaurus application. You must be logged in to use this command.
+
+  ```bash
+  npx syncosaurus deploy
+  ```
+
+### `syncosaurus destroy`
+
+- Delete your most recent deployment, only if that deployment matches the current project. You must be logged in to use this command.
+
+  ```bash
+  npx syncosaurus destroy
+  ```
+
+### `syncosaurus tail`
+
+- Setup a tail log stream for a deployed Syncosaurus worker.
+
+  ```bash
+  npx syncosaurus tail
+  ```
+
+## Authentication Commands
+
+### `syncosaurus login`
+
+- Login to Synocosaurus through OAuth or API token.
+
+  ```bash
+  npx syncosaurus login
+  ```
+
+### `syncosaurus logout`
+
+- Logout of Syncosaurus.
+
+  ```bash
+  npx syncosaurus logout
+  ```
+
+### `syncosaurus whoami`
+
+- Check your current Syncosaurus login status.
+
+  ```bash
+  npx syncosaurus whoami
+  ```
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
@@ -1,7 +1,3 @@
-import clsx from 'clsx'
-import Heading from '@theme/Heading'
-import styles from './styles.module.css'
-
 import FadeInSection from './FadeInSection'
 
 export default function HomepageFeatures() {
@@ -20,7 +16,7 @@ export default function HomepageFeatures() {
               <div className="mb-12 w-full shrink-0 grow-0 basis-auto lg:mb-0 lg:w-5/12 ">
                 <object
                   type="image/svg+xml"
-                  data="/img/diagrams/diag-whiteboard-demo-dual.svg"
+                  data="img/diagrams/diag-whiteboard-demo-dual.svg"
                 ></object>
               </div>
               <div className="w-full shrink-0 grow-0 basis-auto lg:w-7/12 align-middle">
@@ -34,11 +30,11 @@ export default function HomepageFeatures() {
                       real-time, collaborative web applications. But what
                       happens when multiple clients make conflicting changes
                       simultaneously? <br></br> <br></br>
-                      Synocusaurus provides the backbone for
-                      both performant state synchronization <i>and</i> flexible
-                      conflict resolution logic using client-side prediction and
-                      server reconcilliation, techniques developed originally
-                      for multi-player video games.
+                      Synocusaurus provides the backbone for both performant
+                      state synchronization <i>and</i> flexible conflict
+                      resolution logic using client-side prediction and server
+                      reconcilliation, techniques developed originally for
+                      multi-player video games.
                     </p>
                   </div>
                 </div>
@@ -56,8 +52,8 @@ export default function HomepageFeatures() {
                   Easy Development and Deployment
                 </h2>
                 <p className="text-2xl text-pretty">
-                  Seamlessly create, iterate, deploy, and manage your Syncosaurus
-                  applications with our convenient CLI tool.
+                  Seamlessly create, iterate, deploy, and manage your
+                  Syncosaurus applications with our convenient CLI tool.
                 </p>
               </div>
               <div className="w-full shrink-0 grow-0 basis-auto lg:w-8/12 align-center">
@@ -95,8 +91,9 @@ export default function HomepageFeatures() {
                       Built-in Analytics
                     </h2>
                     <p className="text-2xl text-pretty">
-                      Monitor your collaborative application's usage metrics, in aggregate or on a
-                      per-room basis, with our beautiful dashboard application.
+                      Monitor your collaborative application's usage metrics, in
+                      aggregate or on a per-room basis, with our beautiful
+                      dashboard application.
                     </p>
                   </div>
                 </div>

diff --git a/src/components/LatencySlider/VerticalSlider.js b/src/components/LatencySlider/VerticalSlider.js
@@ -51,6 +51,7 @@ const Slider = styled(BaseSlider)(
   display: inline-block;
   position: relative;
   margin-top: 0.75rem;
+  margin-right: 3.25rem;
   cursor: ${delay === 0 ? "pointer" : null};
   touch-action: none;
   -webkit-tap-highlight-color: transparent;

diff --git a/src/components/LatencySlider/VerticalSliderContainer.js b/src/components/LatencySlider/VerticalSliderContainer.js
@@ -5,10 +5,9 @@ const VerticalSliderContainer = styled(Box)(({ theme }) => ({
   justifyContent: 'center',
   alignItems: 'center',
   padding: '3rem',
-  margin: '5rem',
   marginBottom: '0.75rem',
   marginTop: '0.75rem',
-  gap: theme.spacing(50), // Adjust the gap between sliders
+  gap: theme.spacing(50, 'auto'), // Adjust the gap between sliders
 }));
 
 export default VerticalSliderContainer;