Add links to npm in package.json file view

Author: silverwind

web_src/css/base.css

@@ -1620,6 +1620,12 @@ a.ui.active.label:hover {
   width: 100%;
 }
 
+/* don't change link color in highlighted code */
+.code-view .lines-code a,
+.code-view .lines-code a:hover {
+  color: inherit;
+}
+
 .ui.primary.label,
 .ui.primary.labels .label,
 .ui.ui.ui.primary.label {

web_src/js/features/copycontent.js

@@ -1,6 +1,7 @@
 import {clippie} from 'clippie';
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {convertImage} from '../utils.js';
+import {getFileViewContent} from '../utils/misc.js';
 import {GET} from '../modules/fetch.js';
 
 const {i18n} = window.config;
@@ -36,8 +37,7 @@ export function initCopyContent() {
         btn.classList.remove('is-loading', 'small-loading-icon');
       }
     } else { // text, read from DOM
-      const lineEls = document.querySelectorAll('.file-view .lines-code');
-      content = Array.from(lineEls, (el) => el.textContent).join('');
+      content = getFileViewContent();
     }
 
     // try copy original first, if that fails and it's an image, convert it to png

web_src/js/features/repo-code.js

@@ -4,6 +4,7 @@ import {invertFileFolding} from './file-fold.js';
 import {createTippy} from '../modules/tippy.js';
 import {clippie} from 'clippie';
 import {toAbsoluteUrl} from '../utils.js';
+import {getFileViewContent, getFileViewFileName} from '../utils/misc.js';
 
 export const singleAnchorRegex = /^#(L|n)([1-9][0-9]*)$/;
 export const rangeAnchorRegex = /^#(L[1-9][0-9]*)-(L[1-9][0-9]*)$/;
@@ -120,6 +121,44 @@ function showLineButton() {
   });
 }
 
+function initFilePostProcess() {
+  const fileName = getFileViewFileName();
+  if (fileName === 'package.json') {
+    let data;
+    try {
+      data = JSON.parse(getFileViewContent());
+    } catch {
+      return;
+    }
+
+    const packages = new Set();
+    for (const key of [
+      'dependencies',
+      'devDependencies',
+      'optionalDependencies',
+      'peerDependencies',
+    ]) {
+      for (const packageName of Object.keys(data?.[key] || {})) {
+        packages.add(packageName);
+      }
+    }
+
+    // match chroma NameTag token to detect JSON object keys
+    for (const el of document.querySelectorAll('.code-inner .nt')) {
+      const jsonKey = el.textContent.replace(/^"(.*)"$/, '$1');
+      if (packages.has(jsonKey)) {
+        const a = document.createElement('a');
+        a.textContent = jsonKey;
+        a.href = `https://www.npmjs.com/package/${jsonKey}`;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer nofollow';
+        el.textContent = '';
+        el.append('"', a, '"');
+      }
+    }
+  }
+}
+
 export function initRepoCodeView() {
   if ($('.code-view .lines-num').length > 0) {
     $(document).on('click', '.lines-num span', function (e) {
@@ -197,4 +236,5 @@ export function initRepoCodeView() {
   $(document).on('click', '.copy-line-permalink', async ({currentTarget}) => {
     await clippie(toAbsoluteUrl(currentTarget.getAttribute('data-url')));
   });
+  initFilePostProcess();
 }

web_src/js/utils/misc.js

@@ -0,0 +1,8 @@
+export function getFileViewFileName() {
+  return document.querySelector('.repo-path .active')?.textContent?.trim();
+}
+
+export function getFileViewContent() {
+  const lineEls = document.querySelectorAll('.file-view .lines-code');
+  return Array.from(lineEls, (el) => el.textContent).join('');
+}