fix: why just why

also github actions now

[CVE-2024-27303](https://github.com/electron-userland/electron-builder/security/advisories/GHSA-r4pf-3v7r-hh55)

.circleci/config.yml

@@ -1,36 +0,0 @@
-version: 2.1
-jobs:
-  build_windows:
-    docker:
-      - image: electronuserland/builder:wine
-    steps:
-      - checkout
-      - run: yarn
-      - run: yarn build-electron-win
-      - run: mkdir /tmp/artifacts
-      - run: mv -t /tmp/artifacts dist/*.exe
-      - store_artifacts:
-          path: /tmp/artifacts
-  build_linux:
-    docker:
-      - image: node:lts
-    steps:
-      - checkout
-      - run: yarn
-      - run: yarn build-electron-linux
-      - run: mkdir /tmp/artifacts
-      - run: mv -t /tmp/artifacts dist/*.snap dist/*.AppImage
-      - store_artifacts:
-          path: /tmp/artifacts
-
-workflows:
-  build:
-    jobs:
-      - hold:
-          type: approval
-      - build_windows:
-          requires:
-            - hold
-      - build_linux:
-          requires:
-            - hold

.github/workflows/publish.yml

@@ -0,0 +1,63 @@
+name: Build/release
+
+on: push
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v1
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 20
+
+      - name: Install packages
+        run: yarn install --network-timeout 1000000
+
+      - name: Build electron index.ts file
+        run: yarn electron-build
+
+      - name: Build/release Electron app
+        uses: samuelmeuli/action-electron-builder@v1
+        with:
+          # GitHub token, automatically provided to the action
+          # (No need to define this secret in the repo settings)
+          github_token: ${{ secrets.github_token }}
+
+          # If the commit is tagged with a version (e.g. "v1.0.0"),
+          # release the app after building
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}
+
+      # - name: Send POST request to update server
+      #   if: startsWith(github.ref, 'refs/tags/v')
+      #   run: |
+      #     curl -X POST -H "Content-Type: application/json" -d '{"version": "${{ github.ref }}" }' https://automata.sern.dev/gui/newVersion
+      
+      - name: Move artifacts
+        shell: bash
+        run: |
+          if [ "${{ matrix.os }}" == "windows-latest" ]; then
+            mkdir d:\\tmp\\artifacts
+            mv dist/*.exe d:\\tmp\\artifacts
+          else
+            mkdir -p /tmp/artifacts
+            if [ "${{ matrix.os }}" == "macos-latest" ]; then
+              mv dist/*.dmg /tmp/artifacts
+            else
+              mv dist/*.AppImage /tmp/artifacts
+            fi
+          fi
+        
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v1
+        with:
+          name: application
+          path: /tmp/artifacts

electron/index.ts

@@ -1,17 +1,19 @@
 import * as path from 'node:path'
-import { app, BrowserWindow, dialog, ipcMain } from 'electron';
+import { app, BrowserWindow, dialog, ipcMain, ipcRenderer } from 'electron';
 import * as colorette from 'colorette';
 import * as fs from 'node:fs'
 import * as os from 'node:os'
 import { exec, spawn } from 'node:child_process';
+import getPlatform from './utils/getPlatform.js';
+import updateChecker from './updateChecker.js';
 
-function createWindow() {
+async function createWindow() {
 	const mainWindow = new BrowserWindow({
 		width: 800,
 		height: 600,
 		webPreferences: {
 			nodeIntegration: true,
-			contextIsolation: false
+			contextIsolation: false,
 		},
 		icon: './icons/icon.png',
 		show: false,
@@ -24,8 +26,16 @@ function createWindow() {
 		mainWindow.loadURL('http://localhost:5173');
 	}
 
-	mainWindow.on('ready-to-show', () => {
+	mainWindow.on('ready-to-show', async () => {
 		mainWindow.show();
+
+		ipcMain.on('updateAvailable', async (event) => {
+			const checkUpdates = await updateChecker()
+			if (checkUpdates) {
+				event.reply('updateAvailableResponse', checkUpdates)
+			}
+		})
+		
 	});
 
 	mainWindow.on('page-title-updated', function (e) {
@@ -122,22 +132,7 @@ app.on('activate', () => {
 	}
 });
 
-let currentOS: string
+const currentOS = getPlatform()
-switch (process.platform) {
-	case 'linux':
-		currentOS = 'linux'
-		break;
-	case 'win32':
-		currentOS = 'windows'
-		break;
-	case 'darwin':
-		currentOS = 'macOS'
-		break;
-	default:
-		// defaulting for linux (most probable command syntax)
-		currentOS = 'linux'
-		break;
-}
 
 const asciiart = `         .:-=-:.         
 .:=+++++++++=-.     

electron/updateChecker.ts

@@ -0,0 +1,12 @@
+import { app } from "electron"
+
+export default async function updateChecker() {
+    const getLatest = await fetch('https://api.github.com/repos/sern-handler/gui/releases/latest')
+        .then(res => res.json())
+
+    if (`v${app.getVersion()}` !== getLatest.tag_name) {
+        return { version: getLatest.tag_name as string, url: getLatest.html_url as string }
+    } else {
+        return false
+    }
+}

electron/utils/getPlatform.ts

@@ -0,0 +1,13 @@
+export default function getPlatform() {
+    switch (process.platform) {
+        case 'linux':
+            return 'linux'
+        case 'win32':
+            return 'windows'
+        case 'darwin':
+            return 'macOS'
+        default:
+            // defaulting for linux (most probable command syntax)
+            return 'linux'
+    }
+}

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>sern</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">

locales/en.json

@@ -29,8 +29,9 @@
       "COMMENT_FOR_TRANSLATOR_2": "the next string is used to change the text 'with' in the sentence 'with <package manager>'",
       "with": "with"
     },
-    "settings": {
+    "updateChecker": {
-      "componentLoadTimes": "Component load times (some of them)"
+      "updateAvailable": "Update {{version}} is available!",
+      "viewRelease": "View release"
     },
     "footer": {
       "COMMENT_FOR_TRANSLATOR": "Keep all the strings here as lowercase. It kinda gives a good vibe to the text :D",

locales/es.json

@@ -29,6 +29,10 @@
       "COMMENT_FOR_TRANSLATOR_2": "El texto de abajo sirve para reemplazar 'with' en las opciones de plantilla con lo de abajo. No cambiar.",
       "with": "con"
     },
+    "updateChecker": {
+      "updateAvailable": "La versión {{version}} está disponible!",
+      "viewRelease": "Ver actualización"
+    },
     "footer": {
       "COMMENT_FOR_TRANSLATOR": "Mantén todos los textos aquí en minúsculas. Le dan un buen vibe al texto :D",
       "web": "web",

locales/tr.json

@@ -0,0 +1,40 @@
+{
+    "credits": {
+      "propsTo": "@xxDeveloper (translation)",
+      "btw": "All COMMENT_FOR_TRANSLATOR keys are comments that help you how to write translations. Follow these so you get approved faster."
+    },
+    "translation": {
+      "functionalityCard": {
+        "init": {
+          "description": "Yeni bir proje oluşturun"
+        },
+        "plugins": {
+          "description": "Proje eklentilerini yönetin"
+        }
+      },
+      "initModal": {
+        "openModalButton": "Başla",
+        "projectName": "Proje ismi",
+        "selectTemplate": "Şablon seç",
+        "couldntFetchTemplates": "Şablonlar yüklenemedi, yenilemeyi deneyin (CTRL+R) ve online oludğunuzdan emin olun",
+        "installPackagesCheckbox": "Paketleri ben devam ederken yükle",
+        "selectPackageManager": "Paket yöneticisini seçin",
+        "chooseDirectoryButton": "Klasör seçin",
+        "selectedDirectory": "Seçili klasör:",
+        "goButton": "Gidelim!",
+        "commandSuccessful": "Komut başarılı!",
+        "commandFailed": "Komut başarsız oldu!",
+        "COMMENT_FOR_TRANSLATOR": "burada büyük harf kullan",
+        "openLogFile": "LOG dosyasını aç",
+        "COMMENT_FOR_TRANSLATOR_2": "sonraki dize, 'with <paket yöneticisi>' cümlesinde 'with'i değiştirmek için kullanılır'",
+        "with": "ile birlikte"
+      },
+      "footer": {
+        "COMMENT_FOR_TRANSLATOR": "Burada yazılarında küçük harf kullan. İyi vibe veriyor :D",
+        "COMMENT_FOR_TRANSLATOR_2": "Onları şu anki halleriyle tut. Sonuçta onlar marka, dilimizde markalar pek farklı şekilde anılmıyor",
+        "web": "ön sayfa",
+        "github": "github",
+        "discord": "discord"
+      }
+    }
+}

package.json

@@ -1,16 +1,17 @@
 {
   "name": "sern-gui",
   "private": true,
-  "version": "0.1.0-alpha",
+  "version": "0.2.1",
   "main": "./dist/index.js",
   "homepage": "./",
   "scripts": {
-    "start": "vite",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "electron": "nodemon --watch electron/ --exec \"swc ./electron/index.ts -d ./dist && npx electron .\" electron/index.ts",
+    "start": "vite",
-    "electron-build": "swc ./electron/index.ts -d ./dist",
+    "electron": "nodemon --watch electron/ --exec \"swc ./electron/ -d ./dist && npx electron .\" electron/index.ts",
+    "dev": "concurrently \"yarn start\" \"yarn electron\"",
+    "electron-build": "swc ./electron/ -d ./dist",
     "build-electron": "yarn build && yarn electron-build && electron-builder --linux --windows",
     "build-electron-linux": "yarn build && yarn electron-build && electron-builder --linux",
     "build-electron-win": "yarn build && yarn electron-build && electron-builder --windows",
@@ -30,19 +31,19 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.1.2",
-    "to-boolean": "^1.0.0"
+    "react-snowfall": "^1.2.1"
   },
   "devDependencies": {
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.70",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@types/to-boolean": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "electron": "^26.2.1",
+    "concurrently": "^8.2.2",
-    "electron-builder": "^24.4.0",
+    "electron": "^28.1.0",
+    "electron-builder": "^24.13.3",
     "eslint": "^8.44.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
@@ -51,9 +52,11 @@
     "vite": "^4.4.0"
   },
   "build": {
+    "appId": "dev.sern.gui",
+    "productName": "sern GUI",
     "files": [
       "./build/**/*",
-      "./dist/index.js"
+      "./dist/**/*"
     ],
     "directories": {
       "buildResources": "assets"
@@ -61,6 +64,32 @@
     "win": {
       "icon": "./icons/icon.ico",
       "publisherName": "sern"
+    },
+    "mac": {
+      "icon": "./icons/icon.icns",
+      "category": "public.app-category.developer-tools",
+      "target": [
+        "dmg",
+        "zip"
+      ]
+    },
+    "dmg": {
+      "background": "./icons/dmgbg.png",
+      "icon": "./icons/icon.icns",
+      "title": "sern GUI",
+      "contents": [
+        {
+          "x": 423,
+          "y": 203,
+          "type": "link",
+          "path": "/Applications"
+        },
+        {
+          "x": 117,
+          "y": 203,
+          "type": "file"
+        }
+      ]
     }
   }
 }

src/App.tsx

@@ -4,7 +4,6 @@ import './FunctionalityCard.js';
 import FunctionalityCard from './FunctionalityCard.js';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import LanguageSelector from './LanguageSelector';
-import Settings from './Settings';
 
 const darkTheme = createTheme({
 	palette: {
@@ -19,7 +18,6 @@ function App() {
 	return (
 		<div className="App">
 			<ThemeProvider theme={darkTheme}>
-				<Settings />
 				<LanguageSelector />
 				<h1 className="titleHeader">~$ sern</h1>
 				<div className="functionalityCards">

src/ComponentLoadTimeWidget.tsx

@@ -1,7 +0,0 @@
-import './ComponentLoadTimeWidget.css'
-
-export default function ComponentLoadTimeWidget(props: { state: { show: boolean, ad: number, bd: number } }) {
-	return (
-		<p>hi from the widget</p>
-	)
-}

src/LanguageSelector.tsx

@@ -32,6 +32,7 @@ export default function LanguageSelector() {
 				>
 					<MenuItem value={'en'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇺🇸</MenuItem>
 					<MenuItem value={'es'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇪🇸</MenuItem>
+					<MenuItem value={'tr'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇹🇷</MenuItem>
 				</Select>
 			</FormControl>
 		</div>

src/NewUpdate.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+const { shell, ipcRenderer } = window.require('electron');
+import { useTranslation } from 'react-i18next';
+import React from 'react';
+import { Snackbar, Alert, Button, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+const NewUpdate = () => {
+    const { t } = useTranslation('translation', { keyPrefix: 'updateChecker' });
+    const [updateArgs, setUpdateArgs] = useState<null | NewUpdateArgs>(null);
+    const [snackbarOpen, setSnackbarOpen] = React.useState(true);
+    const handleSnackbarClose = () => setSnackbarOpen(false);
+
+    useEffect(() => {
+        ipcRenderer.send('updateAvailable');
+
+        ipcRenderer.on('updateAvailableResponse', (_event, args) => {
+            setUpdateArgs(args);
+            console.log('0gsafga')
+            ipcRenderer.removeAllListeners('updateAvailableResponse');
+        });
+    }, []);
+
+    const snackbarAction = (
+        <React.Fragment>
+          <Button color="secondary" size="small" onClick={() => shell.openExternal(updateArgs!.url!)}>
+            {t('viewRelease')}
+          </Button>
+          <IconButton
+            size="small"
+            aria-label="close"
+            color="inherit"
+            onClick={handleSnackbarClose}
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </React.Fragment>
+    );
+
+    return (
+        <div>
+            {updateArgs && (
+                <div>
+                    <Snackbar open={snackbarOpen} autoHideDuration={5000} onClose={handleSnackbarClose} action={snackbarAction}>
+                        <Alert onClose={handleSnackbarClose} severity="success" sx={{ width: '100%' }} action={snackbarAction}>
+                            {t('updateAvailable', { version: updateArgs.version })}
+                        </Alert>
+                    </Snackbar>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default NewUpdate;
+
+interface NewUpdateArgs {
+    version: string;
+    url: string;
+}

src/Settings.css

@@ -1,13 +0,0 @@
-.boxStyle {
-    /* background-color: 'background.paper'; set in sx property of Box tag */
-    transform: translate(-50%, -50%);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 74.6vw;
-    height: 74.6vh;
-    border: 2px solid #FFF;
-    box-shadow: 24px;
-    padding: 40px;
-    color: white;
-}

src/Settings.tsx

@@ -1,73 +0,0 @@
-import './Settings.css';
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Modal from '@mui/material/Modal';
-import SettingsIcon from '@mui/icons-material/Settings';
-import Checkbox from '@mui/material/Checkbox';
-import { useTranslation } from 'react-i18next';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormGroup from '@mui/material/FormGroup';
-import { Profiler } from 'react';
-import ComponentLoadTimeWidget from './ComponentLoadTimeWidget';
-
-export default function Settings() {
-	const [CLTW, setCLTW] = React.useState({ show: false, ad: 0, bd: 0 })
-	const onRender = (_id: string, _phase: string, actualDuration: number, baseDuration: number, _startTime: EpochTimeStamp, _commitTime: EpochTimeStamp) => {
-		if (!!window.localStorage.getItem('componentLoadTimes')) {
-			setCLTW({
-				show: true,
-				ad: actualDuration,
-				bd: baseDuration
-			})
-		}
-	}
-
-	const { t } = useTranslation('translation', { keyPrefix: 'settings' });
-	const [state, setState] = React.useState({
-		componentLoadTimes: !!window.localStorage.getItem('componentLoadTimes')
-	});
-	const { componentLoadTimes } = state;
-
-	const [open, setOpen] = React.useState(false);
-	const handleModalOpen = () => setOpen(true);
-	const handleModalClose = () => setOpen(false);
-
-	const handleButtonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-		setState({ ...state, [event.target.name]: event.target.checked });
-		switch (event.target.name) {
-			case 'componentLoadTimes':
-				return window.localStorage.setItem('componentLoadTimes', event.target.checked.toString())
-		}
-		console.log(state)
-	}
-
-	return (
-		<div>
-			<SettingsIcon onClick={handleModalOpen} color={'primary'} />
-			<Profiler onRender={onRender} id={'settings-modal'}>
-				<ComponentLoadTimeWidget state={CLTW} />
-				<Modal
-					open={open}
-					onClose={handleModalClose}
-					aria-labelledby="settings-modal-title"
-					aria-describedby="settings-modal-description"
-				>
-					<Box className={'boxStyle'} sx={{ bgcolor: 'background.paper' }}>
-						<FormGroup>
-							<Typography variant="h5" gutterBottom>
-								Debugging
-							</Typography>
-							<FormControlLabel
-								control={
-									<Checkbox checked={componentLoadTimes} onChange={handleButtonChange} name="componentLoadTimes" />
-								}
-								label={t('componentLoadTimes')}
-							/>
-						</FormGroup>
-					</Box>
-				</Modal>
-			</Profiler>
-		</div>
-	)
-}

src/SnowfallDecember.tsx

@@ -0,0 +1,6 @@
+import Snowfall from "react-snowfall";
+
+export default function SnowfallDecember() {
+    const time = new Date();
+    return (time.getMonth() === 11 || (time.getMonth() === 0 && time.getDate() <= 7)) && <Snowfall speed={[1.0, 2.0]} snowflakeCount={100} />;
+}

src/main.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import './main.css';
 import App from './App';
@@ -6,17 +5,20 @@ import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import enLocale from '../locales/en.json' assert { type: "json" };
 import esLocale from '../locales/es.json' assert { type: "json" };
+import trLocale from '../locales/tr.json' assert { type: "json" };
+import SnowfallDecember from './SnowfallDecember.js';
+import NewUpdate from './NewUpdate.js';
 
 i18n
-  .use(initReactI18next) // passes i18n down to react-i18next
+  .use(initReactI18next)
   .init({
     resources: {
       en: enLocale,
-      es: esLocale
+      es: esLocale,
+      tr: trLocale
     },
     lng: window.localStorage.getItem('lang') || 'en',
     fallbackLng: "en",
-
     interpolation: {
       escapeValue: false
     }
@@ -24,12 +26,9 @@ i18n
 
 const root = ReactDOM.createRoot(document.getElementById('root')!);
 root.render(
-  <React.StrictMode>
+  <div>
-      <App />
+    <SnowfallDecember />
-  </React.StrictMode>
+    <NewUpdate />
+    <App />
+  </div>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-// reportWebVitals();