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,28 +0,0 @@
-version: 2.1
-jobs:
-  build_windows:
-    docker:
-      - image: electronuserland/builder:wine
-    steps:
-      - checkout
-      - run: yarn
-      - run: yarn build-electron-win
-  build_linux:
-    docker:
-      - image: node:lts
-    steps:
-      - checkout
-      - run: yarn
-      - run: yarn build-electron-linux
-
-workflows:
-  build:
-    jobs:
-      - hold:
-          type: approval
-      - build_windows:
-          requires:
-            - hold
-      - build_linux:
-          requires:
-            - hold

.eslintrc.cjs

@@ -13,8 +13,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
-    tsconfigRootDir: __dirname,
-    project: '.swcrc'
+    tsconfigRootDir: __dirname
   },
   plugins: ['react-refresh'],
   rules: {

.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,32 +1,41 @@
 import * as path from 'node:path'
-import { app, BrowserWindow, dialog, ipcMain } from 'electron';
-import * as isDev from 'electron-is-dev';
+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,
 		autoHideMenuBar: true,
 		title: 'sern',
 	});
-	if (isDev) {
-		mainWindow.loadURL('http://localhost:5173');
-	} else {
+	if (app.isPackaged) {
 		mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
+	} else {
+		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) {
@@ -123,22 +132,7 @@ app.on('activate', () => {
 	}
 });
 
-let currentOS: string
-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 currentOS = getPlatform()
 
 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,10 @@
     <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">
   </head>
   <body>
     <div id="root"></div>

locales/en.json

@@ -29,6 +29,10 @@
       "COMMENT_FOR_TRANSLATOR_2": "the next string is used to change the text 'with' in the sentence 'with <package manager>'",
       "with": "with"
     },
+    "updateChecker": {
+      "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",
       "web": "front page",

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",
-    "electron-build": "swc ./electron/index.ts -d ./dist",
+    "start": "vite",
+    "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",
@@ -26,11 +27,11 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.4",
     "colorette": "^2.0.20",
-    "electron-is-dev": "^2.0.0",
     "i18next": "^23.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.1.2"
+    "react-i18next": "^13.1.2",
+    "react-snowfall": "^1.2.1"
   },
   "devDependencies": {
     "@swc/cli": "^0.1.62",
@@ -40,8 +41,9 @@
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "electron": "^25.2.0",
-    "electron-builder": "^24.4.0",
+    "concurrently": "^8.2.2",
+    "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",
@@ -50,10 +52,11 @@
     "vite": "^4.4.0"
   },
   "build": {
-    "extends": null,
+    "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.css

@@ -1,11 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
 
-/* @font-face {
-	font-family: 'Classic Console Neue';
-	src: local('Classic Console Neue'),
-		url('https://fonts.srizan.dev/clacon2.ttf') format('truetype');
-} */
-
 .titleHeader {
 	color: #4af626;
 	font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
@@ -17,6 +11,5 @@
 	gap: 30px;
 	padding: 20px;
 	align-items: center;
-	display: 'grid';
 	grid-template-columns: repeat(2, 1fr);
 }

src/InitModal.tsx

@@ -49,7 +49,7 @@ export default function InitModal() {
 
   const [templates, setTemplates] = React.useState<Array<TemplateList>>([]);
   React.useEffect(() => {
-    fetch('https://raw.githubusercontent.com/sern-handler/create-bot/main/metadata/templateChoices.jso')
+    fetch('https://raw.githubusercontent.com/sern-handler/create-bot/main/metadata/templateChoices.json')
       .then((res) => res.json())
       .then((data) => {
         setTemplates(data as TemplateList[]);

src/LanguageSelector.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
+
 .languageSelector {
     position: absolute;
     top: 15px;

src/LanguageSelector.tsx

@@ -25,12 +25,14 @@ export default function LanguageSelector() {
 						height: '40px',
 						textAlign: 'center',
 						// this fixes a little text selection gap that appears in a
-						// few pixels outside the outer part of the selection "square"
-						cursor: 'pointer'
+						// few pixels outside the outer part of the selection outline
+						cursor: 'pointer',
+						fontFamily: 'Noto Color Emoji'
 					}}
 				>
-					<MenuItem value={'en'} className={'menuItems'}>🇺🇸</MenuItem>
-					<MenuItem value={'es'} className={'menuItems'}>🇪🇸</MenuItem>
+					<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/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>
-      <App />
-  </React.StrictMode>
-);
-
-// 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();
+  <div>
+    <SnowfallDecember />
+    <NewUpdate />
+    <App />
+  </div>
+);