Rename MyHomePage to Homarr

✨Multiple QoL updates!

.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

.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

.github/workflows/docker.yml

@@ -7,7 +7,7 @@ on:
   workflow_dispatch:
 
 env:
-  IMAGE_NAME: mhp
+  IMAGE_NAME: homarr
 
 jobs:
   # Push image to GitHub Packages.
@@ -15,11 +15,35 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@v3
+      - name: Setup
-      - uses: actions/checkout@v3
+        uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Yarn cache
+        uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-
+      - name: Nextjs cache
+        uses: actions/cache@v2
+        with:
+        # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
+          path: |
+            ~/.npm
+            ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
       - run: yarn install --frozen-lockfile
       - run: yarn export
-      - uses: actions/cache@v2
+      - name: Cache build output
+        uses: actions/cache@v2
         id: restore-build
         with:
           path: ./out/
@@ -45,17 +69,12 @@ jobs:
         with:
           # list of Docker images to use as base name for tags
           images: |
-            ajnart/mhp
+            ajnart/homarr
-            ghcr.io/ajnart/mhp
+            ghcr.io/ajnart/homarr
           # generate Docker tags based on the following events/attributes
           tags: |
-            type=schedule
+            type=raw,value=latest,enable={{is_default_branch}}
-            type=ref,event=branch
+            type=pep440,pattern={{version}}
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
-            type=sha
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "parser": "typescript",
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "endOfLine": "lf"
+}

.prettierrc.js

@@ -1 +0,0 @@
-module.exports = require('eslint-config-mantine/.prettierrc.js');

Dockerfile

@@ -1,2 +1,2 @@
-FROM nginx:1.21.6
+FROM nginx:alpine
 COPY ./out /usr/share/nginx/html

README.md

@@ -1,33 +1,86 @@
-# MyHomePage, a home page for your home server
+<p align = "center">
-### 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")
+  <h3 align = "center"> Homarr <h3>
-### Join the discord ! : https://discord.gg/C2WTXkzkwK 
-## What is MyHomePage ?
 
-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
+# 📃 Table of Contents
-### Docker installation
+- [📃 Table of Contents](#-table-of-contents)
-Required : Docker
+- [🚀 Getting Started](#-getting-started)
-#### Standard docker install
+  - [ℹ️ About](#ℹ️-about)
-To install the MyHomePage docker image simply execute ``docker pull ghcr.io/ajnart/mhp``  
+  - [⚡ Installation](#-installation)
-To run the docker file ``docker run --name my-home-page -p 7575:80 -d ghcr.io/ajnart/mhp``  
+    - [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*  
+<!-- Getting Started -->
-#### Docker compose
+# 🚀 Getting Started
-Here's a docker compose example on how to integrate MHP into your container stack
+
-```docker
+## ℹ️ 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:
+  homarr:
-    image: ghcr.io/ajnart/mhp
+    container_name: homarr
+    image: ghcr.io/ajnart/homarr
+    restart: unless-stopped
     ports:
       - '7575:80'
-    restart: always
 ```
-### Local installation
+
-Required: Node (LTS)
+### Building from Source 🛠️
-#### Install using node
+
-To install MyHomePage locally:
+_Requirements_:
-- Clone the source code or download it.
+- [Git](https://git-scm.com/downloads)
-- Execute ``npm install`` or ``yarn install`` *(prefered)* to install the dependencies
+- [NodeJS](https://nodejs.org/en/) _(Latest or LTS)_
-- Execute ``yarn export`` to build the source code into the final HTML pages in the ``./out`` folder
+- [Yarn](https://yarnpkg.com/)
-- Run a web server to serve the content of the ``./out`` folder. Example: ``python -m http.server 7575 --directory out``
+- 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)**

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
+  fetch(
-  // https://data.jsdelivr.com/v1/package/gh/IceWhaleTech/AppIcon@main
+    `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
-  // and then iterate over the files -> files -> name and then remove the extension (.png)
+      .replace(/\s+/g, '-')
-  // Compare it to the input and then fetch the icon
+      .toLowerCase()}.png`
-  fetch(`https://cdn.jsdelivr.net/gh/IceWhaleTech/AppIcon@main/all/${name.toLowerCase()}.png`)
+  )
     .then((res) => {
       if (res.status === 200) {
         form.setFieldValue('icon', res.url);

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 { useEffect, useState } from 'react';
-import { Settings as SettingsIcon } from 'tabler-icons-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>
     </>

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>

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>
   );
 }

data/constants.ts

@@ -0,0 +1,2 @@
+export const REPO_URL = 'ajnart/homarr';
+export const CURRENT_VERSION = 'v0.1.6';

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "homarr",
+	"name": "homarr",
-  "version": "0.1.3",
+	"version": "0.1.6",
-  "private": "false",
+	"private": "false",
-  "description": "Customizable browser's home page to interact with your homeserver's Docker containers (i.e. Sonarr/Radarr)",
+	"description": "Homarr -  A homepage for your server.",
-  "repository": {
+	"repository": {
-    "type": "git",
+		"type": "git",
-    "url": "https://github.com/ajnart/myhomepage"
+		"url": "https://github.com/ajnart/homarr"
-  },
+	},
   "scripts": {
     "dev": "next dev",
     "build": "next build",

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>