Copy citation file content, in APA and BibTex format, on repo home page (#19999)

Add feature to easily copy CITATION.cff content in APA and BibTex format.

web_src/js/features/citation.js

@@ -0,0 +1,60 @@
+import $ from 'jquery';
+
+const {pageData} = window.config;
+
+const initInputCitationValue = async ($citationCopyBibtex, $citationCopyApa) => {
+  const [{Cite, plugins}] = await Promise.all([
+    import(/* webpackChunkName: "citation-js-core" */'@citation-js/core'),
+    import(/* webpackChunkName: "citation-js-formats" */'@citation-js/plugin-software-formats'),
+    import(/* webpackChunkName: "citation-js-bibtex" */'@citation-js/plugin-bibtex'),
+    import(/* webpackChunkName: "citation-js-bibtex" */'@citation-js/plugin-csl'),
+  ]);
+  const {citationFileContent} = pageData;
+  const config = plugins.config.get('@bibtex');
+  config.constants.fieldTypes.doi = ['field', 'literal'];
+  config.constants.fieldTypes.version = ['field', 'literal'];
+  const citationFormatter = new Cite(citationFileContent);
+  const lang = document.documentElement.lang || 'en-US';
+  const apaOutput = citationFormatter.format('bibliography', {template: 'apa', lang});
+  const bibtexOutput = citationFormatter.format('bibtex', {lang});
+  $citationCopyBibtex.attr('data-text', bibtexOutput);
+  $citationCopyApa.attr('data-text', apaOutput);
+};
+
+export function initCitationFileCopyContent() {
+  const defaultCitationFormat = 'apa'; // apa or bibtex
+
+  if (!pageData.citationFileContent) return;
+
+  const $citationCopyApa = $('#citation-copy-apa');
+  const $citationCopyBibtex = $('#citation-copy-bibtex');
+  const $inputContent = $('#citation-copy-content');
+
+  if ((!$citationCopyApa.length && !$citationCopyBibtex.length) || !$inputContent.length) return;
+  const updateUi = () => {
+    const isBibtex = (localStorage.getItem('citation-copy-format') || defaultCitationFormat) === 'bibtex';
+    const copyContent = (isBibtex ? $citationCopyBibtex : $citationCopyApa).attr('data-text');
+
+    $inputContent.val(copyContent);
+    $citationCopyBibtex.toggleClass('primary', isBibtex);
+    $citationCopyApa.toggleClass('primary', !isBibtex);
+  };
+  initInputCitationValue($citationCopyApa, $citationCopyBibtex).then(updateUi);
+
+  $citationCopyApa.on('click', () => {
+    localStorage.setItem('citation-copy-format', 'apa');
+    updateUi();
+  });
+  $citationCopyBibtex.on('click', () => {
+    localStorage.setItem('citation-copy-format', 'bibtex');
+    updateUi();
+  });
+
+  $inputContent.on('click', () => {
+    $inputContent.select();
+  });
+
+  $('#cite-repo-button').on('click', () => {
+    $('#cite-repo-modal').modal('show');
+  });
+}

web_src/js/features/repo-legacy.js

@@ -21,6 +21,7 @@ import {
   initRepoCommonFilterSearchDropdown,
   initRepoCommonLanguageStats,
 } from './repo-common.js';
+import {initCitationFileCopyContent} from './citation.js';
 import {initCompLabelEdit} from './comp/LabelEdit.js';
 import {initRepoDiffConversationNav} from './repo-diff.js';
 import attachTribute from './tribute.js';
@@ -505,6 +506,7 @@ export function initRepository() {
   }
 
   initRepoCloneLink();
+  initCitationFileCopyContent();
   initRepoCommonLanguageStats();
   initRepoSettingBranches();
 

web_src/less/_repository.less

@@ -227,7 +227,7 @@
       border-right: none;
     }
 
-    #download-btn {
+    #more-btn {
       border-left: none;
     }
 
@@ -2468,6 +2468,56 @@
 
 // End of .repository
 
+#cite-repo-modal {
+  #citation-panel {
+    width: 500px;
+
+    @media @mediaSm {
+      width: 100%;
+    }
+
+    input {
+      border-radius: 0;
+      padding: 5px 10px;
+      width: 50%;
+      line-height: 1.4;
+    }
+
+    .citation.button {
+      font-size: 13px;
+      padding: 7.5px 5px;
+    }
+
+    #citation-copy-content {
+      border-radius: 0;
+      padding: 5px 10px;
+      font-size: 1.2em;
+      line-height: 1.4;
+    }
+
+    #citation-copy-apa,
+    #citation-copy-bibtex {
+      border-right: none;
+    }
+
+    #goto-citation-btn {
+      border-left: none;
+    }
+
+    >:first-child {
+      border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
+    }
+
+    >:last-child {
+      border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
+    }
+
+    .icon.button {
+      padding: 0 10px;
+    }
+  }
+}
+
 &.user-cards {
   .list {
     padding: 0;