add citation

Author: Ausbxuse

src/features/project-page/ProjectPage.astro

@@ -8,6 +8,7 @@ import AbstractSection from "./components/AbstractSection.astro";
 import DemosSection from "./components/DemosSection.astro";
 import MethodSection from "./components/MethodSection.astro";
 import ExperimentsSection from "./components/ExperimentsSection.astro";
+import CitationSection from "./components/CitationSection.astro";
 ---
 <Base title="Ψ₀: An Open Foundation Model Towards Universal Humanoid Loco-Manipulation">
   <main class="page">
@@ -36,6 +37,7 @@ import ExperimentsSection from "./components/ExperimentsSection.astro";
         <ExperimentsSection
           experiments={projectPageContent.experiments}
         />
+        <CitationSection citation={projectPageContent.citation} />
         <footer class="site-footer">
           <p>{footerConfig.copyright}</p>
           <a href={projectPageContent.footer.sourceCodeHref}>{projectPageContent.footer.sourceCodeLabel}</a>

src/features/project-page/components/CitationSection.astro

@@ -0,0 +1,59 @@
+---
+const { citation } = Astro.props;
+---
+<section id="citation" class="section citation-section">
+  <header class="section-head citation-section-head">
+    <h2>{citation.sectionTitle}</h2>
+    <button
+      class="citation-copy-button"
+      type="button"
+      data-copy-citation
+      data-copied-label={citation.copiedLabel}
+    >
+      <span data-copy-label>{citation.copyLabel}</span>
+    </button>
+  </header>
+  <article class="citation-panel">
+    <div class="citation-bibtex-wrap">
+      <pre class="citation-bibtex"><code data-citation-bibtex>{citation.bibtex}</code></pre>
+    </div>
+  </article>
+</section>
+
+<script is:inline>
+  const bindCitationCopy = () => {
+    const button = document.querySelector("[data-copy-citation]");
+    const code = document.querySelector("[data-citation-bibtex]");
+    const label = button?.querySelector("[data-copy-label]");
+    if (!button || !code || !label) return;
+
+    const defaultLabel = label.textContent;
+    const copiedLabel = button.dataset.copiedLabel || "Copied";
+
+    button.addEventListener("click", async () => {
+      const text = code.textContent.trim();
+
+      try {
+        await navigator.clipboard.writeText(text);
+        label.textContent = copiedLabel;
+      } catch {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(code);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        label.textContent = "Selected";
+      }
+
+      window.setTimeout(() => {
+        label.textContent = defaultLabel;
+      }, 1600);
+    });
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", bindCitationCopy, { once: true });
+  } else {
+    bindCitationCopy();
+  }
+</script>

src/features/project-page/content/projectContent.js

@@ -136,6 +136,12 @@ const withBase = (path) => {
  *       rows: Record<string, string>[];
  *     };
  *   };
+ *   citation: {
+ *     sectionTitle: string;
+ *     copyLabel: string;
+ *     copiedLabel: string;
+ *     bibtex: string;
+ *   };
  *   footer: {
  *     sourceCodeLabel: string;
  *   };
@@ -186,6 +192,7 @@ export const projectPageContent = {
         href: "https://arxiv.org/abs/2603.12263",
         external: true,
       },
+      { label: "Cite", href: "#citation" },
       {
         label: "Model",
         href: "https://huggingface.co/usc-psi-lab/psi-model",
@@ -695,6 +702,17 @@ export const projectPageContent = {
       ],
     },
   },
+  citation: {
+    sectionTitle: "Cite",
+    copyLabel: "Copy",
+    copiedLabel: "Copied",
+    bibtex: `@article{wei2026psi0,
+  title={{$\\Psi_0$}: An Open Foundation Model Towards Universal Humanoid Loco-Manipulation},
+  author={Wei, Songlin and Jing, Hongyi and Li, Boqian and Zhao, Zhenyu and Mao, Jiageng and Ni, Zhenhao and He, Sicheng and Liu, Jie and Liu, Xiawei and Kang, Kaidi and others},
+  journal={arXiv preprint arXiv:2603.12263},
+  year={2026}
+}`,
+  },
   footer: {
     sourceCodeLabel: "Website Source Code",
     sourceCodeHref: "https://github.com/physical-superintelligence-lab/Psi0",

src/features/project-page/content/siteConfig.js

@@ -26,4 +26,5 @@ export const tableOfContents = [
   { id: "demos", label: "Demos" },
   { id: "method", label: "Method" },
   { id: "experiments", label: "Experiments" },
+  { id: "citation", label: "Cite" },
 ];

src/features/project-page/project-page.css

@@ -1181,6 +1181,58 @@
   text-align: left;
 }
 
+.citation-section-head {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.citation-panel {
+  border-radius: 18px;
+  border: 1px solid rgba(76, 79, 105, 0.08);
+  background: rgba(252, 249, 245, 0.72);
+  padding: 12px;
+}
+
+.citation-bibtex-wrap {
+  overflow: hidden;
+  border-radius: 14px;
+  border: 1px solid rgba(76, 79, 105, 0.1);
+  background: rgba(255, 252, 247, 0.82);
+}
+
+.citation-copy-button {
+  min-height: 30px;
+  padding: 0 12px;
+  border: 1px solid rgba(76, 79, 105, 0.12);
+  border-radius: 999px;
+  background: rgba(255, 252, 247, 0.72);
+  color: var(--subtext0);
+  font-family: "IBM Plex Mono", "Space Mono", "Courier New", monospace;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.citation-copy-button:focus-visible {
+  outline: 2px solid rgba(76, 79, 105, 0.24);
+  outline-offset: 3px;
+}
+
+.citation-bibtex {
+  margin: 0;
+  padding: 16px;
+  overflow-x: auto;
+  color: var(--text);
+  font-family: "IBM Plex Mono", "Space Mono", "Courier New", monospace;
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre;
+}
+
 @media (min-width: 1400px) {
   .page {
     max-width: 1220px;

tests/project-page/content.test.mjs

@@ -4,7 +4,7 @@ import fs from "node:fs";
 import path from "node:path";
 
 import { projectPageContent } from "../../src/features/project-page/content/projectContent.js";
-import { demoLayout, footerConfig } from "../../src/features/project-page/content/siteConfig.js";
+import { demoLayout, footerConfig, tableOfContents } from "../../src/features/project-page/content/siteConfig.js";
 
 const repoRoot = process.cwd();
 
@@ -17,6 +17,7 @@ test("project page content exposes the expected top-level sections", () => {
     "demos",
     "method",
     "experiments",
+    "citation",
     "footer",
   ]);
 });
@@ -28,6 +29,7 @@ test("hero content is populated and action links are present", () => {
   assert.ok(hero.affiliations.length >= 1);
   assert.ok(hero.actions.length >= 2);
   assert.equal(hero.actions.some((action) => action.label === "SIMPLE"), true);
+  assert.equal(hero.actions.some((action) => action.label === "Cite" && action.href === "#citation"), true);
   assert.equal(hero.repoStats.length, 2);
   for (const action of hero.actions) {
     assert.ok(action.label.length > 0);
@@ -93,6 +95,15 @@ test("experiment tables match their declared columns", () => {
   }
 });
 
+test("citation content exposes BibTeX for the paper", () => {
+  const { citation } = projectPageContent;
+  assert.equal(citation.sectionTitle, "Cite");
+  assert.deepEqual(Object.keys(citation), ["sectionTitle", "copyLabel", "copiedLabel", "bibtex"]);
+  assert.match(citation.bibtex, /^@article\{wei2026psi0,/);
+  assert.match(citation.bibtex, /arXiv preprint arXiv:2603\.12263/);
+  assert.match(citation.bibtex, /year=\{2026\}/);
+});
+
 test("referenced public assets exist", () => {
   const assetPaths = new Set([
     projectPageContent.hero.teaserVideoSrc,
@@ -124,4 +135,5 @@ test("shared carousel layout remains centralized in siteConfig", () => {
     assert.ok(value.length > 0);
   }
   assert.match(footerConfig.copyright, /^Copyright/);
+  assert.equal(tableOfContents.some((item) => item.id === "citation" && item.label === "Cite"), true);
 });