feat: new app design (#143)

* feat: footer and menu (#88)

* move button to ts

* move chakra theme to ts

* add footer

* add apps image

* add app menu

* fix improve responsiveness

* refactor: rename footer components

* refactor: footer render

* fix: give constraint

* refactor: add color to tailwind config

* fix: hide result footer in home page

* fix: link github icon to project page

* feat: mobile responsive footer

* Search component (#87)

* design: created searchbox component with only menu functionality

* chore: added updating search bar value functionality

* feat: design for search bar and non api functionalities

* chore: added autocomplete functionality

* revamp: cleanup searchbox code and added new bitcoin logo

* fix: mobile responsiveness

* fix: mobile responsiveness for autocomplet and tags container

* fix: searchbar container text increase

* chore: removed unused text

* fix: remove special characters from suggestions

* fix: removed console.log

* fix: added / as cmd

* design: mobile design responsiveness

* fix: adding filter domains and authors

* chore: changed tailwind colors on UI

* fix: removed glitch and weird ui for container

* fix: remeoved border when no autocomplete

* fix: flash issue and highlight keyword search

* chore: removed logs

* fix: pressing enter does not close modal

* feat able to arrow down suggestions

* fix: added filter icon for mobile and functionality

* fix: made X close with container open

* fix: removed unnecessary useEffects and hooks

* fix: made esc work on search by keyword box

* fix: check if same query is made and change input bg

* Style/home page (#93)

* update nodesass to fix node error

* add necessary assets and style configs

* add landing page design

* add footer to page

* add condition to render navbar appropriately

* make footer sticky

* UI revamp/sidebar (#91)

* base: sorting component

* base result size picker

* feat: sorting cleanups

* feat: filter menu with applied filters

* feat: base facet filter

* feat: optimize facet search

* feat: base layout

* feat: mobile ui

* feat: change add source context to UI context

* base logic for toggling sidebar

* cleanups

* base new modal

* fix: modal ui responsive

* toggle facets

* refactor: swap temporary toggle with filter

* refactor: tailwind colors

* refactor SortingView

* refactor: swap #4D4D4D for #292929

* refactor:remove comment

* fixes for home page search (#95)

* fixes for home page search

* add footer and fixes for dropdown

* feat: new nav bar (#92)

* refactor: modify taillwind config

* refactor: home text

* add svg icons

* feat(wip): add nav bar

* refactor: app item

* feat: media query hook

* fix: use media query to show search

* refactor: nav bar

* fix: nav bar

* fix night icon

* fix: apps data link

* fix: add hover color for apps

* fix: little design details

* refactor: use tailwind custom defined colors

* fix: remove used gradient

* refactor: useTailwindBreakpoint

* fix: shortcut bug on home page

* fix: spacing with result

* Changed FONT to GEIST (#97)

* chore: changed fonts to geist

* fix: increased z-index for each absolute search container

* Font fix (#98)

* feat: added Mona Sans, and tw config for brand fonts

* fix font weight and option styling

* rm package-lock

* fix: font mona for sidebar

* feat: dark mode (#99)

* feat: add css colors

* chore: setup tailwind for darkmode

* feat: implement useTheme

* refactor: use new colors for screens

* fix app item bg

* fix: add font family back

* fix: themeing

* fix: colors

* fix: svg images

* fix: search example images

* fix: add tooltip for menu

* Styling fixes (#101)

* fix: move breakpoint from lg to 2xl

* fix: sort styling

* fix: modal styling

* Update src/components/formModal/FormModal.tsx

Co-authored-by: BalogunofAfrica <[email protected]>

* fix images landing

* fix: zIndex of down arrow and parent menu button

---------

Co-authored-by: BalogunofAfrica <[email protected]>

* Styling fixes (#102)

* style fixes, rm filter when no results

* fix: font size of search input to 16px, prevents zoom in mobile

* refactor: change sort options

* Result UI and Functionality bugs (Search component) (#100)

* design: ui design for large screens

* fix: responsiveness for less than 1920px

* fix: added hover on container and change heading

* fix: rebase on filter tags

* fix: rebase on navbar

* buggy: rebased but have issues with dark theme

* fix: responsiveness and dark mode

* fix: added href to title

* fix: resize spacing in pagination and results

* fix: code comments and fixes

* fix: made provision for dark theme

* fix: filter tabs on dark mode

* feat: authors edge case of overflow

* fix: responsiveness for authors tag

* fix: increase maximum authors length before scroll

* fix: moved into filtertags

* chore: clean up duplicates

* fix: increased animation smoothness and scroll length

* fix: made double arrows pagination go to first and last page

* fix: minor changes for svg and styles

* fix: remove braces on Arrowleft

* feat: add search domain favicon (#104)

* feat: add search icon

* feat: add result favicon to result

* fix: reduce retry times

* fix: next js caching images on page switch

* Enhance documentation (#94)

* update README

* add comments

* fix: UI cleanups (#105)

* fix(ui): design fixes

* fix: filter domain on home

* fix result size toggle and styling

* searchbox style fixes

* fix: other results styling

* fix icons styling

* fix warnings and erros in log

* fix: landing google search image and transitions

* fix: refactor searchBox to internal component

* feat: increased aggregator size to 100

* fix: result card as links, fix duplicate 'Mastering lightning'

* fix: themeSwitch and appMenu

* fix: navbar and layout seperation across screen sizes

* fix: invisible search bar during search

* fix: facet pills styling

* fix: search icon

* fix: chnage default page size, search text color on darkmode

* fix: dark mode no results styling

* fix: rm duplicate domain names, allow all favicon from indexed domains

* fix: handle pointer events and card click

* fix: icons fixes

* refactor: rm size option

* fix: OG properties

* rm: bitcoin search from app menu

* fix: metadata

* fix searchbar font, empty search, cta

* fix holocat, result on new tab

* fix: facet labels, search by label,

* rm landing icons, link to form, add discord icon

* text and font fixes

* fix: domain favicons in dark mode

* feat: fecth initial data on server, hydrate query client

* fix: custom scrollbar

* fix: bitcoin search image and favicon

* feat: accessible buttons, fix next/script warning

* fix: lanfing images

* fix domain favicons

* rm protocol from url display

* refactor: domain name from getDomainName function and prevent fold in search by container

* fix: regression on search by facets on suggested keywords

* fix: rm filter close switch filter open to toggle

* fix gnusha mapping, favicons dark mode key reset

* fix: results ui, rm card shadow on mobile

* fix space between results collection

* feat: auto close menu on filter selection

* fix: mobile search improvements and brighter texts in dark mode

* fix: addressed text scaling

* fix: mobile ux for searchbox and rm states for simpler inferences

* fix: account for empty urlParams

* feat: rm redundant terms, fix key search regression, account for keyboard dismiss on mobile

* fix: custom scroller

* fix: local hover group, capitalize, footer grammer

* fix: gh icon, delay to open autocomplete

* fix: regression on num of filter

* fix: source modal

* fix pills stay on the right, cleanup breakpoint

* fix: prevent form resubmit on loading, rm mock request

* fix: single row pills

* fix overflow in domain and url string, rename bitcoin dev gnusha

* map bitcoin dev domain when reconciled

* fix: maling list domain correction, link to base domain, cursors on result author pills

* fix: enforce scroll on params change

* fix: capitalise applied filter, prevent shrink on domain filter

* fix: extra spacing on mobile between section on landing page

* fix: swap google search light  mode mobile image

* fix: document focus triggers serach after keyboard dismiss

* fix: bdp visibility and appmenu height

* fix: wrap box in link

* feat: threading for deving bitcoin

* feat: group results with a thread_url key

* fix: accurate arrows on resize and user scroll including mouse drag

* fix: rm group hover on mobile and stop date shrink in results

* chore: clean up app menu spacing

* chore: cleanup unused css

* fix: errors, warnings in logs for dynamic image sizes and wrap result size

* fix: preload image data for app menu

* fix: tooltip on lightmode

* refactor: footer renaming, enforce text color over chakra theme key change in dev

* chore: cleanup AppItems

* refactor: switch to click handlers from focus attributes

* fix: hide select container on search page, rm extra spacing for noresults

* fix: more responsive app menu, rm fixed body, overflow-auto

* fix: ui layout fixes and minor quirks

* refactor: urlManager, andclear sortfield on clear filters

---------

Co-authored-by: IgboPharaoh <[email protected]>

* feat: optional email requirement (#123)

* fix: rm replaceAll new lines to empty string, handled by parser (#125)

* Remap gnusha (#124)

* feat: swap gnusha urls with mailing-list

* fix: regression on layout

* fix: single footer, padding bottom isolated to search in layout (#126)

* rm conditional footer render (#128)

* Art review (#127)

* feat: skip combined summaries in search

* feat: return to homepage on noresult

* Chore/code lint (#129)

* chore: add eslint and prettier config

* chore: automated lint:fix

* fix: manual lint resolution

* chore: prettier:check and prettier:fix config

* chore: automated prettier:fix

* chore: lint workflow

* fix: cleanup commented code for review

* fix: text and logic enhancements (#132)

* fix: text and logic enhancements

* fix: prettier errors

* feat: add error boundary component (#134)

* style: make pagination component width of Holocat card (#135)

* feat: add 404 page component (#136)

* fix: UI color and text inconsistencies (#139)

* fix: UI color and text inconsistencies

- Update ErrorBoundary component to log errors using console.error instead of console.log
- Change "Go back home" link text to "Go to Homepage" in ErrorBoundary component
- Update "Go back to homepage" link text to "Go to Homepage" in NoResults component
- Change "Contribute" button text to "Suggest a source" in NoResults component
- Adjust styling and layout in 404 page component

* chore: update default sources in search box suggestions

* chore: fix sentence case text in no result component (#140)

* fix: update Greg maxwell author name in engine.json and dummy.ts files (#142)

---------

Co-authored-by: BalogunofAfrica <[email protected]>
Co-authored-by: 0tuedon <[email protected]>
Co-authored-by: Solomon eze <[email protected]>
Co-authored-by: Emmanuel Itakpe <[email protected]>
Co-authored-by: Andreas <[email protected]>
Co-authored-by: IgboPharaoh <[email protected]>

.eslintrc.json

@@ -1,3 +1,19 @@
 {
-  "extends": ["next", "next/core-web-vitals"]
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": ["next/core-web-vitals", "next", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "warn",
+    "react/prop-types": ["off"],
+    "no-console": ["warn", { "allow": ["warn", "error"] }],
+    "no-unused-vars": [
+      "warn",
+      { "vars": "all", "args": "none", "ignoreRestSiblings": false }
+    ],
+    "eol-last": ["warn", "always"],
+    "react/react-in-jsx-scope": "off"
+  }
 }

.github/workflows/lint.yml

@@ -0,0 +1,29 @@
+name: Lint Code
+
+on:
+  push:
+    branches: [main, staging]
+  pull_request:
+    branches: [main, staging]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Set up Yarn
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run linter
+        run: yarn lint && yarn prettier:check

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

Makefile

@@ -0,0 +1,7 @@
+code-check:
+	yarn lint
+	yarn prettier:check
+
+code-fix:
+	yarn lint:fix
+	yarn prettier:fix

README.md

@@ -1,17 +1,14 @@
-BTC TECHNICAL MATERIALS SEARCH
+![bitcoin-search-home](https://github.com/bitcoinsearch/bitcoinsearch-app/assets/18506343/65833946-63a2-400e-9e91-023f96cac9b2)
 
-This project will serve as a search engine for searching Bitcoin technical related materials. It will aggregate all Bitcoin related materials and performs search on those materials instead of going through thousands of unrelated Google search results. 
+# Welcome to Bitcoin Search
 
-It will classify materials according to:
+## Features
 
-- Relevance
-- Domains
-- Tags
-- Authors
+- **Elasticsearch Integration**: Directly interfaces with Elasticsearch, leveraging the dataset curated and indexed by the [scraper](https://github.com/bitcoinsearch/scraper). This integration facilitates robust full-text search capabilities, supporting complex queries, filters (authors, domains), and sorting options.
+- **URL-Driven Search State**: Manages the search state through URL parameters using NextJS's router, enabling shareable search URLs and intuitive user navigation.
+- **Proxy Server for Security**: Implements a [server-side proxy layer](src/pages/api/elasticSearchProxy/search.ts) for Elasticsearch queries, abstracting away direct access to the Elasticsearch cluster and enriching queries with necessary filters and parameters.
 
----
-
-## Getting started 
+## Getting started
 
 The search engine is built using NextJS and connects to elasticsearch
 

next.config.js

@@ -1,6 +1,24 @@
+const mapping = require("./src/config/mapping.json");
+const domains = [
+  ...new Set(
+    Object.keys(mapping.labels).map((domain) => new URL(domain).hostname)
+  ),
+];
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  images: {
+    // domain mapping is not an exhaustive list of all the domains we have
+    // domains,
+    // allow favicon from any indexed domain for now
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -7,7 +7,10 @@
     "dev": "GENERATE_SOURCEMAP=false next dev",
     "build": "GENERATE_SOURCEMAP=false next build",
     "start": "GENERATE_SOURCEMAP=false next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "prettier:check": "prettier --check . --ignore-path .gitignore",
+    "prettier:fix": "prettier --write . --ignore-path .gitignore"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.0.0",
@@ -19,15 +22,14 @@
     "@elastic/search-ui-elasticsearch-connector": "1.20.2",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@fontsource/geist-sans": "^5.0.2",
     "@netlify/plugin-nextjs": "^4.40.1",
     "@tanstack/react-query": "^4.29.12",
     "autoprefixer": "10.4.14",
-    "eslint": "^8.42.0",
-    "eslint-config-next": "^13.4.4",
     "framer-motion": "^6.5.1",
     "html-to-react": "^1.5.0",
     "next": "13.4.4",
-    "node-sass": "^7.0.3",
+    "node-sass": "^8.0.0",
     "postcss": "8.4.24",
     "rc-pagination": "^3.5.0",
     "react": "18.2.0",
@@ -42,6 +44,8 @@
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.2.4",
+    "eslint": "^8.42.0",
+    "eslint-config-next": "^13.4.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.8.8",

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

public/index.html

@@ -3,14 +3,23 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
     <meta name="theme-color" content="#000000" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Bitcoin Search</title>
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:image" content="https://bitcoinsearch.xyz/btc_book_2_1.jpg?v1">
-    <meta name="twitter:title" content="Technical ₿itcoin Search">
-    <meta name="twitter:description" content="The bitcoin technical search we deserve">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:image"
+      content="https://bitcoinsearch.xyz/btc_book_2_1.jpg?v1"
+    />
+    <meta name="twitter:title" content="Technical ₿itcoin Search" />
+    <meta
+      name="twitter:description"
+      content="The bitcoin technical search we deserve"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>