<commit_before><!DOCTYPE html>
<html>
  <head>
    <title>RE:DOM</title>
    <style>
      body {
        font-family: 'Work Sans', sans-serif;
        font-size: .875rem;
        background-color: #f5f5f5;
        color: #222;
      }
      .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        max-height: 100%;
      }
      a {
        color: #555;
      }
      a:not(:hover) {
        text-decoration: none;
      }
      code {
        font-family: Source Code Pro, monospace;
        font-size: .75rem;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
        color: #444;
        text-align: left;
        display: block;
        padding: 1rem;
      }
      pre {
        font: inherit;
        margin: 0;
        padding: 0;
      }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600|Source+Code+Pro" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <img src="logo.svg">
      <p>Make DOM great again!</p>
      <code>
        <pre>import { el, text, mount } from 'redom';
import { children, props, events } from 'redom';

const form = el('form');
const input = el('input');
const button = el('button');

const login = form(
  children(el => [
    el.email = input(props({ type: 'email' })),
    el.pass = input(props({ type: 'pass' })),
    el.submit = button(text('Sign in'))
  ]),
  events({
    onsubmit (el, e) {
      e.preventDefault();

      console.log(el.email.value, el.pass.value);
    }
  })
);</pre>
      </code>
      <p>
        <a href="https://github.com/pakastin/redom">Github</a><br>
        <a href="https://pakastin.github.io/redom/redom.js">Development</a><br>
        <a href="https://pakastin.github.io/redom/redom.min.js">Production</a>
      </p>
    </div>
  </body>
</html><commit_msg>updated the site<commit_after><!DOCTYPE html>
<html>
  <head>
    <title>RE:DOM</title>
    <style>
      *, *:before, *:after {
        box-sizing: inherit;
      }
      body {
        font-family: 'Work Sans', sans-serif;
        font-size: .875rem;
        background-color: #f5f5f5;
        color: #222;
        box-sizing: border-box;
      }
      .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        max-height: 100%;
        padding: 3rem;
      }
      a {
        color: #555;
        cursor: pointer;
      }
      a:not(:hover) {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      code {
        font-family: Source Code Pro, monospace;
        font-size: .75rem;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
        color: #444;
        text-align: left;
        display: block;
        margin: 1rem;
        padding: 1rem;
      }
      pre {
        font: inherit;
        margin: 0;
        padding: 0;
      }
      .hidden {
        display: none;
      }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600|Source+Code+Pro" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <img src="logo.svg">
      <p>Make DOM great again!</p>
      <code>
        <pre>import { el, text, mount } from 'redom';
import { children, props, events } from 'redom';

// Define element tags

const form = el('form');
const input = el('input');
const button = el('button');

// Define component

const login = form(
  children(el => [
    el.email = input(props({ type: 'email' })),
    el.pass = input(props({ type: 'pass' })),
    el.submit = button(text('Sign in'))
  ]),
  events({
    onsubmit (el, e) {
      e.preventDefault();

      console.log(el.email.value, el.pass.value);
    }
  })
);

// Mount to DOM

mount(document.body, login);</pre>
      </code>
      <code class="hidden">
        <pre>import { el, list, mount } from 'redom';

// Define element tags

const table = el('table');
const tbody = el('tbody');
const tr = el('tr');
const td = el('td');

// Define components

const cell = (data) => td(
  update((el, data) => {
    el.textContent = data;
  })
)

const row = (data) => tr(
  children(el => [
    el.cols = list(el, cell)
  ]),
  update((el, data) => {
    el.cols.update(data)
  })
);

// Init the app

const app = table(
  children(el => [
    el.rows = list(tbody(), row)
  ]),
  update((el, data) => {
    el.rows.update(data.tbody)
  })
)

// Mount to DOM

mount(document.body, app);

// update app

app.update({
  tbody: [
    [ 1, 2, 3 ]
  ]
});</pre>
      </code>
      <p>
        <a onclick="toggleCode()">Another example</a>
      </p>
      <p style="margin-bottom: 3rem;">
        <a href="https://github.com/pakastin/redom">Github</a><br>
        <a href="https://pakastin.github.io/redom/redom.js">Development</a><br>
        <a href="https://pakastin.github.io/redom/redom.min.js">Production</a>
      </p>
    </div>
    <script>
      function toggleCode () {
        var visibleCode = document.querySelector('code:not(.hidden)');
        var hiddenCode = document.querySelector('code.hidden');

        visibleCode.classList.add('hidden');
        hiddenCode.classList.remove('hidden');
      }
    </script>
  </body>
</html>
{'fraction_non_alphanumeric': 0.17583239805462028, 'fraction_numerical': 0.017957351290684626, 'mean_word_length': 2.0676993689041883, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 84, 'https://': 8, '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': '1016185', 'n_tokens_mistral': 1943, 'n_tokens_neox': 1839, 'n_words': 400}