Merge pull request #82 from cssu/internal-improvements-1

Nextjs-Rewrite II

.eslintignore

@@ -0,0 +1,3 @@
+out
+node_modules
+.next

.eslintrc.json

@@ -23,18 +23,30 @@
                     "object",
                     "type"
                 ],
-                "pathGroups": [
-                    {
-                        "pattern": "{.,..}/**/*.scss",
-                        "group": "index",
-                        "position": "after"
-                    }
-                ],
                 "pathGroupsExcludedImportTypes": ["builtin"],
                 "alphabetize": { "order": "asc", "caseInsensitive": true },
                 "newlines-between": "always",
                 "distinctGroup": true
             }
         ]
-    }
+    },
+    "overrides": [
+        {
+            "files": ["*.mdx"],
+            "extends": ["plugin:mdx/recommended"],
+            "plugins": ["import"],
+            "rules": {
+                "max-len": "off",
+                "react/jsx-no-undef": "off",
+                "import/order": "off",
+                "indent": "off",
+                "no-restricted-imports": [
+                    "error",
+                    {
+                        "patterns": ["*"]
+                    }
+                ]
+            }
+        }
+    ]
 }

README.md

@@ -22,10 +22,10 @@ yarn start   # Start the production server
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 > [!TIP]
-> Although we recommend running the Next.js server, you can also export the website statically by setting `output: "export"` and `images: { unoptimized: true }`, and removing redirects in the `next.config.mjs` file. Refer to the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) for more information.
+> Although the Next.js build is configured to produce a static export, we recommend running the Next.js server. To do so, remove the specified lines in `next.config.mjs` file, replace all occurances of `Image` with the import from next/Image, and edit `yarn start` in the `package.json` file to run the command `next start`.
 
 > [!NOTE]  
-> Sharp is installed as a server-side dependency to optimize images. If you encounter issues with the Sharp package, install it using `yarn install --ignore-engines`.
+> Sharp is installed as a server-side dependency to optimize images. If you encounter issues with the Sharp package, install it using `yarn install --ignore-engines`. By default, this is included in the build process to ensure the correct version is installed.
 
 ## Customization
 

content/about/index.mdx

@@ -6,8 +6,6 @@ lastModified: "2024-05-18"
 summary: "About the Computer Science Student Union"
 ---
 
-import ProfileContainer from '#/ProfileContainer'
-
 The Computer Science Student Union (CSSU) represents over 1200 Computer Science students who are either taking a Computer Science course or are part of a Computer Science program of study (PoSt) at the University of Toronto St. George campus. We are a student governed body that receives funding from the Arts and Sciences' Student Union, the Department of Computer Science, and our union store. The description of the structure, rules, and processes of the union are described in our [**constitution**](/constitution.pdf). The primary goal for the CSSU team is to improve the academic, social, and professional lives of computer science students. To do so, we intend to focus on the following:
 
 - **Social Activities**: organize social events to help students in making friends in their program and form networks of mutual support.

content/community/index.mdx

@@ -6,8 +6,6 @@ lastModified: "2021-08-27"
 summary: "CS-related clubs and student groups."
 ---
 
-import ProfileContainer from '#/ProfileContainer'
-
 ## University Entities
 
 The CSSU enjoys the support of partner course unions and the Department of Computer Science.

content/posts/first-years-guide-to-cs/index.mdx

@@ -6,8 +6,6 @@ summary: "A Guide for First Year CS Students!"
 summaryImage: "first_year.jpg"
 ---
 
-import Figure from '#/Figure'
-
 2020 Edition Version 1.1 - Last Edit July 18, 2020
 
 By: Anujan M - Class of 2020, Computer Science Specialist, Host of Room 2250 S3

next.config.mjs

@@ -13,7 +13,8 @@ import mdxFrontmatterExport from './src/lib/mdxFrontmatterExport.mjs'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export',
+    // Uncomment the following blocks until `End Uncomment` to disable static export.
+    output: process.env.NODE_ENV === 'production' ? 'export' : 'standalone',
     images: {
         loader: 'custom',
         imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
@@ -28,7 +29,10 @@ const nextConfig = {
         nextImageExportOptimizer_exportFolderName: 'nextImageExportOptimizer',
         nextImageExportOptimizer_generateAndUseBlurImages: 'false',
     },
+    // End Uncomment
+    //
     // basePath: process.env.NODE_ENV === 'production' ? '/<YOUR BASE PATH HERE>' : '',
+    //
     // Accept MD and MDX files
     pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
     // Do not remove the unused parameters. They are explicitly stated here for clarity.

package.json

@@ -5,15 +5,16 @@
     "type": "module",
     "scripts": {
         "dev": "next dev",
-        "build": "yarn add sharp --dev --ignore-engines && next build && next-image-export-optimizer",
-        "start": "next start",
+        "build": "yarn lint && yarn add sharp --dev --ignore-engines && next build && next-image-export-optimizer",
+        "start": "serve -s out",
         "clean": "rm -rf .next ./public/build-images ./out",
-        "lint": "next lint"
+        "lint": "eslint ."
     },
     "dependencies": {
         "next": "14.2.3",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "sharp": "^0.33.4"
     },
     "devDependencies": {
         "@mdx-js/loader": "^3.0.1",
@@ -28,6 +29,7 @@
         "eslint-config-next": "14.2.2",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jsx-a11y": "^6.8.0",
+        "eslint-plugin-mdx": "^3.1.5",
         "gray-matter": "^4.0.3",
         "image-size": "^1.1.1",
         "next-image-export-optimizer": "^1.12.3",
@@ -40,7 +42,6 @@
         "remark-gfm": "^4.0.0",
         "remark-mdx-frontmatter": "^4.0.0",
         "remark-unwrap-images": "^4.0.0",
-        "sharp": "^0.33.4",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
     },

src/app/about/page.tsx

@@ -1,6 +1,6 @@
 import AboutMDX, { frontMatter } from '$/about/index.mdx'
 import InformationPage from '@/components/InformationPage'
-import { getFigureComponent, getImgComponent } from '@/lib/getMDXComponents'
+import { getComponentsRequiringPath } from '@/lib/getMDXComponents'
 
 import type { Metadata } from 'next'
 
@@ -14,9 +14,7 @@ export const metadata: Metadata = {
 export default function About() {
     return (
         <InformationPage metadata={frontMatter}>
-            <AboutMDX
-                components={{ ...getImgComponent(PAGE_URL), ...getFigureComponent(PAGE_URL) }}
-            />
+            <AboutMDX components={{ ...getComponentsRequiringPath(PAGE_URL) }} />
         </InformationPage>
     )
 }

src/app/ba2250-volunteering/page.tsx

@@ -1,6 +1,6 @@
 import BA2250VolunteeringMDX, { frontMatter } from '$/ba2250-volunteering/index.mdx'
 import InformationPage from '@/components/InformationPage'
-import { getFigureComponent, getImgComponent } from '@/lib/getMDXComponents'
+import { getComponentsRequiringPath } from '@/lib/getMDXComponents'
 
 import type { Metadata } from 'next'
 
@@ -14,9 +14,7 @@ export const metadata: Metadata = {
 export default function BA2250Volunteering() {
     return (
         <InformationPage metadata={frontMatter}>
-            <BA2250VolunteeringMDX
-                components={{ ...getImgComponent(PAGE_URL), ...getFigureComponent(PAGE_URL) }}
-            />
+            <BA2250VolunteeringMDX components={{ ...getComponentsRequiringPath(PAGE_URL) }} />
         </InformationPage>
     )
 }

src/app/ba2250/page.tsx

@@ -1,6 +1,6 @@
 import BA2250MDX, { frontMatter } from '$/ba2250/index.mdx'
 import InformationPage from '@/components/InformationPage'
-import { getFigureComponent, getImgComponent } from '@/lib/getMDXComponents'
+import { getComponentsRequiringPath } from '@/lib/getMDXComponents'
 
 import type { Metadata } from 'next'
 
@@ -14,9 +14,7 @@ export const metadata: Metadata = {
 export default function BA2250() {
     return (
         <InformationPage metadata={frontMatter}>
-            <BA2250MDX
-                components={{ ...getImgComponent(PAGE_URL), ...getFigureComponent(PAGE_URL) }}
-            />
+            <BA2250MDX components={{ ...getComponentsRequiringPath(PAGE_URL) }} />
         </InformationPage>
     )
 }

src/app/community/page.tsx

@@ -1,6 +1,6 @@
 import CommunityMDX, { frontMatter } from '$/community/index.mdx'
 import InformationPage from '@/components/InformationPage'
-import { getFigureComponent, getImgComponent } from '@/lib/getMDXComponents'
+import { getComponentsRequiringPath } from '@/lib/getMDXComponents'
 
 import type { Metadata } from 'next'
 
@@ -14,9 +14,7 @@ export const metadata: Metadata = {
 export default function CommunityVolunteering() {
     return (
         <InformationPage metadata={frontMatter}>
-            <CommunityMDX
-                components={{ ...getImgComponent(PAGE_URL), ...getFigureComponent(PAGE_URL) }}
-            />
+            <CommunityMDX components={{ ...getComponentsRequiringPath(PAGE_URL) }} />
         </InformationPage>
     )
 }

src/lib/collectContent.ts

@@ -7,7 +7,7 @@ import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
 import remarkUnwrapImages from 'remark-unwrap-images'
 
-import getMDXComponents, { getImgComponent, getFigureComponent } from './getMDXComponents'
+import getMDXComponents, { getComponentsRequiringPath } from './getMDXComponents'
 
 export function getContentPaths(contentType: string): string[] {
     const files = []
@@ -63,8 +63,7 @@ export async function compilePostMDX(
             },
         },
         components: {
-            ...getImgComponent(mdxFolderPath),
-            ...getFigureComponent(mdxFolderPath),
+            ...getComponentsRequiringPath(mdxFolderPath),
             ...getMDXComponents(),
         },
     })

src/lib/getMDXComponents.tsx

@@ -1,7 +1,8 @@
 import { join } from 'path'
 
-import Figure from '@/components/mdx/Figure'
-import ProfileCard from '@/components/mdx/ProfileCard'
+import Figure from '#/Figure'
+import ProfileCard from '#/ProfileCard'
+import ProfileContainer from '#/ProfileContainer'
 import MDXImage from '@/components/MDXImage'
 import MDXLink from '@/components/MDXLink'
 
@@ -17,27 +18,11 @@ export default function getMDXComponents(): MDXComponents {
                 <table>{children}</table>
             </div>
         ),
+        ProfileContainer: ProfileContainer,
     } as MDXComponents
 }
 
-export function getImgComponent(pagePathOrMdxFolderPath: string) {
-    return {
-        img: ({ src, alt }: { src?: string; alt?: string }) => (
-            <MDXImage
-                src={src}
-                alt={alt}
-                mdxFolderPath={
-                    pagePathOrMdxFolderPath.startsWith(process.cwd())
-                        ? pagePathOrMdxFolderPath
-                        : join(process.cwd(), 'content', pagePathOrMdxFolderPath)
-                }
-            />
-        ),
-    }
-}
-
-export function getFigureComponent(pagePathOrMdxFolderPath: string) {
-    // TODO: Combine with the above image component function
+export function getComponentsRequiringPath(pagePathOrMdxFolderPath: string) {
     const overridenMDXFolderPath = pagePathOrMdxFolderPath.startsWith(process.cwd())
         ? pagePathOrMdxFolderPath
         : join(process.cwd(), 'content', pagePathOrMdxFolderPath)
@@ -59,5 +44,8 @@ export function getFigureComponent(pagePathOrMdxFolderPath: string) {
                 />
             )
         },
+        img: ({ src, alt }: { src?: string; alt?: string }) => (
+            <MDXImage src={src} alt={alt} mdxFolderPath={overridenMDXFolderPath} />
+        ),
     } as MDXComponents
 }

src/mdx-components.tsx

@@ -5,7 +5,7 @@ import type { MDXComponents } from 'mdx/types'
 export function useMDXComponents(components: MDXComponents): MDXComponents {
     return {
         // img component is modified in the individual imports using
-        // getImgComponent from '@/lib/getRootComponents'
+        // getImgComponent from '@/lib/getMDXComponents'
         ...getMDXComponents(),
         ...components,
     }