Version 1.14.2

craco.config.js

@@ -1,7 +1,19 @@
 const path = require('path')
+const webpack = require('webpack')
+
+function isDevelopmentEnv() {
+  return process.env.NODE_ENV === 'development'
+}
 
 module.exports = {
   webpack: {
+    plugins: {
+      add: [
+        new webpack.DefinePlugin({
+          process: { env: {} },
+        }),
+      ],
+    },
     alias: {
       '@': path.resolve(__dirname, 'src'),
     },
@@ -10,10 +22,10 @@ module.exports = {
         filename: 'static/js/[name].js',
       },
       optimization: {
-        runtimeChunk: false,
+        runtimeChunk: isDevelopmentEnv(),
         splitChunks: {
           chunks(chunk) {
-            return false
+            return isDevelopmentEnv()
           },
         },
       },
@@ -23,6 +35,10 @@ module.exports = {
     {
       plugin: {
         overrideWebpackConfig: ({ webpackConfig }) => {
+          if (isDevelopmentEnv()) {
+            return webpackConfig
+          }
+
           let mcep
           webpackConfig.plugins.some((p) => {
             if (p.constructor.name === 'MiniCssExtractPlugin') {

package.json

@@ -5,9 +5,13 @@
   "dependencies": {
     "@amplitude/analytics-browser": "^1.5.5",
     "@craco/craco": "^6.4.5",
+    "@sentry/react": "^7.17.4",
+    "@sentry/tracing": "^7.17.4",
+    "@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",
     "axios": "^0.21.2",
     "axios-cache-adapter": "^2.7.3",
     "country-emoji": "^1.5.4",
@@ -25,22 +29,30 @@
     "react-modal": "^3.12.1",
     "react-pro-sidebar": "^0.6.0",
     "react-scripts": "4.0.1",
-    "react-select": "^4.0.2",
+    "react-select": "^5.0.1",
     "react-spinners": "^0.10.4",
     "react-toggle": "^4.1.1",
     "react-tooltip": "^4.2.21",
     "styled-components": "2",
     "timeago.js": "^4.0.2",
-    "web-vitals": "^0.2.4"
+    "type-fest": "^1.2.0",
+    "web-vitals": "^0.2.4",
+    "zustand": "^4.1.3"
   },
   "proxy": "https://api.hackertab.dev/",
   "scripts": {
     "start": "craco start",
-    "web-build": "REACT_APP_WEB_BUILD=1 CI= react-scripts --max_old_space_size=3072 build",
+    "web-build": "craco --max_old_space_size=4096 build",
     "build": "./script/build.sh",
     "stores-build": "./script/stores_build.sh",
     "eject": "react-scripts eject"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -53,12 +65,30 @@
       "last 1 safari version"
     ]
   },
+  "resolutions": {
+    "react-error-overlay": "6.0.9"
+  },
   "devDependencies": {
     "@types/chrome": "^0.0.198",
     "@types/jest": "^29.1.2",
     "@types/node": "^18.11.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "@types/react-modal": "^3.13.1",
+    "@types/react-toggle": "^4.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.40.1",
+    "@typescript-eslint/parser": "^5.40.1",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^27.1.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "prettier": "^2.7.1",
     "typescript": "^4.8.4"
   }
 }

public/manifest.json

@@ -1,29 +1,21 @@
 {
   "name": "Hackertab.dev - developer news",
   "description": "All developer news in one tab",
-  "version": "1.14.1",
-  "manifest_version": 2,
+  "version": "1.14.2",
+  "manifest_version": 3,
   "chrome_url_overrides": {
     "newtab": "index.html"
   },
   "background": {
-    "scripts": [
-      "background.js"
-    ]
+    "service_worker": "background.js"
   },
-  "permissions": [
+  "host_permissions": [
     "https://*.hackertab.dev/*"
   ],
   "icons": {
     "16": "/logos/logo16.png",
     "32": "/logos/logo32.png",
     "48": "/logos/logo48.png",
     "128": "/logos/logo128.png"
-  },
-  "content_security_policy": "script-src 'self' object-src 'self'",
-  "applications": {
-    "gecko": {
-      "id": "{f8793186-e9da-4332-aa1e-dc3d9f7bb04c}"
-    }
   }
 }

script/stores_build.sh

@@ -27,6 +27,12 @@ firefox_build() {
     export INLINE_RUNTIME_CHUNK=false
     export GENERATE_SOURCEMAP=false
 
+    echo 'add missing geeko id'
+    yarn global add json
+    json -I -f public/manifest.json -e 'this.applications={}'
+    json -I -f public/manifest.json -e 'this.applications.gecko={}'
+    json -I -f public/manifest.json -e 'this.applications.gecko.id="{f8793186-e9da-4332-aa1e-dc3d9f7bb04c}"'
+
     yarn build
 
     mkdir -p dist
@@ -35,7 +41,10 @@ firefox_build() {
     cd dist/ && zip -r ../firefox_extension.zip * -x "*.DS_Store" && cd ..
 
     echo 'zipping the source code for Firefox'
-    zip -r source_code.zip 'public/' 'script/' 'src' 'LICENSE' 'package.json' 'yarn.lock' 'README.md' 'craco.config.js' '.env' -x "*.DS_Store"
+    zip -r source_code.zip 'public/' 'script/' 'src' 'LICENSE' 'package.json' 'yarn.lock' 'README.md' 'craco.config.js' '.env' 'tsconfig.json' -x "*.DS_Store"
+
+    echo "revert manifest changes"
+    git restore public/manifest.json
 }
 chrome_build
 firefox_build

src/App.js

@@ -1,34 +1,30 @@
-import React, { useState, useEffect, useContext } from 'react'
-import './App.css'
-import ConfigurationContext from './configuration/ConfigurationContext'
-import Footer from './components/Footer'
-import Header from './components/Header'
-import BookmarksSidebar from './bookmark/BookmarksSidebar'
-import MarketingBanner from './components/MarketingBanner'
+import React, { useState, useEffect } from 'react'
+import 'src/assets/App.css'
+import { Footer, Header } from 'src/components/Layout'
+import { BookmarksSidebar } from 'src/features/bookmarks'
+import { MarketingBanner } from 'src/components/Elements'
 import ScrollCardsNavigator from './components/ScrollCardsNavigator'
-import AppContentLayout from './components/AppContentLayout'
+import { AppContentLayout } from './components/Layout'
 import 'react-contexify/dist/ReactContexify.css'
-import PreferencesContext from './preferences/PreferencesContext'
 import { setupAnalytics, trackPageView, setupIdentification } from 'src/lib/analytics'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 
 function App() {
-  const { marketingBannerConfig = {}, feedbackWidget } = useContext(ConfigurationContext)
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
-  const { dispatcher, ...state } = useContext(PreferencesContext)
+
+  const { marketingBannerConfig } = useRemoteConfigStore()
 
   useEffect(() => {
     setupAnalytics()
-    setupIdentification(state)
+    setupIdentification()
     trackPageView('home')
   }, [])
 
   return (
     <div className="App">
       <Header
         setShowSideBar={setShowSideBar}
-        state={state}
-        dispatcher={dispatcher}
         showSideBar={showSideBar}
         showSettings={showSettings}
         setShowSettings={setShowSettings}
@@ -38,7 +34,7 @@ function App() {
       <AppContentLayout setShowSettings={setShowSettings} />
       <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
 
-      <Footer feedbackWidget={feedbackWidget} />
+      <Footer />
     </div>
   )
 }

src/App.css → src/assets/App.css

@@ -717,6 +717,10 @@ Producthunt item
   color: white;
 }
 .changelogButton.active {
+  width: auto;
+  font-size: 12px;
+  padding:0 4px;
+  text-transform: lowercase;
   background-color: var(--tooltip-accent-color);
 }
 
@@ -1006,4 +1010,28 @@ Producthunt item
   .block {
     width: calc((1800px - 12px * 4)/4);
   }
+}
+
+/***** PAGE ****/
+.Page {
+  max-width: 1024px;
+  margin: 0 auto;
+  color: var(--primary-text-color);
+}
+.Page .title {
+  color: var(--primary-text-color)
+}
+.Page button {
+  background: var(--card-background-color);
+  border:none;
+  border-radius: 20px;
+  border: 1px solid var(--card-border-color);
+  padding: 8px 16px;
+  color: var(--primary-text-color);
+  cursor: pointer;
+}
+
+.Page .buttonIcon {
+  position: relative;
+  vertical-align: middle;
 }

src/variables.css → src/assets/variables.css

@@ -1,13 +1,13 @@
 @font-face {
   font-family: 'Nunito';
-  src: url("static/fonts/nunito/nunito-regular.woff2") format('woff2');
+  src: url("fonts/nunito/nunito-regular.woff2") format('woff2');
 }
 
 @font-face {
   font-family: 'Nunito';
   font-weight: 600;
   font-style: normal;
-  src: url("static/fonts/nunito/nunito-semibold.woff2") format('woff2');
+  src: url("fonts/nunito/nunito-semibold.woff2") format('woff2');
 }
 
 html.dark {