Shared Components

Extract shared nav and CSS into drops, inject them at serve time with HTML comment markers. Update once — every page changes instantly.

Running Drops. Every code block in this tutorial uses Drops, a compact language that replaces curl commands. Run them via POST /exec or paste into the live editor.

1 The Problem

You built a site on InfiniteOcean following the Build a Website tutorial. It now has 8 pages: home, about, blog, pricing, docs, contact, FAQ, and terms. Every single page has the same navigation bar and the same base CSS pasted in.

Want to add a "Blog" link to the nav? Edit 8 files. Want to change the accent color? Edit 8 files. Forgot one? Now that page looks different from the rest.

html

<!-- home.html — same nav copied into every page -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/pricing">Pricing</a>
  <a href="/docs">Docs</a>
  <a href="/contact">Contact</a>
</nav>

<!-- about.html — exact same nav -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/pricing">Pricing</a>
  <a href="/docs">Docs</a>
  <a href="/contact">Contact</a>
</nav>

<!-- ...repeat for 6 more pages -->

The fix: store the shared pieces as drops, reference them with markers, and let InfiniteOcean inject them at serve time.

2 Extract the Shared CSS

Write your base CSS — variables, reset, body styles, nav layout, footer — with a single command at _site/css. This is raw CSS only, no <style> tags, because the page already wraps it in <style>.

drops

write _site @css ":root { --navy: #0f172a; --cyan: #06b6d4; --text: #334155; --muted: #64748b; --bg: #ffffff; --card: #f8fafc; --border: #e2e8f0; --green: #22c55e; --code-bg: #1e293b; --code-text: #e2e8f0; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; background: var(--bg); color: var(--text); } .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } footer { text-align: center; padding: 48px 0; font-size: 0.82rem; color: var(--muted); } footer a { color: var(--muted); text-decoration: none; } footer a:hover { color: var(--cyan); }"

The payload is a plain string of CSS. It gets injected directly inside the page's <style> block, so the browser reads it as normal CSS. Keep it minimal — only the styles that genuinely repeat across every page.

Why raw CSS? Each page has its own <style> tag with the  marker inside it. The marker gets replaced with the CSS string, so the result is valid <style>...your shared CSS...page-specific CSS...</style>.

3 Extract the Shared Nav

Now write the nav HTML at _site/nav. This includes the markup and a small script that auto-highlights the current page:

drops

write _site @nav "<nav class=\"site-nav\"><div class=\"container\" style=\"display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px\"><a href=\"/\" class=\"logo\">InfiniteOcean</a><div class=\"nav-links\"><a href=\"/docs\">Docs</a><a href=\"/tutorials\">Tutorials</a><a href=\"/agents\">Agents</a></div></div></nav><script>document.querySelectorAll(\".nav-links a\").forEach(a=>{if(location.pathname.startsWith(a.getAttribute(\"href\")))a.classList.add(\"active\")})</script>"

The auto-active script uses location.pathname.startsWith(href) so both /tutorials and /tutorials/shared-components highlight the "Tutorials" link. No per-page config needed.

One source of truth. Every page on the site now gets the same nav from this single drop. Add a link here, and it appears everywhere on the next page load.

4 Add Markers to Your Pages

In each page, replace the duplicated CSS and nav HTML with two comment markers. The server scans for these and replaces them before sending the response.

Before

<style>
  :root { --navy: #0f172a; ... }
  * { margin: 0; ... }
  body { font-family: ... }
  .container { ... }
  footer { ... }

  /* page-specific styles */
  .hero { padding: 48px 0; }
</style>

After

<style>
  <!--CSS-->

  /* page-specific styles */
  .hero { padding: 48px 0; }
</style>

Before

<body>
<nav class="site-nav">
  <div class="container">
    <a href="/" class="logo">
      InfiniteOcean
    </a>
    <div class="nav-links">
      <a href="/docs">Docs</a>
      <a href="/tutorials">...
    </div>
  </div>
</nav>

After

<body>

<!--NAV-->

That's it. Two markers replace dozens of lines of duplicated code. Pages that don't have these markers (like a standalone dashboard) are completely unaffected — the injection only fires when the marker is present.

5 How Injection Works

When InfiniteOcean serves an HTML page, it scans for the  and  markers. If found, it reads the corresponding component drops (_site/css and _site/nav) and replaces the markers with their content before sending the page to the browser.

Key behaviors:

Automatic — you don't need to call any special API. Just include the markers in your page HTML and store the components as drops.
Graceful fallback — if a component drop doesn't exist yet, the marker stays in the HTML as an invisible HTML comment. The page still renders fine.
HTML only — injection only applies to HTML pages. JSON, images, and other content types are served as-is.

No code needed. You don't write any injection logic yourself. Store your shared CSS at _site/css, your shared nav at _site/nav, add the comment markers to your pages, and InfiniteOcean handles the rest.

6 Instant Updates

When you update a shared component by writing to _site/nav or _site/css, every page that uses it picks up the change immediately. No cache to clear, no deploy needed, no pages to rebuild.

The next request to any page on your site will include the updated component. In practice this means:

Update the nav once, and it changes on every page
Update the CSS once, and every page gets the new styles
No stale content — the latest version is always served

7 Try It

Let's prove it works. Update the shared nav by writing a new version with an extra "Blog" link:

drops

write _site @nav "<nav class=\"site-nav\"><div class=\"container\" style=\"display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px\"><a href=\"/\" class=\"logo\">InfiniteOcean</a><div class=\"nav-links\"><a href=\"/docs\">Docs</a><a href=\"/tutorials\">Tutorials</a><a href=\"/agents\">Agents</a><a href=\"/blog\">Blog</a></div></div></nav><script>document.querySelectorAll(\".nav-links a\").forEach(a=>{if(location.pathname.startsWith(a.getAttribute(\"href\")))a.classList.add(\"active\")})</script>"

Now read it back to verify:

drops

read _site @nav

You'll see Blog in the output — the nav was updated site-wide with a single write. The cache was invalidated on write, and the next request loaded the fresh version.

To revert, write the original nav again (without the Blog link). Every page goes back to normal instantly.

Zero downtime. There's no deploy, no build, no restart. Write the drop, and the next request serves the new version. Previous pages already sent to browsers are unaffected.

← Magic Link Auth ← Back to Tutorials