Refactor using app router

public/documentation/Project_folder_structure.md

@@ -1,57 +1,120 @@
 # Project Folder Structure for the Open Sacramento Website
 
-## App folders
+## [Top-level files](https://nextjs.org/docs/getting-started/project-structure#top-level-files)
 
-### public Directory
+#### Next.js
+- [`next.config.js`](https://nextjs.org/docs/app/api-reference/next-config-js) - Configuration file for Next.js
+- [`package.json`](https://nextjs.org/docs/getting-started/installation#manual-installation) - Project dependencies and scripts
+- [`instrumentation.ts`](https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation) - OpenTelemetry and Instrumentation file
+- [`middleware.ts`](https://nextjs.org/docs/app/building-your-application/routing/middleware) - Next.js request middleware
+- [`.env`](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables) - Environment variables
+- [`.env.local`](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables)
+- Local environment variables
+- [`.env.production`](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables) - Production environment variables
+- [`.env.development`](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables) - Development environment variables
+- [`.eslintrc.json`](https://nextjs.org/docs/app/building-your-application/configuring/eslint) - Configuration file for ESLint
+- `.gitignore` - Git files and folders to ignore
+- `next-env.d.ts` - TypeScript declaration file for Next.js
+- `tsconfig.json` - Configuration file for TypeScript
+- `jsconfig.json` - Configuration file for JavaScript
 
-The `public/` folder is used to host assets that the website can access.
-> **Note:** All files and folders in the public directory are viewable to the public.
+## [`app` Routing Conventions](https://nextjs.org/docs/getting-started/project-structure#app-routing-conventions)
 
-Assets can be loaded in the website code via the `/public` folder.
+### [Routing Files](https://nextjs.org/docs/getting-started/project-structure#routing-files)
 
-```html
-<img src="/public/img/my-image.png" alt="My public image">
-```
+- [`layout`](https://nextjs.org/docs/app/api-reference/file-conventions/layout) **(`.js` `.jsx` `.tsx`)** - Layout
+- [`page`](https://nextjs.org/docs/app/api-reference/file-conventions/page) **(`.js` `.jsx` `.tsx`)** - Page
+- [`loading`](https://nextjs.org/docs/app/api-reference/file-conventions/loading) **(`.js` `.jsx` `.tsx`)** - Loading UI
+- [`not-found`](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) **(`.js` `.jsx` `.tsx`)** - Not found UI
+- [`error`](https://nextjs.org/docs/app/api-reference/file-conventions/error) **(`.js` `.jsx` `.tsx`)** - Error UI
+- [`global-error`](https://nextjs.org/docs/app/api-reference/file-conventions/error#global-errorjs) **(`.js` `.jsx` `.tsx`)** - Global error UI
+- [`route`](https://nextjs.org/docs/app/api-reference/file-conventions/route) **(`.js` `.ts`)** - API endpoint
+- [`template`](https://nextjs.org/docs/app/api-reference/file-conventions/template) **(`.js` `.jsx` `.tsx`)** - Re-rendered layout
+- [`default`](https://nextjs.org/docs/app/api-reference/file-conventions/default) **(`.js` `.jsx` `.tsx`)** - Parallel route fallback page
 
-Common files are CSS and JS, but any kind of files can be added.
-If you make a new folder, it will be added to the path.
-For example, `/public/my-folder/my-file.csv` would have the url `localhost/public/my-folder/my-file.csv`
+### [Nested Routes](https://nextjs.org/docs/getting-started/project-structure#nested-routes)
 
-### styles Directory
+- [`folder`](https://nextjs.org/docs/app/building-your-application/routing#route-segments) - Route segment
+- [`folder/folder`](https://nextjs.org/docs/app/building-your-application/routing#nested-routes) - Nested route segment
 
-Edit .scss files in the `/styles` folder, and they will be generated as .css files in the `public/css` folder.
+### [Dynamic Routes](https://nextjs.org/docs/getting-started/project-structure#dynamic-routes)
 
-### content Directory
+- [`[folder]`](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#convention) - Dynamic route segment
+- [`[...folder]`](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments) - Catch-all route segment
+- [`[[...folder]]`](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) - Optional catch-all route segment
 
-The `content` folder serves as a router for the application.
-Any file or folder placed in this folder will create a page on the website at the URL.
+### [Route Groups and Private Folders](https://nextjs.org/docs/getting-started/project-structure#route-groups-and-private-folders)
 
-## Eleventy folders
+- [`(folder)`](https://nextjs.org/docs/app/building-your-application/routing/route-groups#convention) - Group routes without affecting routing
+- [`_folder`](https://nextjs.org/docs/app/building-your-application/routing/colocation#private-folders) - Opt folder and all child segments out of routing
 
-### _data Directory
+### [Parallel and Intercepted Routes](https://nextjs.org/docs/getting-started/project-structure#parallel-and-intercepted-routes)
 
-The _data folder includes files data files.
+- [`@folder`](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#convention) - Named slot
+- [`(.)folder`](https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#convention) - Intercept same level
+- [`(..)folder`](https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#convention) - Intercept one level above
+- [`(..)(..)folder`](https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#convention) - Intercept two levels above
+- [`(...)folder`](https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#convention) - Intercept from root
 
-#### Supported file formats
+### [Metadata File Conventions](https://nextjs.org/docs/getting-started/project-structure#metadata-file-conventions)
 
-- JSON
-- YAML
+#### [App Icons](https://nextjs.org/docs/getting-started/project-structure#app-icons)
 
-#### Helpful links
+- [`favicon`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#favicon) `.ico` - Favicon file
+- [`icon`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#icon) `.ico` `.jpg` `.jpeg` `.png` `.svg` - App Icon file
+- [`icon`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx) `.js` `.ts` `.tsx` - Generated App Icon
+- [`apple-icon`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#apple-icon) - `.jpg` `.jpeg`, `.png` - Apple App Icon file
+- [`apple-icon`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx) - `.js` `.ts` `.tsx` - Generated Apple App Icon
 
-- https://www.11ty.dev/docs/data/
-- https://www.11ty.dev/docs/data-global/
-- https://www.11ty.dev/docs/data-template-dir/
+#### [Open Graph and Twitter Images](https://nextjs.org/docs/getting-started/project-structure#open-graph-and-twitter-images)
 
-### _includes Directory
+- [`opengraph-image`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#opengraph-image) - `.jpg` `.jpeg` `.png` `.gif` - Open Graph image file
+- [`opengraph-image`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx) - `.js` `.ts` `.tsx` - Generated Open Graph image
+- [`twitter-image`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#twitter-image) - `.jpg` `.jpeg` `.png` `.gif` - Twitter image file
+- [`twitter-image`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx) - `.js` `.ts` `.tsx` - Generated Twitter image
 
-The _includes folder contains templates and layouts.
+#### [SEO](https://nextjs.org/docs/getting-started/project-structure#seo)
 
-#### Supported file formats
+- [`sitemap`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#static-sitemapxml)- `.xml` - Sitemap file
+- [`sitemap`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generate-a-sitemap) - `.js` `.ts` - Generated Sitemap
+- [`robots`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots#static-robotstxt)
+- `.txt`
+- Robots file
+- [`robots`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file)
+- `.js` `.ts`
+- Generated Robots file
 
-- Liquid
-- HTML (defaults to Liquid)
+## [`pages` Routing Conventions](https://nextjs.org/docs/getting-started/project-structure#pages-routing-conventions)
 
-#### Helpful links
+### [Special Files](https://nextjs.org/docs/getting-started/project-structure#special-files)
 
-- https://www.11ty.dev/docs/layouts/
+- [`_app`](https://nextjs.org/docs/pages/building-your-application/routing/custom-app) **(`.js` `.jsx` `.tsx`)** - Custom App
+- [`_document`](https://nextjs.org/docs/pages/building-your-application/routing/custom-document) **(`.js` `.jsx` `.tsx`)** - Custom Document
+- [`_error`](https://nextjs.org/docs/pages/building-your-application/routing/custom-error#more-advanced-error-page-customizing) **(`.js` `.jsx` `.tsx`)** - Custom Error Page
+- [`404`](https://nextjs.org/docs/pages/building-your-application/routing/custom-error#404-page) **(`.js` `.jsx` `.tsx`)** - 404 Error Page
+- [`500`](https://nextjs.org/docs/pages/building-your-application/routing/custom-error#500-page) **(`.js` `.jsx` `.tsx`)** - 500 Error Page
+
+### [Routes](https://nextjs.org/docs/getting-started/project-structure#routes)
+
+#### Folder convention
+- [`index`](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#index-routes) **(`.js` `.jsx` `.tsx`)** - Home page
+- [`folder/index`](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#index-routes) **(`.js` `.jsx` `.tsx`)** - Nested page
+
+#### File convention
+
+- [`index`](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#index-routes) **(`.js` `.jsx` `.tsx`)** - Home page
+- [`file`](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts) **(`.js` `.jsx` `.tsx`)** - Nested page
+
+## [Dynamic Routes](https://nextjs.org/docs/getting-started/project-structure#dynamic-routes-1)
+
+#### Folder convention
+
+- [`[folder]/index`](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes) **(`.js` `.jsx` `.tsx`)** - Dynamic route segment
+- [`[...folder]/index`](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) **(`.js` `.jsx` `.tsx`)** - Catch-all route segment
+- [`[[...folder]]/index`](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) **(`.js` `.jsx` `.tsx`)** - Optional catch-all route segment
+
+#### File convention
+
+- [`[file]`](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes) **(`.js` `.jsx` `.tsx`)** - Dynamic route segment
+- [`[...file]`](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) **(`.js` `.jsx` `.tsx`)** - Catch-all route segment
+- [`[[...file]]`](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) **(`.js` `.jsx` `.tsx`)** - Optional catch-all route segment

src/app/about/about.jsx

@@ -0,0 +1,20 @@
+import AboutSectionLanding from './aboutSectionLanding'
+import AboutSectionCollage from './aboutSectionCollage'
+import AboutSectionMission from './aboutSectionMission'
+import AboutSectionTeam from './aboutSectionTeam'
+import AboutSectionOpportunities from './aboutSectionOpportunities'
+import '@/styles/pages/about.scss'
+
+/**
+ * About page.
+ * @returns {JSX.Element}
+ */
+export default function About() {
+  return (<div className="">
+    <AboutSectionLanding></AboutSectionLanding>
+    <AboutSectionCollage />
+    <AboutSectionMission />
+    <AboutSectionTeam />
+    <AboutSectionOpportunities />
+  </div>)
+}

src/app/about/page.js

@@ -1,4 +1,4 @@
-import About from '@/components/about/about'
+import About from './about'
 
 export default function AboutPage() {
   return (

src/components/home/home.jsx → src/app/home/home.jsx

@@ -1,10 +1,10 @@
-import HomeSectionDonate from '@/components/home/homeSectionDonate'
-import HomeSectionProjects from '@/components/home/homeSectionProjects'
-import HomeSectionDefault from '@/components/home/homeSectionDefault'
-import HomeSectionServices from '@/components/home/homeSectionServices'
-import HomeSectionDefault2 from '@/components/home/homeSectionDefault2'
-import HomeSectionAboutImage from '@/components/home/homeSectionAboutImage'
-import HomeSectionLandingImage from '@/components/home/homeSectionLandingImage'
+import HomeSectionDonate from './homeSectionDonate'
+import HomeSectionProjects from './homeSectionProjects'
+import HomeSectionDefault from './homeSectionDefault'
+import HomeSectionServices from './homeSectionServices'
+import HomeSectionDefault2 from './homeSectionDefault2'
+import HomeSectionAboutImage from './homeSectionAboutImage'
+import HomeSectionLandingImage from './homeSectionLandingImage'
 import '@/styles/pages/home.scss'
 
 /**

src/components/home/homeSectionLandingImage.jsx → src/app/home/homeSectionLandingImage.jsx

@@ -1,4 +1,4 @@
-import { SectionType } from '@/components/home/home'
+import { SectionType } from './home'
 import '@/styles/pages/home.scss'
 
 /**

src/app/home/page.js

@@ -0,0 +1,9 @@
+import Home from './home'
+
+export default function HomePage() {
+  return (
+    <>
+      <Home></Home>
+    </>
+  )
+}

src/app/not-found.js

@@ -1,5 +1,5 @@
-import '@/styles/components/not-found.scss'
 import Link from 'next/link'
+import '@/styles/components/not-found.scss'
 
 export default function notFound() {
   return (

src/app/page.js

@@ -1,7 +1,7 @@
+import Home from './home/home'
 import './page.scss'
-import Home from '@/components/home/home'
 
-export default function HomePage() {
+export default function DefaultPage() {
   return (
     <>
       <Home></Home>

src/app/pitch/page.js

@@ -1,4 +1,4 @@
-import Pitch from '@/components/pitch/pitch'
+import Pitch from './pitch'
 
 export default function PitchPage() {
   return (

src/components/pitch/pitch.jsx → src/app/pitch/pitch.jsx

@@ -1,5 +1,5 @@
-import PitchSectionLanding from '@/components/pitch/pitchSectionLanding'
-import PitchSectionInstructions from '@/components/pitch/pitchSectionInstructions'
+import PitchSectionLanding from './pitchSectionLanding'
+import PitchSectionInstructions from './pitchSectionInstructions'
 import '@/styles/pages/pitch.scss'
 import '@/styles/pages/about.scss'