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; + } +}