From 13ff2128f09da78da4c5fa76035abd72268ac3ce Mon Sep 17 00:00:00 2001
From: Visiky <736929286@qq.com>
Date: Tue, 25 May 2021 09:50:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(announcement):=20=E5=85=AC=E5=91=8A?=
 =?UTF-8?q?=E5=88=A4=E7=A9=BA=E4=B8=8D=E5=B1=95=E7=A4=BA=20(#327)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(announcement): 公告判空不展示

* fix: 优化顶部公告展示逻辑，example 演示页不展示头部公告

* feat: 优化图表上新公告展示逻辑：大于4个新增 demo 或全部新增，则直接使用 category 作为代替
---
 .../site/components/TopBanner.tsx             | 12 ++-
 .../gatsby-theme-antv/site/layouts/layout.tsx | 15 ++--
 .../site/templates/example.tsx                | 88 ++++++++++++-------
 example/examples/radar/basic/demo/meta.json   |  3 +-
 4 files changed, 70 insertions(+), 48 deletions(-)

diff --git a/@antv/gatsby-theme-antv/site/components/TopBanner.tsx b/@antv/gatsby-theme-antv/site/components/TopBanner.tsx
index 87985a93..bef8b64a 100644
--- a/@antv/gatsby-theme-antv/site/components/TopBanner.tsx
+++ b/@antv/gatsby-theme-antv/site/components/TopBanner.tsx
@@ -20,18 +20,16 @@ const TopBanner: React.FC<Props> = ({ announcement }) => {
     return announcement ? announcement.en : '';
   }, [announcement]);
 
-  return (
+  const content = get(announcement, i18n.language);
+
+  return content ? (
     <Announcement
-      message={
-        <span className={styles.topBannerAnnouncements}>
-          {get(announcement, i18n.language)}
-        </span>
-      }
+      message={<span className={styles.topBannerAnnouncements}>{content}</span>}
       bannerId={bannerId}
       localStorageId={BANNER_LOCALSTORAGE_KEY}
       style={{ borderRadius: 0, borderWidth: '1px 0' }}
     />
-  );
+  ) : null;
 };
 
 export default TopBanner;
diff --git a/@antv/gatsby-theme-antv/site/layouts/layout.tsx b/@antv/gatsby-theme-antv/site/layouts/layout.tsx
index 3b2c73b8..1029b3ea 100644
--- a/@antv/gatsby-theme-antv/site/layouts/layout.tsx
+++ b/@antv/gatsby-theme-antv/site/layouts/layout.tsx
@@ -193,6 +193,10 @@ const Layout: React.FC<LayoutProps> = ({ children, location, footerProps }) => {
       }
     : {};
 
+  const isExamplePage =
+    location.pathname.includes('/examples/') &&
+    !location.pathname.endsWith('/gallery');
+
   return (
     <>
       {rediectUrl && (
@@ -225,13 +229,12 @@ const Layout: React.FC<LayoutProps> = ({ children, location, footerProps }) => {
         ecosystems={ecosystems}
         {...logoProps}
       />
-      {/* 首页不展示 头部 banner */}
-      {!isHomePage && <TopBanner announcement={announcement} />}
+      {/* 首页和 example 演示页 不展示 头部 banner */}
+      {!isHomePage && !isExamplePage && (
+        <TopBanner announcement={announcement} />
+      )}
       <main className={styles.main}>{children}</main>
-      {!(
-        location.pathname.includes('/examples/') &&
-        !location.pathname.endsWith('/gallery')
-      ) && (
+      {!isExamplePage && (
         <Footer
           githubUrl={githubUrl}
           rootDomain="https://antv.vision"
diff --git a/@antv/gatsby-theme-antv/site/templates/example.tsx b/@antv/gatsby-theme-antv/site/templates/example.tsx
index ee0fc663..84f94d01 100644
--- a/@antv/gatsby-theme-antv/site/templates/example.tsx
+++ b/@antv/gatsby-theme-antv/site/templates/example.tsx
@@ -7,7 +7,7 @@ import {
   MenuUnfoldOutlined,
   VerticalAlignTopOutlined,
 } from '@ant-design/icons';
-import { groupBy, debounce } from 'lodash-es';
+import { groupBy, debounce, each, filter, find, size } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import Drawer from 'rc-drawer';
 import { useMedia } from 'react-use';
@@ -183,11 +183,11 @@ export default function Template({
   const [prev, next] = usePrevAndNext();
 
   // 获取 demo 的 Category 分类
-  const getDemoCategory = (demo: any) => {
-    if (!demo.postFrontmatter || !demo.postFrontmatter[i18n.language]) {
+  const getDemoCategory = (demo: any, lang = i18n.language) => {
+    if (!demo.postFrontmatter || !demo.postFrontmatter[lang]) {
       return 'OTHER';
     }
-    return demo.postFrontmatter[i18n.language].title;
+    return demo.postFrontmatter[lang].title;
   };
 
   const allDemosInCategory = groupBy(allDemos || [], getDemoCategory);
@@ -332,22 +332,40 @@ export default function Template({
     </Affix>
   );
 
-  /** 获取上新的 demo. 直接用英文 title 作为 id */
-  const demosOnTheNew = useMemo((): Array<{
+  type NewDemo = {
     title: string;
     id: string;
     category: string;
-  }> => {
-    return allDemos
-      .filter((demo) => demo.new)
-      .map((demo) => {
-        return {
-          title: demo.title[i18n.language],
-          id: demo.title.en,
-          category: getDemoCategory(demo),
-        };
-      });
-  }, [allDemos, i18n.language]);
+  };
+
+  /** 获取上新的 demo. 直接用英文 title 作为 id */
+  const demosOnTheNew = useMemo((): Array<NewDemo> => {
+    const result: NewDemo[] = [];
+
+    each(allDemosInCategory, (categoryDemos, category) => {
+      const newDemos = filter(categoryDemos, (d) => d.new);
+      // 大于4个新增 demo 或全部新增，则直接使用 category 作为代替
+      if (
+        size(newDemos) > 6 ||
+        (size(newDemos) && size(newDemos) === size(categoryDemos))
+      ) {
+        result.push({
+          title: category,
+          id: getDemoCategory(newDemos[0], 'en'),
+          category,
+        });
+      } else {
+        each(newDemos, (demo) =>
+          result.push({
+            title: demo.title[i18n.language],
+            id: demo.title.en,
+            category: getDemoCategory(demo),
+          }),
+        );
+      }
+    });
+    return result;
+  }, [allDemosInCategory, allDemos, i18n.language]);
 
   /** 公告 id */
   const bannerId = useMemo(() => {
@@ -364,23 +382,25 @@ export default function Template({
           }}
         />
         {/* 是否展示上新公告  */}
-        <Announcement
-          message={
-            <div>
-              {t('上新啦，点击直达：')}
-              {demosOnTheNew.map((demo, idx) => (
-                <span key={demo.title}>
-                  {idx !== 0 && '，'}
-                  <a href={`#category-${demo.category.replace(/\s/g, '')}`}>
-                    {demo.title}
-                  </a>
-                </span>
-              ))}
-            </div>
-          }
-          localStorageId={BANNER_LOCALSTORAGE_KEY}
-          bannerId={bannerId}
-        />
+        {demosOnTheNew.length && (
+          <Announcement
+            message={
+              <div>
+                {t('上新啦，点击直达：')}
+                {demosOnTheNew.map((demo, idx) => (
+                  <span key={demo.title}>
+                    {idx !== 0 && '，'}
+                    <a href={`#category-${demo.category.replace(/\s/g, '')}`}>
+                      {demo.title}
+                    </a>
+                  </span>
+                ))}
+              </div>
+            }
+            localStorageId={BANNER_LOCALSTORAGE_KEY}
+            bannerId={bannerId}
+          />
+        )}
         {Categories.map((category: string, i) => (
           <div key={i}>
             {category !== 'OTHER' && (
diff --git a/example/examples/radar/basic/demo/meta.json b/example/examples/radar/basic/demo/meta.json
index 3ce3b28d..5047a642 100644
--- a/example/examples/radar/basic/demo/meta.json
+++ b/example/examples/radar/basic/demo/meta.json
@@ -28,7 +28,8 @@
         "zh": "雷达图-tooltip 添加辅助线",
         "en": "Rardar chart with tooltip crosshairs"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*r46-T43zmzwAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*r46-T43zmzwAAAAAAAAAAAAAARQnAQ",
+      "new": true
     }
   ]
 }