Merge pull request #127 from medyo/feat/add-rss

Implement Adding Rss Feeds as sources

Author: medyo

package.json

@@ -16,6 +16,7 @@
     "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,6 +36,7 @@
     "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",

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

src/components/Layout/MobileCards.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { SUPPORTED_CARDS } from 'src/config'
+import { CustomRssCard } from 'src/features/cards'
 import { SelectedCard } from 'src/types'
 
 export const MobileCards = ({ selectedCard }: { selectedCard: SelectedCard }) => {
   const currentCard = SUPPORTED_CARDS.find((c) => c.value === selectedCard.name)
   return currentCard
-    ? React.createElement(currentCard.component, {
+    ? React.createElement(currentCard?.component || CustomRssCard, {
         key: currentCard.value,
         meta: currentCard,
         withAds: true,