Merge pull request #2 from SeongilHeo/main

Update publications linking and minor UI updates

Author: SeongilHeo

.gitignore

@@ -21,4 +21,8 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?
+
+# Docker
+docker-compose.yml
+Dockerfile

index.css

@@ -39,8 +39,11 @@
 }
 
 @layer components {
+    .outlet-container {
+        @apply mt-14 sm:mt-18 md:mt-21 lg:mt-26 py-10 px-5 sm:px-10 md:px-20 lg:px-40 2xl:px-80 flex-1 flex bg-body;
+    }
     .pages {
-        @apply mt-14 sm:mt-18 md:mt-21 lg:mt-26 py-10 px-5 sm:px-10 md:px-20 lg:px-40 2xl:px-80 flex-1 space-y-4 md:space-y-8 bg-body;
+        @apply max-w-7xl w-full mx-auto space-y-4 md:space-y-8 flex-1;
     }
 }
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "homepage": "https://aria-lab.cs.utah.edu/",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
@@ -25,6 +25,6 @@
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.5.1",
-    "vite": "^6.3.5"
+    "vite": "^6.3.6"
   }
 }

package.json

@@ -23,6 +23,7 @@ const AppContent = () => {
     const matchedRoute = routes.find(r => r.path === `/${path}`);
     const title = matchedRoute?.title ? `${matchedRoute.title}` : 'ARIA Lab';
     document.title = `${title} | Align Robust Interactive Autonomy Lab`;
+    window.scrollTo(0, 0);
   }, [location]);
 
   return (

src/App.jsx

@@ -5,7 +5,7 @@ const Button = ({title, link }) => {
   return (
     <button 
       onClick={() => window.open(link, '_blank')} 
-      className={`text-ured text-xl`}
+      className={`text-ured text-xl hover:scale-110 transition-all cursor-pointer`}
     >
       <FontAwesomeIcon icon={iconMap[title]} />
     </button>

src/components/Button.jsx

@@ -5,7 +5,7 @@ const ButtonR = ({title, link }) => {
   return (
     <button 
       onClick={() => window.open(link, '_blank')} 
-      className={`bg-ured rounded-md py-1 px-2 text-white text-sm flex justify-center items-center gap-xs`}
+      className={`bg-ured rounded-md py-1 px-2 text-white text-sm flex justify-center items-center gap-xs hover:bg-white hover:text-ured border-ured border transition-colors cursor-pointer`}
     >
       <FontAwesomeIcon icon={iconMap[title]} />
       {title}

src/components/ButtonR.jsx

@@ -6,7 +6,9 @@ const Layout = () => {
   return (
     <main className={`min-h-screen w-screen flex flex-col`} >
       <Header />
-      <Outlet />
+      <div className="outlet-container">
+        <Outlet />
+      </div>
       <Footer />
     </main>
   );

src/layout/Layout.jsx

@@ -1,9 +1,12 @@
 import { Title } from '@/components';
-import { research } from '@/data';
+import { research, publications } from '@/data';
 
 const Research = () => {
     const data = research.data;
-
+    const pubIndex = new Map(
+        publications.map(p => [p.Id, { title: p.Title, arxiv: p.ArXiv }])
+    );
+    
     return (
         <div className="pages">
             <Title name="Research" />
@@ -46,15 +49,24 @@ const Research = () => {
                                 <span className="font-bold">{'Publications: '}</span>
                                 <span>
                                     {item.Publication.length > 0
-                                        ? <ul>
-                                            {Object.entries(item['Publication']).map(([key, value], index) =>
-                                                <li key={`publication-${index}`} className="list-[circle] ml-8">
-                                                    <span className="font-bold">{`${key}: `}</span>
-                                                    <span >{value}</span>
-                                                </li>
-                                            )}
-                                        </ul>
-                                        : <span className="text-ugray italic">It will be updated soon.</span>
+                                        ? (
+                                            <ul>
+                                                {item.Publication.map((id) => {
+                                                    const pub = pubIndex.get(id);
+                                                    if (!pub) return null;
+                                                    return (
+                                                        <li key={`publication-${id}`} className="list-[circle] ml-8">
+                                                            {
+                                                                pub.arxiv
+                                                                    ? (<a href={pub.arxiv} target="_blank" rel="noreferrer" className="italichover:text-blue-500">{pub.title}</a>)
+                                                                    : (<span>{pub.title}</span>)
+                                                            }
+                                                        </li>
+                                                    );
+                                                })}
+                                            </ul>
+                                        )
+                                        : (<span className="text-ugray italic">It will be updated soon.</span>)
                                     }
                                 </span>
                             </li>