arxiv preprint, authors, citation, starter repositories, browser warning

Author: kausko

docs/intro.mdx

@@ -16,19 +16,25 @@ ProvenanceWidgets is a Javascript library of UI control elements that track and
 - [Node.js](https://nodejs.org/en/download/) version 20.0 or above and npm version 10.0 or above:
   - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
 
+:::warning
+
+ProvenanceWidgets is not fully compatible with Safari. We recommended using a chromium-based browser or Firefox for the best experience.
+
+:::
+
 ## Quick Start
 
-For getting started quickly, clone one our starter code repositories:
+For getting started quickly, clone one of our starter code repositories:
 
 <Tabs groupId='framework'>
   <TabItem value='angular' label='Angular'>
     ```bash
-    git clone https://github.com/kausko/provenance-widgets-starter
+    git clone https://github.com/ProvenanceWidgets/provenance-widgets-starter
     ```
   </TabItem>
   <TabItem value='web-components' label='Web Components'>
   ```bash
-  git clone https://github.com/kausko/provenance-widgets-vanilla-starter
+  git clone https://github.com/ProvenanceWidgets/provenance-widgets-vanilla-starter
   ```
   </TabItem>
 </Tabs>

docusaurus.config.ts

@@ -96,7 +96,7 @@ const config: Config = {
               href: 'https://github.com/ProvenanceWidgets/ProvenanceWidgets',
             },
             {
-              label: 'arXiv',
+              label: 'arXiv Preprint',
               href: 'https://arxiv.org/abs/2407.17431',
             },
             {
@@ -115,6 +115,14 @@ const config: Config = {
             {
               label: 'Kaustubh Odak kaustubhodak1 [at] gmail.com',
               href: 'mailto:'
+            },
+            {
+              label: 'Mennatallah El-Assady menna.elassady [at] ai.ethz.ch',
+              href: 'mailto:'
+            },
+            {
+              label: 'Alex Endert endert [at] gatech.edu',
+              href: 'mailto:'
             }
           ],
         },

src/css/custom.css

@@ -51,4 +51,8 @@ web-provenance-slider.ngx-slider {
 
 header time {
   display: none;
+}
+
+.button--outline:hover {
+  color: var(--ifm-color-gray-900) !important;
 }

src/pages/index.tsx

@@ -4,6 +4,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
+import React from 'react';
 
 declare global {
   namespace JSX {
@@ -20,6 +21,24 @@ declare global {
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
+  const [isCopied, setIsCopied] = React.useState(false);
+
+  const copyToClipboard = () => {
+    const citation = `@article{narechania2024provenancewidgets,
+      title = {{ProvenanceWidgets}: {A Library of UI Control Elements to Track and Dynamically Overlay Analytic Provenance}},
+      shorttitle = {{ProvenanceWidgets}},
+      author = {{Narechania}, Arpit and {Odak}, Kaustubh and {El-Assady}, Mennatallah and {Endert}, Alex},
+      journal = {IEEE Transactions on Visualization and Computer Graphics (TVCG)},
+      doi = {10.48550/arXiv.2407.17431},
+      url = {https://doi.org/10.48550/arXiv.2407.17431},
+      year = {2024},
+      publisher = {IEEE}
+    }`
+    navigator.clipboard.writeText(citation);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+  }
+
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
@@ -45,6 +64,31 @@ function HomepageHeader() {
             to="https://arxiv.org/pdf/2407.17431">
             Read the Paper (VIS 2024)
           </Link>
+          <Link
+            className="button button--outline button--secondary button--lg"
+            style={{ color: 'var(--ifm-background-surface-color)', display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+            onClick={copyToClipboard}
+          >
+            Cite the Paper
+            {
+              isCopied ?
+              <svg 
+                viewBox="0 0 24 24" 
+                className="copyButtonSuccessIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
+                style={{ position: 'relative', width: '1.125rem', height: '1.125rem', transform: 'none', left: 0, top: 0, opacity: 1 }}
+              >
+                <path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
+              </svg>
+              :
+              <svg
+                viewBox="0 0 24 24"
+                className="copyButtonIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
+                style={{ position: 'relative', width: '1.125rem', height: '1.125rem' }}
+              >
+                <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>
+              </svg>
+            }
+          </Link>
         </div>
       </div>
     </header>