commit 554a88106ff0989f525d71d6cb6be9cc581bc254 Author: spacesops Date: Sat May 23 12:15:03 2026 -0400 boilerplate diff --git a/README.md b/README.md new file mode 100644 index 0000000..37ae63e --- /dev/null +++ b/README.md @@ -0,0 +1,38 @@ +# Spaces StartOS Guide + +A simple, static setup-guide website for a fictional product called **Spaces on StartOS**. Built as a self-contained demo with boilerplate content and AI-generated placeholder screenshots. + +## Structure + +``` +. +├── index.html # Single-page guide with sidebar TOC +├── styles.css # Styling (modern, responsive, light theme) +├── script.js # Scrollspy for the table-of-contents +├── images/ # Placeholder screenshots +└── README.md +``` + +## Running locally + +No build step is required — open `index.html` in a browser, or serve the folder with any static server: + +```bash +python3 -m http.server 8000 +# then visit http://localhost:8000 +``` + +## What's inside + +The guide walks through: + +1. Introduction to Spaces +2. Prerequisites +3. Installing StartOS +4. Configuring the instance +5. Creating your first Space +6. Verifying the installation +7. Troubleshooting +8. Next steps + +All content, product details, and screenshots are illustrative. diff --git a/images/screenshot-config.png b/images/screenshot-config.png new file mode 100644 index 0000000..5221160 Binary files /dev/null and b/images/screenshot-config.png differ diff --git a/images/screenshot-create-space.png b/images/screenshot-create-space.png new file mode 100644 index 0000000..1f9ff2b Binary files /dev/null and b/images/screenshot-create-space.png differ diff --git a/images/screenshot-dashboard.png b/images/screenshot-dashboard.png new file mode 100644 index 0000000..356ef96 Binary files /dev/null and b/images/screenshot-dashboard.png differ diff --git a/images/screenshot-install.png b/images/screenshot-install.png new file mode 100644 index 0000000..df93fde Binary files /dev/null and b/images/screenshot-install.png differ diff --git a/images/screenshot-spaces-list.png b/images/screenshot-spaces-list.png new file mode 100644 index 0000000..1a5b472 Binary files /dev/null and b/images/screenshot-spaces-list.png differ diff --git a/images/screenshot-terminal.png b/images/screenshot-terminal.png new file mode 100644 index 0000000..0386937 Binary files /dev/null and b/images/screenshot-terminal.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4cb4a51 --- /dev/null +++ b/index.html @@ -0,0 +1,335 @@ + + + + + + + Spaces StartOS Guide — Setup & Configuration + + + + + + +
+
+ + + + Spaces + StartOS Guide + + + + Get started → +
+
+ +
+
+
+ Setup Guide · v2.4 +

Get up and running with Spaces on StartOS

+

+ A step-by-step walkthrough to install StartOS, configure your environment, and + launch your first Space — typically in under ten minutes. +

+
+ Start the setup + Read the intro +
+
    +
  • ⏱ ~10 minutes
    • +
  • 💻 macOS · Linux · Windows
    • +
  • 📦 No prior setup required
    • +
+
+
+ +
+ + +
+
+

Introduction

+

+ Spaces is the workspace layer of StartOS — a lightweight + runtime for organizing services, data, and collaborators into isolated + environments you can spin up, snapshot, and tear down on demand. Whether + you're prototyping a side project or operating a fleet of production + deployments, Spaces gives you a consistent, reproducible foundation. +

+

+ This guide will walk you through installing StartOS, performing the initial + setup, and launching your first Space. By the end, you'll have a running + instance with one workspace ready for work. +

+ +
+ StartOS Spaces dashboard showing the welcome screen with a Create Your First Space button +
The StartOS dashboard after a fresh install.
+
+ +
+ Heads up: StartOS is still moving fast. If something looks + different from a screenshot, check the version badge in the bottom-left + corner of the dashboard. +
+
+ +
+

Prerequisites

+

Before you begin, make sure you have:

+
    +
  • A machine running macOS 12+, Ubuntu 20.04+, or Windows 10+ (with WSL2).
    • +
  • At least 4 GB of RAM and 10 GB of free disk space.
    • +
  • Administrator (sudo) access on the target machine.
    • +
  • Network access to downloads.startos.example.
    • +
  • A StartOS account — create one for free if you don't have one.
    • +
+
+ +
+

1. Install StartOS

+

+ The fastest way to install StartOS is via the official installer. It + bundles the runtime, CLI, and a local control plane into a single setup + flow. +

+ +

Download the installer

+

Open a terminal and run the install script:

+ 
$ curl -fsSL https://get.startos.example | sh
+ +

+ The installer will detect your platform, fetch the appropriate package, and + guide you through a four-step wizard. When prompted, select + Standard Installation unless you have specific + infrastructure requirements. +

+ +
+ The StartOS installation wizard showing step 2 of 4, with Standard Installation selected +
The installation wizard — step 2 of 4.
+
+ +
+ Tip: On Linux servers without a desktop environment, pass + --headless to skip the GUI wizard: + sh -c "$(curl -fsSL https://get.startos.example) --headless". +
+
+ +
+

2. Configure your instance

+

+ Once StartOS is installed, open the dashboard at + http://localhost:8080. You'll be guided through a short + first-run configuration. Most users only need to set a hostname, choose a + port, and enable HTTPS. +

+ +
+ StartOS configuration page on the Networking tab, with hostname, port, HTTPS toggle, and domain fields +
Configuring networking from the Settings panel.
+
+ +

Recommended defaults

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SettingRecommended valueNotes
Hostnamestartos-spacesUsed for service discovery.
Port8080Change if another service is bound.
Enable HTTPSOnStartOS will provision a self-signed cert.
Domainspaces.example.comOptional — leave blank for local-only access.
+
+
+ +
+

3. Create your first Space

+

+ From the dashboard, click Create Your First Space. Give + your Space a name, pick the region closest to you, and choose a resource + tier. The Medium tier is a good starting point for most projects. +

+ +
+ The Create New Space form with fields for name, region, resource tier, and tags +
Creating a new Space takes about 30 seconds.
+
+ +
    +
  1. Name your Space. Use something descriptive like my-workspace or acme-prod.
    2. +
  2. Pick a region. Latency-sensitive workloads should run closest to their users.
    3. +
  3. Choose a tier. You can resize the Space later without downtime.
    4. +
  4. (Optional) Add tags. Tags make it easier to filter Spaces in larger teams.
    5. +
  5. Click Create Space. You'll be redirected to the Space's overview page.
    6. +
+ +

After a few moments, your Space will appear in the Spaces list with a green Running badge.

+ +
+ The Spaces list showing Production, Staging, and Development workspaces, all with Running status +
Multiple Spaces, each with live CPU and memory metrics.
+
+
+ +
+

4. Verify the installation

+

+ From any terminal, you can confirm that StartOS is healthy and that all + services are reporting in: +

+
+ A terminal showing startos --version and startos status commands with healthy OK output for every service +
startos status should report every service as OK.
+
+

+ If any service is in a DEGRADED or DOWN state, jump + to the Troubleshooting section below. +

+
+ +
+

Troubleshooting

+ +
+ The installer fails with "port 8080 is in use" +

+ Another service is already bound to port 8080. Either stop the + conflicting service or re-run the installer with + --port 9090 to use a different port. +

+
+ +
+ The dashboard won't load at http://localhost:8080 +

+ Run startos status in a terminal. If the + web service is not reporting OK, restart it with + startos restart web. +

+
+ +
+ I see "Permission denied" during install on Linux +

+ The installer needs to write to /usr/local/bin. Re-run the + script with sudo, or specify a writable prefix with + --prefix=$HOME/.local. +

+
+ +
+ My Space is stuck on "Provisioning" +

+ Provisioning typically completes in under a minute. If it takes longer, + check the activity log on the Space's overview page. Most often this + indicates a temporary region capacity issue — try a different region. +

+
+
+ +
+

Next steps

+

You're up and running. Here are some good places to go from here:

+
+ +

Deploy a service

+

Drop a service into your Space from the template gallery.

+ Browse templates → + + +

Invite your team

+

Add collaborators and set role-based permissions.

+ Manage members → + + +

Automate with the CLI

+

Use the startos CLI to script common tasks.

+ Read the CLI docs → + +
+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..bd69dde --- /dev/null +++ b/script.js @@ -0,0 +1,39 @@ +(() => { + const tocLinks = Array.from(document.querySelectorAll('.toc a')); + if (tocLinks.length === 0) return; + + const idToLink = new Map(); + tocLinks.forEach((link) => { + const id = link.getAttribute('href').slice(1); + idToLink.set(id, link); + }); + + const sections = Array.from(document.querySelectorAll('.doc-section')); + + const setActive = (id) => { + tocLinks.forEach((l) => l.classList.remove('active')); + const link = idToLink.get(id); + if (link) link.classList.add('active'); + }; + + const observer = new IntersectionObserver( + (entries) => { + const visible = entries + .filter((entry) => entry.isIntersecting) + .sort((a, b) => a.target.getBoundingClientRect().top - b.target.getBoundingClientRect().top); + if (visible[0]) setActive(visible[0].target.id); + }, + { + rootMargin: '-30% 0px -60% 0px', + threshold: 0, + } + ); + + sections.forEach((section) => observer.observe(section)); + + tocLinks.forEach((link) => { + link.addEventListener('click', () => { + setActive(link.getAttribute('href').slice(1)); + }); + }); +})(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..a2a534d --- /dev/null +++ b/styles.css @@ -0,0 +1,762 @@ +/* ============================================================ + Spaces StartOS Guide — styles + ============================================================ */ + +:root { + --bg: #fafafb; + --bg-elevated: #ffffff; + --bg-muted: #f4f4f7; + --border: #e6e6ec; + --border-strong: #d4d4dc; + --text: #1a1b2e; + --text-muted: #585a73; + --text-soft: #8a8ca0; + + --primary: #6366f1; + --primary-dark: #4f46e5; + --primary-soft: #eef0ff; + --accent: #7c3aed; + + --warn-bg: #fff8e6; + --warn-border: #f5d27a; + --info-bg: #eff6ff; + --info-border: #93c5fd; + + --radius-sm: 6px; + --radius: 10px; + --radius-lg: 16px; + + --shadow-sm: 0 1px 2px rgba(15, 17, 39, 0.04), 0 1px 1px rgba(15, 17, 39, 0.03); + --shadow-md: 0 4px 14px rgba(15, 17, 39, 0.06), 0 1px 3px rgba(15, 17, 39, 0.04); + --shadow-lg: 0 16px 40px rgba(15, 17, 39, 0.08), 0 4px 12px rgba(15, 17, 39, 0.04); + + --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + background: var(--bg); + color: var(--text); + font-family: var(--font-sans); + font-size: 16px; + line-height: 1.65; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +img { + max-width: 100%; + display: block; +} + +a { + color: var(--primary-dark); + text-decoration: none; +} + +a:hover { + color: var(--accent); + text-decoration: underline; +} + +code { + font-family: var(--font-mono); + font-size: 0.88em; + padding: 0.15em 0.4em; + background: var(--bg-muted); + border-radius: 4px; + border: 1px solid var(--border); + color: #2d2f4a; +} + +pre { + background: #0f1023; + color: #e8e8f6; + padding: 18px 22px; + border-radius: var(--radius); + overflow-x: auto; + font-family: var(--font-mono); + font-size: 14px; + line-height: 1.6; + box-shadow: var(--shadow-md); +} + +pre code { + background: transparent; + border: 0; + padding: 0; + color: inherit; + font-size: inherit; +} + +pre .prompt { + color: #8b9eff; + user-select: none; + margin-right: 0.5em; +} + +.container { + width: 100%; + max-width: 1180px; + margin: 0 auto; + padding: 0 24px; +} + +/* ---------- Header ---------- */ + +.site-header { + position: sticky; + top: 0; + z-index: 30; + background: rgba(255, 255, 255, 0.85); + backdrop-filter: saturate(150%) blur(10px); + -webkit-backdrop-filter: saturate(150%) blur(10px); + border-bottom: 1px solid var(--border); +} + +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + padding: 14px 24px; +} + +.brand { + display: inline-flex; + align-items: center; + gap: 12px; + color: var(--text); +} + +.brand:hover { + text-decoration: none; +} + +.brand-mark { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 8px; + box-shadow: var(--shadow-sm); +} + +.brand-text { + display: flex; + flex-direction: column; + line-height: 1.1; +} + +.brand-name { + font-weight: 700; + font-size: 16px; +} + +.brand-sub { + color: var(--text-soft); + font-size: 12px; + letter-spacing: 0.02em; +} + +.top-nav { + display: flex; + gap: 28px; +} + +.top-nav a { + color: var(--text-muted); + font-weight: 500; + font-size: 14.5px; +} + +.top-nav a:hover { + color: var(--text); + text-decoration: none; +} + +/* ---------- Buttons ---------- */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 11px 18px; + border-radius: var(--radius); + font-weight: 600; + font-size: 14.5px; + cursor: pointer; + border: 1px solid transparent; + transition: transform 80ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease; +} + +.btn:hover { + text-decoration: none; + transform: translateY(-1px); +} + +.btn-sm { + padding: 7px 14px; + font-size: 13px; +} + +.btn-primary { + background: linear-gradient(180deg, var(--primary), var(--primary-dark)); + color: white; + box-shadow: 0 6px 16px rgba(99, 102, 241, 0.28); +} + +.btn-primary:hover { + color: white; + box-shadow: 0 10px 24px rgba(99, 102, 241, 0.34); +} + +.btn-outline { + background: white; + border-color: var(--border-strong); + color: var(--text); +} + +.btn-outline:hover { + border-color: var(--primary); + color: var(--primary-dark); +} + +.btn-ghost { + background: transparent; + color: var(--text); +} + +.btn-ghost:hover { + background: var(--bg-muted); + color: var(--text); +} + +/* ---------- Hero ---------- */ + +.hero { + padding: 72px 0 56px; + background: + radial-gradient(1200px 360px at 50% -10%, rgba(124, 58, 237, 0.12), transparent 60%), + radial-gradient(900px 320px at 10% 20%, rgba(99, 102, 241, 0.10), transparent 60%), + linear-gradient(180deg, #ffffff 0%, var(--bg) 100%); + border-bottom: 1px solid var(--border); +} + +.hero-inner { + text-align: center; +} + +.eyebrow { + display: inline-block; + padding: 5px 12px; + border-radius: 999px; + background: var(--primary-soft); + color: var(--primary-dark); + font-weight: 600; + font-size: 12.5px; + letter-spacing: 0.04em; + text-transform: uppercase; + margin-bottom: 18px; +} + +.hero h1 { + font-size: clamp(34px, 5.5vw, 56px); + line-height: 1.08; + letter-spacing: -0.02em; + margin: 0 auto 18px; + max-width: 880px; + font-weight: 800; +} + +.grad { + background: linear-gradient(90deg, #7c3aed, #6366f1 60%, #06b6d4); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.lead { + font-size: 18px; + color: var(--text-muted); + max-width: 680px; + margin: 0 auto 28px; +} + +.hero-actions { + display: flex; + justify-content: center; + gap: 12px; + flex-wrap: wrap; + margin-bottom: 32px; +} + +.hero-meta { + display: flex; + justify-content: center; + gap: 28px; + list-style: none; + padding: 0; + margin: 0; + color: var(--text-muted); + font-size: 14px; + flex-wrap: wrap; +} + +.hero-meta li { + display: inline-flex; + align-items: center; + gap: 8px; +} + +.hero-meta span { + font-size: 16px; +} + +/* ---------- Layout ---------- */ + +.layout { + display: grid; + grid-template-columns: 260px 1fr; + gap: 56px; + padding: 56px 24px 96px; + align-items: start; +} + +/* ---------- TOC ---------- */ + +.toc { + position: sticky; + top: 88px; + align-self: start; + font-size: 14px; +} + +.toc-title { + text-transform: uppercase; + font-size: 12px; + font-weight: 700; + color: var(--text-soft); + letter-spacing: 0.08em; + margin: 0 0 12px; +} + +.toc ol { + list-style: none; + padding: 0; + margin: 0 0 28px; + border-left: 1px solid var(--border); +} + +.toc li { + margin: 0; +} + +.toc a { + display: block; + padding: 7px 14px; + color: var(--text-muted); + border-left: 2px solid transparent; + margin-left: -1px; + transition: color 120ms ease, border-color 120ms ease, background 120ms ease; +} + +.toc a:hover { + color: var(--text); + text-decoration: none; + background: var(--bg-muted); +} + +.toc a.active { + color: var(--primary-dark); + border-left-color: var(--primary); + font-weight: 600; +} + +.toc-card { + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 16px; + box-shadow: var(--shadow-sm); +} + +.toc-card-title { + font-weight: 700; + font-size: 14px; + margin: 0 0 6px; +} + +.toc-card-body { + color: var(--text-muted); + font-size: 13.5px; + margin: 0 0 12px; + line-height: 1.55; +} + +/* ---------- Content ---------- */ + +.content { + min-width: 0; +} + +.doc-section { + padding-bottom: 56px; + border-bottom: 1px solid var(--border); + margin-bottom: 56px; + scroll-margin-top: 96px; +} + +.doc-section:last-child { + border-bottom: 0; + margin-bottom: 0; +} + +.doc-section h2 { + font-size: 30px; + letter-spacing: -0.01em; + margin: 0 0 18px; + font-weight: 700; +} + +.doc-section h3 { + font-size: 20px; + margin: 32px 0 12px; + font-weight: 700; +} + +.doc-section p, +.doc-section ul, +.doc-section ol { + color: #2c2e44; +} + +.doc-section p { + margin: 0 0 16px; +} + +.check-list, +.numbered { + padding-left: 0; + list-style: none; +} + +.check-list li { + position: relative; + padding: 6px 0 6px 30px; +} + +.check-list li::before { + content: ""; + position: absolute; + left: 0; + top: 13px; + width: 18px; + height: 18px; + border-radius: 50%; + background: var(--primary-soft) url("data:image/svg+xml;utf8,") center / 12px no-repeat; +} + +.numbered { + counter-reset: step; +} + +.numbered > li { + counter-increment: step; + position: relative; + padding: 6px 0 6px 42px; + margin-bottom: 4px; +} + +.numbered > li::before { + content: counter(step); + position: absolute; + left: 0; + top: 6px; + width: 26px; + height: 26px; + border-radius: 50%; + background: var(--primary); + color: white; + font-weight: 700; + font-size: 13px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +/* Figures */ + +figure { + margin: 24px 0 28px; +} + +figure img { + width: 100%; + border-radius: var(--radius); + border: 1px solid var(--border); + box-shadow: var(--shadow-md); +} + +figcaption { + margin-top: 10px; + color: var(--text-soft); + font-size: 13.5px; + text-align: center; + font-style: italic; +} + +/* Callouts */ + +.callout { + border: 1px solid var(--border); + border-left-width: 4px; + border-radius: var(--radius); + padding: 14px 18px; + margin: 20px 0; + font-size: 15px; + line-height: 1.6; + background: var(--bg-elevated); +} + +.callout strong { + margin-right: 4px; +} + +.callout-info { + background: var(--info-bg); + border-color: var(--info-border); +} + +.callout-warn { + background: var(--warn-bg); + border-color: var(--warn-border); +} + +/* Tables */ + +.table-wrap { + overflow-x: auto; + border: 1px solid var(--border); + border-radius: var(--radius); + margin: 16px 0 24px; + background: var(--bg-elevated); +} + +table { + width: 100%; + border-collapse: collapse; + font-size: 14.5px; +} + +thead { + background: var(--bg-muted); +} + +th, +td { + text-align: left; + padding: 12px 16px; + border-bottom: 1px solid var(--border); +} + +tbody tr:last-child td { + border-bottom: 0; +} + +th { + font-weight: 700; + color: var(--text); + font-size: 13px; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +/* Details (FAQ) */ + +details { + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 0; + margin: 12px 0; + background: var(--bg-elevated); + box-shadow: var(--shadow-sm); + overflow: hidden; +} + +details summary { + list-style: none; + cursor: pointer; + padding: 14px 18px; + font-weight: 600; + color: var(--text); + position: relative; + padding-right: 44px; + user-select: none; +} + +details summary::-webkit-details-marker { + display: none; +} + +details summary::after { + content: "+"; + position: absolute; + right: 18px; + top: 50%; + transform: translateY(-50%); + width: 22px; + height: 22px; + border-radius: 50%; + background: var(--primary-soft); + color: var(--primary-dark); + text-align: center; + line-height: 22px; + font-weight: 700; + transition: transform 160ms ease; +} + +details[open] summary::after { + content: "−"; +} + +details p { + padding: 0 18px 16px; + margin: 0; + color: var(--text-muted); +} + +/* Next-step cards */ + +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 16px; + margin-top: 18px; +} + +.card { + display: block; + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 20px; + color: var(--text); + box-shadow: var(--shadow-sm); + transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease; +} + +.card:hover { + text-decoration: none; + transform: translateY(-2px); + border-color: var(--primary); + box-shadow: var(--shadow-md); +} + +.card h4 { + margin: 0 0 6px; + font-size: 16px; + font-weight: 700; +} + +.card p { + margin: 0 0 12px; + color: var(--text-muted); + font-size: 14px; +} + +.card-link { + color: var(--primary-dark); + font-weight: 600; + font-size: 13.5px; +} + +/* ---------- Footer ---------- */ + +.site-footer { + border-top: 1px solid var(--border); + background: var(--bg-elevated); + padding: 40px 0 56px; +} + +.footer-inner { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 24px; +} + +.footer-brand p { + margin: 4px 0 0; + color: var(--text-soft); + font-size: 13.5px; +} + +.footer-links { + display: flex; + gap: 24px; +} + +.footer-links a { + color: var(--text-muted); + font-size: 14px; +} + +.footer-meta { + grid-column: 1 / -1; + color: var(--text-soft); + font-size: 13px; + margin: 16px 0 0; +} + +/* ---------- Responsive ---------- */ + +@media (max-width: 960px) { + .layout { + grid-template-columns: 1fr; + gap: 24px; + padding-top: 32px; + } + + .toc { + position: static; + order: 2; + } + + .content { + order: 1; + } + + .top-nav { + display: none; + } +} + +@media (max-width: 560px) { + .hero { + padding: 48px 0 36px; + } + + .hero-meta { + gap: 14px; + font-size: 13.5px; + } + + .doc-section h2 { + font-size: 24px; + } + + .footer-inner { + grid-template-columns: 1fr; + text-align: left; + } +}