feat(start): version link

scripts/build-html.cjs

@@ -1,4 +1,11 @@
-const { DEV, inputs, outputs, styles, scripts } = require('./const.cjs');
+const {
+    DEV,
+    github,
+    inputs,
+    outputs,
+    styles,
+    scripts,
+} = require('./const.cjs');
 const HTMLParser = require('node-html-parser');
 const { minify } = require('html-minifier-terser');
 const { html: terserOptions } = require('./terser.config.cjs');
@@ -14,12 +21,27 @@ const html = HTMLParser.parse(
 
 const i = DEV ? 0 : 1;
 const setCss = (id, /** @type {keyof styles} */ type) =>
-    html.getElementById(id)?.setAttribute('href', styles[type][i]).removeAttribute('id');
+    html
+        .getElementById(id)
+        ?.setAttribute('href', styles[type][i])
+        .removeAttribute('id');
 const setScript = (id, /** @type {keyof scripts} */ type) =>
-    html.getElementById(id)?.setAttribute('src', scripts[type][i]).removeAttribute('id');
-const setVersion = (version) => html.getElementById('version')?.set_content(version).removeAttribute('id');
+    html
+        .getElementById(id)
+        ?.setAttribute('src', scripts[type][i])
+        .removeAttribute('id');
 
-setVersion(version(true));
+const setVersion = () => {
+    const v = version();
+    html.getElementById('github')
+        ?.setAttribute('href', github)
+        .removeAttribute('id');
+    html.getElementById('version')
+        ?.set_content(v.text)
+        .setAttribute('href', github + (v.dirty ? '' : `/tree/${v.commit}`))
+        .removeAttribute('id');
+};
+setVersion();
 
 setCss('css-player', 'player');
 setCss('css-ccl', 'ccl');

scripts/const.cjs

@@ -6,6 +6,8 @@ const {
 
 const DEV = process.env.NODE_ENV !== 'production';
 
+const github = 'https://github.com/auioc/BilibiliLocalPlayerH5';
+
 const inputs = {
     html: src('html/index.html'),
 };
@@ -43,4 +45,4 @@ const scripts = {
     ],
 };
 
-module.exports = { DEV, inputs, outputs, styles, scripts };
+module.exports = { DEV, github, inputs, outputs, styles, scripts };

scripts/utils.cjs

@@ -3,13 +3,19 @@ const fs = require('fs');
 const _execSync = require('child_process').execSync;
 
 const execSync = (cmd) => _execSync(cmd).toString().trim();
-const commitHash = (short = false) => {
-    const hash = execSync('git rev-parse --verify HEAD');
-    return short ? hash.slice(0, 8) : hash;
-};
+const commitHash = () => execSync('git rev-parse --verify HEAD');
 const branch = () => execSync('git branch --show-current');
 const isDirty = () => execSync('git status --short').length !== 0;
-const version = (short = false) => `${branch()}@${commitHash(short)}${isDirty() ? '(dirty)' : ''}`;
+const version = () => {
+    const r = {
+        branch: branch(),
+        commit: commitHash(),
+        dirty: isDirty(),
+        text: '',
+    };
+    r.text = `${r.branch}@${r.commit.slice(0, 8)}${r.dirty ? '(dirty)' : ''}`;
+    return r;
+};
 
 const srcPath = (...p) => path.resolve(__dirname, '../src', ...p);
 const buildPath = (...p) => path.resolve(__dirname, '../build', ...p);
@@ -24,4 +30,11 @@ function readFile(file) {
     return fs.readFileSync(file, 'utf-8');
 }
 
-module.exports = { version, srcPath, buildPath, publicPath, readFile, writeFile };
+module.exports = {
+    version,
+    srcPath,
+    buildPath,
+    publicPath,
+    readFile,
+    writeFile,
+};

src/html/index.html

@@ -13,8 +13,9 @@
                     <th colspan="2">
                         BilibiliLocalPlayerH5
                         <div>
-                            <a href="https://github.com/auioc/BilibiliLocalPlayerH5">GitHub</a>&nbsp;&middot;&nbsp;
-                            <span id="version">{version}</span>
+                            <a id="github" target="_blank">GitHub</a>
+                            <span>&nbsp;&middot;&nbsp;</span>
+                            <a id="version" target="_blank">{version}</a>
                         </div>
                     </th>
                 </tr>

src/style/_start.scss

@@ -18,7 +18,7 @@ tr > td:nth-child(1) {
 th {
     padding: 0.5em;
 
-    & > div {
+    & > div * {
         font-weight: lighter;
         font-size: smaller;
         color: var(--border-color);