Merge pull request #63 from ajnart/dev

Adding persistent storage

.dockerignore

@@ -0,0 +1,6 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.git

.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,14 +15,44 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@v3
-      - uses: actions/checkout@v3
+      - name: Setup
+        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
+      - run: yarn build
+      - name: Cache build output
+        uses: actions/cache@v2
         id: restore-build
         with:
-          path: ./out/
+          path: |
+             ./next.config.js
+             ./pages/
+             ./public/
+             ./.next/static/
+             ./.next/standalone/
+             ./packages.jsan
           key: ${{ github.sha }}
 
   docker:
@@ -37,35 +67,28 @@ jobs:
       - uses: actions/cache@v2
         id: restore-build
         with:
-          path: ./out/
+          path: |
+             ./next.config.js
+             ./pages/
+             ./public/
+             ./.next/static/
+             ./.next/standalone/
+             ./packages.jsan
           key: ${{ github.sha }}
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
         with:
           # list of Docker images to use as base name for tags
-          images: |
-            ajnart/mhp
-            ghcr.io/ajnart/mhp
+          images: ghcr.io/${{ github.repository }}
           # generate Docker tags based on the following events/attributes
           tags: |
-            type=schedule
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
-            type=sha
+            type=raw,value=latest
+            type=pep440,pattern={{version}}
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
-      - name: Login to DockerHub
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Login to GHCR
         if: github.event_name != 'pull_request'
         uses: docker/login-action@v2

.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,20 @@
-FROM nginx:1.21.6
-COPY ./out /usr/share/nginx/html
+FROM node:16-alpine
+WORKDIR /app
+ENV NODE_ENV production
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY /next.config.js ./
+COPY  /public ./public
+COPY /package.json ./package.json
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --chown=nextjs:nodejs /.next/standalone ./
+COPY --chown=nextjs:nodejs /.next/static ./.next/static
+
+USER nextjs
+EXPOSE 7575
+ENV PORT 7575
+VOLUME /app/data/configs
+CMD ["node", "server.js"]

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
-services:
-  mhp:
-    image: ghcr.io/ajnart/mhp
-    ports:
-      - '7575:80'
-    restart: always
+<!-- 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:7575 -d ghcr.io/ajnart/homarr
 ```
-### 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``
+
+**Docker Compose**
+```yml
+---
+version: '3'
+#--------------------------------------------------------------------------------------------#
+#                               Homarr -  A homepage for your server.                        #
+#--------------------------------------------------------------------------------------------#
+services:
+  homarr:
+    container_name: homarr
+    image: ghcr.io/ajnart/homarr
+    restart: unless-stopped
+    ports:
+      - '7575:7575'
+```
+
+### 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 [Starting a discussion](https://github.com/ajnart/homarr/discussions), [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

@@ -1,5 +1,4 @@
 import {
-  useMantineTheme,
   Modal,
   Center,
   Group,
@@ -21,9 +20,7 @@ import { ServiceTypeList } from '../../tools/types';
 import { AppShelfItemWrapper } from './AppShelfItemWrapper';
 
 export default function AddItemShelfItem(props: any) {
-  const { addService } = useConfig();
   const [opened, setOpened] = useState(false);
-  const theme = useMantineTheme();
   return (
     <>
       <Modal
@@ -73,17 +70,17 @@ 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);
       }
     })
-    .catch((e) => {
+    .catch(() => {
       // Do nothing
     });
 
@@ -92,7 +89,7 @@ function MatchIcon(name: string, form: any) {
 
 export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
   const { setOpened } = props;
-  const { addService, config, setConfig } = useConfig();
+  const { config, setConfig } = useConfig();
   const [isLoading, setLoading] = useState(false);
 
   const form = useForm({
@@ -104,7 +101,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       apiKey: props.apiKey ?? (undefined as unknown as string),
     },
     validate: {
-      apiKey: (value: string) => null,
+      apiKey: () => null,
       // Validate icon with a regex
       icon: (value: string) => {
         if (!value.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif)$/)) {
@@ -143,7 +140,10 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               }),
             });
           } else {
-            addService(form.values);
+            setConfig({
+              ...config,
+              services: [...config.services, form.values],
+            });
           }
           setOpened(false);
           form.reset();

components/AppShelf/AppShelf.tsx

@@ -1,35 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import {
-  Text,
-  AspectRatio,
-  SimpleGrid,
-  Card,
-  useMantineTheme,
-  Image,
-  Group,
-  Space,
-} from '@mantine/core';
+import { Text, AspectRatio, SimpleGrid, Card, Image, Group, Space } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AddItemShelfItem from './AddAppShelfItem';
 import { AppShelfItemWrapper } from './AppShelfItemWrapper';
 import AppShelfMenu from './AppShelfMenu';
 
-const AppShelf = (props: any) => {
-  const { config, addService, removeService, setConfig } = useConfig();
-
-  /* A hook that is used to load the config from local storage. */
-  useEffect(() => {
-    const localConfig = localStorage.getItem('config');
-    if (localConfig) {
-      setConfig(JSON.parse(localConfig));
-    }
-  }, []);
+const AppShelf = () => {
+  const { config } = useConfig();
 
   return (
     <SimpleGrid m="xl" cols={5} spacing="xl">
-      {config.services.map((service, i) => (
+      {config.services.map((service) => (
         <AppShelfItem key={service.name} service={service} />
       ))}
       <AddItemShelfItem />
@@ -39,16 +22,14 @@ const AppShelf = (props: any) => {
 
 export function AppShelfItem(props: any) {
   const { service }: { service: serviceItem } = props;
-  const theme = useMantineTheme();
-  const { removeService } = useConfig();
   const [hovering, setHovering] = useState(false);
   return (
     <motion.div
       key={service.name}
-      onHoverStart={(e) => {
+      onHoverStart={() => {
         setHovering(true);
       }}
-      onHoverEnd={(e) => {
+      onHoverEnd={() => {
         setHovering(false);
       }}
     >
@@ -79,7 +60,7 @@ export function AppShelfItem(props: any) {
                 opacity: hovering ? 1 : 0,
               }}
             >
-              <AppShelfMenu service={service} removeitem={removeService} />
+              <AppShelfMenu service={service} />
             </motion.div>
           </Group>
         </Card.Section>

components/AppShelf/AppShelfMenu.tsx

@@ -2,10 +2,12 @@ import { Menu, Modal, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
 import { Check, Edit, Trash } from 'tabler-icons-react';
+import { useConfig } from '../../tools/state';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
 
 export default function AppShelfMenu(props: any) {
-  const { service, removeitem: removeItem } = props;
+  const { service } = props;
+  const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
   return (
     <>
@@ -40,7 +42,10 @@ export default function AppShelfMenu(props: any) {
         <Menu.Item
           color="red"
           onClick={(e: any) => {
-            removeItem(service.name);
+            setConfig({
+              ...config,
+              services: config.services.filter((s) => s.name !== service.name),
+            });
             showNotification({
               autoClose: 5000,
               title: (

components/Config/ConfigChanger.tsx

@@ -0,0 +1,37 @@
+import { Center, Loader, Select, Tooltip } from '@mantine/core';
+import { setCookies } from 'cookies-next';
+import { useEffect, useState } from 'react';
+import { useConfig } from '../../tools/state';
+
+export default function ConfigChanger() {
+  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const [configList, setConfigList] = useState([] as string[]);
+  useEffect(() => {
+    getConfigs().then((configs) => setConfigList(configs));
+    // setConfig(initialConfig);
+  }, [config]);
+  // If configlist is empty, return a loading indicator
+  if (configList.length === 0) {
+    return (
+      <Center>
+        <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+          <Loader />
+        </Tooltip>
+      </Center>
+    );
+  }
+  return (
+    <Select
+      defaultValue={config.name}
+      label="Config loader"
+      onChange={(e) => {
+        loadConfig(e ?? 'default');
+        setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30 });
+      }}
+      data={
+        // If config list is empty, return the current config
+        configList.length === 0 ? [config.name] : configList
+      }
+    />
+  );
+}

components/Config/LoadConfig.tsx

@@ -4,6 +4,7 @@ import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { useRef } from 'react';
 import { useRouter } from 'next/router';
+import { setCookies } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 
@@ -48,7 +49,7 @@ export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) =>
 );
 
 export default function LoadConfigComponent(props: any) {
-  const { saveConfig, setConfig } = useConfig();
+  const { setConfig } = useConfig();
   const theme = useMantineTheme();
   const router = useRouter();
   const openRef = useRef<() => void>();
@@ -69,15 +70,21 @@ export default function LoadConfigComponent(props: any) {
             });
             return;
           }
+          const newConfig: Config = JSON.parse(e);
           showNotification({
             autoClose: 5000,
             radius: 'md',
-            title: <Text>Config loaded successfully</Text>,
+            title: (
+              <Text>
+                Config <b>{newConfig.name}</b> loaded successfully
+              </Text>
+            ),
             color: 'green',
             icon: <Check />,
             message: undefined,
           });
-          setConfig(JSON.parse(e));
+          setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
+          setConfig(newConfig);
         });
       }}
       accept={['application/json']}

components/Config/SaveConfig.tsx

@@ -7,7 +7,7 @@ export default function SaveConfigComponent(props: any) {
   const { config } = useConfig();
   function onClick(e: any) {
     if (config) {
-      fileDownload(JSON.stringify(config, null, '\t'), 'config.json');
+      fileDownload(JSON.stringify(config, null, '\t'), `${config.name}.json`);
     }
   }
   return (

components/Config/SelectConfig.tsx

@@ -0,0 +1,16 @@
+import { Select } from '@mantine/core';
+import { useState } from 'react';
+
+export default function SelectConfig(props: any) {
+  const [value, setValue] = useState<string | null>('');
+  return (
+    <Select
+      value={value}
+      onChange={setValue}
+      data={[
+        { value: 'default', label: 'Default' },
+        { value: 'yourmom', label: 'Your mom' },
+      ]}
+    />
+  );
+}

components/SearchBar/SearchBar.tsx

@@ -48,7 +48,7 @@ export default function SearchBar(props: any) {
           if (isYoutube) {
             window.open(`https://www.youtube.com/results?search_query=${querry.substring(3)}`);
           } else if (isTorrent) {
-            window.open(`https://thepiratebay.org/search.php?q=${querry.substring(3)}`);
+            window.open(`https://bitsearch.to/search?q=${querry.substring(3)}`);
           } else {
             window.open(`${querryUrl}${values.querry}`);
           }

components/Settings/SettingsMenu.tsx

@@ -7,18 +7,23 @@ 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 ConfigChanger from '../Config/ConfigChanger';
 import SaveConfigComponent from '../Config/SaveConfig';
 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=' },
@@ -26,12 +31,20 @@ function SettingsMenu(props: any) {
   ];
   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"
-          defaultValue={
+          value={
             // Match config.settings.searchUrl with a key in the matches array
-            matches.find((match) => match.value === config.settings.searchUrl)?.value || 'Google'
+            matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Google'
           }
           onChange={
             // Set config.settings.searchUrl to the value of the selected item
@@ -66,6 +79,7 @@ function SettingsMenu(props: any) {
       </Group>
       <ModuleEnabler />
       <ColorSchemeSwitch />
+      <ConfigChanger />
       <SaveConfigComponent />
       <Text
         style={{
@@ -82,7 +96,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 +118,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 +129,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>
   );
 }

components/modules/calendar/CalendarModule.tsx

@@ -121,6 +121,9 @@ function DayComponent(props: any) {
       {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
       <Popover
         position="left"
+        radius="lg"
+        shadow="xl"
+        transition="pop"
         width={700}
         onClose={() => setOpened(false)}
         opened={opened}

components/modules/calendar/MediaDisplay.tsx

@@ -15,7 +15,14 @@ function MediaDisplay(props: { media: IMedia }) {
   const { media }: { media: IMedia } = props;
   return (
     <Group noWrap align="self-start" mr={15}>
-      <Image fit="cover" src={media.poster} alt={media.title} width={300} height={400} />
+      <Image
+        radius="md"
+        fit="cover"
+        src={media.poster}
+        alt={media.title}
+        width={300}
+        height={400}
+      />
       <Stack
         justify="space-between"
         sx={(theme) => ({

components/modules/moduleWrapper.tsx

@@ -20,7 +20,7 @@ export default function ModuleWrapper(props: any) {
       shadow="sm"
       style={{
         // Make background color of the card depend on the theme
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'white',
       }}
     >
       <module.component />

data/configs/config.json

@@ -0,0 +1,12 @@
+{
+  "name": "config",
+  "services": [],
+  "settings": {
+    "searchBar": true,
+    "searchUrl": "https://duckduckgo.com/?q=",
+    "enabledModules": [
+      "Date",
+      "Calendar"
+    ]
+  }
+}

data/configs/config_new.json

@@ -0,0 +1,16 @@
+{
+  "name": "config_new",
+  "services": [
+    {
+      "type": "Other",
+      "name": "example",
+      "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
+      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+    }
+  ],
+  "settings": {
+    "searchBar": true,
+    "searchUrl": "https://google.com/search?q=",
+    "enabledModules": []
+  }
+}

data/configs/default.json

@@ -0,0 +1,16 @@
+{
+  "name": "default",
+  "services": [
+    {
+      "type": "Other",
+      "name": "example",
+      "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
+      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+    }
+  ],
+  "settings": {
+    "searchBar": true,
+    "searchUrl": "https://bing.com/search?q=",
+    "enabledModules": []
+  }
+}

data/constants.ts

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

next.config.js

@@ -7,4 +7,7 @@ module.exports = withBundleAnalyzer({
   eslint: {
     ignoreDuringBuilds: true,
   },
+  experimental: {
+    outputStandalone: true,
+  },
 });

package.json

@@ -1,17 +1,17 @@
 {
-  "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",
     "analyze": "ANALYZE=true next build",
-    "start": "next start",
+    "start": "next start --port 7575",
     "typecheck": "tsc --noEmit",
     "export": "next build && next export",
     "lint": "next lint",
@@ -37,6 +37,7 @@
     "@mantine/rte": "^4.2.4",
     "@mantine/spotlight": "^4.2.4",
     "@modulz/radix-icons": "^4.0.0",
+    "axios": "^0.27.2",
     "cookies-next": "^2.0.4",
     "dayjs": "^1.11.2",
     "framer-motion": "^6.3.1",

pages/_app.tsx

@@ -16,13 +16,13 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   const toggleColorScheme = (value?: ColorScheme) => {
     const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
     setColorScheme(nextColorScheme);
-    setCookies('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
+    setCookies('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
   };
 
   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>
@@ -50,5 +50,5 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
 }
 
 App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
-  colorScheme: getCookie('mantine-color-scheme', ctx) || 'light',
+  colorScheme: getCookie('color-scheme', ctx) || 'light',
 });

pages/api/configs/[slug].ts

@@ -0,0 +1,61 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+import path from 'path';
+
+function Put(req: NextApiRequest, res: NextApiResponse) {
+  // Get the slug of the request
+  const { slug } = req.query as { slug: string };
+  // Get the body of the request
+  const { body }: { body: string } = req;
+  if (!slug || !body) {
+    res.status(400).json({
+      error: 'Wrong request',
+    });
+  }
+  // Save the body in the /data/config folder with the slug as filename
+
+  fs.writeFileSync(
+    path.join('data/configs', `${slug}.json`),
+    JSON.stringify(body, null, 2),
+    'utf8'
+  );
+  return res.status(200).json({
+    message: 'Configuration saved with success',
+  });
+}
+
+function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Get the slug of the request
+  const { slug } = req.query as { slug: string };
+  if (!slug) {
+    return res.status(400).json({
+      message: 'Wrong request',
+    });
+  }
+  // Loop over all the files in the /data/configs directory
+  const files = fs.readdirSync('data/configs');
+  // Strip the .json extension from the file name
+  const configs = files.map((file) => file.replace('.json', ''));
+  // If the target is not in the list of files, return an error
+  if (!configs.includes(slug)) {
+    return res.status(404).json({
+      message: 'Target not found',
+    });
+  }
+  // Return the content of the file
+  return res.status(200).json(fs.readFileSync(path.join('data/configs', `${slug}.json`), 'utf8'));
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a Put or a GET
+  if (req.method === 'PUT') {
+    return Put(req, res);
+  }
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

pages/api/configs/index.ts

@@ -0,0 +1,28 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+
+function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Loop over all the files in the /data/configs directory
+  const files = fs.readdirSync('data/configs');
+  // Strip the .json extension from the file name
+  const configs = files.map((file) => file.replace('.json', ''));
+
+  return res.status(200).json(configs);
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'POST') {
+    return res.status(405).json({
+      statusCode: 405,
+      message: 'Method not allowed',
+    });
+  }
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

pages/index.tsx

@@ -1,9 +1,57 @@
 import { Group } from '@mantine/core';
+import { getCookie, setCookies } from 'cookies-next';
+import { GetServerSidePropsContext } from 'next';
+import path from 'path';
+import fs from 'fs';
+import { useEffect } from 'react';
 import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import SearchBar from '../components/SearchBar/SearchBar';
+import { Config } from '../tools/types';
+import { useConfig } from '../tools/state';
 
-export default function HomePage() {
+export async function getServerSideProps({
+  req,
+  res,
+}: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
+  let cookie = getCookie('config-name', { req, res });
+  if (!cookie) {
+    setCookies('config-name', 'default', { req, res, maxAge: 60 * 60 * 24 * 30 });
+    cookie = 'default';
+  }
+  // Check if the config file exists
+  const configPath = path.join(process.cwd(), 'data/configs', `${cookie}.json`);
+  if (!fs.existsSync(configPath)) {
+    return {
+      props: {
+        config: {
+          name: cookie.toString(),
+          services: [],
+          settings: {
+            enabledModules: [],
+            searchBar: true,
+            searchUrl: 'https://www.google.com/search?q=',
+          },
+        },
+      },
+    };
+  }
+
+  const config = fs.readFileSync(configPath, 'utf8');
+  // Print loaded config
+  return {
+    props: {
+      config: JSON.parse(config),
+    },
+  };
+}
+
+export default function HomePage(props: any) {
+  const { config: initialConfig }: { config: Config } = props;
+  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  useEffect(() => {
+    setConfig(initialConfig);
+  }, [initialConfig]);
   return (
     <>
       <SearchBar />

tools/state.tsx

@@ -1,17 +1,20 @@
 // src/context/state.js
+import { showNotification } from '@mantine/notifications';
+import axios from 'axios';
 import { createContext, ReactNode, useContext, useState } from 'react';
-import { Config, serviceItem } from './types';
+import { Check, X } from 'tabler-icons-react';
+import { Config } from './types';
 
 type configContextType = {
   config: Config;
   setConfig: (newconfig: Config) => void;
-  addService: (service: serviceItem) => void;
-  removeService: (name: string) => void;
-  saveConfig: (newconfig: Config) => void;
+  loadConfig: (name: string) => void;
+  getConfigs: () => Promise<string[]>;
 };
 
 const configContext = createContext<configContextType>({
   config: {
+    name: 'default',
     services: [],
     settings: {
       searchBar: true,
@@ -20,9 +23,8 @@ const configContext = createContext<configContextType>({
     },
   },
   setConfig: () => {},
-  addService: () => {},
-  removeService: () => {},
-  saveConfig: () => {},
+  loadConfig: async (name: string) => {},
+  getConfigs: async () => [],
 });
 
 export function useConfig() {
@@ -39,14 +41,8 @@ type Props = {
 
 export function ConfigProvider({ children }: Props) {
   const [config, setConfigInternal] = useState<Config>({
-    services: [
-      {
-        type: 'Other',
-        name: 'example',
-        icon: 'https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif',
-        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
-      },
-    ],
+    name: 'default',
+    services: [],
     settings: {
       searchBar: true,
       searchUrl: 'https://www.google.com/search?q=',
@@ -54,49 +50,45 @@ export function ConfigProvider({ children }: Props) {
     },
   });
 
-  function setConfig(newConfig: Config) {
-    setConfigInternal(newConfig);
-    saveConfig(newConfig);
+  async function loadConfig(configName: string) {
+    try {
+      const response = await axios.get(`/api/configs/${configName}`);
+      setConfigInternal(response.data);
+      showNotification({
+        title: 'Config',
+        icon: <Check />,
+        color: 'green',
+        autoClose: 1500,
+        radius: 'md',
+        message: `Loaded config : ${configName}`,
+      });
+    } catch (error) {
+      showNotification({
+        title: 'Config',
+        icon: <X />,
+        color: 'red',
+        autoClose: 1500,
+        radius: 'md',
+        message: `Error loading config : ${configName}`,
+      });
+    }
   }
 
-  function addService(item: serviceItem) {
-    setConfigInternal({
-      ...config,
-      services: [...config.services, item],
-    });
-    saveConfig({
-      ...config,
-      services: [...config.services, item],
-    });
+  function setConfig(newconfig: Config) {
+    axios.put(`/api/configs/${newconfig.name}`, newconfig);
+    setConfigInternal(newconfig);
   }
 
-  function removeService(name: string) {
-    // Remove the service with name in config item
-    setConfigInternal({
-      ...config,
-      services: config.services.filter((service) => service.name !== name),
-    });
-    saveConfig({
-      ...config,
-      services: config.services.filter((service) => service.name !== name),
-    });
-  }
-
-  function saveConfig(newconfig: Config) {
-    if (!newconfig) return;
-    localStorage.setItem('config', JSON.stringify(newconfig));
+  async function getConfigs(): Promise<string[]> {
+    const response = await axios.get('/api/configs');
+    return response.data;
   }
 
   const value = {
     config,
     setConfig,
-    addService,
-    removeService,
-    saveConfig,
+    loadConfig,
+    getConfigs,
   };
-  return (
-    <>
-      <configContext.Provider value={value}>{children}</configContext.Provider>
-    </>
-  );
+  return <configContext.Provider value={value}>{children}</configContext.Provider>;
 }

tools/types.ts

@@ -6,6 +6,7 @@ export interface Settings {
 }
 
 export interface Config {
+  name: string;
   services: serviceItem[];
   settings: Settings;
 }

yarn.lock

@@ -3909,6 +3909,14 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
   integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
 
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -6485,6 +6493,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.14.9:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4"
+  integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -6539,6 +6552,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 format@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"