From a8120f492dc5d41a487785d357fb5e0290fd30c4 Mon Sep 17 00:00:00 2001 From: Youwen Wu Date: Sat, 10 Feb 2024 11:12:13 -0800 Subject: [PATCH] added document viewer and changed styling --- package-lock.json | 13 +++ package.json | 2 + .../day-5-principles-1/file.pdf} | Bin .../r1/2024-programming-dwm-1.pdf | Bin .../r2/the-deepbozo-report-1.pdf | Bin .../{content => download}/r3/toughbook-1.pdf | Bin src/app/container/Container.tsx | 25 +++- src/app/container/container.module.css | 2 +- src/app/document/document.module.css | 0 src/app/document/page.tsx | 8 ++ .../view/[docName]/documentViewer.module.css | 61 ++++++++++ src/app/document/view/[docName]/page.tsx | 92 +++++++++++++++ src/app/home.module.css | 2 +- src/app/layout.tsx | 110 +++++++++--------- src/app/searchBar/searchBar.module.css | 2 +- src/app/searchBar/searchBar.tsx | 3 +- 16 files changed, 257 insertions(+), 63 deletions(-) rename public/{content/p1/day-5-principles-1.pdf => download/day-5-principles-1/file.pdf} (100%) rename public/{content => download}/r1/2024-programming-dwm-1.pdf (100%) rename public/{content => download}/r2/the-deepbozo-report-1.pdf (100%) rename public/{content => download}/r3/toughbook-1.pdf (100%) create mode 100644 src/app/document/document.module.css create mode 100644 src/app/document/page.tsx create mode 100644 src/app/document/view/[docName]/documentViewer.module.css create mode 100644 src/app/document/view/[docName]/page.tsx diff --git a/package-lock.json b/package-lock.json index 3155d64..c764ec5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 12fd79d..aaf5e4e 100644 --- a/package.json +++ b/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", diff --git a/public/content/p1/day-5-principles-1.pdf b/public/download/day-5-principles-1/file.pdf similarity index 100% rename from public/content/p1/day-5-principles-1.pdf rename to public/download/day-5-principles-1/file.pdf diff --git a/public/content/r1/2024-programming-dwm-1.pdf b/public/download/r1/2024-programming-dwm-1.pdf similarity index 100% rename from public/content/r1/2024-programming-dwm-1.pdf rename to public/download/r1/2024-programming-dwm-1.pdf diff --git a/public/content/r2/the-deepbozo-report-1.pdf b/public/download/r2/the-deepbozo-report-1.pdf similarity index 100% rename from public/content/r2/the-deepbozo-report-1.pdf rename to public/download/r2/the-deepbozo-report-1.pdf diff --git a/public/content/r3/toughbook-1.pdf b/public/download/r3/toughbook-1.pdf similarity index 100% rename from public/content/r3/toughbook-1.pdf rename to public/download/r3/toughbook-1.pdf diff --git a/src/app/container/Container.tsx b/src/app/container/Container.tsx index 3d9e374..1d987a9 100644 --- a/src/app/container/Container.tsx +++ b/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 - * width of the container to 90vw. + * Renders a container component with the specified width, containing the provided children. * - * @param {Readonly<{ children: React.ReactNode }>} children - The child components to be rendered within the container. - * @return {React.ReactElement} The container component with the provided children. + * @param children - The children to be rendered within the container. + * @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 }>) { - return
{children}
+ width, + fill, +}: Readonly<{ children: React.ReactNode; width: string; fill?: boolean }>) { + return ( +
+ {children} +
+ ) } diff --git a/src/app/container/container.module.css b/src/app/container/container.module.css index e73d923..60d492d 100644 --- a/src/app/container/container.module.css +++ b/src/app/container/container.module.css @@ -1,5 +1,5 @@ .container { margin: 0 auto; padding: 0 20px; - max-width: 90vw; + margin-bottom: 30px; } diff --git a/src/app/document/document.module.css b/src/app/document/document.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/document/page.tsx b/src/app/document/page.tsx new file mode 100644 index 0000000..0b7b6ad --- /dev/null +++ b/src/app/document/page.tsx @@ -0,0 +1,8 @@ +export default function Page() { + return ( +

+ 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. +

+ ) +} diff --git a/src/app/document/view/[docName]/documentViewer.module.css b/src/app/document/view/[docName]/documentViewer.module.css new file mode 100644 index 0000000..3d9e24b --- /dev/null +++ b/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; +} diff --git a/src/app/document/view/[docName]/page.tsx b/src/app/document/view/[docName]/page.tsx new file mode 100644 index 0000000..23158c1 --- /dev/null +++ b/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 ( +

+ {itemName.charAt(0).toUpperCase()} + {itemName.slice(1)} +

+ ) + } + + return ( +
+
+

+ 2024 Controls/Programming DWM +

+

+ Majd Bohsali and{' '} + Ananth Venkatesh +

+

Published Jan 22, 2024

+ {generateItemBadge('report')} +

Revision 1

+

Abstract

+

+ 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. +

+

+ Topics:{' '} + FIRST Robotics Competition,{' '} + + Electrical Engineering and Computer Science + +

+

+ Code:{' '} + + https://github.com/Team-1280/Swerve + + ,{' '} + + https://github.com/Team-1280/Jankboard + + ,{' '} + + https://github.com/Team-1280/identity + +

+ +
+
+ ) +} diff --git a/src/app/home.module.css b/src/app/home.module.css index f2d39fe..2c2ba62 100644 --- a/src/app/home.module.css +++ b/src/app/home.module.css @@ -29,7 +29,7 @@ .wordmark { float: left; height: 100px; - margin-top: 25px; + margin-top: -25px; } .contributions { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b2f75da..81a7e35 100644 --- a/src/app/layout.tsx +++ b/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({
- -

- We gratefully acknowledge support from our volunteer peer reviewers, - member institutions, and all{' '} - - open-source contributors - - . -

+ + +

+ We gratefully acknowledge support from our volunteer peer + reviewers, member institutions, and all{' '} + + open-source contributors + + . +

+
-

- - eeXiv2 - -

+ +

+ + eeXiv2 + +

+
- {children} + + {children} + diff --git a/src/app/searchBar/searchBar.module.css b/src/app/searchBar/searchBar.module.css index 74cd810..7825dad 100644 --- a/src/app/searchBar/searchBar.module.css +++ b/src/app/searchBar/searchBar.module.css @@ -6,7 +6,7 @@ .search { position: absolute; top: 175px; - left: 50%; + right: 0; width: 40vw; } diff --git a/src/app/searchBar/searchBar.tsx b/src/app/searchBar/searchBar.tsx index 12a2319..e9cd290 100644 --- a/src/app/searchBar/searchBar.tsx +++ b/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() {