diff --git a/README.md b/README.md index 3b2ed3d..25d7436 100644 --- a/README.md +++ b/README.md @@ -59,4 +59,17 @@ docker run -p 5005:5005 -v :/app/data flame - Themes - Customize your page by choosing from 12 color themes -![Homescreen screenshot](./github/_themes.png) \ No newline at end of file +![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}` \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx index 9875f16..ad7b366 100644 --- a/client/src/App.tsx +++ b/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) { diff --git a/client/src/components/Apps/AppCard/AppCard.tsx b/client/src/components/Apps/AppCard/AppCard.tsx index 18b5dfd..d2ef375 100644 --- a/client/src/components/Apps/AppCard/AppCard.tsx +++ b/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 ( - +
{props.app.name}
- {props.app.url} + {displayUrl}
) diff --git a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx index 5f607b2..6ddf0b7 100644 --- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx +++ b/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 => {

{props.category.name}

- {props.category.bookmarks.map((bookmark: Bookmark) => ( - - {bookmark.icon && ( -
- -
- )} - {bookmark.name} -
- ))} + {props.category.bookmarks.map((bookmark: Bookmark) => { + const [displayUrl, redirectUrl] = urlParser(bookmark.url); + + return ( + + {bookmark.icon && ( +
+ +
+ )} + {bookmark.name} +
+ ) + })}
) diff --git a/client/src/utility/iconParser.ts b/client/src/utility/iconParser.ts index e846102..c5c9d8b 100644 --- a/client/src/utility/iconParser.ts +++ b/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('-') diff --git a/client/src/utility/index.ts b/client/src/utility/index.ts new file mode 100644 index 0000000..bd1db1b --- /dev/null +++ b/client/src/utility/index.ts @@ -0,0 +1,2 @@ +export * from './iconParser'; +export * from './urlParser'; \ No newline at end of file diff --git a/client/src/utility/urlParser.ts b/client/src/utility/urlParser.ts new file mode 100644 index 0000000..c74224a --- /dev/null +++ b/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] +} \ No newline at end of file