From 46d001e7bf30ad301171c2e9633d06cf845e6d52 Mon Sep 17 00:00:00 2001 From: Bastian Meissner Date: Fri, 14 Jan 2022 14:53:18 +0100 Subject: [PATCH 1/2] Add "newTab" to bookmarks --- .github/workflows/test.yml | 0 src/components/bookmarks.tsx | 31 ++++++++++++++++--- .../__snapshots__/bookmarks.spec.tsx.snap | 10 ++++-- src/test/components/bookmarks.spec.tsx | 30 ++++++++++++++++-- 4 files changed, 62 insertions(+), 9 deletions(-) delete mode 100644 .github/workflows/test.yml diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/bookmarks.tsx b/src/components/bookmarks.tsx index 0c7cf66..fafcead 100644 --- a/src/components/bookmarks.tsx +++ b/src/components/bookmarks.tsx @@ -1,3 +1,4 @@ +import { link } from "fs"; import styled from "styled-components"; import { Headline, @@ -14,7 +15,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 +30,7 @@ const Bookmark = styled.a` export interface IBookmarkProps { name: string; url: string; + newTab?: boolean; } export interface IBookmarkGroupProps { @@ -40,6 +42,22 @@ export interface IBookmarkListProps { groups: Array; } +export const Bookmark = ({ name, url, newTab }: IBookmarkProps) => { + const linkAttrs = + newTab !== undefined && newTab + ? { + target: "_blank", + rel: "noopener noreferrer", + } + : {}; + + return ( + + {name} + + ); +}; + /** * Renders a given bookmark group * @param {IBookmarkGroupProps} props given props of the bookmark group @@ -49,10 +67,13 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => ( {name} - {items.map(({ name, url }, index) => ( - - {name} - + {items.map(({ name, url, newTab }, index) => ( + ))} diff --git a/src/test/components/__snapshots__/bookmarks.spec.tsx.snap b/src/test/components/__snapshots__/bookmarks.spec.tsx.snap index 0a692f8..bdab497 100644 --- a/src/test/components/__snapshots__/bookmarks.spec.tsx.snap +++ b/src/test/components/__snapshots__/bookmarks.spec.tsx.snap @@ -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]`; diff --git a/src/test/components/bookmarks.spec.tsx b/src/test/components/bookmarks.spec.tsx index eb5d137..82cc419 100644 --- a/src/test/components/bookmarks.spec.tsx +++ b/src/test/components/bookmarks.spec.tsx @@ -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( + , + ); + + expect(asFragment).toMatchSnapshot(); +}); + +it("tests rendering of Bookmark with newTab=false", () => { + let props = bookmarkGroupProps.items[0]; + const { asFragment } = render( + , + ); + + expect(asFragment).toMatchSnapshot(); +}); + +it("tests rendering of Bookmark without newTab", () => { + let props = bookmarkGroupProps.items[0]; + const { asFragment } = render(); + + expect(asFragment).toMatchSnapshot(); +}); + +it("tests rendering of BookmarkGroup", () => { const { asFragment } = render( { expect(asFragment).toMatchSnapshot(); }); -it("BookmarkList snapshot test", () => { +it("tests rendering of BookmarkList", () => { const { asFragment } = render( , ); From 420d95c6b5c28eec13e14590d37e4f4814d75da4 Mon Sep 17 00:00:00 2001 From: Bastian Meissner Date: Sun, 30 Jan 2022 12:35:46 +0100 Subject: [PATCH 2/2] Add newTab to bookmarks --- README.md | 16 +++++++++++----- src/components/bookmarks.tsx | 1 - 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 9b1f83b..1e98102 100644 --- a/README.md +++ b/README.md @@ -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: diff --git a/src/components/bookmarks.tsx b/src/components/bookmarks.tsx index fafcead..bf0c0ee 100644 --- a/src/components/bookmarks.tsx +++ b/src/components/bookmarks.tsx @@ -1,4 +1,3 @@ -import { link } from "fs"; import styled from "styled-components"; import { Headline,