diff --git a/.env.example b/.env.example index 8f8a1e0..90e3691 100644 --- a/.env.example +++ b/.env.example @@ -1,3 +1,3 @@ VITE_DOMAIN_DEV='http://localhost:5000' -VITE_DOMAIN_PROD='https://sean.bet' +VITE_DOMAIN_PROD='https://domain.local' VITE_BASE_URL='trigger' diff --git a/README.md b/README.md index 56c39ab..e355362 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,106 @@ -# Setup +# Trigger Home Page -Install MariaDB/MySQL -Install Git -Install Node 19+ +A homepage replacement for your browser built on React and SQL. -npm install --legacy-peer-deps +[TOC] +## Prerequisite Setup + +* Install MariaDB/MySQL + +* Install Git + +* Install Node 20+ + +Navigate to the TriggerFrontend and TriggerBackend folders and run: + +* npm install --legacy-peer-deps + +### WARNING !!! + +Trigger does not handle authentication of any kind. It is designed to be used behind a reverse proxy, such as NGINX, or other service that can request authentication prior to serving the page. + +## MariaDB/MySQL setup + +Connect to your server: + +```shell +sudo mariadb +``` + +Create the database and new administration user: + +```sql create database trigger_database; + grant all privileges on trigger_database.* TO 'triggeradmin'@'localhost' identified by 'trigger'; + flush privileges; +``` -import defaultDatabase.sql into your database server +⚠️ Update the above grant line to use a username and password other than the default. ⚠️ -To run: +Import defaultDatabase.sql into your database server using your preferred management application or run the following via the terminal: + +```shell +sudo mariadb -u triggeradmin -p trigger_database < defaultDatabase.sql +``` + +## Configuration + +Clone both the [TriggerFrontend](https://sean.bet/gitea/smedmunds/TriggerFrontend) and [TriggerBackend](https://sean.bet/gitea/smedmunds/TriggerBackend) repositories. They do not need to be run from the same folder, or even the same machine. + +Trigger uses .env files to configure the connection to the database as well as the base url for the application. Prior to running or building the app, you will need to edit the file at TriggerBackend/.env and TriggerFrontend/.env to match your environment. + +Make a copy of the example file: + +```shell +cp TriggerFrontend/.env.example TriggerFrontend/.env +cp TriggerBackend/.env.example TriggerBackend/.env +``` + +⚠️ Update the following fields to match your environment's URLs. The Domains and Base URL here must be defined without a leading '/'! ⚠️ + +Frontend .env.example +```shell +VITE_DOMAIN_DEV='http://localhost:5000' +VITE_DOMAIN_PROD='https://domain.local' +VITE_BASE_URL='trigger' +``` + +Backend .env.example + +```shell +DB_HOST='127.0.0.1' +DB_USER='triggeradmin' +DB_PASS='trigger' +``` + +## Run/build +To run the application without building: + +```shell npm run dev +``` -alias lint="npx @biomejs/biome lint . --write --unsafe && npx @biomejs/biome format . --write && npx @biomejs/biome check . --write --unsafe && npx @biomejs/biome ci . --formatter-enabled=true --linter-enabled=true --organize-imports-enabled=true" +To build the application for production: -To build: -Add any background images to public/backgrounds to include them in the build +#### ⚠️ Add any background images to public/backgrounds to include them in the build ⚠️ + +```shell npm run build +``` Run with pm2: -npm install -g pm2 + +```shell +sudo npm install -g pm2 + sudo pm2 serve ./dist --no-daemon --spa --port 3000 + sudo pm2 start server.cjs +``` -# TODO -- Expand settings search to fields other than name +### TODO -- ? Image uploads for backgrounds ? \ No newline at end of file +- Image uploads for backgrounds? \ No newline at end of file diff --git a/src/hooks/useCommonHooks.ts b/src/hooks/useCommonHooks.ts index aad101b..8b1996f 100644 --- a/src/hooks/useCommonHooks.ts +++ b/src/hooks/useCommonHooks.ts @@ -73,12 +73,12 @@ export function useCommonHooks() { }); const modalStyle = { - '--color-text-pri': theme.primaryColor, - '--color-text-acc': theme.accentColor, - '--color-background': theme.backgroundColor, - '--color-border': theme.borderColor, - '--color-search-background': theme.searchColor, - '--image-background': `url(${theme.backgroundImage})`, + '--color-text-pri': theme?.primaryColor, + '--color-text-acc': theme?.accentColor, + '--color-background': theme?.backgroundColor, + '--color-border': theme?.borderColor, + '--color-search-background': theme?.searchColor, + '--image-background': `url(${theme?.backgroundImage})`, }; const urlPattern = new RegExp( diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx index 50ef908..b8829f2 100644 --- a/src/pages/homepage/Homepage.tsx +++ b/src/pages/homepage/Homepage.tsx @@ -15,7 +15,7 @@ import Bookmarks from './components/Bookmarks/Bookmarks'; import Header from './components/Header/Header'; import LargeHeader from './components/Header/LargeHeader'; import Search from './components/Search/Search'; -import SettingsButton from './components/SettingsButton'; +import SettingsButton from './components/SettingsButton/SettingsButton'; export function Homepage() { const { data: personal, isFetched: personalIsFetched } = useQueryAPI({ @@ -80,8 +80,9 @@ export function Homepage() { }); } }, [messages, personalData, isMessagesFetching]); - - const { data: weatherMetadata } = useOSMAPI({ address: personal?.[0].physicalAddress }); + const { data: weatherMetadata } = useOSMAPI({ + address: personal?.[0]?.physicalAddress, + }); const { data: points } = useWeatherAPI({ endpoint: 'points', lat: weatherMetadata?.[0].lat ?? currentLocation.lat, diff --git a/src/pages/homepage/components/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx similarity index 94% rename from src/pages/homepage/components/SettingsButton.tsx rename to src/pages/homepage/components/SettingsButton/SettingsButton.tsx index a24f0a5..7e33ce5 100644 --- a/src/pages/homepage/components/SettingsButton.tsx +++ b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx @@ -78,17 +78,6 @@ function SettingsButton() { }); }; - const marks = [ - { value: 1, label: '1' }, - { value: 2, label: '2' }, - { value: 3, label: '3' }, - { value: 4, label: '4' }, - { value: 5, label: '5' }, - { value: 6, label: '6' }, - { value: 7, label: '7' }, - { value: 8, label: '8' }, - ]; - const queryClient = useQueryClient(); const handleRefresh = () => { @@ -143,7 +132,7 @@ function SettingsButton() { : theme.backgroundColor, }} > - + Themes - + Apps + + Density + - - Density - setAppDensity(value)} min={1} max={8} - marks={marks} /> - + Z', 'Z>A', 'Newest', 'Oldest']} - w={'45%'} classNames={{ input: selectClasses.menuSelectInput, label: selectClasses.menuSelectLabel, @@ -380,6 +368,7 @@ function SettingsButton() { Bookmarks + + Density + - - Density - setBookmarkDensity(value)} min={1} max={8} - marks={marks} /> - + Z', 'Z>A', 'Newest', 'Oldest']} - w={'45%'} classNames={{ input: selectClasses.menuSelectInput, label: selectClasses.menuSelectLabel, @@ -459,7 +446,7 @@ function SettingsButton() { - +