Merge branch 'main' into adib-branch

.github/workflows/deploy-stage.yaml

@@ -0,0 +1,52 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build Static Content
+        run: pnpm run build
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: gh-pages
+          folder: dist
+          clean: true

.gitignore

@@ -8,8 +8,6 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
-dist-ssr
 *.local
 
 # Editor directories and files

package.json

@@ -25,7 +25,7 @@
     "sort-by": "^1.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "10.4.16",
@@ -38,7 +38,8 @@
     "postcss": "^8.4.33",
     "prettier": "3.1.1",
     "tailwindcss": "^3.4.1",
-    "vite": "^5.0.11"
+    "vite": "^5.0.11",
+    "vite-plugin-compression2": "^0.11.0"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [

src/App.jsx

@@ -2,15 +2,15 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Navbar from './components/Navbar';
 import Home from './pages/Home';
 import Test from './pages/Test';
-import Footer from './pages/Footer';
+import Footer from './components/Footer';
 function App() {
   return (
-    <div className="flex flex-col justify-start items-start min-h-screen bg-gray-100 overflow-hidden">
+    <div className="flex flex-col justify-start items-start min-h-screen bg-gray-100">
       <Router>
         <Navbar />
 
         <Routes>
-          <Route exact path="/" element={<Home />} />
+          <Route exact path="/artistry-hub/" element={<Home />} />
           <Route exact path="/test" element={<Test />} />
           {/* <Route component={GenericNotFound} /> */}
         </Routes>

src/components/Navbar.jsx

@@ -13,13 +13,12 @@ import {
 } from '@nextui-org/react';
 import { Link } from 'react-router-dom';
 import { FaSearch } from 'react-icons/fa';
-import { abstractsList } from '../data/list';
-import { matchSorter } from 'match-sorter';
+import { allLists } from '../data/list';
 
-const sortedAbstractsList = matchSorter(abstractsList, '', { keys: ['name'] });
-const SearchAutocomplete = () => (
+const SearchAutocomplete = ({ allLists }) => (
   <Autocomplete
-    defaultItems={sortedAbstractsList}
+    defaultItems={allLists}
+    aria-label="Search for Artworks"
     classNames={{
       base: 'max-w-lg',
       listboxWrapper: 'max-h-[320px]',
@@ -111,14 +110,16 @@ const UserProfileDropdown = () => (
 );
 
 const NavbarComponent = () => {
+  const allItems = Object.values(allLists).flat();
+  const sortedAllList = allItems.sort((a, b) => a.name.localeCompare(b.name));
   return (
     <Navbar maxWidth={'full'} isBordered shouldHideOnScroll>
-      <Link to="/" reloadDocument>
-        <Image src="/logo.png" alt="Logo" width={40} height={40} isZoomed />
+      <Link to="/artistry-hub/" reloadDocument>
+        <Image src="./logo.png" alt="Logo" width={40} height={40} isZoomed />
       </Link>
       <NavbarContent justify="start">
         <NavbarBrand>
-          <SearchAutocomplete />
+          <SearchAutocomplete allLists={sortedAllList} />
         </NavbarBrand>
       </NavbarContent>
       <NavbarContent as="div" className="items-center" justify="end">

src/data/list/abstracts-list.js

@@ -4,7 +4,7 @@ import { artists } from './artists-list';
 
 export const abstractsList = [
   {
-    id: 1,
+    id: 1001,
     name: 'False Start',
     img: FalseStart,
     artist: 'Jasper Johns',
@@ -17,7 +17,7 @@ export const abstractsList = [
     artistInfo: artists['Jasper Johns'] || {},
   },
   {
-    id: 2,
+    id: 1002,
     name: 'Interchange',
     img: Interchange,
     artist: 'Willem de Kooning',

src/data/list/landscapes-list.js

@@ -5,7 +5,7 @@ import { artists } from './artists-list.js';
 
 export const landscapesList = [
   {
-    id: 1,
+    id: 2001,
     name: 'Starry Night',
     img: StarryNight,
     artist: 'Vincent Van Gogh',
@@ -18,7 +18,7 @@ export const landscapesList = [
     artistInfo: artists['Vincent Van Gogh'] || {},
   },
   {
-    id: 2,
+    id: 2002,
     name: 'Mr and Mrs Andrews',
     img: MrAndMrsAndrews,
     artist: 'Thomas Gainsborough',
@@ -30,7 +30,7 @@ export const landscapesList = [
     style: 'Rococo',
   },
   {
-    id: 3,
+    id: 2003,
     name: 'The Blue Boy',
     img: TheBlueBoy,
     artist: 'Thomas Gainsborough',

src/data/list/paintings-list.js

@@ -6,7 +6,7 @@ import { artists } from './artists-list.js';
 
 export const paintingsList = [
   {
-    id: 1,
+    id: 3001,
     name: 'Meules',
     img: Meules,
     artist: 'Claude Monet',
@@ -19,7 +19,7 @@ export const paintingsList = [
     artistInfo: artists['Claude Monet'] || {},
   },
   {
-    id: 2,
+    id: 3002,
     name: "Les Demoiselles d'Avignon",
     img: LesDemoisellesdAvignon,
     artist: 'Pablo Picasso',
@@ -32,7 +32,7 @@ export const paintingsList = [
     artistInfo: artists['Pablo Picasso'] || {},
   },
   {
-    id: 3,
+    id: 3003,
     name: 'Garden Of Joy',
     img: GardenOfJoy,
     artist: 'Mariam Omar',
@@ -44,7 +44,7 @@ export const paintingsList = [
     style: 'Floral',
   },
   {
-    id: 4,
+    id: 3004,
     name: 'Gadis Picnic',
     img: GadisPicnic,
     artist: 'Mariam Omar',

src/data/list/portraits-list.js

@@ -5,7 +5,7 @@ import { artists } from './artists-list.js';
 
 export const portraitsList = [
   {
-    id: 1,
+    id: 4001,
     name: 'Mona Lisa',
     img: MonaLisa,
     artist: 'Leonardo Da Vinci',
@@ -18,7 +18,7 @@ export const portraitsList = [
     artistInfo: artists['Leonardo Da Vinci'] || {},
   },
   {
-    id: 2,
+    id: 4002,
     name: "Whistler's Mother",
     img: WhistlersMother,
     artist: 'James Abbott McNeill Whistler',
@@ -31,7 +31,7 @@ export const portraitsList = [
     artistInfo: artists['James Abbott McNeill Whistler'] || {},
   },
   {
-    id: 3,
+    id: 4003,
     name: 'Girl with a Pearl Earring',
     img: GirlWithAPearlEarring,
     artist: 'Johannes Vermeer',

src/pages/Home.jsx

@@ -14,9 +14,9 @@ const CategoryItem = ({ category }) => (
         src={category.imageUrl}
         alt={category.name}
         isZoomed
-        className="w-20 h-20"
+        className="w-24 h-24"
       />
-      <span className="mt-2 text-xs">{category.name}</span>
+      <span className="mt-1 text-sm">{category.name}</span>
     </div>
   </Tooltip>
 );

vite.config.js

@@ -1,7 +1,10 @@
 import { defineConfig } from 'vite';
+import { compression } from 'vite-plugin-compression2';
 import react from '@vitejs/plugin-react-swc';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: '/artistry-hub/',
+  compression,
 });