Merge pull request #187 from medyo/develop

New Version #minor
medyo · Apr 4, 2024 · d1ee3a0 · d1ee3a0
2 parents 7a480d0 + 16e55a9
commit d1ee3a0
Show file tree

Hide file tree

Showing 22 changed files with 95 additions and 137 deletions.
diff --git a/script/build-chrome.sh b/script/build-chrome.sh
@@ -22,4 +22,4 @@ yarn build:ext
 
 # Zip the distribution folder
 echo 'Zip the extension'
-cd dist/ && zip -r ../chrome_extension.zip * -x "*.DS_Store" "web_manifest.json" "screenshots/*" "images/*" "favicon.ico" "robots.txt" "base.manifest.json" "chrome.manifest.json" "firefox.manifest.json" && cd ..
+cd dist/ && zip -r ../chrome_extension.zip * -x "*.DS_Store" "web_manifest.json" "screenshots/*" "images/*" "robots.txt" "base.manifest.json" "chrome.manifest.json" "firefox.manifest.json" && cd ..
diff --git a/script/build-firefox.sh b/script/build-firefox.sh
@@ -27,7 +27,7 @@ yarn build:ext
 
 # Zip the distribution folder
 echo 'Zip the extension'
-cd dist/ && zip -r ../firefox_extension.zip * -x "*.DS_Store" "web_manifest.json" "screenshots/*" "images/*" "favicon.ico" "robots.txt" "base.manifest.json" "chrome.manifest.json" "firefox.manifest.json" && cd ..
+cd dist/ && zip -r ../firefox_extension.zip * -x "*.DS_Store" "web_manifest.json" "screenshots/*" "images/*" "robots.txt" "base.manifest.json" "chrome.manifest.json" "firefox.manifest.json" && cd ..
 
 #
 echo 'Zip the source code'

diff --git a/src/assets/kagi_logo.svg b/src/assets/kagi_logo.svg
diff --git a/src/components/Elements/Card/Card.tsx b/src/components/Elements/Card/Card.tsx
@@ -1,22 +1,55 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { isDesktop } from 'react-device-detect'
 import { SortableKnob } from 'react-easy-sort'
 import { BsBoxArrowInUpRight } from 'react-icons/bs'
 import { MdOutlineDragIndicator } from 'react-icons/md'
 import { ref } from 'src/config'
+import { AdvBanner } from 'src/features/adv'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SupportedCardType } from 'src/types'
 
 type CardProps = {
   children: React.ReactNode
   card: SupportedCardType
+  withAds?: boolean
   titleComponent?: React.ReactNode
   fullBlock?: boolean
 }
 
-export const Card = ({ card, titleComponent, children, fullBlock = false }: CardProps) => {
+export const Card = ({
+  card,
+  titleComponent,
+  withAds = false,
+  children,
+  fullBlock = false,
+}: CardProps) => {
   const { openLinksNewTab } = useUserPreferences()
   const { link, icon, label, badge } = card
+  const [canAdsLoad, setCanAdsLoad] = useState(true)
+  const { adsConfig } = useRemoteConfigStore()
+
+  useEffect(() => {
+    if (!adsConfig.enabled || !withAds) {
+      return
+    }
+
+    const handleClassChange = () => {
+      if (document.documentElement.classList.contains('dndState')) {
+        setCanAdsLoad(false)
+      } else {
+        setCanAdsLoad(true)
+      }
+    }
+
+    const observer = new MutationObserver(handleClassChange)
+    observer.observe(document.documentElement, { attributes: true })
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [withAds, adsConfig.enabled])
+
   const handleHeaderLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
     let url = `${link}?${ref}`
@@ -42,6 +75,8 @@ export const Card = ({ card, titleComponent, children, fullBlock = false }: Card
         {badge && <span className="blockHeaderBadge">{badge}</span>}
       </div>
 
+      {canAdsLoad && adsConfig.enabled && withAds && <AdvBanner />}
+
       <div className="blockContent scrollable">{children}</div>
     </div>
   )

diff --git a/src/components/List/ListComponent.tsx b/src/components/List/ListComponent.tsx
@@ -1,8 +1,6 @@
-import React, { ReactNode, useEffect } from 'react'
+import React, { ReactNode } from 'react'
 import { Placeholder } from 'src/components/placeholders'
 import { MAX_ITEMS_PER_CARD } from 'src/config'
-import { AdvBanner } from 'src/features/adv'
-import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { BaseEntry } from 'src/types'
 
 type PlaceholdersProps = {
@@ -23,7 +21,6 @@ export type ListComponentPropsType<T extends BaseEntry> = {
   items: T[]
   isLoading: boolean
   renderItem: (item: T, index: number) => React.ReactNode
-  withAds: boolean
   placeholder?: React.ReactNode
   header?: React.ReactNode
   refresh?: boolean
@@ -37,34 +34,10 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
     isLoading,
     error,
     renderItem,
-    withAds,
     header,
     placeholder = <Placeholder />,
     limit = MAX_ITEMS_PER_CARD,
   } = props
-  const { adsConfig } = useRemoteConfigStore()
-  const [canAdsLoad, setCanAdsLoad] = React.useState(true)
-
-  useEffect(() => {
-    if (!adsConfig.enabled || !withAds) {
-      return
-    }
-
-    const handleClassChange = () => {
-      if (document.documentElement.classList.contains('dndState')) {
-        setCanAdsLoad(false)
-      } else {
-        setCanAdsLoad(true)
-      }
-    }
-
-    const observer = new MutationObserver(handleClassChange)
-    observer.observe(document.documentElement, { attributes: true })
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [withAds, adsConfig.enabled])
 
   if (error) {
     return <p className="errorMsg">{error?.message || error}</p>
@@ -81,10 +54,6 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
         content.unshift(header)
       }
 
-      if (canAdsLoad && adsConfig.enabled && withAds && index === adsConfig.rowPosition) {
-        content.unshift(<AdvBanner key={'hello-word'} />)
-      }
-
       return content
     })
   }

diff --git a/src/config/index.tsx b/src/config/index.tsx
@@ -6,6 +6,7 @@ import { ReactComponent as PhindLogo } from 'src/assets/phind_logo.svg'
 import { ReactComponent as StartPageLogo } from 'src/assets/startpage_logo.svg'
 import { ReactComponent as YahooLogo } from 'src/assets/yahoo_logo.svg'
 import { ReactComponent as YandexLogo } from 'src/assets/yandex_logo.svg'
+import { ReactComponent as KagiLogo} from 'src/assets/kagi_logo.svg'
 
 // Keys
 export const ANALYTICS_ENDPOINT = import.meta.env.VITE_AMPLITUDE_URL as string
@@ -70,6 +71,11 @@ export const SUPPORTED_SEARCH_ENGINES = [
     logo: PhindLogo,
     className: 'themeAdaptiveFillColor',
   },
+  {
+    label: 'Kagi',
+    url: 'https://kagi.com/search?q=',
+    logo: KagiLogo,
+  },
 ]
 
 export const LS_PREFERENCES_KEY = 'hackerTabPrefs'

diff --git a/src/features/adv/components/AdvBanner.tsx b/src/features/adv/components/AdvBanner.tsx
@@ -73,7 +73,10 @@ export const AdvBanner = () => {
           </a>
         </span>
       </div>
-      {ad.viewUrl && <img src={ad.viewUrl} key={ad.viewUrl} className="hidden" alt="" />}
+      {ad.viewUrl &&
+        ad.viewUrl
+          .split('||')
+          .map((viewUrl, i) => <img key={i} src={viewUrl} className="hidden" alt="" />)}
     </div>
   )
 }
diff --git a/src/features/adv/types/index.ts b/src/features/adv/types/index.ts
@@ -1,7 +1,7 @@
 type AdProvider = {
-  name: string,
-  title: string,
-  link?: string,
+  name: string
+  title: string
+  link?: string
 }
 
 type NextAdType = {
@@ -18,4 +18,4 @@ export type Ad = {
   backgroundColor?: string
   provider: AdProvider
   nextAd?: NextAdType
-}
+}
diff --git a/src/features/cards/components/aiCard/AICard.tsx b/src/features/cards/components/aiCard/AICard.tsx
@@ -32,7 +32,7 @@ export function AICard({ meta, withAds }: CardPropsType) {
   )
 
   return (
-    <Card card={meta}>
+    <Card card={meta} withAds={withAds}>
       <ListComponent
         items={articles}
         error={error}
@@ -65,7 +65,6 @@ export function AICard({ meta, withAds }: CardPropsType) {
         }
         isLoading={isLoading}
         renderItem={renderItem}
-        withAds={withAds}
       />
     </Card>
   )

diff --git a/src/features/cards/components/aiCard/ArticleItem.tsx b/src/features/cards/components/aiCard/ArticleItem.tsx
@@ -1,7 +1,7 @@
 import { BiCommentDetail } from 'react-icons/bi'
 import { GoDotFill } from 'react-icons/go'
 import { MdAccessTime } from 'react-icons/md'
-import { CardItemWithActions, CardLink, ClickableItem } from 'src/components/Elements'
+import { CardItemWithActions, CardLink } from 'src/components/Elements'
 import { Attributes } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { Article, BaseItemPropsType } from 'src/types'
@@ -51,18 +51,10 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
               <span className="rowItem" title={new Date(item.published_at).toUTCString()}>
                 <MdAccessTime className="rowItemIcon" /> {format(new Date(item.published_at))}
               </span>
-              <ClickableItem
-                link={`https://news.ycombinator.com/item?id=${item.id}`}
-                className="rowItem rowItemClickable"
-                analyticsAttributes={{
-                  [Attributes.POINTS]: item.reactions,
-                  [Attributes.TRIGERED_FROM]: 'card',
-                  [Attributes.TITLE]: `${item.title} comments`,
-                  [Attributes.LINK]: `https://news.ycombinator.com/item?id=${item.id}`,
-                  [Attributes.SOURCE]: analyticsTag,
-                }}>
-                <BiCommentDetail className="rowItemIcon" /> {item.comments} comments
-              </ClickableItem>
+              <span className="rowItem">
+                <BiCommentDetail className={'rowTitleIcon'} />
+                {item.comments} comments
+              </span>
             </div>
           )}
         </>

diff --git a/src/features/cards/components/conferencesCard/ConferencesCard.tsx b/src/features/cards/components/conferencesCard/ConferencesCard.tsx
@@ -1,11 +1,10 @@
 import { Card } from 'src/components/Elements'
 import { ListComponent } from 'src/components/List'
-import { useGetConferences } from '../../api/getConferences'
-import { Conference, CardPropsType } from 'src/types'
 import { useUserPreferences } from 'src/stores/preferences'
-import { getCardTagsValue } from 'src/utils/DataEnhancement'
+import { CardPropsType, Conference } from 'src/types'
+import { filterUniqueEntries, getCardTagsValue } from 'src/utils/DataEnhancement'
+import { useGetConferences } from '../../api/getConferences'
 import ConferenceItem from './ConferenceItem'
-import { filterUniqueEntries } from 'src/utils/DataEnhancement'
 
 export function ConferencesCard({ meta, withAds }: CardPropsType) {
   const { userSelectedTags } = useUserPreferences()
@@ -35,13 +34,8 @@ export function ConferencesCard({ meta, withAds }: CardPropsType) {
   )
 
   return (
-    <Card card={meta}>
-      <ListComponent
-        items={getData()}
-        isLoading={isLoading}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+    <Card card={meta} withAds={withAds}>
+      <ListComponent items={getData()} isLoading={isLoading} renderItem={renderItem} />
     </Card>
   )
 }
diff --git a/src/features/cards/components/devtoCard/DevtoCard.tsx b/src/features/cards/components/devtoCard/DevtoCard.tsx
@@ -70,14 +70,9 @@ export function DevtoCard({ withAds, meta }: CardPropsType) {
   }
 
   return (
-    <Card card={meta} titleComponent={<HeaderTitle />}>
+    <Card card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
       <FloatingFilter card={meta} filters={['language']} />
-      <ListComponent
-        items={getData()}
-        isLoading={getIsLoading()}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+      <ListComponent items={getData()} isLoading={getIsLoading()} renderItem={renderItem} />
     </Card>
   )
 }
diff --git a/src/features/cards/components/freecodecampCard/FreecodecampCard.tsx b/src/features/cards/components/freecodecampCard/FreecodecampCard.tsx
@@ -71,14 +71,9 @@ export function FreecodecampCard({ meta, withAds }: CardPropsType) {
   }
 
   return (
-    <Card card={meta} titleComponent={<HeaderTitle />}>
+    <Card card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
       <FloatingFilter card={meta} filters={['language']} />
-      <ListComponent
-        items={getData()}
-        isLoading={getIsLoading()}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+      <ListComponent items={getData()} isLoading={getIsLoading()} renderItem={renderItem} />
     </Card>
   )
 }
diff --git a/src/features/cards/components/githubCard/GithubCard.tsx b/src/features/cards/components/githubCard/GithubCard.tsx
@@ -97,14 +97,13 @@ export function GithubCard({ meta, withAds }: CardPropsType) {
     }
   }
   return (
-    <Card fullBlock={true} card={meta} titleComponent={<HeaderTitle />}>
+    <Card fullBlock={true} card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
       <FloatingFilter card={meta} filters={['datesRange', 'language']} />
       <ListComponent
         items={getData()}
         error={getError()}
         isLoading={getIsLoading()}
         renderItem={renderItem}
-        withAds={withAds}
       />
     </Card>
   )

diff --git a/src/features/cards/components/hackernewsCard/HackernewsCard.tsx b/src/features/cards/components/hackernewsCard/HackernewsCard.tsx
@@ -1,7 +1,7 @@
 import { Card } from 'src/components/Elements'
 import { ListComponent } from 'src/components/List'
-import { useGetHackertNewsArticles } from '../../api/getHackerNewsArticles'
 import { Article, CardPropsType } from 'src/types'
+import { useGetHackertNewsArticles } from '../../api/getHackerNewsArticles'
 import ArticleItem from './ArticleItem'
 
 export function HackernewsCard({ meta, withAds }: CardPropsType) {
@@ -12,14 +12,8 @@ export function HackernewsCard({ meta, withAds }: CardPropsType) {
   )
 
   return (
-    <Card card={meta}>
-      <ListComponent
-        items={articles}
-        error={error}
-        isLoading={isLoading}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+    <Card card={meta} withAds={withAds}>
+      <ListComponent items={articles} error={error} isLoading={isLoading} renderItem={renderItem} />
     </Card>
   )
 }
diff --git a/src/features/cards/components/hashnodeCard/HashnodeCard.tsx b/src/features/cards/components/hashnodeCard/HashnodeCard.tsx
@@ -71,14 +71,9 @@ export function HashnodeCard({ withAds, meta }: CardPropsType) {
   }
 
   return (
-    <Card card={meta} titleComponent={<HeaderTitle />}>
+    <Card card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
       <FloatingFilter card={meta} filters={['language']} />
-      <ListComponent
-        items={getData()}
-        isLoading={getIsLoading()}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+      <ListComponent items={getData()} isLoading={getIsLoading()} renderItem={renderItem} />
     </Card>
   )
 }