Added url parser to support wider range of addresses

README.md

@@ -59,4 +59,17 @@ docker run -p 5005:5005 -v <host_dir>:/app/data flame
 - Themes
   - Customize your page by choosing from 12 color themes 
 
-![Homescreen screenshot](./github/_themes.png)
+![Homescreen screenshot](./github/_themes.png)
+
+## Usage
+### Supported links for applications and bookmarks
+#### Rules
+- URL starts with `http://`
+  - Format: `http://www.domain.com`, `http://domain.com`
+  - Redirect: `{dest}`
+- URL starts with `https://`
+  - Format: `https://www.domain.com`, `https://domain.com`
+  - Redirect: `https://{dest}`
+- URL without protocol
+  - Format: `www.domain.com`, `domain.com`, `sub.domain.com`, `local`, `ip`, `ip:port`
+  - Redirect: `http://{dest}`

client/src/App.tsx

@@ -11,7 +11,6 @@ import Home from './components/Home/Home';
 import Apps from './components/Apps/Apps';
 import Settings from './components/Settings/Settings';
 import Bookmarks from './components/Bookmarks/Bookmarks';
-
 import NotificationCenter from './components/NotificationCenter/NotificationCenter';
 
 if (localStorage.theme) {

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

@@ -1,8 +1,6 @@
-import { Link } from 'react-router-dom';
-
 import classes from './AppCard.module.css';
 import Icon from '../../UI/Icons/Icon/Icon';
-import { iconParser } from '../../../utility/iconParser';
+import { iconParser, urlParser } from '../../../utility';
 
 import { App } from '../../../interfaces';
 
@@ -12,18 +10,16 @@ interface ComponentProps {
 }
 
 const AppCard = (props: ComponentProps): JSX.Element => {
-  const redirectHandler = (url: string): void => {
-    window.open(url);
-  }
+  const [displayUrl, redirectUrl] = urlParser(props.app.url);
 
   return (
-    <a href={`http://${props.app.url}`} target='_blank' className={classes.AppCard}>
+    <a href={redirectUrl} target='_blank' className={classes.AppCard}>
       <div className={classes.AppCardIcon}>
         <Icon icon={iconParser(props.app.icon)} />
       </div>
       <div className={classes.AppCardDetails}>
         <h5>{props.app.name}</h5>
-        <span>{props.app.url}</span>
+        <span>{displayUrl}</span>
       </div>
     </a>
   )

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 } from '../../../utility/iconParser';
+import { iconParser, urlParser } from '../../../utility';
 
 interface ComponentProps {
   category: Category;
@@ -13,19 +13,23 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
     <div className={classes.BookmarkCard}>
       <h3>{props.category.name}</h3>
       <div className={classes.Bookmarks}>
-        {props.category.bookmarks.map((bookmark: Bookmark) => (
-          <a
-            href={`http://${bookmark.url}`}
-            target='_blank'
-            key={`bookmark-${bookmark.id}`}>
-            {bookmark.icon && (
-              <div className={classes.BookmarkIcon}>
-                <Icon icon={iconParser(bookmark.icon)} />
-              </div>
-            )}
-            {bookmark.name}
-          </a>
-        ))}
+        {props.category.bookmarks.map((bookmark: Bookmark) => {
+          const [displayUrl, redirectUrl] = urlParser(bookmark.url);
+
+          return (
+            <a
+              href={redirectUrl}
+              target='_blank'
+              key={`bookmark-${bookmark.id}`}>
+              {bookmark.icon && (
+                <div className={classes.BookmarkIcon}>
+                  <Icon icon={iconParser(bookmark.icon)} />
+                </div>
+              )}
+              {bookmark.name}
+            </a>
+          )
+        })}
       </div>
     </div>
   )

client/src/utility/iconParser.ts

@@ -1,3 +1,8 @@
+/**
+ * Parse Material Desgin icon name to be used with mdi/js
+ * @param mdiName Dash separated icon name from MDI, e.g. alert-box-outline
+ * @returns Parsed icon name to be used with mdi/js, e.g mdiAlertBoxOutline
+ */
 export const iconParser = (mdiName: string): string => {
   let parsedName = mdiName
     .split('-')

client/src/utility/index.ts

@@ -0,0 +1,2 @@
+export * from './iconParser';
+export * from './urlParser';

client/src/utility/urlParser.ts

@@ -0,0 +1,20 @@
+export const urlParser = (url: string): string[] => {
+  let parsedUrl: string;
+  let displayUrl: string;
+
+  if (/https?:\/\//.test(url)) {
+    // Url starts with http[s]:// -> leave it as it is
+    parsedUrl = url;
+  } else {
+    // No protocol -> apply http:// prefix
+    parsedUrl = `http://${url}`;
+  }
+
+  // Create simplified url to display as text
+  displayUrl = url
+    .replace(/https?:\/\//, '')
+    .replace('www.', '')
+    .replace(/\/$/, '');
+
+  return [displayUrl, parsedUrl]
+}