fix(docs) changelog pages (#2185)

kadena-community · May 28, 2024 · 8b759a2 · 8b759a2
1 parent 57517a7
commit 8b759a2
Show file tree

Hide file tree

Showing 27 changed files with 1,026 additions and 747 deletions.
diff --git a/.changeset/funny-buses-exist.md b/.changeset/funny-buses-exist.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/docs/src/changelog.d.ts b/packages/apps/docs/src/changelog.d.ts
@@ -10,6 +10,7 @@ interface IRepo {
   repoName: string;
 }
 interface IChangelogPackage extends IRepo {
+  versionCount?: number;
   content: Record<string, IChangelogPackageVersion>;
 }
 

diff --git a/packages/apps/docs/src/components/Changelog/Changelog.tsx b/packages/apps/docs/src/components/Changelog/Changelog.tsx
@@ -16,7 +16,7 @@ export const Changelog: FC<IProps> = ({ changelogs }) => {
   return (
     <Stack flexDirection="column" gap="xxxl">
       {packages.map((pkg) => (
-        <Package key={pkg.repoName} pkg={pkg} />
+        <Package key={pkg.repoName} pkg={pkg} isFullPage={false} />
       ))}
     </Stack>
   );

diff --git a/packages/apps/docs/src/components/Changelog/CommitItem.tsx b/packages/apps/docs/src/components/Changelog/CommitItem.tsx
@@ -1,6 +1,8 @@
-import { Stack } from '@kadena/react-ui';
+import { Stack, Text } from '@kadena/react-ui';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
 import { CommitTag } from './CommitTag';
 import {
   commitListItemClass,
@@ -29,7 +31,11 @@ export const CommitItem: FC<IProps> = ({ commit }) => {
   return (
     <Stack as="li" className={commitListItemClass}>
       <Stack flex={1} className={commitListItemTitleClass}>
-        {commit.label}
+        <Text as="span">
+          <ReactMarkdown rehypePlugins={[rehypeRaw] as any}>
+            {commit.label}
+          </ReactMarkdown>
+        </Text>
       </Stack>
       {ids.length > 0 && (
         <Stack flexWrap="wrap" className={tagContainerClass}>

diff --git a/packages/apps/docs/src/components/Changelog/Package.tsx b/packages/apps/docs/src/components/Changelog/Package.tsx
@@ -1,20 +1,48 @@
 import { getVersions } from '@/scripts/importChangelogs/utils/misc';
-import { Heading, Stack } from '@kadena/react-ui';
+import { MonoKeyboardArrowRight, MonoList } from '@kadena/react-icons/system';
+import { Button, Heading, Stack, Text } from '@kadena/react-ui';
+import classNames from 'classnames';
+import Link from 'next/link';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Version } from './Version';
 import { VersionMeta } from './VersionMeta';
 import {
   backgroundClass,
+  togglePackageButtonClass,
+  togglePackageIconClass,
+  togglePackageIconOpenClass,
+  versionWrapperClass,
+  versionWrapperOpenClass,
   versionsSectionClass,
   versionsSectionMetaClass,
 } from './styles.css';
 
 interface IProps {
   pkg: IChangelogPackage;
+  isFullPage?: boolean;
 }
 
-export const Package: FC<IProps> = ({ pkg }) => {
+export const Package: FC<IProps> = ({ pkg, isFullPage = true }) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current || isFullPage) return;
+
+    ref.current.style.maxHeight = isOpen
+      ? `${ref.current.scrollHeight + 1000}px`
+      : '0';
+  }, [ref.current, isOpen, isFullPage]);
+
+  const versions = useMemo(() => {
+    return getVersions(pkg);
+  }, [pkg.content]);
+
+  const handleOpen = (): void => {
+    if (isFullPage) return;
+    setIsOpen((v) => !v);
+  };
   return (
     <Stack
       as="section"
@@ -23,31 +51,68 @@ export const Package: FC<IProps> = ({ pkg }) => {
       flexDirection="column"
       paddingBlock="xxxl"
       paddingInline={{ xs: 'md', md: 'xl', lg: 'xxxl' }}
-      gap="lg"
     >
-      <Heading as="h2">{pkg.name}</Heading>
-      {getVersions(pkg).map((version) => (
-        <Stack key={version.label} flexDirection={{ xs: 'column', lg: 'row' }}>
+      <Stack alignItems="center" width="100%" justifyContent="space-between">
+        {!isFullPage ? (
+          <button onClick={handleOpen} className={togglePackageButtonClass}>
+            <Heading as="h2">{pkg.name}</Heading>
+
+            <Text
+              className={classNames(togglePackageIconClass, {
+                [togglePackageIconOpenClass]: isOpen,
+              })}
+            >
+              <MonoKeyboardArrowRight />
+            </Text>
+          </button>
+        ) : (
+          <Heading as="h2">{pkg.name}</Heading>
+        )}
+      </Stack>
+      <Stack
+        ref={ref}
+        flexDirection="column"
+        gap="lg"
+        className={classNames(versionWrapperClass, {
+          [versionWrapperOpenClass]: !isOpen,
+        })}
+      >
+        {versions.map((version) => (
           <Stack
-            paddingBlock="lg"
-            className={versionsSectionMetaClass}
-            paddingInlineEnd={{ xs: 'no', lg: 'xl' }}
+            key={version.label}
+            flexDirection={{ xs: 'column', lg: 'row' }}
+            paddingBlockStart="lg"
           >
-            <VersionMeta version={version} />
+            <Stack
+              paddingBlock="lg"
+              className={versionsSectionMetaClass}
+              paddingInlineEnd={{ xs: 'no', lg: 'xl' }}
+            >
+              <VersionMeta version={version} />
+            </Stack>
+            <Stack
+              flex={1}
+              className={versionsSectionClass}
+              paddingInlineStart={{ xs: 'md', xl: 'xxxl' }}
+              paddingInlineEnd="md"
+              paddingBlock="lg"
+              flexDirection="column"
+              gap="lg"
+            >
+              <Version version={version} />
+            </Stack>
           </Stack>
-          <Stack
-            flex={1}
-            className={versionsSectionClass}
-            paddingInlineStart={{ xs: 'md', xl: 'xxxl' }}
-            paddingInlineEnd="md"
-            paddingBlock="lg"
-            flexDirection="column"
-            gap="lg"
-          >
-            <Version version={version} />
+        ))}
+        {!isFullPage && (pkg.versionCount ?? 0) > versions.length && (
+          <Stack width="100%" justifyContent="flex-start">
+            <Link href={`/changelogs/${pkg.slug}`} passHref legacyBehavior>
+              <Button variant="info" endVisual={<MonoList />}>
+                See all logs
+              </Button>
+            </Link>
           </Stack>
-        </Stack>
-      ))}
+        )}
+      </Stack>
     </Stack>
   );
 };
diff --git a/packages/apps/docs/src/components/Changelog/styles.css.ts b/packages/apps/docs/src/components/Changelog/styles.css.ts
@@ -87,6 +87,7 @@ export const commitListItemTitleClass = style([
     selectors: {
       '&::before': {
         content: '•',
+        color: tokens.kda.foundation.color.text.base.default,
         paddingInlineEnd: tokens.kda.foundation.spacing.sm,
       },
     },
@@ -120,7 +121,17 @@ export const tagContainerClass = style([
     paddingBlockEnd: 'md',
   }),
   {
+    alignSelf: 'flex-start',
     ...responsiveStyle({
+      xs: {
+        width: '100%',
+      },
+      sm: {
+        width: '100px',
+      },
+      md: {
+        width: '100%',
+      },
       lg: {
         paddingInlineStart: 0,
         paddingBlockStart: 0,
@@ -191,3 +202,32 @@ globalStyle(
     color: tokens.kda.foundation.color.text.base.inverse['@init'],
   },
 );
+
+export const togglePackageButtonClass = style([
+  atoms({
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    gap: 'sm',
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    marginInline: 'no',
+    paddingInlineStart: 'no',
+    cursor: 'pointer',
+  }),
+]);
+
+export const togglePackageIconClass = style({
+  transition: 'transform .5s ease',
+});
+export const togglePackageIconOpenClass = style({
+  transform: 'rotate(90deg)',
+});
+
+export const versionWrapperClass = style({
+  overflow: 'hidden',
+  willChange: 'maxHeight',
+  transition: 'max-height 1s ease-in-out',
+});
+export const versionWrapperOpenClass = style({});
diff --git a/packages/apps/docs/src/components/Layout/components/Footer/Footer.tsx b/packages/apps/docs/src/components/Layout/components/Footer/Footer.tsx
@@ -43,6 +43,9 @@ export const Footer: FC = () => {
               Code of Conduct
             </FooterLink>
           </Link>
+          <Link href="/changelogs" passHref legacyBehavior>
+            <FooterLink href="/changelogs">Changelogs</FooterLink>
+          </Link>
         </Stack>
         <Stack
           justifyContent="space-around"

diff --git a/packages/apps/docs/src/config.yaml b/packages/apps/docs/src/config.yaml
@@ -481,6 +481,3 @@ pages:
           jsbindings:
             file: /reference/chainweb/chainwebjs.md
             url: /js-bindings
-#  changelogs:
-#    url: /changelogs
-#    file: /changelogs/index.tsx