From fa72105ef1a79fff2797a2e0a12ca38779820bc2 Mon Sep 17 00:00:00 2001 From: Ali Khosravi Date: Fri, 8 May 2026 09:04:00 +0200 Subject: [PATCH] feat(cite): surface AiiDA citation papers on landing, acknowledgements, and README --- README.md | 8 ++ src/components/Cite.tsx | 143 ++++++++++++++++++++++++ src/components/LandingPage.tsx | 2 + src/pages/acknowledgements.astro | 4 + src/pages/index.astro | 1 + src/styles/cite.css | 185 +++++++++++++++++++++++++++++++ 6 files changed, 343 insertions(+) create mode 100644 src/components/Cite.tsx create mode 100644 src/styles/cite.css diff --git a/README.md b/README.md index 91798e0..4077066 100644 --- a/README.md +++ b/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) diff --git a/src/components/Cite.tsx b/src/components/Cite.tsx new file mode 100644 index 0000000..269792e --- /dev/null +++ b/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('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 ( + + ); +} + +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 ( + +
+
+

How to cite AiiDA

+

If AiiDA helped your research, please cite the papers below.

+
+ + + +
+ +
+
+ + ); +} diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 260859b..eac5052 100644 --- a/src/components/LandingPage.tsx +++ b/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 + ); } diff --git a/src/pages/acknowledgements.astro b/src/pages/acknowledgements.astro index 826d8c8..f39de83 100644 --- a/src/pages/acknowledgements.astro +++ b/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 = [ ); })} + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 7306ec1..feb68f5 100644 --- a/src/pages/index.astro +++ b/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'; diff --git a/src/styles/cite.css b/src/styles/cite.css new file mode 100644 index 0000000..285b47c --- /dev/null +++ b/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; + } +}