preliminary commit

config/searchExcludeRoutes.json

@@ -1 +1 @@
-["/automations/automations-by-event/welcome-series", "/updates/HVG123РЕ97E"]
+["/automations/automations-by-event/welcome-series", "/updates/HVG123РЕ97E", "/updates/BC1ADF523"]

docs/account-settings/how-to-create-sublogin.md

@@ -1,6 +1,12 @@
 ---
 sidebar_position: 1
 sidebar_label: 'Как создать учётную запись'
+recent_article:
+  status: update
+  theses:
+    - Keisgfsgd
+    - Lorem
+    - fgdgsfgasfgafga asdfadfasdf
 ---
 
 # Как создать учётную запись для нового пользователя

docs/automations/autoimport/how-to-set-autoexport.mdx

@@ -1,6 +1,8 @@
 ---
 sidebar_position: 2
 sidebar_label: 'Экспорт по шаблону'
+recent_article:
+  status: new
 ---
 
 # Как настроить регулярный экспорт по шаблону

docs/updates/docs-list/index.mdx

@@ -0,0 +1,11 @@
+---
+slug: '/updates/docs-list'
+title: 'Новое в Базе знаний'
+sidebar_position: 2
+recent_article:
+  ignore: true
+---
+
+import DocCardList from '@site/src/theme/DocCardList';
+
+<DocCardList />

docs/updates/docs-list/recent-articles.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Обновления документации'
+description: ''
+sidebar_position: 2
+recent_article:
+  ignore: true
+---
+
+import { RecentlyUpdatedArticlesIframe } from '@site/src/components/RecentlyUpdatedArticles';
+
+<RecentlyUpdatedArticlesIframe />

docs/updates/list/index.mdx

@@ -1,9 +1,11 @@
 ---
 slug: '/updates/list'
-title: 'Список обновлений'
+title: 'Новое в платорме'
 description: 'Всё про email-рассылки: как создавать выпуски, персонализировать контент и что нужно настраивать дополнительно'
-sidebar_position: 2
+sidebar_position: 1
 hide_title: true
+recent_article:
+  ignore: true
 ---
 
 import ChangeLog, { toc as changeLogToc } from './2024/updates-november-2024.mdx';

docusaurus.config.ts

@@ -42,13 +42,8 @@ const config: Config = {
         googleTagManager: {
           containerId: baseGTM,
         },
-        docs: {
-          routeBasePath: '/',
-          sidebarPath: require.resolve('./sidebars.js'),
-          showLastUpdateTime: true,
-          editUrl: ({ docPath }) =>
-            `https://github.com/sendsay-ru/sendsay-docs/edit/stable/docs/${docPath}`,
-        },
+        // we use extended version to get recently updated articles
+        docs: false,
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },

i18n/en/code.json

@@ -163,9 +163,13 @@
     "description": "Title for link to heading"
   },
   "lastUpdated.atDate": {
-    "message": "Updated: ",
+    "message": "Updated:",
     "description": "The words used to describe on which date a page has been last updated"
   },
+  "lastUpdated.createDate": {
+    "message": "Published:",
+    "description": "The words used to describe on which date a page has been published"
+  },
   "theme.lastUpdated.byUser": {
     "message": " by {user}",
     "description": "The words used to describe by who the page has been last updated"

i18n/en/docusaurus-plugin-content-docs/current/updates/docs-list/index.mdx

@@ -0,0 +1,7 @@
+---
+hide_title: true
+---
+
+import { Redirect } from '@docusaurus/router';
+
+<Redirect to="/404" />;

i18n/en/docusaurus-plugin-content-docs/current/updates/docs-list/recent-articles.mdx

@@ -0,0 +1,7 @@
+---
+hide_title: true
+---
+
+import { Redirect } from '@docusaurus/router';
+
+<Redirect to="/404" />;

package.json

@@ -47,11 +47,14 @@
     "docusaurus-plugin-yandex-metrica": "^1.2.0",
     "glob": "^8.0.3",
     "memfs": "^3.4.2",
+    "node-polyfill-webpack-plugin": "4.1.0",
     "postcss": "^8.4.33",
     "prism-react-renderer": "^2.1.0",
+    "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "webpack": "^5.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.6.3",

plugins.js

@@ -4,6 +4,17 @@ const yandexMetricaCounter = process.env.YANDEX_METRICA_COUNTER_ID;
 const plugins = [
   './src/plugins/iframe-detected',
   './src/plugins/tailwind',
+  './src/plugins/webpackConfig',
+  [
+    './src/plugins/docs-plugin-extended',
+    {
+      routeBasePath: '/',
+      sidebarPath: require.resolve('./sidebars.js'),
+      showLastUpdateTime: true,
+      editUrl: ({ docPath }) =>
+        `https://github.com/sendsay-ru/sendsay-docs/edit/stable/docs/${docPath}`,
+    },
+  ],
   [
     'docusaurus-lunr-search',
     {

src/components/CustomLastUpdate/CustomLastUpdate.tsx

@@ -1,36 +1,77 @@
 import React from 'react';
 import { translate } from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import clsx from 'clsx';
 
 const NBSP = '\u00A0';
 
-export const CustomLastUpdate = ({ lastUpdatedAt }: { lastUpdatedAt: number }): JSX.Element => {
+export const enum CustomLastUpdateType {
+  Tag = 'tag',
+  UpdateDate = 'updateDate',
+  CreationDate = 'creationDate',
+}
+
+interface CustomLastUpdateProps {
+  lastUpdatedAt: number;
+  type: CustomLastUpdateType;
+  frontMatter?: {
+    recent_article?: {
+      ignore: boolean;
+    };
+  };
+}
+
+const UpdateMark = (): JSX.Element => <div className="w-2 h-2 bg-blue-600 rounded-full" />;
+const NewMark = (): JSX.Element => <div className="w-2 h-2 bg-green-600 rounded-full" />;
+
+export const CustomLastUpdate = ({
+  lastUpdatedAt,
+  frontMatter = {},
+  type = CustomLastUpdateType.Tag,
+}: CustomLastUpdateProps): JSX.Element => {
   const { i18n } = useDocusaurusContext();
 
   const isRuLocale = i18n.currentLocale === 'ru';
-  const formattedUpdatedAt = lastUpdatedAt * 1000;
+
+  if (frontMatter.recent_article && frontMatter.recent_article.ignore) {
+    return null;
+  }
 
   return (
-    <div className="rounded-sm bg-blue-50 px-1.5 py-0.5 text-blue-500 text-xs font-normal w-fit mb-3">
-      <span>
-        {translate({ id: 'lastUpdated.atDate', message: 'Обновлено: ' })}
+    <div
+      className={clsx('rounded-sm px-1.5 py-0.5 text-xs font-normal w-fit', {
+        'text-blue-500 bg-blue-50 mb-3': type === CustomLastUpdateType.Tag,
+        'text-gray-800 italic':
+          type === CustomLastUpdateType.UpdateDate || type === CustomLastUpdateType.CreationDate,
+      })}
+    >
+      <div className="flex flex-row">
+        <div className="flex gap-1.5 items-center">
+          {type === CustomLastUpdateType.UpdateDate && <UpdateMark />}
+          {type === CustomLastUpdateType.CreationDate && <NewMark />}
+
+          {type === CustomLastUpdateType.CreationDate
+            ? translate({ id: 'lastUpdated.createDate', message: 'Опубликовано:' })
+            : translate({ id: 'lastUpdated.atDate', message: 'Обновлено:' })}
+          {NBSP}
+        </div>
 
-        <time dateTime={new Date(formattedUpdatedAt).toISOString()}>
+        <time dateTime={new Date(lastUpdatedAt).toISOString()}>
           {new Intl.DateTimeFormat(i18n.currentLocale, {
             day: 'numeric',
             month: 'long',
             year: isRuLocale ? undefined : 'numeric',
             timeZone: 'UTC',
-          }).format(formattedUpdatedAt)}
+          }).format(lastUpdatedAt)}
 
           {NBSP}
 
           {isRuLocale &&
             new Intl.DateTimeFormat('ru', {
               year: 'numeric',
-            }).format(formattedUpdatedAt)}
+            }).format(lastUpdatedAt)}
         </time>
-      </span>
+      </div>
     </div>
   );
 };

src/components/Feedback/Feedback.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import { translate } from '@docusaurus/Translate';
-import { useDoc } from '@docusaurus/theme-common/internal';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
 import { PositiveFeedbackIcon, NegativeFeedbackIcon } from '../../ui/icons';
 import { pushAnalytics } from '../../utils/analytics';
 

src/components/RecentlyUpdatedArticles/RecentlyUpdatedArticles.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import { CustomLastUpdate } from '../CustomLastUpdate';
+import { CustomLastUpdateType } from '../CustomLastUpdate/CustomLastUpdate';
+import { RECENT_ARTICLES_CONTENT_ID } from './constants.js';
+
+const NBSP = '\u00A0';
+
+const ArticleStatus = {
+  New: 'new',
+  Updated: 'updated',
+};
+
+const RecentlyUpdatedArticlesCard = ({ children, slug }) => {
+  const handleClick = () => {
+    document.dispatchEvent(new CustomEvent('redirect', { detail: { slug } }));
+  };
+
+  return (
+    <div
+      className="card group p-4 rounded-xl border-solid border border-gray-300 gap-3 flex flex-col hover:cursor-pointer"
+      onClick={handleClick}
+    >
+      {children}
+    </div>
+  );
+};
+
+const RecentlyUpdatedArticlesChanges = ({ frontMatter }) => {
+  const theses = frontMatter?.recent_article?.theses;
+
+  if (!theses) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col">
+      {theses.map((item, index) => (
+        <span className="text-gray-800 text-xs" key={index}>
+          —{NBSP}
+          {item}
+          {index === theses.length - 1 ? '.' : ';'}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+const RecentlyUpdatedArticles = ({ recentArticles }) => (
+  <Layout>
+    <div className="flex flex-col gap-4" id={RECENT_ARTICLES_CONTENT_ID}>
+      {recentArticles.map(({ title, lastUpdatedAt, frontMatter, slug }) => (
+        <RecentlyUpdatedArticlesCard key={slug} slug={slug}>
+          <div className="flex flex-col gap-2">
+            <h5 className="text-gray-800 text-base font-medium m-0 group-hover:text-blue-600">
+              {title}
+            </h5>
+
+            <CustomLastUpdate
+              lastUpdatedAt={lastUpdatedAt}
+              type={
+                frontMatter.recent_article?.status === ArticleStatus.New
+                  ? CustomLastUpdateType.CreationDate
+                  : CustomLastUpdateType.UpdateDate
+              }
+            />
+          </div>
+
+          <RecentlyUpdatedArticlesChanges frontMatter={frontMatter} />
+        </RecentlyUpdatedArticlesCard>
+      ))}
+    </div>
+  </Layout>
+);
+
+export default RecentlyUpdatedArticles;

src/components/RecentlyUpdatedArticles/RecentlyUpdatedArticlesIframe.tsx

@@ -0,0 +1,54 @@
+import React, { useRef, useState } from 'react';
+import { RECENT_ARTICLES_CONTENT_ID, RECENT_ARTICLES_TEMP_URL } from './constants.js';
+import { useHistory } from '@docusaurus/router';
+
+export const RecentlyUpdatedArticlesIframe = () => {
+  const history = useHistory();
+  const iframeRef = useRef<HTMLIFrameElement>();
+
+  const [isError, setIsError] = useState(false);
+
+  const handleRedirectInIframe: EventListener = ({ detail }: CustomEvent) => {
+    if (detail?.slug) {
+      history.push(detail.slug);
+    }
+  };
+
+  const resizeIframe = () => {
+    if (!iframeRef.current) {
+      return;
+    }
+
+    const recentArticleContentElement = iframeRef.current.contentWindow.document.getElementById(
+      RECENT_ARTICLES_CONTENT_ID
+    );
+
+    if (!recentArticleContentElement) {
+      setIsError(true);
+    }
+
+    iframeRef.current.style.height = `${recentArticleContentElement?.scrollHeight}px`;
+
+    iframeRef.current?.contentWindow.document.addEventListener('redirect', handleRedirectInIframe);
+  };
+
+  if (isError) {
+    return <span>На странице произошёл сбой.</span>;
+  }
+
+  return (
+    <iframe
+      ref={iframeRef}
+      src={RECENT_ARTICLES_TEMP_URL}
+      name="latest-articles"
+      className="w-full"
+      style={{
+        border: 'none',
+        outline: 'none',
+      }}
+      onLoad={resizeIframe}
+      scrolling="no"
+      seamless="seamless"
+    />
+  );
+};

src/components/RecentlyUpdatedArticles/constants.js

@@ -0,0 +1,3 @@
+export const RECENT_ARTICLES_TEMP_URL = '/updates/BC1ADF523';
+
+export const RECENT_ARTICLES_CONTENT_ID = 'recently-updated-articles';

src/components/RecentlyUpdatedArticles/index.js

@@ -0,0 +1 @@
+export { RecentlyUpdatedArticlesIframe } from './RecentlyUpdatedArticlesIframe';

src/plugins/docs-plugin-extended/getRecentArticles.js

@@ -0,0 +1,10 @@
+const RECENT_ARTICLES_LIMIT = 5;
+
+export const getRecentlyUpdatedArticles = (docs) =>
+  docs
+    .filter(
+      ({ unlisted, draft, frontMatter }) =>
+        !unlisted && !draft && !frontMatter?.recent_article?.ignore
+    )
+    .sort((docA, docB) => docB.lastUpdatedAt - docA.lastUpdatedAt)
+    .slice(0, RECENT_ARTICLES_LIMIT);