feat: add oss eu news and collection tag on report page

apps/web/src/common/components/CollectionTag.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/navigation';
+import Tooltip from '@common/components/Tooltip';
+import { getSecondIdentName } from '@common/collectionsI18n';
+import cls from 'classnames';
+
+const CollectionTag = ({
+  collections,
+  className,
+}: {
+  collections: string[];
+  className: string;
+}) => {
+  const { t, i18n } = useTranslation();
+  const router = useRouter();
+  const first = collections?.[0];
+
+  let restCollections: string[] = [];
+  if (collections?.length > 1) {
+    restCollections = collections?.slice(1).map((item) => {
+      return getSecondIdentName(item, i18n.language);
+    });
+  }
+
+  return (
+    <div
+      className={cls(
+        'text-secondary flex cursor-pointer items-center text-xs',
+        className
+      )}
+    >
+      {first ? (
+        <>
+          <div
+            className="bg-smoke rounded px-2 py-1.5"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              router.push(`/collection/${first}`);
+            }}
+          >
+            {getSecondIdentName(first, i18n.language)}
+          </div>
+          {collections?.length > 1 ? (
+            <Tooltip
+              title={
+                <div className="p-2 text-white">
+                  {restCollections?.join(', ')}
+                </div>
+              }
+            >
+              <div className="ml-1">+{collections.length - 1}</div>
+            </Tooltip>
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export default CollectionTag;

apps/web/src/common/components/Questionnaire.tsx

@@ -11,12 +11,12 @@ const Questionnaire = () => {
     return (
       <div className="z-modal fixed bottom-[100px] right-10 ">
         <Link
-          href="https://mp.weixin.qq.com/s?__biz=MzkxMDQzNjc2MQ==&mid=2247484166&idx=1&sn=8744720b2b60b5c353aa468fe91d85f0&chksm=c12a33f0f65dbae6a4dc38ec08ab9594545cd2ec3427ae32e4c4523e787ae787f3b270c91ec0&token=1781014651&lang=zh_CN#rd"
+          href="https://www.youtube.com/watch?v=FNK3--dtR_4"
           target="_blank"
           className="h-[124px] w-[136px]"
         >
           <Image
-            src="/images/questionnaire/icon.png"
+            src="/images/questionnaire/OSSUMMIT@zh.png"
             width={124}
             height={144}
             alt={''}
@@ -27,7 +27,7 @@ const Questionnaire = () => {
           />
         </Link>
         <span
-          className="absolute top-0 right-0 cursor-pointer p-1"
+          className="absolute top-0 right-0 cursor-pointer"
           onClick={() => {
             setClose(true);
           }}
@@ -46,7 +46,43 @@ const Questionnaire = () => {
       </div>
     );
   }
-  return null;
+  return (
+    <div className="z-modal fixed bottom-[100px] right-10 ">
+      <Link
+        href="https://www.youtube.com/watch?v=FNK3--dtR_4"
+        target="_blank"
+        className="h-[124px] w-[136px]"
+      >
+        <Image
+          src="/images/questionnaire/[email protected]"
+          width={124}
+          height={144}
+          alt={''}
+          style={{
+            maxWidth: '100%',
+            height: 'auto',
+          }}
+        />
+      </Link>
+      <span
+        className="absolute top-0 right-0 cursor-pointer"
+        onClick={() => {
+          setClose(true);
+        }}
+      >
+        <Image
+          src="/images/questionnaire/[email protected]"
+          width={22}
+          height={22}
+          alt={''}
+          style={{
+            maxWidth: '100%',
+            height: 'auto',
+          }}
+        />
+      </span>
+    </div>
+  );
 };
 
 export default Questionnaire;

apps/web/src/modules/analyze/components/NavBar/LabelItems.tsx

@@ -1,65 +1,22 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react';
+import React from 'react';
 import { useTranslation } from 'next-i18next';
 import useCompareItems from '@modules/analyze/hooks/useCompareItems';
 import { getProvider } from '@common/utils';
-import ColorSwitcher from '@modules/analyze/components/CompareBar/ColorSwitcher';
 import { Level } from '@modules/analyze/constant';
-import { useClickAway } from 'react-use';
-import { useResizeDetector } from 'react-resize-detector';
 import classnames from 'classnames';
-import Popper from '@mui/material/Popper';
 import ProviderIcon from '../ProviderIcon';
+import CollectionTag from '@common/components/CollectionTag';
 
 const LabelItems = () => {
   const { t } = useTranslation();
   const { compareItems } = useCompareItems();
-  const [hiddenIndex, setHiddenIndex] = useState(-1);
-  const [hiddenVisible, setHiddenVisible] = useState(false);
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const hiddenRef = useRef<HTMLDivElement>(null);
+  const item = compareItems.length > 0 ? [compareItems[0]] : [];
 
-  const computeWidth = () => {
-    if (ref) {
-      const parentsWidth = ref.current.offsetWidth;
-      let childrenWidth = 0;
-      const index = [...ref.current.children].findIndex((item, index) => {
-        if (item.id !== 'more') {
-          childrenWidth += item.offsetWidth;
-          if (parentsWidth < childrenWidth) {
-            return index;
-          }
-        }
-      });
-      setHiddenIndex(index);
-    }
-  };
-  const onResize = useCallback(computeWidth, [hiddenIndex, compareItems]);
-  useEffect(computeWidth, [compareItems]);
-  useClickAway(hiddenRef, () => {
-    setTimeout(() => {
-      setHiddenVisible(false);
-    }, 200);
-  });
-
-  const { ref } = useResizeDetector({
-    handleHeight: false,
-    refreshMode: 'debounce',
-    refreshRate: 200,
-    onResize,
-  });
-
-  const style = {
-    background: 'linear-gradient(270deg, #FFFFFF 0%, rgba(255,255,255,0) 100%)',
-  };
   return (
     <>
-      <div
-        className="relative flex h-6 flex-1 items-center overflow-hidden"
-        ref={ref}
-      >
-        {compareItems.map(({ name, label, level }, index) => {
+      <div className="relative flex h-6 flex-1 items-center overflow-hidden">
+        {item.map(({ name, label, level, collections }) => {
           const host = getProvider(label);
-
           let labelNode = (
             <span className={'ml-1 mr-1 font-semibold'}>{name}</span>
           );
@@ -78,92 +35,21 @@ const LabelItems = () => {
           }
 
           return (
-            <div
-              key={label}
-              className={classnames('flex items-center', {
-                invisible: hiddenVisible && index >= hiddenIndex,
-              })}
-            >
+            <div key={label} className={classnames('flex items-center')}>
               <ProviderIcon provider={host} />
               {labelNode}
-              {compareItems.length > 1 && <ColorSwitcher label={label} />}
               {level === Level.COMMUNITY && (
                 <div className="ml-2 rounded-[10px] bg-[#FFF9F2] px-2 py-0.5 text-xs text-[#D98523]">
                   {t('home:community')}
                 </div>
               )}
-              {index < compareItems.length - 1 ? (
-                <span className="px-2 text-slate-300">vs</span>
-              ) : null}
+              <CollectionTag
+                className={'col-span-2 mx-2'}
+                collections={collections}
+              />
             </div>
           );
         })}
-        {hiddenIndex !== -1 && (
-          <div
-            className="absolute right-0 top-0 h-6 w-24 shrink-0 cursor-pointer"
-            style={style}
-            id="more"
-          >
-            <div
-              className="ml-14  h-6 w-8 rounded-[24px] border border-[#EBEFF4] bg-[#f4f4f4] text-center leading-6"
-              onClick={(event) => {
-                setAnchorEl(event.currentTarget);
-                setHiddenVisible(true);
-              }}
-            >
-              +{compareItems.length - hiddenIndex}
-            </div>
-          </div>
-        )}
-        <Popper
-          open={hiddenVisible}
-          anchorEl={anchorEl}
-          placement={'bottom-end'}
-          sx={{
-            zIndex: 9999,
-          }}
-        >
-          <div
-            ref={hiddenRef}
-            className="flex  flex-col flex-wrap justify-around overflow-hidden rounded bg-white px-2 pt-2 pb-1  drop-shadow-2xl"
-          >
-            {compareItems
-              .filter((item, index) => index >= hiddenIndex)
-              .map(({ name, label, level }) => {
-                const host = getProvider(label);
-
-                let labelNode = (
-                  <span className={'ml-1 mr-1 font-semibold'}>{name}</span>
-                );
-
-                if (level === Level.REPO) {
-                  labelNode = (
-                    <a
-                      className="ml-1 mr-1 font-semibold hover:underline"
-                      href={label}
-                      target="_blank"
-                      rel={'noreferrer'}
-                    >
-                      {name}
-                    </a>
-                  );
-                }
-
-                return (
-                  <div key={label} className={classnames('flex items-center')}>
-                    <ProviderIcon provider={host} />
-                    {labelNode}
-                    {compareItems.length > 1 && <ColorSwitcher label={label} />}
-                    {level === Level.COMMUNITY && (
-                      <div className="ml-2 rounded-[10px] bg-[#FFF9F2] px-2 py-0.5 text-xs text-[#D98523]">
-                        {t('home:community')}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-          </div>
-        </Popper>
       </div>
       <div className="hidden md:block">
         {/* todo show compare items in mobile */}

apps/web/src/modules/analyze/context/ChartsDataProvider.tsx

@@ -54,7 +54,7 @@ const ChartsDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
         level,
         start: timeStart,
         end: timeEnd,
-        repoType: repoType,
+        repoType: level === Level.COMMUNITY ? repoType : '',
       };
       return {
         queryKey: useMetricQuery.getKey(variables),
@@ -80,7 +80,7 @@ const ChartsDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
         level,
         start: timeStart,
         end: timeEnd,
-        repoType: repoType,
+        repoType: level === Level.COMMUNITY ? repoType : '',
       };
       const key = useMetricQuery.getKey(variables);
       return {

apps/web/src/modules/analyze/context/StatusContext.tsx

@@ -4,7 +4,7 @@ import { Level } from '../constant';
 
 type Item = Pick<
   StatusVerifyQuery['analysisStatusVerify'],
-  'label' | 'status' | 'shortCode'
+  'label' | 'status' | 'shortCode' | 'collections'
 >;
 
 export type VerifiedLabelItem = {

apps/web/src/modules/analyze/hooks/useCompareItems.ts

@@ -5,10 +5,12 @@ import { Level } from '@modules/analyze/constant';
 const useCompareItems = () => {
   const { verifiedItems } = useStatusContext();
 
-  const items = verifiedItems.map(({ label, level, shortCode }) => {
-    const name = level === Level.REPO ? getPathname(label) : label;
-    return { label, level, shortCode, name };
-  });
+  const items = verifiedItems.map(
+    ({ label, level, shortCode, collections }) => {
+      const name = level === Level.REPO ? getPathname(label) : label;
+      return { label, level, shortCode, name, collections };
+    }
+  );
 
   const ids = items.map((i) => i.shortCode);
 

apps/web/src/modules/home/LatestNews/DatePicker.tsx

@@ -13,7 +13,7 @@ const DatePicker = () => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
 
-  const bookedDays = [new Date(2023, 7, 23)];
+  const bookedDays = [new Date(2023, 8, 21)];
   const bookedStyle = { border: '2px solid #3A5BEF', borderRadius: 'none' };
 
   useClickAway(popoverRef, () => {
@@ -44,8 +44,10 @@ const DatePicker = () => {
         >
           <div className="mt-1.5 h-2 w-2 rounded-full bg-[#00B400]"></div>
           <div className="w-[200px] text-xs">
-            Compass围炉夜话——“开源”LLMs是不是真开源
-            <div className="mt-1 text-xs text-[#727272]">19:30 (UTC-8)</div>
+            Compass Talk——Open Source Summit Europe 2023
+            <div className="mt-1 text-xs text-[#727272]">
+              11:00 - 11:40 (UTC+2)
+            </div>
           </div>
         </div>
       </Popper>

apps/web/src/modules/home/LatestNews/NewsData.json

@@ -9,10 +9,10 @@
     },
     {
       "type": "Report",
-      "title": "Explore Compass Lab, take you easy to create the open source LLMs project evaluation model!",
-      "title_cn": "探秘Compass实验室，带你轻松玩转开源LLMs项目评估模型！",
+      "title": "OSS Compass at OSS EU 2023",
+      "title_cn": "OSS Compass参加2023欧洲开源峰会",
       "img": "/images/home/report1.png",
-      "url": "/blog/explore-compass-lab"
+      "url": "/blog/compass-at-oss-eu"
     },
     {
       "type": "Event",