Fold

A card that opens: setup, extras, the danger zone. It says what is inside and how much.

  • kit.fold()
  • 1.5 KB of CSS · 48 rules
  • kit.css
  • No script needed
Put this room on your site · two ways
<iframe src="https://openvibe.chat/r/night-owls/embed"></iframe>
Delete the room

Everyone loses the history. This cannot be undone.

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.fold({
      title: 'Put this room on your site',
      meta: 'two ways',
      body: kit.snippet({ code: '<iframe src="https://openvibe.chat/r/night-owls/embed"></iframe>' })
  })
    + kit.fold({
      title: 'Delete the room',
      tone: 'danger',
      body: kit.notice({ kind: 'warn', text: 'Everyone loses the history. This cannot be undone.' })
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.fold({
        title: 'Put this room on your site',
        meta: 'two ways',
        body: OpenVibeKit.snippet({ code: '<iframe src="https://openvibe.chat/r/night-owls/embed"></iframe>' })
    })
      + OpenVibeKit.fold({
        title: 'Delete the room',
        tone: 'danger',
        body: OpenVibeKit.notice({ kind: 'warn', text: 'Everyone loses the history. This cannot be undone.' })
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.3 KB
<details class="ovk-fold"><summary><span>Put this room on your site <span class="ovk-muted">· two ways</span></span><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.9 3.6l8.4 8.4l-8.4 8.4"/></svg></summary><div class="ovk-fold-body"><div class="ovk-snip"><button type="button" class="ovk-icon-btn" data-ovk-copy="#ovk-snip-319-64" aria-label="Copy" title="Copy" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="8" y="8" width="12.5" height="12.5" rx="2.1"/><path d="M16.3 8V5.8a2.1 2.1 0 0 0-2.1-2.1H5.8a2.1 2.1 0 0 0-2.1 2.1v8.4a2.1 2.1 0 0 0 2.1 2.1h2.1"/></svg></button><pre tabindex="0" id="ovk-snip-319-64"><code>&lt;iframe src=&quot;https://openvibe.chat/r/night-owls/embed&quot;&gt;&lt;/iframe&gt;</code></pre></div></div></details><details class="ovk-fold ovk-fold--danger"><summary><span>Delete the room</span><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.9 3.6l8.4 8.4l-8.4 8.4"/></svg></summary><div class="ovk-fold-body"><p class="ovk-notice ovk-notice--warn" role="status"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4.5L3.6 18.8h16.9Z"/><path d="M12 10v3.7M12 16.5h0"/></svg><span>Everyone loses the history. This cannot be undone.</span></p></div></details>

What it weighs

Its own rules are 6.9 KB, 1.5 KB as sent: 8% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.

It is also drawn natively: Jetpack Compose and SwiftUI.