about: expanded versioning data

i18n/settings/en.json

@@ -1,11 +1,13 @@
 {
+    "deputy.about.version": "v$1 ($2)",
     "deputy.about": "About",
     "deputy.about.homepage": "Homepage",
     "deputy.about.openSource": "Source",
     "deputy.about.contact": "Contact",
     "deputy.about.credit": "Deputy was made with the help of the English Wikipedia Copyright Cleanup WikiProject and the Wikimedia Foundation.",
     "deputy.about.license": "Deputy is licensed under the <a href=\"$1\">Apache License 2.0</a>. The source code for Deputy is available on <a href=\"$2\">GitHub</a>, and is free for everyone to view and suggest changes.",
     "deputy.about.thirdParty": "Deputy is bundled with third party libraries to make development easier. All libraries have been vetted for user security and license compatibility. For more information, see the <a href=\"$1\">\"Licensing\"</a> section on Deputy's README.",
+    "deputy.about.buildInfo": "Deputy v$1 ($2), committed $3.",
     "deputy.about.footer": "Made with love, coffee, and the tears of copyright editors.",
 
     "deputy.settings.portlet": "Deputy preferences",

package.json

@@ -87,6 +87,7 @@
         "@chlodalejandro/parsoid": "2.0.0-f08be30",
         "broadcastchannel-polyfill": "^1.0.1",
         "idb": "^7.1.0",
+        "rollup-plugin-git-info": "^1.0.0",
         "tsx-dom": "^1.4.0"
     }
 }

rollup.config.js

@@ -4,6 +4,7 @@ import sourcemaps from 'rollup-plugin-sourcemaps';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
+import gitInfo from 'rollup-plugin-git-info';
 import license from 'rollup-plugin-node-license';
 import { createFilter } from 'rollup-pluginutils';
 import serve from 'rollup-plugin-serve';
@@ -91,11 +92,16 @@ function getPlugins() {
 		commonjs(),
 		// Handles Node-like resolution
 		nodeResolve( { browser: false } ),
+		gitInfo( {
+			updateVersion: false,
+			versionFormat: '[version]+g[abbrevHash]'
+		} ),
 		// Transpiles TypeScript
 		typescript(),
 		// Allows JSON imports (i18n files)
 		json( {
-			preferConst: true
+			preferConst: true,
+			exclude: [ 'package.json' ]
 		} ),
 		// Transform CSS to standard JS strings
 		cssString(),

src/DeputyVersion.ts

@@ -1,4 +1,5 @@
-import { version } from '../package.json';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 /**
  * Deputy's current version, exported as a string.
  *
@@ -11,6 +12,12 @@ import { version } from '../package.json';
  * This ensures that the version is available, even if the core is not loaded.
  * It also keeps standalone versions lightweight to avoid too much additional code.
  */
-export default version;
-
-export const deputyVersion = version;
+export {
+	gitAbbrevHash,
+	gitBranch,
+	gitCommitHash,
+	gitDate,
+	gitVersion,
+	version as deputyVersion,
+	version as default
+} from '../package.json';

src/css/settings.css

@@ -35,27 +35,37 @@
 	flex: 1;
 }
 
-.deputy-about > :nth-child(2) > :first-child {
+.deputy-about > :nth-child(2) > :first-child > * {
+	display: inline;
+}
+
+.deputy-about > :nth-child(2) > :first-child > :first-child {
 	font-weight: bold;
 	font-size: 2em;
 }
 
+.deputy-about > :nth-child(2) > :first-child > :nth-child(2) {
+	color: gray;
+	vertical-align: bottom;
+	margin-left: 0.4em;
+}
+
 .deputy-about > :nth-child(2) > :not(:first-child) {
 	margin-top: 0.5em;
 }
 
-.ltr .deputy-about > :nth-child(2) > :last-child > :not(:last-child) {
+.ltr .deputy-about + div > :not(:last-child) {
 	margin-right: 0.5em;
 }
 
-.rtl .deputy-about > :nth-child(2) > :last-child > :not(:last-child) {
+.rtl .deputy-about + div > :not(:last-child) {
 	margin-left: 0.5em;
 }
 
-.ltr .deputy-about > :nth-child(2) > :last-child {
+.ltr .deputy-about + div {
 	text-align: right;
 }
 
-.rtl .deputy-about > :nth-child(2) > :last-child {
+.rtl .deputy-about + div {
 	text-align: left;
 }

src/ui/config/ConfigurationAboutTabPanel.tsx

@@ -1,6 +1,12 @@
 import { h } from 'tsx-dom';
 import '../../types';
 import unwrapWidget from '../../util/unwrapWidget';
+import deputyVersion, {
+	gitAbbrevHash,
+	gitDate,
+	gitBranch,
+	gitVersion
+} from '../../DeputyVersion';
 
 let InternalConfigurationGroupTabPanel: any;
 
@@ -32,30 +38,37 @@ function initConfigurationGroupTabPanel() {
 						ConfigurationGroupTabPanel.logoUrl
 					} alt="Deputy logo"/></div>
 					<div style="flex: 1">
-						<div>{ mw.msg( 'deputy.name' ) }</div>
-						<div>{ mw.msg( 'deputy.description' ) }</div>
 						<div>
-							<a href="https://w.wiki/5k$q" target="_blank">{
-								unwrapWidget( new OO.ui.ButtonWidget( {
-									label: mw.msg( 'deputy.about.homepage' ),
-									flags: [ 'progressive' ]
-								} ) )
-							}</a>
-							<a href="https://github.com/ChlodAlejandro/deputy" target="_blank">{
-								unwrapWidget( new OO.ui.ButtonWidget( {
-									label: mw.msg( 'deputy.about.openSource' ),
-									flags: [ 'progressive' ]
-								} ) )
-							}</a>
-							<a href="https://w.wiki/5k$p" target="_blank">{
-								unwrapWidget( new OO.ui.ButtonWidget( {
-									label: mw.msg( 'deputy.about.contact' ),
-									flags: [ 'progressive' ]
-								} ) )
-							}</a>
+							<div>{ mw.msg( 'deputy.name' ) }</div>
+							<div>{ mw.msg(
+								'deputy.about.version',
+								deputyVersion,
+								gitAbbrevHash
+							) }</div>
 						</div>
+						<div>{ mw.msg( 'deputy.description' ) }</div>
 					</div>
 				</div>
+				<div>
+					<a href="https://w.wiki/5k$q" target="_blank">{
+						unwrapWidget( new OO.ui.ButtonWidget( {
+							label: mw.msg( 'deputy.about.homepage' ),
+							flags: [ 'progressive' ]
+						} ) )
+					}</a>
+					<a href="https://github.com/ChlodAlejandro/deputy" target="_blank">{
+						unwrapWidget( new OO.ui.ButtonWidget( {
+							label: mw.msg( 'deputy.about.openSource' ),
+							flags: [ 'progressive' ]
+						} ) )
+					}</a>
+					<a href="https://w.wiki/5k$p" target="_blank">{
+						unwrapWidget( new OO.ui.ButtonWidget( {
+							label: mw.msg( 'deputy.about.contact' ),
+							flags: [ 'progressive' ]
+						} ) )
+					}</a>
+				</div>
 				<p dangerouslySetInnerHTML={ mw.msg( 'deputy.about.credit' ) }/>
 				<p dangerouslySetInnerHTML={ mw.msg( 'deputy.about.license',
 					'https://www.apache.org/licenses/LICENSE-2.0',
@@ -64,6 +77,15 @@ function initConfigurationGroupTabPanel() {
 				<p dangerouslySetInnerHTML={ mw.msg( 'deputy.about.thirdParty',
 					'https://github.com/ChlodAlejandro/deputy#licensing'
 				) }/>
+				<p
+					style={{ fontSize: '0.9em', color: 'darkgray' }}
+					dangerouslySetInnerHTML={ mw.msg(
+						'deputy.about.buildInfo',
+						gitVersion as string,
+						gitBranch as string,
+						new Date( gitDate as string ).toLocaleString()
+					) }
+				/>
 				<p
 					style={{ fontSize: '0.9em', color: 'darkgray' }}
 					dangerouslySetInnerHTML={ mw.msg( 'deputy.about.footer' ) }