Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix (case study): adjusted spacing around diagrams and graphics #18

Merged
merged 1 commit into from
Apr 25, 2024
Merged

fix (case study): adjusted spacing around diagrams and graphics #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 49 additions & 51 deletions src/components/Diagrams/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
export const Centralized = () => {
return (
<figure>
<figure className="mt-12 mb-12">
<object
type="image/svg+xml"
data="/img/diagrams/diag-centralized.svg"
className="w-1/2"
></object>
<figcaption className="text-gray-400">
<figcaption>
Centralized architecture with one server and three clients
</figcaption>
</figure>
Expand All @@ -15,7 +15,7 @@ export const Centralized = () => {

export const P2P = () => {
return (
<figure>
<figure className="mt-12 mb-12">
<object
type="image/svg+xml"
data="/img/diagrams/diag-p2p.svg"
Expand All @@ -28,7 +28,7 @@ export const P2P = () => {

export const LongPolling = () => {
return (
<figure>
<figure className="mt-8 mb-12">
<object
type="image/svg+xml"
data="/img/diagrams/diag-long-polling.svg"
Expand All @@ -44,7 +44,7 @@ export const LongPolling = () => {

export const Websockets = () => {
return (
<figure>
<figure className="mt-8 mb-12">
<object
type="image/svg+xml"
data="/img/diagrams/diag-websocket-handshake.svg"
Expand Down Expand Up @@ -89,7 +89,7 @@ export const OptimisticUI = () => {
<object
type="image/svg+xml"
data="/img/diagrams/diag-optimistic-ui.svg"
className="w-3/4"
className="w-10/12"
></object>
<figcaption></figcaption>
</figure>
Expand Down Expand Up @@ -124,7 +124,7 @@ export const WhiteboardConflict = () => {

export const RelativeUpdate = () => {
return (
<figure>
<figure className="mt-12 mb-14">
<object
type="image/svg+xml"
data="/img/diagrams/diag-relative-update.svg"
Expand All @@ -137,7 +137,7 @@ export const RelativeUpdate = () => {

export const AbsoluteUpdates = () => {
return (
<figure>
<figure className="mt-12 mb-14">
<object
type="image/svg+xml"
data="/img/diagrams/diag-absolute-update.svg"
Expand All @@ -150,7 +150,7 @@ export const AbsoluteUpdates = () => {

export const NoConflictEdits = () => {
return (
<figure>
<figure className="mt-12 mb-14">
<object
type="image/svg+xml"
data="/img/diagrams/diag-no-conflict-edits.svg"
Expand All @@ -163,7 +163,7 @@ export const NoConflictEdits = () => {

export const ConflictEdits = () => {
return (
<figure>
<figure className="mt-12 mb-14">
<object
type="image/svg+xml"
data="/img/diagrams/diag-conflict-edits.svg"
Expand All @@ -174,9 +174,35 @@ export const ConflictEdits = () => {
)
}

export const CRDT = () => {
return (
<figure className="mt-16 mb-14">
<object
type="image/svg+xml"
data="/img/diagrams/diag-CRDT.svg"
className="w-11/12"
></object>
<figcaption></figcaption>
</figure>
)
}

export const OT = () => {
return (
<figure className="mt-16 mb-10">
<object
type="image/svg+xml"
data="/img/diagrams/diag-OT.svg"
className="w-11/12"
></object>
<figcaption></figcaption>
</figure>
)
}

export const SyncingModel1 = () => {
return (
<figure>
<figure className="mt-8 mb-8">
<object
type="image/svg+xml"
data="/img/diagrams/diag-syncingModel-1.svg"
Expand All @@ -189,7 +215,7 @@ export const SyncingModel1 = () => {

export const SyncingModel3 = () => {
return (
<figure>
<figure className="mt-8 mb-8">
<object
type="image/svg+xml"
data="/img/diagrams/diag-syncingModel-3.svg"
Expand All @@ -202,7 +228,7 @@ export const SyncingModel3 = () => {

export const SyncingModel4 = () => {
return (
<figure>
<figure className="mt-8 mb-8">
<object
type="image/svg+xml"
data="/img/diagrams/diag-syncingModel-4.svg"
Expand All @@ -215,11 +241,11 @@ export const SyncingModel4 = () => {

export const GlobalRooms = () => {
return (
<figure>
<figure className="mt-12 mb-12">
<object
type="image/svg+xml"
data="/img/diagrams/diag-global-rooms.svg"
className="w-8/12 mt-12"
className="w-8/12"
></object>
<figcaption>Multiple rooms with different clients</figcaption>
</figure>
Expand All @@ -228,7 +254,7 @@ export const GlobalRooms = () => {

export const CloudflareArchitecture = () => {
return (
<figure>
<figure className="mt-12 mb-12">
<object
type="image/svg+xml"
data="/img/diagrams/diag-cloudflare-architecture.svg"
Expand All @@ -241,7 +267,7 @@ export const CloudflareArchitecture = () => {

export const StateUpdates = () => {
return (
<figure>
<figure className="mt-6 mb-6">
<object
type="image/svg+xml"
data="/img/diagrams/diag-StateUpdates.svg"
Expand All @@ -254,7 +280,7 @@ export const StateUpdates = () => {

export const DeltaUpdate = () => {
return (
<figure>
<figure className="mt-6 mb-6">
<object
type="image/svg+xml"
data="/img/diagrams/diag-DeltaUpdates.svg"
Expand All @@ -267,7 +293,7 @@ export const DeltaUpdate = () => {

export const SnapshotID = () => {
return (
<figure>
<figure className="mt-12 mb-12">
<object
type="image/svg+xml"
data="/img/diagrams/diag-snapshotId.svg"
Expand All @@ -280,7 +306,7 @@ export const SnapshotID = () => {

export const ON2Messaging = () => {
return (
<figure>
<figure className="mt-12 mb-12">
<object
type="image/svg+xml"
data="/img/diagrams/diag-ON2-messaging.svg"
Expand All @@ -306,7 +332,7 @@ export const TimeDrivenMessages = () => {

export const ONMessaging = () => {
return (
<figure>
<figure className="mt-12 mb-12">
<object
type="image/svg+xml"
data="/img/diagrams/diag-ON-messaging.svg"
Expand All @@ -319,7 +345,7 @@ export const ONMessaging = () => {

export const Subscriptions = () => {
return (
<figure>
<figure className="mb-6">
<object
type="image/svg+xml"
data="/img/diagrams/diag-Subscriptions.svg"
Expand All @@ -332,7 +358,7 @@ export const Subscriptions = () => {

export const DashboardArchitecture = () => {
return (
<figure>
<figure className="mt-6 mb-6">
<object
type="image/svg+xml"
data="/img/diagrams/diag-Dashboard-Architecture.svg"
Expand All @@ -342,31 +368,3 @@ export const DashboardArchitecture = () => {
</figure>
)
}

/*------------------------------------------*/

export const CRDT = () => {
return (
<figure>
<object
type="image/svg+xml"
data="/img/diagrams/diag-CRDT.svg"
className="w-8/12"
></object>
<figcaption></figcaption>
</figure>
)
}

export const OT = () => {
return (
<figure>
<object
type="image/svg+xml"
data="/img/diagrams/diag-OT.svg"
className="w-8/12"
></object>
<figcaption></figcaption>
</figure>
)
}
14 changes: 14 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,3 +159,17 @@ figcaption {
text-align: center;
line-height: 1.75rem;
}

.comparison {
margin-top: 3rem;
}

.todo-list-app {
margin-top: 3rem;
margin-bottom: 3rem;
}

.analytics {
margin-top: 3rem;
margin-bottom: 3rem;
}
8 changes: 4 additions & 4 deletions src/pages/case-study.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ Syncosaurus is a React Javascript client-side SDK with full ready-to-be-deployed

Similar to commercial solutions like Liveblocks and Reflect, Syncosaurus exposes a client-side SDK while abstracting the backend logic and handling much of the deployment - the only thing a developer has to do to get the backend deployed is sign up for a Cloudflare account and use our CLI to deploy. However, unlike the commercial solutions, the Syncosaurus framework is free to use and open source so a developer can alter the default backend code if they choose.

<figure>
<figure class="comparison">
<img src="/img/screenshots/comparison_table.png" />
</figure>

Expand Down Expand Up @@ -532,7 +532,7 @@ We have prepared a simple todo list application to illustrate the mutator and cl

Go ahead and enter some todos into Client 1 and watch them appear on Client 2 after a simulated latency of 1 second:

<figure>
<figure class="todo-list-app">
<TodoList />
</figure>

Expand All @@ -554,7 +554,7 @@ After your application is deployed, you can monitor its usage and get help debug

The dashboard includes hourly time-series metrics related to errors and usage for each room so you can verify users are able to access and use your application in a bug-free manner.

<figure>
<figure class="analytics">
<img
src="/img/screenshots/dashboard_screenshot.png"
alt="dashboard screenshot"
Expand Down Expand Up @@ -602,7 +602,7 @@ When choosing a provider to build on, we narrowed in on a couple of options.

First, we could have built our serverless edge infrastructure using a combination of AWS Lambda@Edge, Amazon API Gateway, and a persistent storage mechanism like AWS Dynamo DB:

<figure>
<figure class="analytics">
<img
src="/img/diagrams/AWS-Lambda-Diagram.png"
alt="AWS Architecture Diagram"
Expand Down