Merge branch 'feature/bookmark-new-tab'

This commit is contained in:
Bastian Meissner 2022-01-30 12:37:37 +01:00
commit 05cc9981f6
5 changed files with 72 additions and 14 deletions

View file

View file

@ -71,6 +71,7 @@ $ yarn serve:production
```
### Manual install
```bash
$ git clone https://github.com/phntxx/dashboard.git
$ cd dashboard/
@ -80,6 +81,7 @@ $ cp -R build/* .
```
#### `/etc/nginx/conf.d/dashboard.conf`
```
server {
server_name localhost;
@ -101,8 +103,6 @@ $ chown -R www-data:www-data
$ systemctl nginx reload
```
## Configuration
There's a couple of things you can / need to configure to get Dashboard to look and behave just as you want it to.
@ -125,7 +125,8 @@ To show the apps you want to show, change `apps.json` to resemble the following:
"name": "[Name of the app]",
"displayURL": "[URL you want to show]",
"url": "[URL to redirect to]",
"icon": "[Icon code]"
"icon": "[Icon code]",
"newTab": true
},
...
]
@ -137,7 +138,8 @@ To show the apps you want to show, change `apps.json` to resemble the following:
"name": "[Name of the app]",
"displayURL": "[URL you want to show]",
"url": "[URL to redirect to]",
"icon": "[Icon code]"
"icon": "[Icon code]",
"newTab": false
},
...
]
@ -145,6 +147,7 @@ To show the apps you want to show, change `apps.json` to resemble the following:
```
Wherein either `apps` or `categories` can be omitted as needed.
`newTab` is optional and defaults to `false`.
To find icons, simply go to the [Material Design Icon Library](https://material.io/icons/) and copy one of the codes for an icon there.
@ -160,7 +163,8 @@ To show bookmarks, `bookmarks.json` needs to resemble the following:
"items": [
{
"name": "[Bookmark Name]",
"url": "[Bookmark URL]"
"url": "[Bookmark URL]",
"newTab": true
},
...
]
@ -170,6 +174,8 @@ To show bookmarks, `bookmarks.json` needs to resemble the following:
}
```
`newTab` is optional and defaults to `false`.
### Themes
In order to customize theming, `themes.json` needs to resemble this:

View file

@ -14,7 +14,7 @@ const GroupContainer = styled.div`
padding: 1rem 0;
`;
const Bookmark = styled.a`
const BookmarkElement = styled.a`
font-weight: 400;
text-decoration: none;
color: ${(props) => props.theme.accentColor};
@ -29,6 +29,7 @@ const Bookmark = styled.a`
export interface IBookmarkProps {
name: string;
url: string;
newTab?: boolean;
}
export interface IBookmarkGroupProps {
@ -40,6 +41,22 @@ export interface IBookmarkListProps {
groups: Array<IBookmarkGroupProps>;
}
export const Bookmark = ({ name, url, newTab }: IBookmarkProps) => {
const linkAttrs =
newTab !== undefined && newTab
? {
target: "_blank",
rel: "noopener noreferrer",
}
: {};
return (
<BookmarkElement href={url} {...linkAttrs}>
{name}
</BookmarkElement>
);
};
/**
* Renders a given bookmark group
* @param {IBookmarkGroupProps} props given props of the bookmark group
@ -49,10 +66,13 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => (
<Item>
<GroupContainer>
<SubHeadline>{name}</SubHeadline>
{items.map(({ name, url }, index) => (
<Bookmark key={[name, index].join("")} href={url}>
{name}
</Bookmark>
{items.map(({ name, url, newTab }, index) => (
<Bookmark
key={[name, index].join("")}
name={name}
url={url}
newTab={newTab}
/>
))}
</GroupContainer>
</Item>

View file

@ -1,5 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BookmarkGroup snapshot test 1`] = `[Function]`;
exports[`tests rendering of Bookmark with newTab=false 1`] = `[Function]`;
exports[`BookmarkList snapshot test 1`] = `[Function]`;
exports[`tests rendering of Bookmark with newTab=true 1`] = `[Function]`;
exports[`tests rendering of Bookmark without newTab 1`] = `[Function]`;
exports[`tests rendering of BookmarkGroup 1`] = `[Function]`;
exports[`tests rendering of BookmarkList 1`] = `[Function]`;

View file

@ -1,5 +1,6 @@
import { render } from "@testing-library/react";
import BookmarkList, {
Bookmark,
BookmarkGroup,
IBookmarkGroupProps,
IBookmarkListProps,
@ -19,7 +20,32 @@ const bookmarkListProps: IBookmarkListProps = {
groups: [bookmarkGroupProps, bookmarkGroupProps],
};
it("BookmarkGroup snapshot test", () => {
it("tests rendering of Bookmark with newTab=true", () => {
let props = bookmarkGroupProps.items[0];
const { asFragment } = render(
<Bookmark name={props.name} url={props.url} newTab={true} />,
);
expect(asFragment).toMatchSnapshot();
});
it("tests rendering of Bookmark with newTab=false", () => {
let props = bookmarkGroupProps.items[0];
const { asFragment } = render(
<Bookmark name={props.name} url={props.url} newTab={false} />,
);
expect(asFragment).toMatchSnapshot();
});
it("tests rendering of Bookmark without newTab", () => {
let props = bookmarkGroupProps.items[0];
const { asFragment } = render(<Bookmark name={props.name} url={props.url} />);
expect(asFragment).toMatchSnapshot();
});
it("tests rendering of BookmarkGroup", () => {
const { asFragment } = render(
<BookmarkGroup
name={bookmarkGroupProps.name}
@ -30,7 +56,7 @@ it("BookmarkGroup snapshot test", () => {
expect(asFragment).toMatchSnapshot();
});
it("BookmarkList snapshot test", () => {
it("tests rendering of BookmarkList", () => {
const { asFragment } = render(
<BookmarkList groups={bookmarkListProps.groups} />,
);