index.html

<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="A zero-dependency JSON diff viewer web component"
    />
    <link rel="icon" type="image/png" href="./logo.png" />
    <title>JSON Diff Viewer</title>
    <style>
      * {
        box-sizing: border-box;
      }
      :root {
        color-scheme: dark;
        --page: #09090b;
        --surface: #18181b;
        --border: #3f3f46;
        --text: #fafafa;
        --muted: #a1a1aa;
        --accent: #a3e635;
        font:
          14px ui-monospace,
          SFMono-Regular,
          Menlo,
          monospace;
        &[data-theme="light"] {
          color-scheme: light;
          --page: #f4f4f5;
          --surface: #fff;
          --border: #d4d4d8;
          --text: #18181b;
          --muted: #52525b;
          --accent: #4d7c0f;
        }
      }
      body {
        margin: 0;
        background: var(--page);
        color: var(--text);
      }
      main {
        width: min(1400px, 100%);
        margin-inline: auto;
        padding: clamp(1rem, 3vw, 3rem);
      }
      header,
      nav,
      .intro,
      .examples,
      .section-head {
        display: flex;
        align-items: center;
      }
      header {
        justify-content: space-between;
        gap: 1rem;
        margin-block-end: 1.5rem;
      }
      .intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
      }
      h1,
      h2,
      p {
        margin: 0;
      }
      h1 {
        font: 900 clamp(1.5rem, 4vw, 3rem) system-ui;
        letter-spacing: -0.06em;
      }
      h2 {
        font: 800 1rem system-ui;
      }
      small {
        color: var(--muted);
        font: 600 0.65rem system-ui;
        text-transform: uppercase;
      }
      p {
        color: var(--muted);
      }
      nav {
        gap: 0.5rem;
      }
      a,
      button {
        color: inherit;
        font: inherit;
      }
      a {
        text-decoration: none;
      }
      .button {
        padding: 0.55rem 0.8rem;
        background: var(--surface);
        border: 2px solid var(--border);
        border-radius: 0.75rem;
        cursor: pointer;
        &:hover {
          border-color: var(--accent);
        }
      }
      .loader {
        display: grid;
        gap: 0.75rem;
        margin-block-end: 1rem;
        padding: 1rem;
        background: var(--surface);
        border: 2px solid var(--border);
        border-radius: 1rem;
        &[hidden] {
          display: none;
        }
      }
      .loader-tabs,
      .loader-actions {
        display: flex;
        gap: 0.5rem;
      }
      .loader-tabs button[aria-selected="true"] {
        border-color: var(--accent);
        color: var(--accent);
      }
      .loader-inputs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
      }
      .loader-side {
        display: grid;
        gap: 0.4rem;
        min-width: 0;
        & label {
          color: var(--muted);
          font-size: 0.75rem;
          font-weight: 700;
        }
        & input,
        & textarea {
          width: 100%;
          min-width: 0;
          padding: 0.65rem;
          background: var(--page);
          border: 2px solid var(--border);
          border-radius: 0.75rem;
          color: var(--text);
          font: inherit;
          &:focus {
            border-color: var(--accent);
            outline: none;
          }
        }
        & textarea {
          min-height: 8rem;
          resize: vertical;
        }
        & > :is(input, textarea):not([data-active]) {
          display: none;
        }
      }
      .loader-actions {
        align-items: center;
        justify-content: flex-end;
      }
      #load-error {
        margin-inline-end: auto;
        color: var(--rem, #fb7185);
        font-size: 0.8rem;
      }
      json-diff-viewer {
        display: flex;
        height: min(68vh, 760px);
        min-height: 420px;
        --add: #4ade80;
        --rem: #fb7185;
        --mod: #facc15;
        --bg: var(--page);
        --bg2: var(--surface);
        --bdr: var(--border);
        --txt: var(--text);
        --dim: var(--muted);
        --slider: var(--accent);
        --control-bdr: color-mix(in srgb, var(--border) 70%, var(--accent));
        border: 3px solid var(--border);
        border-radius: 1rem;
      }
      json-diff-viewer::part(toolbar) {
        border-block-end-width: 3px;
      }
      json-diff-viewer::part(action-button) {
        border-width: 2px;
      }
      json-diff-viewer::part(marker) {
        outline: 2px solid color-mix(in srgb, currentColor 30%, transparent);
      }
      .showcase-section {
        margin-block-start: 2rem;
      }
      .section-head {
        justify-content: space-between;
        gap: 1rem;
        margin-block-end: 0.75rem;
      }
      .section-head a {
        color: var(--accent);
        font-size: 0.8rem;
      }
      .examples {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 1rem;
      }
      article {
        flex: 1 1 280px;
        min-width: 0;
        padding: 1rem;
        background: var(--surface);
        border: 2px solid var(--border);
        border-radius: 1rem;
        & p {
          margin-block: 0.35rem 1rem;
          font-size: 0.8rem;
        }
      }
      pre {
        margin: 0;
        overflow: auto;
        color: var(--accent);
        font-size: 0.78rem;
        line-height: 1.55;
      }
      code {
        font: inherit;
      }
      @media (max-width: 600px) {
        header {
          align-items: flex-start;
          flex-direction: column;
        }
        .loader-inputs {
          grid-template-columns: 1fr;
        }
        .loader-tabs {
          flex-wrap: wrap;
        }
        json-diff-viewer {
          min-height: 520px;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <header>
        <div class="intro">
          <h1>JSON Diff Viewer</h1>
          <p>Framework-agnostic, zero-dependency web component.</p>
        </div>
        <nav aria-label="Project links">
          <a
            class="button"
            href="https://github.com/metaory/json-diff-viewer-component#usage"
            >Docs</a
          >
          <a
            class="button"
            href="https://github.com/metaory/json-diff-viewer-component"
            >GitHub</a
          >
          <button class="button" id="load-toggle" type="button" aria-expanded="false">Load Data</button>
          <button class="button" id="theme" type="button">Light</button>
        </nav>
      </header>
      <section class="loader" id="loader" aria-label="Load JSON data" hidden>
        <nav class="loader-tabs" aria-label="Input type">
          <button class="button" type="button" data-mode="file" aria-selected="true">File</button>
          <button class="button" type="button" data-mode="paste" aria-selected="false">Paste</button>
          <button class="button" type="button" data-mode="url" aria-selected="false">URL</button>
        </nav>
        <div class="loader-inputs">
          <div class="loader-side">
            <label for="left-file">Left</label>
            <input id="left-file" type="file" accept="application/json,.json" data-side="left" data-kind="file" data-active />
            <textarea aria-label="Left JSON" placeholder="Paste left JSON" data-side="left" data-kind="paste"></textarea>
            <input type="url" aria-label="Left JSON URL" placeholder="https://example.com/left.json" data-side="left" data-kind="url" />
          </div>
          <div class="loader-side">
            <label for="right-file">Right</label>
            <input id="right-file" type="file" accept="application/json,.json" data-side="right" data-kind="file" data-active />
            <textarea aria-label="Right JSON" placeholder="Paste right JSON" data-side="right" data-kind="paste"></textarea>
            <input type="url" aria-label="Right JSON URL" placeholder="https://example.com/right.json" data-side="right" data-kind="url" />
          </div>
        </div>
        <div class="loader-actions">
          <p id="load-error" role="alert"></p>
          <button class="button" id="compare" type="button">Compare</button>
        </div>
      </section>
      <json-diff-viewer aria-label="JSON comparison"></json-diff-viewer>
      <section class="showcase-section" aria-labelledby="usage-title">
        <div class="section-head">
          <div>
            <h2 id="usage-title">Usage API</h2>
            <p>Import the component, then choose one data API.</p>
          </div>
          <a
            href="https://github.com/metaory/json-diff-viewer-component/blob/master/README.md#framework-usage"
            target="_blank"
            rel="noreferrer"
            >Framework usage</a
          >
        </div>
        <div class="examples">
          <article>
            <h2>setData <small>Recommended</small></h2>
            <p>Update both values in one render.</p>
            <pre><code>import "json-diff-viewer-component";

const viewer = document.querySelector(
  "json-diff-viewer",
);
viewer.setData(left, right);</code></pre>
          </article>
          <article>
            <h2>Properties <small>Alternative</small></h2>
            <p>Assign JavaScript values independently.</p>
            <pre><code>viewer.left = left;
viewer.right = right;</code></pre>
          </article>
          <article>
            <h2>Attributes <small>Alternative</small></h2>
            <p>Embed small, static JSON in HTML.</p>
            <pre><code>&lt;json-diff-viewer
  left='{"name":"old"}'
  right='{"name":"new"}'
&gt;&lt;/json-diff-viewer&gt;</code></pre>
          </article>
        </div>
      </section>
      <section class="showcase-section" aria-labelledby="styling-title">
        <div class="section-head">
          <div>
            <h2 id="styling-title">Styling</h2>
            <p>Use the defaults, or customize tokens and exposed parts.</p>
          </div>
          <a
            href="https://github.com/metaory/json-diff-viewer-component/blob/master/README.md#styling"
            target="_blank"
            rel="noreferrer"
            >Styling reference</a
          >
        </div>
        <div class="examples">
          <article>
            <h2>Design tokens</h2>
            <p>Override only the visual values you need.</p>
            <pre><code>json-diff-viewer {
  --add: lime;
  --control-bdr: lime;
}</code></pre>
          </article>
          <article>
            <h2>Shadow parts</h2>
            <p>Target exposed structural elements.</p>
            <pre><code>json-diff-viewer::part(toolbar) {
  border-block-end-width: 3px;
}</code></pre>
          </article>
        </div>
      </section>
    </main>
    <script type="module">
      import "./src/lib/viewer.js";

      const root = document.documentElement;
      const viewer = document.querySelector("json-diff-viewer");
      const theme = document.querySelector("#theme");
      const loader = document.querySelector("#loader");
      const loadToggle = document.querySelector("#load-toggle");
      const error = document.querySelector("#load-error");
      const urls = ["data/a1.json", "data/a2.json"];

      const input = (side, kind) =>
        loader.querySelector(`[data-side="${side}"][data-kind="${kind}"]`);
      const read = {
        file: (side) => input(side, "file").files[0]?.text(),
        paste: (side) => Promise.resolve(input(side, "paste").value),
        url: (side) => {
          const value = input(side, "url").value;
          return value && fetch(value).then((response) => {
            if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
            return response.text();
          });
        },
      };
      const compare = (mode) =>
        Promise.all(["left", "right"].map((side) => read[mode](side)))
          .then((values) => {
            if (values.some((value) => !value)) throw new Error(`Provide both ${mode} inputs`);
            return values.map(JSON.parse);
          })
          .then((values) => viewer.setData(...values));

      Promise.all(
        urls.map((url) => fetch(url).then((response) => response.json())),
      ).then((data) => viewer.setData(...data));

      loadToggle.addEventListener("click", () => {
        loader.hidden = !loader.hidden;
        loadToggle.setAttribute("aria-expanded", String(!loader.hidden));
      });

      loader.querySelector(".loader-tabs").addEventListener("click", (event) => {
        const mode = event.target.dataset.mode;
        if (!mode) return;
        for (const tab of loader.querySelectorAll("[data-mode]")) {
          tab.setAttribute("aria-selected", String(tab === event.target));
        }
        for (const field of loader.querySelectorAll("[data-kind]")) {
          field.toggleAttribute("data-active", field.dataset.kind === mode);
        }
        error.textContent = "";
      });

      document.querySelector("#compare").addEventListener("click", () => {
        const mode = loader.querySelector('[aria-selected="true"]').dataset.mode;
        error.textContent = "";
        compare(mode)
          .then(() => {
            loader.hidden = true;
            loadToggle.setAttribute("aria-expanded", "false");
          })
          .catch((reason) => {
            error.textContent = reason.message;
          });
      });

      theme.addEventListener("click", () => {
        const next = root.dataset.theme === "dark" ? "light" : "dark";
        root.dataset.theme = next;
        theme.textContent = next === "dark" ? "Light" : "Dark";
      });
    </script>
  </body>
</html>