smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Style updates and default fixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-22 15:14:47 -05:00
parent c3495bd674
commit 74893ac68d
6 changed files with 118 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@@ -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'

102
README.md
View File

@@ -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 ?
- Image uploads for backgrounds?

12
src/hooks/useCommonHooks.ts
View File

@@ -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(

7
src/pages/homepage/Homepage.tsx
View File

@@ -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,

43
src/pages/homepage/components/SettingsButton.tsx → src/pages/homepage/components/SettingsButton/SettingsButton.tsx
View File

@@ -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,
}}
>
<Group p={'1rem'} gap={24}>
<Group p={'1rem'} gap={12}>
<Stack display={'flex'} align='center'>
<Stack
gap={0}
@@ -202,7 +191,7 @@ function SettingsButton() {
style={{ aspectRatio: '1/1' }}
>
<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
<Group mt={'-1rem'} mb={'-.75rem'} w={'95%'} justify='space-between'>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
<ActionIcon
className={actionIconClasses.menuActions}
@@ -300,6 +289,7 @@ function SettingsButton() {
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
@@ -313,7 +303,7 @@ function SettingsButton() {
paddingBottom: 2,
borderRadius: 8,
position: 'absolute',
left: '-20px',
left: '-12px',
top: '-8px',
backgroundColor: theme.primaryColor,
color: theme.backgroundColor,
@@ -321,10 +311,10 @@ function SettingsButton() {
>
Apps
</Text>
<Text fz={14} mt={16}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Text fz={14} mt={16}>
Density
</Text>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
@@ -333,10 +323,9 @@ function SettingsButton() {
onChange={(value) => setAppDensity(value)}
min={1}
max={8}
marks={marks}
/>
</Stack>
<Group justify='space-between' px={'.5rem'}>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
@@ -363,7 +352,6 @@ function SettingsButton() {
placeholder='Sort Applications...'
value={appSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
w={'45%'}
classNames={{
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
@@ -380,6 +368,7 @@ function SettingsButton() {
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
@@ -393,7 +382,7 @@ function SettingsButton() {
paddingBottom: 2,
borderRadius: 8,
position: 'absolute',
left: '-20px',
left: '-12px',
top: '-8px',
backgroundColor: theme.primaryColor,
color: theme.backgroundColor,
@@ -401,10 +390,10 @@ function SettingsButton() {
>
Bookmarks
</Text>
<Text fz={14} mt={16}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Text fz={14} mt={16}>
Density
</Text>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
@@ -413,10 +402,9 @@ function SettingsButton() {
onChange={(value) => setBookmarkDensity(value)}
min={1}
max={8}
marks={marks}
/>
</Stack>
<Group justify='space-between' px={'.5rem'}>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
@@ -443,7 +431,6 @@ function SettingsButton() {
placeholder='Sort Bookmarks...'
value={bookmarkSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
w={'45%'}
classNames={{
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
@@ -459,7 +446,7 @@ function SettingsButton() {
</Stack>
</Stack>
</Group>
<Group w={'100%'} align='center' justify='center'>
<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
<Button
leftSection={<FiSettings />}
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}

4
src/styles/Slider.module.css
View File

@@ -16,4 +16,8 @@
display: none;
}
}
.label {
color: var(--color-background);
background-color: var(--color-text-pri);
}
}