chore: better layout for page

sasilva1998 · sasilva1998 · commit 5521a6be9de2 · 2026-04-28T15:25:45.000-05:00
diff --git a/src/App.jsx b/src/App.jsx
@@ -87,14 +87,6 @@ export default function App() {
         />
 
         <main className="site-main">{pageLookup[currentPage] ?? pageLookup.home}</main>
-
-        <footer className="site-footer">
-          <p>{siteData.footer.note}</p>
-          <p className="footer-hint">
-            Update the placeholder content in <code>src/data/siteData.js</code> when
-            you are ready to populate the site.
-          </p>
-        </footer>
       </div>
     </div>
   );
diff --git a/src/components/PageIntro.jsx b/src/components/PageIntro.jsx
@@ -1,8 +1,8 @@
 import SectionHeading from "./SectionHeading";
 
-export default function PageIntro({ eyebrow, title, description }) {
+export default function PageIntro({ eyebrow, title, description, plain = false }) {
   return (
-    <section className="page-intro">
+    <section className={`page-intro${plain ? " page-intro-plain" : ""}`}>
       <SectionHeading
         description={description}
         eyebrow={eyebrow}
diff --git a/src/components/PaperCard.jsx b/src/components/PaperCard.jsx
@@ -1,6 +1,46 @@
 import SmartLink from "./SmartLink";
 
+function getYoutubeEmbedUrl(url) {
+  if (!url) {
+    return null;
+  }
+
+  try {
+    const parsedUrl = new URL(url);
+    const hostname = parsedUrl.hostname.replace(/^www\./, "");
+    let videoId = null;
+
+    if (hostname === "youtu.be") {
+      videoId = parsedUrl.pathname.split("/").filter(Boolean)[0];
+    } else if (
+      hostname === "youtube.com" ||
+      hostname.endsWith(".youtube.com") ||
+      hostname === "youtube-nocookie.com" ||
+      hostname.endsWith(".youtube-nocookie.com")
+    ) {
+      if (parsedUrl.pathname.startsWith("/embed/")) {
+        videoId = parsedUrl.pathname.split("/").filter(Boolean)[1];
+      } else if (parsedUrl.pathname.startsWith("/shorts/")) {
+        videoId = parsedUrl.pathname.split("/").filter(Boolean)[1];
+      } else {
+        videoId = parsedUrl.searchParams.get("v");
+      }
+    }
+
+    return videoId ? `https://www.youtube.com/embed/${encodeURIComponent(videoId)}` : null;
+  } catch {
+    return null;
+  }
+}
+
 export default function PaperCard({ compact = false, paper }) {
+  const titleHref = paper.titleHref ?? paper.href;
+  const youtubeEmbedUrl = compact ? null : getYoutubeEmbedUrl(paper.youtubeUrl);
+  const paperLinks =
+    compact || !Array.isArray(paper.links)
+      ? []
+      : paper.links.filter((link) => link.href && link.label);
+
   return (
     <article className={`paper-card${compact ? " paper-card-compact" : ""}`}>
       <div className="paper-meta">
@@ -10,8 +50,8 @@ export default function PaperCard({ compact = false, paper }) {
       </div>
 
       <h3 className="paper-title">
-        {paper.href ? (
-          <SmartLink className="paper-title-link" href={paper.href}>
+        {titleHref ? (
+          <SmartLink className="paper-title-link" href={titleHref}>
             {paper.title}
           </SmartLink>
         ) : (
@@ -21,6 +61,32 @@ export default function PaperCard({ compact = false, paper }) {
 
       {paper.authors ? <p className="paper-authors">{paper.authors}</p> : null}
       {paper.summary ? <p className="paper-summary">{paper.summary}</p> : null}
+
+      {youtubeEmbedUrl ? (
+        <div className="paper-video">
+          <iframe
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+            loading="lazy"
+            referrerPolicy="strict-origin-when-cross-origin"
+            src={youtubeEmbedUrl}
+            title={`${paper.title} video`}
+          />
+        </div>
+      ) : null}
+
+      {paperLinks.length ? (
+        <div className="inline-links paper-links">
+          {paperLinks.map((link) => (
+            <SmartLink
+              className="text-link"
+              href={link.href}
+              key={`${paper.title}-${link.label}`}
+              label={link.label}
+            />
+          ))}
+        </div>
+      ) : null}
     </article>
   );
 }
diff --git a/src/data/siteData.js b/src/data/siteData.js
@@ -62,17 +62,17 @@ export const siteData = {
     },
   },
   home: {
-    papersEyebrow: "Presented Papers",
-    papersTitle: "Selected papers and presentations highlighted on the landing page.",
-    papersDescription:
-      "This section sits below the team photograph on the landing page and can feature the latest papers, conference presentations, or the group's most representative outputs.",
+    papersEyebrow: "",
+    papersTitle: "Latest accepted papers",
+    // papersDescription:
+    //   "This section sits below the team photograph on the landing page and can feature the latest papers, conference presentations, or the group's most representative outputs.",
   },
   pages: {
     papers: {
-      eyebrow: "Published Papers",
-      title: "A complete list of the group's papers and scholarly output.",
+      eyebrow: "",
+      title: "Published Papers",
       description:
-        "Use this page for every paper you want visitors to browse, including journal articles, conference papers, workshop contributions, and preprints.",
+        "",
     },
     team: {
       eyebrow: "Team",
@@ -95,85 +95,108 @@ export const siteData = {
   },
   featuredPapers: [
     {
-      title: "Placeholder Paper Title for the Home Page",
-      venue: "Conference or Journal Name",
+      title: "One-Shot View Planning and Online Optimization-based Replanning for Unknown Object Reconstruction",
+      venue: "2026 IEEE International Conference on Robotics & Automation",
       year: "2026",
-      authors: "First Author, Second Author, Third Author",
+      authors: "J.J. Patiño, V. Romero-Cano, Y. Lai, Z. Kingston, J.D. Hernández",
       summary:
-        "A short summary placeholder for a paper featured on the main page. Replace this with the real title, authors, and contribution statement.",
-      href: "https://example.com/paper-one",
-      tag: "Featured",
+        "",
+      titleHref: "https://orca.cardiff.ac.uk/id/eprint/184709/",
+      youtubeUrl: "https://www.youtube.com/watch?v=Si_atZL73xI",
+      links: [
+        // {
+        //   label: "Paper link",
+        //   href: "https://example.com/paper-one",
+        // },
+      ],
+      tag: "To be published",
     },
     {
-      title: "Another Highlighted Publication Template",
-      venue: "Robotics Venue",
-      year: "2025",
-      authors: "Author A, Author B, Author C",
+      title:
+        "Exploring the Perceptions and Challenges of Social Robot Navigation: Two Case Studies in Different Socio-Technical Contexts",
+      venue: "OzCHI '24: 36th Australasian Conference on Human-Computer Interaction",
+      year: "2024",
+      authors:
+        "Steven Silva, Polina Oliinyk, Jose Patino, Dennys Paillacho, Juan D. Hernandez, Nervo Verdezoto",
       summary:
-        "Use this card for another featured publication or conference paper that you want visitors to notice quickly when they open the site.",
-      href: "https://example.com/paper-two",
-      tag: "Recent",
+        "A qualitative study of social robot navigation in real-world service settings across Ecuador and the UK, examining how robot behaviour, appearance, spatial constraints, and local context affect acceptance and user experience.",
+      titleHref: "https://doi.org/10.1145/3726986.3727028",
+      youtubeUrl: "https://www.youtube.com/watch?v=dFreXVsIJmc",
+      links: [],
+      tag: "Conference",
     },
     {
-      title: "Template Entry for a Presented Paper",
-      venue: "Workshop or Symposium",
-      year: "2025",
-      authors: "Researcher One, Researcher Two",
+      title: "Online Social Robot Navigation in Indoor, Large and Crowded Environments",
+      venue: "2023 IEEE International Conference on Robotics and Automation (ICRA)",
+      year: "2023",
+      authors:
+        "Steven Silva, Nervo Verdezoto, Dennys Paillacho, Samuel Millan-Norman, Juan David Hernández",
       summary:
-        "This slot can hold a third highlighted paper, poster, or invited talk entry depending on what you want to emphasize on the landing page.",
-      href: "https://example.com/paper-three",
-      tag: "Selected",
+        "Presents an online social robot navigation framework for large, crowded indoor environments, combining social heatmap world modelling, multilayered sampling-based planning, and path-following control, with benchmarks and Pepper robot trials.",
+      titleHref: "https://doi.org/10.1109/ICRA48891.2023.10160603",
+      youtubeUrl: "https://www.youtube.com/watch?v=Gq149wFVj7A",
+      links: [],
+      tag: "Conference",
     },
   ],
   papers: [
     {
-      title: "Placeholder Paper Title for the Home Page",
-      venue: "Conference or Journal Name",
+      title: "One-Shot View Planning and Online Optimization-based Replanning for Unknown Object Reconstruction",
+      venue: "2026 IEEE International Conference on Robotics & Automation",
       year: "2026",
-      authors: "First Author, Second Author, Third Author",
-      summary:
-        "A short summary placeholder for a paper featured on the main page. Replace this with the real title, authors, and contribution statement.",
-      href: "https://example.com/paper-one",
-      tag: "Featured",
-    },
-    {
-      title: "Another Highlighted Publication Template",
-      venue: "Robotics Venue",
-      year: "2025",
-      authors: "Author A, Author B, Author C",
+      authors: "J.J. Patiño, V. Romero-Cano, Y. Lai, Z. Kingston, J.D. Hernández",
       summary:
-        "Use this card for another featured publication or conference paper that you want visitors to notice quickly when they open the site.",
-      href: "https://example.com/paper-two",
-      tag: "Recent",
+        "",
+      titleHref: "https://orca.cardiff.ac.uk/id/eprint/184709/",
+      youtubeUrl: "https://www.youtube.com/watch?v=Si_atZL73xI",
+      links: [
+        // {
+        //   label: "Paper link",
+        //   href: "https://example.com/paper-one",
+        // },
+      ],
+      tag: "To be published",
     },
     {
-      title: "Template Entry for a Presented Paper",
-      venue: "Workshop or Symposium",
-      year: "2025",
-      authors: "Researcher One, Researcher Two",
+      title:
+        "Exploring the Perceptions and Challenges of Social Robot Navigation: Two Case Studies in Different Socio-Technical Contexts",
+      venue: "OzCHI '24: 36th Australasian Conference on Human-Computer Interaction",
+      year: "2024",
+      authors:
+        "Steven Silva, Polina Oliinyk, Jose Patino, Dennys Paillacho, Juan D. Hernandez, Nervo Verdezoto",
       summary:
-        "This slot can hold a third highlighted paper, poster, or invited talk entry depending on what you want to emphasize on the landing page.",
-      href: "https://example.com/paper-three",
-      tag: "Selected",
+        "A qualitative study of social robot navigation in real-world service settings across Ecuador and the UK, examining how robot behaviour, appearance, spatial constraints, and local context affect acceptance and user experience.",
+      titleHref: "https://doi.org/10.1145/3726986.3727028",
+      youtubeUrl: "https://www.youtube.com/watch?v=dFreXVsIJmc",
+      links: [
+      ],
+      tag: "Conference",
     },
     {
-      title: "Journal Article Placeholder for the Full Papers Page",
-      venue: "Robotics and Automation Journal",
-      year: "2024",
-      authors: "Author Name, Collaborator Name, Student Name",
+      title: "Online Social Robot Navigation in Indoor, Large and Crowded Environments",
+      venue: "2023 IEEE International Conference on Robotics and Automation (ICRA)",
+      year: "2023",
+      authors:
+        "Steven Silva, Nervo Verdezoto, Dennys Paillacho, Samuel Millan-Norman, Juan David Hernández",
       summary:
-        "A placeholder for a journal article entry with room for a concise explanation of the paper's focus, result, or application area.",
-      href: "https://example.com/paper-four",
-      tag: "Journal",
+        "Presents an online social robot navigation framework for large, crowded indoor environments, combining social heatmap world modelling, multilayered sampling-based planning, and path-following control, with benchmarks and Pepper robot trials.",
+      titleHref: "https://doi.org/10.1109/ICRA48891.2023.10160603",
+      youtubeUrl: "https://www.youtube.com/watch?v=Gq149wFVj7A",
+      links: [
+      ],
+      tag: "Conference",
     },
     {
-      title: "Conference Paper Placeholder for a Navigation Study",
-      venue: "International Robotics Conference",
-      year: "2024",
-      authors: "Research Group Member, External Collaborator",
+      title: "Towards Online Socially Acceptable Robot Navigation",
+      venue: "2022 IEEE 18th International Conference on Automation Science and Engineering (CASE)",
+      year: "2022",
+      authors: "Steven Silva, Dennys Paillacho, Nervo Verdezoto, Juan David Hernández",
       summary:
-        "This example shows how the full papers page can hold a larger archive than the short list on the front page.",
-      href: "https://example.com/paper-five",
+        "Introduces an online social robot navigation framework that generates collision-free and socially acceptable paths in uncontrolled crowded spaces using a modified sampling-based planner and social relevance validity checking.",
+      titleHref: "https://doi.org/10.1109/CASE49997.2022.9926686",
+      youtubeUrl: "https://www.youtube.com/watch?v=aZf27nthmX8",
+      links: [
+      ],
       tag: "Conference",
     },
   ],
@@ -353,8 +376,4 @@ export const siteData = {
     note:
       "This panel can also include office hours, a collaboration note, lab access information, or a link to an external contact form.",
   },
-  footer: {
-    note:
-      "Initial template for the Cardiff University Computational Robotics research website.",
-  },
 };
diff --git a/src/pages/ContactPage.jsx b/src/pages/ContactPage.jsx
@@ -4,7 +4,7 @@ import PageIntro from "../components/PageIntro";
 export default function ContactPage({ contacts, pages }) {
   return (
     <>
-      <PageIntro {...pages.contact} />
+      <PageIntro plain {...pages.contact} />
       <ContactPanel contacts={contacts} />
     </>
   );
diff --git a/src/pages/PapersPage.jsx b/src/pages/PapersPage.jsx
@@ -1,15 +1,65 @@
 import PageIntro from "../components/PageIntro";
 import PaperCard from "../components/PaperCard";
 
+function getYearSectionId(year) {
+  return `papers-${String(year).replace(/[^a-z0-9_-]/gi, "-")}`;
+}
+
+function getSortedYearGroups(papers) {
+  const years = [...new Set(papers.map((paper) => paper.year).filter(Boolean))].sort(
+    (firstYear, secondYear) =>
+      Number.parseInt(secondYear, 10) - Number.parseInt(firstYear, 10) ||
+      String(secondYear).localeCompare(String(firstYear)),
+  );
+
+  return years.map((year) => ({
+    papers: papers.filter((paper) => paper.year === year),
+    year,
+  }));
+}
+
 export default function PapersPage({ pages, papers }) {
+  const yearGroups = getSortedYearGroups(papers);
+
+  const scrollToYear = (year) => {
+    document.getElementById(getYearSectionId(year))?.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+  };
+
   return (
     <>
-      <PageIntro {...pages.papers} />
+      <PageIntro plain {...pages.papers} />
 
       <section className="page-section">
-        <div className="paper-grid">
-          {papers.map((paper) => (
-            <PaperCard key={`${paper.title}-${paper.year}`} paper={paper} />
+        <nav className="paper-year-slider" aria-label="Published papers by year">
+          {yearGroups.map(({ year }) => (
+            <button
+              className="paper-year-button"
+              key={year}
+              onClick={() => scrollToYear(year)}
+              type="button"
+            >
+              {year}
+            </button>
+          ))}
+        </nav>
+
+        <div className="paper-year-sections">
+          {yearGroups.map(({ papers: groupedPapers, year }) => (
+            <section
+              className="paper-year-section"
+              id={getYearSectionId(year)}
+              key={year}
+            >
+              <h2 className="paper-year-title">{year}</h2>
+              <div className="paper-grid">
+                {groupedPapers.map((paper) => (
+                  <PaperCard key={`${paper.title}-${paper.year}`} paper={paper} />
+                ))}
+              </div>
+            </section>
           ))}
         </div>
       </section>
diff --git a/src/pages/ProjectsPage.jsx b/src/pages/ProjectsPage.jsx
diff --git a/src/pages/TeamPage.jsx b/src/pages/TeamPage.jsx
diff --git a/src/styles.css b/src/styles.css
