Add a latest push

.github/workflows/docker.yml

@@ -0,0 +1,64 @@
+name: Demo Push
+
+on:   
+  push:
+    tags:
+      - v*
+
+env:
+  IMAGE_NAME: mhp
+
+jobs:
+  # Push image to GitHub Packages.
+  # See also https://docs.docker.com/docker-hub/builds/
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v3
+      - run: yarn install --frozen-lockfile
+      - run: yarn export
+      - uses: actions/cache@v2
+        id: restore-build
+        with:
+          path: ./out/
+          key: ${{ github.sha }}
+
+  push:
+    runs-on: ubuntu-latest
+    needs: [build]
+    permissions:
+      packages: write
+      contents: read
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/cache@v2
+        id: restore-build
+        with:
+          path: ./out/
+          key: ${{ github.sha }}
+      - name: Build image
+        run: docker build . --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}"
+
+      - name: Log in to registry
+
+        run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
+      - name: Push image
+        run: |
+          IMAGE_ID=ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME
+
+          # Change all uppercase to lowercase
+          IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
+          # Strip git ref prefix from version
+          VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
+          # Strip "v" prefix from tag name
+          [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
+          # Use Docker `latest` tag convention
+          [ "$VERSION" == "master" ] && VERSION=latest
+          echo IMAGE_ID=$IMAGE_ID
+          echo VERSION=$VERSION
+          docker tag $IMAGE_NAME $IMAGE_ID:$VERSION
+          docker push $IMAGE_ID:$VERSION
+          docker tag $IMAGE_NAME $IMAGE_ID:latest
+          docker push $IMAGE_ID:latest

Dockerfile

@@ -1,13 +1,2 @@
-FROM node:16.15.0-alpine3.15 as build
-
-WORKDIR /app
-
-COPY ./package.json /app/package.json
-COPY ./yarn.lock /app/yarn.lock
-
-COPY . .
-RUN yarn install
-RUN yarn export
-
 FROM nginx:1.21.6
-COPY --from=build /app/out /usr/share/nginx/html
+COPY ./out /usr/share/nginx/html

components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { createStyles, Switch, Group, useMantineColorScheme } from '@mantine/core';
-import { Sun, MoonStars } from 'tabler-icons-react';
-
-const useStyles = createStyles((theme) => ({
-  root: {
-    position: 'relative',
-    '& *': {
-      cursor: 'pointer',
-    },
-  },
-
-  icon: {
-    pointerEvents: 'none',
-    position: 'absolute',
-    zIndex: 1,
-    top: 3,
-  },
-
-  iconLight: {
-    left: 4,
-    color: theme.white,
-  },
-
-  iconDark: {
-    right: 4,
-    color: theme.colors.gray[6],
-  },
-}));
-
-export function ColorSchemeSwitch() {
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const { classes, cx } = useStyles();
-
-  return (
-    <Group>
-      <div className={classes.root}>
-        <Sun className={cx(classes.icon, classes.iconLight)} size={18} />
-        <MoonStars className={cx(classes.icon, classes.iconDark)} size={18} />
-        <Switch checked={colorScheme === 'dark'} onChange={() => toggleColorScheme()} size="md" />
-      </div>
-      Switch to {colorScheme === 'dark' ? 'light' : 'dark'} mode
-    </Group>
-  );
-}

components/Settings/SettingsMenu.tsx

@@ -8,16 +8,13 @@ import {
   Tooltip,
   SegmentedControl,
 } from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
 import { useState } from 'react';
 import { Settings as SettingsIcon } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
-import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import SaveConfigComponent from '../Config/SaveConfig';
 
 function SettingsMenu(props: any) {
   const { config, setConfig } = useConfig();
-  const colorScheme = useColorScheme();
   const matches = [
     { label: 'Google', value: 'https://google.com/search?q=' },
     { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
@@ -49,7 +46,6 @@ function SettingsMenu(props: any) {
       </Group>
       <Group direction="column">
         <Switch
-          size="md"
           onChange={(e) =>
             setConfig({
               ...config,
@@ -63,7 +59,6 @@ function SettingsMenu(props: any) {
           label="Enable search bar"
         />
       </Group>
-      <ColorSchemeSwitch />
       <SaveConfigComponent />
       <Text
         style={{

components/layout/Header.tsx

@@ -11,6 +11,7 @@ import {
 import { useBooleanToggle } from '@mantine/hooks';
 import { NextLink } from '@mantine/next';
 import { Logo } from './Logo';
+import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 import CalendarComponent from '../modules/calendar/CalendarModule';
 
@@ -118,6 +119,7 @@ export function Header({ links }: HeaderResponsiveProps) {
     <Head height={HEADER_HEIGHT} mb={10} className={classes.root}>
       <Container className={classes.header}>
         <Group>
+          <ColorSchemeToggle />
           <NextLink style={{ textDecoration: 'none' }} href="/">
             <Logo style={{ fontSize: 22 }} />
           </NextLink>