Option to open links in the same tab. Api upload icon. Render image icon instead of MDI. Dockerfile client dependencies fix.

Author: pawelmalak

Dockerfile

@@ -12,6 +12,7 @@ COPY . .
 
 RUN mkdir -p ./public ./data \
     && cd ./client \
+    && npm install --production \
     && npm run build \
     && cd .. \
     && mv ./client/build/* ./public \

Dockerfile.multiarch

@@ -13,6 +13,7 @@ COPY . .
 
 RUN mkdir -p ./public ./data \
     && cd ./client \
+    && npm install --production \
     && npm run build \
     && cd .. \
     && mv ./client/build/* ./public \

README.md

@@ -99,6 +99,11 @@ Follow instructions from wiki: [Installation without Docker](https://github.com/
   - Format: `www.domain.com`, `domain.com`, `sub.domain.com`, `local`, `ip`, `ip:port`
   - Redirect: `http://{dest}`
 
+### Custom CSS
+> 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)
+
 ## Support
 If you want to support development of Flame and my upcoming self-hosted and open source projects you can use the following link:
 

api.js

@@ -1,15 +1,17 @@
-const path = require('path');
+const { join } = require('path');
 const express = require('express');
 const errorHandler = require('./middleware/errorHandler');
 
 const api = express();
 
 // Static files
-api.use(express.static(path.join(__dirname, 'public')));
+api.use(express.static(join(__dirname, 'public')));
+api.use('/uploads', express.static(join(__dirname, 'data/uploads')));
 api.get(/^\/(?!api)/, (req, res) => {
-  res.sendFile(path.join(__dirname, 'public/index.html'));
+  res.sendFile(join(__dirname, 'public/index.html'));
 })
 
+
 // Body parser
 api.use(express.json());
 

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=1.4.2
+REACT_APP_VERSION=1.4.3

client/src/components/Apps/AppCard/AppCard.module.css

@@ -39,4 +39,12 @@
   .AppCard:hover {
     background-color: rgba(0,0,0,0.2);
   }
+}
+
+.CustomIcon {
+  width: 90%;
+  height: 90%;
+  margin-top: 2px;
+  margin-left: 2px;
+  object-fit: contain;
 }

client/src/components/Apps/AppCard/AppCard.tsx

@@ -3,6 +3,7 @@ import Icon from '../../UI/Icons/Icon/Icon';
 import { iconParser, urlParser } from '../../../utility';
 
 import { App } from '../../../interfaces';
+import { searchConfig } from '../../../utility';
 
 interface ComponentProps {
   app: App;
@@ -15,12 +16,19 @@ const AppCard = (props: ComponentProps): JSX.Element => {
   return (
     <a
       href={redirectUrl}
-      target='_blank'
+      target={searchConfig('openSameTab', false) ? '' : '_blank'}
       rel='noreferrer'
       className={classes.AppCard}
     >
       <div className={classes.AppCardIcon}>
-        <Icon icon={iconParser(props.app.icon)} />
+        {(/.(jpeg|jpg|png)$/).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}>
         <h5>{props.app.name}</h5>

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -2,7 +2,7 @@ import { Bookmark, Category } from '../../../interfaces';
 import classes from './BookmarkCard.module.css';
 
 import Icon from '../../UI/Icons/Icon/Icon';
-import { iconParser, urlParser } from '../../../utility';
+import { iconParser, urlParser, searchConfig } from '../../../utility';
 
 interface ComponentProps {
   category: Category;
@@ -19,7 +19,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
           return (
             <a
               href={redirectUrl}
-              target='_blank'
+              target={searchConfig('openSameTab', false) ? '' : '_blank'}
               rel='noreferrer'
               key={`bookmark-${bookmark.id}`}>
               {bookmark.icon && (

client/src/components/Settings/OtherSettings/OtherSettings.tsx

@@ -29,7 +29,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
     pinAppsByDefault: 1,
     pinCategoriesByDefault: 1,
     hideHeader: 0,
-    useOrdering: 'createdAt'
+    useOrdering: 'createdAt',
+    openSameTab: 0
   })
 
   // Get config
@@ -39,7 +40,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
       pinAppsByDefault: searchConfig('pinAppsByDefault', 1),
       pinCategoriesByDefault: searchConfig('pinCategoriesByDefault', 1),
       hideHeader: searchConfig('hideHeader', 0),
-      useOrdering: searchConfig('useOrdering', 'createdAt')
+      useOrdering: searchConfig('useOrdering', 'createdAt'),
+      openSameTab: searchConfig('openSameTab', 0)
     })
   }, [props.loading]);
 
@@ -134,6 +136,18 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value='orderId'>Custom order</option>
         </select>
       </InputGroup>
+      <InputGroup>
+        <label htmlFor='openSameTab'>Open all links in the same tab</label>
+        <select
+          id='openSameTab'
+          name='openSameTab'
+          value={formData.openSameTab}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
     <Button>Save changes</Button>
     </form>
   )

client/src/interfaces/Forms.ts

@@ -11,4 +11,5 @@ export interface SettingsForm {
   pinCategoriesByDefault: number;
   hideHeader: number;
   useOrdering: string;
+  openSameTab: number;
 }