feat: Add ABNF tools view (#106)

ietf-tools · Aug 7, 2022 · 98889d2 · 98889d2
1 parent 2d2fe7d
commit 98889d2
Show file tree

Hide file tree

Showing 5 changed files with 258 additions and 0 deletions.
diff --git a/www/abnf.html b/www/abnf.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en"> <head>
+    <meta charset="utf-8">
+    <title>IETF Author Tools - ABNF Tools</title>
+    <meta name="description" content="This service allows extract ABNF syntax from a document and parse ABNF syntax using Bill's ABNF Parser (BAP).">
+    <link rel="canonical" href="https://author-tools.ietf.org/">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles/custom.css">
+  </head>
+  <body>
+    <header>
+      <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="/">
+           <img alt="IETF Logo" src="https://www.ietf.org/lib/dt/7.39.0/ietf/images/ietflogo-small-transparent.png">
+          </a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2">
+              <li class="nav-item">
+                <a class="nav-link" href="/">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/iddiff">iddiff</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="/abnf">ABNF Tools</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/doc/">API</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://bib.ietf.org">BibXML</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://authors.ietf.org">Internet-Draft Author Resources</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://www.ietf.org/">IETF</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://datatracker.ietf.org/">Datatracker</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </header>
+    <main>
+      <div class="container">
+        <div class="row">
+          <h1 class="text-center">IETF Author Tools - ABNF Tools</h1>
+        </div>
+        <div class="row">
+          <div>
+            <p>
+              This service uses <a href="https://github.com/ietf-tools/bap">
+              Bill's ABNF Parser (BAP)</a> extract &amp; parse ABNF syntax.
+            </p>
+          </div>
+        </div>
+        <div class="row border rounded">
+          <div>&nbsp;</div>
+          <h5>Extract ABNF</h5>
+          <div>
+            <p>
+              Provide an URL to a text Intertnet-Draft/RFC or Internet-Draft/RFC
+              name. See the About page for <a href="/about.html#allowed-domains">a list of allowed domains</a>.
+            </p>
+          </div>
+          <div>
+            <div>
+              <label class="form-label" for="formInput">Document Name / URL</label>
+              <input class="form-control form-control-lg" type="text" id="formInput" placeholder="RFC 9000 or https://www.ietf.org/archive/id/draft-ietf-wg-example-01.txt" data-bs-toggle2="tooltip" data-bs-placement="bottom" title="Provide an Internet-Draft (ID) / RFC URL or document name. See the About page for a list of allowed domains.">
+            </div>
+          </div>
+          <div>&nbsp;</div>
+          <div class="d-grid gap-2 d-md-flex justify-content-md-center">
+            <button class="btn btn-primary btn-lg flex-grow-1" type="button" value="extract" id="buttonExtract" data-title="Extract ABNF" data-bs-toggle2="tooltip" data-bs-placement="bottom" title="Extract ABNF using BAP aex.">Extract ABNF</button>
+          </div>
+          <div>&nbsp;</div>
+        </div>
+        <div>&nbsp;</div>
+        <div class="row border rounded">
+          <div>&nbsp;</div>
+          <h5>Parse ABNF</h5>
+          <div>
+            <div>
+              <label class="form-label" for="formTextAreaInput">ABNF</label>
+              <textarea class="form-control monospace" id="formTextAreaInput" rows="5" placeholder="ABNF Syntax" data-bs-toggle2="tooltip" data-bs-placement="bottom" title="Provide ABNF syntax"></textarea>
+
+            </div>
+          </div>
+          <div>&nbsp;</div>
+          <div class="d-grid gap-2 d-md-flex justify-content-md-center">
+            <button class="btn btn-primary btn-lg flex-grow-1" type="button" value="parse" id="buttonParse" data-title="Parse ABNF" data-bs-toggle2="tooltip" data-bs-placement="bottom" title="Parse ABNF using BAP.">Parse ABNF</button>
+          </div>
+          <div>&nbsp;</div>
+          <div class="accordion" id="accordionValidation">
+            <div class="accordion-item" id="accordionItemErrors">
+              <h2 class="accordion-header" id="panelsErrorsHeading">
+                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsErrors" aria-expanded="true" aria-controls="panelsErrors">
+                  Errors
+                </button>
+              </h2>
+              <div id="panelsErrors" class="accordion-collapse collapse show" aria-labelledby="panelsErrorsHeading">
+                <div class="accordion-body">
+                  <pre id="preErrors" class="pre-scrollable"></pre>
+                </div>
+              </div>
+            </div>
+            <div class="accordion-item" id="accordionItemAbnf">
+              <h2 class="accordion-header" id="panelsAbnfHeading">
+                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsAbnf" aria-expanded="true" aria-controls="panelsAbnf">
+                  ABNF
+                </button>
+              </h2>
+              <div id="panelsAbnf" class="accordion-collapse collapse show" aria-labelledby="panelsAbnfHeading">
+                <div class="accordion-body">
+                  <pre id="preAbnf" class="pre-scrollable"></pre>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>&nbsp;</div>
+        </div>
+      </div>
+    </main>
+    <footer>
+      <div class="text-center mt-3">
+        <p><small>
+          <a href="/about.html">About</a> |
+          <a href="https://github.com/ietf-tools/ietf-at">Author Tools API (github repository)</a> |
+          <a href="https://github.com/ietf-tools/ietf-at-ui">Author Tools UI (github repository)</a> |
+          <a href="https://www.ietf.org/">IETF</a> |
+          <a href="https://github.com/ietf-tools/ietf-at-ui/blob/main/LICENSE">LICENSE</a> |
+          <a href="/about.html#howto-report-bugs">Report a bug</a>
+        </small></p>
+      </div>
+    </footer>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
+      crossorigin="anonymous"></script>
+    <script src="scripts/abnf.js"></script>
+  </body>
+</html>
diff --git a/www/about.html b/www/about.html
@@ -139,6 +139,13 @@ <h1 class="text-center">About Author Tools</h1>
               <td><span id="spanAasvg"></span></td>
               <td><a href="https://github.com/martinthomson/aasvg/raw/main/LICENSE">Simplified BSD License</a></td>
             </tr>
+            <tr>
+              <th scope="row">
+                <a href="https://github.com/ietf-tools/bap">Bill's ABNF Parser (BAP)</a>
+              </th>
+              <td><span id="spanBap"></span></td>
+              <td>&nbsp;</td>
+            </tr>
           </table>
         </div>
         <div class="row">

diff --git a/www/scripts/abnf.js b/www/scripts/abnf.js
@@ -0,0 +1,97 @@
+const formInput = document.getElementById('formInput');
+const formTextAreaInput = document.getElementById('formTextAreaInput');
+const buttonExtract = document.getElementById('buttonExtract');
+const buttonParse = document.getElementById('buttonParse');
+const accordionItemErrors = document.getElementById('accordionItemErrors');
+const preErrors = document.getElementById('preErrors');
+const accordionItemAbnf = document.getElementById('accordionItemAbnf');
+const preAbnf = document.getElementById('preAbnf');
+
+reset();
+
+// enable Bootstrap/Popper tooltips
+var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle2="tooltip"]'));
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl);
+});
+
+formInput.addEventListener('keydown', submit);
+buttonExtract.addEventListener('click', extract);
+buttonParse.addEventListener('click', parse);
+
+function submit(event) {
+  if (event.key == 'Enter') {
+    event.preventDefault();
+    extract();
+  }
+}
+
+function reset() {
+  resetButtons();
+  accordionItemErrors.style.display = 'none';
+  preErrors.innerHTML = '';
+  accordionItemAbnf.style.display = 'none';
+  preAbnf.innerHTML = '';
+}
+
+function resetButtons() {
+  buttonExtract.disabled = false;
+  buttonExtract.innerText = buttonExtract.dataset.title;
+  buttonParse.disabled = false;
+  buttonParse.innerText = buttonParse.dataset.title;
+}
+
+function disableButtons() {
+  buttonExtract.disabled = true;
+  buttonParse.disabled = true;
+}
+
+function extract() {
+  reset();
+
+  buttonExtract.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>' + buttonExtract.innerHTML;
+  disableButtons();
+
+  url = 'https://author-tools.ietf.org/api/abnf/extract?';
+
+  try {
+    urlInput = new URL(formInput.value);
+    url = url + 'url=' + urlInput.href;
+
+  } catch (_) {
+    url = url + 'doc=' + formInput.value;
+  }
+
+  window.location.href = encodeURI(url);
+}
+
+function parse() {
+  reset();
+
+  buttonParse.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>' + buttonParse.innerHTML;
+  disableButtons();
+
+  apiCall = 'https://author-tools.ietf.org/api/abnf/parse'
+
+  const formData = new FormData();
+  formData.append('input', formTextAreaInput.value);
+
+  const request = new Request(apiCall, {
+    method: 'POST',
+    body: formData
+  });
+
+  fetch(request)
+    .then(function(response) { return response.json(); })
+    .then(function(json) {
+      reset();
+      if (json.errors) {
+        accordionItemErrors.style.display = 'block';
+        preErrors.innerHTML = json.errors;
+      }
+      if (json.abnf) {
+        accordionItemAbnf.style.display = 'block';
+        preAbnf.innerHTML = json.abnf;
+      }
+    });
+}
diff --git a/www/scripts/about.js b/www/scripts/about.js
@@ -22,6 +22,7 @@ fetch(request)
     document.getElementById('spanIddiff').innerHTML = json.versions.iddiff;
     document.getElementById('spanWeasyprint').innerHTML = json.versions.weasyprint;
     document.getElementById('spanAasvg').innerHTML = json.versions.aasvg;
+    document.getElementById('spanBap').innerHTML = json.versions.bap;
   })
   .catch(error => {
       alertError.style.display = 'block';

diff --git a/www/styles/custom.css b/www/styles/custom.css
@@ -39,6 +39,10 @@ a:focus, a:hover {
   color: #271673;
 }
 
+textarea.monospace {
+  font-family: monospace;
+}
+
 .error-message {
   white-space: pre-line;
 }