Merge pull request #49 from pawelmalak/feature

v1.5 Release

.dockerignore

@@ -1,2 +1,3 @@
 node_modules
-github
+github
+public

.gitignore

@@ -1,2 +1,3 @@
-node_modules/
-data/
+node_modules
+data
+public

Dockerfile

@@ -1,5 +1,7 @@
 FROM node:14-alpine
 
+RUN apk update && apk add --no-cache nano
+
 WORKDIR /app
 
 COPY package*.json ./

Dockerfile.multiarch

@@ -1,5 +1,7 @@
 FROM node:14-alpine
 
+RUN apk update && apk add --no-cache nano
+
 WORKDIR /app
 
 COPY package*.json ./
@@ -11,6 +13,7 @@ COPY . .
 
 RUN mkdir -p ./public ./data \
     && cd ./client \
+    && npm install --production \
     && npm run build \
     && cd .. \
     && mv ./client/build/* ./public \

README.md

@@ -81,6 +81,23 @@ Follow instructions from wiki: [Installation without Docker](https://github.com/
 ![Homescreen screenshot](./github/_themes.png)
 
 ## Usage
+### Search bar
+> While opening links, module will follow `Open all links in the same tab` setting
+#### Supported search engines
+| Name       | Prefix | Search URL                          |
+|------------|--------|-------------------------------------|
+| Disroot    | /ds    | http://search.disroot.org/search?q= |
+| DuckDuckGo | /d     | https://duckduckgo.com/?q=          |
+| Google     | /g     | https://www.google.com/search?q=    |
+
+#### Supported services
+| Name               | Prefix | Search URL                                    |
+|--------------------|--------|-----------------------------------------------|
+| IMDb               | /im    | https://www.imdb.com/find?q=                  |
+| Reddit             | /r     | -https://www.reddit.com/search?q=             |
+| The Movie Database | /mv    | https://www.themoviedb.org/search?query=      |
+| Youtube            | /yt    | https://www.youtube.com/results?search_query= |
+
 ### Setting up weather module
 1. Obtain API Key from [Weather API](https://www.weatherapi.com/pricing.aspx).
    > Free plan allows for 1M calls per month. Flame is making less then 3K API calls per month.
@@ -99,6 +116,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:
 

Socket.js

@@ -1,11 +1,13 @@
 const WebSocket = require('ws');
+const Logger = require('./utils/Logger');
+const logger = new Logger();
 
 class Socket {
   constructor(server) {
     this.webSocketServer = new WebSocket.Server({ server })
 
     this.webSocketServer.on('listening', () => {
-      console.log('Socket: listen');
+      logger.log('Socket: listen');
     })
 
     this.webSocketServer.on('connection', (webSocketClient) => {

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.0
+REACT_APP_VERSION=1.5.0

client/public/index.html

@@ -4,15 +4,10 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <meta name="description" content="Flame - self-hosted startpage for your server" />
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
+    <link rel="stylesheet" href="%PUBLIC_URL%/flame.css">
     <title>Flame</title>
   </head>
   <body>
@@ -21,4 +16,4 @@
     <div id="root"></div>
 
   </body>
-</html>
+</html>

client/public/robots.txt

@@ -1,3 +1,2 @@
-# https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow:
+Disallow: /

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/Apps/AppForm/AppForm.module.css

@@ -0,0 +1,7 @@
+.Switch {
+  text-decoration: underline;
+}
+
+.Switch:hover {
+  cursor: pointer;
+}

client/src/components/Apps/AppForm/AppForm.tsx

@@ -3,18 +3,23 @@ import { connect } from 'react-redux';
 import { addApp, updateApp } from '../../../store/actions';
 import { App, NewApp } from '../../../interfaces';
 
+import classes from './AppForm.module.css';
+
 import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
 import Button from '../../UI/Buttons/Button/Button';
+import axios from 'axios';
 
 interface ComponentProps {
   modalHandler: () => void;
-  addApp: (formData: NewApp) => any;
+  addApp: (formData: NewApp | FormData) => any;
   updateApp: (id: number, formData: NewApp) => any;
   app?: App;
 }
 
 const AppForm = (props: ComponentProps): JSX.Element => {
+  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
+  const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [formData, setFormData] = useState<NewApp>({
     name: '',
     url: '',
@@ -52,11 +57,27 @@ const AppForm = (props: ComponentProps): JSX.Element => {
     })
   }
 
+  const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+    if (e.target.files) {
+      setCustomIcon(e.target.files[0]);
+    }
+  }
+
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
 
     if (!props.app) {
-      props.addApp(formData);
+      if (customIcon) {
+        const data = new FormData();
+        data.append('icon', customIcon);
+
+        data.append('name', formData.name);
+        data.append('url', formData.url);
+
+        props.addApp(data);
+      } else {
+        props.addApp(formData);
+      }
     } else {
       props.updateApp(props.app.id, formData);
       props.modalHandler();
@@ -108,26 +129,51 @@ const AppForm = (props: ComponentProps): JSX.Element => {
           </a>
         </span>
       </InputGroup>
-      <InputGroup>
-        <label htmlFor='icon'>App Icon</label>
-        <input
-          type='text'
-          name='icon'
-          id='icon'
-          placeholder='book-open-outline'
-          required
-          value={formData.icon}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-        <span>
-          Use icon name from MDI. 
-          <a
-            href='https://materialdesignicons.com/'
-            target='blank'>
-            {' '}Click here for reference
-          </a>
-        </span>
-      </InputGroup>
+      {!useCustomIcon
+        // use mdi icon
+        ? (<InputGroup>
+            <label htmlFor='icon'>App Icon</label>
+            <input
+              type='text'
+              name='icon'
+              id='icon'
+              placeholder='book-open-outline'
+              required
+              value={formData.icon}
+              onChange={(e) => inputChangeHandler(e)}
+            />
+            <span>
+              Use icon name from MDI. 
+              <a
+                href='https://materialdesignicons.com/'
+                target='blank'>
+                {' '}Click here for reference
+              </a>
+            </span>
+            <span
+              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+              className={classes.Switch}>
+              Switch to custom icon upload
+            </span>
+          </InputGroup>)
+        // upload custom icon
+        : (<InputGroup>
+            <label htmlFor='icon'>App Icon</label>
+            <input
+              type='file'
+              name='icon'
+              id='icon'
+              required
+              onChange={(e) => fileChangeHandler(e)}
+              accept='.jpg,.jpeg,.png'
+            />
+            <span
+              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+              className={classes.Switch}>
+              Switch to MDI
+            </span>
+          </InputGroup>)
+      }
       {!props.app
         ? <Button>Add new application</Button>
         : <Button>Update application</Button>

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