feat(DocPage): Add updatedAt meta (#198)

demo/src/Components/DocPage/page-en.json

@@ -149,7 +149,8 @@
         "name": "Anastasia Karavaeva",
         "url": ""
       }
-    ]
+    ],
+    "updatedAt": "2024-01-15T15:00:00.000Z"
   },
   "toc": {
     "title": "Yandex.Cloud overview",

demo/src/Components/DocPage/page-he.json

@@ -114,7 +114,8 @@
         "name": "DataUI VCS Robot",
         "url": ""
       }
-    ]
+    ],
+    "updatedAt": "2024-01-15T15:00:00.000Z"
   },
   "toc": {
     "title": "סקירת פלטפורמה",

demo/src/Components/DocPage/page-ru.json

@@ -114,7 +114,8 @@
         "name": "DataUI VCS Robot",
         "url": ""
       }
-    ]
+    ],
+    "updatedAt": "2024-01-15T15:00:00.000Z"
   },
   "toc": {
     "title": "Обзор платформы",

src/components/ContributorAvatars/Avatars/Avatar.tsx

@@ -8,7 +8,7 @@ import {getUserIdentificator} from '../utils';
 
 import '../ContributorAvatars.scss';
 
-const b = block('contributor-avatars');
+const b = block('dc-contributor-avatars');
 
 interface AvatarProps {
     avatarData: AvatarData;

src/components/ContributorAvatars/Avatars/Details.tsx

@@ -12,7 +12,7 @@ import Avatar from './Avatar';
 
 import '../ContributorAvatars.scss';
 
-const b = block('contributor-avatars');
+const b = block('dc-contributor-avatars');
 
 interface DetailsProps {
     contributors: Contributor[];

src/components/ContributorAvatars/Avatars/HiddenAvatars.tsx

@@ -9,7 +9,7 @@ import Details from './Details';
 
 import '../ContributorAvatars.scss';
 
-const b = block('contributor-avatars');
+const b = block('dc-contributor-avatars');
 
 const LOWER_BOUND_MORE_CONTRIBUTORS = 9;
 

src/components/ContributorAvatars/ContributorAvatars.scss

@@ -26,43 +26,19 @@ $avatarWrapperBigSize: 33px;
     }
 }
 
-.contributor-avatars {
+.dc-contributor-avatars {
     &__one_contributor {
         display: flex;
         margin: 0 $avatarBorder;
         @include disable-link-styles;
 
-        & > * {
-            @include contributors-text();
-        }
-
-        @media screen and (max-width: map-get($screenBreakpoints, 'sm')) {
-            &_onlyAuthor > *:last-child {
-                margin-left: 5px;
-            }
-
-            & > *:last-child,
-            & > .desktop {
-                display: none;
-            }
-
-            &_onlyAuthor > *:last-child {
-                display: block;
-            }
-
-            & > *:not(:last-child) {
-                margin-right: 0px;
-            }
+        a:hover,
+        a:active {
+            color: var(--g-color-text-link-hover);
         }
 
-        @media screen and (min-width: map-get($screenBreakpoints, 'sm')) {
-            & > .mobile {
-                display: none;
-            }
-
-            & > *:last-child {
-                margin-right: 0px;
-            }
+        & > * {
+            @include contributors-text();
         }
     }
 

src/components/ContributorAvatars/ContributorAvatars.tsx

@@ -13,7 +13,7 @@ import {getName} from './utils';
 
 import './ContributorAvatars.scss';
 
-const b = block('contributor-avatars');
+const b = block('dc-contributor-avatars');
 
 const MAX_DISPLAYED_CONTRIBUTORS = 3;
 
@@ -31,8 +31,7 @@ const ContributorAvatars: React.FC<ContributorAvatarsProps> = (props) => {
     }
 
     if (contributors.length === 1) {
-        const oneAvatar = getOneAvatar(contributors[0], isAuthor, onlyAuthor);
-        return oneAvatar;
+        return getOneAvatar(contributors[0], isAuthor, onlyAuthor);
     }
 
     const displayedContributors = [...contributors];
@@ -79,17 +78,7 @@ function getOneAvatar(
 
     return (
         <div className={b('one_contributor', wrapperModifiers)}>
-            <div className={'desktop'}>{getRedirectingAvatar(avatarData, contributor.url)} </div>
-            <div className={'mobile'}>
-                {isAuthor && onlyAuthor ? (
-                    getRedirectingAvatar(avatarData, contributor.url, true)
-                ) : (
-                    <AvatarWithDescription
-                        contributor={contributor}
-                        avatarSize={AvatarSizes.SMALL}
-                    />
-                )}
-            </div>
+            {getRedirectingAvatar(avatarData, contributor.url)}
             <div>
                 <Link href={contributor.url}>{getName(contributor, isAuthor)}</Link>
             </div>

src/components/Contributors/Contributors.scss

@@ -1,8 +1,7 @@
 @import '../../styles/mixins';
 
-.contributors {
+.dc-contributors {
     display: flex;
-    margin: 0 0 32px;
 
     &__title {
         @include contributors-text();

src/components/Contributors/Contributors.tsx

@@ -8,7 +8,7 @@ import {ContributorAvatars} from '../ContributorAvatars';
 
 import './Contributors.scss';
 
-const b = block('contributors');
+const b = block('dc-contributors');
 
 export interface ContributorsProps {
     users: Contributor[];

src/components/DocPage/DocPage.scss

@@ -135,7 +135,7 @@
     }
 
     &__title {
-        margin-bottom: 8px;
+        margin-bottom: 12px;
 
         @include text-size(display-2);
     }
@@ -234,13 +234,20 @@
         }
     }
 
-    &__separator {
-        margin: 0 5px 32px 0;
-        align-self: center;
-    }
-
     &__page-contributors {
         display: flex;
+        margin-bottom: 24px;
+        flex-wrap: wrap;
+
+        & > div {
+            margin-right: 20px;
+            margin-bottom: 8px;
+            line-height: 24px;
+        }
+
+        & > div:last-child {
+            margin-right: 0;
+        }
     }
 
     @media screen and (max-width: 1440px) {

src/components/DocPage/DocPage.tsx

@@ -28,6 +28,7 @@ import {HTML} from '../HTML';
 import {MiniToc} from '../MiniToc';
 import {SearchBar, withHighlightedSearchWords} from '../SearchBar';
 import {TocNavPanel} from '../TocNavPanel';
+import UpdatedAtDate from '../UpdatedAtDate/UpdatedAtDate';
 
 import './DocPage.scss';
 
@@ -384,16 +385,25 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
 
         const author = this.renderAuthor(!meta?.contributors?.length);
         const contributors = this.renderContributors();
-
-        const separator = author && contributors && <div className={b('separator')}>{','}</div>;
+        const updatedAt = this.renderUpdatedAt(meta?.updatedAt);
 
         return (
             <div className={b('page-contributors')}>
-                {author} {separator} {contributors}
+                {author}
+                {contributors}
+                {updatedAt}
             </div>
         );
     }
 
+    private renderUpdatedAt(updatedAt?: string) {
+        if (!updatedAt) {
+            return null;
+        }
+
+        return <UpdatedAtDate updatedAt={updatedAt} />;
+    }
+
     private renderAuthor(onlyAuthor: boolean) {
         const {meta} = this.props;
 

src/components/UpdatedAtDate/UpdatedAtDate.scss

@@ -0,0 +1,11 @@
+@import '../../styles/mixins';
+
+.dc-updated-at-date {
+    display: flex;
+    font-size: 13px;
+    font-weight: 400;
+
+    &__wrapper {
+        align-self: center;
+    }
+}

src/components/UpdatedAtDate/UpdatedAtDate.tsx

@@ -0,0 +1,34 @@
+import React, {memo, useMemo} from 'react';
+
+import block from 'bem-cn-lite';
+
+import {getConfig} from '../../config';
+import {useTranslation} from '../../hooks';
+import {format} from '../../utils/date';
+
+import './UpdatedAtDate.scss';
+
+const b = block('dc-updated-at-date');
+
+export interface UpdatedAtDateProps {
+    updatedAt: string;
+}
+
+const UpdatedAtDate: React.FC<UpdatedAtDateProps> = ({updatedAt}) => {
+    const {t} = useTranslation('updated-at-date');
+
+    const updatedAtFormatted = useMemo(() => {
+        const {localeCode} = getConfig();
+        return format(updatedAt, 'longDate', localeCode);
+    }, [updatedAt]);
+
+    return (
+        <div className={b()}>
+            <div className={b('wrapper')}>
+                {t<string>('title')} {updatedAtFormatted}
+            </div>
+        </div>
+    );
+};
+
+export default memo(UpdatedAtDate);

src/i18n/en.json

@@ -57,7 +57,7 @@
     "title": "Written by"
   },
   "contributors": {
-    "title": "improved by"
+    "title": "Improved by"
   },
   "feedback": {
     "like-text": "Helpful",
@@ -113,5 +113,8 @@
   "paginator": {
     "next": "Next page",
     "prev": "Previous page"
+  },
+  "updated-at-date": {
+    "title": "Updated at"
   }
 }

src/i18n/ru.json

@@ -57,7 +57,7 @@
     "title": "Статья создана"
   },
   "contributors": {
-    "title": "улучшена"
+    "title": "Улучшена"
   },
   "feedback": {
     "like-text": "Статья полезна",
@@ -113,5 +113,8 @@
   "paginator": {
     "next": "Следующая страница",
     "prev": "Предыдущая страница"
+  },
+  "updated-at-date": {
+    "title": "Обновлена"
   }
 }

src/models/index.ts

@@ -19,6 +19,7 @@ export enum ControlSizes {
 export interface Config {
     lang?: string;
     loc?: Loc;
+    localeCode?: string;
 }
 
 export interface DocSettings {
@@ -92,6 +93,7 @@ export interface DocMeta {
     contributors?: Contributor[];
     author?: unknown | Contributor;
     __system?: Record<string, unknown>;
+    updatedAt?: string;
 }
 
 export interface TocData {