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.

2 files changed, 62 insertions, 0 deletions

diff --git a/web_src/js/features/citation.js b/web_src/js/features/citation.js
new file mode 100644
index 0000000000..01fcd95a1c
--- /dev/null
+++ b/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');
+  });
+}
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 2c93ca0342..e6a7c6dcd1 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/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();