feat: add semantic-release, update next.js and ui-forest

.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

.github/workflows/release.yml

@@ -6,30 +6,31 @@ on:
       - master
 
 jobs:
-  # semantic:
-  #   name: Semantic
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - name: Checkout
-  #       uses: actions/checkout@v3
-  #     - name: Setup Node.js
-  #       uses: actions/setup-node@v3
-  #       with:
-  #         node-version: 18.x
-  #     - name: Install dependencies
-  #       run: yarn install
-  #     - name: Install semantic-release extra plugins
-  #       run: yarn add -D @semantic-release/changelog @semantic-release/git
-  #     - name: Build
-  #       run: npm run build
-  #     - name: Release
-  #       env:
-  #         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  #       run: npx semantic-release
+  semantic:
+    name: Semantic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+      - name: Install dependencies
+        run: yarn install
+      - name: Install semantic-release extra plugins
+        run: yarn add -D @semantic-release/changelog @semantic-release/git
+      - name: Build
+        run: npm run build
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npx semantic-release
 
-  release-win:
-    name: Release win
+  release-windows:
+    name: Release Windows
     runs-on: windows-latest
+    needs: [semantic, release-linux]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -47,9 +48,9 @@ jobs:
         run: npm run publish-win-app
 
   release-linux:
-    name: Release win
+    name: Release Linux
     runs-on: ubuntu-latest
-    needs: [release-win]
+    needs: [semantic]
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"

.releaserc.json

@@ -0,0 +1,19 @@
+{
+	"plugins": [
+		"@semantic-release/commit-analyzer",
+		"@semantic-release/release-notes-generator",
+		[
+			"@semantic-release/changelog",
+			{
+				"changelogFile": "CHANGELOG.md"
+			}
+		],
+		[
+			"@semantic-release/git",
+			{
+				"assets": ["package.json", "CHANGELOG.md"],
+				"message": "chore(release): set `package.json` to ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+			}
+		]
+	]
+}

main/background.js

@@ -57,12 +57,15 @@ app.on('ready', async () => {
 		},
 		true,
 	);
+	splashWindow.on('ready-to-show', () => {
+		splashWindow.show();
+	});
 	if (isDev) {
 		await splashWindow.loadURL(`http://localhost:3000/splash`);
 	} else {
 		await splashWindow.loadURL('app://./splash.html');
 	}
-	splashWindow.show();
+
 	mainWindow = createWindow('main', {
 		// icon: join(__dirname, '../resources/icon.png'),
 		width: 1000,
@@ -77,25 +80,28 @@ app.on('ready', async () => {
 	});
 	// mainWindow.webContents.openDevTools();
 	mainWindow.removeMenu();
+	mainWindow.on('ready-to-show', () => {
+		setTimeout(() => {
+			splashWindow.close();
+			mainWindow.show();
+		}, 1000);
+	});
 	if (isDev) {
 		await mainWindow.loadURL(`http://localhost:3000/`);
 	} else {
 		await mainWindow.loadURL('app://./index.html');
 	}
 
-	setTimeout(() => {
-		splashWindow.close();
-		mainWindow.show();
-	}, 3000);
-
 	ipcMain.on('upscayl', async () => {
 		if (!flag && files.length > 0 && saveDirectory.length > 0) {
 			flag = true;
 			await upscayl(files[0], saveDirectory[0], mainWindow);
+			const fileName = path.parse(files[0]).name;
+			const fileExt = path.parse(files[0]).ext;
+			const outFile = `${saveDirectory[0]}/${fileName}_upscayl${fileExt}`;
 			flag = false;
 		}
 	});
-
 	ipcMain.on('window-min', () => {
 		mainWindow.minimize();
 	});
@@ -112,7 +118,6 @@ app.on('ready', async () => {
 			return false;
 		}
 	});
-
 	ipcMain.on('window-close', () => {
 		mainWindow.close();
 	});
@@ -123,7 +128,8 @@ app.on('ready', async () => {
 			properties: ['openFile', 'multiSelections'],
 		});
 		files = [...filePaths];
-		e.reply('open-files', filePaths);
+		const filesPathsPosix = filePaths.map((file) => file.split(path.sep).join(path.posix.sep));
+		e.reply('open-files', filesPathsPosix);
 	});
 	ipcMain.on('open-directory', async () => {
 		const { filePaths } = await dialog.showOpenDialog({

main/helpers/upscayl.js

@@ -13,7 +13,7 @@ const upscayl = (inputDir, outputDir, mainWindow) => {
 	} else {
 		const fileName = path.parse(inputDir).name;
 		const fileExt = path.parse(inputDir).ext;
-		outFile = outputDir + '/' + fileName + '_upscayl' + fileExt;
+		outFile = `${outputDir}/${fileName}_upscayl${fileExt}`;
 	}
 	const upscayl = spawn(
 		execPath('realesrgan'),

package.json

@@ -17,12 +17,11 @@
 		"dist:dmg": "electron-builder build -m dmg",
 		"dist:pkg": "electron-builder build -m pkg",
 		"dist:msi": "electron-builder build -w nsis",
-		"publish-app": "electron-builder -wl --publish always",
 		"publish-linux-app": "electron-builder -l --publish always",
 		"publish-win-app": "electron-builder -w --publish always",
 		"publish-mac-app": "electron-builder -m --publish always",
 		"postinstall": "electron-builder install-app-deps",
-		"release": "electron-builder -w"
+		"prepare": "husky install"
 	},
 	"dependencies": {
 		"classnames": "^2.3.2",
@@ -32,13 +31,18 @@
 		"electron-settings": "^4.0.2",
 		"electron-store": "^8.1.0",
 		"electron-updater": "^5.2.1",
-		"ui-forest": "^1.10.2"
+		"ui-forest": "^1.11.1"
 	},
 	"devDependencies": {
+		"@commitlint/cli": "^17.0.0",
+		"@commitlint/config-conventional": "^17.0.0",
+		"@semantic-release/changelog": "^6.0.2",
+		"@semantic-release/git": "^10.0.1",
 		"electron": "^20.1.0",
 		"electron-builder": "^23.3.3",
-		"next": "^12.2.5",
-		"next-transpile-modules": "^9.0.0",
+		"husky": "^8.0.1",
+		"next": "^13.1.1",
+		"next-transpile-modules": "^10.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	}

src/components/Sidebar/index.js

@@ -6,14 +6,19 @@ import { useRouter } from 'next/router';
 import { LangContext } from '../';
 import styles from './Sidebar.module.css';
 
+import logo from '../../../public/images/logo-big.svg';
+import upscaleImage from '../../../public/images/image.svg';
+import settingsImage from '../../../public/images/settings.svg';
+import helpImage from '../../../public/images/help.svg';
+
 const Sidebar = () => {
 	const [messages] = useContext(LangContext);
 	const router = useRouter();
 	return (
 		<div className={styles.sidebar}>
 			<div className={styles.sidebar__logo}>
 				<div className={styles.sidebar__item_image}>
-					<Image layout="fixed" src="/images/logo-big.svg" alt="logo" width={44} height={44} />
+					<Image src={logo} alt={messages.home.name} width={44} height={44} />
 				</div>
 				<div className={styles.sidebar__name}>{messages.home.name}</div>
 			</div>
@@ -24,22 +29,20 @@ const Sidebar = () => {
 							[styles.sidebar__itemActiv]: router.pathname == '/superResolution',
 						})}>
 						<Link href="/superResolution">
-							<a>
-								<div className={styles.sidebar__item_image}>
-									<Image layout="fixed" src="/images/image.svg" alt="Picture of the author" width={24} height={24} />
-								</div>
-								{messages.upscayl.title}
-							</a>
+							<div className={styles.sidebar__item_image}>
+								<Image src={upscaleImage} alt={messages.upscayl.title} width={24} height={24} />
+							</div>
+							{messages.upscayl.title}
 						</Link>
 					</li>
 					{/* <li className={styles.sidebar__item}>
 						<Link href="/">
-							<a>Испраление</a>
+							Испраление
 						</Link>
 					</li>
 					<li className={styles.sidebar__item}>
 						<Link href="/">
-							<a>Колоризация</a>
+							Колоризация
 						</Link>
 					</li> */}
 				</ul>
@@ -50,39 +53,33 @@ const Sidebar = () => {
 						[styles.sidebar__itemActiv]: router.pathname == '/settings',
 					})}>
 					<Link href="/settings">
-						<a>
-							<div className={styles.sidebar__item_image}>
-								<Image
-									className={styles.sidebar__item_image}
-									layout="fixed"
-									src="/images/settings.svg"
-									alt="Picture of the author"
-									width={24}
-									height={24}
-								/>
-							</div>
-							{messages.settings.title}
-						</a>
+						<div className={styles.sidebar__item_image}>
+							<Image
+								className={styles.sidebar__item_image}
+								src={settingsImage}
+								alt={messages.settings.title}
+								width={24}
+								height={24}
+							/>
+						</div>
+						{messages.settings.title}
 					</Link>
 				</li>
 				<li
 					className={classnames(styles.sidebar__item, {
 						[styles.sidebar__itemActiv]: router.pathname == '/help',
 					})}>
 					<Link href="/help">
-						<a>
-							<div className={styles.sidebar__item_image}>
-								<Image
-									className={styles.sidebar__item_image}
-									layout="fixed"
-									src="/images/help.svg"
-									alt="Picture of the author"
-									width={24}
-									height={24}
-								/>
-							</div>
-							{messages.help.title}
-						</a>
+						<div className={styles.sidebar__item_image}>
+							<Image
+								className={styles.sidebar__item_image}
+								src={helpImage}
+								alt={messages.help.title}
+								width={24}
+								height={24}
+							/>
+						</div>
+						{messages.help.title}
 					</Link>
 				</li>
 			</ul>

src/components/Splash/Splash.module.css

@@ -29,26 +29,20 @@
 	align-items: flex-end;
 }
 .dots {
-	margin-left: 4px;
 	display: flex;
 	align-items: center;
 }
 .dot {
-	width: 3px;
-	height: 3px;
-	border-radius: 2px;
-	background-color: var(--white);
+	color: var(--white);
 	animation: Loading 1s infinite;
 }
 .dot:nth-child(1) {
-	margin-right: 3px;
 	animation-delay: 0.33s;
 }
 .dot:nth-child(2) {
 	animation-delay: 0.66s;
 }
 .dot:nth-child(3) {
-	margin-left: 3px;
 	animation-delay: 0.99s;
 }
 @keyframes Loading {
@@ -70,3 +64,8 @@
 	font-size: 14px;
 	margin-top: 16px;
 }
+.splashImage {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}

src/components/Splash/index.js

@@ -1,27 +1,34 @@
 import Image from 'next/image';
 import styles from './Splash.module.css';
+import splashImage from '../../../public/images/splash.jpg';
+import logo from '../../../public/images/logo-big.svg';
 
 const Splash = (props) => {
 	const { messages, version } = props;
 	return (
 		<div className={styles.splash}>
 			<div className={styles.wrapper}>
 				<div className={styles.logo}>
-					<Image layout="fixed" src="/images/logo-big.svg" alt="logo" width={72} height={72} />
+					<Image src={logo} alt={messages.splash.title} width={72} height={72} />
 					<div className={styles.name}>{messages.splash.title}</div>
 				</div>
-				<div className={styles.copyright}>{messages.splash.author} 2023</div>
+				<div className={styles.copyright}>
+					&copy; {new Date().getFullYear()} {messages.splash.author}
+					<br />
+					{messages.splash.copyright}
+				</div>
+				<div className={styles.copyright}>{messages.splash.authorImage} Nikolay Vorobyev</div>
 				<div className={styles.loading}>
 					{messages.splash.loading}
 					<div className={styles.dots}>
-						<div className={styles.dot}></div>
-						<div className={styles.dot}></div>
-						<div className={styles.dot}></div>
+						<div className={styles.dot}>.</div>
+						<div className={styles.dot}>.</div>
+						<div className={styles.dot}>.</div>
 					</div>
 				</div>
 				<div className={styles.version}>v{version}</div>
 			</div>
-			<Image layout="fixed" src="/images/splash.jpg" alt="splash" width={430} height={500} />
+			<Image className={styles.splashImage} src={splashImage} alt="splash" />
 		</div>
 	);
 };