Merge pull request #240 from medyo/develop

New version #Minor

Author: medyo

.github/workflows/deploy.yml

@@ -1,16 +1,15 @@
-name: Deploy Web Version to hackertab.dev
-
+name: '✅ [PROD] Deploy main to web environment'
 on:
   workflow_dispatch:
-  push:
-    branches:
-      - feat/cp-build
+
 env:
   VITE_BUILD_TARGET: 'web'
   VITE_AMPLITUDE_KEY: ${{ secrets.REACT_APP_AMPLITUDE_KEY }}
   VITE_AMPLITUDE_URL: ${{ secrets.REACT_APP_AMPLITUDE_URL }}
   VITE_API_URL: ${{ secrets.API_URL }}
   VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
+  VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
+  VITE_SENTRY_TOKEN: ${{ secrets.VITE_SENTRY_TOKEN }}
 
 jobs:
   build_and_deploy:
@@ -39,3 +38,4 @@ jobs:
           key: ${{ secrets.DEPLOY_SSH_KEY }}
           source: 'dist/'
           target: '~/hackertab.dev'
+          rm: true

.github/workflows/develop.yml

@@ -1,4 +1,4 @@
-name: Deploy Develop branch to the web version
+name: '👨‍💻 [DEV] Deploy develop to web environment'
 on:
   workflow_dispatch:
 
@@ -8,6 +8,8 @@ env:
   VITE_AMPLITUDE_URL: ${{ secrets.REACT_APP_AMPLITUDE_URL }}
   VITE_API_URL: ${{ secrets.API_URL }}
   VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
+  VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
+  VITE_SENTRY_TOKEN: ${{ secrets.VITE_SENTRY_TOKEN }}
 
 jobs:
   build_and_deploy:
@@ -38,3 +40,4 @@ jobs:
           key: ${{ secrets.DEPLOY_SSH_KEY }}
           source: 'dist/'
           target: '~/hackertab.dev-develop'
+          rm: true

.github/workflows/distribute.yml

@@ -28,6 +28,8 @@ env:
   VITE_AMPLITUDE_URL: ${{ secrets.REACT_APP_AMPLITUDE_URL }}
   VITE_API_URL: ${{ secrets.API_URL }}
   VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
+  VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
+  VITE_SENTRY_TOKEN: ${{ secrets.VITE_SENTRY_TOKEN }}
 
 jobs:
   tag_version:

README.md

@@ -57,7 +57,7 @@ Please do not hesitate to ask a question, report a bug or add a suggestion. or s
 
 ## Development
 
-Please use the develop branch. Create an .env file with the necessary
+Please use the develop branch. Create an .env file with the necessary env variables
 
 ```bash
 $ git clone --branch develop git@github.com:medyo/hackertab.dev.git

package.json

@@ -4,6 +4,7 @@
   "private": false,
   "dependencies": {
     "@amplitude/analytics-browser": "^1.5.5",
+    "@sentry/react": "^9.38.0",
     "@tanstack/query-async-storage-persister": "^5.8.3",
     "@tanstack/react-query": "^4.13.0",
     "@tanstack/react-query-persist-client": "^5.8.4",
@@ -22,6 +23,7 @@
     "react-easy-sort": "^1.5.1",
     "react-error-boundary": "^3.1.4",
     "react-icons": "^5.2.1",
+    "react-infinite-scroll-hook": "^6.0.0",
     "react-markdown": "^7.0.1",
     "react-modal": "^3.12.1",
     "react-responsive": "^10.0.1",
@@ -35,7 +37,7 @@
     "react-tooltip": "^4.2.21",
     "timeago.js": "^4.0.2",
     "type-fest": "^1.2.0",
-    "vite-plugin-ejs": "^1.6.4",
+    "vite-plugin-ejs": "^1.7.0",
     "zustand": "^5.0.3"
   },
   "engines": {
@@ -64,6 +66,7 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
+    "@sentry/vite-plugin": "^3.5.0",
     "@types/chrome": "^0.0.241",
     "@types/dompurify": "^2.3.4",
     "@types/jest": "^29.1.2",
@@ -90,7 +93,7 @@
     "prettier": "^2.7.1",
     "terser": "^5.19.2",
     "typescript": "^5.1.6",
-    "vite": "^6.2.4",
+    "vite": "^6.2.7",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^4.2.0"
   }

public/searchengine_logos/grok_logo.svg

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { useEffect, useLayoutEffect, useState } from 'react'
 import { DNDLayout } from 'src/components/Layout'
 import {
@@ -30,6 +31,7 @@ export const App = () => {
     maxVisibleCards,
     setAdvStatus,
     isDNDModeActive,
+    layout,
     DNDDuration,
     setDNDDuration,
   } = useUserPreferences()
@@ -80,7 +82,11 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
-      <div className="layoutLayers hideScrollBar">
+      <div
+        className={clsx(
+          'layoutLayers hideScrollBar',
+          layout === 'cards' ? 'cardsLayout' : 'gridLayout'
+        )}>
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />
       </div>

src/App.tsx

@@ -411,10 +411,13 @@ a {
 }
 .rowCover {
   border-radius: 4px;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   min-height: auto;
   object-fit: cover;
+
   aspect-ratio: 16/9;
   background-color: var(--placeholder-background-color);
   margin-bottom: 12px;
@@ -492,6 +495,11 @@ a {
   font-size: 12px;
 }
 
+.rowDetails .rowItem.verticalAligned {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
 .rowDescription .rowItem {
   font-size: 12px;
 }
@@ -1235,11 +1243,16 @@ Producthunt item
     justify-content: center;
   }
 
-  .layoutLayers {
+  .layoutLayers.cardsLayout {
     margin-left: 1%;
     margin-right: 1%;
   }
 
+  .layoutLayers.gridLayout {
+    margin-top: 1%;
+    box-shadow: 0px -10px 20px -15px var(--card-border-color);
+  }
+
   .Cards {
     padding-bottom: 20px;
   }
@@ -1504,3 +1517,12 @@ Modal
     width: auto;
   }
 }
+
+.mobileOnly {
+  display: none;
+}
+@media (max-width: 768px) {
+  .mobileOnly {
+    display: block;
+  }
+}

src/assets/App.css

@@ -75,7 +75,11 @@ export const Card = ({
         {badge && <span className="blockHeaderBadge">{badge}</span>}
       </div>
 
-      {canAdsLoad && adsConfig.enabled && withAds && <AdvBanner />}
+      {canAdsLoad && adsConfig.enabled && withAds && (
+        <div className="ad-wrapper blockRow">
+          <AdvBanner />
+        </div>
+      )}
 
       <div className="blockContent scrollable">{children}</div>
     </div>

src/components/Elements/Card/Card.tsx

@@ -1,30 +1,13 @@
-import { useState } from 'react'
-import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
-import { MobileBreakpoint } from 'src/providers/MobileBreakpoint'
 import { useUserPreferences } from 'src/stores/preferences'
-import { BottomNavigation } from '../Elements'
-import { DesktopCards } from './DesktopCards'
-import { MobileCards } from './MobileCards'
-import { ScrollCardsNavigator } from './ScrollCardsNavigator'
+import { lazyImport } from 'src/utils/lazyImport'
+const { Feed } = lazyImport(() => import('src/features/feed'), 'Feed')
+const { CardsLayout } = lazyImport(() => import('./CardsLayout'), 'CardsLayout')
 
 export const AppContentLayout = () => {
-  const { cards, userCustomCards } = useUserPreferences()
-  const [selectedCard, setSelectedCard] = useState(cards[0])
-
+  const { layout } = useUserPreferences()
   return (
     <>
-      <main className="AppContent">
-        <ScrollCardsNavigator />
-        <DesktopBreakpoint>
-          <DesktopCards cards={cards} userCustomCards={userCustomCards} />
-        </DesktopBreakpoint>
-        <MobileBreakpoint>
-          <div className="Cards HorizontalScroll">
-            <MobileCards selectedCard={selectedCard} />
-          </div>
-        </MobileBreakpoint>
-      </main>
-      <BottomNavigation selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
+      <main className="AppContent">{layout === 'grid' ? <Feed /> : <CardsLayout />}</main>
     </>
   )
 }