From 0f1a94868289c0f082c788722e422fad8123f54e Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 9 May 2022 20:09:19 +0000 Subject: [PATCH 01/16] Bump minimist from 1.2.5 to 1.2.6 Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6. - [Release notes](https://github.com/substack/minimist/releases) - [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] --- yarn.lock | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/yarn.lock b/yarn.lock index b417903d3..221e7a8d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8853,16 +8853,11 @@ minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.2: dependencies: brace-expansion "^1.1.7" -minimist@^1.1.1, minimist@^1.2.5, minimist@^1.2.6: +minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@~1.2.5: version "1.2.6" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== -minimist@^1.2.0, minimist@~1.2.5: - version "1.2.5" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" - integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== - minipass-collect@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617" From 0a854695107dd32ebd3649541737adc612861eb5 Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 9 May 2022 22:13:04 +0200 Subject: [PATCH 02/16] Update dockerfile for future builds --- Dockerfile | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/Dockerfile b/Dockerfile index ed587db1f..ca782c441 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,13 +1,2 @@ -FROM node:16.15.0-alpine3.15 as build - -WORKDIR /app - -COPY ./package.json /app/package.json -COPY ./yarn.lock /app/yarn.lock - -COPY . . -RUN yarn install -RUN yarn export - FROM nginx:1.21.6 -COPY --from=build /app/out /usr/share/nginx/html +COPY ./out /usr/share/nginx/html \ No newline at end of file From 273d11a65431c5bef04272ce06d656c557c7f56d Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 9 May 2022 22:25:22 +0200 Subject: [PATCH 03/16] Try to add GitHub action --- .github/workflows/docker.yml | 45 ++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 .github/workflows/docker.yml diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml new file mode 100644 index 000000000..ecff66cb9 --- /dev/null +++ b/.github/workflows/docker.yml @@ -0,0 +1,45 @@ +name: Demo Push + +on: + push: + tags: + - v* + +env: + IMAGE_NAME: mhp + +jobs: + # Push image to GitHub Packages. + # See also https://docs.docker.com/docker-hub/builds/ + push: + runs-on: ubuntu-latest + permissions: + packages: write + contents: read + + steps: + - uses: actions/checkout@v3 + + - name: Build image + run: docker build . --file Dockerfile --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}" + + - name: Log in to registry + # This is where you will update the PAT to GITHUB_TOKEN + run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin + + - name: Push image + run: | + IMAGE_ID=ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME + + # Change all uppercase to lowercase + IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]') + # Strip git ref prefix from version + VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,') + # Strip "v" prefix from tag name + [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//') + # Use Docker `latest` tag convention + [ "$VERSION" == "master" ] && VERSION=latest + echo IMAGE_ID=$IMAGE_ID + echo VERSION=$VERSION + docker tag $IMAGE_NAME $IMAGE_ID:$VERSION + docker push $IMAGE_ID:$VERSION \ No newline at end of file From f0042f81e02f25fafac372290df5b5be4f1b8158 Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 9 May 2022 23:07:37 +0200 Subject: [PATCH 04/16] Trying to implement multi stage build --- .github/workflows/docker.yml | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index ecff66cb9..b60b10297 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -19,7 +19,11 @@ jobs: steps: - uses: actions/checkout@v3 - + - uses: actions/cache@v2 + id: restore-build + with: + path: ./out/ + key: ${{ github.sha }} - name: Build image run: docker build . --file Dockerfile --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}" From 8f60442b49f0f5fa7632061f25dab69e84d081cb Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 9 May 2022 23:21:02 +0200 Subject: [PATCH 05/16] Add multi stage docker build and release --- .github/workflows/docker.yml | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index b60b10297..68ef43f83 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -11,8 +11,22 @@ env: jobs: # Push image to GitHub Packages. # See also https://docs.docker.com/docker-hub/builds/ + build: + runs-on: ubuntu-latest + steps: + - uses: actions/setup-node@v3 + - uses: actions/checkout@v3 + - run: yarn install --frozen-lockfile + - run: yarn export + - uses: actions/cache@v2 + id: restore-build + with: + path: ./out/ + key: ${{ github.sha }} + push: runs-on: ubuntu-latest + needs: [build] permissions: packages: write contents: read @@ -25,12 +39,11 @@ jobs: path: ./out/ key: ${{ github.sha }} - name: Build image - run: docker build . --file Dockerfile --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}" + run: docker build . --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}" - name: Log in to registry - # This is where you will update the PAT to GITHUB_TOKEN - run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin + run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin - name: Push image run: | IMAGE_ID=ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME From c3d479996638da489b8e505261d044f65219f5ed Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 9 May 2022 23:28:00 +0200 Subject: [PATCH 06/16] Add a latest push too --- .github/workflows/docker.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index 68ef43f83..316c7988c 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -59,4 +59,5 @@ jobs: echo IMAGE_ID=$IMAGE_ID echo VERSION=$VERSION docker tag $IMAGE_NAME $IMAGE_ID:$VERSION - docker push $IMAGE_ID:$VERSION \ No newline at end of file + docker push $IMAGE_ID:$VERSION + docker push $IMAGE_ID:latest \ No newline at end of file From ac81fcdb3c2b3a8c605e9d8ddeae4469a039fa89 Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 9 May 2022 23:33:27 +0200 Subject: [PATCH 07/16] Add a latest push --- .github/workflows/docker.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index 316c7988c..d862b38e4 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -60,4 +60,5 @@ jobs: echo VERSION=$VERSION docker tag $IMAGE_NAME $IMAGE_ID:$VERSION docker push $IMAGE_ID:$VERSION + docker tag $IMAGE_NAME $IMAGE_ID:latest docker push $IMAGE_ID:latest \ No newline at end of file From b8ce86d783daada432cbc4153c77f593d775e202 Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Tue, 10 May 2022 18:56:16 +0200 Subject: [PATCH 08/16] Update module interface --- components/modules/modules.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/modules/modules.tsx b/components/modules/modules.tsx index 11da5b84e..60ce7d55d 100644 --- a/components/modules/modules.tsx +++ b/components/modules/modules.tsx @@ -2,7 +2,7 @@ // Each module should have its own interface and call the following function: // TODO: Add a function to register a module // Note: Maybe use context to keep track of the modules -export interface MHPModule { +export interface IModule { title: string; description: string; icon: React.ReactNode; From fa45eb3b3b62d088e58ef66a227616b270d5384f Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Tue, 10 May 2022 18:56:29 +0200 Subject: [PATCH 09/16] Add Date module --- components/modules/date/DateModule.story.tsx | 7 ++++ components/modules/date/DateModule.tsx | 41 ++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 components/modules/date/DateModule.story.tsx create mode 100644 components/modules/date/DateModule.tsx diff --git a/components/modules/date/DateModule.story.tsx b/components/modules/date/DateModule.story.tsx new file mode 100644 index 000000000..5582bb394 --- /dev/null +++ b/components/modules/date/DateModule.story.tsx @@ -0,0 +1,7 @@ +import DateComponent from "./DateModule"; + +export default { + title: 'Date module', +}; + +export const Default = (args: any) => ; diff --git a/components/modules/date/DateModule.tsx b/components/modules/date/DateModule.tsx new file mode 100644 index 000000000..98953c371 --- /dev/null +++ b/components/modules/date/DateModule.tsx @@ -0,0 +1,41 @@ +import { Box, Card, Group, Text, Title } from '@mantine/core'; +import dayjs from 'dayjs'; +import { useEffect, useState } from 'react'; +import { Clock } from 'tabler-icons-react'; +import { IModule } from '../modules'; + +export const DateModule: IModule = { + title: 'Date', + description: 'Show the current time and date in a card', + icon: Clock, + component: DateComponent, +}; + +export default function DateComponent(props: any) { + const [date, setDate] = useState(new Date()); + const hours = date.getHours(); + const minutes = date.getMinutes(); + + // Change date on minute change + // Note: Using 10 000ms instead of 1000ms to chill a little :) + useEffect(() => { + setInterval(() => { + setDate(new Date()); + }, 10000); + }, []); + + return ( + + + {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes} + + + { + // Use dayjs to format the date + // https://day.js.org/en/getting-started/installation/ + dayjs(date).format('dddd, MMMM D YYYY') + } + + + ); +} From 0c0f8247d8c23435b29d1a19a6cc544c02b96200 Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Tue, 10 May 2022 18:56:50 +0200 Subject: [PATCH 10/16] Update Calendar Module styling --- components/modules/calendar/CalendarModule.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/components/modules/calendar/CalendarModule.tsx b/components/modules/calendar/CalendarModule.tsx index bf66a47b6..bfd957bd0 100644 --- a/components/modules/calendar/CalendarModule.tsx +++ b/components/modules/calendar/CalendarModule.tsx @@ -1,14 +1,14 @@ /* eslint-disable react/no-children-prop */ -import { Popover, Box, ScrollArea, Divider, Indicator } from '@mantine/core'; +import { Popover, Box, ScrollArea, Divider, Indicator, Card } from '@mantine/core'; import { useEffect, useState } from 'react'; import { Calendar } from '@mantine/dates'; import { CalendarIcon } from '@modulz/radix-icons'; import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay'; import { useConfig } from '../../../tools/state'; -import { MHPModule } from '../modules'; +import { IModule } from '../modules'; import React from 'react'; -export const CalendarModule: MHPModule = { +export const CalendarModule: IModule = { title: 'Calendar', description: 'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.', @@ -94,12 +94,8 @@ function DayComponent(props: any) { setOpened(true); }} > - {radarrFiltered.length > 0 && ( - - )} - {sonarrFiltered.length > 0 && ( - - )} + {radarrFiltered.length > 0 && } + {sonarrFiltered.length > 0 && } Date: Tue, 10 May 2022 18:57:04 +0200 Subject: [PATCH 11/16] Add Module wrapper --- components/modules/moduleWrapper.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 components/modules/moduleWrapper.tsx diff --git a/components/modules/moduleWrapper.tsx b/components/modules/moduleWrapper.tsx new file mode 100644 index 000000000..140a35f2f --- /dev/null +++ b/components/modules/moduleWrapper.tsx @@ -0,0 +1,21 @@ +import { Card, FloatingTooltip, Tooltip, useMantineTheme } from '@mantine/core'; +import { IModule } from './modules'; + +export default function ModuleWrapper(props: any) { + const { module }: { module: IModule } = props; + const theme = useMantineTheme(); + console.log(module.title); + return ( + + {} + + ); +} From 905f445641577d4de4115327b00629438d8f7545 Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Tue, 10 May 2022 18:57:41 +0200 Subject: [PATCH 12/16] Use custom theme This is a step thowards personalisation for Changeable wallpaper feature. #32 --- pages/_app.tsx | 10 +++++++++- tools/theme.ts | 5 +++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 tools/theme.ts diff --git a/pages/_app.tsx b/pages/_app.tsx index 40824fc6a..48877263c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,6 +7,7 @@ import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core import { NotificationsProvider } from '@mantine/notifications'; import Layout from '../components/layout/Layout'; import { ConfigProvider } from '../tools/state'; +import { theme } from '../tools/theme'; export default function App(props: AppProps & { colorScheme: ColorScheme }) { const { Component, pageProps } = props; @@ -27,7 +28,14 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) { - + diff --git a/tools/theme.ts b/tools/theme.ts new file mode 100644 index 000000000..aa82fc5c4 --- /dev/null +++ b/tools/theme.ts @@ -0,0 +1,5 @@ +import { MantineProviderProps } from '@mantine/core'; + +export const theme: MantineProviderProps['theme'] = { + +}; From 6024391414ef44274979fdd331b1fcf0239c09b5 Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Tue, 10 May 2022 18:58:13 +0200 Subject: [PATCH 13/16] AppShelf styling --- components/AppShelf/AddAppShelfItem.tsx | 56 +++++++++++++++---------- components/AppShelf/AppShelf.tsx | 38 +++++++++-------- 2 files changed, 54 insertions(+), 40 deletions(-) diff --git a/components/AppShelf/AddAppShelfItem.tsx b/components/AppShelf/AddAppShelfItem.tsx index 3627e8c1c..2ca82d4df 100644 --- a/components/AppShelf/AddAppShelfItem.tsx +++ b/components/AppShelf/AddAppShelfItem.tsx @@ -18,6 +18,7 @@ import { useState } from 'react'; import { Apps } from 'tabler-icons-react'; import { useConfig } from '../../tools/state'; import { ServiceTypeList } from '../../tools/types'; +import { AppShelfItemWrapper } from './AppShelf'; export default function AddItemShelfItem(props: any) { const { addService } = useConfig(); @@ -34,30 +35,39 @@ export default function AddItemShelfItem(props: any) { > - - - - - setOpened(true)} size={60} /> - - Add Service + + + + + Add a service + - - + + + + + setOpened(true)} size={60} /> + + + + ); } diff --git a/components/AppShelf/AppShelf.tsx b/components/AppShelf/AppShelf.tsx index bf47a7c4c..118f1238c 100644 --- a/components/AppShelf/AppShelf.tsx +++ b/components/AppShelf/AppShelf.tsx @@ -17,14 +17,25 @@ import { useConfig } from '../../tools/state'; import { pingQbittorrent } from '../../tools/api'; import { serviceItem } from '../../tools/types'; -const useStyles = createStyles((theme) => ({ - main: { - backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1], - //TODO: #3 Fix this temporary fix and make the width and height dynamic / responsive - width: 200, - height: 180, - }, -})); +export function AppShelfItemWrapper(props: any) { + const { children, hovering } = props; + const theme = useMantineTheme(); + return ( + + {children} + + ); +} const AppShelf = (props: any) => { const { config, addService, removeService, setConfig } = useConfig(); @@ -58,7 +69,6 @@ export function AppShelfItem(props: any) { const { service }: { service: serviceItem } = props; const theme = useMantineTheme(); const { removeService } = useConfig(); - const { classes } = useStyles(); const [hovering, setHovering] = useState(false); return ( - + @@ -128,7 +132,7 @@ export function AppShelfItem(props: any) { - + ); } From 72f19d450cb33218f83592548e264b321d2a10ca Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Tue, 10 May 2022 18:58:21 +0200 Subject: [PATCH 14/16] Basic layout styling --- components/layout/Aside.tsx | 19 +++++++++++++++++++ components/layout/Layout.tsx | 19 ++++++------------- components/layout/Navbar.tsx | 17 +++++++++++++++++ 3 files changed, 42 insertions(+), 13 deletions(-) create mode 100644 components/layout/Aside.tsx create mode 100644 components/layout/Navbar.tsx diff --git a/components/layout/Aside.tsx b/components/layout/Aside.tsx new file mode 100644 index 000000000..f5367042f --- /dev/null +++ b/components/layout/Aside.tsx @@ -0,0 +1,19 @@ +import { Aside as MantineAside, Space } from '@mantine/core'; +import CalendarComponent, { CalendarModule } from '../modules/calendar/CalendarModule'; +import DateComponent from '../modules/date/DateModule'; +import ModuleWrapper from '../modules/moduleWrapper'; + +export default function Aside() { + return ( + + ); +} diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx index 5e4d45cdd..303d647b5 100644 --- a/components/layout/Layout.tsx +++ b/components/layout/Layout.tsx @@ -1,7 +1,10 @@ -import { AppShell, Aside, Center, createStyles } from '@mantine/core'; +import { AppShell, Center, createStyles } from '@mantine/core'; import { Header } from './Header'; import { Footer } from './Footer'; import CalendarComponent from '../modules/calendar/CalendarModule'; +import DateComponent from '../modules/date/DateModule'; +import Aside from './Aside'; +import Navbar from './Navbar'; const useStyles = createStyles((theme) => ({ main: { @@ -15,18 +18,8 @@ export default function Layout({ children, style }: any) { const { classes, cx } = useStyles(); return (