added document viewer and changed styling

package-lock.json

@@ -8,12 +8,14 @@
       "name": "eexiv-2",
       "version": "0.1.0",
       "dependencies": {
+        "file-saver": "^2.0.5",
         "next": "14.1.0",
         "react": "^18",
         "react-dom": "^18",
         "zustand": "^4.5.0"
       },
       "devDependencies": {
+        "@types/file-saver": "^2.0.7",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -447,6 +449,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1985,6 +1993,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

package.json

@@ -9,12 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "file-saver": "^2.0.5",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
     "zustand": "^4.5.0"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/container/Container.tsx

@@ -1,14 +1,27 @@
 import styles from './container.module.css'
 
 /**
- * Renders a container component with the provided children. It will restrict the
+ * Renders a container component with the specified width, containing the provided children.
- * width of the container to 90vw.
  *
- * @param {Readonly<{ children: React.ReactNode }>} children - The child components to be rendered within the container.
+ * @param children - The children to be rendered within the container.
- * @return {React.ReactElement} The container component with the provided children.
+ * @param width - The width of the container.
+ * @param fill - Whether the container should fill the available height
+ * @return The container component with the specified width and children.
  */
 export default function Container({
   children,
-}: Readonly<{ children: React.ReactNode }>) {
+  width,
-  return <div className={styles.container}>{children}</div>
+  fill,
+}: Readonly<{ children: React.ReactNode; width: string; fill?: boolean }>) {
+  return (
+    <div
+      className={styles.container}
+      style={{
+        maxWidth: width,
+        minHeight: fill ? 'calc(100vh - 450px' : 'auto',
+      }}
+    >
+      {children}
+    </div>
+  )
 }

src/app/container/container.module.css

@@ -1,5 +1,5 @@
 .container {
   margin: 0 auto;
   padding: 0 20px;
-  max-width: 90vw;
+  margin-bottom: 30px;
 }

src/app/document/page.tsx

@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <h1>
+      This is a placeholder for a document browser that will be implemented in
+      the future. In the meantime, you can view specific documents by searching.
+    </h1>
+  )
+}

src/app/document/view/[docName]/documentViewer.module.css

@@ -0,0 +1,61 @@
+.itemTitle {
+  margin: 0;
+  font-size: 2em;
+}
+
+.itemAuthors {
+  margin-bottom: 0;
+}
+
+.itemDates {
+  margin-top: 0;
+}
+
+.itemType {
+  display: inline-block;
+  width: fit-content;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-right: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+.typeReport {
+  background-color: #28a745;
+}
+
+.itemRevision {
+  display: inline-block;
+}
+
+.itemAbstractHeader {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  color: 33;
+  font-size: 1.5em;
+}
+
+.itemAbstract {
+  margin-top: 10px;
+  color: #666;
+  font-size: 1.2em;
+}
+
+.typePresentation {
+  background-color: #007bff;
+}
+
+.typeOther {
+  background-color: #6c757d;
+}
+
+.resultAbstract {
+  color: #333;
+}
+
+.downloadButton {
+  padding: 10px;
+}

src/app/document/view/[docName]/page.tsx

@@ -0,0 +1,92 @@
+'use client'
+import styles from './documentViewer.module.css'
+import { Zilla_Slab } from 'next/font/google'
+import { saveAs } from 'file-saver'
+
+const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
+
+export default function Page({
+  params,
+}: Readonly<{ params: { docName: string } }>) {
+  const handleDownload = () => {
+    saveAs(`/download/${params.docName}/file.pdf`, `${params.docName}.pdf`)
+  }
+
+  type ItemType = 'report' | 'presentation' | 'other'
+  const generateItemBadge = (itemName: ItemType) => {
+    let itemStyle: string
+    switch (itemName) {
+      case 'report':
+        itemStyle = `${styles.itemType} bg-green-400`
+        break
+      case 'presentation':
+        itemStyle = `${styles.itemType} bg-blue-400`
+        break
+      case 'other':
+        itemStyle = `${styles.itemType} bg-amber-400`
+    }
+    return (
+      <p className={itemStyle}>
+        {itemName.charAt(0).toUpperCase()}
+        {itemName.slice(1)}
+      </p>
+    )
+  }
+
+  return (
+    <div id='content'>
+      <div>
+        <h3
+          className={`
+            ${styles.itemTitle}
+            text-slate-800
+            ${zillaSlab.className}
+          `}
+        >
+          2024 Controls/Programming DWM
+        </h3>
+        <p className={`${styles.itemAuthors} text-slate-800 mt-2`}>
+          <a href='../author/#mbohsali'>Majd Bohsali</a> and{' '}
+          <a href='../author/#avenkatesh'>Ananth Venkatesh</a>
+        </p>
+        <p className='mt-4'>Published Jan 22, 2024</p>
+        {generateItemBadge('report')}
+        <p className={styles.itemRevision}>Revision 1</p>
+        <h4 className={styles.itemAbstractHeader}>Abstract</h4>
+        <p className='my-2 text-xl text-slate-600'>
+          This document outlines the first two weeks of prototyping conducted by
+          the EECS subteam for Team 1280. Action items are presented in a
+          doing/working/moving format to keep track of new developments related
+          to EECS projects.
+        </p>
+        <p className='my-2'>
+          <strong>Topics</strong>:{' '}
+          <a href='../topic/#frc'>FIRST Robotics Competition</a>,{' '}
+          <a href='../topic/#eecs'>
+            Electrical Engineering and Computer Science
+          </a>
+        </p>
+        <p className='my-2'>
+          <strong>Code</strong>:{' '}
+          <a href='https://github.com/Team-1280/Swerve' target='_blank'>
+            https://github.com/Team-1280/Swerve
+          </a>
+          ,{' '}
+          <a href='https://github.com/Team-1280/Jankboard' target='_blank'>
+            https://github.com/Team-1280/Jankboard
+          </a>
+          ,{' '}
+          <a href='https://github.com/Team-1280/identity' target='_blank'>
+            https://github.com/Team-1280/identity
+          </a>
+        </p>
+        <button
+          className='bg-blue-600 text-slate-100 hover:bg-blue-300 font-semibold rounded py-2 px-4 my-2'
+          onClick={handleDownload}
+        >
+          Download PDF
+        </button>
+      </div>
+    </div>
+  )
+}

src/app/home.module.css

@@ -29,7 +29,7 @@
 .wordmark {
   float: left;
   height: 100px;
-  margin-top: 25px;
+  margin-top: -25px;
 }
 
 .contributions {

src/app/layout.tsx

@@ -11,10 +11,6 @@ import Container from './container/Container'
   import it, as is done here with Zilla Slab, and then execute a CSS exploit by assigning 
   the tag className={zillaSlab.className} to set the font family of an element to your desired font.
   DO NOT directly set the font family in CSS using font-family. You will break EVERYTHING!
-
-  To set multiple classes, you can use an advanced exploit using an array of
-  your desired classNames (eg. [styles.title, zillaSlab.className]) and join them with a space
-  like so: className={[styles.title, zillaSlab.className].join(' ')}
 */
 const inter = Inter({ subsets: ['latin'] })
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
@@ -33,61 +29,69 @@ export default function RootLayout({
     <html lang='en'>
       <body className={inter.className}>
         <div className={styles.header}>
-          <img className={styles.wordmark} src='/eecs-wordmark.png' />
+          <Container width='1200px'>
-          <p className={styles.contributions}>
+            <img className={styles.wordmark} src='/eecs-wordmark.png' />
-            We gratefully acknowledge support from our volunteer peer reviewers,
+            <p className={styles.contributions}>
-            member institutions, and all{' '}
+              We gratefully acknowledge support from our volunteer peer
-            <a
+              reviewers, member institutions, and all{' '}
-              href='https://github.com/Team-1280/eeXiv/graphs/contributors'
+              <a
-              target='_blank'
+                href='https://github.com/Team-1280/eeXiv/graphs/contributors'
-            >
+                target='_blank'
-              open-source contributors
+              >
-            </a>
+                open-source contributors
-            .
+              </a>
-          </p>
+              .
+            </p>
+          </Container>
         </div>
         <div className={styles.banner}>
-          <h1 className={[styles.title, zillaSlab.className].join(' ')}>
+          <Container width='1200px'>
-            <Link href='/' className='no-link-style'>
+            <h1 className={`${styles.title} ${zillaSlab.className}`}>
-              eeXiv<sup>2</sup>
+              <Link href='/' className='no-link-style'>
-            </Link>
+                eeXiv<sup>2</sup>
-          </h1>
+              </Link>
+            </h1>
+          </Container>
           <SearchBar />
         </div>
-        <Container>{children}</Container>
+        <Container width='1200px' fill>
+          {children}
+        </Container>
         <footer>
           <div className={styles.footerContent}>
-            <ul>
+            <Container width='1200px'>
-              <li>
+              <ul>
-                <Link href='/about'>About</Link>
+                <li>
-              </li>
+                  <Link href='/about'>About</Link>
-              <li>
+                </li>
-                <Link href='/help'>Help</Link>
+                <li>
-              </li>
+                  <Link href='/help'>Help</Link>
-              <li>
+                </li>
-                <Link href='/contact'>Contact</Link>
+                <li>
-              </li>
+                  <Link href='/contact'>Contact</Link>
-              <li>
+                </li>
-                <Link href='/subscribe'>Subscribe</Link>
+                <li>
-              </li>
+                  <Link href='/subscribe'>Subscribe</Link>
-              <li>
+                </li>
-                <Link href='/legal/copyright'>Copyright</Link>
+                <li>
-              </li>
+                  <Link href='/legal/copyright'>Copyright</Link>
-              <li>
+                </li>
-                <Link href='/legal/privacy'>Privacy Policy</Link>
+                <li>
-              </li>
+                  <Link href='/legal/privacy'>Privacy Policy</Link>
-              <li>
+                </li>
-                <Link href='/help/accessibility'>Accessibility</Link>
+                <li>
-              </li>
+                  <Link href='/help/accessibility'>Accessibility</Link>
-              <li>
+                </li>
-                <Link href='/status'>eeXiv status</Link>
+                <li>
-              </li>
+                  <Link href='/status'>eeXiv status</Link>
-              <li>
+                </li>
-                <Link href='/status/notifications'>
+                <li>
-                  Get status notifications
+                  <Link href='/status/notifications'>
-                </Link>
+                    Get status notifications
-              </li>
+                  </Link>
-            </ul>
+                </li>
+              </ul>
+            </Container>
           </div>
         </footer>
       </body>

src/app/searchBar/searchBar.module.css

@@ -6,7 +6,7 @@
 .search {
   position: absolute;
   top: 175px;
-  left: 50%;
+  right: 0;
   width: 40vw;
 }
 

src/app/searchBar/searchBar.tsx

@@ -1,3 +1,4 @@
+'use client'
 import styles from './searchBar.module.css'
 
 export default function SearchBar() {
@@ -5,7 +6,7 @@ export default function SearchBar() {
     <div className={styles.search}>
       <input
         type='text'
-        className={[styles.searchBox, 'text-slate-800'].join(' ')}
+        className={`${styles.searchBox} text-slate-800`}
         name='q'
         placeholder='Search...'
       />