Asset improvements (#297)

css/elements.css

@@ -331,18 +331,12 @@ h1.shortname {
 h1.version {
   color: #f60;
   font-size: 1.5em;
-  margin: 0;
 }
 
 h1.title {
-  margin-top: 0;
   color: #f60;
 }
 
-h1.first {
-  margin-top: 0;
-}
-
 h1,
 h2,
 h3,

src/Menu.ts

@@ -58,7 +58,9 @@ export default class Menu {
     const biblioContainer = this.spec.doc.createElement('script');
     biblioContainer.setAttribute('type', 'application/json');
     biblioContainer.id = 'menu-search-biblio';
-    biblioContainer.textContent = JSON.stringify(this.spec.biblio);
+    biblioContainer.textContent = JSON.stringify(this.spec.biblio, (k, v) =>
+      ['title', 'namespace', 'location'].includes(k) ? undefined : v
+    );
     this.spec.doc.head.appendChild(biblioContainer);
   }
 }

src/Spec.ts

@@ -456,7 +456,6 @@ export default class Spec {
 
     this.highlightCode();
     this.setCharset();
-    this.setFirstH1Class();
     this.buildSpecWrapper();
 
     if (this.opts.toc) {
@@ -573,18 +572,10 @@ export default class Spec {
 
     if (this.opts.assets === 'none') return;
 
-    // back-compat: if we already have a link to this script or css, bail out
-    let skipJs = false,
-      skipCss = false,
-      outDir: string;
-
-    if (this.opts.outfile) {
-      outDir = path.dirname(this.opts.outfile);
-    } else {
-      outDir = process.cwd();
-    }
+    let outDir = this.opts.outfile ? path.dirname(this.opts.outfile) : process.cwd();
 
     if (this.opts.jsOut) {
+      let skipJs = false;
       const scripts = this.doc.querySelectorAll('script');
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
@@ -594,9 +585,21 @@ export default class Spec {
           skipJs = true;
         }
       }
+      if (!skipJs) {
+        const script = this.doc.createElement('script');
+        script.src = path.relative(outDir, this.opts.jsOut);
+        script.setAttribute('defer', '');
+        this.doc.head.appendChild(script);
+      }
+    } else {
+      this.log('Inlining JavaScript assets...');
+      const script = this.doc.createElement('script');
+      script.textContent = jsContents;
+      this.doc.head.appendChild(script);
     }
 
     if (this.opts.cssOut) {
+      let skipCss = false;
       const links = this.doc.querySelectorAll('link[rel=stylesheet]');
       for (let i = 0; i < links.length; i++) {
         const link = links[i];
@@ -606,16 +609,20 @@ export default class Spec {
           skipCss = true;
         }
       }
-    }
-
-    if (!skipJs) {
-      this.log('Inlining JavaScript assets...');
-      const script = this.doc.createElement('script');
-      script.textContent = jsContents;
-      this.doc.head.appendChild(script);
-    }
-
-    if (!skipCss) {
+      if (!skipCss) {
+        const style = this.doc.createElement('link');
+        style.setAttribute('rel', 'stylesheet');
+        style.setAttribute('href', path.relative(outDir, this.opts.cssOut));
+
+        // insert early so that the document's own stylesheets can override
+        let firstLink = this.doc.head.querySelector('link[rel=stylesheet], style');
+        if (firstLink != null) {
+          this.doc.head.insertBefore(style, firstLink);
+        } else {
+          this.doc.head.appendChild(style);
+        }
+      }
+    } else {
       this.log('Inlining CSS assets...');
       const style = this.doc.createElement('style');
       style.textContent = cssContents;
@@ -735,25 +742,6 @@ export default class Spec {
     }
   }
 
-  // if there is no text between body start and the first H1, the first H1 is given a class of "first"
-  private setFirstH1Class() {
-    const document = this.spec.doc;
-    const walker = document.createTreeWalker(document.body, 1 | 4 /* elements and text nodes */);
-    let node = walker.currentNode;
-    while (node) {
-      if (node.nodeType === 3 && node.textContent!.trim().length > 0) {
-        return;
-      }
-
-      if (walker.currentNode.nodeType === 1 && walker.currentNode.nodeName === 'H1') {
-        (node as HTMLElement).classList.add('first');
-        return;
-      }
-
-      node = walker.nextNode()!;
-    }
-  }
-
   private buildBoilerplate() {
     this.cancellationToken.throwIfCancellationRequested();
     const status = this.opts.status!;
@@ -1325,7 +1313,7 @@ async function walk(walker: TreeWalker, context: Context) {
   context.tagStack.pop();
 }
 
-const jsDependencies = ['sdoMap.js', 'menu.js', 'findLocalReferences.js', 'listNumbers.js'];
+const jsDependencies = ['sdoMap.js', 'menu.js', 'listNumbers.js'];
 async function concatJs() {
   const dependencies = await Promise.all(
     jsDependencies.map(dependency => utils.readFile(path.join(__dirname, '../js/' + dependency)))

test/baselines/reference/algorithm-replacements.html

@@ -2,7 +2,7 @@
 <head><meta charset="utf-8"><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container">
 
 <emu-clause id="test">
-  <h1 class="first"><span class="secnum">1</span> Title</h1>
+  <h1><span class="secnum">1</span> Title</h1>
 
   <p>You can refer to a step in a replacement algorithm before it occurs in text, like step <emu-xref href="#example" id="_ref_0"><a href="#example">2.a.i.2</a></emu-xref>.</p>
 

test/baselines/reference/autolinking.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <head><meta charset="utf-8"><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container">
 <emu-clause id="sec-foo">
-  <h1 class="first"><span class="secnum">1</span> Autolinking</h1>
+  <h1><span class="secnum">1</span> Autolinking</h1>
   <p>Type, type, <emu-xref aoid="Type" id="_ref_0"><a href="https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values">Type</a></emu-xref>(), type()</p>
   <p><emu-xref href="#sec-array-constructor"><a href="https://tc39.es/ecma262/#sec-array-constructor">%Array%</a></emu-xref> and <emu-xref href="#sec-properties-of-the-array-prototype-object"><a href="https://tc39.es/ecma262/#sec-properties-of-the-array-prototype-object">%ArrayPrototype%</a></emu-xref> from ES6 should link (but not %Arrayprototype%).</p>
 

test/baselines/reference/boilerplate-address.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title first">test title!</h1>
+<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title">test title!</h1>
 
 <emu-annex id="sec-copyright-and-software-license">
       <h1><span class="secnum">A</span> Copyright &amp; Software License</h1>

test/baselines/reference/boilerplate-all.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title first">test title!</h1>
+<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title">test title!</h1>
 
 <emu-annex id="sec-copyright-and-software-license">
       <h1><span class="secnum">A</span> Copyright &amp; Software License</h1>

test/baselines/reference/boilerplate-copyright.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title first">test title!</h1>
+<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title">test title!</h1>
 
 <emu-annex id="sec-copyright-and-software-license">
       <h1><span class="secnum">A</span> Copyright &amp; Software License</h1>

test/baselines/reference/boilerplate-license.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title first">test title!</h1>
+<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title">test title!</h1>
 
 <emu-annex id="sec-copyright-and-software-license">
       <h1><span class="secnum">A</span> Copyright &amp; Software License</h1>

test/baselines/reference/clauses.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <head><meta charset="utf-8"><script type="application/json" id="sdo-map">{}</script></head><body class=" oldtoc"><div id="spec-container">
 <div><h2>Table of Contents</h2><ol class="toc"><li><a href="#sec-intro" title="Intro">Intro</a><ol class="toc"><li><a href="#sec-intro2" title="Sub Intro">Sub Intro</a></li></ol></li><li><a href="#sec-clause" title="Clause Foo(a, b)"><span class="secnum">1</span> Clause Foo(<var>a</var>, <var>b</var>)</a><ol class="toc"><li><a href="#Foo" title="Sub Clause"><span class="secnum">1.1</span> Sub Clause</a></li></ol></li><li><a href="#sec-annex" title="Annex"><span class="secnum">A</span> Annex</a><ol class="toc"><li><a href="#sec-annex2" title="Sub-annex"><span class="secnum">A.1</span> Sub-annex</a></li></ol></li></ol></div><emu-intro id="sec-intro">
-  <h1 class="first">Intro</h1>
+  <h1>Intro</h1>
   <emu-intro id="sec-intro2">
     <h1>Sub Intro</h1>
   </emu-intro>

test/baselines/reference/code.html

@@ -2,7 +2,7 @@
 <head><meta charset="utf-8"><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container">
 <link rel="stylesheet" href="css/elements.css">
 <emu-clause id="foo">
-  <h1 class="first"><span class="secnum">1</span> Test Clause</h1>
+  <h1><span class="secnum">1</span> Test Clause</h1>
   <p>Increases indentaion level.</p>
   <pre><code class="lang-javascript hljs">global1.Zone.current; <span class="hljs-comment">// succeeds</span>
 global2.Zone.current; <span class="hljs-comment">// throws: currentRealm = realm1; thisRealm = functionRealm = realm2</span>

test/baselines/reference/copyright.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="version first">Draft 1 / September 26, 2014</h1><h1 class="title">test title!</h1>
+<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="version">Draft 1 / September 26, 2014</h1><h1 class="title">test title!</h1>
 <emu-clause id="sec-clause">
   <h1><span class="secnum">1</span> Test Clause</h1>
 </emu-clause><emu-annex id="sec-copyright-and-software-license">

test/baselines/reference/date.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title first">test title!</h1>
+<head><meta charset="utf-8"><title>test title!</title><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container"><h1 class="title">test title!</h1>
 
 <p>Some body content</p>
 

test/baselines/reference/dfn.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <head><meta charset="utf-8"><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container">
 <emu-intro id="sec-intro">
-  <h1 class="first">Intro</h1>
+  <h1>Intro</h1>
   <p>Forward references to <emu-xref href="#sec-dfn" id="_ref_0"><a href="#sec-dfn">dfn</a></emu-xref> work.</p>
   <p>Also terms from ES6 are auto-linked: <emu-xref href="#sec-lexical-environments"><a href="https://tc39.es/ecma262/#sec-lexical-environments">Lexical Environment</a></emu-xref>, <emu-xref aoid="Completion" id="_ref_1"><a href="https://tc39.es/ecma262/#sec-completion-record-specification-type">Completion</a></emu-xref>, etc.</p>
 </emu-intro>

test/baselines/reference/duplicate-ids.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <head><meta charset="utf-8"><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container">
 <emu-clause id="sec-a">
-  <h1 class="first"><span class="secnum">1</span> A</h1>
+  <h1><span class="secnum">1</span> A</h1>
   <emu-clause id="sec-a">
     <h1><span class="secnum">1.1</span> Sub A</h1>
 

test/baselines/reference/emd-in-grammar.html

@@ -2,7 +2,7 @@
 <head><meta charset="utf-8"><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container">
 
 <emu-clause id="sec-example">
-  <h1 class="first"><span class="secnum">1</span> Example</h1>
+  <h1><span class="secnum">1</span> Example</h1>
   <emu-grammar type="definition"><emu-production name="Foo" type="lexical" id="prod-Foo">
     <emu-nt><a href="#prod-Foo">Foo</a></emu-nt> <emu-geq>::</emu-geq> <emu-rhs a="14eb29da">
         <emu-nt id="_ref_1"><a href="#prod-Bar">Bar</a></emu-nt>

test/baselines/reference/eqn.html

@@ -2,7 +2,7 @@
 <head><meta charset="utf-8"><link rel="stylesheet" href="./css/elements.css">
 <script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container">
 <emu-clause id="sec-example">
-  <h1 class="first"><span class="secnum">1</span> Header</h1>
+  <h1><span class="secnum">1</span> Header</h1>
   <p>Can refer to eqns inside paragraph text via autolinking: <emu-xref aoid="DateValue" id="_ref_0"><a href="#eqn-DateValue">DateValue</a></emu-xref>.</p>
   <emu-alg><ol><li>Return <emu-xref aoid="Value" id="_ref_1"><a href="#sec-example">Value</a></emu-xref>(<var>val</var>);</li></ol></emu-alg>
 

test/baselines/reference/escaping.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <head><meta charset="utf-8"><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container">
 <emu-clause id="blah">
-<h1 class="first"><span class="secnum">1</span> blah</h1>
+<h1><span class="secnum">1</span> blah</h1>
 <p>U+200C (ZERO WIDTH NON-JOINER) is abbreviated "&lt;ZWNJ&gt;"</p>
 <p>&lt;b&gt;also doesn't escape when <emu-val>emd</emu-val> and autolinks to <emu-xref aoid="ReturnIfAbrupt" id="_ref_1"><a href="https://tc39.es/ecma262/#sec-returnifabrupt">ReturnIfAbrupt</a></emu-xref> are present.</p>
 <p>Escpaing inside xref is preserved: <emu-xref href="#blah" id="_ref_0"><a href="#blah">&lt;b&gt;</a></emu-xref>.</p>

test/baselines/reference/imports.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <head><meta charset="utf-8"><script type="application/json" id="sdo-map">{}</script></head><body><div id="spec-container">
 <emu-import href="imports/import1.html"><emu-clause id="Baz" aoid="Baz">
-  <h1 class="first"><span class="secnum">1</span> Header</h1>
+  <h1><span class="secnum">1</span> Header</h1>
   <p>text</p>
   <p><emu-nt>nonterminal</emu-nt> <code>code</code> <emu-val>value</emu-val>.</p>