<commit_before>---
lines: 9
---
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Calligraphy Guidelines</title>
  <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  <header class="ui no-print">
    <form id="form" method="GET">
      <label for="nib" title="The size of the nib, in millimeters">
        nib
        <select name="nib" id="nib">
          <option>1.5</option>
          <option selected="selected">2.4</option>
          <option>2.5</option>
          <option>3.8</option>
          <option>6.0</option>
        </select>
      </label>
      <label for="x-height" title="In nib widths">
        x-height
        <select name="x" id="x-height">
          <option>3</option>
          <option>4</option>
          <option selected="selected">5</option>
          <option>6</option>
        </select>
      </label>

      <label for="cap" title="In nib widths">
        cap height
        <select name="cap" id="cap">
          <option>6</option>
          <option selected="selected">7</option>
        </select>
      </label>

      <label for="spacing" title="In nib widths">
        spacing height
        <input type="number" name="spacing" value=2 id="spacing">
      </label>

      <label for="lines">lines</label>
      <input type="number" name="lines" value="{{ page.lines }}" id="lines">

      <label for="gutter" title="In pixels">
        gutter
        <input type="number" name="gutter" value=35 id="gutter">
      </label>
    </form>
  </header>
  <div id="paper">
    {% for _ in (1..page.lines) %}
      <p></p>
    {% endfor %}
  </div>

  <script>
    var $form = $('#form');
    var $paper = $('#paper');
    var $body = $(document.body);

    function update() {
      $paper.prop('class',
        $form.serialize()
        .replace(/=/g, '-')
        .replace(/\./g, '_')
        .replace(/&/g, ' '));

      var count = parseInt(document.getElementById('lines').value, 10);
      var spacing = parseFloat(document.getElementById('spacing').value);

      // Throw everything away!
      $paper.empty();
      for (var i = 0; i < count; i++) {
        $('<p/>').css({
          marginBottom: 'calc(' + spacing + 'em - 1px)'
        }).appendTo($paper);
      }

      var gutter = parseInt(document.getElementById('gutter').value, 10);
      $body.css('padding', gutter + 'px ' + gutter + 'px 0');
    }

    $('select, input').on('change', update);
    update();
  </script>

</body>
</html>
<commit_msg>Add ability to bookmark guides<commit_after>---
lines: 9
---
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Calligraphy Guidelines</title>
  <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  <header class="ui no-print">
    <form id="form" method="GET">
      <label for="nib" title="The size of the nib, in millimeters">
        nib
        <select name="nib" id="nib">
          <option>1.5</option>
          <option selected="selected">2.4</option>
          <option>2.5</option>
          <option>3.8</option>
          <option>6.0</option>
        </select>
      </label>
      <label for="x-height" title="In nib widths">
        x-height
        <select name="x" id="x-height">
          <option>3</option>
          <option>4</option>
          <option selected="selected">5</option>
          <option>6</option>
        </select>
      </label>

      <label for="cap" title="In nib widths">
        cap height
        <select name="cap" id="cap">
          <option>6</option>
          <option selected="selected">7</option>
        </select>
      </label>

      <label for="spacing" title="In nib widths">
        spacing height
        <input type="number" name="spacing" value=2 id="spacing">
      </label>

      <label for="lines">lines</label>
      <input type="number" name="lines" value="{{ page.lines }}" id="lines">

      <label for="gutter" title="In pixels">
        gutter
        <input type="number" name="gutter" value=35 id="gutter">
      </label>
    </form>
  </header>
  <div id="paper">
    {% for _ in (1..page.lines) %}
      <p></p>
    {% endfor %}
  </div>

  <script>
    var $form = $('#form');
    var $paper = $('#paper');
    var $body = $(document.body);

    function update() {
      const formDataString = $form.serialize()
      // Don't use the history api because each change isn't a state we want to store
      document.location.hash = formDataString
      $paper.prop('class',
        formDataString
        .replace(/=/g, '-')
        .replace(/\./g, '_')
        .replace(/&/g, ' '));

      var count = parseInt(document.getElementById('lines').value, 10);
      var spacing = parseFloat(document.getElementById('spacing').value);

      // Throw everything away!
      $paper.empty();
      for (var i = 0; i < count; i++) {
        $('<p/>').css({
          marginBottom: `calc(${spacing}em - 1px)`
        }).appendTo($paper);
      }

      var gutter = parseInt(document.getElementById('gutter').value, 10);
      $body.css('padding', gutter + 'px ' + gutter + 'px 0');
    }

    document.location.hash.substr(1).split('&')
      .map((x) => x.split('='))
      .forEach((x) =>
        $form.find(`[name=${x[0]}]`).val(x[1])
      )

    $('select, input').on('change', update);
    update();
  </script>

</body>
</html>

{'fraction_non_alphanumeric': 0.1987295825771325, 'fraction_numerical': 0.012159709618874774, 'mean_word_length': 2.307923169267707, 'pattern_counts': {'":': 0, '<': 139, '<?xml version=': 0, '>': 139, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6043272', 'n_tokens_mistral': 1862, 'n_tokens_neox': 1766, 'n_words': 385}