index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#101211" />
    <meta
      name="description"
      content="Explore connections between networks, languages, web frameworks and infrastructure. Inspect source records, citations and labeled editorial links."
    />
    <title>Developer Map — concepts and connections</title>
    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
    <link rel="stylesheet" href="./src/styles.css" />
    <script src="./src/map-key.js" defer></script>
    <script src="./src/network.js" defer></script>
    <script src="./src/details.js" defer></script>
    <script src="./src/app.js" defer></script>
  </head>
  <body>
    <a class="skip-link" href="#explorer">Skip to graph explorer</a>
    <div class="site-shell">
      <header class="topbar">
        <a class="brand" href="#top" aria-label="Developer Map home"
          ><span class="brand-mark" aria-hidden="true"
            ><span></span><span></span><span></span></span
          ><span>developer<span class="brand-slash">/</span>map</span></a
        >
        <nav class="top-nav" aria-label="Main navigation">
          <a href="#explorer">Explore</a><a href="#routes">Learning paths</a
          ><a href="#catalog">Source index</a>
        </nav>
        <span class="nav-tag"
          ><span class="signal-dot"></span> PUBLIC DATA / NO SIGN-IN</span
        >
      </header>
      <main id="top">
        <section class="hero" aria-labelledby="hero-title">
          <div class="hero-copy">
            <p class="eyebrow">
              <span class="terminal-prompt">&gt;_</span> DEVELOPER KNOWLEDGE / SOURCE EXPLORER
            </p>
            <h1 id="hero-title">
              Trace a relationship.<br /><em>Check its source.</em>
            </h1>
            <p class="hero-lead">
              Explore connections between networks, languages and infrastructure. Select a link to read its source record; editorial additions are labeled.
            </p>
            <div class="hero-actions">
              <a class="button primary" id="demo-docker" href="#explorer"
                >Explore Docker <span aria-hidden="true">↗</span></a
              ><a class="button text" href="#catalog"
                >Browse the source index →</a
              >
            </div>
          </div>
          <div class="terminal-card" aria-label="Relationship quick start">
            <div class="terminal-title">
              <span>DOCKER CONNECTIONS</span><span>DOCKER</span>
            </div>
            <div class="terminal-body">
              <p class="code-comment">
                Three examples. Select one to inspect its source.
              </p>
              <p class="query-line">
                Docker <span aria-hidden="true">→</span> connected concepts
              </p>
              <div id="quick-relations" class="quick-relations">
                <span>Loading graph relationships…</span>
              </div>
              <div class="terminal-end">
                <span class="signal-dot"></span
                ><span id="query-status">Loading source records</span
                ><kbd>CLICK TO INSPECT ↗</kbd>
              </div>
            </div>
          </div>
        </section>
        <section class="metrics" aria-label="Atlas statistics">
          <div>
            <strong id="metric-concepts">—</strong
            ><span>canonical records</span>
          </div>
          <div>
            <strong id="metric-relations">—</strong
            ><span>explicit relationships</span>
          </div>
          <div>
            <strong id="metric-overlap">—</strong
            ><span>cross-source concepts</span>
          </div>
          <div class="metric-copy">
            <span class="signal-dot"></span
            ><span id="provenance-summary"
              >Source records preserved. Editorial connections labeled.</span
            >
          </div>
        </section>
        <section
          id="explorer"
          class="explorer"
          aria-labelledby="explorer-heading"
        >
          <div class="section-top">
            <div>
              <p class="eyebrow">01 / WORKSPACE</p>
              <h2 id="explorer-heading">Explore the connections.</h2>
              <p>
                Select a node to see its connections, or use search and the
                source index without the canvas.
              </p>
            </div>
            <div class="section-index">01 — 03</div>
          </div>
          <div class="explorer-controls">
            <label class="searchbox"
              ><span aria-hidden="true">⌕</span
              ><span class="sr-only">Search concepts</span
              ><input
                id="search"
                type="search"
                placeholder="Search concepts, definitions, claims…"
                autocomplete="off"
              /><kbd>/</kbd></label
            >
            <div
              id="topic-filters"
              class="filter-row"
              role="group"
              aria-label="Filter by source graph"
            ></div>
          </div>
          <div id="search-results" class="search-results" hidden></div>
          <div class="workspace-tabs">
            <span class="active"
              ><span aria-hidden="true">⌘</span> developer.graph</span
            ><a href="#catalog">{ } sources.json</a
            ><a href="#routes">↳ learning.paths</a
            ><span class="workspace-language">KNOWLEDGE GRAPH</span>
          </div>
          <div class="explorer-grid">
            <div class="map-panel">
              <div class="panel-toolbar">
                <span
                  ><span class="signal-dot"></span
                  ><span id="map-mode">WHOLE FIELD / ALL NODES</span></span
                >
                <div class="map-tools">
                  <button id="selection-back" type="button" disabled aria-label="Back to previous selected concept">← Back</button>
                  <button id="neighborhood-view" type="button" aria-pressed="true" hidden>Neighborhood</button>
                  <button id="fit-selection" type="button" hidden>Fit connections</button>
                  <button
                    id="edge-focus"
                    type="button"
                    aria-pressed="false"
                    hidden
                  >
                    Emphasize one edge</button
                  ><button id="details-jump" type="button" hidden>
                    Read entry ↓</button
                  ><button id="reset-map" type="button">Reset map</button
                  ><button id="zoom-out" type="button" aria-label="Zoom out">
                    −</button
                  ><button id="zoom-in" type="button" aria-label="Zoom in">
                    +
                  </button>
                </div>
              </div>
              <div class="map-canvas">
                <canvas
                  id="network"
                  tabindex="0"
                  role="img"
                  aria-label="All developer infrastructure concepts and relationships; select or search to highlight connections"
                ></canvas>
                <div id="map-tooltip" class="map-tooltip" hidden></div>
                <div class="map-hint">
                  CLICK A NODE TO SEE ITS LINKS · DRAG · SCROLL TO ZOOM
                </div>
              </div>
              <div class="map-footer">
                <div
                  id="domain-key"
                  class="domain-key"
                  aria-label="Concept colors"
                ></div>
                <span class="map-count" id="map-count"></span>
              </div>
              <details class="relation-key">
                <summary class="key-title">LINE STYLES</summary>
                <div
                  id="relation-key"
                  class="relation-key-items"
                  aria-label="Relationship line styles"
                ></div>
              </details>
            </div>
            <aside class="connection-pane" aria-label="Selected concept">
              <div class="pane-title">
                <span>INSPECT / CONCEPT</span><span aria-hidden="true">↗</span>
              </div>
              <div
                id="map-preview"
                class="map-preview"
                aria-live="polite"
                hidden
              ></div>
              <div id="selection-empty" class="selection-empty">
                <span class="empty-code">{ ? }</span>
                <h3>Pick a starting point.</h3>
                <p>
                  Select a node or search a concept. Its direct relationships
                  appear here.
                </p>
                <div class="quick-starts">
                  <button data-start="os">Operating systems ↗</button><button data-start="python">Python ↗</button><button data-start="sandbox">Sandboxes ↗</button><button data-start="volume_computing:volume">Storage volumes ↗</button><button data-start="optical_disc_image">Optical images ↗</button><button data-start="system_image">System images ↗</button><button data-start="docker">Docker <span>↗</span></button
                  ><button data-start="container">
                    Container <span>↗</span></button
                  ><button data-start="kubernetes">
                    Kubernetes <span>↗</span></button
                  ><button data-start="virtual_machine">
                    Virtual machine <span>↗</span>
                  </button>
                </div>
                <p class="shortcut-help">
                  <kbd>/</kbd> Search <kbd>Esc</kbd> Clear selection
                </p>
              </div>
            </aside>
          </div>
          <div
            id="connection-trail"
            class="connection-trail"
            aria-live="polite"
          >
            <span>$ inspect</span> Select a concept to reveal its connections.
          </div>
          <aside
            id="inspector"
            class="inspector"
            aria-label="Complete concept record"
          ></aside>
        </section>
        <section id="routes" class="routes" aria-labelledby="routes-heading">
          <div class="section-top">
            <div>
              <p class="eyebrow">02 / SOURCE LEARNING PATHS</p>
              <h2 id="routes-heading">Trace a learning path.</h2>
              <p>
                Follow a source’s suggested sequence, then inspect each concept
                and its connections.
              </p>
            </div>
            <div class="section-index">02 — 03</div>
          </div>
          <div id="route-list" class="route-list"></div>
          <button id="routes-more" class="button more" type="button">
            Show all paths ↓
          </button>
          <div id="route-detail" class="route-detail" hidden></div>
        </section>
        <section id="catalog" class="catalog" aria-labelledby="catalog-heading">
          <div class="section-top">
            <div>
              <p class="eyebrow">03 / ORIGINAL MATERIAL</p>
              <h2 id="catalog-heading">Open the source.</h2>
              <p>
                Browse every imported record, including claim and reference
                nodes. Open a record to inspect its fields, evidence, and
                original JSON.
              </p>
            </div>
            <div class="section-index">03 — 03</div>
          </div>
          <div class="catalog-layout">
            <div class="catalog-list">
              <div class="catalog-bar">
                <label for="catalog-search">COMPLETE INDEX</label
                ><input
                  id="catalog-search"
                  type="search"
                  placeholder="Filter all records…"
                /><span id="catalog-count"></span>
              </div>
              <div id="catalog-items" class="catalog-items"></div>
              <button id="catalog-more" class="button more" type="button">
                Show more records ↓
              </button>
            </div>
            <div class="source-card">
              <div class="source-glyph">{ }</div>
              <p class="eyebrow">TRACE THE SOURCE</p>
              <h3>Download the original records.</h3>
              <p>
                Original JSON files are available below. Reviewed aliases share
                one concept; distinct meanings, claims and references stay
                separate. Editorial links include a rationale.
              </p>
              <div id="source-links" class="source-links"></div>
              <p class="source-foot">
                An arrow records the direction of the source link; it does not
                by itself prove causation or an operational prerequisite.
              </p>
            </div>
          </div>
        </section>
      </main>
      <footer class="footer">
        <a class="brand" href="#top"
          ><span class="brand-mark" aria-hidden="true"
            ><span></span><span></span><span></span></span
          ><span>DEVELOPER<span class="brand-slash">/</span>MAP</span></a
        ><span>Developer Map · SolutionsAsService</span
        ><a href="https://github.com/SolutionsAsService/developer-map"
          >View source ↗</a
        >
      </footer>
    </div>
  </body>
</html>