Merge pull request #90 from medyo/develop

Version 1.14.0

Author: medyo

.gitignore

@@ -3,7 +3,7 @@
 .eslintcache
 .env*
 *.zip
-
+.todo
 # dependencies
 /node_modules
 /.pnp

package.json

@@ -3,6 +3,7 @@
   "version": "1.1.0",
   "private": false,
   "dependencies": {
+    "@amplitude/analytics-browser": "^1.5.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -18,7 +19,7 @@
     "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.1",
     "react-error-boundary": "^3.1.4",
-    "react-icons": "^4.1.0",
+    "react-icons": "^4.4.0",
     "react-markdown": "^7.0.1",
     "react-modal": "^3.12.1",
     "react-pro-sidebar": "^0.6.0",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Hackertab.dev",
   "description": "The Developer’s Homepage",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"

src/App.css

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Nunito:regular,600');
 @import "variables.css";
 
 html {
@@ -63,7 +62,7 @@ a {
   align-content: center;
   flex-wrap: wrap;
   height:86px;
-  margin: 0 1% 12px 1%;
+  margin: 0 1% 0px 1%;
 }
 
 .AppFooter {
@@ -194,10 +193,10 @@ a {
 .blockContent {
   flex-grow: 1;
   overflow-y: auto;
-  height: calc(80vh - 1% - 16px - 30px);
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
+  height: calc(80vh - 1% - 46px);
 }
 
 .scrollable {
@@ -234,13 +233,12 @@ a {
 .blockHeader {
   text-align: center;
   vertical-align: baseline;
-  background: var(--card-header-background-color);
   color: var(--card-header-text-color);
   font-weight: 400;
   height: 30px;
   font-size: 16px;
   padding-top: 16px;
-  padding-bottom: 16px;
+  padding-bottom: 8px;
   cursor: pointer;
 }
 .blockHeader:hover .blockHeaderLink{
@@ -269,6 +267,10 @@ a {
   position: relative;
 }
 
+.blockRow:last-child {
+  padding-bottom: 42px;
+
+}
 /* Actions */
 .blockActions {
   position: absolute;
@@ -334,6 +336,7 @@ a {
   visibility: visible;
 }
 
+/* .blockContent > div > div > div:not(:last-child), .blockRow:not(:last-child) */
 .blockRow:not(:last-child) {
   border-bottom: 1px solid var(--card-content-divider);
 }
@@ -345,6 +348,7 @@ a {
   font-size: 16px;
   text-decoration: none;
   display: flex;
+  flex-direction: row;
 }
 .rowTitle:hover {
   color: var(--primary-hover-text-color);
@@ -393,10 +397,12 @@ a {
 .rowDescription .rowItem {
   font-size: 12px;
 }
-.rowDetails  .hnRowItem {
+.rowDetails .hnRowItem {
   color: #F6682F
 }
-
+.rowDetails .inRowItem {
+  color: #4799EB
+}
 .rowDetails .redditRowItem {
   color: #FA481D;
 }
@@ -405,6 +411,12 @@ a {
   color: #A91916
 }
 
+.rowDetails .mediumRowItem {
+  color: #000000;
+}
+.dark .rowDetails .mediumRowItem {
+color:#FFFFFF;
+}
 .rowItemIcon {
   position: relative;
   top: 1px;
@@ -426,6 +438,7 @@ a {
   flex-direction: row;
   flex-wrap: wrap;
   gap: 4px;
+  margin-top: 12px;
 }
 
 .tag {
@@ -876,6 +889,72 @@ Producthunt item
   }
 }
 
+@keyframes cardPlaceholderPulse {
+  0% {
+    opacity: .6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .6;
+  }
+}
+
+.cardPlaceholder {
+  padding: 16px 16px 24px 16px;
+  animation-duration: 1.5s;
+  animation-name: cardPlaceholderPulse;
+  animation-iteration-count: infinite;
+}
+.mediaCardPlaceholder {
+  display: flex;
+  flex-direction: row;
+}
+
+.cardPlaceholder .media {
+  width:  50px;
+  height: 50px;
+  margin-right: 16px;
+  background: var(--placeholder-background-color);
+  display: inline-block;
+}
+.cardPlaceholder .cardContent {
+  display: flex;
+  flex-direction: column;
+}
+.cardPlaceholder .cardUpvote {
+  margin-left: auto;
+  background: var(--placeholder-background-color);
+  width:  33px;
+  height: 44px;
+}
+.cardPlaceholder .line {
+  background: var(--placeholder-background-color);
+  display: block;
+  height: 17px;
+  border-radius: 4px;
+}
+.cardPlaceholder .smallLine {
+  margin-top: 8px;
+  background: var(--placeholder-background-color);
+  display: block;
+  height: 14px;
+  width: 90%;
+  border-radius: 4px;
+}
+.cardPlaceholder .details {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+}
+.cardPlaceholder .detail {
+  background: var(--placeholder-background-color);
+  height: 10px;
+  width: 73px;
+  margin-right: 16px;
+  border-radius: 4px;
+}
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
   .block {

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useRef } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import './App.css'
 import ConfigurationContext from './configuration/ConfigurationContext'
 import Footer from './components/Footer'
@@ -10,6 +10,7 @@ import ScrollCardsNavigator from './components/ScrollCardsNavigator'
 import AppContentLayout from './components/AppContentLayout'
 import 'react-contexify/dist/ReactContexify.css'
 import PreferencesContext from './preferences/PreferencesContext'
+import { initAnalytics } from './utils/Analytics'
 
 function App() {
   const { marketingBannerConfig = {}, feedbackWidget } = useContext(ConfigurationContext)
@@ -18,6 +19,7 @@ function App() {
   const { dispatcher, ...state } = useContext(PreferencesContext)
 
   useEffect(() => {
+    initAnalytics()
     trackPageView('home')
   }, [])
 

src/Constants.js

@@ -7,16 +7,19 @@ import ProductHuntCard from './cards/ProductHuntCard'
 import RedditCard from './cards/RedditCard'
 import LobstersCard from './cards/LobstersCard'
 import HashNodeCard from './cards/HashNodeCard'
+import IndieHackersCard from './cards/IndieHackersCard'
 import FreeCodeCampCard from './cards/FreeCodeCampCard'
+import MediumCard from './cards/MediumCard'
 import { SiGithub } from 'react-icons/si'
 import { SiYcombinator } from 'react-icons/si'
 import { FaDev } from 'react-icons/fa'
 import { SiProducthunt } from 'react-icons/si'
-import { FaReddit } from 'react-icons/fa'
+import { FaReddit, FaMediumM } from 'react-icons/fa'
 import { HiTicket } from 'react-icons/hi'
 import HashNodeIcon from './static/icon_hashnode.png'
 import LobstersIcon from './static/icon_lobsters.png'
 import { FaFreeCodeCamp } from 'react-icons/fa'
+import { CgIndieHackers } from 'react-icons/cg'
 
 const APP = {
   name: 'Hackertab.dev',
@@ -31,6 +34,8 @@ const APP = {
   dataSourcesLink: 'https://www.hackertab.dev/data-sources',
   changeLogLink: 'https://api.github.com/repos/medyo/hackertab.dev/releases',
 }
+export const ANALYTICS_ENDPOINT = 'https://api.hackertab.dev/analytics'
+export const ANALYTICS_SDK_KEY = '9662c93f91473ba6e96711b22e0a367d'
 
 export const LOCAL_CONFIGURATION = {
   supportedTags: [], // Loaded remotly
@@ -100,6 +105,20 @@ export const SUPPORTED_CARDS = [
     label: 'FreeCodeCamp',
     component: FreeCodeCampCard,
   },
+  {
+    value: 'indiehackers',
+    icon: <CgIndieHackers className="blockHeaderWhite" />,
+    analyticsTag: 'indiehackers',
+    label: 'IndieHackers',
+    component: IndieHackersCard,
+  },
+  {
+    value: 'medium',
+    icon: <FaMediumM />,
+    analyticsTag: 'medium',
+    label: 'Medium',
+    component: MediumCard,
+  }
 ]
 
 export const SUPPORTED_SEARCH_ENGINES = [
@@ -140,13 +159,15 @@ export const GLOBAL_TAG = {
   githubValues: ['global'],
   devtoValues: [''],
   hashnodeValues: ['programming'],
+  mediumValues: ['programming'],
 }
 export const MY_LANGUAGES_TAG = {
   value: 'myLangs',
   label: 'My Languages',
   githubValues: ['myLangs'],
   devtoValues: ['myLangs'],
   hashnodeValues: ['myLangs'],
+  mediumValues: ['myLangs'],
 }
 export const MAX_MERGED_ITEMS_PER_LANGUAGE = 10
 export { APP }

src/bookmark/BookmarksSidebar.js

@@ -32,7 +32,16 @@ function BookmarksSidebar({ showSidebar, onClose }) {
   const githubBookmarks = userBookmarks.filter(bm => bm.source == "github")
   const jobsBookmarks = userBookmarks.filter(bm => bm.source == "jobs")
   const newsBookmarks = userBookmarks.filter(
-    (bm) => ['hackernews', 'devto', 'hashnode', 'lobsters', 'freecodecamp'].indexOf(bm.source) != -1
+    (bm) =>
+      [
+        'hackernews',
+        'devto',
+        'hashnode',
+        'lobsters',
+        'freecodecamp',
+        'medium',
+        'indiehackers',
+      ].indexOf(bm.source) != -1
   )
   const conferencesBookmarks = userBookmarks.filter(bm => bm.source == "conferences")
   const productsBookmarks = userBookmarks.filter(bm => bm.source == "producthunt")

src/cards/IndieHackersCard.js

@@ -0,0 +1,75 @@
+import React, { useContext } from 'react'
+import { VscTriangleUp } from 'react-icons/vsc'
+import CardComponent from '../components/CardComponent'
+import ListComponent from '../components/ListComponent'
+import indiehackersApi from '../services/indiehackers'
+import { BiCommentDetail } from 'react-icons/bi'
+import { MdAccessTime } from 'react-icons/md'
+import CardLink from '../components/CardLink'
+import CardItemWithActions from '../components/CardItemWithActions'
+import PreferencesContext from '../preferences/PreferencesContext'
+import { FaChevronUp } from 'react-icons/fa'
+import { format } from 'timeago.js'
+
+const StoryItem = ({ item, index, analyticsTag }) => {
+  const { listingMode } = useContext(PreferencesContext)
+
+  return (
+    <CardItemWithActions
+      source={'indiehackers'}
+      index={index}
+      item={item}
+      key={index}
+      cardItem={
+        <>
+          <p className="rowTitle">
+            <CardLink link={item.url} analyticsSource={analyticsTag}>
+              {listingMode === 'compact' && (
+                <span className="counterWrapper">
+                  <VscTriangleUp />
+                  <span className="value">{item.score}</span>
+                </span>
+              )}
+
+              <span className="subTitle">{item.title}</span>
+            </CardLink>
+          </p>
+          {listingMode === 'normal' && (
+            <div className="rowDetails">
+              <span className="rowItem inRowItem">
+                <FaChevronUp className="rowItemIcon" /> {item.likes} points
+              </span>
+              <span className="rowItem">
+                <MdAccessTime className="rowItemIcon" /> {format(new Date(item.published_at))}
+              </span>
+              <span className="rowItem">
+                <BiCommentDetail className="rowItemIcon" /> {item.comments} comments
+              </span>
+            </div>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+function IndieHackersCard({ analyticsTag, label, icon, withAds }) {
+  const fetchStories = async () => {
+    return await indiehackersApi.getTopStories()
+  }
+
+  const renderItem = (item, index) => (
+    <StoryItem item={item} key={`st-${index}`} index={index} analyticsTag={analyticsTag} />
+  )
+
+  return (
+    <CardComponent
+      icon={<span className="blockHeaderIcon">{icon}</span>}
+      link="https://indiehackers.com/"
+      title={label}>
+      <ListComponent fetchData={fetchStories} renderItem={renderItem} withAds={withAds} />
+    </CardComponent>
+  )
+}
+
+export default IndieHackersCard