Added support for custom SVG icons

2021-08-06 15:15:54 +02:00 · 2021-08-06 15:15:54 +02:00 · 1699146f79
commit 1699146f79
parent a01661d0d5
14 changed files with 356 additions and 270 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,6 @@
+### v1.6.3 (TBA)
+- Added support for custom SVG icons ([#73](https://github.com/pawelmalak/flame/issues/73))
+
 ### v1.6.2 (2021-08-06)
 - Fixed changelog link
 - Added support for Docker API ([#14](https://github.com/pawelmalak/flame/issues/14))
--- a/client/.env
+++ b/client/.env
@ -1 +1 @@
-REACT_APP_VERSION=1.6.2
+REACT_APP_VERSION=1.6.3
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -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": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@ -7527,6 +7535,11 @@
        "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": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -16,6 +16,7 @@
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "axios": "^0.21.1",
+    "external-svg-loader": "^1.3.4",
    "http-proxy-middleware": "^2.0.0",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@ -1,5 +1,6 @@
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { getConfig, setTheme } from './store/actions';
+import 'external-svg-loader';

 // Redux
 import { store } from './store/store';
@ -40,6 +41,6 @@ const App = (): JSX.Element => {
      <NotificationCenter />
    </Provider>
  );
-}
+};

 export default App;
--- a/client/src/components/Apps/AppCard/AppCard.module.css
+++ b/client/src/components/Apps/AppCard/AppCard.module.css
@ -33,7 +33,7 @@
  .AppCard {
    padding: 2px;
    border-radius: 4px;
-    transition: all 0.10s;
+    transition: all 0.1s;
  }

  .AppCard:hover {
--- a/client/src/components/Apps/AppCard/AppCard.tsx
+++ b/client/src/components/Apps/AppCard/AppCard.tsx
@ -13,6 +13,31 @@ interface ComponentProps {
 const AppCard = (props: ComponentProps): JSX.Element => {
  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 (
    <a
      href={redirectUrl}
@ -20,22 +45,13 @@ const AppCard = (props: ComponentProps): JSX.Element => {
      rel='noreferrer'
      className={classes.AppCard}
    >
-      <div className={classes.AppCardIcon}>
-        {(/.(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.AppCardIcon}>{iconEl}</div>
      <div className={classes.AppCardDetails}>
        <h5>{props.app.name}</h5>
        <span>{displayUrl}</span>
      </div>
    </a>
-  )
-}
+  );
+};

 export default AppCard;
--- a/client/src/components/Apps/AppForm/AppForm.tsx
+++ b/client/src/components/Apps/AppForm/AppForm.tsx
@ -31,28 +31,28 @@ const AppForm = (props: ComponentProps): JSX.Element => {
        name: props.app.name,
        url: props.app.url,
        icon: props.app.icon
-      })
+      });
    } else {
      setFormData({
        name: '',
        url: '',
        icon: ''
-      })
+      });
    }
-  }, [props.app])
+  }, [props.app]);

  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
-    })
-  }
+    });
+  };

  const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
    if (e.target.files) {
      setCustomIcon(e.target.files[0]);
    }
-  }
+  };

  const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
    e.preventDefault();
@ -66,7 +66,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
      data.append('url', formData.url);

      return data;
-    }
+    };

    if (!props.app) {
      if (customIcon) {
@ -89,10 +89,10 @@ const AppForm = (props: ComponentProps): JSX.Element => {
      name: '',
      url: '',
      icon: ''
-    })
+    });

    setCustomIcon(null);
-  }
+  };

  return (
    <ModalForm
@ -108,7 +108,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
          placeholder='Bookstack'
          required
          value={formData.name}
-          onChange={(e) => inputChangeHandler(e)}
+          onChange={e => inputChangeHandler(e)}
        />
      </InputGroup>
      <InputGroup>
@ -120,7 +120,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
          placeholder='bookstack.example.com'
          required
          value={formData.url}
-          onChange={(e) => inputChangeHandler(e)}
+          onChange={e => inputChangeHandler(e)}
        />
        <span>
          <a
@ -128,13 +128,14 @@ const AppForm = (props: ComponentProps): JSX.Element => {
            target='_blank'
            rel='noreferrer'
          >
-            {' '}Check supported URL formats
+            {' '}
+            Check supported URL formats
          </a>
        </span>
      </InputGroup>
-      {!useCustomIcon
+      {!useCustomIcon ? (
        // use mdi icon
-        ? (<InputGroup>
+        <InputGroup>
          <label htmlFor='icon'>App Icon</label>
          <input
            type='text'
@ -143,46 +144,49 @@ const AppForm = (props: ComponentProps): JSX.Element => {
            placeholder='book-open-outline'
            required
            value={formData.icon}
-              onChange={(e) => inputChangeHandler(e)}
+            onChange={e => inputChangeHandler(e)}
          />
          <span>
            Use icon name from MDI.
-              <a
-                href='https://materialdesignicons.com/'
-                target='blank'>
-                {' '}Click here for reference
+            <a href='https://materialdesignicons.com/' target='blank'>
+              {' '}
+              Click here for reference
            </a>
          </span>
          <span
            onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-              className={classes.Switch}>
+            className={classes.Switch}
+          >
            Switch to custom icon upload
          </span>
-          </InputGroup>)
+        </InputGroup>
+      ) : (
        // upload custom icon
-        : (<InputGroup>
+        <InputGroup>
          <label htmlFor='icon'>App Icon</label>
          <input
            type='file'
            name='icon'
            id='icon'
            required
-              onChange={(e) => fileChangeHandler(e)}
-              accept='.jpg,.jpeg,.png'
+            onChange={e => fileChangeHandler(e)}
+            accept='.jpg,.jpeg,.png,.svg'
          />
          <span
            onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-              className={classes.Switch}>
+            className={classes.Switch}
+          >
            Switch to MDI
          </span>
-          </InputGroup>)
-      }
-      {!props.app
-        ? <Button>Add new application</Button>
-        : <Button>Update application</Button>
-      }
+        </InputGroup>
+      )}
+      {!props.app ? (
+        <Button>Add new application</Button>
+      ) : (
+        <Button>Update application</Button>
+      )}
    </ModalForm>
-  )
-}
+  );
+};

 export default connect(null, { addApp, updateApp })(AppForm);
--- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css
+++ b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css
@ -32,4 +32,14 @@
  display: flex;
  margin-top: 3px;
  margin-right: 2px;
+  justify-content: center;
+  align-items: center;
+}
+
+.BookmarkIconSvg {
+  width: 80%;
+  height: 80%;
+  margin-top: 2px;
+  margin-left: 2px;
+  object-fit: contain;
 }
--- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
+++ b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
@ -16,31 +16,52 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
        {props.category.bookmarks.map((bookmark: Bookmark) => {
          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 (
            <a
              href={redirectUrl}
              target={searchConfig('bookmarksSameTab', false) ? '' : '_blank'}
              rel='noreferrer'
-              key={`bookmark-${bookmark.id}`}>
-              {bookmark.icon && (
-                <div className={classes.BookmarkIcon}>
-                  {(/.(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>
-              )}
+              key={`bookmark-${bookmark.id}`}
+            >
+              {icon && iconEl}
              {bookmark.name}
            </a>
-          )
+          );
        })}
      </div>
    </div>
-  )
-}
+  );
+};

 export default BookmarkCard;
--- a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
+++ b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
@ -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 ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 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 { 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 classes from './BookmarkForm.module.css';

@ -22,8 +42,8 @@ interface ComponentProps {
    id: number,
    formData: NewBookmark | FormData,
    category: {
-      prev: number,
-      curr: number
+      prev: number;
+      curr: number;
    }
  ) => void;
  createNotification: (notification: NewNotification) => void;
@ -34,14 +54,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
  const [customIcon, setCustomIcon] = useState<File | null>(null);
  const [categoryName, setCategoryName] = useState<NewCategory>({
    name: ''
-  })
+  });

  const [formData, setFormData] = useState<NewBookmark>({
    name: '',
    url: '',
    categoryId: -1,
    icon: ''
-  })
+  });

  // Load category data if provided for editing
  useEffect(() => {
@ -50,7 +70,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
    } else {
      setCategoryName({ name: '' });
    }
-  }, [props.category])
+  }, [props.category]);

  // Load bookmark data if provided for editing
  useEffect(() => {
@ -60,16 +80,16 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
        url: props.bookmark.url,
        categoryId: props.bookmark.categoryId,
        icon: props.bookmark.icon
-      })
+      });
    } else {
      setFormData({
        name: '',
        url: '',
        categoryId: -1,
        icon: ''
-      })
+      });
    }
-  }, [props.bookmark])
+  }, [props.bookmark]);

  const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
    e.preventDefault();
@ -84,7 +104,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
      data.append('categoryId', `${formData.categoryId}`);

      return data;
-    }
+    };

    if (!props.category && !props.bookmark) {
      // Add new
@ -98,7 +118,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
          props.createNotification({
            title: 'Error',
            message: 'Please select category'
-          })
+          });
          return;
        }

@ -114,9 +134,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
          url: '',
          categoryId: formData.categoryId,
          icon: ''
-        })
+        });

-        setCustomIcon(null)
+        setCustomIcon(null);
      }
    } else {
      // Update
@ -128,23 +148,15 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
        // Update bookmark
        if (customIcon) {
          const data = createFormData();
-          props.updateBookmark(
-            props.bookmark.id,
-            data,
-            {
+          props.updateBookmark(props.bookmark.id, data, {
            prev: props.bookmark.categoryId,
            curr: formData.categoryId
-            }
-          )
+          });
        } else {
-          props.updateBookmark(
-            props.bookmark.id,
-            formData,
-            {
+          props.updateBookmark(props.bookmark.id, formData, {
            prev: props.bookmark.categoryId,
            curr: formData.categoryId
-            }
-          );
+          });
        }

        setFormData({
@ -152,36 +164,36 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
          url: '',
          categoryId: -1,
          icon: ''
-        })
+        });

-        setCustomIcon(null)
+        setCustomIcon(null);
      }

      props.modalHandler();
    }
-  }
+  };

  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
-    })
-  }
+    });
+  };

  const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
    setFormData({
      ...formData,
      categoryId: parseInt(e.target.value)
-    })
-  }
+    });
+  };

  const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
    if (e.target.files) {
      setCustomIcon(e.target.files[0]);
    }
-  }
+  };

-  let button = <Button>Submit</Button>
+  let button = <Button>Submit</Button>;

  if (!props.category && !props.bookmark) {
    if (props.contentType === ContentType.category) {
@ -190,9 +202,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
      button = <Button>Add new bookmark</Button>;
    }
  } else if (props.category) {
-    button = <Button>Update category</Button>
+    button = <Button>Update category</Button>;
  } else if (props.bookmark) {
-    button = <Button>Update bookmark</Button>
+    button = <Button>Update bookmark</Button>;
  }

  return (
@ -200,8 +212,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
      modalHandler={props.modalHandler}
      formHandler={formSubmitHandler}
    >
-      {props.contentType === ContentType.category
-        ? (
+      {props.contentType === ContentType.category ? (
        <Fragment>
          <InputGroup>
            <label htmlFor='categoryName'>Category Name</label>
@ -212,12 +223,11 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
              placeholder='Social Media'
              required
              value={categoryName.name}
-                onChange={(e) => setCategoryName({ name: e.target.value })}
+              onChange={e => setCategoryName({ name: e.target.value })}
            />
          </InputGroup>
        </Fragment>
-        )
-        : (
+      ) : (
        <Fragment>
          <InputGroup>
            <label htmlFor='name'>Bookmark Name</label>
@ -228,7 +238,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
              placeholder='Reddit'
              required
              value={formData.name}
-                onChange={(e) => inputChangeHandler(e)}
+              onChange={e => inputChangeHandler(e)}
            />
          </InputGroup>
          <InputGroup>
@ -240,7 +250,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
              placeholder='reddit.com'
              required
              value={formData.url}
-                onChange={(e) => inputChangeHandler(e)}
+              onChange={e => inputChangeHandler(e)}
            />
            <span>
              <a
@ -248,7 +258,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
                target='_blank'
                rel='noreferrer'
              >
-                  {' '}Check supported URL formats
+                {' '}
+                Check supported URL formats
              </a>
            </span>
          </InputGroup>
@ -258,25 +269,22 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
              name='categoryId'
              id='categoryId'
              required
-                onChange={(e) => selectChangeHandler(e)}
+              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}
-                    >
+                  <option key={category.id} value={category.id}>
                    {category.name}
                  </option>
-                  )
+                );
              })}
            </select>
          </InputGroup>
-            {!useCustomIcon
+          {!useCustomIcon ? (
            // mdi
-              ? (<InputGroup>
+            <InputGroup>
              <label htmlFor='icon'>Bookmark Icon (optional)</label>
              <input
                type='text'
@ -284,52 +292,53 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
                id='icon'
                placeholder='book-open-outline'
                value={formData.icon}
-                  onChange={(e) => inputChangeHandler(e)}
+                onChange={e => inputChangeHandler(e)}
              />
              <span>
                Use icon name from MDI.
-                  <a
-                    href='https://materialdesignicons.com/'
-                    target='blank'>
-                    {' '}Click here for reference
+                <a href='https://materialdesignicons.com/' target='blank'>
+                  {' '}
+                  Click here for reference
                </a>
              </span>
              <span
                onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-                  className={classes.Switch}>
+                className={classes.Switch}
+              >
                Switch to custom icon upload
              </span>
-              </InputGroup>)
+            </InputGroup>
+          ) : (
            // custom
-              : (<InputGroup>
+            <InputGroup>
              <label htmlFor='icon'>Bookmark Icon (optional)</label>
              <input
                type='file'
                name='icon'
                id='icon'
-                  onChange={(e) => fileChangeHandler(e)}
-                  accept='.jpg,.jpeg,.png'
+                onChange={e => fileChangeHandler(e)}
+                accept='.jpg,.jpeg,.png,.svg'
              />
              <span
                onClick={() => toggleUseCustomIcon(!useCustomIcon)}
-                  className={classes.Switch}>
+                className={classes.Switch}
+              >
                Switch to MDI
              </span>
-              </InputGroup>)
-            }
+            </InputGroup>
+          )}
        </Fragment>
-        )
-      }
+      )}
      {button}
    </ModalForm>
-  )
-}
+  );
+};

 const mapStateToProps = (state: GlobalState) => {
  return {
    categories: state.bookmark.categories
-  }
-}
+  };
+};

 const dispatchMap = {
  getCategories,
@ -338,6 +347,6 @@ const dispatchMap = {
  updateCategory,
  updateBookmark,
  createNotification
-}
+};

 export default connect(mapStateToProps, dispatchMap)(BookmarkForm);
--- a/controllers/apps.js
+++ b/controllers/apps.js
@ -126,11 +126,19 @@ exports.getApps = asyncWrapper(async (req, res, next) => {
    });
  }

+  if (process.env.NODE_ENV === 'production') {
    // 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,
+    data: apps
+  });
 });

 // @desc      Get single app
--- a/db.js
+++ b/db.js
@ -6,7 +6,7 @@ const sequelize = new Sequelize({
  dialect: 'sqlite',
  storage: './data/db.sqlite',
  logging: false
-})
+});

 const connectDB = async () => {
  try {
@ -24,9 +24,9 @@ const connectDB = async () => {
    logger.log(`Unable to connect to the database: ${error.message}`, 'ERROR');
    process.exit(1);
  }
-}
+};

 module.exports = {
  connectDB,
  sequelize
-}
+};
--- a/middleware/multer.js
+++ b/middleware/multer.js
@ -12,9 +12,9 @@ const storage = multer.diskStorage({
  filename: (req, file, cb) => {
    cb(null, Date.now() + '--' + file.originalname);
  }
-})
+});

-const supportedTypes = ['jpg', 'jpeg', 'png'];
+const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml'];

 const fileFilter = (req, file, cb) => {
  if (supportedTypes.includes(file.mimetype.split('/')[1])) {
@ -22,7 +22,7 @@ const fileFilter = (req, file, cb) => {
  } else {
    cb(null, false);
  }
-}
+};

 const upload = multer({ storage, fileFilter });