New: Show package versions in About OpenComic

Author: ollm

CHANGELOG.md

@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Copy image to clipboard [`bb96cef`](https://github.com/ollm/OpenComic/commit/bb96cef97ee1783fc27f3600548a91bb37a96045)
 - OPDS support [`b72f32f`](https://github.com/ollm/OpenComic/commit/b72f32f2445b90f13f5e2cc45865c2c17a72af82)
 - Button to enable/disable full screen from the more options menu [`5d2ac36`](https://github.com/ollm/OpenComic/commit/5d2ac367c61da97d04cd67526470fb7885c1b3bf)
+- Show package versions in About OpenComic
 
 ##### 🐛 Bug Fixes
 

package-lock.json

@@ -105,7 +105,6 @@
 		"shosho": "^1.4.3",
 		"ssh2-sftp-client": "github:theophilusx/ssh2-sftp-client",
 		"tar-fs": "^3.0.8",
-		"unzipper": "^0.12.3",
 		"webdav": "^5.7.1"
 	},
 	"devDependencies": {

package.json

@@ -1029,15 +1029,13 @@ function generateAppMenu(force = false)
 	}
 }
 
-var about = false;
-
 function showAboutWindow()
 {
-	var about = new electronRemote.BrowserWindow({
+	const about = new electronRemote.BrowserWindow({
 		show: false,
 		title: language.menu.help.about,
-		width: 460,
-		height: 320,
+		width: 900,
+		height: 600,
 		minWidth: 380,
 		minHeight: 260,
 		//resizable: false,
@@ -1050,10 +1048,39 @@ function showAboutWindow()
 		},
 	});
 
+	const packageLock = JSON.parse(readFileApp('package-lock.json'));
+	const highlight = [
+		'electron',
+		'sharp',
+		'pdfjs-dist',
+	];
+
+	const allDependencies = {..._package.dependencies, ..._package.devDependencies};
+	const dependencies = [];
+
+	for(let key in allDependencies)
+	{
+		allDependencies[key] = packageLock.packages[key]?.version ?? packageLock.packages['node_modules/'+key]?.version ?? allDependencies[key];
+
+		if(!highlight.includes(key))
+			dependencies.push({package: key, version: allDependencies[key]});
+	}
+
+	const highlightDependencies = [];
+
+	for(let i = 0, len = highlight.length; i < len; i++)
+	{
+		const key = highlight[i];
+		highlightDependencies.push({package: key, version: allDependencies[key]});
+	}
+
+	handlebarsContext.highlightDependencies = highlightDependencies;
+	handlebarsContext.dependencies = dependencies;
+
 	about.removeMenu();
 	about.setMenuBarVisibility(false);
 
-	var url = require('url');
+	const url = require('url');
 
 	about.loadURL(url.format({
 		pathname: p.join(appDir, './templates/about.html'),

scripts/opencomic.js

@@ -87,6 +87,28 @@
 	line-height: 20px;
 }
 
+.about-packages
+{
+	max-width: 800px;
+	line-height: 24px;
+}
+
+.about-packages > div
+{
+	height: 20px;
+}
+
+.about-packages > span
+{
+	margin: 0px 4px;
+	white-space: nowrap;
+}
+
+.about-packages > span span
+{
+	opacity: 0.6;
+}
+
 .night-mode
 {
 	background-color: #242a30;
@@ -107,6 +129,11 @@
 	color: rgba(255, 255, 255, 1);
 }
 
+.night-mode .about-packages
+{
+	color: rgba(255, 255, 255, 1);
+}
+
 a
 {
 	color: #1976D2 !important;
@@ -142,6 +169,18 @@
 			{{#each language.about.translators}}{{#unless @first}}{{#if @last}} {{@root.language.global.and}} {{else}}, {{/if}}{{/unless}}
 			<a href="javascript:void(0);" onclick="shell.openExternal('{{#if url}}{{url}}{{else}}mailto:{{email}}{{/if}}')">{{name}}</a>
 			{{/each}}
+			<br>
+		</div>
+		<br><br>
+		<div class="about-packages">
+			{{#each highlightDependencies}}
+			<span><a href="javascript:void(0);" onclick="shell.openExternal('https://www.npmjs.com/package/{{package}}')">{{package}}</a> <span>v{{version}}</span></span>
+			{{/each}}
+			<div></div>
+			{{#each dependencies}}
+			<span><a href="javascript:void(0);" onclick="shell.openExternal('https://www.npmjs.com/package/{{package}}')">{{package}}</a> <span>v{{version}}</span></span>
+			{{/each}}
+			<br><br>
 		</div>
 	</div>
 </div>