MSER 521 Course Website

A modern, responsive course website built with Next.js, featuring markdown content support and Tailwind CSS styling.

Features

• Responsive Design: Mobile-friendly layout that works on all devices
• Markdown Support: Easy content management using markdown files
• Modern UI: Clean, professional design with Tailwind CSS
• Navigation: Intuitive navigation between course sections
• Content Pages: Syllabus, assignments, resources, and schedule

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd course-website

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

Project Structure

course-website/
├── content/                 # Markdown content files
│   ├── syllabus.md         # Course syllabus
│   ├── assignments.md      # Course assignments
│   └── resources.md        # Course resources
├── src/
│   ├── app/               # Next.js app router pages
│   │   ├── page.tsx       # Syllabus home page
│   │   ├── syllabus/      # Syllabus compatibility route
│   │   ├── assignments/   # Assignments page
│   │   └── resources/     # Resources page
│   └── lib/               # Utility functions
│       └── markdown.ts    # Markdown parsing utilities
├── public/                 # Static assets
└── tailwind.config.ts     # Tailwind CSS configuration

Content Management

Adding New Content

1. Create a new markdown file in the content/ directory
2. Add frontmatter metadata at the top:

---
title: 'Page Title'
date: '2026-01-01'
excerpt: 'Brief description'
---

3. Create a corresponding page in src/app/ directory
4. Use the getPostData() function to render the markdown content

Markdown Features

The website supports standard markdown syntax:

• Headers (# ## ###)
• Lists (bulleted and numbered)
• Links and images
• Bold and italic text
• Code blocks
• Tables

Customization

Styling

• Modify tailwind.config.ts to customize colors, fonts, and spacing
• Update src/app/globals.css for global styles
• Use Tailwind CSS classes for component styling

Navigation

• Edit src/app/layout.tsx to modify the navigation menu
• Add or remove navigation links as needed

Layout

• Adjust the main container width in layout.tsx
• Modify page layouts in individual page components

Deployment

Build for Production

npm run build

Deploy Options

• Vercel: Recommended for Next.js apps
• Netlify: Alternative deployment platform
• Self-hosted: Deploy to your own server

Technologies Used

• Next.js 15: React framework with app router
• TypeScript: Type-safe JavaScript
• Tailwind CSS: Utility-first CSS framework
• gray-matter: Frontmatter parsing
• remark: Markdown processing
• date-fns: Date formatting utilities

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is licensed under the MIT License.

Support

For questions or issues:

• Check the documentation
• Review the code examples
• Open an issue on GitHub