Merge pull request #51 from ajnart/dev

Version 0.1.6 : Rename MyHomePage to Homarr
2026-01-08 08:32:17 +01:00 · 2022-05-12 14:26:19 +02:00
parent 8ae8cb7d5a e3af7629aa
commit fce9b297df
13 changed files with 223 additions and 50 deletions
--- a/.github/ISSUE_TEMPLATE/bug.yml
+++ 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] <title>'
+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
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ 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
--- 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}}
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "parser": "typescript",
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "endOfLine": "lf"
+}
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1 +0,0 @@
-module.exports = require('eslint-config-mantine/.prettierrc.js');
--- 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)**
--- 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);
--- 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>
    </>
--- 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>
--- 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>
  );
 }
--- a/data/constants.ts
+++ b/data/constants.ts
@@ -0,0 +1,2 @@
+export const REPO_URL = 'ajnart/homarr';
+export const CURRENT_VERSION = 'v0.1.6';
--- 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",
--- 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!</title>
+        <title>Homarr - A homepage for your server!</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        <link rel="shortcut icon" href="/favicon.svg" />
      </Head>
				`@@ -1 +0,0 @@`
				`module.exports = require('eslint-config-mantine/.prettierrc.js');`