add dynamic default icon

im6 · Nov 16, 2023 · ca9cbed · ca9cbed
1 parent 3408570
commit ca9cbed
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 46 deletions.
diff --git a/packages/javascript-fun/src/client/main.ts b/packages/javascript-fun/src/client/main.ts
@@ -2,10 +2,26 @@ import './layout';
 import '../components/GitBox/style.less';
 import gitPageStyle from '../pages/GitPage/style.less';
 import { debounce, getNow } from './util';
-import { defaultIcon } from '../config';
+import { iconCdnUrl } from '../config';
 
 const { updateTime } = gitPageStyle;
 
+const defaultIcon = (function getIconFromDate() {
+  const now = new Date();
+  const month = now.getMonth();
+  const day = now.getDate();
+  if (month === 2 && day > 14 && day < 18) {
+    return 'default-irish.svg';
+  }
+  if (month === 9 && day > 29) {
+    return 'default-halloween.svg';
+  }
+  if (month === 11 && day > 19 && day < 25) {
+    return 'default-xmas.svg';
+  }
+  return 'default-github-0.svg';
+})();
+
 const setTime = () => {
   const timeElem = (
     document.getElementsByClassName(updateTime) as HTMLCollectionOf<HTMLElement>
@@ -19,9 +35,20 @@ const lazyLoadImg = () => {
   for (let j = 0; j < imgLen; j += 1) {
     const imgObj = imgElems[j];
     const { i } = imgObj.dataset;
-    if (i) {
-      imgObj.src = imgObj.src.replace(defaultIcon, i);
-      imgObj.removeAttribute('data-i');
+    if (!i) continue;
+    imgObj.src = `${iconCdnUrl}/${i}`;
+    imgObj.removeAttribute('data-i');
+  }
+};
+
+const renderDefaultIcon = () => {
+  const imgElems = document.getElementsByTagName('img');
+  const imgLen = imgElems.length;
+  for (let j = 0; j < imgLen; j += 1) {
+    const imgObj = imgElems[j];
+    const src = imgObj.getAttribute('src');
+    if (!src) {
+      imgObj.src = `${iconCdnUrl}/${defaultIcon}`;
     }
   }
 };
@@ -37,3 +64,4 @@ const initLazyLoad = debounce(
 
 window.addEventListener('scroll', initLazyLoad);
 setTime();
+renderDefaultIcon();
diff --git a/packages/javascript-fun/src/components/GitBox/index.spec.tsx b/packages/javascript-fun/src/components/GitBox/index.spec.tsx
@@ -9,7 +9,6 @@ describe('render properly', () => {
         url="//www.cnn.com"
         name={name}
         img="news"
-        imgSrc="news"
         star={123}
         inactiveDate="Jun 22 2020"
       />

diff --git a/packages/javascript-fun/src/components/GitBox/index.tsx b/packages/javascript-fun/src/components/GitBox/index.tsx
@@ -5,8 +5,7 @@ import style from './style.less';
 interface GitBoxProps {
   url: string;
   name: string;
-  img: string;
-  imgSrc: string;
+  img?: string;
   star: number;
   lazyImg?: string;
   inactiveDate: string;
@@ -16,15 +15,14 @@ const GitBox: FC<GitBoxProps> = ({
   name,
   url,
   img,
-  imgSrc,
   star,
   lazyImg,
   inactiveDate,
 }) => (
   <div
     className={`pure-u-xl-1-5 pure-u-lg-1-4 pure-u-md-1-3 pure-u-sm-1-2 pure-u-1-2 ${style.box}`}
   >
-    <img src={`${imgSrc}/${img}`} alt={name} data-i={lazyImg} />
+    <img src={img} alt={name} data-i={lazyImg} />
     <div className={style.rightText}>
       <h3>{name}</h3>
       <a href={url} aria-label={`${star} stars in Github`}>

diff --git a/packages/javascript-fun/src/config.ts b/packages/javascript-fun/src/config.ts
@@ -33,22 +33,6 @@ export const hideGithubCorner = false;
 export const showDisqus = false; // also uncomment import in /src/client/layout/index.js
 export const showAdsense = false;
 export const gitRepo = `${githubUrl}/${repoUrl}`;
-/* istanbul ignore next */
-export const defaultIcon = (function getIconFromDate() {
-  const now = new Date();
-  const month = now.getMonth();
-  const day = now.getDate();
-  if (month === 2 && day > 14 && day < 18) {
-    return 'default-irish.svg';
-  }
-  if (month === 9 && day > 25) {
-    return 'default-halloween.svg';
-  }
-  if (month === 11 && day > 10 && day < 25) {
-    return 'default-xmas.svg';
-  }
-  return 'default-github-0.svg';
-})();
 
 /* istanbul ignore next */
 export const primaryYear = (

diff --git a/packages/javascript-fun/src/pages/GitPage/index.spec.tsx b/packages/javascript-fun/src/pages/GitPage/index.spec.tsx
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import GitPage from '.';
+import GitPage from './index';
 
 describe('render properly', () => {
   test('render correct', () => {
@@ -38,7 +38,6 @@ describe('render properly', () => {
         nonLazyImgIndex={-1}
         githubUrl="github.com"
         iconCdnUrl="aws.com"
-        defaultIcon="default.img"
         source={src}
         adSenseClient="abc"
         adSenseUnits={['1', '2', '3']}
@@ -50,7 +49,6 @@ describe('render properly', () => {
         nonLazyImgIndex={1}
         githubUrl="github.com"
         iconCdnUrl="aws.com"
-        defaultIcon="default.img"
         source={src}
         adSenseClient="abc"
         adSenseUnits={['1', '2', '3']}

diff --git a/packages/javascript-fun/src/pages/GitPage/index.tsx b/packages/javascript-fun/src/pages/GitPage/index.tsx
@@ -13,7 +13,6 @@ interface GitPageProps {
   source: GitGroupSchema[];
   githubUrl: string;
   iconCdnUrl: string;
-  defaultIcon: string;
   nonLazyImgIndex: number;
   adSenseClient: string;
   adSenseUnits: string[];
@@ -24,7 +23,6 @@ const GitPage: FC<GitPageProps> = ({
   source,
   githubUrl,
   iconCdnUrl,
-  defaultIcon,
   nonLazyImgIndex,
   adPositions,
   adSenseClient,
@@ -43,18 +41,29 @@ const GitPage: FC<GitPageProps> = ({
               anchorId={v.anchorId}
               linkIconUrl={`${iconCdnUrl}/fa-link.svg`}
             >
-              {v.list.map((v1) => (
-                <GitBox
-                  key={v1.github}
-                  name={v1.name}
-                  img={(!lazyLoad && v1.img) || defaultIcon}
-                  imgSrc={iconCdnUrl}
-                  star={v1.star}
-                  url={`${githubUrl}/${v1.github}`}
-                  lazyImg={lazyLoad ? v1.img : undefined}
-                  inactiveDate={v1.inactiveDate}
-                />
-              ))}
+              {v.list.map((v1) => {
+                let img = v1.img ? `${iconCdnUrl}/${v1.img}` : '';
+                let lazyImg;
+
+                if (lazyLoad) {
+                  img = '';
+                  if (v1.img) {
+                    lazyImg = v1.img;
+                  }
+                }
+
+                return (
+                  <GitBox
+                    key={v1.github}
+                    name={v1.name}
+                    img={img}
+                    star={v1.star}
+                    url={`${githubUrl}/${v1.github}`}
+                    lazyImg={lazyImg}
+                    inactiveDate={v1.inactiveDate}
+                  />
+                );
+              })}
             </BoxGroup>
             {adIndex > -1 && (
               <AdUnit client={adSenseClient} slot={adSenseUnits[adIndex]} />

diff --git a/packages/javascript-fun/src/render/index.tsx b/packages/javascript-fun/src/render/index.tsx
@@ -9,7 +9,6 @@ import LinkPage from '../pages/LinkPage';
 
 const {
   iconCdnUrl,
-  defaultIcon,
   topNavDict,
   renderOutputFolder,
   criticalAssetPath,
@@ -48,7 +47,6 @@ const generateGitPage = (url: string) => {
         source={gitSource.filter((v) => v.page === topNavDict[url].page)}
         githubUrl={githubUrl}
         iconCdnUrl={iconCdnUrl}
-        defaultIcon={defaultIcon}
         adSenseUnits={adSenseUnits}
         adSenseClient={adSenseClient}
         adPositions={topNavDict[url].adPositions}

diff --git a/packages/javascript-fun/src/server/middleware.tsx b/packages/javascript-fun/src/server/middleware.tsx
@@ -12,7 +12,6 @@ import { GitGroupSchema, LinkGroupSchema } from '../typings/interface';
 import {
   nonLazyImg,
   iconCdnUrl,
-  defaultIcon,
   topNavDict,
   renderOutputFolder,
   adSenseUnits,
@@ -58,7 +57,6 @@ export const gitMd = (req: Request, res: Response) => {
         source={gitSource.filter((v) => v.page === topNavDict[req.url].page)}
         githubUrl={githubUrl}
         iconCdnUrl={iconCdnUrl}
-        defaultIcon={defaultIcon}
         adSenseUnits={adSenseUnits}
         adSenseClient={adSenseClient}
         adPositions={topNavDict[req.url].adPositions}