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:https://localhost:3000/splash`);
  } else {
  await splashWindow.loadURL('app:https://./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:https://localhost:3000/`);
  } else {
  await mainWindow.loadURL('app:https://./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>
  );
 };