This is an automated email from the ASF dual-hosted git repository.

gerben pushed a commit to branch asf-site
in repository 
https://gitbox.apache.org/repos/asf/incubator-annotator-website.git

commit fce80f95fa745dd6abe3b4ec0f37904fcb2cf1eb
Author: Gerben <[email protected]>
AuthorDate: Sun May 16 23:29:10 2021 +0200

    Update website
---
 content/docs/api/index.html                        | 117 ++++++++++-------
 content/docs/api/interfaces/selector.chunk.html    | 139 ++++++++++++---------
 content/docs/api/interfaces/selector.chunker.html  | 139 ++++++++++++---------
 .../docs/api/interfaces/selector.chunkrange.html   | 139 ++++++++++++---------
 .../docs/api/interfaces/selector.cssselector.html  | 139 ++++++++++++---------
 .../selector.describetextquoteoptions.html         | 139 ++++++++++++---------
 content/docs/api/interfaces/selector.matcher.html  | 139 ++++++++++++---------
 .../api/interfaces/selector.rangeselector.html     | 139 ++++++++++++---------
 .../docs/api/interfaces/selector.selector-1.html   | 139 ++++++++++++---------
 .../interfaces/selector.textpositionselector.html  | 139 ++++++++++++---------
 .../api/interfaces/selector.textquoteselector.html | 139 ++++++++++++---------
 content/docs/api/modules/dom.html                  | 133 ++++++++++++--------
 content/docs/api/modules/selector.html             | 133 ++++++++++++--------
 content/docs/{ => develop}/index.html              |  90 +++++++++----
 content/docs/getting-started/index.html            | 122 +++++++++++++++---
 content/docs/index.html                            | 128 +++++++++++++++----
 content/index.html                                 |  16 +--
 17 files changed, 1349 insertions(+), 780 deletions(-)

diff --git a/content/docs/api/index.html b/content/docs/api/index.html
index 6767ede..de3e77f 100644
--- a/content/docs/api/index.html
+++ b/content/docs/api/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="assets/js/search.js" id="search-script"></script>
+       <script defer src="assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,54 +35,73 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="assets/css/main.css">
-       <script async src="assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="assets/js/search.json" 
data-base=".">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="assets/js/search.json" data-base=".">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <h1>apache-annotator</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <h1>apache-annotator</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel-group 
tsd-index-group">
@@ -111,8 +139,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.chunk.html 
b/content/docs/api/interfaces/selector.chunk.html
index 2900760..3b57fee 100644
--- a/content/docs/api/interfaces/selector.chunk.html
+++ b/content/docs/api/interfaces/selector.chunk.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a href="selector.chunk.html">Chunk</a>
-                       </li>
-               </ul>
-               <h1>Interface Chunk&lt;TData&gt;</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a href="selector.chunk.html">Chunk</a>
+                               </li>
+                       </ul>
+                       <h1>Interface Chunk&lt;TData&gt;</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-comment">
@@ -261,8 +289,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.chunker.html 
b/content/docs/api/interfaces/selector.chunker.html
index 4a48ca0..c841861 100644
--- a/content/docs/api/interfaces/selector.chunker.html
+++ b/content/docs/api/interfaces/selector.chunker.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a href="selector.chunker.html">Chunker</a>
-                       </li>
-               </ul>
-               <h1>Interface Chunker&lt;TChunk&gt;</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a 
href="selector.chunker.html">Chunker</a>
+                               </li>
+                       </ul>
+                       <h1>Interface Chunker&lt;TChunk&gt;</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-comment">
@@ -326,8 +354,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.chunkrange.html 
b/content/docs/api/interfaces/selector.chunkrange.html
index e577e68..04bb16d 100644
--- a/content/docs/api/interfaces/selector.chunkrange.html
+++ b/content/docs/api/interfaces/selector.chunkrange.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a 
href="selector.chunkrange.html">ChunkRange</a>
-                       </li>
-               </ul>
-               <h1>Interface ChunkRange&lt;TChunk&gt;</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a 
href="selector.chunkrange.html">ChunkRange</a>
+                               </li>
+                       </ul>
+                       <h1>Interface ChunkRange&lt;TChunk&gt;</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-comment">
@@ -250,8 +278,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.cssselector.html 
b/content/docs/api/interfaces/selector.cssselector.html
index c740788..486b777 100644
--- a/content/docs/api/interfaces/selector.cssselector.html
+++ b/content/docs/api/interfaces/selector.cssselector.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a 
href="selector.cssselector.html">CssSelector</a>
-                       </li>
-               </ul>
-               <h1>Interface CssSelector</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a 
href="selector.cssselector.html">CssSelector</a>
+                               </li>
+                       </ul>
+                       <h1>Interface CssSelector</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-comment">
@@ -242,8 +270,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.describetextquoteoptions.html 
b/content/docs/api/interfaces/selector.describetextquoteoptions.html
index a9ed51f..0cb86ac 100644
--- a/content/docs/api/interfaces/selector.describetextquoteoptions.html
+++ b/content/docs/api/interfaces/selector.describetextquoteoptions.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a 
href="selector.describetextquoteoptions.html">DescribeTextQuoteOptions</a>
-                       </li>
-               </ul>
-               <h1>Interface DescribeTextQuoteOptions</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a 
href="selector.describetextquoteoptions.html">DescribeTextQuoteOptions</a>
+                               </li>
+                       </ul>
+                       <h1>Interface DescribeTextQuoteOptions</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-hierarchy">
@@ -239,8 +267,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.matcher.html 
b/content/docs/api/interfaces/selector.matcher.html
index 9d244c8..b30a635 100644
--- a/content/docs/api/interfaces/selector.matcher.html
+++ b/content/docs/api/interfaces/selector.matcher.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a href="selector.matcher.html">Matcher</a>
-                       </li>
-               </ul>
-               <h1>Interface Matcher&lt;TScope, TMatch&gt;</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a 
href="selector.matcher.html">Matcher</a>
+                               </li>
+                       </ul>
+                       <h1>Interface Matcher&lt;TScope, TMatch&gt;</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-comment">
@@ -215,8 +243,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.rangeselector.html 
b/content/docs/api/interfaces/selector.rangeselector.html
index 7d57bbb..ba2cc9a 100644
--- a/content/docs/api/interfaces/selector.rangeselector.html
+++ b/content/docs/api/interfaces/selector.rangeselector.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a 
href="selector.rangeselector.html">RangeSelector</a>
-                       </li>
-               </ul>
-               <h1>Interface RangeSelector</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a 
href="selector.rangeselector.html">RangeSelector</a>
+                               </li>
+                       </ul>
+                       <h1>Interface RangeSelector</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-comment">
@@ -253,8 +281,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.selector-1.html 
b/content/docs/api/interfaces/selector.selector-1.html
index 7b747e9..2e0a77f 100644
--- a/content/docs/api/interfaces/selector.selector-1.html
+++ b/content/docs/api/interfaces/selector.selector-1.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a href="selector.selector-1.html">Selector</a>
-                       </li>
-               </ul>
-               <h1>Interface Selector</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a 
href="selector.selector-1.html">Selector</a>
+                               </li>
+                       </ul>
+                       <h1>Interface Selector</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-comment">
@@ -228,8 +256,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.textpositionselector.html 
b/content/docs/api/interfaces/selector.textpositionselector.html
index 0a02e4a..7530b2e 100644
--- a/content/docs/api/interfaces/selector.textpositionselector.html
+++ b/content/docs/api/interfaces/selector.textpositionselector.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a 
href="selector.textpositionselector.html">TextPositionSelector</a>
-                       </li>
-               </ul>
-               <h1>Interface TextPositionSelector</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a 
href="selector.textpositionselector.html">TextPositionSelector</a>
+                               </li>
+                       </ul>
+                       <h1>Interface TextPositionSelector</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-comment">
@@ -253,8 +281,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/interfaces/selector.textquoteselector.html 
b/content/docs/api/interfaces/selector.textquoteselector.html
index 42cf915..7074dbe 100644
--- a/content/docs/api/interfaces/selector.textquoteselector.html
+++ b/content/docs/api/interfaces/selector.textquoteselector.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,65 +35,84 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="../modules/selector.html">selector</a>
-                       </li>
-                       <li>
-                               <a 
href="selector.textquoteselector.html">TextQuoteSelector</a>
-                       </li>
-               </ul>
-               <h1>Interface TextQuoteSelector</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a 
href="../modules/selector.html">selector</a>
+                               </li>
+                               <li>
+                                       <a 
href="selector.textquoteselector.html">TextQuoteSelector</a>
+                               </li>
+                       </ul>
+                       <h1>Interface TextQuoteSelector</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel tsd-comment">
@@ -264,8 +292,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/modules/dom.html 
b/content/docs/api/modules/dom.html
index dca8c7c..f26abbf 100644
--- a/content/docs/api/modules/dom.html
+++ b/content/docs/api/modules/dom.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,62 +35,81 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="dom.html">dom</a>
-                       </li>
-               </ul>
-               <h1>Module dom</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a href="dom.html">dom</a>
+                               </li>
+                       </ul>
+                       <h1>Module dom</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel-group 
tsd-index-group">
@@ -604,8 +632,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/api/modules/selector.html 
b/content/docs/api/modules/selector.html
index d2fde26..24cee23 100644
--- a/content/docs/api/modules/selector.html
+++ b/content/docs/api/modules/selector.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
 <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -18,6 +18,15 @@
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
+       <link rel="stylesheet" href="../assets/css/main.css">
+       <style>
+      /* Avoid TypeDoc style messing up the page around it. Why oh why did 
scoped CSS die? */
+      .ui.container {
+        padding: unset;
+      }
+    </style>
+       <script async src="../assets/js/search.js" id="search-script"></script>
+       <script defer src="../assets/js/main.js"></script>
        <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
 </head>
 <body>
@@ -26,62 +35,81 @@
                <a class="item" href="/" style="color: rgba(0,0,0,.87);">
                        <img class="ui small image" 
src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
                </a>
-               <div class="right menu">
+               <nav class="right menu">
+                       <a class="item" href="/">Home</a>
                        <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-                       <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-                       <a class="active item" href="/docs/">Docs</a>
-                       <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-               </div>
+                       <a class="active item" href="/docs/">Documentation</a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+                       <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+               </nav>
        </div>
 </div>
 <div class="ui basic segment container">
-       <link rel="stylesheet" href="../assets/css/main.css">
-       <script async src="../assets/js/search.js" id="search-script"></script>
-       <aside>
-               <style>
-      #tsd-search {
-        position: relative;
-      }
-      #tsd-search input {
-        border: 1px solid grey;
-        border-radius: 2px;
-        padding: 0.2em;
-      }
-      #tsd-search .results {
-        z-index: 1;
-        position: absolute;
-      }
-    </style>
-               <div id="tsd-search" data-index="../assets/js/search.json" 
data-base="..">
-                       <div>
-                               <label for="tsd-search-field" class="tsd-widget 
search no-caption">Search</label>
-                               <input id="tsd-search-field" type="text" />
+       <nav class="ui secondary stackable pointing menu" 
style="justify-content: center;">
+               <a href="/docs/" class="item">Overview</a>
+               <a href="/docs/getting-started/" class="item">Getting 
Started</a>
+               <a href="/docs/develop/" class="item">Develop</a>
+               <a href="/docs/api/" class="active item">API reference</a>
+       </nav>
+       <div class="ui basic segment container">
+               <div class="ui stackable grid">
+                       <div class="eight wide column">
+                               <h1>
+                                       API reference
+                               </h1>
+                       </div>
+                       <div class="eight wide column">
+                               <aside>
+                                       <style>
+            #tsd-search {
+              position: relative;
+              text-align: right;
+            }
+            #tsd-search input {
+              border: 1px solid grey;
+              border-radius: 4px;
+              padding: 0.4em;
+            }
+            #tsd-search label,
+            #tsd-search label::before,
+            #tsd-search input {
+              vertical-align: middle;
+            }
+            #tsd-search .results {
+              z-index: 1;
+              position: absolute;
+              box-shadow: 0px 20px 20px #00000066;
+            }
+          </style>
+                                       <div id="tsd-search" 
data-index="../assets/js/search.json" data-base="..">
+                                               <div>
+                                                       <label 
for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+                                                       <input 
id="tsd-search-field" type="text" />
+                                               </div>
+                                               <ul class="results">
+                                                       <li class="state 
loading">Preparing search index...</li>
+                                                       <li class="state 
failure">The search index is not available</li>
+                                               </ul>
+                                       </div>
+                               </aside>
                        </div>
-                       <ul class="results">
-                               <li class="state loading">Preparing search 
index...</li>
-                               <li class="state failure">The search index is 
not available</li>
-                       </ul>
                </div>
-       </aside>
-       <header style="margin: 2em 0;" id="typedoc-title">
-               <style>
-      #typedoc-title h1 {
-        margin-top: 0;
-      }
-    </style>
-               <ul class="tsd-breadcrumb">
-                       <li>
-                               <a href="../index.html">apache-annotator</a>
-                       </li>
-                       <li>
-                               <a href="selector.html">selector</a>
-                       </li>
-               </ul>
-               <h1>Module selector</h1>
-       </header>
-       <main>
+               <header style="margin: 2em 0;" id="typedoc-title">
+                       <style>
+        #typedoc-title h1 {
+          margin-top: 0;
+        }
+      </style>
+                       <ul class="tsd-breadcrumb">
+                               <li>
+                                       <a 
href="../index.html">apache-annotator</a>
+                               </li>
+                               <li>
+                                       <a href="selector.html">selector</a>
+                               </li>
+                       </ul>
+                       <h1>Module selector</h1>
+               </header>
                <div class="row">
                        <div class="col-8 col-content">
                                <section class="tsd-panel-group 
tsd-index-group">
@@ -613,8 +641,7 @@
                                </nav>
                        </div>
                </div>
-       </main>
-       <script src="../assets/js/main.js"></script>
+       </div>
 </div>
 <footer class="ui bottom attached segment">
        <div class="ui container">
diff --git a/content/docs/index.html b/content/docs/develop/index.html
similarity index 57%
copy from content/docs/index.html
copy to content/docs/develop/index.html
index 73ff931..ee1fca0 100644
--- a/content/docs/index.html
+++ b/content/docs/develop/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -22,6 +22,7 @@
 
     <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
 
+
     <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
   </head>
 
@@ -32,31 +33,78 @@
               <img class="ui small image" src="/images/annotator-logo.svg" 
alt="Apache Annotator (incubating)" />
             </a>
     
-            <div class="right menu">
+            <nav class="right menu">
+              <a class="item" href="/">Home</a>
               <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-              <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-              <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-              <a class="active item" href="/docs/">Docs</a>
-              <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-            </div>
+              <a class="active item" href="/docs/">Documentation</a>
+              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+            </nav>
           </div>
         </div>
     <div class="ui basic segment container">
-              <div class="ui grid">
-        <div class="three wide column">
-          <div class="ui vertical secondary menu">
-            <div class="item"><a href="/docs/getting-started/">Getting 
Started</a></div>
-            <div class="active item"><a href="/docs/">Documentation</a></div>
-          </div>
-        </div>
-        <div class="nine wide column">
-          <p>We're working on some initial documentation for getting started 
with Apache
-Annotator, and to help folks understand how it fits in their projects.</p>
-<p>Stay tuned for more!</p>
+        
+<nav class="ui secondary stackable pointing menu" style="justify-content: 
center;">
+  <a href="/docs/" class="item">Overview</a>
+  <a href="/docs/getting-started/" class="item">Getting Started</a>
+  <a href="/docs/develop/" class="active item">Develop</a>
+  <a href="/docs/api/" class="item">API reference</a>
+</nav>
 
-        </div>
-      </div>
+<main class="ui basic segment container">
+  <h1 style="margin-bottom: 2rem">Develop Apache Annotator</h1>
+  <div class="ui mobile reversed stackable grid">
+    <div class="twelve wide column">
+      <h2 id="install-from-source">Install from source</h2>
+<p>This project’s source code is available directly <a 
href="https://gitbox.apache.org/repos/asf?p=incubator-annotator.git";>from the 
ASF</a> or <a href="https://github.com/apache/incubator-annotator";>via 
GitHub</a>.</p>
+<h3 id="requirements">Requirements</h3>
+<p>If you’d like to code on the project, you will need the following:</p>
+<ul>
+<li><a href="https://git-scm.com/";>git</a></li>
+<li><a href="https://nodejs.org";>node</a> version ^12.20 || ^14.15 || 
^15.4</li>
+<li><a href="https://www.yarnpkg.com/";>yarn</a> version ^1.5</li>
+</ul>
+<h3 id="install">Install</h3>
+<p>To retrieve the code using git:</p>
+<pre><code>$ git clone 
https://gitbox.apache.org/repos/asf/incubator-annotator.git apache-annotator
+</code></pre>
+<p>Then install dependencies using yarn:</p>
+<pre><code class="language-sh">$ cd apache-annotator
+$ yarn install
+</code></pre>
+<h2 id="build">Build</h2>
+<p>To compile (‘transpile’) the code:</p>
+<pre><code class="language-sh">$ yarn build
+</code></pre>
+<p>For each module, the TypeScript source code is in 
<code>packages/…/src</code> and the Javascript is output in 
<code>packages/…/lib</code>.</p>
+<p>To use your local build of the code in an application that depends on 
annotator, have a look at the <a href="https://yarnpkg.com/cli/link";><code>yarn 
link</code></a> or <a 
href="https://docs.npmjs.com/cli/v7/commands/npm-link";><code>npm 
link</code></a> command.</p>
+<h2 id="play">Play</h2>
+<p>To run a webserver running <a href="https://annotator.apache.org/demo/";>the 
demo</a>:</p>
+<pre><code>$ yarn start
+</code></pre>
+<p>Now open <code>http://localhost:8080/</code> (or whichever address the 
command prints) in your web browser to play with the demo. The server 
continuously rebuilds and hot-reloads to the source code after any edits, so 
you can directly try out any changes you make to the features it 
demonstrates.</p>
+<h2 id="run-tests">Run tests</h2>
+<p>This runs the tests for all packages and reports their code coverage:</p>
+<pre><code class="language-sh">$ yarn test
+</code></pre>
+
+    </div>
+    <aside class="ui four wide column">
+      <style>
+        .toc ol {
+          list-style-type: none;
+          padding-left: 1em;
+        }
+        .toc ol li {
+          margin: 0.25em 0;
+        }
+      </style>
+      <h1 class="ui small dividing header" style="margin: 0;">Contents</h1>
+      <nav class="toc">
+        <ol><li><a href="#install-from-source">Install from 
source</a><ol><li><a href="#requirements">Requirements</a></li><li><a 
href="#install">Install</a></li></ol></li><li><a 
href="#build">Build</a></li><li><a href="#play">Play</a></li><li><a 
href="#run-tests">Run tests</a></li></ol></nav>
+    </aside>
+  </div>
+</main>
 
     </div>
         <footer class="ui bottom attached segment">
diff --git a/content/docs/getting-started/index.html 
b/content/docs/getting-started/index.html
index fc5a842..c6e25a3 100644
--- a/content/docs/getting-started/index.html
+++ b/content/docs/getting-started/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -22,6 +22,7 @@
 
     <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
 
+
     <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
   </head>
 
@@ -32,29 +33,112 @@
               <img class="ui small image" src="/images/annotator-logo.svg" 
alt="Apache Annotator (incubating)" />
             </a>
     
-            <div class="right menu">
+            <nav class="right menu">
+              <a class="item" href="/">Home</a>
               <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-              <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-              <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-              <a class="active item" href="/docs/">Docs</a>
-              <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-            </div>
+              <a class="active item" href="/docs/">Documentation</a>
+              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+            </nav>
           </div>
         </div>
     <div class="ui basic segment container">
-              <div class="ui grid">
-        <div class="three wide column">
-          <div class="ui vertical secondary menu">
-            <div class="active item"><a href="/docs/getting-started/">Getting 
Started</a></div>
-            <div class="item"><a href="/docs/">Documentation</a></div>
-          </div>
-        </div>
-        <div class="nine wide column">
-          <p>Please checkout the <a href="/demo/">demo</a> for now, but we'll 
explain it here soon.</p>
+        
+<nav class="ui secondary stackable pointing menu" style="justify-content: 
center;">
+  <a href="/docs/" class="item">Overview</a>
+  <a href="/docs/getting-started/" class="active item">Getting Started</a>
+  <a href="/docs/develop/" class="item">Develop</a>
+  <a href="/docs/api/" class="item">API reference</a>
+</nav>
 
-        </div>
-      </div>
+<main class="ui basic segment container">
+  <h1 style="margin-bottom: 2rem">Getting Started</h1>
+  <div class="ui mobile reversed stackable grid">
+    <div class="twelve wide column">
+      <h2 id="install-via-npm">Install via NPM</h2>
+<p>Currently we only support installation through NPM packages. You will need 
to use a bundler (such as <a href="https://webpack.js.org/";>webpack</a>) to use 
the modules in a web browser.</p>
+<p>The project is made up of multiple modules. Each module is <a 
href="https://www.npmjs.com/org/apache-annotator";>available on the NPM 
registry</a> as individual packages in the <code>@apache-annotator</code> 
scope, and all of them together in the <a 
href="https://www.npmjs.com/package/apache-annotator";><code>apache-annotator</code></a>
 ‘meta-package’. You can install either and then import packages in your code 
as <code>@apache-annotator/package</code> or <code>apache-annotator/package 
[...]
+<p>For example:</p>
+<pre><code class="language-sh">$ yarn add @apache-annotator/dom
+</code></pre>
+<p>…with in your code:</p>
+<pre><code class="language-js">import { highlightRange } from 
'@apache-annotator/dom';
+</code></pre>
+<h2 id="install-from-source">Install from source</h2>
+<p>See <a href="/docs/develop/">Develop</a>.</p>
+<h2 id="usage-example%3A-a-text-quote-highlighter">Usage example: a text quote 
highlighter</h2>
+<p>A typical goal of web annotation is to let users highlight a phrase of text 
in a web page, and perhaps add a note to it. The example code below enables 
this use case.</p>
+<p>First, we define the way to describe the user’s selection as a 
TextQuoteSelector.</p>
+<pre><code class="language-js">import { describeTextQuote } from 
'@apache-annotator/dom';
+
+async function describeCurrentSelection() {
+  const userSelection = window.getSelection()?.getRangeAt(0);
+  if (!userSelection || userSelection.isCollapsed) return;
+  return describeTextQuote(userSelection);
+}
+</code></pre>
+<p>If the user had selected the word <em>“ipsum”</em> in the befamed 
<em>“Lorem ipsum dolor amet …”</em>, the return value of 
describeCurrentSelection() might resolve to this:</p>
+<pre><code>{
+  type: 'TextQuoteSelector',
+  exact: 'ipsum',
+  prefix: 'Lorem ',
+  suffix: ' dolor'
+}
+</code></pre>
+<p>The <em>prefix</em> and <em>suffix</em> attributes are there to know which 
of multiple occurrences of <em>“ipsum”</em> the Selector points to. They will 
include just enough surrounding words to make the selector unambiguous.</p>
+<p>Next, we define roughly the inverse function: given a TextQuoteSelector, we 
highlight the text it points to.</p>
+<pre><code class="language-js">import { createTextQuoteSelectorMatcher, 
highlightRange } from '@apache-annotator/dom';
+
+async function highlightSelectorTarget(textQuoteSelector) {
+  // Search in the whole document
+  const scope = document.createRange();
+  scope.selectNodeContents(document);
+
+  const matches = createTextQuoteSelectorMatcher(textQuoteSelector)(scope);
+  for await (const match of matches) {
+    highlightRange(match);
+  }
+}
+</code></pre>
+<p>As the <a 
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of";><code>for
 await … of</code></a> statement suggests, the matcher does not return just one 
match, but a stream (an async iterable) of matches. This is because it cannot 
be certain that a selector only has a single match (even when it includes a 
prefix &amp; suffix, perhaps the document changed!).</p>
+<p>We could use the functions defined above in many ways; keeping highlighted 
quotes in local storage, or in one’s bookmarks, or sharing them with others, 
and so on. For this example, we keep it simple and highlight each selection 
upon release of the mouse button; and store the selector to make it appear 
again after a page reload.</p>
+<pre><code class="language-js">document.addEventListener('mouseup', async () 
=&gt; {
+  const selector = await describeCurrentSelection();
+  const existingSelectors = JSON.parse(localStorage[document.URL] || '[]');
+  localStorage[document.URL] = JSON.stringify([...existingSelectors, 
selector]);
+  await highlightSelectorTarget(selector);
+});
+
+// Highlight the last selection that was stored, if any.
+async function highlightStoredSelectors() {
+  if (localStorage[document.URL]) {
+    const selectors = JSON.parse(localStorage[document.URL]);
+    for (const selector of selectors) {
+      await highlightSelectorTarget(selector);
+    }
+  }
+}
+highlightStoredSelectors();
+</code></pre>
+<p>To see similar pieces of code in action, have a look at <a 
href="/demo/">the demo</a>.</p>
+
+    </div>
+    <aside class="ui four wide column">
+      <style>
+        .toc ol {
+          list-style-type: none;
+          padding-left: 1em;
+        }
+        .toc ol li {
+          margin: 0.25em 0;
+        }
+      </style>
+      <h1 class="ui small dividing header" style="margin: 0;">Contents</h1>
+      <nav class="toc">
+        <ol><li><a href="#install-via-npm">Install via NPM</a></li><li><a 
href="#install-from-source">Install from source</a></li><li><a 
href="#usage-example%3A-a-text-quote-highlighter">Usage example: a text quote 
highlighter</a></li></ol></nav>
+    </aside>
+  </div>
+</main>
 
     </div>
         <footer class="ui bottom attached segment">
diff --git a/content/docs/index.html b/content/docs/index.html
index 73ff931..9fcb7b6 100644
--- a/content/docs/index.html
+++ b/content/docs/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -22,6 +22,7 @@
 
     <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
 
+
     <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
   </head>
 
@@ -32,31 +33,116 @@
               <img class="ui small image" src="/images/annotator-logo.svg" 
alt="Apache Annotator (incubating)" />
             </a>
     
-            <div class="right menu">
+            <nav class="right menu">
+              <a class="item" href="/">Home</a>
               <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-              <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-              <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-              <a class="active item" href="/docs/">Docs</a>
-              <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-            </div>
+              <a class="active item" href="/docs/">Documentation</a>
+              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+            </nav>
           </div>
         </div>
     <div class="ui basic segment container">
-              <div class="ui grid">
-        <div class="three wide column">
-          <div class="ui vertical secondary menu">
-            <div class="item"><a href="/docs/getting-started/">Getting 
Started</a></div>
-            <div class="active item"><a href="/docs/">Documentation</a></div>
-          </div>
-        </div>
-        <div class="nine wide column">
-          <p>We're working on some initial documentation for getting started 
with Apache
-Annotator, and to help folks understand how it fits in their projects.</p>
-<p>Stay tuned for more!</p>
+        
+<nav class="ui secondary stackable pointing menu" style="justify-content: 
center;">
+  <a href="/docs/" class="active item">Overview</a>
+  <a href="/docs/getting-started/" class="item">Getting Started</a>
+  <a href="/docs/develop/" class="item">Develop</a>
+  <a href="/docs/api/" class="item">API reference</a>
+</nav>
 
-        </div>
-      </div>
+<main class="ui basic segment container">
+  <h1 style="margin-bottom: 2rem">Overview</h1>
+  <div class="ui mobile reversed stackable grid">
+    <div class="twelve wide column">
+      <p>Apache Annotator provides software modules to facilitate annotation 
tools in web browser environments. For example, it could be used in web-based 
document viewers or browser extensions that let users highlight phrases and 
place virtual sticky notes on the pages they visit.</p>
+<p>The modules are written in <a 
href="https://www.typescriptlang.org/";>TypeScript</a>, and distributed as 
Javascript/ECMAScript modules <a 
href="https://www.npmjs.com/org/apache-annotator";>on NPM</a>. Read further for 
a high-level description of the code functionality, or <a 
href="/docs/getting-started/">get started</a> with it directly!</p>
+<h2 id="what-is-in-the-box">What is in the box</h2>
+<h3 id="selector-tools">Selector tools</h3>
+<p>The main functionality Apache Annotator offers is to map a <a 
href="https://www.w3.org/TR/2017/REC-annotation-model-20170223/#selector";>Web 
Annotation Selector</a> to the segment of a document it corresponds to, 
sometimes called ‘anchoring’ a Selector; and, vice versa, to create a Selector 
that describes a given selection in the document precisely and unambiguously, 
such that other Web Annotation software knows exactly where it points to. The 
purpose of Selectors is to point at any pa [...]
+<p>The <a href="https://www.w3.org/TR/annotation-model";>W3C Web Annotation 
Data Model</a> outlines a number of different selectors types, to accomodate 
various use case on different types of documents and selections (e.g. an 
annotation may target a phrase of text, or a region within an image). The table 
below shows the full list of defined types and the implementation status of 
each.</p>
+<table>
+<thead>
+<tr>
+<th>Selector</th>
+<th>Description</th>
+<th>Implemented?</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><a 
href="https://www.w3.org/TR/annotation-model/#fragment-selector";>Fragment</a></td>
+<td>Uses the fragment part of an IRI defined by the representation’s media 
type.</td>
+<td>No</td>
+</tr>
+<tr>
+<td><a href="https://www.w3.org/TR/annotation-model/#css-selector";>CSS</a></td>
+<td>CSS Selectors allow for a wide variety of well supported ways to describe 
the path to an element in a web page.</td>
+<td><a 
href="/docs/api/modules/dom.html#createcssselectormatcher">Partly</a></td>
+</tr>
+<tr>
+<td><a 
href="https://www.w3.org/TR/annotation-model/#xpath-selector";>XPath</a></td>
+<td>Implements an XPath based selection.</td>
+<td>No</td>
+</tr>
+<tr>
+<td><a href="https://www.w3.org/TR/annotation-model/#text-quote-selector";>Text 
Quote</a></td>
+<td>This Selector describes a range of text, including some of the text 
immediately before (a prefix) and after (a suffix) it to distinguish between 
multiple copies of the same sequence of characters.</td>
+<td>Yes, both <a href="/docs/api/modules/dom.html#describetextquote">for 
DOM</a> and <a 
href="/docs/api/modules/selector.html#textquoteselectormatcher">generic</a></td>
+</tr>
+<tr>
+<td><a 
href="https://www.w3.org/TR/annotation-model/#text-position-selector";>Text 
Position</a></td>
+<td>This Selector describes a range of text by recording the start and end 
positions of the selection in the stream.</td>
+<td>Yes, both <a href="/docs/api/modules/dom.html#describetextposition">for 
DOM</a> and <a 
href="/docs/api/modules/selector.html#textpositionselectormatcher">generic</a></td>
+</tr>
+<tr>
+<td><a 
href="https://www.w3.org/TR/annotation-model/#data-position-selector";>Data 
Position</a></td>
+<td>Similar to the Text Position Selector, the Data Position Selector uses the 
same properties but works at the byte in bitstream level rather than the 
character in text level.</td>
+<td>No</td>
+</tr>
+<tr>
+<td><a href="https://www.w3.org/TR/annotation-model/#svg-selector";>SVG</a></td>
+<td>An SvgSelector defines an area through the use of the Scalable Vector 
Graphics standard.</td>
+<td>No</td>
+</tr>
+<tr>
+<td><a 
href="https://www.w3.org/TR/annotation-model/#range-selector";>Range</a></td>
+<td>A Range Selector can be used to identify the beginning and the end of the 
selection by using other Selectors.</td>
+<td>Yes, <a 
href="/docs/api/modules/dom.html#makecreaterangeselectormatcher">for 
DOM</a></td>
+</tr>
+<tr>
+<td><a 
href="https://www.w3.org/TR/annotation-model/#refinement-of-selection";>Refinement</a></td>
+<td>Select a part of a selection, rather than as a selection of the complete 
resource.</td>
+<td><a href="/docs/api/modules/selector.html#makerefinable">Yes</a></td>
+</tr>
+</tbody>
+</table>
+<h3 id="web-annotation-json-validator">Web Annotation JSON validator</h3>
+<p>The source code also includes a script for validating Web Annotation Data 
Model JSON documents against the data model schema. Having <a 
href="/docs/develop/#install-from-source">installed from source</a>, one can 
run:</p>
+<pre><code class="language-sh">$ yarn validate --url 
https://raw.githubusercontent.com/w3c/web-annotation-tests/master/tools/samples/correct/anno1.json
+</code></pre>
+<p>With the <code>--url</code> option you can pass in a URL or a local path to 
a JSON file.</p>
+<p>See some <a 
href="https://github.com/w3c/web-annotation-tests/tree/master/tools/samples";>example
 JSON files</a> from the W3C. Note that this validator only tests the data 
model is followed, and not e.g. whether its target actually exists.</p>
+<h2 id="what-apache-annotator-it-not">What Apache Annotator it not</h2>
+<p>Apache Annotator is <strong>not an all-in-one annotation tool</strong>; 
rather, it <em>helps others create</em> annotation tools. It does not have 
opinions regarding in which database on which computer annotations are stored, 
nor how they are made, exchanged or displayed. Those questions are considered 
application-specific and left to the developer. Our goal is that the developer 
can focus on exactly those questions, and forget about issues that are common 
among annotation tools: find [...]
+
+    </div>
+    <aside class="ui four wide column">
+      <style>
+        .toc ol {
+          list-style-type: none;
+          padding-left: 1em;
+        }
+        .toc ol li {
+          margin: 0.25em 0;
+        }
+      </style>
+      <h1 class="ui small dividing header" style="margin: 0;">Contents</h1>
+      <nav class="toc">
+        <ol><li><a href="#what-is-in-the-box">What is in the box</a><ol><li><a 
href="#selector-tools">Selector tools</a></li><li><a 
href="#web-annotation-json-validator">Web Annotation JSON 
validator</a></li></ol></li><li><a href="#what-apache-annotator-it-not">What 
Apache Annotator it not</a></li></ol></nav>
+    </aside>
+  </div>
+</main>
 
     </div>
         <footer class="ui bottom attached segment">
diff --git a/content/index.html b/content/index.html
index d0730d9..4c48de0 100644
--- a/content/index.html
+++ b/content/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#";>
+<html prefix="og: http://ogp.me/ns#"; class="default">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -22,6 +22,7 @@
 
     <link rel="alternate" title="DOAP" href="doap.rdf" 
type="application/rdf+xml" />
 
+
     <link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
   </head>
 
@@ -32,14 +33,13 @@
               <img class="ui small image" src="/images/annotator-logo.svg" 
alt="Apache Annotator (incubating)" />
             </a>
     
-            <div class="right menu">
+            <nav class="right menu">
+              <a class="item" href="/">Home</a>
               <a class="item" href="/demo/"><span class="ui positive 
button">Demo!</span></a>
-              <a class="item" rel="external" 
href="https://www.npmjs.com/package/apache-annotator";>NPM</a>
-              <a class="item" rel="external" 
href="https://github.com/apache?q=annotator#org-repositories";>Code</a>
-              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issues</a>
-              <a class="item" href="/docs/">Docs</a>
-              <a class="item" rel="external" 
href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/";>Mailing
 List</a>
-            </div>
+              <a class="item" href="/docs/">Documentation</a>
+              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator";>Code&nbsp;<i class="small 
external icon"></i></a>
+              <a class="item" rel="external" 
href="https://github.com/apache/incubator-annotator/issues";>Issue 
tracker&nbsp;<i class="small external icon"></i></a>
+            </nav>
           </div>
         </div>
     <div class="ui basic segment container">

Reply via email to