app/src/components/Meta.astro

---
interface Props {
  title: string;
  authors?: string[];
  affiliation?: string;
  published?: string;
}
const { title, authors = [], affiliation, published } = Astro.props as Props;
---
<header class="meta">
  <div class="meta-container">
    {authors.length > 0 && (
      <div class="meta-container-cell">
        <h3>Authors</h3>
        <p>{authors.join(', ')}</p>
      </div>
    )}
    {affiliation && (
      <div class="meta-container-cell">
        <h3>Affiliation</h3>
        <p>{affiliation}</p>
      </div>
    )}
    {published && (
      <div class="meta-container-cell">
        <h3>Published</h3>
        <p>{published}</p>
      </div>
    )}
    <div class="meta-container-cell">
      <h3>PDF</h3>
      <p><button id="download-pdf-btn" type="button">Download PDF</button></p>
    </div>
  </div>
</header>

<script>
  // Attach a handler to trigger a programmatic download
  (() => {
    const ready = () => {
      const btn = document.getElementById('download-pdf-btn');
      if (!btn) return;
      btn.addEventListener('click', () => {
        const a = document.createElement('a');
        a.href = '/article.pdf';
        a.setAttribute('download', 'article.pdf');
        document.body.appendChild(a);
        a.click();
        a.remove();
      });
    };
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', ready, { once: true });
    } else { ready(); }
  })();
  </script>