pawelmalak/flame
1
1
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2024-12-20 08:41:48 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #76 from pawelmalak/feature

Browse Source 
Added support for custom SVG Icons. Added new search queries
This commit is contained in:
pawelmalak 2021-08-09 13:01:46 +02:00 committed by GitHub
commit 36c9b7648a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 463 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.prettierrc Normal file
View File

@ -0,0 +1,8 @@
{
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"arrowParens": "always",
"printWidth": 80,
"trailingComma": "es5"
}

4
CHANGELOG.md
View File

@ -1,3 +1,7 @@
### v1.6.3 (2021-08-09)
- Added support for custom SVG icons ([#73](https://github.com/pawelmalak/flame/issues/73))
- Added Deezer and Tidal to search queries
### v1.6.2 (2021-08-06) ### v1.6.2 (2021-08-06)
- Fixed changelog link - Fixed changelog link
- Added support for Docker API ([#14](https://github.com/pawelmalak/flame/issues/14)) - Added support for Docker API ([#14](https://github.com/pawelmalak/flame/issues/14))

10
README.md
View File

@ -74,7 +74,7 @@ services:
container_name: flame container_name: flame
volumes: volumes:
- <host_dir>:/app/data - <host_dir>:/app/data
- /var/run/docker.sock:/var/sock/docker.sock # optional but required for Docker integration feature - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration feature
ports: ports:
- 5005:5005 - 5005:5005
restart: unless-stopped restart: unless-stopped
@ -174,10 +174,4 @@ And you must have activated the Docker sync option in the settings panel.
> This is an experimental feature. Its behaviour might change in the future. > This is an experimental feature. Its behaviour might change in the future.
> >
> Follow instructions from wiki: [Custom CSS](https://github.com/pawelmalak/flame/wiki/Custom-CSS) > Follow instructions from wiki: [Custom CSS](https://github.com/pawelmalak/flame/wiki/Custom-CSS)
## Support
If you want to support development of Flame and my upcoming self-hosted and open source projects you can use the following link:
[![PayPal Badge](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/paypalme/pawelmalak)

5
api.js
View File

@ -9,8 +9,7 @@ api.use(express.static(join(__dirname, 'public')));
api.use('/uploads', express.static(join(__dirname, 'data/uploads'))); api.use('/uploads', express.static(join(__dirname, 'data/uploads')));
api.get(/^\/(?!api)/, (req, res) => { api.get(/^\/(?!api)/, (req, res) => {
res.sendFile(join(__dirname, 'public/index.html')); res.sendFile(join(__dirname, 'public/index.html'));
}) });
// Body parser // Body parser
api.use(express.json()); api.use(express.json());
@ -25,4 +24,4 @@ api.use('/api/bookmarks', require('./routes/bookmark'));
// Custom error handler // Custom error handler
api.use(errorHandler); api.use(errorHandler);
module.exports = api; module.exports = api;

2
client/.env
View File

@ -1 +1 @@
REACT_APP_VERSION=1.6.2 REACT_APP_VERSION=1.6.3

19
client/package-lock.json generated
View File

@ -6462,6 +6462,14 @@
} }
} }
}, },
"external-svg-loader": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/external-svg-loader/-/external-svg-loader-1.3.4.tgz",
"integrity": "sha512-73h7/rYYA4KnIV74M/0r6zHWPLuY/8QHnwKymwh+46tbQAZ0ZtoN98TJZI+CUYTfP2nXgqslCgSsxcr7eOw45w==",
"requires": {
"idb-keyval": "^3.2.0"
}
},
"extglob": { "extglob": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz", "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@ -7527,6 +7535,11 @@
"postcss": "^7.0.14" "postcss": "^7.0.14"
} }
}, },
"idb-keyval": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-3.2.0.tgz",
"integrity": "sha512-slx8Q6oywCCSfKgPgL0sEsXtPVnSbTLWpyiDcu6msHOyKOLari1TD1qocXVCft80umnkk3/Qqh3lwoFt8T/BPQ=="
},
"identity-obj-proxy": { "identity-obj-proxy": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz", "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
@ -12100,6 +12113,12 @@
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
}, },
"prettier": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
"integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
"dev": true
},
"pretty-bytes": { "pretty-bytes": {
"version": "5.6.0", "version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

4
client/package.json
View File

@ -16,6 +16,7 @@
"@types/react-redux": "^7.1.16", "@types/react-redux": "^7.1.16",
"@types/react-router-dom": "^5.1.7", "@types/react-router-dom": "^5.1.7",
"axios": "^0.21.1", "axios": "^0.21.1",
"external-svg-loader": "^1.3.4",
"http-proxy-middleware": "^2.0.0", "http-proxy-middleware": "^2.0.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0", "react-beautiful-dnd": "^13.1.0",
@ -53,5 +54,8 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"prettier": "^2.3.2"
} }
} }

5
client/src/App.tsx
View File

@ -1,5 +1,6 @@
import { BrowserRouter, Route, Switch } from 'react-router-dom'; import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { getConfig, setTheme } from './store/actions'; import { getConfig, setTheme } from './store/actions';
import 'external-svg-loader';
// Redux // Redux
import { store } from './store/store'; import { store } from './store/store';
@ -40,6 +41,6 @@ const App = (): JSX.Element => {
<NotificationCenter /> <NotificationCenter />
</Provider> </Provider>
); );
} };
export default App; export default App;

6
client/src/components/Apps/AppCard/AppCard.module.css
View File

@ -33,11 +33,11 @@
.AppCard { .AppCard {
padding: 2px; padding: 2px;
border-radius: 4px; border-radius: 4px;
transition: all 0.10s; transition: all 0.1s;
} }
.AppCard:hover { .AppCard:hover {
background-color: rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.2);
} }
} }
@ -47,4 +47,4 @@
margin-top: 2px; margin-top: 2px;
margin-left: 2px; margin-left: 2px;
object-fit: contain; object-fit: contain;
} }

42
client/src/components/Apps/AppCard/AppCard.tsx
View File

@ -13,6 +13,31 @@ interface ComponentProps {
const AppCard = (props: ComponentProps): JSX.Element => { const AppCard = (props: ComponentProps): JSX.Element => {
const [displayUrl, redirectUrl] = urlParser(props.app.url); const [displayUrl, redirectUrl] = urlParser(props.app.url);
let iconEl: JSX.Element;
const { icon } = props.app;
if (/.(jpeg|jpg|png)$/i.test(icon)) {
iconEl = (
<img
src={`/uploads/${icon}`}
alt={`${props.app.name} icon`}
className={classes.CustomIcon}
/>
);
} else if (/.(svg)$/i.test(icon)) {
iconEl = (
<div className={classes.CustomIcon}>
<svg
data-src={`/uploads/${icon}`}
fill='var(--color-primary)'
className={classes.CustomIcon}
></svg>
</div>
);
} else {
iconEl = <Icon icon={iconParser(icon)} />;
}
return ( return (
<a <a
href={redirectUrl} href={redirectUrl}
@ -20,22 +45,13 @@ const AppCard = (props: ComponentProps): JSX.Element => {
rel='noreferrer' rel='noreferrer'
className={classes.AppCard} className={classes.AppCard}
> >
<div className={classes.AppCardIcon}> <div className={classes.AppCardIcon}>{iconEl}</div>
{(/.(jpeg|jpg|png)$/i).test(props.app.icon)
? <img
src={`/uploads/${props.app.icon}`}
alt={`${props.app.name} icon`}
className={classes.CustomIcon}
/>
: <Icon icon={iconParser(props.app.icon)} />
}
</div>
<div className={classes.AppCardDetails}> <div className={classes.AppCardDetails}>
<h5>{props.app.name}</h5> <h5>{props.app.name}</h5>
<span>{displayUrl}</span> <span>{displayUrl}</span>
</div> </div>
</a> </a>
) );
} };
export default AppCard; export default AppCard;

128
client/src/components/Apps/AppForm/AppForm.tsx
View File

@ -31,28 +31,28 @@ const AppForm = (props: ComponentProps): JSX.Element => {
name: props.app.name, name: props.app.name,
url: props.app.url, url: props.app.url,
icon: props.app.icon icon: props.app.icon
}) });
} else { } else {
setFormData({ setFormData({
name: '', name: '',
url: '', url: '',
icon: '' icon: ''
}) });
} }
}, [props.app]) }, [props.app]);
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => { const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
setFormData({ setFormData({
...formData, ...formData,
[e.target.name]: e.target.value [e.target.name]: e.target.value
}) });
} };
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => { const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
if (e.target.files) { if (e.target.files) {
setCustomIcon(e.target.files[0]); setCustomIcon(e.target.files[0]);
} }
} };
const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => { const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
e.preventDefault(); e.preventDefault();
@ -66,7 +66,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
data.append('url', formData.url); data.append('url', formData.url);
return data; return data;
} };
if (!props.app) { if (!props.app) {
if (customIcon) { if (customIcon) {
@ -89,10 +89,10 @@ const AppForm = (props: ComponentProps): JSX.Element => {
name: '', name: '',
url: '', url: '',
icon: '' icon: ''
}) });
setCustomIcon(null); setCustomIcon(null);
} };
return ( return (
<ModalForm <ModalForm
@ -108,7 +108,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
placeholder='Bookstack' placeholder='Bookstack'
required required
value={formData.name} value={formData.name}
onChange={(e) => inputChangeHandler(e)} onChange={e => inputChangeHandler(e)}
/> />
</InputGroup> </InputGroup>
<InputGroup> <InputGroup>
@ -120,7 +120,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
placeholder='bookstack.example.com' placeholder='bookstack.example.com'
required required
value={formData.url} value={formData.url}
onChange={(e) => inputChangeHandler(e)} onChange={e => inputChangeHandler(e)}
/> />
<span> <span>
<a <a
@ -128,61 +128,65 @@ const AppForm = (props: ComponentProps): JSX.Element => {
target='_blank' target='_blank'
rel='noreferrer' rel='noreferrer'
> >
{' '}Check supported URL formats {' '}
Check supported URL formats
</a> </a>
</span> </span>
</InputGroup> </InputGroup>
{!useCustomIcon {!useCustomIcon ? (
// use mdi icon // use mdi icon
? (<InputGroup> <InputGroup>
<label htmlFor='icon'>App Icon</label> <label htmlFor='icon'>App Icon</label>
<input <input
type='text' type='text'
name='icon' name='icon'
id='icon' id='icon'
placeholder='book-open-outline' placeholder='book-open-outline'
required required
value={formData.icon} value={formData.icon}
onChange={(e) => inputChangeHandler(e)} onChange={e => inputChangeHandler(e)}
/> />
<span> <span>
Use icon name from MDI. Use icon name from MDI.
<a <a href='https://materialdesignicons.com/' target='blank'>
href='https://materialdesignicons.com/' {' '}
target='blank'> Click here for reference
{' '}Click here for reference </a>
</a> </span>
</span> <span
<span onClick={() => toggleUseCustomIcon(!useCustomIcon)}
onClick={() => toggleUseCustomIcon(!useCustomIcon)} className={classes.Switch}
className={classes.Switch}> >
Switch to custom icon upload Switch to custom icon upload
</span> </span>
</InputGroup>) </InputGroup>
) : (
// upload custom icon // upload custom icon
: (<InputGroup> <InputGroup>
<label htmlFor='icon'>App Icon</label> <label htmlFor='icon'>App Icon</label>
<input <input
type='file' type='file'
name='icon' name='icon'
id='icon' id='icon'
required required
onChange={(e) => fileChangeHandler(e)} onChange={e => fileChangeHandler(e)}
accept='.jpg,.jpeg,.png' accept='.jpg,.jpeg,.png,.svg'
/> />
<span <span
onClick={() => toggleUseCustomIcon(!useCustomIcon)} onClick={() => toggleUseCustomIcon(!useCustomIcon)}
className={classes.Switch}> className={classes.Switch}
Switch to MDI >
</span> Switch to MDI
</InputGroup>) </span>
} </InputGroup>
{!props.app )}
? <Button>Add new application</Button> {!props.app ? (
: <Button>Update application</Button> <Button>Add new application</Button>
} ) : (
<Button>Update application</Button>
)}
</ModalForm> </ModalForm>
) );
} };
export default connect(null, { addApp, updateApp })(AppForm); export default connect(null, { addApp, updateApp })(AppForm);

12
client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css
View File

@ -32,4 +32,14 @@
display: flex; display: flex;
margin-top: 3px; margin-top: 3px;
margin-right: 2px; margin-right: 2px;
} justify-content: center;
align-items: center;
}
.BookmarkIconSvg {
width: 80%;
height: 80%;
margin-top: 2px;
margin-left: 2px;
object-fit: contain;
}

55
client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
View File

@ -16,31 +16,52 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
{props.category.bookmarks.map((bookmark: Bookmark) => { {props.category.bookmarks.map((bookmark: Bookmark) => {
const redirectUrl = urlParser(bookmark.url)[1]; const redirectUrl = urlParser(bookmark.url)[1];
let iconEl: JSX.Element;
const { icon, name } = bookmark;
if (/.(jpeg|jpg|png)$/i.test(icon)) {
iconEl = (
<div className={classes.BookmarkIcon}>
<img
src={`/uploads/${icon}`}
alt={`${name} icon`}
className={classes.CustomIcon}
/>
</div>
);
} else if (/.(svg)$/i.test(icon)) {
iconEl = (
<div className={classes.BookmarkIcon}>
<svg
data-src={`/uploads/${icon}`}
fill='var(--color-primary)'
className={classes.BookmarkIconSvg}
></svg>
</div>
);
} else {
iconEl = (
<div className={classes.BookmarkIcon}>
<Icon icon={iconParser(icon)} />
</div>
);
}
return ( return (
<a <a
href={redirectUrl} href={redirectUrl}
target={searchConfig('bookmarksSameTab', false) ? '' : '_blank'} target={searchConfig('bookmarksSameTab', false) ? '' : '_blank'}
rel='noreferrer' rel='noreferrer'
key={`bookmark-${bookmark.id}`}> key={`bookmark-${bookmark.id}`}
{bookmark.icon && ( >
<div className={classes.BookmarkIcon}> {icon && iconEl}
{(/.(jpeg|jpg|png)$/i).test(bookmark.icon)
? <img
src={`/uploads/${bookmark.icon}`}
alt={`${bookmark.name} icon`}
className={classes.CustomIcon}
/>
: <Icon icon={iconParser(bookmark.icon)} />
}
</div>
)}
{bookmark.name} {bookmark.name}
</a> </a>
) );
})} })}
</div> </div>
</div> </div>
) );
} };
export default BookmarkCard; export default BookmarkCard;

329
client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
View File

@ -1,11 +1,31 @@
import { useState, SyntheticEvent, Fragment, ChangeEvent, useEffect } from 'react'; import {
useState,
SyntheticEvent,
Fragment,
ChangeEvent,
useEffect
} from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ModalForm from '../../UI/Forms/ModalForm/ModalForm'; import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
import InputGroup from '../../UI/Forms/InputGroup/InputGroup'; import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotification } from '../../../interfaces'; import {
Bookmark,
Category,
GlobalState,
NewBookmark,
NewCategory,
NewNotification
} from '../../../interfaces';
import { ContentType } from '../Bookmarks'; import { ContentType } from '../Bookmarks';
import { getCategories, addCategory, addBookmark, updateCategory, updateBookmark, createNotification } from '../../../store/actions'; import {
getCategories,
addCategory,
addBookmark,
updateCategory,
updateBookmark,
createNotification
} from '../../../store/actions';
import Button from '../../UI/Buttons/Button/Button'; import Button from '../../UI/Buttons/Button/Button';
import classes from './BookmarkForm.module.css'; import classes from './BookmarkForm.module.css';
@ -22,8 +42,8 @@ interface ComponentProps {
id: number, id: number,
formData: NewBookmark | FormData, formData: NewBookmark | FormData,
category: { category: {
prev: number, prev: number;
curr: number curr: number;
} }
) => void; ) => void;
createNotification: (notification: NewNotification) => void; createNotification: (notification: NewNotification) => void;
@ -34,14 +54,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
const [customIcon, setCustomIcon] = useState<File | null>(null); const [customIcon, setCustomIcon] = useState<File | null>(null);
const [categoryName, setCategoryName] = useState<NewCategory>({ const [categoryName, setCategoryName] = useState<NewCategory>({
name: '' name: ''
}) });
const [formData, setFormData] = useState<NewBookmark>({ const [formData, setFormData] = useState<NewBookmark>({
name: '', name: '',
url: '', url: '',
categoryId: -1, categoryId: -1,
icon: '' icon: ''
}) });
// Load category data if provided for editing // Load category data if provided for editing
useEffect(() => { useEffect(() => {
@ -50,7 +70,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
} else { } else {
setCategoryName({ name: '' }); setCategoryName({ name: '' });
} }
}, [props.category]) }, [props.category]);
// Load bookmark data if provided for editing // Load bookmark data if provided for editing
useEffect(() => { useEffect(() => {
@ -60,16 +80,16 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
url: props.bookmark.url, url: props.bookmark.url,
categoryId: props.bookmark.categoryId, categoryId: props.bookmark.categoryId,
icon: props.bookmark.icon icon: props.bookmark.icon
}) });
} else { } else {
setFormData({ setFormData({
name: '', name: '',
url: '', url: '',
categoryId: -1, categoryId: -1,
icon: '' icon: ''
}) });
} }
}, [props.bookmark]) }, [props.bookmark]);
const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => { const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
e.preventDefault(); e.preventDefault();
@ -84,7 +104,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
data.append('categoryId', `${formData.categoryId}`); data.append('categoryId', `${formData.categoryId}`);
return data; return data;
} };
if (!props.category && !props.bookmark) { if (!props.category && !props.bookmark) {
// Add new // Add new
@ -98,7 +118,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
props.createNotification({ props.createNotification({
title: 'Error', title: 'Error',
message: 'Please select category' message: 'Please select category'
}) });
return; return;
} }
@ -108,15 +128,15 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
} else { } else {
props.addBookmark(formData); props.addBookmark(formData);
} }
setFormData({ setFormData({
name: '', name: '',
url: '', url: '',
categoryId: formData.categoryId, categoryId: formData.categoryId,
icon: '' icon: ''
}) });
setCustomIcon(null) setCustomIcon(null);
} }
} else { } else {
// Update // Update
@ -128,23 +148,15 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Update bookmark // Update bookmark
if (customIcon) { if (customIcon) {
const data = createFormData(); const data = createFormData();
props.updateBookmark( props.updateBookmark(props.bookmark.id, data, {
props.bookmark.id, prev: props.bookmark.categoryId,
data, curr: formData.categoryId
{ });
prev: props.bookmark.categoryId,
curr: formData.categoryId
}
)
} else { } else {
props.updateBookmark( props.updateBookmark(props.bookmark.id, formData, {
props.bookmark.id, prev: props.bookmark.categoryId,
formData, curr: formData.categoryId
{ });
prev: props.bookmark.categoryId,
curr: formData.categoryId
}
);
} }
setFormData({ setFormData({
@ -152,36 +164,36 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
url: '', url: '',
categoryId: -1, categoryId: -1,
icon: '' icon: ''
}) });
setCustomIcon(null) setCustomIcon(null);
} }
props.modalHandler(); props.modalHandler();
} }
} };
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => { const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
setFormData({ setFormData({
...formData, ...formData,
[e.target.name]: e.target.value [e.target.name]: e.target.value
}) });
} };
const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => { const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
setFormData({ setFormData({
...formData, ...formData,
categoryId: parseInt(e.target.value) categoryId: parseInt(e.target.value)
}) });
} };
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => { const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
if (e.target.files) { if (e.target.files) {
setCustomIcon(e.target.files[0]); setCustomIcon(e.target.files[0]);
} }
} };
let button = <Button>Submit</Button> let button = <Button>Submit</Button>;
if (!props.category && !props.bookmark) { if (!props.category && !props.bookmark) {
if (props.contentType === ContentType.category) { if (props.contentType === ContentType.category) {
@ -190,9 +202,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
button = <Button>Add new bookmark</Button>; button = <Button>Add new bookmark</Button>;
} }
} else if (props.category) { } else if (props.category) {
button = <Button>Update category</Button> button = <Button>Update category</Button>;
} else if (props.bookmark) { } else if (props.bookmark) {
button = <Button>Update bookmark</Button> button = <Button>Update bookmark</Button>;
} }
return ( return (
@ -200,136 +212,133 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
modalHandler={props.modalHandler} modalHandler={props.modalHandler}
formHandler={formSubmitHandler} formHandler={formSubmitHandler}
> >
{props.contentType === ContentType.category {props.contentType === ContentType.category ? (
? ( <Fragment>
<Fragment> <InputGroup>
<label htmlFor='categoryName'>Category Name</label>
<input
type='text'
name='categoryName'
id='categoryName'
placeholder='Social Media'
required
value={categoryName.name}
onChange={e => setCategoryName({ name: e.target.value })}
/>
</InputGroup>
</Fragment>
) : (
<Fragment>
<InputGroup>
<label htmlFor='name'>Bookmark Name</label>
<input
type='text'
name='name'
id='name'
placeholder='Reddit'
required
value={formData.name}
onChange={e => inputChangeHandler(e)}
/>
</InputGroup>
<InputGroup>
<label htmlFor='url'>Bookmark URL</label>
<input
type='text'
name='url'
id='url'
placeholder='reddit.com'
required
value={formData.url}
onChange={e => inputChangeHandler(e)}
/>
<span>
<a
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
target='_blank'
rel='noreferrer'
>
{' '}
Check supported URL formats
</a>
</span>
</InputGroup>
<InputGroup>
<label htmlFor='categoryId'>Bookmark Category</label>
<select
name='categoryId'
id='categoryId'
required
onChange={e => selectChangeHandler(e)}
value={formData.categoryId}
>
<option value={-1}>Select category</option>
{props.categories.map((category: Category): JSX.Element => {
return (
<option key={category.id} value={category.id}>
{category.name}
</option>
);
})}
</select>
</InputGroup>
{!useCustomIcon ? (
// mdi
<InputGroup> <InputGroup>
<label htmlFor='categoryName'>Category Name</label> <label htmlFor='icon'>Bookmark Icon (optional)</label>
<input <input
type='text' type='text'
name='categoryName' name='icon'
id='categoryName' id='icon'
placeholder='Social Media' placeholder='book-open-outline'
required value={formData.icon}
value={categoryName.name} onChange={e => inputChangeHandler(e)}
onChange={(e) => setCategoryName({ name: e.target.value })}
/>
</InputGroup>
</Fragment>
)
: (
<Fragment>
<InputGroup>
<label htmlFor='name'>Bookmark Name</label>
<input
type='text'
name='name'
id='name'
placeholder='Reddit'
required
value={formData.name}
onChange={(e) => inputChangeHandler(e)}
/>
</InputGroup>
<InputGroup>
<label htmlFor='url'>Bookmark URL</label>
<input
type='text'
name='url'
id='url'
placeholder='reddit.com'
required
value={formData.url}
onChange={(e) => inputChangeHandler(e)}
/> />
<span> <span>
<a Use icon name from MDI.
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks' <a href='https://materialdesignicons.com/' target='blank'>
target='_blank' {' '}
rel='noreferrer' Click here for reference
>
{' '}Check supported URL formats
</a> </a>
</span> </span>
</InputGroup> <span
<InputGroup> onClick={() => toggleUseCustomIcon(!useCustomIcon)}
<label htmlFor='categoryId'>Bookmark Category</label> className={classes.Switch}
<select
name='categoryId'
id='categoryId'
required
onChange={(e) => selectChangeHandler(e)}
value={formData.categoryId}
> >
<option value={-1}>Select category</option> Switch to custom icon upload
{props.categories.map((category: Category): JSX.Element => { </span>
return (
<option
key={category.id}
value={category.id}
>
{category.name}
</option>
)
})}
</select>
</InputGroup> </InputGroup>
{!useCustomIcon ) : (
// mdi // custom
? (<InputGroup> <InputGroup>
<label htmlFor='icon'>Bookmark Icon (optional)</label> <label htmlFor='icon'>Bookmark Icon (optional)</label>
<input <input
type='text' type='file'
name='icon' name='icon'
id='icon' id='icon'
placeholder='book-open-outline' onChange={e => fileChangeHandler(e)}
value={formData.icon} accept='.jpg,.jpeg,.png,.svg'
onChange={(e) => inputChangeHandler(e)} />
/> <span
<span> onClick={() => toggleUseCustomIcon(!useCustomIcon)}
Use icon name from MDI. className={classes.Switch}
<a >
href='https://materialdesignicons.com/' Switch to MDI
target='blank'> </span>
{' '}Click here for reference </InputGroup>
</a> )}
</span> </Fragment>
<span )}
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
className={classes.Switch}>
Switch to custom icon upload
</span>
</InputGroup>)
// custom
: (<InputGroup>
<label htmlFor='icon'>Bookmark Icon (optional)</label>
<input
type='file'
name='icon'
id='icon'
onChange={(e) => fileChangeHandler(e)}
accept='.jpg,.jpeg,.png'
/>
<span
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
className={classes.Switch}>
Switch to MDI
</span>
</InputGroup>)
}
</Fragment>
)
}
{button} {button}
</ModalForm> </ModalForm>
) );
} };
const mapStateToProps = (state: GlobalState) => { const mapStateToProps = (state: GlobalState) => {
return { return {
categories: state.bookmark.categories categories: state.bookmark.categories
} };
} };
const dispatchMap = { const dispatchMap = {
getCategories, getCategories,
@ -338,6 +347,6 @@ const dispatchMap = {
updateCategory, updateCategory,
updateBookmark, updateBookmark,
createNotification createNotification
} };
export default connect(mapStateToProps, dispatchMap)(BookmarkForm); export default connect(mapStateToProps, dispatchMap)(BookmarkForm);

46
client/src/utility/searchQueries.json
View File

@ -1,14 +1,9 @@
{ {
"queries": [ "queries": [
{ {
"name": "Google", "name": "Deezer",
"prefix": "g", "prefix": "dz",
"template": "https://www.google.com/search?q=" "template": "https://www.deezer.com/search/"
},
{
"name": "DuckDuckGo",
"prefix": "d",
"template": "https://duckduckgo.com/?q="
}, },
{ {
"name": "Disroot", "name": "Disroot",
@ -16,14 +11,14 @@
"template": "http://search.disroot.org/search?q=" "template": "http://search.disroot.org/search?q="
}, },
{ {
"name": "YouTube", "name": "DuckDuckGo",
"prefix": "yt", "prefix": "d",
"template": "https://www.youtube.com/results?search_query=" "template": "https://duckduckgo.com/?q="
}, },
{ {
"name": "Reddit", "name": "Google",
"prefix": "r", "prefix": "g",
"template": "https://www.reddit.com/search?q=" "template": "https://www.google.com/search?q="
}, },
{ {
"name": "IMDb", "name": "IMDb",
@ -31,14 +26,29 @@
"template": "https://www.imdb.com/find?q=" "template": "https://www.imdb.com/find?q="
}, },
{ {
"name": "The Movie Database", "name": "Reddit",
"prefix": "mv", "prefix": "r",
"template": "https://www.themoviedb.org/search?query=" "template": "https://www.reddit.com/search?q="
}, },
{ {
"name": "Spotify", "name": "Spotify",
"prefix": "sp", "prefix": "sp",
"template": "https://open.spotify.com/search/" "template": "https://open.spotify.com/search/"
},
{
"name": "The Movie Database",
"prefix": "mv",
"template": "https://www.themoviedb.org/search?query="
},
{
"name": "Tidal",
"prefix": "td",
"template": "https://listen.tidal.com/search?q="
},
{
"name": "YouTube",
"prefix": "yt",
"template": "https://www.youtube.com/results?search_query="
} }
] ]
} }

57
client/utils/dev/cli-searchQueries.js Normal file
View File

@ -0,0 +1,57 @@
const queries = require('../../src/utility/searchQueries.json');
const fs = require('fs');
const prettier = require('prettier');
/**
* @description CLI tool for adding new search engines/providers. It will ensure that prefix is unique and that all entries are sorted alphabetically
* @argumens name prefix template
* @example node cli-searchQueries.js "DuckDuckGo" "d" "https://duckduckgo.com/?q="
*/
// Get arguments
const args = process.argv.slice(2);
// Check arguments
if (args.length < 3) {
return console.log('Missing arguments');
} else if (args.length > 3) {
return console.log('Too many arguments provided');
}
// Construct new query object
const newQuery = {
name: args[0],
prefix: args[1],
template: args[2],
};
// Get old queries
let rawQueries = queries.queries;
let parsedQueries = '';
// Check if prefix is unique
const isUnique = !rawQueries.find((query) => query.prefix == newQuery.prefix);
if (!isUnique) {
return console.log('Prefix already exists');
}
// Add new query
rawQueries.push(newQuery);
// Sort alphabetically
rawQueries = rawQueries.sort((a, b) => {
const _a = a.name.toLowerCase();
const _b = b.name.toLowerCase();
if (_a < _b) return -1;
if (_a > _b) return 1;
return 0;
});
// Format JSON
parsedQueries = JSON.stringify(queries);
parsedQueries = prettier.format(parsedQueries, { parser: 'json' });
// Save file
fs.writeFileSync('../../src/utility/searchQueries.json', parsedQueries);

12
controllers/apps.js
View File

@ -126,8 +126,16 @@ exports.getApps = asyncWrapper(async (req, res, next) => {
}); });
} }
// Set header to fetch containers info every time if (process.env.NODE_ENV === 'production') {
res.status(200).setHeader('Cache-Control', 'no-store').json({ // Set header to fetch containers info every time
res.status(200).setHeader('Cache-Control', 'no-store').json({
success: true,
data: apps
});
return;
}
res.status(200).json({
success: true, success: true,
data: apps data: apps
}); });

10
db.js
View File

@ -6,15 +6,15 @@ const sequelize = new Sequelize({
dialect: 'sqlite', dialect: 'sqlite',
storage: './data/db.sqlite', storage: './data/db.sqlite',
logging: false logging: false
}) });
const connectDB = async () => { const connectDB = async () => {
try { try {
await sequelize.authenticate(); await sequelize.authenticate();
logger.log('Connected to database'); logger.log('Connected to database');
const syncModels = true; const syncModels = true;
if (syncModels) { if (syncModels) {
logger.log('Starting model synchronization'); logger.log('Starting model synchronization');
await sequelize.sync({ alter: true }); await sequelize.sync({ alter: true });
@ -24,9 +24,9 @@ const connectDB = async () => {
logger.log(`Unable to connect to the database: ${error.message}`, 'ERROR'); logger.log(`Unable to connect to the database: ${error.message}`, 'ERROR');
process.exit(1); process.exit(1);
} }
} };
module.exports = { module.exports = {
connectDB, connectDB,
sequelize sequelize
} };

8
middleware/multer.js
View File

@ -12,9 +12,9 @@ const storage = multer.diskStorage({
filename: (req, file, cb) => { filename: (req, file, cb) => {
cb(null, Date.now() + '--' + file.originalname); cb(null, Date.now() + '--' + file.originalname);
} }
}) });
const supportedTypes = ['jpg', 'jpeg', 'png']; const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml'];
const fileFilter = (req, file, cb) => { const fileFilter = (req, file, cb) => {
if (supportedTypes.includes(file.mimetype.split('/')[1])) { if (supportedTypes.includes(file.mimetype.split('/')[1])) {
@ -22,8 +22,8 @@ const fileFilter = (req, file, cb) => {
} else { } else {
cb(null, false); cb(null, false);
} }
} };
const upload = multer({ storage, fileFilter }); const upload = multer({ storage, fileFilter });
module.exports = upload.single('icon'); module.exports = upload.single('icon');