diff --git a/script/build-chrome.sh b/script/build-chrome.sh index ff6cb156..941bea31 100755 --- 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 .. \ No newline at end of file +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 .. \ No newline at end of file diff --git a/script/build-firefox.sh b/script/build-firefox.sh index f6b06f86..5798d50d 100755 --- 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 new file mode 100644 index 00000000..ce322b2e --- /dev/null +++ b/src/assets/kagi_logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/Elements/Card/Card.tsx b/src/components/Elements/Card/Card.tsx index 26eafbda..b6c47f0b 100644 --- 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) => { e.preventDefault() let url = `${link}?${ref}` @@ -42,6 +75,8 @@ export const Card = ({ card, titleComponent, children, fullBlock = false }: Card {badge && {badge}} + {canAdsLoad && adsConfig.enabled && withAds && } +
{children}
) diff --git a/src/components/List/ListComponent.tsx b/src/components/List/ListComponent.tsx index 7489fe84..e94c4813 100644 --- 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 = { 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(props: ListComponentPropsType isLoading, error, renderItem, - withAds, header, 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

{error?.message || error}

@@ -81,10 +54,6 @@ export function ListComponent(props: ListComponentPropsType content.unshift(header) } - if (canAdsLoad && adsConfig.enabled && withAds && index === adsConfig.rowPosition) { - content.unshift() - } - return content }) } diff --git a/src/config/index.tsx b/src/config/index.tsx index 85be9f68..e12d777a 100644 --- 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 index 41ec23d1..0734cbe3 100644 --- a/src/features/adv/components/AdvBanner.tsx +++ b/src/features/adv/components/AdvBanner.tsx @@ -73,7 +73,10 @@ export const AdvBanner = () => { - {ad.viewUrl && } + {ad.viewUrl && + ad.viewUrl + .split('||') + .map((viewUrl, i) => )} ) } diff --git a/src/features/adv/types/index.ts b/src/features/adv/types/index.ts index 66e3b3e2..ac5cc8af 100644 --- 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 -} \ No newline at end of file +} diff --git a/src/features/cards/components/aiCard/AICard.tsx b/src/features/cards/components/aiCard/AICard.tsx index 875f1b2d..c0f67e0c 100644 --- 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 ( - + ) diff --git a/src/features/cards/components/aiCard/ArticleItem.tsx b/src/features/cards/components/aiCard/ArticleItem.tsx index 4068c5fa..ae565d5e 100644 --- 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
) => { {format(new Date(item.published_at))} - - {item.comments} comments - + + + {item.comments} comments + )} diff --git a/src/features/cards/components/conferencesCard/ConferencesCard.tsx b/src/features/cards/components/conferencesCard/ConferencesCard.tsx index b0af5524..fa9d1f66 100644 --- 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 ( - - + + ) } diff --git a/src/features/cards/components/devtoCard/DevtoCard.tsx b/src/features/cards/components/devtoCard/DevtoCard.tsx index c988f07d..69f363ae 100644 --- 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 ( - }> + } withAds={withAds}> - + ) } diff --git a/src/features/cards/components/freecodecampCard/FreecodecampCard.tsx b/src/features/cards/components/freecodecampCard/FreecodecampCard.tsx index 148e467b..26c9313f 100644 --- 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 ( - }> + } withAds={withAds}> - + ) } diff --git a/src/features/cards/components/githubCard/GithubCard.tsx b/src/features/cards/components/githubCard/GithubCard.tsx index d8e6acd9..932d7f3c 100644 --- 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 ( - }> + } withAds={withAds}> ) diff --git a/src/features/cards/components/hackernewsCard/HackernewsCard.tsx b/src/features/cards/components/hackernewsCard/HackernewsCard.tsx index 311d44e7..6e0933b6 100644 --- 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 ( - - + + ) } diff --git a/src/features/cards/components/hashnodeCard/HashnodeCard.tsx b/src/features/cards/components/hashnodeCard/HashnodeCard.tsx index aa4a56e6..e0e9286a 100644 --- 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 ( - }> + } withAds={withAds}> - + ) } diff --git a/src/features/cards/components/indiehackersCard/IndiehackersCard.tsx b/src/features/cards/components/indiehackersCard/IndiehackersCard.tsx index 44a13be7..3a14c808 100644 --- a/src/features/cards/components/indiehackersCard/IndiehackersCard.tsx +++ b/src/features/cards/components/indiehackersCard/IndiehackersCard.tsx @@ -1,7 +1,7 @@ import { Card } from 'src/components/Elements' import { ListComponent } from 'src/components/List' -import { useGetIndieHackersArticles } from '../../api/getIndieHackersArticles' import { Article, CardPropsType } from 'src/types' +import { useGetIndieHackersArticles } from '../../api/getIndieHackersArticles' import { ArticleItem } from './ArticleItem' export function IndiehackersCard({ meta, withAds }: CardPropsType) { @@ -12,14 +12,8 @@ export function IndiehackersCard({ meta, withAds }: CardPropsType) { ) return ( - - + + ) } diff --git a/src/features/cards/components/lobstersCard/LobstersCard.tsx b/src/features/cards/components/lobstersCard/LobstersCard.tsx index ac9d1a64..657aa17a 100644 --- a/src/features/cards/components/lobstersCard/LobstersCard.tsx +++ b/src/features/cards/components/lobstersCard/LobstersCard.tsx @@ -1,7 +1,7 @@ import { Card } from 'src/components/Elements' import { ListComponent } from 'src/components/List' -import { useGetLobstersArticles } from '../../api/getLobstersArticles' import { Article, CardPropsType } from 'src/types' +import { useGetLobstersArticles } from '../../api/getLobstersArticles' import ArticleItem from './ArticleItem' export function LobstersCard({ withAds, meta }: CardPropsType) { @@ -12,14 +12,8 @@ export function LobstersCard({ withAds, meta }: CardPropsType) { ) return ( - - + + ) } diff --git a/src/features/cards/components/mediumCard/MediumCard.tsx b/src/features/cards/components/mediumCard/MediumCard.tsx index d97cc104..dfffb430 100644 --- a/src/features/cards/components/mediumCard/MediumCard.tsx +++ b/src/features/cards/components/mediumCard/MediumCard.tsx @@ -69,14 +69,9 @@ export function MediumCard({ meta, withAds }: CardPropsType) { } return ( - }> + } withAds={withAds}> - + ) } diff --git a/src/features/cards/components/producthuntCard/ProducthuntCard.tsx b/src/features/cards/components/producthuntCard/ProducthuntCard.tsx index 6efb6462..54c6c12f 100644 --- a/src/features/cards/components/producthuntCard/ProducthuntCard.tsx +++ b/src/features/cards/components/producthuntCard/ProducthuntCard.tsx @@ -1,8 +1,8 @@ import { Card } from 'src/components/Elements' import { ListComponent } from 'src/components/List' -import { useGeProductHuntProducts } from '../../api/getProductHuntProducts' -import { Article, CardPropsType } from 'src/types' import { ProductHuntPlaceholder } from 'src/components/placeholders' +import { Article, CardPropsType } from 'src/types' +import { useGeProductHuntProducts } from '../../api/getProductHuntProducts' import ArticleItem from './ArticleItem' export function ProductHuntCard({ meta, withAds }: CardPropsType) { @@ -22,13 +22,12 @@ export function ProductHuntCard({ meta, withAds }: CardPropsType) { ) return ( - + } /> diff --git a/src/features/cards/components/redditCard/RedditCard.tsx b/src/features/cards/components/redditCard/RedditCard.tsx index 2fe67065..ededc356 100644 --- a/src/features/cards/components/redditCard/RedditCard.tsx +++ b/src/features/cards/components/redditCard/RedditCard.tsx @@ -71,14 +71,9 @@ export function RedditCard({ withAds, meta }: CardPropsType) { } return ( - }> + } withAds={withAds}> - + ) } diff --git a/src/features/cards/components/rssCard/CustomRssCard.tsx b/src/features/cards/components/rssCard/CustomRssCard.tsx index a91d55c0..e9776e0b 100644 --- a/src/features/cards/components/rssCard/CustomRssCard.tsx +++ b/src/features/cards/components/rssCard/CustomRssCard.tsx @@ -23,8 +23,9 @@ export function CustomRssCard({ meta, withAds }: CardPropsType) { return ( }} - titleComponent={}> - + titleComponent={} + withAds={withAds}> + ) }