feat(cite): surface AiiDA citation papers on landing, acknowledgements, and README

README.md

@@ -26,3 +26,11 @@ npm run preview
 ## Deployment
 
 The site is deployed to Cloudflare Pages.
+
+## How to cite AiiDA
+
+If AiiDA helped your research, please cite the relevant papers below.
+
+- **Main paper** — S.P. Huber et al., _Scientific Data_ **7**, 300 (2020). [doi:10.1038/s41597-020-00638-4](https://doi.org/10.1038/s41597-020-00638-4)
+- **Engine paper** — M. Uhrin et al., _Computational Materials Science_ **187**, 110086 (2021). [doi:10.1016/j.commatsci.2020.110086](https://doi.org/10.1016/j.commatsci.2020.110086)
+- **First paper (ADES model)** — G. Pizzi et al., _Computational Materials Science_ **111**, 218–230 (2016). [doi:10.1016/j.commatsci.2015.09.013](https://doi.org/10.1016/j.commatsci.2015.09.013)

src/components/Cite.tsx

@@ -0,0 +1,143 @@
+import {type ReactNode, useState} from 'react';
+
+type Paper = {
+  label: string;
+  authors: string;
+  venue: string;
+  year: string;
+  doi: string;
+  bibtex: string;
+};
+
+const PAPERS: Paper[] = [
+  {
+    label: 'Main paper',
+    authors: 'S.P. Huber et al.',
+    venue: 'Scientific Data 7, 300',
+    year: '2020',
+    doi: '10.1038/s41597-020-00638-4',
+    bibtex: `@article{huber2020aiida,
+  title={AiiDA 1.0, a scalable computational infrastructure for automated reproducible workflows and data provenance},
+  author={Huber, Sebastiaan P. and Zoupanos, Spyros and Uhrin, Martin and Talirz, Leopold and Kahle, Leonid and H{\\"a}user, Rico and Hofmann, Nicola and Yakutovich, Aliaksandr V. and Andersen, Casper W. and Ramirez, Francisco F. and Adorf, Carl S. and Gargiulo, Fernando and Kumbhar, Snehal and Passaro, Elsa and Johnston, Conrad and Merkys, Andrius and Cepellotti, Andrea and Mounet, Nicolas and Marzari, Nicola and Kozinsky, Boris and Pizzi, Giovanni},
+  journal={Scientific Data},
+  volume={7},
+  pages={300},
+  year={2020},
+  doi={10.1038/s41597-020-00638-4}
+}`,
+  },
+  {
+    label: 'Engine paper',
+    authors: 'M. Uhrin et al.',
+    venue: 'Comp. Mat. Sci. 187, 110086',
+    year: '2021',
+    doi: '10.1016/j.commatsci.2020.110086',
+    bibtex: `@article{uhrin2021workflows,
+  title={Workflows in AiiDA: Engineering a high-throughput, event-based engine for robust and modular computational workflows},
+  author={Uhrin, Martin and Huber, Sebastiaan P. and Yu, Jusong and Marzari, Nicola and Pizzi, Giovanni},
+  journal={Computational Materials Science},
+  volume={187},
+  pages={110086},
+  year={2021},
+  doi={10.1016/j.commatsci.2020.110086}
+}`,
+  },
+  {
+    label: 'First paper (ADES model)',
+    authors: 'G. Pizzi et al.',
+    venue: 'Comp. Mat. Sci. 111, 218-230',
+    year: '2016',
+    doi: '10.1016/j.commatsci.2015.09.013',
+    bibtex: `@article{pizzi2016aiida,
+  title={AiiDA: automated interactive infrastructure and database for computational science},
+  author={Pizzi, Giovanni and Cepellotti, Andrea and Sabatini, Riccardo and Marzari, Nicola and Kozinsky, Boris},
+  journal={Computational Materials Science},
+  volume={111},
+  pages={218--230},
+  year={2016},
+  doi={10.1016/j.commatsci.2015.09.013}
+}`,
+  },
+];
+
+const ALL_BIBTEX = PAPERS.map(p => p.bibtex).join('\n\n');
+
+type CopyState = 'idle' | 'copied' | 'error';
+
+function CopyButton({text, label}: {text: string; label: string}): ReactNode {
+  const [state, setState] = useState<CopyState>('idle');
+
+  const onClick = async () => {
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.setAttribute('readonly', '');
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        ta.style.pointerEvents = 'none';
+        document.body.appendChild(ta);
+        ta.select();
+        ta.setSelectionRange(0, ta.value.length);
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+      }
+      setState('copied');
+      window.setTimeout(() => setState('idle'), 2000);
+    } catch {
+      setState('error');
+      window.setTimeout(() => setState('idle'), 2000);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className={`cite-copy-btn cite-copy-btn--${state}`}
+      onClick={onClick}
+      aria-label={label}
+    >
+      <span aria-live="polite">
+        {state === 'copied' ? 'Copied!' : state === 'error' ? 'Copy failed' : label}
+      </span>
+    </button>
+  );
+}
+
+export default function Cite({variant = 'section'}: {variant?: 'section' | 'panel'} = {}): ReactNode {
+  const Wrapper = variant === 'section' ? 'section' : 'div';
+  const wrapperClass = variant === 'section' ? 'cite-section' : 'cite-panel';
+  const revealAttrs = variant === 'section' ? {'data-reveal': true} : {};
+
+  return (
+    <Wrapper className={wrapperClass} {...revealAttrs}>
+      <div className="cite-inner">
+        <header className="cite-header">
+          <h2>How to cite AiiDA</h2>
+          <p>If AiiDA helped your research, please cite the papers below.</p>
+        </header>
+
+        <ul className="cite-papers">
+          {PAPERS.map(p => (
+            <li key={p.doi} className="cite-paper">
+              <div className="cite-paper-label">{p.label}</div>
+              <a className="cite-paper-link" href={`https://doi.org/${p.doi}`} target="_blank" rel="noopener noreferrer">
+                <span className="cite-paper-citation">
+                  {p.authors}, <em>{p.venue}</em> ({p.year})
+                </span>
+                <span className="cite-paper-doi">doi:{p.doi}</span>
+              </a>
+              <CopyButton text={p.bibtex} label="Copy BibTeX" />
+            </li>
+          ))}
+        </ul>
+
+        <div className="cite-actions">
+          <CopyButton text={ALL_BIBTEX} label="Copy all (BibTeX)" />
+        </div>
+      </div>
+    </Wrapper>
+  );
+}

src/components/LandingPage.tsx

@@ -1,6 +1,7 @@
 import {type ReactNode, type CSSProperties, useState, useRef, useEffect, useCallback} from 'react';
 import verdiCliData from '../data/verdi-cli.json';
 import pypiStats from '../data/pypi-stats.json';
+import Cite from './Cite';
 
 
 const base = import.meta.env.BASE_URL?.replace(/\/$/, '') || '';
@@ -4737,6 +4738,7 @@ export default function LandingPage({news = []}: {news?: NewsItem[]}): ReactNode
       <Supporters />
       <LatestNews items={news} />
       <Testimonials />
+      <Cite />
     </main>
   );
 }

src/pages/acknowledgements.astro

@@ -1,6 +1,8 @@
 ---
 import '../styles/pages.css';
+import '../styles/cite.css';
 import Layout from '../layouts/Layout.astro';
+import Cite from '../components/Cite';
 
 const base = import.meta.env.BASE_URL?.replace(/\/$/, '') || '';
 
@@ -43,5 +45,7 @@ const sponsors = [
         );
       })}
     </div>
+
+    <Cite client:visible variant="panel" />
   </main>
 </Layout>

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/landing.css';
+import '../styles/cite.css';
 import Layout from '../layouts/Layout.astro';
 import LandingPage from '../components/LandingPage';
 import { getCollection } from 'astro:content';

src/styles/cite.css

@@ -0,0 +1,185 @@
+/* ===== CITATION BLOCK (How to cite AiiDA) ===== */
+
+.cite-section {
+  padding: 4rem 2rem;
+  background: var(--color-bg-tinted);
+  border-top: 1px solid var(--color-border-light);
+}
+
+.cite-panel {
+  margin: 3rem auto 0;
+  padding: 2.5rem 2rem;
+  background: var(--color-bg-tinted);
+  border: 1px solid var(--color-border-light);
+  border-radius: 12px;
+}
+
+.cite-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.cite-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.cite-header h2 {
+  font-size: 1.875rem;
+  margin: 0 0 0.5rem;
+  color: var(--color-heading-accent);
+}
+
+.cite-header p {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: 1rem;
+}
+
+.cite-papers {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 2rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.cite-paper {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border-light);
+  border-radius: 10px;
+  padding: 1.1rem 1.1rem 1rem;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+}
+
+.cite-paper:hover {
+  border-color: var(--color-border-accent);
+  box-shadow: 0 4px 14px var(--color-shadow-accent);
+  transform: translateY(-2px);
+}
+
+.cite-paper-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-primary);
+  margin-bottom: 0.5rem;
+}
+
+.cite-paper-link {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  text-decoration: none;
+  color: var(--color-text);
+  flex: 1;
+  margin-bottom: 0.85rem;
+}
+
+.cite-paper-link:hover .cite-paper-citation,
+.cite-paper-link:hover .cite-paper-citation em {
+  color: var(--color-primary);
+}
+
+.cite-paper-citation {
+  font-size: 0.95rem;
+  line-height: 1.45;
+  transition: color 0.15s ease;
+}
+
+.cite-paper-citation em {
+  font-style: italic;
+  color: var(--color-text-secondary);
+}
+
+.cite-paper-doi {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+  word-break: break-all;
+}
+
+.cite-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.cite-copy-btn {
+  appearance: none;
+  font-family: inherit;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.5rem 0.9rem;
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.cite-copy-btn:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.cite-paper .cite-copy-btn {
+  align-self: flex-start;
+}
+
+.cite-actions .cite-copy-btn {
+  font-size: 0.95rem;
+  padding: 0.65rem 1.4rem;
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: white;
+}
+
+.cite-actions .cite-copy-btn:hover {
+  background: var(--color-primary-dark);
+  border-color: var(--color-primary-dark);
+  color: white;
+}
+
+.cite-copy-btn--copied {
+  background: var(--color-accent-green) !important;
+  border-color: var(--color-accent-green) !important;
+  color: white !important;
+}
+
+.cite-copy-btn--error {
+  background: var(--color-accent-orange) !important;
+  border-color: var(--color-accent-orange) !important;
+  color: white !important;
+}
+
+@media (max-width: 900px) {
+  .cite-papers {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .cite-section {
+    padding: 2.5rem 1.25rem;
+  }
+  .cite-panel {
+    padding: 2rem 1.25rem;
+  }
+  .cite-header h2 {
+    font-size: 1.5rem;
+  }
+}