Merge pull request #128 from medyo/develop

new version

Author: medyo

.github/workflows/distribute.yml

@@ -9,9 +9,9 @@ on:
         default: 'all'
         type: choice
         options:
-        - chrome
-        - firefox
-        - all
+          - chrome
+          - firefox
+          - all
       autoTag:
         description: 'Auto Create a new tag'
         required: true
@@ -38,6 +38,8 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           dry_run: ${{ github.event.inputs.autoTag == 'false' }}
+          custom_release_rules: |
+            "fix:patch:Bug Fixes,hotfix:patch:Bug Fixes,refactor:minor:Refactoring,implement:minor:Features,change:minor:Changes,breaking:major:Breaking Changes,major:major:Major Changes"
 
       - name: Update manifest.json
         if: github.event.inputs.autoTag == 'true'
@@ -48,9 +50,9 @@ jobs:
         uses: EndBug/add-and-commit@v5
         with:
           branch: master
-          author_name: Github bot 
+          author_name: Github bot
           author_email: elmehdi.sakout@gmail.com
-          message: "Bump manifest version"
+          message: 'Bump manifest version'
 
   chrome-deploy:
     if: ${{ (github.event.inputs.targetStore == 'chrome') || (github.event.inputs.targetStore == 'all') }}
@@ -66,13 +68,13 @@ jobs:
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
       - name: Install yarn dependencies
         run: yarn
-        
+
       - name: Build and zip the extension
         run: yarn build-chrome
-        
+
       - name: Install chrome dependencies
         run: yarn global add chrome-webstore-upload-cli
-        
+
       - name: Upload the package to Chrome web store
         if: ${{ github.event.inputs.testMode == 'false' }}
         env:
@@ -96,13 +98,13 @@ jobs:
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
       - name: Install yarn dependencies
         run: yarn
-  
+
       - name: Build and zip the extension
         run: yarn build-firefox
-  
+
       - name: Install Firefox dependencies
         run: yarn global add web-ext web-ext-submit@6
-        
+
       - name: Upload the package to Firefox web store
         if: ${{ github.event.inputs.testMode == 'false' }}
         env:

package.json

@@ -6,16 +6,13 @@
     "@amplitude/analytics-browser": "^1.5.5",
     "@craco/craco": "^6.4.5",
     "@tanstack/react-query": "^4.13.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "@types/dompurify": "^2.3.4",
     "@types/jspath": "^0.4.0",
     "axios": "^0.21.2",
     "axios-cache-adapter": "^2.7.3",
     "country-emoji": "^1.5.4",
     "dompurify": "^2.2.7",
-    "eslint-plugin-react": "^7.28.0",
+    "htmlparser2": "^8.0.1",
     "jsonpath": "^1.1.1",
     "localforage": "^1.9.0",
     "normalize.css": "^8.0.1",
@@ -35,11 +32,12 @@
     "react-spring-bottom-sheet": "^3.4.1",
     "react-toggle": "^4.1.1",
     "react-tooltip": "^4.2.21",
+    "rss-to-json": "^2.1.1",
     "styled-components": "2",
     "timeago.js": "^4.0.2",
     "type-fest": "^1.2.0",
     "web-vitals": "^0.2.4",
-    "zustand": "^4.1.3"
+    "zustand": "^4.3.3"
   },
   "proxy": "https://api.hackertab.dev/",
   "scripts": {
@@ -72,6 +70,9 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
     "@types/chrome": "^0.0.198",
     "@types/jest": "^29.1.2",
     "@types/jsonpath": "^0.2.0",

src/assets/App.css

@@ -272,7 +272,9 @@ a {
   width: 18px;
   height: 18px;
 }
-
+.blockHeaderIcon .rss {
+  color:#ee802f;
+}
 .blockRow {
   scroll-snap-align: start;
   padding: 8px 16px;

src/assets/variables.css

@@ -84,6 +84,12 @@ html.dark {
   --tab-neutral-button-text: #a2a7ad;
   --tab-positive-button-background: #0366d6;
   --tab-positive-button-text: white;
+
+  --settings-input-background-color: #0d1116;
+  --settings-input-border-color: #3a4553;
+  --settings-input-border-focus-color: #6b7b90;
+  --settings-input-placeholder-color: #42474e;
+  --settings-input-text-color: #fff
 }
 
 html.light {
@@ -160,4 +166,11 @@ html.light {
   --tab-neutral-button-text: #3c5065;
   --tab-positive-button-background: #0366d6;
   --tab-positive-button-text: white;
+
+  --settings-input-background-color: #ffffff;
+  --settings-input-border-color: #e9ebec;
+  --settings-input-border-focus-color: #c4d6df;
+  --settings-input-placeholder-color: #97a6ad;
+  --settings-input-text-color: #253b53
+
 }

src/components/Elements/Card/Card.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import { BsBoxArrowInUpRight } from 'react-icons/bs'
 import { ref } from 'src/config'
 import { useUserPreferences } from 'src/stores/preferences'
-import { SupportedCard } from 'src/config'
+import { SupportedCardType } from 'src/types'
 
 type CardProps = {
   children: React.ReactNode
-  card: SupportedCard
+  card: SupportedCardType
   titleComponent?: React.ReactNode
   fullBlock?: boolean
 }

src/components/Elements/CardWithActions/CardItemWithActions.tsx

@@ -1,22 +1,23 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
+import { BiBookmarkMinus, BiBookmarkPlus } from 'react-icons/bi'
+import { Attributes, trackLinkBookmark, trackLinkUnBookmark } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
-import { BiBookmarkPlus } from 'react-icons/bi'
-import { BiBookmarkMinus } from 'react-icons/bi'
-import { trackLinkBookmark, trackLinkUnBookmark, Attributes } from 'src/lib/analytics'
 import { BaseEntry } from 'src/types'
 
 type CardItemWithActionsProps = {
   item: BaseEntry
   index: number
   source: string
   cardItem: React.ReactNode
+  sourceType?: 'rss' | 'supported'
 }
 
 export const CardItemWithActions = ({
   cardItem,
   item,
   index,
   source,
+  sourceType = 'supported',
 }: CardItemWithActionsProps) => {
   const { bookmarkPost, unbookmarkPost, userBookmarks } = useBookmarks()
   const [isBookmarked, setIsBookmarked] = useState(
@@ -27,6 +28,7 @@ export const CardItemWithActions = ({
       title: item.title,
       url: item.url,
       source,
+      sourceType: sourceType ?? 'rss',
     }
     if (isBookmarked) {
       unbookmarkPost(itemToBookmark)

src/components/Elements/FloatingFilter/FloatingFilter.tsx

@@ -3,12 +3,13 @@ import { FiFilter } from 'react-icons/fi'
 import { BottomSheet } from 'react-spring-bottom-sheet'
 import 'react-spring-bottom-sheet/dist/style.css'
 import { ChipsSet } from 'src/components/Elements'
-import { dateRanges, GLOBAL_TAG, MY_LANGUAGES_TAG, SupportedCard } from 'src/config'
+import { dateRanges, GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config'
 import { trackCardDateRangeSelect, trackCardLanguageSelect } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
+import { SupportedCardType } from 'src/types'
 
 type ListingFilterMobileProps = {
-  card: SupportedCard
+  card: SupportedCardType
   filters?: ('datesRange' | 'language')[]
 }
 

src/components/Layout/AppContentLayout.tsx

@@ -1,22 +1,26 @@
 import { useState } from 'react'
-import { BottomNavigation } from '../Elements'
 import { isDesktop } from 'react-device-detect'
 import { useUserPreferences } from 'src/stores/preferences'
-import { MobileCards } from './MobileCards'
+import { BottomNavigation } from '../Elements'
 import { DesktopCards } from './DesktopCards'
+import { MobileCards } from './MobileCards'
 
 export const AppContentLayout = ({
   setShowSettings,
 }: {
   setShowSettings: (value: boolean | ((prevVar: boolean) => boolean)) => void
 }) => {
-  const { cards } = useUserPreferences()
+  const { cards, userCustomCards } = useUserPreferences()
   const [selectedCard, setSelectedCard] = useState(cards[0])
 
   return (
     <>
       <main className="AppContent HorizontalScroll">
-        {isDesktop ? <DesktopCards cards={cards} /> : <MobileCards selectedCard={selectedCard} />}
+        {isDesktop ? (
+          <DesktopCards cards={cards} userCustomCards={userCustomCards} />
+        ) : (
+          <MobileCards selectedCard={selectedCard} />
+        )}
       </main>
 
       <BottomNavigation

src/components/Layout/DesktopCards.tsx

@@ -1,17 +1,25 @@
 import React from 'react'
 import { SUPPORTED_CARDS } from 'src/config'
-import { SelectedCard } from 'src/types'
+import { CustomRssCard } from 'src/features/cards'
+import { SelectedCard, SupportedCardType } from 'src/types'
 
-export const DesktopCards = ({ cards }: { cards: SelectedCard[] }) => {
+export const DesktopCards = ({
+  cards,
+  userCustomCards,
+}: {
+  cards: SelectedCard[]
+  userCustomCards: SupportedCardType[]
+}) => {
+  const AVAILABLE_CARDS = [...SUPPORTED_CARDS, ...userCustomCards]
   return (
     <>
       {cards.map((card, index) => {
-        const constantCard = SUPPORTED_CARDS.find((c) => c.value === card.name)
+        const constantCard = AVAILABLE_CARDS.find((c) => c.value === card.name)
         if (!constantCard) {
           return null
         }
 
-        return React.createElement(constantCard.component, {
+        return React.createElement(constantCard?.component || CustomRssCard, {
           key: card.name,
           meta: constantCard,
           withAds: index === 0,

src/components/Layout/Header.tsx

@@ -1,17 +1,15 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { BsFillGearFill } from 'react-icons/bs'
+import { useEffect, useRef, useState } from 'react'
+import { BsFillBookmarksFill, BsFillGearFill, BsMoon } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
-import { BsFillBookmarksFill } from 'react-icons/bs'
+import { IoMdSunny } from 'react-icons/io'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
+import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
-import { SettingsModal } from 'src/features/settings'
-import { BsMoon } from 'react-icons/bs'
-import { IoMdSunny } from 'react-icons/io'
 import { Changelog } from 'src/features/changelog'
-import { SearchBar } from 'src/components/Elements/SearchBar'
-import { useUserPreferences } from 'src/stores/preferences'
+import { SettingsModal } from 'src/features/settings'
+import { identifyUserTheme, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
-import { trackThemeSelect, identifyUserTheme } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
 
 type HeaderProps = {
   showSideBar: boolean