jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add offline-first section to rSpace landing page 

New feature card in hero grid and a dedicated section explaining
local IndexedDB persistence, Automerge auto-merge, and incremental
sync. Matches the existing visual style with pillars and identity cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-18 12:41:24 -07:00
parent 6b06168f11
commit ea8f1b3f95
1 changed files with 51 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
website/index.html
View File

@ -125,7 +125,7 @@
.features { .features {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 1.5rem; gap: 1.5rem;
margin-top: 4rem; margin-top: 4rem;
} }
@ -329,7 +329,7 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.features { .features {
grid-template-columns: 1fr; grid-template-columns: repeat(2, 1fr);
} }
.section h2 { .section h2 {
font-size: 1.5rem; font-size: 1.5rem;
@ -380,6 +380,11 @@
<div class="feature-title">Real-time Sync</div> <div class="feature-title">Real-time Sync</div>
<div class="feature-desc">Powered by Automerge CRDT</div> <div class="feature-desc">Powered by Automerge CRDT</div>
</div> </div>
<div class="feature">
<div class="feature-icon">📡</div>
<div class="feature-title">Offline-First</div>
<div class="feature-desc">Works without internet, merges on reconnect</div>
</div>
<div class="feature"> <div class="feature">
<div class="feature-icon">🌐</div> <div class="feature-icon">🌐</div>
<div class="feature-title">Your Subdomain</div> <div class="feature-title">Your Subdomain</div>
@ -442,6 +447,50 @@
</div> </div>
</div> </div>
<!-- Offline-First Section -->
<div class="section">
<div class="section-divider"></div>
<h2>Offline-First, Always Available</h2>
<p class="section-subtitle">
rSpace works without an internet connection. Edit your canvas on a plane,
in a field, or underground &mdash; your changes merge automatically when
you're back online. No sync buttons, no conflict dialogs.
</p>
<div class="pillars">
<div class="pillar">
<div class="pillar-icon">💾</div>
<div class="pillar-title">Local Persistence</div>
<div class="pillar-desc">Your canvas is cached in the browser. Refresh the page &mdash; it loads instantly, even offline.</div>
</div>
<div class="pillar">
<div class="pillar-icon">🔀</div>
<div class="pillar-title">Auto-Merge</div>
<div class="pillar-desc">Automerge CRDTs resolve conflicts automatically. Multiple people can edit the same canvas offline and merge without data loss.</div>
</div>
<div class="pillar">
<div class="pillar-icon">⚡</div>
<div class="pillar-title">Incremental Sync</div>
<div class="pillar-desc">Only new changes are transferred on reconnect &mdash; not the whole document. Fast even on slow connections.</div>
</div>
</div>
<div class="identity-card">
<h3>How it works</h3>
<p>
Every rSpace canvas is an <span class="hl">Automerge CRDT document</span> stored
locally in your browser's IndexedDB. When you open a canvas, it renders from the
local cache first &mdash; no waiting for the server. Edits you make are saved locally
and synced to the server via WebSocket when a connection is available. If you go offline,
the app keeps working: a <span class="hl">Service Worker</span> serves the app shell
from cache, and your changes accumulate in the local CRDT document. When connectivity
returns, Automerge's <span class="hl">incremental sync protocol</span> reconciles
your changes with everyone else's &mdash; conflict-free, automatically. No manual
merge, no "which version do you want to keep?" dialogs.
</p>
</div>
</div>
<!-- Interoperable Ecosystem Section --> <!-- Interoperable Ecosystem Section -->
<div class="section"> <div class="section">
<div class="section-divider"></div> <div class="section-divider"></div>