Skip to content

Commit

Permalink
Update docs website to split changelog rendering by year
Browse files Browse the repository at this point in the history
+ [UX] Add a skeleton loader - raw loader still takes a noticeable second or two for the larger years, so might as well make that behavior more intentional
  • Loading branch information
cee-chen committed Nov 7, 2023
1 parent 8f8d6af commit 4287f4b
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 12 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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.
71 changes: 60 additions & 11 deletions src-docs/src/views/package/changelog.js
Original file line number Diff line number Diff line change
@@ -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 (
<GuideSection>
<EuiSkeletonLoading
isLoading={isLoading}
contentAriaLabel="Changelog"
loadingContent={
<>
<EuiSkeletonTitle size="l" />
<EuiSpacer size="s" />
<EuiSkeletonText lines={10} />
</>
}
loadedContent={<EuiMarkdownFormat>{changelogSource}</EuiMarkdownFormat>}
/>
</GuideSection>
);
};

export const Changelog = {
name: 'Changelog',
component: () => (
<GuideTabbedPage title="Changelog">
<GuideSection>
<EuiMarkdownFormat>{changelogSource}</EuiMarkdownFormat>
</GuideSection>
</GuideTabbedPage>
<GuideTabbedPage
title="Changelog"
// Renders the tabbed content
pages={yearsAsArray.map((year) => ({
title: year.toString(),
page: ChangelogPageByYear,
}))}
/>
),
// Renders sidenav links
sections: yearsAsArray.map((year) => ({
id: year,
title: year.toString(),
sections: [], // Triggers non-# URLs
})),
};

0 comments on commit 4287f4b

Please sign in to comment.