<commit_before><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>@nrk/core-icons</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css">
  <link rel="stylesheet" href="https://static.nrk.no/core-fonts/1.0.0/core-fonts.min.css">
  <link rel="stylesheet" href="https://static.nrk.no/core-css/1.0.0/core-css.min.css">
  <style>
    body { padding: 70px 0; min-height: 100vh; font: 16px/1.5 'LFT Etica',sans-serif }
    body::after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;background:inherit} /* Fixes invert: https://bugs.chromium.org/p/chromium/issues/detail?id=340168 */
    h2 { font-size: 13px; margin: 2em 0 -1em; text-transform: uppercase }
    input[readonly] { box-sizing: border-box; cursor: pointer; border: 0; padding: 10px; font-family: monospace }
    input, select, textarea { font: inherit }

    .docs-container { margin: auto; padding: 0 10px; max-width: 1200px }
    .docs-masthead { position: fixed; z-index: 3; top: 0; left: 0; right: 0; box-shadow: 0 0 2px rgba(0,0,0,.5) }
    .docs-masthead li { padding-right: 14px; font-size: 14px; line-height: 44px }
  </style>
</head>
<body class="nrk-color-base">
  <header class="docs-masthead nrk-color-base">
    <ul class="docs-container nrk-grid">
      <li><a target="_top" href="https://github.com/nrkno/core-icons">Github</a></li>
      <li><a target="_top" href="https://github.com/nrkno/core-icons/archive/master.zip">Download</a></li>
    </ul>
  </header>
  <div class="docs-container nrk-grid">
    <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:30px">
      <h2>@nrk/core-icons</h2>
      <p><input name="search" type="text" class="nrk-xs-12of12" placeholder="Finn ikon"></p>
      <h2>Sizing</h2>
      <p>
        Icons should be used in dimensions <code class="language-markup">15x15</code>,
        <code class="language-markup">21x21</code> or <code class="language-markup">30x30</code>.
        For easier usage, caching and cross-domain compability, icons are loaded by including
      </p>
      <h2>Colors</h2>
      <p>The icons automatically inherits their color form the surrounding text.</p>
      <p><label><input type="checkbox" name="invert" onchange="document.body.style.filter=this.checked?'invert(1)':''"> Show negative</label></p>
    </div>
    <div class="nrk-xs-12of12 nrk-md-9of12" id="icons">
      <h2>Usage</h2>
      <p>Copy this into your <code class="language-markup">&lt;body&gt;</code>:</p>
      <p><input type="text" onclick="this.select();document.execCommand('copy')" readonly class="nrk-xs-12of12 nrk-color-shade-1" value="&lt;script src=&quot;https://static.nrk.no/core-icons/latest/core-icons.min.js&quot;&gt;&lt;/script&gt;"></p>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
  <script src="https://static.nrk.no/core-icons/latest/core-icons.min.js"></script>
  <!--<script src="core-icons.js"></script>-->
  <script>
    const symbols = Array.from(document.querySelectorAll('symbol[id]')).map((symbol) => symbol.id);
    const markup = (id) => `<p class="docs-sample nrk-color-shade-1" href="#copy"><svg><use xlink:href="#${id}" /></svg></p>`;
    const groups = {};

    symbols.forEach((id) => {
      const ns = id.split('-')[1];
      (groups[ns] = groups[ns] || []).push(id);
    });
    console.log(groups);

    document.addEventListener('input', (event) => {
      if (event.target.name === 'search') {
        Array.from(document.querySelectorAll('.docs-sample'))
          .forEach((el) => {
            el.style.display = el.querySelector('use')
              .getAttribute('xlink:href')
              .slice(3) // Remove 'nrk-'
              .indexOf(event.target.value) < 0 ? 'none'
              : '';
          });
      }
    });

    // Make icon-grid
    document.getElementById('icons').insertAdjacentHTML('beforeend', symbols.map((id) => markup(id)).join(''));
  </script>
</body>
</html><commit_msg>Add code examples to icons.<commit_after><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>@nrk/core-icons</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css">
  <link rel="stylesheet" href="https://static.nrk.no/core-fonts/1.0.0/core-fonts.min.css">
  <link rel="stylesheet" href="https://static.nrk.no/core-css/1.0.0/core-css.min.css">
  <style>
    body { padding: 70px 0; min-height: 100vh; font: 16px/1.5 'LFT Etica',sans-serif }
    body::after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;background:inherit} /* Fixes invert: https://bugs.chromium.org/p/chromium/issues/detail?id=340168 */
    h2 { font-size: 13px; margin: 2em 0 -1em; text-transform: uppercase }
    input[readonly] { box-sizing: border-box; cursor: pointer; border: 0; padding: 10px; font-family: monospace }
    input, select, textarea { font: inherit }

    .docs-container { margin: auto; padding: 0 10px; max-width: 1200px }
    .docs-masthead { position: fixed; z-index: 3; top: 0; left: 0; right: 0; box-shadow: 0 0 2px rgba(0,0,0,.5) }
    .docs-masthead li { padding-right: 14px; font-size: 14px; line-height: 44px }
    .docs-sample { padding: 10px; margin-bottom: 5px }
  </style>
</head>
<body class="nrk-color-base">
  <header class="docs-masthead nrk-color-base">
    <ul class="docs-container nrk-grid">
      <li><a target="_top" href="https://github.com/nrkno/core-icons">Github</a></li>
      <li><a target="_top" href="https://github.com/nrkno/core-icons/archive/master.zip">Download</a></li>
    </ul>
  </header>
  <div class="docs-container nrk-grid">
    <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:30px">
      <h2>@nrk/core-icons</h2>
      <p>
        Icons should be used in dimensions <code class="language-markup">15x15</code>,
        <code class="language-markup">21x21</code> or <code class="language-markup">30x30</code>.
        For easier usage, caching and cross-domain compability, icons are loaded by including
      </p>
      <h2>Colors</h2>
      <p>The icons automatically inherits their color form the surrounding text.</p>
      <p><label><input type="checkbox" name="invert" onchange="document.body.style.filter=this.checked?'invert(1)':''"> Show negative</label></p>
    </div>
    <div class="nrk-xs-12of12 nrk-md-9of12" id="icons">
      <h2>Usage</h2>
      <p>Copy this into your <code class="language-markup">&lt;body&gt;</code>:</p>
      <p><input type="text" onclick="this.select()" readonly class="nrk-xs-12of12 nrk-color-shade-1" value="&lt;script src=&quot;https://static.nrk.no/core-icons/latest/core-icons.min.js&quot;&gt;&lt;/script&gt;"></p>
      <h2>Icons</h2>
      <p><input name="search" type="text" class="nrk-xs-12of12" placeholder="Search for icon"></p><br>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
  <script src="https://static.nrk.no/core-icons/latest/core-icons.min.js"></script>
  <!--<script src="core-icons.js"></script>-->
  <script>
    const symbols = Array.from(document.querySelectorAll('symbol[id]')).map((symbol) => symbol.id);
    const markup = (id) =>  `<div class="docs-sample nrk-color-shade-1 nrk-grid">
      <svg width="60" height="60"><use xlink:href="#${id}" /></svg>
      <pre><code class="language-markup">&lt;svg&gt;&lt;use xlink:href="#${id}" /&gt;&lt;/svg&gt;</code></pre>
    </div>`;

    const groups = {}; //WIP
    symbols.forEach((id) => {
      const ns = id.split('-')[1];
      (groups[ns] = groups[ns] || []).push(id);
    });

    document.addEventListener('input', (event) => {
      if (event.target.name === 'search') {
        Array.from(document.querySelectorAll('.docs-sample'))
          .forEach((el) => {
            el.style.display = el.querySelector('use')
              .getAttribute('xlink:href')
              .slice(3) // Remove 'nrk-'
              .indexOf(event.target.value) < 0 ? 'none'
              : 'flex';
          });
      }
    });

    // Make icon-grid
    document.getElementById('icons').insertAdjacentHTML('beforeend', symbols.map((id) => markup(id)).join(''));
  </script>
</body>
</html>
{'fraction_non_alphanumeric': 0.20686356570608633, 'fraction_numerical': 0.02929570728207581, 'mean_word_length': 3.5357917570498913, 'pattern_counts': {'":': 0, '<': 172, '<?xml version=': 0, '>': 182, 'https://': 18, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7341086', 'n_tokens_mistral': 3164, 'n_tokens_neox': 2992, 'n_words': 508}