Files
KoalaSync/website

KoalaSync Website & Invitation Bridge

This directory contains the KoalaSync website. It serves a dual purpose: it is both the marketing landing page and the technical bridge for joining synchronized rooms.

Core Roles

1. Marketing & Onboarding

Provides a premium, bilingual (EN/DE) overview of features, setup instructions, and direct links to the extension stores.

2. The Invitation Bridge (join.html)

The website handles incoming invitation links. When a user clicks a link like sync.koalastuff.net/join.html#join:roomID:pass, the website:

  • Detects the Extension: Verifies if KoalaSync is installed via the bridge.js content script.
  • Privacy-First Handshake: The room credentials (ID/Password) are stored in the URL Hash (#). This ensures the sensitive credentials never reach the web server and are processed entirely within the user's browser.
  • Auto-Join: If the extension is detected, it automatically triggers the join flow without requiring user input.

Architecture

The website is 100% Static HTML, CSS, and JS.

  • Zero Backend: No Node.js, PHP, or databases are required to host the website.
  • Zero Tracking: All assets (fonts, icons) are self-hosted to prevent third-party tracking.
  • Responsive: Fully optimized for mobile with a native-feel hamburger menu.

Hosting with Caddy

Caddy is the recommended web server. It provides automatic HTTPS and high-performance static file serving.

For a more comprehensive configuration that includes the Relay Server reverse proxy, see the root Caddyfile.example.

sync.koalastuff.net {
    root * /var/www/koalasync/website
    file_server
    encode zstd gzip

    # Security Headers
    header {
        # Prevent FLoC tracking
        Permissions-Policy interest-cohort=()
        # Security best practices
        Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
        X-Content-Type-Options nosniff
        X-Frame-Options DENY
        Referrer-Policy no-referrer-when-downgrade
    }
}

Local Development

  1. Open index.html directly in any browser.
  2. To test the invitation flow locally, use a local server (e.g., npx serve .) and navigate to http://localhost:5000/join.html#join:test-room:test-pass.