Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 110 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,42 +1,125 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Polymer

## Getting Started
anthony
First, run the development server:
Polymer is the ongoing digital rebuild of **The Polytechnic** web presence.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
## Overview

A technical and stylistic revamp of RPI’s Newspaper, The Polytechnic, improving the webpage’s UX/UI and SEO.

## Goals

### Frontend

Rebuild the frontend from scratch using React ([Next.js](https://nextjs.org/)).

**General Poly Landing Page/Sections:**

- Design landing page structure (take note from [The Harvard Crimson](https://www.thecrimson.com/); fix obsolete newsletter subscription; take note from [Stanford Daily's email digests](https://stanforddaily.com/email-digests/)).
- Add Date & Volume.
- Top News gets a dedicated section (like [Stanford Daily](https://stanforddaily.com/)), as do Opinion and Sports.
- Improve section structures to include a featured/top article for each section.
- Add a "Most Read" / "Opinions Choice" section.
- Add access to visual copies of past papers (either [link to archive](https://chicagomaroon.com/archive/) or have a [print issues section](https://dailybruin.com/category/print)).
- Add a "by | date" format next to articles (like [Chicago Maroon](https://chicagomaroon.com/) or [Stanford Daily](https://stanforddaily.com/category/opinions/)).

**Opinions Section:**

- Add a drop-down menu on hover (Editorial, Columns, Op-Ed, Letter to the Editor) - similar to [Daily Princetonian](https://www.dailyprincetonian.com/).
- Include pictures/graphics with opinion pieces to elevate the section (standard for collegiate newspapers).
- Opinions section will have an ["Opinion's Choice"](https://www.thecrimson.com/section/opinion/) highlighted section.
- Dedicated section for Columns!

### Backend & Analytics

- **CMS:** [Payload CMS](https://payloadcms.com/)
- **Diagnostics/Analytics:** Implement an analytics tool to measure website traffic.
- **Migration:** Database copy and migration from the old Poly website backend.
- **Deployment:** Deploy the new site on our RPI server (with VMware).

## Milestones

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### Done on February 15th - Visual Mockup

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
- Receive formal and cohesive opinions from the Polytechnic Executive Board regarding complaints and suggestions for improvements.
- Visualize and finalize a new web design and a list of features/improvements that we’d like to instill on our new website (using Figma or whiteboards).

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
### Done on February 23 - Backend

## Learn More
- Picking and finalizing which backend we’re using (likely Payload, but doing more research is part of this phase).
- Locally test the backend, and plan how it will interface with our Frontend site.
- Test the migration of articles and photos from our old website to our new one, or choose to keep the old one running.

To learn more about Next.js, take a look at the following resources:
### Done on March 28 - Frontend

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
- Building the Frontend and implementing all of the previous design choices that were agreed on.
- Address General Poly Landing Page Issues:
- Our landing pages newsletter subscription is obsolete.
- No structure to our landing page.
- Date & Volume.
- Top News gets a section and so does Opinion, Sports.
- Address Section structures:
- Add a featured/top for each section.
- Add a Most Read/ Opinions Choice.
- Access to visual copies of past papers.
- Add a by | date next to our articles.
- Address Opinions page:
- Would like a drop down menu when you hover over opinions.
- Drop down includes editorial, columns, op-ed, letter to the editor.
- Pictures/graphics with opinion pieces will elevate the section.
- Opinions section will have an “Opinion’s Choice”.
- Columns!

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
### April 15th - Deployment and Feedback

## Deploy on Vercel
- Deploy the site to our RPI vmware server.
- Migrate the old database to the new website.
- Implement an analytics tool to measure website traffic.

## Repository Structure

```text
.
|-- app/ # Next.js app routes (frontend + payload)
|-- collections/ # Payload CMS collections
|-- components/ # Shared UI and dashboard components
|-- migrations/ # Payload migration files
|-- docs/ # Mockups and design artifacts
|-- .github/workflows/ # Deployment workflow(s)
|-- package.json # Project scripts and dependencies
```

## Tech Stack

- Next.js (App Router)
- React
- TypeScript
- Payload CMS
- PostgreSQL
- Tailwind CSS v4
- pnpm

## Local Development

### Prerequisites

- Node.js 20+
- pnpm 10+
- PostgreSQL

### Run the app

```bash
pnpm install
pnpm dev
```

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Then open [http://localhost:3000](http://localhost:3000).

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
## Deployment

anthony
Production deploys run via GitHub Actions (`.github/workflows/deploy.yml`) on pushes to `main`.
The workflow syncs the repo to `/var/www/polymer/`, installs dependencies, runs Payload migrations, builds the app, and reloads the `polymer` PM2 process.

## License

if the first line in the content of an article is #photofeature# then don't display that line in a final page. also if this line is present then don't
use components in @components/Article/ use components in a new components folder inside @components/Article/ called Photofeature. the photofeature article pages don't have the normal red header. they have the special photofeature header with a really small polytechnic logo, white, centered at the top of the screen. also the search icon is white at the top left. the headline is whatever the best contrase color is for the image (defalt to white) centered down at the bottom of the FULLSCREEN image. the header is over this image, and the headline (and subdeck under it) is at the bottom, also over the image. everything is on top of the fullscreen image. make this page work on mobile as well please, just the image will be cropped to be fullscreen mobile. then when you scroll it is no longer the fullscreen image and then it is normal from there.
MIT (see `LICENSE`).