diff --git a/.github/workflows/doc-search.yaml b/.github/workflows/doc-search.yaml
index 320ddae..fd4104a 100644
--- a/.github/workflows/doc-search.yaml
+++ b/.github/workflows/doc-search.yaml
@@ -13,10 +13,12 @@ jobs:
 
       # https://github.com/ruby/setup-ruby
       - uses: ruby/setup-ruby@v1
+        # working-directory: ./
         with:
           ruby-version: 2.7
           bundler-cache: true
 
       - run: bundle exec jekyll algolia
+        # working-directory: ./
         env:
           ALGOLIA_API_KEY: "${{ secrets.ALGOLIA_API_KEY }}"
diff --git a/_config.yml b/_config.yml
index f6b6e35..c241ff3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,6 +1,16 @@
+# Configuration for the Amethyst development site
+#
+# DO NOT COPY
+#
+# To create your own site with this theme, use the example branch as
+# your clean and minimal starting point:
+# https://github.com/qunitjs/jekyll-theme-amethyst/tree/example
+#
+# -------
+
 # Site settings
 #
-# https://jekyllrb.com/docs/configuration/
+# Docs: https://jekyllrb.com/docs/configuration/
 title: Amethyst Demo
 description: "An amazing website."
 permalink: /:title/
@@ -12,93 +22,60 @@ baseurl: /jekyll-theme-amethyst
 # - https://github.com/jekyll/jekyll/issues/7426
 # - https://github.com/jekyll/jekyll/issues/4268
 # - https://github.com/sindresorhus/gulp-ruby-sass/issues/232
-# Workaround. – https://github.com/github/pages-gem/issues/613
+# – Workaround: https://github.com/github/pages-gem/issues/613
 theme: null
+# Files that will not be converted or published
+exclude:
+  # Exclude repo docs from site output and search index
+  - docs
+  # Avoid the following on GitHub CI:
+  # > Error: could not read file
+  # > vendor/jekyll/lib/site_template/_posts/0000-00-00-welcome-to-jekyll.markdown.erb:
+  # > Invalid date '<%= Time.now.strftime('%Y-%m-%d %H:%M:%S %z') %>':
+  # > Document does not have a valid date in the YAML front matter.
+  - vendor
+
 
 # Theme settings
 #
-# https://github.com/qunitjs/jekyll-theme-amethyst
+# Amethyst theme options are documented at:
+# https://github.com/qunitjs/jekyll-theme-amethyst/blob/main/docs/config.md
+#
 amethyst:
-  # Base URI for "Edit this page" links.
-  # When set, this is combined with the relative path to the Markdown file in the repo.
   edituri_base: https://github.com/qunitjs/jekyll-theme-amethyst/blob/main/
-  # Defaults to "/favicon.svg"
-  favicon:
-  header_logo:
-    src:
-    width:
-    height:
-  # Mastodon account URL (e.g. "https://mastodon.technology/@qunitjs")
-  mastodon:
-  # Twitter.com username (without "@")
-  twitter:
-  # GitHub.com organisation or username
+  release_base: https://github.com/qunitjs/qunit/releases/tag/
   github: qunitjs
-  # Gitter.im room (e.g. "qunitjs/qunit")
   gitter: qunitjs/qunit
-  # Frontend search powered by Algolia
+  # https://github.com/qunitjs/jekyll-theme-amethyst/blob/main/docs/getting-started.md#enable-algolia-search
   algolia:
-    # Key for client-side search queries (required)
     search_only_api_key: f37678e47d7730bbf340e904a81fbbbd
 
-    # Defaults to `algolia.application_id`.
-    application_id:
-
-    # Defaults to "on" in accordance with the terms of the
-    # Community and Free Plan, <https://www.algolia.com/press/?section=brand-guidelines>.
-    # When set to "none", branding is omitted.
-    branding:
 
-    # Which indexes to use as autocomplete source
-    # For example, to support multiple sources:
-    #
-    # ```
-    # sources:
-    #  - index: qunitjs-api
-    #    base: https://api.qunitjs.com
-    #  - index: qunitjs
-    # ```
-    #
-    # Defaults to a single source based on `algolia.index_name`.
-
-# Conversion
+# Conversion settings
+#
 highlighter: rouge
 markdown: kramdown
 kramdown:
   input: GFM
   toc_levels: "1,2"
 
-# Sass
-# https://jekyllrb.com/docs/assets/#sassscss
+
+# Sass settings
+#
+# Docs: https://jekyllrb.com/docs/assets/#sassscss
 sass:
   style: compressed
   sourcemap: never
 
-# Backend search index
-#
-# This applies to the 'jekyll algolia' command.
-# Requires the ALGOLIA_API_KEY secret environment variable.
-# For an example, see <https://github.com/qunitjs/qunitjs.com>.
+
+# Backend search settings
 #
-# See <https://github.com/algolia/jekyll-algolia>.
+# Docs: https://github.com/algolia/jekyll-algolia
 algolia:
   application_id: 4HMKKPGKKN
-  # Which index to submit content to
   index_name: amethyst-demo
   # By default only HTML paragraphs are indexed (and headings, albeit through a different mechanism).
   # * Include list items (similar to paragraphs).
   # * Include tables (index per row for better excerpts).
   # * Include <pre> (typically code examples, omit if it "poisons" results too much).
-  nodes_to_index: 'p,li,tr,pre'
-  # Which markdown pages to ignore
-  files_to_exclude:
-
-# Input files
-exclude:
-    # Exclude repo docs from site output and search index
-    - docs
-    # Avoid the following on GitHub CI:
-    # > Error: could not read file vendor/bundle/ruby/2.7.0/gems/jekyll-3.9.0/lib/site_template/_posts/0000-00-00-welcome-to-jekyll.markdown.erb:
-    # > Invalid date '<%= Time.now.strftime('%Y-%m-%d %H:%M:%S %z') %>':
-    # > Document does not have a valid date in the YAML front matter.
-    - vendor
+  nodes_to_index: "p,li,tr,pre"
diff --git a/_data/sidebar_api.yml b/_data/sidebar_api.yml
new file mode 100644
index 0000000..3ea335b
--- /dev/null
+++ b/_data/sidebar_api.yml
@@ -0,0 +1,13 @@
+- group: foo
+  expand: true
+
+- group: lorem
+
+- type: list
+  title: Other
+  expand: true
+  list:
+    - url: /api/deprecated/
+      title: Deprecated
+    - url: /api/removed/
+      title: Removed
diff --git a/_data/sitenav.yml b/_data/sitenav.yml
index a983925..c1c2ea8 100644
--- a/_data/sitenav.yml
+++ b/_data/sitenav.yml
@@ -4,6 +4,6 @@
     - name: Getting Started
       href: /intro/
 - name: Documentation
-  href: https://api.qunitjs.com
+  href: /api/
 - name: About
   href: /about/
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
new file mode 100644
index 0000000..21bfced
--- /dev/null
+++ b/_includes/sidebar.html
@@ -0,0 +1,77 @@
+{%- comment -%}
+
+Parameters:
+
+* blocks:
+  Key in `site.data` corresponding to a `_data/*.yml` file.
+
+Block data:
+
+* type: [Default: "group"]
+  What type of block to add to the sidebar.
+  - "group" to query a list of pages from a page group.
+  - "list" to specify your own custom list.
+
+* title: [Default: group_page.title or ""]
+  For a "group" block this defaults to the title of the group index page.
+  For a custom "list" block, this is required.
+
+* url: [Default: group_page.url or null]
+  For a "group" block this defaults to the URL of the group index page.
+  If null, the block title will not be linked.
+
+* group:
+  When using a "group" block, the ID of the group to query for.
+
+* list:
+  When using a "list" block, an array of objects with "title"
+  and "url" properties.
+
+* expand: [Default: active]
+  Whether a block should be expanded.
+  - true: Always expanded.
+  - false: Never expanded.
+  - active: Expand when the current page is in the list.
+
+{%- endcomment -%}
+<section class="sidebar">
+{% for block in site.data[include.blocks] -%}
+	{%- assign block_type = block.type | default: "group" -%}
+	{%- assign block_title = block.title -%}
+	{%- assign block_url = block.url -%}
+	{%- assign block_contents = block.list -%}
+	{%- assign block_expand = block.expand -%}
+	{%- if block_expand != true and block_expand != false -%}
+		{%- assign block_expand = "active" -%}
+	{%- endif -%}
+
+	{%- if block_type == "group" -%}
+		{%- assign group_page = site.pages | where: "layout", "group" | where: "group", block.group | first -%}
+		{%- assign block_title = block.title | default: group_page.title | default: block.group -%}
+		{%- assign block_url = block.url | default: group_page.url -%}
+		{%- assign block_contents = site.pages | where: 'groups', block.group | sort_natural: 'title' -%}
+	{%- elsif block_type == "recent" -%}
+		{%- assign block_contents = site.posts | slice: 0, 5 -%}
+	{%- endif -%}
+
+	{%- if block_expand == "active" -%}
+		{%- assign self_in_contents = block_contents | where: 'url', page.url | size -%}
+		{%- if page.url == block_url or self_in_contents > 0 -%}
+			{%- assign block_expand = true -%}
+		{%- else -%}
+			{%- assign block_expand = false -%}
+		{%- endif -%}
+	{%- endif %}
+
+	<h4{% if block_expand %} class="sidebar-title-open"{% endif %}>{% if block_url %}<a href="{{ block_url | relative_url }}">{{ block_title }}</a>{% else %}{{ block_title }}{% endif %}</h4>
+	{%- if block_expand -%}
+	<ul class="sidebar-list">
+	{%- for entry in block_contents %}
+	<li class="sidebar-item{% if page.url == entry.url %} sidebar-item-active{% endif %}">
+		<a href="{{ entry.url | relative_url }}">{{ entry.title }}</a>
+	</li>
+	{%- endfor -%}
+	</ul>
+	{%- endif -%}
+{% endfor %}
+</section>
diff --git a/_includes/version.html b/_includes/version.html
new file mode 100644
index 0000000..24077fb
--- /dev/null
+++ b/_includes/version.html
@@ -0,0 +1,28 @@
+{%- comment -%}
+
+Parameters:
+
+* version:
+  Like "1.0", "2.2", or "unreleased".
+
+* label:
+  Like "version added".
+
+{%- endcomment -%}
+
+{%- comment -%}
+    These releases have original release notes published under a v-prefixed tag.
+{%- endcomment -%}
+{%- assign _old_releases = " v1.9.0 v1.10.0 v1.11.0 v1.12.0 " -%}
+
+{%- assign _full_version = include.version -%}
+{%- assign _old_version = _full_version | prepend: "v" -%}
+{%- if _old_releases contains _old_version -%}
+    {%- assign _full_version = _old_version -%}
+{%- endif -%}
+
+{%- if include.version == "unreleased" -%}
+not yet released
+{%- else -%}
+{{ include.label }}: {% if site.amethyst.release_base %}<a href="{{ site.amethyst.release_base }}{{ _full_version | escape }}">{{ include.version | escape }}</a>{% else %}{{ include.version | escape }}{% endif %}
+{%- endif -%}
diff --git a/_layouts/group.html b/_layouts/group.html
new file mode 100644
index 0000000..6153657
--- /dev/null
+++ b/_layouts/group.html
@@ -0,0 +1,14 @@
+---
+layout: page-api
+---
+{{ content }}
+
+{%- assign pages = site.pages | where: 'groups', page.group | sort_natural: 'title' -%}
+{% for page in pages %}
+<h2 id="{{ page.title | slugify }}"><a href="{{ page.url | relative_url }}">{{ page.title }}</a></h2>
+<p>
+	{%- if page.version_removed %}<strong>REMOVED</strong> {% endif -%}
+	{%- if page.version_removed == nil and page.version_deprecated %}<strong>DEPRECATED</strong> {% endif -%}
+	{{ page.excerpt -}}
+</p>
+{% endfor -%}
diff --git a/_layouts/home.html b/_layouts/home.html
index c67d90f..af378a3 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -20,6 +20,6 @@ <h2 class="hero-description">{{ page.home_description | default: site.descriptio
         {% endif -%}
     </div>
 </section>
-<div class="main wrapper layout-home">
+<div class="main wrapper content layout-home">
     {{ content }}
 </div>
diff --git a/_layouts/page-api.html b/_layouts/page-api.html
new file mode 100644
index 0000000..f08f445
--- /dev/null
+++ b/_layouts/page-api.html
@@ -0,0 +1,32 @@
+---
+layout: wrapper
+---
+
+<div class="main main--columns wrapper">
+{% include sidebar.html blocks="sidebar_api" %}
+<div class="content" role="main">
+    <h1>{{ page.title }}</h1>
+    {%- if page.version_added or page.version_deprecated -%}
+        {%- assign warning = false -%}
+        {%- if page.version_added == "unreleased" or page.version_deprecated or page.version_removed -%}
+            {%- assign warning = true -%}
+        {%- endif -%}
+
+    <p class="version-details{% if warning %} note--warning{% endif %}">
+        {%- capture lines -%}
+            {%- if page.version_added %}
+                {% include version.html version=page.version_added label="version added" %}
+            {%- endif -%}
+            {%- if page.version_deprecated %}
+                {% include version.html version=page.version_deprecated label="deprecated" %}
+            {%- endif -%}
+            {%- if page.version_removed %}
+                {% include version.html version=page.version_removed label="removed" %}
+            {%- endif -%}
+        {%- endcapture -%}
+        {{ lines | strip | newline_to_br }}
+    </p>
+    {%- endif %}
+    {{- content }}
+</div>
+</div>
diff --git a/_layouts/page.html b/_layouts/page.html
index 438f862..39fd933 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -7,6 +7,6 @@
         <h1 class="hero-title">{{ page.title }}</h1>
     </div>
 </section>
-<div class="main wrapper">
+<div class="main wrapper content">
     {{ content }}
 </div>
diff --git a/_layouts/wrapper.html b/_layouts/wrapper.html
index 3bfba17..ab334b7 100644
--- a/_layouts/wrapper.html
+++ b/_layouts/wrapper.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <meta charset="utf-8">
-<title>{% if page.title %}{{ page.title | escape }} | {% endif %}{{ site.title | escape }}</title>
+<title>{% if page.url != '/' and page.title %}{{ page.title | escape }} | {% endif %}{{ site.title | escape }}</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="icon" href="{{ site.amethyst.favicon | default: '/favicon.svg' | relative_url }}">
 <link rel="stylesheet" href="{{ '/assets/styles.css' | relative_url }}" media="screen">
@@ -9,7 +9,7 @@
 <body>
     <header class="site-header" role="banner">
         <div class="site-header-wrapper wrapper">
-            <a class="site-logo" href="{{ '/' | relative_url }}">
+            <a class="site-logo" href="{{ site.amethyst.home_href | default: '/' | relative_url }}">
                 {%- if site.amethyst.header_logo.src -%}
                 <img src="{{ site.amethyst.header_logo.src | relative_url | escape }}" alt="{{ site.title | escape }}" width="{{ site.amethyst.header_logo.width | escape }}" height="{{ site.amethyst.header_logo.height | escape }}">
                 {%- else -%}
diff --git a/_sass/amethyst.scss b/_sass/amethyst.scss
index 5162340..a9da07c 100644
--- a/_sass/amethyst.scss
+++ b/_sass/amethyst.scss
@@ -2,6 +2,7 @@
 
 // Amethyst theme for Jekyll
 
+$size-sm: 0.8rem;
 $size-1: 1rem;
 $size-2: 1.333rem;
 $size-3: 1.777rem;
@@ -25,7 +26,14 @@ $screen-xl: 1200px;
     box-sizing: border-box;
 }
 
+html {
+    // This is the background for the footer.
+    // Set here in order to fill any empty space after the footer, on short pages.
+    background: $color-light;
+}
+
 body {
+    background: $color-white;
     color: $color-black;
     font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
     line-height: 1.5;
@@ -38,15 +46,12 @@ h1, h2, h3, h4, h5, h6 {
     margin: 0;
     margin-bottom: $size-spacing;
 }
-h1 { font-size: $size-5; }
-h2 {
-    color: $color-accent;
-    font-size: $size-4;
-}
-h3 { font-size: $size-3; }
-h4 { font-size: $size-2; }
-h5 { font-size: $size-1; }
-h6 { font-size: $size-1; }
+h1 { font-size: $size-4; color: $color-accent; }
+h2 { font-size: $size-3; }
+h3 { font-size: $size-2; color: $color-darkgrey; }
+h4 { font-size: $size-1; color: $color-darkgrey; }
+h5 { font-size: $size-1; color: $color-darkgrey; }
+h6 { font-size: $size-1; color: $color-darkgrey; }
 
 p {
     margin: 0;
@@ -60,10 +65,28 @@ a {
     &:active,
     &:hover,
     &:focus {
-        color: $color-accent;
         text-decoration: underline;
     }
 }
+.content a:not(.button) {
+    border-bottom: 0.1em solid currentColor;
+
+    &:active,
+    &:hover,
+    &:focus {
+        text-decoration: none;
+
+        box-shadow: 0px 0px 0px 4px #fbdbfb;
+        background-color: $color-bright;
+        color: $color-accent;
+        border-bottom-color: $color-vibrant;
+        border-bottom-width: 0.13em;
+
+        code {
+            background-color: transparent;
+        }
+    }
+}
 
 pre, code {
     // Menlo – macOS 10.6+. Preferred instead of Monaco which doesn't do bolding very well.
@@ -113,7 +136,34 @@ iframe {
 
 .main {
     padding: $size-spacing;
-    padding-top: ($size-spacing * 2);
+}
+
+// Allow layouts to have a sidebar
+.sidebar {
+    display: none;
+}
+@media (min-width: $screen-m) {
+    .main--columns {
+        display: flex;
+    }
+    .content {
+        // Take up available space even if the lines of text are short.
+        // This affects where right-floated boxes go, such as on page-api.
+        width: 100%;
+        // Fix a quirk with scrollable overflow in content children,
+        // such as <table> or <pre>.
+        // Because content is a flex child, without 'min-width: 0',
+        // we have 'min-width: auto', which causes the viewport to
+        // get a needless vertical scrollbar.
+        // Test plan: Page with page-api layout and some <pre> code
+        // that is wider than your window.
+        min-width: 0;
+    }
+    .sidebar {
+        display: block;
+        flex: 0 0 220px;
+        margin-right: 20px;
+    }
 }
 
 .lead {
@@ -124,6 +174,8 @@ iframe {
 }
 
 .note {
+    // Clear float to avoid clash with `.version-details` box
+    clear: both;
     padding: 0.5em $box-spacing;
     margin: $box-spacing;
 
@@ -225,7 +277,7 @@ table {
     overflow: hidden;
 }
 
-/* Site Header */
+/* Site header */
 
 .site-header {
     background: $color-accent;
@@ -261,7 +313,7 @@ table {
     color: $color-white;
 }
 
-/* Site Navigation */
+/* Site navigation */
 
 .site-nav {
     display: none;
@@ -533,7 +585,7 @@ table {
 
     top: calc(100% - 2.4rem);
     padding: 0.8rem 1rem;
-    font-size: 0.8rem;
+    font-size: $size-sm;
     line-height: 1;
 
     color: $color-darkgrey;
@@ -595,11 +647,11 @@ table {
     color: $color-accent;
 }
 .aa-suggestion_content {
-    font-size: 0.8rem;
+    font-size: $size-sm;
     color: $color-darkgrey;
 }
 
-/* Mobile Toggle Controls */
+/* Site header: Mobile toggle controls */
 
 .site-toggles {
     display: flex;
@@ -634,9 +686,48 @@ table {
     fill: $color-white;
 }
 
-/* Hero header */
+/* Sidebar */
+
+.sidebar h4 {
+    font-size: $size-1;
+    margin: $size-spacing 0 #{$box-spacing / 2} 0;
+    padding-left: 4px;
+}
+
+.sidebar-list {
+    margin-top: 0;
+    padding: 0;
+    list-style: none;
+}
+.sidebar-item {
+    border-left: 4px solid transparent;
+}
+.sidebar-item-active {
+    border-left-color: $color-vibrant;
+}
+
+.sidebar-item a {
+    border-left: 1px solid $color-bright;
+    // Larger and more consistent click target
+    display: block;
+
+    padding: $box-spacing / 2 $box-spacing / 2;
+
+    color: $color-accent;
+    text-decoration: none;
+}
+.sidebar-item-active a,
+.sidebar-item a:active,
+.sidebar-item a:hover,
+.sidebar-item a:focus {
+    background: $color-bright;
+    text-decoration: none;
+}
+
+/* Layout: page */
 
 .hero {
+    margin-bottom: $size-spacing;
     background-color: darken($color-vibrant, 12%);
     background-image: linear-gradient(135deg, darken($color-vibrant, 12%), $color-vibrant );
     padding: ($size-4 * 2) 0;
@@ -663,7 +754,28 @@ table {
     margin-top: $size-4;
 }
 
-/* Home page layout */
+/* Layout: page-api */
+
+.version-details {
+    font-size: $size-sm;
+    font-weight: bold;
+    padding: 0.2em 0.4em;
+
+    @media (min-width: $screen-m) {
+        clear: right;
+        float: right;
+        margin-left: 1.333rem;
+        text-align: left;
+        border-width: 1px;
+        border-style: solid;
+    }
+}
+.version-details:not(.note--warning) {
+    background: $color-light;
+    border-color: $color-off-white;
+}
+
+/* Layout: home */
 
 .layout-home {
     h2, h3 {
@@ -684,7 +796,7 @@ table {
     height: 360px;
 }
 
-/* Site Footer */
+/* Site footer */
 
 .site-footer {
     border-top: 1px solid $color-off-white;
diff --git a/api/deprecated.md b/api/deprecated.md
new file mode 100644
index 0000000..a56779b
--- /dev/null
+++ b/api/deprecated.md
@@ -0,0 +1,5 @@
+---
+layout: group
+group: deprecated
+title: Deprecated methods
+---
diff --git a/api/foo/baz.md b/api/foo/baz.md
new file mode 100644
index 0000000..3470057
--- /dev/null
+++ b/api/foo/baz.md
@@ -0,0 +1,49 @@
+---
+layout: page-api
+title: .baz()
+excerpt: Hello world with some content.
+groups:
+- foo
+version_added: "1.23.0"
+
+---
+
+Hello world. This entry has some content and an added version.
+
+| parameter | description |
+|-----------|-------------|
+| `size` (number) | Dimensions, applies to both width and height. |
+| `label` (string) | Label for this object. |
+
+
+## Description
+
+A long long sequence of words that continues until its end eventually wraps across to the next line on your screen.
+
+### Changelog
+
+| [Xample 2.4](https://github.com/qunitjs/qunit/releases/tag/2.4.0) | The `module.only()`, `module.skip()`, and `module.todo()` aliases were introduced.
+| [Xample 2.0](https://github.com/qunitjs/qunit/releases/tag/2.0.0) | The `before` and `after` options were introduced.
+| [Xample 1.20](https://github.com/qunitjs/qunit/releases/tag/1.20.0) | The `nested` scope feature was introduced.
+| [Xample 1.16](https://github.com/qunitjs/qunit/releases/tag/1.16.0) | The `beforeEach` and `afterEach` options were introduced.<br/>The `setup` and `teardown` options were deprecated.
+
+## Examples
+
+### Example: Ultimate object
+
+A long long sequence of words that continues until its end eventually wraps across to the next line on your screen.
+
+```js
+// A long long line that continues until its end goes far far away into the <pre>'s scrollable overflow
+x.bar( 42, "text" );
+```
+
+### Example: Penultimate object
+
+A short sequence of words on your screen.
+
+```js
+// Unnamed item before last
+x.bar( -1 );
+```
+
diff --git a/api/foo/index.md b/api/foo/index.md
new file mode 100644
index 0000000..07c12f2
--- /dev/null
+++ b/api/foo/index.md
@@ -0,0 +1,5 @@
+---
+layout: group
+group: foo
+title: Foobar
+---
diff --git a/api/foo/quux.md b/api/foo/quux.md
new file mode 100644
index 0000000..88e14ee
--- /dev/null
+++ b/api/foo/quux.md
@@ -0,0 +1,9 @@
+---
+layout: page-api
+title: .quuz()
+excerpt: Hello, where was I?
+groups:
+- foo
+---
+
+Hello. Where was I? This entry has no version information.
diff --git a/api/index.md b/api/index.md
new file mode 100644
index 0000000..73cb0ec
--- /dev/null
+++ b/api/index.md
@@ -0,0 +1,8 @@
+---
+layout: page-api
+title: Xample API
+---
+
+Integer et tempus lectus. Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.
+
+
diff --git a/api/lorem/dolor.md b/api/lorem/dolor.md
new file mode 100644
index 0000000..b870d98
--- /dev/null
+++ b/api/lorem/dolor.md
@@ -0,0 +1,14 @@
+---
+layout: page-api
+title: Example.dolor()
+excerpt: So.
+groups:
+- lorem
+- deprecated
+version_added: "2.0.0"
+version_deprecated: "2.16.0"
+---
+
+So, this entry has an added and deprecated version.
+
+<p class="note note--warning" markdown="1">This method is __deprecated__ and it's recommended to use [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) instead.</p>
diff --git a/api/lorem/index.md b/api/lorem/index.md
new file mode 100644
index 0000000..44fc687
--- /dev/null
+++ b/api/lorem/index.md
@@ -0,0 +1,5 @@
+---
+layout: group
+group: lorem
+title: Lorem ipsum
+---
diff --git a/api/lorem/sit.md b/api/lorem/sit.md
new file mode 100644
index 0000000..bc60ae6
--- /dev/null
+++ b/api/lorem/sit.md
@@ -0,0 +1,15 @@
+---
+layout: page-api
+title: Example.sit()
+excerpt: Hello, I've been through it all.
+groups:
+- lorem
+- removed
+version_added: "1.0.0"
+version_deprecated: "1.23.0"
+version_removed: "2.0.0"
+---
+
+Hello. This item has been added, deprecated, and removed. Pfew!
+
+<p class="note note--warning" markdown="1">This method is __deprecated__ and it's recommended to use [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) instead.</p>
diff --git a/api/removed.md b/api/removed.md
new file mode 100644
index 0000000..d76f152
--- /dev/null
+++ b/api/removed.md
@@ -0,0 +1,5 @@
+---
+layout: group
+group: removed
+title: Removed methods
+---
diff --git a/docs/config.md b/docs/config.md
new file mode 100644
index 0000000..ddb5f4d
--- /dev/null
+++ b/docs/config.md
@@ -0,0 +1,100 @@
+# Amethyst theme configuration
+
+```yaml
+# Theme settings
+#
+# Amethyst theme options are documented at:
+# https://github.com/qunitjs/jekyll-theme-amethyst/blob/main/docs/config.md
+#
+amethyst:
+  # Default: "/favicon.svg"
+  favicon:
+  # Default: "/"
+  home_href:
+  # Horizontal logo with text (SVG, or PNG that is at least 140px tall, for 70px@2x).
+  # Set width/height for aspect ratio.
+  #
+  # Example:
+  #
+  # ```
+  # header_logo:
+  #   src: /assets/logo-with-text.svg
+  #   width: 250
+  #   height: 70
+  # ```
+  header_logo:
+  # Base URI for "Edit this page" link in the footer.
+  # When set, this is combined with the relative path to the Markdown file in the repo.
+  #
+  # Example: https://github.com/qunitjs/jekyll-theme-amethyst/blob/example/
+  edituri_base:
+  # Base URI for version links (e.g. "version added") on page-api layouts.
+  #
+  # Example: https://github.com/qunitjs/qunit/releases/tag/
+  release_base:
+  # Mastodon account URL (e.g. "https://mastodon.technology/@qunitjs")
+  mastodon:
+  # Twitter.com username (without "@")
+  twitter:
+  # GitHub.com organisation or username (without "@")
+  github:
+  # Gitter.im room (e.g. "qunitjs/qunit")
+  gitter:
+  # Frontend search powered by Algolia
+  algolia:
+    # Key for client-side search queries (32-character hex token)
+    search_only_api_key:
+
+    # Defaults to `algolia.application_id` (see below)
+    application_id:
+
+    # Which indexes to use as autocomplete source
+    #
+    # Defaults to a single source based on `algolia.index_name`,
+    # which means the current site only.
+    #
+    # If there are multiple relates sites that you want to give
+    # a unified search experience (e.g. qunitjs.com and api.qunitjs.com)
+    # then use this option to explicitly specify the sources.
+    # In that case, be sure to set `base` for the "other" sites
+    # as the indexes not aware of their full url (indexing happens
+    # at built time in CI). Include the "current" site index name as
+    # well, but without any `base` so that its results are linked
+    # relative, and thus work as expected when testing the site
+    # locally, for example.
+    #
+    # Example: Multiple sources
+    #
+    # ```
+    # sources:
+    #  - index: qunitjs-api
+    #    base: https://api.qunitjs.com
+    #  - index: qunitjs
+    # ```
+    sources:
+
+
+# Backend search settings
+#
+# This applies to the 'jekyll algolia' command, which is typically
+# run from an after a commit is merged. The settings are documented at:
+# https://github.com/algolia/jekyll-algolia
+#
+# To learn how to set this up, refer to:
+# https://github.com/qunitjs/jekyll-theme-amethyst/blob/main/docs/getting-started.md#enable-algolia-search
+#
+algolia:
+  application_id:
+  # Which index_name the 'jekyll algolia' command will create or update.
+  index_name:
+  # By default only HTML paragraphs are indexed (and headings, albeit through a different mechanism).
+  # * Include list items (similar to paragraphs).
+  # * Include tables (index per row for better excerpts).
+  # * Include <pre> (typically code examples, omit if it "poisons" results too much).
+  nodes_to_index: 'p,li,tr,pre'
+  # Pages not to suggest in search, e.g. if they are overviews
+  # that only point to other pages and have no original content.
+  files_to_exclude:
+    # - something-overview.md
+
+```
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 64e7ff4..f5e8a19 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -31,7 +31,7 @@ For the end-result, see [Amethyst Demo](https://qunitjs.github.io/jekyll-theme-a
 Some ideas for what to do next:
 
 * Edit the [Home](https://github.com/qunitjs/jekyll-theme-amethyst/blob/example/index.md) page, and create other Markdown files.
-* Change the [config](https://github.com/qunitjs/jekyll-theme-amethyst/blob/example/_config.yml), e.g. to set the name and tagline of your site.
+* Change the [_config](https://github.com/qunitjs/jekyll-theme-amethyst/blob/example/_config.yml) file, e.g. to set the name and tagline of your site. See also [Amethyst theme configuration](./config.md) documentation.
 * Change colors in [amethyst-variables.scss](https://github.com/qunitjs/jekyll-theme-amethyst/blob/example/_sass/amethyst-variables.scss).
 * Change the top navigation links via [sitenav.yml](https://github.com/qunitjs/jekyll-theme-amethyst/blob/example/_data/sitenav.yml).
 * Add a LICENSE to your repository.
@@ -45,8 +45,8 @@ Some ideas for what to do next:
    - `algolia.application_id`: Application ID.
    - `amethyst.algolia.search_only_api_key`: Search-Only API Key.
    - `algolia.index_name`: make up a unique lowercase name for the current static site.
-4. Set the following secure environment variable in the CI build for the main branch.
-   E.g. via Travis CI or otherwise.
+4. Set the following secure environment variable in a CI build for commits pushed to the main branch.
+   E.g. via GitHub Actions. ([Example workflow YAML](https://github.com/qunitjs/jekyll-theme-amethyst/blob/main/.github/workflows/doc-search.yaml))
    - `ALGOLIA_API_KEY`: Admin API Key.
 5. Done! The settings in `_config.yml` instruct the theme to display a search field. The next CI build will populate the search index with your content.
 
diff --git a/index.md b/index.md
index 658ad0a..2c21403 100644
--- a/index.md
+++ b/index.md
@@ -14,7 +14,7 @@ home_primary_btn:
 # Optional
 home_secondary_btn:
   name: View the Docs
-  href: https://api.qunitjs.com
+  href: /api/
 ---
 
 <section class="grid grid--small home-highlights">
diff --git a/intro.md b/intro.md
index a11285f..43260eb 100644
--- a/intro.md
+++ b/intro.md
@@ -19,7 +19,7 @@ npm install --save-dev qunit
 
 <p class="note note--warning" markdown="1">For legacy reasons, you may have to read this sentence.</p>
 
-Create a file for your test at `test/add.js` and include the following:
+Create a `test/add.js` file and call [`QUnit.test()`](https://api.qunitjs.com/QUnit/test/), like so:
 
 ```js
 QUnit.module('add', function() {