Merge pull request #41 from HoagieClub/preview

App Router Migration, Fix Formatting, Clean Up

Author: Spencer04Hire

.env.local.txt

@@ -1,2 +1,29 @@
-ENVIRONMENT="development"
-HOAGIE_API_URL="http://localhost:8080"
+# === Auth0 Configuration ===
+# The secret key used to sign and encrypt the session cookies. Keep this value secure.
+AUTH0_SECRET=""
+
+# The base URL of your application where users will be redirected after authentication (e.g., http://localhost:3000/).
+AUTH0_BASE_URL=""
+
+# The URL of your Auth0 tenant, which identifies the domain associated with your Auth0 account.
+AUTH0_ISSUER_BASE_URL=""
+
+# The Client ID of your Auth0 application, used to identify your app to Auth0.
+AUTH0_CLIENT_ID=""
+
+# The Client Secret of your Auth0 application, used to authenticate your app with Auth0. Keep this value secure.
+AUTH0_CLIENT_SECRET=""
+
+# The audience for the issued tokens, typically your API identifier or the intended recipient of the token.
+AUTH0_AUDIENCE=""
+
+# The scope of the authentication request, defining what information (e.g., profile, email) is requested.
+AUTH0_SCOPE=""
+
+# === Hoagie API Configuration ===
+# The base URL for the Hoagie API server, where your app will make API requests.
+HOAGIE_API_URL=""
+
+# === Environment Configuration ===
+# Set to 'false' for development mode, 'true' for production.
+PROD="false"

.eslintrc

@@ -0,0 +1,7 @@
+**References**
+
+- Linear:
+
+**Proposed Changes**
+
+- _Add your proposed changes here_

.github/pull_request_template.md

@@ -1,11 +1,25 @@
-name: Hoagie Lint
+name: Lint
 on: pull_request
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    - name: Install modules
-      run: yarn
-    - name: Run ESLint
-      run: yarn lint
+    run-linters:
+        name: Run linters
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Check out Git repository
+              uses: actions/checkout@v5
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v5
+              with:
+                  node-version: 22
+
+            # ESLint and Prettier must be in `package.json`
+            - name: Install Node.js dependencies
+              run: yarn install --frozen-lockfile
+
+            - name: Run linters
+              uses: wearerequired/lint-action@v2.3.0
+              with:
+                  eslint: true
+                  prettier: true

.github/workflows/lint.yml

@@ -0,0 +1,20 @@
+{
+    "printWidth": 80,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "quoteProps": "as-needed",
+    "jsxSingleQuote": true,
+    "singleQuote": true,
+
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "always",
+    "requirePragma": false,
+    "insertPragma": false,
+    "proseWrap": "preserve",
+    "htmlWhitespaceSensitivity": "css",
+    "endOfLine": "lf",
+    "embeddedLanguageFormatting": "auto"
+}

.prettierrc

@@ -0,0 +1,9 @@
+# MIT License
+
+Copyright 2025 Hoagie Club
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

LICENSE

@@ -1,38 +1,50 @@
 # HoagieStuff
+
 ![Showcase of Hoagie Stuff](https://stuff.hoagie.io/showcase.gif)
 
-Everything on campus, from bulletin to sales, in one place. 
+Everything on campus, from bulletin to sales, in one place.
 
 ## Setup
+
 NOTE: You will need to rename `.env.local.txt` to `.env.local` to run it locally. Place it in your main directory. You will also need Node.js, NPM, and Yarn, there are plenty of tutorials online on how to install these.
 Assuming you have those tools and files, do the following to install dependencies:
+
 ```
 yarn
 ```
+
 and finally, run the server with:
+
 ```
 yarn dev
 ```
+
 As simple as that! We use `yarn` for everything related to dependencies so **do NOT use `npm install`** when you are trying to add new packages. Instead use `yarn add`.
 
 ## VSCode
+
 We use VSCode for development. Please install the following packages:
 
 1. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 1. [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
 
 ESLint is particularly important, if everything is installed correctly, it will allow you to see style errors inside the editor which we use to make sure our code is tidy and consistent throughout the codebase (same as output from `yarn lint`).
+
 ## Contribution
+
 **Always create new branches when adding new features.** For example, let's say I am adding a delete button. I would do:
+
 ```
 # Switch to new branch called delete-button
 git checkout -b delete-button
 ```
 
 When the main branch get updated, you want to run the following:
+
 ```
 # If there were any new commits, rebase your development branch, for example delete-button
 git checkout delete-button
 git pull --rebase main
 ```
+
 You may have to deal with merge conflicts; this will be visible and easier to deal with in VSCode. Here's a [short video about how to do it](https://www.youtube.com/watch?v=QmKdodJU-js).

README.md

@@ -0,0 +1,100 @@
+'use client';
+
+import React, { ReactNode } from 'react';
+
+import { useUser } from '@auth0/nextjs-auth0/client';
+import { Pane, Text, Paragraph } from 'evergreen-ui';
+import { Metadata } from 'next';
+
+import Layout from '@/lib/hoagie-ui/Layout';
+import Nav from '@/lib/hoagie-ui/Nav';
+import Theme from '@/lib/hoagie-ui/Theme';
+
+import '@/lib/hoagie-ui/theme.css';
+import '@/app/stuff.css';
+
+export const metadata: Metadata = {
+    title: 'Stuff by Hoagie',
+};
+
+const RainbowLogo = () => (
+    <Pane whiteSpace='nowrap'>
+        <Text
+            is='h2'
+            display='inline-block'
+            className='hoagie logo'
+            color='grey900'
+        >
+            hoagie
+        </Text>
+        <Paragraph
+            is='h2'
+            display='inline-block'
+            color='blue500'
+            className='hoagie logo rainbow-text'
+        >
+            stuff
+        </Paragraph>
+    </Pane>
+);
+
+const RainbowHeader = () => (
+    <Pane
+        width='100%'
+        height={20}
+        display='flex'
+        flexDirection='row'
+        style={{
+            backgroundImage: `linear-gradient(
+                90deg,
+                hsl(0deg 73% 75%) 0%,
+                hsl(12deg 94% 76%) 19%,
+                hsl(22deg 100% 75%) 27%,
+                hsl(33deg 100% 74%) 34%,
+                hsl(44deg 82% 72%) 41%,
+                hsl(69deg 51% 70%) 47%,
+                hsl(107deg 44% 75%) 53%,
+                hsl(149deg 45% 73%) 59%,
+                hsl(175deg 52% 64%) 66%,
+                hsl(190deg 77% 57%) 73%,
+                hsl(201deg 97% 62%) 81%,
+                hsl(225deg 100% 76%) 100%
+              )`,
+        }}
+    >
+        {/* <Pane width="20%" height={20} background="red500" />
+            <Pane width="20%" height={20} background="yellow300" />
+            <Pane width="20%" height={20} background="green300" />
+            <Pane width="20%" height={20} background="teal300" />
+            <Pane width="20%" height={20} background="rblue300" /> */}
+    </Pane>
+);
+
+export default function Content({
+    children,
+}: {
+    children: ReactNode;
+}): JSX.Element {
+    const tabs = [
+        { href: '/all', title: 'All' },
+        { href: '/marketplace', title: 'Marketplace' },
+        { href: '/lost', title: 'Lost & Found' },
+        { href: '/bulletins', title: 'Bulletins' },
+    ];
+    const user = useUser();
+
+    return (
+        <Theme palette='gray'>
+            <Layout>
+                <Nav
+                    name='stuff'
+                    tabs={tabs}
+                    user={user?.user}
+                    LogoComponent={RainbowLogo}
+                    HeaderComponent={RainbowHeader}
+                />
+                {children}
+            </Layout>
+        </Theme>
+    );
+}

_redirects

@@ -0,0 +1,15 @@
+'use client';
+
+import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
+
+import PostPage from '@/components/PostPage';
+
+type Params = {
+    params: { pid: string };
+};
+
+export default withPageAuthRequired(({ params }: Params) => {
+    const { pid } = params;
+    const pageNumber = pid ? parseInt(pid, 10) : 1;
+    return <PostPage pageNumber={pageNumber} />;
+});