diff --git a/CHANGELOG.md b/CHANGELOG.md
index e49c4a544c26..8052f44d02c5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,3 @@
# EUI changelogs
-EUI's changelogs are too large to view in a single file, and have been split up by year. You can view them in the [changelogs](./changelogs) folder, or [search for individual releases](https://github.com/elastic/eui/releases) to view their changelog.
+EUI's changelogs are too large to view in a single file, and have been split up by year. You can view them in the [changelogs](./changelogs) folder, on our [docs website](https://eui.elastic.co/#/package/changelog), or [search for individual releases](https://github.com/elastic/eui/releases) to view their changelog.
diff --git a/src-docs/src/views/package/changelog.js b/src-docs/src/views/package/changelog.js
index a3652b6e8858..a57970e0cd2d 100644
--- a/src-docs/src/views/package/changelog.js
+++ b/src-docs/src/views/package/changelog.js
@@ -1,22 +1,71 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
-import { EuiMarkdownFormat } from '../../../../src';
+import {
+ EuiSkeletonLoading,
+ EuiSkeletonTitle,
+ EuiSkeletonText,
+ EuiMarkdownFormat,
+ EuiSpacer,
+} from '../../../../src';
import { GuideSection } from '../../components';
import { GuideTabbedPage } from '../../components/guide_tabbed_page';
-const changelogSource =
- require('!!raw-loader!../../../../CHANGELOG.md').default.replace(
- /## \[`main`\].+?##(?= \[`\d)/s, // remove the `main` heading & contents
- '##'
+const thisYear = new Date().getUTCFullYear();
+const startingYear = 2017;
+const years = thisYear - startingYear + 1;
+const yearsAsArray = Array.from({ length: years }, (_, i) => thisYear - i);
+
+const ChangelogPageByYear = () => {
+ const [isLoading, setIsLoading] = useState(true);
+ const [changelogSource, setChangelogSource] = useState('');
+
+ const { pathname } = useLocation();
+ useEffect(() => {
+ const pathArray = pathname.split('/');
+ const year = pathArray[pathArray.length - 1];
+
+ setChangelogSource(
+ require(`!!raw-loader!../../../../changelogs/CHANGELOG_${year}.md`)
+ .default
+ );
+ setIsLoading(false);
+ }, [pathname]);
+
+ return (
+
+
+
+
+
+ >
+ }
+ loadedContent={{changelogSource}}
+ />
+
);
+};
export const Changelog = {
name: 'Changelog',
component: () => (
-
-
- {changelogSource}
-
-
+ ({
+ title: year.toString(),
+ page: ChangelogPageByYear,
+ }))}
+ />
),
+ // Renders sidenav links
+ sections: yearsAsArray.map((year) => ({
+ id: year,
+ title: year.toString(),
+ sections: [], // Triggers non-# URLs
+ })),
};