diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml new file mode 100644 index 000000000..ac7f3daf5 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug.yml @@ -0,0 +1,52 @@ +name: ๐Ÿ› Bug Report +description: Report something that's broken, or not working like intented! +title: '[๐Ÿ› Bug] ' +labels: ['๐Ÿ› Bug'] +assignees: + - ajnart +body: + - type: dropdown + id: environment + attributes: + label: Environment + description: How have you deployed Homarr? + options: + - Docker + - NodeJS + - Cloud Service (Static) + validations: + required: true + - type: input + id: version + attributes: + label: Version + description: What version of Homarr are you running? + placeholder: 0.1.0 + validations: + required: false + - type: textarea + id: repro + attributes: + label: Describe the problem + description: Please describe the problem exactly, how to reproduce it, actual results, and expected results. + validations: + required: true + - type: textarea + id: logs + attributes: + label: Additional info + description: Logs? Screenshots? More info? + validations: + required: false + - type: checkboxes + id: idiot-check + attributes: + label: Please tick the boxes + description: Before submitting, please ensure that + options: + - label: You've read the [docs](https://github.com/ajnart/homarr#readme) + required: true + - label: You've checked for [duplicate issues](https://github.com/ajnart/homarr/issues) + required: true + - label: You've tried to debug yourself + required: true diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml new file mode 100644 index 000000000..4a4844335 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature-request.yml @@ -0,0 +1,25 @@ +name: โœจ Feature Request +description: Request a feature to help improve Homarr! +title: '[โœจ Feature] <title>' +labels: ['โœจ Feature'] +assignees: + - ajnart +body: + - type: textarea + id: feature + attributes: + label: Describe the feature you would like to see + placeholder: An outline of the feature you would like to see implemented, include as much detail as possible! + validations: + required: true + - type: dropdown + id: priority + attributes: + label: Priority + description: How urgent is the development of this feature? + options: + - Low (Nice-to-have) + - Medium (Would be very useful) + - High (App breaking feature) + validations: + required: true diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index 673115419..8bc8a13f5 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -7,7 +7,7 @@ on: workflow_dispatch: env: - IMAGE_NAME: mhp + IMAGE_NAME: homarr jobs: # Push image to GitHub Packages. @@ -69,8 +69,8 @@ jobs: with: # list of Docker images to use as base name for tags images: | - ajnart/mhp - ghcr.io/ajnart/mhp + ajnart/homarr + ghcr.io/ajnart/homarr # generate Docker tags based on the following events/attributes tags: | type=raw,value=latest,enable={{is_default_branch}} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..48f1261fd --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "parser": "typescript", + "singleQuote": true, + "trailingComma": "es5", + "useTabs": false, + "endOfLine": "lf" +} \ No newline at end of file diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index dd23f0d31..000000000 --- a/.prettierrc.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('eslint-config-mantine/.prettierrc.js'); diff --git a/README.md b/README.md index 9e6b45ce6..5cabbbdc6 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,86 @@ -# MyHomePage, a home page for your home server -### Do not hesitate to star โญ this repo if you like the project ! ![](https://img.shields.io/github/stars/ajnart/myhomepage?label=%E2%AD%90&style=for-the-badge?branch=master&kill_cache=1") -### Join the discord ! : https://discord.gg/C2WTXkzkwK -## What is MyHomePage ? +<p align = "center"> + <h3 align = "center"> Homarr <h3> -HomePage is a web page for your home server, it provides a user friendly interface to access docker containers or other services. + <p align = "center"> + A homepage for <i>your</i> server. + <br/> + <a href = "https://github.com/ajnart/homarr/deployments/activity_log?environment=Production" > <strong> Demo โ†—๏ธ </strong> </a> โ€ข <a href = "#install" > <strong> Install โžก๏ธ </strong> </a> + <br /> + <br /> + <a href = "https://discord.gg/aCsmEV5RgA" > <img src="https://discordapp.com/api/guilds/972958686051962910/widget.png?style=shield" > </a> +</p> +</p> -## Install -### Docker installation -Required : Docker -#### Standard docker install -To install the MyHomePage docker image simply execute ``docker pull ghcr.io/ajnart/mhp`` -To run the docker file ``docker run --name my-home-page -p 7575:80 -d ghcr.io/ajnart/mhp`` +# ๐Ÿ“ƒ Table of Contents +- [๐Ÿ“ƒ Table of Contents](#-table-of-contents) +- [๐Ÿš€ Getting Started](#-getting-started) + - [โ„น๏ธ About](#โ„น๏ธ-about) + - [โšก Installation](#-installation) + - [Deploying from Docker Image ๐Ÿณ](#deploying-from-docker-image-) + - [Building from Source ๐Ÿ› ๏ธ](#building-from-source-๏ธ) +- [๐Ÿ’– Contributing](#-contributing) -*Note: Currently the port used is 80 (Nginx default port) It will change to be 7575 by default* -#### Docker compose -Here's a docker compose example on how to integrate MHP into your container stack -```docker +<!-- Getting Started --> +# ๐Ÿš€ Getting Started + +## โ„น๏ธ About + +Homarr is a simple and lightweight homepage for your server, that helps you easily access all of your services in one place. + +**[โคด๏ธ Back to Top](#-table-of-contents)** + +## โšก Installation + +### Deploying from Docker Image ๐Ÿณ +> Supported architectures: x86-64, ARM, ARM64 + +_Requirements_: +- [Docker](https://docs.docker.com/get-docker/) + +**Standard Docker Install** +```sh +docker run --name homarr -p 7575:80 -d ghcr.io/ajnart/homarr +``` + +**Docker Compose** +```yml +--- +version: '3' +#--------------------------------------------------------------------------------------------# +# Homarr - A homepage for your server. # +#--------------------------------------------------------------------------------------------# services: - mhp: - image: ghcr.io/ajnart/mhp + homarr: + container_name: homarr + image: ghcr.io/ajnart/homarr + restart: unless-stopped ports: - '7575:80' - restart: always ``` -### Local installation -Required: Node (LTS) -#### Install using node -To install MyHomePage locally: -- Clone the source code or download it. -- Execute ``npm install`` or ``yarn install`` *(prefered)* to install the dependencies -- Execute ``yarn export`` to build the source code into the final HTML pages in the ``./out`` folder -- Run a web server to serve the content of the ``./out`` folder. Example: ``python -m http.server 7575 --directory out`` + +### Building from Source ๐Ÿ› ๏ธ + +_Requirements_: +- [Git](https://git-scm.com/downloads) +- [NodeJS](https://nodejs.org/en/) _(Latest or LTS)_ +- [Yarn](https://yarnpkg.com/) +- Some web server + +**Installing** + +- Clone the GitHub repo: `git clone https://github.com/ajnart/homarr.git` & `cd homarr` +- Install all dependencies: `yarn install` +- Build the source: `yarn export` +- Start a web server (Any web server will work): + - _Examples:_ + - NodeJS serve: `npm i -g serve` or `yarn global add serve` & `serve ./out` + - python http.server: `python -m http.server 7474 --directory out` + +**[โคด๏ธ Back to Top](#-table-of-contents)** + +# ๐Ÿ’– Contributing +You can contribute by [Submitting Bugs](https://github.com/ajnart/homarr/issues/new), [Requesting Features](https://github.com/ajnart/homarr/issues/new), or [Making a pull request](https://github.com/ajnart/homarr/compare)! + +All contributions are highly appreciated. + +**[โคด๏ธ Back to Top](#-table-of-contents)** diff --git a/components/AppShelf/AddAppShelfItem.tsx b/components/AppShelf/AddAppShelfItem.tsx index e78eccb92..37eac451e 100644 --- a/components/AppShelf/AddAppShelfItem.tsx +++ b/components/AppShelf/AddAppShelfItem.tsx @@ -73,11 +73,11 @@ export default function AddItemShelfItem(props: any) { } function MatchIcon(name: string, form: any) { - // TODO: In order to avoid all the requests, we could fetch - // https://data.jsdelivr.com/v1/package/gh/IceWhaleTech/AppIcon@main - // and then iterate over the files -> files -> name and then remove the extension (.png) - // Compare it to the input and then fetch the icon - fetch(`https://cdn.jsdelivr.net/gh/IceWhaleTech/AppIcon@main/all/${name.toLowerCase()}.png`) + fetch( + `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name + .replace(/\s+/g, '-') + .toLowerCase()}.png` + ) .then((res) => { if (res.status === 200) { form.setFieldValue('icon', res.url); diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx index 41ef8c9ef..47a41fee1 100644 --- a/components/Settings/SettingsMenu.tsx +++ b/components/Settings/SettingsMenu.tsx @@ -7,10 +7,13 @@ import { Text, Tooltip, SegmentedControl, + Indicator, + Alert, } from '@mantine/core'; import { useColorScheme } from '@mantine/hooks'; -import { useState } from 'react'; -import { Settings as SettingsIcon } from 'tabler-icons-react'; +import { useEffect, useState } from 'react'; +import { AlertCircle, Settings as SettingsIcon } from 'tabler-icons-react'; +import { CURRENT_VERSION, REPO_URL } from '../../data/constants'; import { useConfig } from '../../tools/state'; import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch'; import SaveConfigComponent from '../Config/SaveConfig'; @@ -19,13 +22,23 @@ import ModuleEnabler from './ModuleEnabler'; function SettingsMenu(props: any) { const { config, setConfig } = useConfig(); const colorScheme = useColorScheme(); + const { current, latest } = props; const matches = [ { label: 'Google', value: 'https://google.com/search?q=' }, { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' }, { label: 'Bing', value: 'https://bing.com/search?q=' }, ]; + return ( <Group direction="column" grow> + <Alert + icon={<AlertCircle size={16} />} + title="Update available" + radius="lg" + hidden={current === latest} + > + Version {latest} is available. Current : {current} + </Alert> <Group> <SegmentedControl title="Search engine" @@ -82,7 +95,20 @@ function SettingsMenu(props: any) { } export function SettingsMenuButton(props: any) { + const [update, setUpdate] = useState(false); const [opened, setOpened] = useState(false); + const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION); + useEffect(() => { + // Fetch Data here when component first mounted + fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => { + res.json().then((data) => { + setLatestVersion(data.tag_name); + if (data.tag_name !== CURRENT_VERSION) { + setUpdate(true); + } + }); + }); + }, []); return ( <> <Modal @@ -91,7 +117,7 @@ export function SettingsMenuButton(props: any) { opened={props.opened || opened} onClose={() => setOpened(false)} > - <SettingsMenu /> + <SettingsMenu current={CURRENT_VERSION} latest={latestVersion} /> </Modal> <ActionIcon variant="default" @@ -102,7 +128,14 @@ export function SettingsMenuButton(props: any) { onClick={() => setOpened(true)} > <Tooltip label="Settings"> - <SettingsIcon /> + <Indicator + size={12} + disabled={CURRENT_VERSION === latestVersion} + offset={-3} + position="top-end" + > + <SettingsIcon /> + </Indicator> </Tooltip> </ActionIcon> </> diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx index 6683ec8e7..8727905c4 100644 --- a/components/layout/Footer.tsx +++ b/components/layout/Footer.tsx @@ -60,7 +60,7 @@ export function Footer({ links }: FooterCenteredProps) { > <Group className={classes.links}>{items}</Group> <Group spacing="xs" position="right" noWrap> - <ActionIcon<'a'> component="a" href="https://github.com/ajnart/myhomepage" size="lg"> + <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg"> <BrandGithub size={18} /> </ActionIcon> </Group> diff --git a/components/layout/Logo.tsx b/components/layout/Logo.tsx index b3d0305de..824688a1b 100644 --- a/components/layout/Logo.tsx +++ b/components/layout/Logo.tsx @@ -9,7 +9,7 @@ export function Logo({ style }: any) { variant="gradient" gradient={{ from: 'red', to: 'orange', deg: 145 }} > - MyHomePage + Homarr </Text> ); } diff --git a/data/constants.ts b/data/constants.ts new file mode 100644 index 000000000..a01eb18c6 --- /dev/null +++ b/data/constants.ts @@ -0,0 +1,2 @@ +export const REPO_URL = 'ajnart/homarr'; +export const CURRENT_VERSION = 'v0.1.6'; diff --git a/package.json b/package.json index e131b9410..e0ee483b9 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { - "name": "homarr", - "version": "0.1.3", - "private": "false", - "description": "Customizable browser's home page to interact with your homeserver's Docker containers (i.e. Sonarr/Radarr)", - "repository": { - "type": "git", - "url": "https://github.com/ajnart/myhomepage" - }, + "name": "homarr", + "version": "0.1.6", + "private": "false", + "description": "Homarr - A homepage for your server.", + "repository": { + "type": "git", + "url": "https://github.com/ajnart/homarr" + }, "scripts": { "dev": "next dev", "build": "next build", diff --git a/pages/_app.tsx b/pages/_app.tsx index 3d8b2049f..bb54e75df 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -22,7 +22,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) { return ( <> <Head> - <title>MyHomePage - Your new browser homepage! + Homarr - A homepage for your server!