Build multiarch and maintenance fixes (#19)

* add multiarch build and push to CI

* various maintenance fixes

* fix github actions steps outputs

.docker/Dockerfile

@@ -1,4 +1,6 @@
-FROM node:16 as builder
+FROM node:16-alpine3.11 as builder
+
+RUN apk --no-cache --virtual build-dependencies add python python3 make g++
 
 # Get package.json and install modules
 COPY package*.json /tmp/package.json
@@ -21,7 +23,7 @@ RUN mkdir -p ./public ./data \
     && mv ./client/build/* ./public \
     && rm -rf ./client
 
-FROM node:16-alpine
+FROM node:16-alpine3.11
 
 COPY --from=builder /app /app
 

.github/workflows/docker-image.yml

@@ -10,7 +10,7 @@ jobs:
     steps:
       - name: Get current date
         id: date
-        run: echo "::set-output name=date::$(date +'%Y-%m-%d')"
+        run: echo "date=$(date +'%Y-%m-%d')" >> "$GITHUB_OUTPUT"
         
       - name: Check out the repo
         uses: actions/checkout@v2
@@ -25,7 +25,19 @@ jobs:
           fi
           TAGS="${DOCKER_IMAGE}:${VERSION},${DOCKER_IMAGE}:${{ steps.date.outputs.date }}"
           echo ${TAGS}
-          echo ::set-output name=tags::${TAGS}
+          echo "tags=${TAGS}" >> "$GITHUB_OUTPUT"
+        
+      - name: Prepare-multiarch
+        id: prep-multiarch
+        run: |
+          DOCKER_IMAGE=ghcr.io/${{ github.repository }}
+          VERSION=multiarch
+          if [[ '${{ github.head_ref }}' != '' ]]; then
+            VERSION=${{github.head_ref}}
+          fi
+          TAGS="${DOCKER_IMAGE}:${VERSION}-multiarch,${DOCKER_IMAGE}:${{ steps.date.outputs.date }}-multiarch"
+          echo ${TAGS}
+          echo "tags-multiarch=${TAGS}" >> "$GITHUB_OUTPUT"
       
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v1
@@ -44,6 +56,15 @@ jobs:
         uses: docker/build-push-action@v2
         with:
           context: .
-          file: ./.docker/Dockerfile.multiarch
+          file: ./.docker/Dockerfile
           push: true
           tags: ${{ steps.prep.outputs.tags }}      
+          
+      - name: Push multiarch to GitHub Packages
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./.docker/Dockerfile
+          platforms: linux/amd64,linux/arm/v7,linux/arm64
+          push: true
+          tags: ${{ steps.prep-multiarch.outputs.tags-multiarch }}

client/package.json

@@ -24,7 +24,7 @@
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.0",

client/src/components/Settings/GeneralSettings/GeneralSettings.tsx

@@ -6,7 +6,7 @@ import { GeneralForm, Query } from '../../../interfaces';
 import { actionCreators } from '../../../store';
 import { State } from '../../../store/reducers';
 import { generalSettingsTemplate, inputHandler } from '../../../utility';
-import { queries } from '../../../utility/searchQueries.json';
+import searchQueries from '../../../utility/searchQueries.json';
 import { Button, InputGroup, SettingsHeadline } from '../../UI';
 import { CustomQueries } from './CustomQueries/CustomQueries';
 
@@ -166,8 +166,8 @@ export const GeneralSettings = (): JSX.Element => {
             value={formData.defaultSearchProvider}
             onChange={(e) => inputChangeHandler(e)}
           >
-            {[...queries, ...customQueries].map((query: Query, idx) => {
-              const isCustom = idx >= queries.length;
+            {[...searchQueries.queries, ...customQueries].map((query: Query, idx) => {
+              const isCustom = idx >= searchQueries.queries.length;
 
               return (
                 <option key={idx} value={query.prefix}>
@@ -189,8 +189,8 @@ export const GeneralSettings = (): JSX.Element => {
               value={formData.secondarySearchProvider}
               onChange={(e) => inputChangeHandler(e)}
             >
-              {[...queries, ...customQueries].map((query: Query, idx) => {
-                const isCustom = idx >= queries.length;
+              {[...searchQueries.queries, ...customQueries].map((query: Query, idx) => {
+                const isCustom = idx >= searchQueries.queries.length;
 
                 return (
                   <option key={idx} value={query.prefix}>

client/src/components/Settings/Settings.tsx

@@ -1,35 +1,30 @@
-import { NavLink, Link, Switch, Route } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { Link, NavLink, Route, Switch } from 'react-router-dom';
+
+import { Route as SettingsRoute } from '../../interfaces';
+import { State } from '../../store/reducers';
+import { ProtectedRoute } from '../Routing/ProtectedRoute';
+import { Container, Headline } from '../UI';
+import { AppDetails } from './AppDetails/AppDetails';
+import { DockerSettings } from './DockerSettings/DockerSettings';
+import { GeneralSettings } from './GeneralSettings/GeneralSettings';
+import settings from './settings.json';
+import classes from './Settings.module.css';
+import { StyleSettings } from './StyleSettings/StyleSettings';
+import { Themer } from './Themer/Themer';
+import { UISettings } from './UISettings/UISettings';
+import { WeatherSettings } from './WeatherSettings/WeatherSettings';
 
 // Redux
-import { useSelector } from 'react-redux';
-import { State } from '../../store/reducers';
-
 // Typescript
-import { Route as SettingsRoute } from '../../interfaces';
-
 // CSS
-import classes from './Settings.module.css';
-
 // Components
-import { Themer } from './Themer/Themer';
-import { WeatherSettings } from './WeatherSettings/WeatherSettings';
-import { UISettings } from './UISettings/UISettings';
-import { AppDetails } from './AppDetails/AppDetails';
-import { StyleSettings } from './StyleSettings/StyleSettings';
-import { GeneralSettings } from './GeneralSettings/GeneralSettings';
-import { DockerSettings } from './DockerSettings/DockerSettings';
-import { ProtectedRoute } from '../Routing/ProtectedRoute';
-
 // UI
-import { Container, Headline } from '../UI';
-
 // Data
-import { routes } from './settings.json';
-
 export const Settings = (): JSX.Element => {
   const { isAuthenticated } = useSelector((state: State) => state.auth);
 
-  const tabs = isAuthenticated ? routes : routes.filter((r) => !r.authRequired);
+  const tabs = isAuthenticated ? settings.routes : settings.routes.filter((r) => !r.authRequired);
 
   return (
     <Container>

client/src/components/UI/Headlines/SettingsHeadline/SettingsHeadline.tsx

@@ -1,4 +1,4 @@
-const classes = require('./SettingsHeadline.module.css');
+import classes from './SettingsHeadline.module.css';
 
 interface Props {
   text: string;

client/src/utility/searchParser.ts

@@ -1,7 +1,7 @@
-import { queries } from './searchQueries.json';
+import { isUrlOrIp } from '.';
 import { SearchResult } from '../interfaces';
 import { store } from '../store/store';
-import { isUrlOrIp } from '.';
+import searchQueries from './searchQueries.json';
 
 export const searchParser = (searchQuery: string): SearchResult => {
   const result: SearchResult = {
@@ -40,7 +40,7 @@ export const searchParser = (searchQuery: string): SearchResult => {
 
   // Find primary search engine template
   const findProvider = (prefix: string) => {
-    return [...queries, ...customQueries].find((q) => q.prefix === prefix);
+    return [...searchQueries.queries, ...customQueries].find((q) => q.prefix === prefix);
   };
 
   const primarySearch = findProvider(prefix);