16 files changed, 208 insertions, 217 deletions
diff --git a/Rules b/Rules
index 4d137bf9..d9390f9a 100644
--- a/Rules
+++ b/Rules
@@ -50,12 +50,6 @@ compile '/404.*' do
   write '/404.html'
 end
 
-compile '/archives/index.*' do
-  filter :erb
-  layout '/archives.*'
-  write '/archives/index.html'
-end
-
 compile '/**/*.html' do
   layout '/default.*'
 end
diff --git a/content/404.html b/content/404.html
index 7bc135f2..9f6c251f 100644
--- a/content/404.html
+++ b/content/404.html
@@ -25,5 +25,3 @@ searchbar: false
     <br>
   </div>
 </div>
-
-<div data-archives-path="/archives/" data-environment="<%= ENV['NANOC_ENV'] %>" data-offline-versions="<%= @items['/_data/versions.yaml'][:offline].to_s.tr('[]" ', '') %>" id="offline-versions"></div>
diff --git a/content/_data/versions.yaml b/content/_data/versions.yaml
deleted file mode 100644
index 9d6eb2c9..00000000
--- a/content/_data/versions.yaml
+++ /dev/null
@@ -1,72 +0,0 @@
-# The two last major supported versions
-# https://about.gitlab.com/support/statement-of-support.html#we-support-the-current-major-version-and-the-two-previous-major-versions
-previous_majors:
-  - "14.10"
-  - "13.12"
-
-# The first online version should always point to the
-# current stable version.
-online:
-  - "15.4"
-  - "15.3"
-  - "15.2"
-
-# The last version before the next major release. Verify near 14.10 as there may be more 14.X versions.
-last_before_new_major:
-  - "14.10"
-
-# Versions not appearing in the dropdown, but available as Docker images
-# https://docs.gitlab.com/archives/#offline-archives
-offline:
-  - "15.1"
-  - "15.0"
-  - "14.9"
-  - "14.8"
-  - "14.7"
-  - "14.6"
-  - "14.5"
-  - "14.4"
-  - "14.3"
-  - "14.2"
-  - "14.1"
-  - "14.0"
-  - "13.11"
-  - "13.10"
-  - "13.9"
-  - "13.8"
-  - "13.7"
-  - "13.6"
-  - "13.5"
-  - "13.4"
-  - "13.3"
-  - "13.2"
-  - "13.1"
-  - "13.0"
-  - "12.9"
-  - "12.8"
-  - "12.7"
-  - "12.6"
-  - "12.5"
-  - "12.4"
-  - "12.3"
-  - "12.2"
-  - "12.1"
-  - "12.0"
-  - "11.11"
-  - "11.10"
-  - "11.9"
-  - "11.8"
-  - "11.7"
-  - "11.6"
-  - "11.5"
-  - "11.4"
-  - "11.3"
-  - "11.2"
-  - "11.1"
-  - "11.0"
-  - "10.8"
-  - "10.7"
-  - "10.6"
-  - "10.5"
-  - "10.4"
-  - "10.3"
diff --git a/content/archives/index.html b/content/archives/index.html
deleted file mode 100644
index 779f50a4..00000000
--- a/content/archives/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Docs archives | GitLab
-comments: false
-noindex: true
-last_updated: 2020-05-15
----
-
-<h1>GitLab Docs archives</h1>
-
-This page has links to online versions of the GitLab documentation.
-
-<% unless @items['/_data/versions.yaml'][:offline].nil? %>
-To browse a version that is not available online, see the
-<a href='#offline-archives'>offline archives</a>.
-<br>
-They're available for download so that you can browse through them locally.
-<% end %>
-
-<h2 id="default-version">Default version <a class="anchor" href="#default-version"></a></h2>
-
-The <a href="/">default version</a> of this website
-is built from the documentation directories on the default branches of:
-
-<ul>
-  <li><a href="https://gitlab.com/gitlab-org/gitlab/-/tree/master/doc">GitLab</a></li>
-  <li><a href="https://gitlab.com/gitlab-org/omnibus-gitlab/-/tree/master/doc">Omnibus GitLab</a></li>
-  <li><a href="https://gitlab.com/gitlab-org/gitlab-runner/-/tree/main/docs">GitLab Runner</a></li>
-  <li><a href="https://gitlab.com/gitlab-org/charts/gitlab/-/tree/master/doc"> GitLab Charts</a></li>
-</ul>
-
-All of these are brought together by the
-<a href="https://gitlab.com/gitlab-org/gitlab-docs/">GitLab Docs</a> project, which regularly
-deploys this content to <a href="/">docs.gitlab.com</a>.
-
-<h2 id="latest-released-version">Latest released version <a class="anchor" href="#latest-released-version"></a></h2>
-
-The latest released stable version is
-<a href='/<%= @items['/_data/versions.yaml'][:online].first %>/'><%= @items['/_data/versions.yaml'][:online].first %></a>.
-
-<h2 id="previously-released-versions">Previously released versions <a class="anchor" href="#previously-released-versions"></a></h2>
-
-The following versions are available online:
-
-<ul>
-<!--
-  List the online versions dropping the first and starting from the second one,
-  since the first is always the current and we list it in the previous section.
--->
-<% @items['/_data/versions.yaml'][:online].drop(1).each do |version| %>
-  <li>
-    <a href='/<%= version %>/'><%= version %></a>
-  </li>
-<% end %>
-</ul>
-
-<% unless @items['/_data/versions.yaml'][:offline].nil? %>
-
-In addition, online versions are available for the following versions:
-
-<ul>
-<% @items['/_data/versions.yaml'][:previous_majors].each do |version| %>
-  <li>
-    <a href='/<%= version %>/'><%= version %></a>
-  </li>
-<% end %>
-</ul>
-
-<h2 id="offline-archives">Offline archives <a class="anchor" href="#offline-archives"></a></h2>
-
-The following archives are available and can be browsed offline. You'll need to have
-<a href='https://docs.docker.com/install/' target='_blank'>Docker installed</a>
-to access them.
-
-<% @items['/_data/versions.yaml'][:offline].each do |version| %>
-
-<h3><%= version %></h3>
-
-<div class="highlight"><pre class="highlight shell"><code>docker run <span class="nt">-it</span> <span class="nt">--rm</span> <span class="nt">-p</span> 4000:4000 registry.gitlab.com/gitlab-org/gitlab-docs:<%= version %>
-</code></pre></div>
-
-<% end %>
-<% end %>
diff --git a/content/archives/index.md b/content/archives/index.md
new file mode 100644
index 00000000..c43c3797
--- /dev/null
+++ b/content/archives/index.md
@@ -0,0 +1,31 @@
+---
+toc: false
+---
+
+# GitLab Docs archives
+
+This page has links to online versions of the GitLab documentation.
+<!-- markdownlint-disable-next-line -->
+To browse a version that is not available online, see the [offline archives](#offline-archives).
+
+They're available for download so that you can browse through them locally.
+
+## Default version
+
+The [default version](/) of this website
+is built from the documentation directories on the default branches of:
+
+- [GitLab](https://gitlab.com/gitlab-org/gitlab/-/tree/master/doc)
+- [Omnibus GitLab](https://gitlab.com/gitlab-org/omnibus-gitlab/-/tree/master/doc)
+- [GitLab Runner](https://gitlab.com/gitlab-org/gitlab-runner/-/tree/main/docs)
+- [GitLab Charts](https://gitlab.com/gitlab-org/charts/gitlab/-/tree/master/doc)
+- [GitLab Operator](https://gitlab.com/gitlab-org/cloud-native/gitlab-operator/doc)
+
+All of these are brought together by the
+[GitLab Docs](https://gitlab.com/gitlab-org/gitlab-docs/) project, which regularly
+deploys this content to [docs.gitlab.com](https://docs.gitlab.com).
+
+<!-- Content below this section can be edited in content/frontend/default/components/archives_page.vue -->
+
+<!-- markdownlint-disable-next-line -->
+<div class="js-archives"></div>
diff --git a/content/frontend/default/components/archives_page.vue b/content/frontend/default/components/archives_page.vue
new file mode 100644
index 00000000..3751d04c
--- /dev/null
+++ b/content/frontend/default/components/archives_page.vue
@@ -0,0 +1,66 @@
+<script>
+import { getVersions } from '../../services/fetch_versions';
+import { getArchiveImages } from '../../services/fetch_archive_images';
+import HeaderPermalink from '../../shared/components/header_permalink.vue';
+
+export default {
+  components: {
+    HeaderPermalink,
+  },
+  data() {
+    return {
+      versions: {},
+      onlineVersions: [],
+      offlineVersions: [],
+    };
+  },
+  async created() {
+    this.versions = await getVersions();
+    this.onlineVersions = [...this.versions.last_minor, ...this.versions.last_major];
+
+    const archiveImages = await getArchiveImages();
+    this.offlineVersions = archiveImages.filter(
+      (archiveVersion) =>
+        archiveVersion.name !== this.versions.current &&
+        !this.onlineVersions.includes(archiveVersion.name),
+    );
+  },
+};
+</script>
+
+<template>
+  <div>
+    <header-permalink text="Latest released version" />
+    <p>
+      The latest released stable version is
+      <a :href="`https://docs.gitlab.com/${versions.current}`">{{ versions.current }}</a
+      >.
+    </p>
+
+    <header-permalink text="Previously released versions" />
+    <p>The following versions are available online:</p>
+    <ul>
+      <li v-for="v in onlineVersions" :key="v" :data-testid="`online-version-${v}`">
+        <a :href="`https://docs.gitlab.com/${v}`">{{ v }}</a>
+      </li>
+    </ul>
+
+    <div v-if="offlineVersions.length">
+      <header-permalink text="Offline archives" />
+      <p>
+        The following archives are available and can be browsed offline. You'll need to have
+        <a href="https://docs.docker.com/get-docker/">Docker</a>
+        installed to access them.
+      </p>
+
+      <div v-for="o in offlineVersions" :key="o.name" :data-testid="`offline-version-${o.name}`">
+        <h3>{{ o.name }}</h3>
+        <div class="highlight">
+          <pre class="highlight shell">
+            <code>docker run <span class="nt">-it</span> <span class="nt">--rm</span> <span class="nt">-p</span> 4000:4000 {{ o.location }}</code>
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js
index 22a41b7b..1f140788 100644
--- a/content/frontend/default/default.js
+++ b/content/frontend/default/default.js
@@ -5,6 +5,7 @@ import VersionBanner from './components/version_banner.vue';
 import { setupTableOfContents } from './setup_table_of_contents';
 import VersionsMenu from './components/versions_menu.vue';
 import TabsSection from './components/tabs_section.vue';
+import ArchivesPage from './components/archives_page.vue';
 
 function fixScrollPosition() {
   if (!window.location.hash || !document.querySelector(window.location.hash)) return;
@@ -107,3 +108,15 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   });
 });
+
+document.addEventListener('DOMContentLoaded', () => {
+  return new Vue({
+    el: '.js-archives',
+    components: {
+      ArchivesPage,
+    },
+    render(createElement) {
+      return createElement(ArchivesPage);
+    },
+  });
+});
diff --git a/content/frontend/services/fetch_archive_images.js b/content/frontend/services/fetch_archive_images.js
new file mode 100644
index 00000000..45c68efd
--- /dev/null
+++ b/content/frontend/services/fetch_archive_images.js
@@ -0,0 +1,14 @@
+export function getArchiveImages() {
+  return fetch(
+    'https://gitlab.com/api/v4/projects/1794617/registry/repositories/631635/tags?per_page=100',
+  )
+    .then((response) => response.json())
+    .then((data) => {
+      // We only want tags for versioned releases, so drop any that aren't integers.
+      const tags = data.filter((object) => {
+        return !Number.isNaN(Number(object.name));
+      });
+      return tags.reverse();
+    })
+    .catch((error) => console.error(error)); // eslint-disable-line no-console
+}
diff --git a/content/frontend/shared/components/header_permalink.vue b/content/frontend/shared/components/header_permalink.vue
new file mode 100644
index 00000000..7fa8127a
--- /dev/null
+++ b/content/frontend/shared/components/header_permalink.vue
@@ -0,0 +1,20 @@
+<script>
+export default {
+  name: 'HeaderPermalink',
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    htmlID() {
+      return this.text.replaceAll(' ', '-').toLowerCase();
+    },
+  },
+};
+</script>
+
+<template>
+  <h2 :id="htmlID">{{ text }}<a :href="`#${htmlID}`" title="Permalink" class="anchor"></a></h2>
+</template>
diff --git a/doc/releases.md b/doc/releases.md
index 8b000a11..24f4db5a 100644
--- a/doc/releases.md
+++ b/doc/releases.md
@@ -42,7 +42,7 @@ To minimize problems during the documentation release process, use the following
   1. [Create a stable branch and Docker image](#create-stable-branch-and-docker-image-for-release) for
      the new version.
   1. [Create a release merge request](#create-release-merge-request) for the new version, which
-     updates the version dropdown menu (`versions.json`) and archives list (`versions.yaml`) for the current documentation,
+     updates the versions list (`versions.json`) for the current documentation,
      and adds the release to the Docker configuration.
 
      Try to create the MR close to the cutoff for `gitlab` project's stable branch for the release.
@@ -136,12 +136,6 @@ To create the release merge request for the release:
    git checkout -b release-15-0
    ```
 
-1. Edit `content/_data/versions.yaml` and update the lists of versions to reflect the new release on [the Archives page](https://docs.gitlab.com/archives/):
-
-   - Add the latest version to the `online:` section.
-   - Move the oldest version in `online:` to the `offline:` section. There should now be three
-     versions in `online:`.
-
 1. Edit `content/versions.json` and update the lists of versions to reflect the new release in the Versions menu:
 
    - Set `next` to the version number of the next release. For example, if you're releasing `15.2`, set `next` to `15.3`.
@@ -173,7 +167,7 @@ To create the release merge request for the release:
 1. Commit and push to create the merge request. For example:
 
    ```shell
-   git add .gitlab/ci/docker-images.gitlab-ci.yml content/_data/versions.yaml content/versions.json latest.Dockerfile
+   git add .gitlab/ci/docker-images.gitlab-ci.yml content/versions.json latest.Dockerfile
    git commit -m "Release 15.0"
    git push origin release-15-0
    ```
@@ -202,7 +196,7 @@ Open site `docs.gitlab.com` in a browser and confirm both the latest version and
 version are listed in the documentation version dropdown.
 
 For example, if you released the 14.1 documentation, the first dropdown entry should be
-`GitLab.com (14.2-pre)`, followed by `14.1`.
+`14.2`, followed by `14.1`.
 
 ## Troubleshooting
 
diff --git a/latest.Dockerfile b/latest.Dockerfile
index 0db96e48..63a7a6ed 100644
--- a/latest.Dockerfile
+++ b/latest.Dockerfile
@@ -41,13 +41,13 @@ COPY --from=registry.gitlab.com/gitlab-org/gitlab-docs:nginx-onbuild /etc/nginx/
 RUN rm -rf /usr/share/nginx/html/*
 
 # Get all the archive static HTML and put it into place
-# Copy the versions found in 'content/_data/versions.yaml' under online
+# Copy the versions found in 'content/versions.json' under "current" and "last_minor"
 COPY --from=registry.gitlab.com/gitlab-org/gitlab-docs:15.4 ${TARGET} ${TARGET}
 COPY --from=registry.gitlab.com/gitlab-org/gitlab-docs:15.3 ${TARGET} ${TARGET}
 COPY --from=registry.gitlab.com/gitlab-org/gitlab-docs:15.2 ${TARGET} ${TARGET}
 
 # List the two last major versions
-# Copy the versions found in 'content/_data/versions.yaml' under previous_majors
+# Copy the versions found in 'content/versions.json' under "last_major"
 COPY --from=registry.gitlab.com/gitlab-org/gitlab-docs:14.10 ${TARGET} ${TARGET}
 COPY --from=registry.gitlab.com/gitlab-org/gitlab-docs:13.12 ${TARGET} ${TARGET}
 
diff --git a/layouts/archives.html b/layouts/archives.html
deleted file mode 100644
index 530d3fa1..00000000
--- a/layouts/archives.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE HTML>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" prefix="og: http://ogp.me/ns#">
-<head>
-<%= render '/head.*' %>
-</head>
-<body>
-  <%= render '/gtm.*' %>
-  <%= render '/header.*' %>
-  <div id="js-banner"></div>
-  <div class="gl-docs wrapper d-flex justify-content-center pt-5 mt-5">
-    <div class="doc-nav"></div>
-    <div class="main class pl-lg-4 js-main-wrapper">
-      <div class="js-article-content">
-        <%= yield %>
-      </div>
-      <% if @item[:last_updated] %>
-        <hr>
-        <p class="last-updated" style="padding-bottom: 24px;">
-          <em>Last updated <%= @item[:last_updated] %></em>
-        </p>
-      <% end %>
-      <%= render '/footer.*' %>
-    </div>
-    <div class="doc-nav"></div>
-  </div>
-  <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
-  <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script>
-  <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
-  <script src="<%= @items['/frontend/shared/clipboardjs.*'].path %>"></script>
-  <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
-  <% if production? %>
-  <%# Add analytics only in production %>
-    <%= render '/analytics.*' %>
-  <% end %>
-  <%= render '/schema-microdata.*' %>
-</body>
-</html>
diff --git a/lib/checks/anchors.rb b/lib/checks/anchors.rb
index 79ecbd08..e93fd9a2 100644
--- a/lib/checks/anchors.rb
+++ b/lib/checks/anchors.rb
@@ -5,7 +5,7 @@ Nanoc::Check.define(:internal_anchors) do
     Gitlab::Docs::Page.new(file).links.each do |link|
       next unless link.internal?
       next unless link.to_anchor?
-      next if link.anchor_name == 'markdown-toc'
+      next if %w(markdown-toc, offline-archives).include? link.anchor_name
 
       next unless link.destination_anchor_not_found?
 
diff --git a/spec/frontend/__mocks__/versions_mock.js b/spec/frontend/__mocks__/versions_mock.js
new file mode 100644
index 00000000..f62b00c9
--- /dev/null
+++ b/spec/frontend/__mocks__/versions_mock.js
@@ -0,0 +1,19 @@
+export const mockVersions = {
+  next: '15.3',
+  current: '15.2',
+  last_minor: ['15.1', '15.0'],
+  last_major: ['14.10', '13.12'],
+};
+
+export const mockArchiveImages = [
+  {
+    name: '14.9',
+    path: 'gitlab-org/gitlab-docs:14.9',
+    location: 'registry.gitlab.com/gitlab-org/gitlab-docs:14.9',
+  },
+  {
+    name: '14.8',
+    path: 'gitlab-org/gitlab-docs:14.8',
+    location: 'registry.gitlab.com/gitlab-org/gitlab-docs:14.8',
+  },
+];
diff --git a/spec/frontend/default/components/archives_page_spec.js b/spec/frontend/default/components/archives_page_spec.js
new file mode 100644
index 00000000..553ef7ba
--- /dev/null
+++ b/spec/frontend/default/components/archives_page_spec.js
@@ -0,0 +1,38 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { shallowMount } from '@vue/test-utils';
+import ArchivesPage from '../../../../content/frontend/default/components/archives_page.vue';
+import { getVersions } from '../../../../content/frontend/services/fetch_versions';
+import { getArchiveImages } from '../../../../content/frontend/services/fetch_archive_images';
+import { mockVersions, mockArchiveImages } from '../../__mocks__/versions_mock';
+
+jest.mock('../../../../content/frontend/services/fetch_versions');
+jest.mock('../../../../content/frontend/services/fetch_archive_images');
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  getVersions.mockResolvedValueOnce(mockVersions);
+  getArchiveImages.mockResolvedValueOnce(mockArchiveImages);
+});
+
+describe('content/frontend/default/components/archives_page.vue', () => {
+  it('Shows correct online versions', async () => {
+    const wrapper = shallowMount(ArchivesPage);
+    await wrapper.setData({
+      onlineVersions: [...mockVersions.last_minor, ...mockVersions.last_major],
+    });
+
+    expect(wrapper.find('[data-testid="online-version-15.1"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="online-version-15.3"]').exists()).toBe(false);
+  });
+
+  it('Shows correct offline versions', async () => {
+    const wrapper = shallowMount(ArchivesPage);
+    await wrapper.setData({ offlineVersions: mockArchiveImages });
+
+    expect(wrapper.find('[data-testid="offline-version-14.9"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="online-version-15.3"]').exists()).toBe(false);
+  });
+});
diff --git a/spec/frontend/default/components/versions_menu_spec.js b/spec/frontend/default/components/versions_menu_spec.js
index 01bb43e2..035c59fc 100644
--- a/spec/frontend/default/components/versions_menu_spec.js
+++ b/spec/frontend/default/components/versions_menu_spec.js
@@ -6,15 +6,10 @@ import { mount } from '@vue/test-utils';
 import flushPromises from 'flush-promises';
 import VersionsMenu from '../../../../content/frontend/default/components/versions_menu.vue';
 import { getVersions } from '../../../../content/frontend/services/fetch_versions';
+import { mockVersions } from '../../__mocks__/versions_mock';
 import { setWindowPath } from './helpers/versions_menu_helper';
 
 jest.mock('../../../../content/frontend/services/fetch_versions');
-const mockVersions = {
-  next: '15.3',
-  current: '15.2',
-  last_minor: ['15.1', '15.0'],
-  last_major: ['14.10', '13.12'],
-};
 
 beforeEach(() => {
   jest.clearAllMocks();