Add changelog page (#574)

Cargo.toml

@@ -5,7 +5,7 @@ edition = "2021"
 publish = false
 
 [workspace]
-members = ["crates/*"]
+members = ["crates/*", "tools/changelog-gen"]
 
 [dependencies]
 anyhow = "1.0.71"

client/src/App.tsx

@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import { PrivateRoute } from './components/PrivateRoute';
 import { About } from './pages/About';
+import { Changelog } from './pages/Changelog';
 import { CoursePage } from './pages/CoursePage';
 import { Explore } from './pages/Explore';
 import { Home } from './pages/Home';
@@ -18,6 +19,7 @@ const App = () => {
  <Routes>
  <Route index element={<Home />} />
  <Route path='/about' element={<About />} />
+ <Route path='/changelog' element={<Changelog />} />
  <Route path='/explore' element={<Explore />} />
  <Route path='/privacy' element={<PrivacyPolicy />} />
  <Route

client/src/model/ChangelogItem.ts

@@ -0,0 +1,5 @@
+export type ChangelogItem = {
+ number: number;
+ summary: string;
+ url: string;
+};

client/src/pages/About.tsx

@@ -73,9 +73,9 @@ const Person = ({
  links?: PersonLink[];
 }) => {
  return (
- <li className='mt-6 flex items-center gap-x-4'>
+ <li className='flex flex-col items-center gap-y-2 p-4'>
  <img className='w-[100px] rounded-full' src={imageUrl} />
- <div className='flex-row'>
+ <div className='flex flex-col items-center'>
  <Paragraph>{name}</Paragraph>
  <div className='flex gap-x-2'>
  {links?.map((link: PersonLink, i) => (
@@ -182,27 +182,36 @@ export const About = () => {
  />
  <meta property='twitter:title' content={`About - mcgill.courses`} />
  </Helmet>
-
- <Title>Welcome to mcgill.courses!</Title>
+ <Title>
+ Welcome to{' '}
+ <span
+ style={{
+ color: 'rgb(197, 31, 31)',
+ }}
+ >
+ mcgill.courses
+ </span>
+ !
+ </Title>
  <Paragraph className='leading-loose text-gray-700 dark:text-gray-200'>
  <Link className='underline' to='/'>
  mcgill.courses
  </Link>{' '}
  is an open-sourced, student-made review website for courses offered
- and instructors teaching at McGill University. Our platform aims to
- provide transparent and accurate information to help with informed
- decision-making. We encourage contributions from the McGill community
- to ensure the resource remains valuable.
+ and instructors teaching at{' '}
+ <a className='underline' href='https://www.mcgill.ca/'>
+ McGill University
+ </a>
+ . Our platform aims to provide transparent and accurate information to
+ help with informed decision-making. We encourage contributions from
+ the McGill community to ensure the resource remains valuable.
  </Paragraph>
-
  <br />
-
  <Paragraph>
  <span className='font-bold'>Disclaimer</span>: mcgill.courses is not
  affiliated with McGill University.
  </Paragraph>
-
- <Title>History & The Team</Title>
+ <Title>History</Title>
  <Paragraph>
  <Link className='underline' to='/'>
  mcgill.courses
@@ -220,9 +229,19 @@ export const About = () => {
  it has grown into a full-fledged platform with a team of dedicated
  developers and designers.
  </Paragraph>
- {people.map((person) => (
- <Person {...person} />
- ))}
+ <ul className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+ {people.map((person) => (
+ <Person key={person.name} {...person} />
+ ))}
+ </ul>
+ <Paragraph className='mt-4'>
+ For those curious about what the development team has been shipping,
+ check out our{' '}
+ <Link className='underline' to='/changelog'>
+ changelog
+ </Link>{' '}
+ page!
+ </Paragraph>
  <Title>FAQ</Title>
  <QuestionsAnswers input={questions} />
  <Title>Contact Us</Title>

client/src/pages/Changelog.tsx

@@ -0,0 +1,78 @@
+import { Helmet } from 'react-helmet-async';
+
+import changelogItems from '../assets/changelog.json';
+import { Layout } from '../components/Layout';
+import { ChangelogItem } from '../model/ChangelogItem';
+
+const typedChangelogItems: Record<string, ChangelogItem[]> = changelogItems;
+
+const parseMonthString = (monthString: string): Date => {
+ const [month, year] = monthString.split(' ');
+ return new Date(`${month} 1, ${year}`);
+};
+
+const sortChangelogItems = (
+ items: Record<string, ChangelogItem[]>
+): [string, ChangelogItem[]][] => {
+ return Object.entries(items).sort(([a], [b]) => {
+ const dateA = parseMonthString(a);
+ const dateB = parseMonthString(b);
+ return dateB.getTime() - dateA.getTime();
+ });
+};
+
+export const Changelog = () => {
+ const sortedChangelogItems = sortChangelogItems(typedChangelogItems);
+
+ return (
+ <Layout>
+ <Helmet>
+ <title>Changelog - mcgill.courses</title>
+ <meta property='og:type' content='website' />
+ <meta property='og:url' content={`https://mcgill.courses/changelog`} />
+ <meta property='og:title' content={`Changelog - mcgill.courses`} />
+ <meta
+ property='twitter:url'
+ content={`https://mcgill.courses/changelog`}
+ />
+ <meta property='twitter:title' content={`Changelog - mcgill.courses`} />
+ </Helmet>
+
+ <div className='flex flex-col items-center py-8'>
+ <div className='mb-16'>
+ <h1 className='text-center text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-200 sm:text-5xl'>
+ Changelog
+ </h1>
+ <p className='mt-2 text-center text-sm text-gray-600 dark:text-gray-400 md:text-base'>
+ Check out what the development team has been shipping each month.
+ </p>
+ </div>
+ <div className='w-full max-w-4xl px-4 sm:px-6 lg:px-8'>
+ {sortedChangelogItems.map(([month, items]) => (
+ <div key={month} className='mb-8'>
+ <h2 className='text-2xl font-semibold text-gray-900 dark:text-gray-200'>
+ {month}
+ </h2>
+ {items.map((item, index) => (
+ <div key={index} className='mt-4'>
+ <p className='text-lg text-gray-800 dark:text-gray-300'>
+ - {item.summary.replace('/^- /', '')} (
+ <a
+ href={item.url}
+ className='text-blue-600 dark:text-blue-400'
+ target='_blank'
+ rel='noopener noreferrer'
+ >
+ #{item.number}
+ </a>
+ )
+ </p>
+ </div>
+ ))}
+ </div>
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+};

tools/changelog-gen/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "changelog-gen"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+anyhow = "1.0.83"
+async-openai = "0.21.0"
+chrono = "0.4.38"
+clap = { version = "4.5.4", features = ["derive"] }
+dotenv = "0.15.0"
+env_logger = "0.11.3"
+log = "0.4.21"
+octocrab = "0.38.0"
+serde = { version = "1.0.201", features = ["derive"] }
+serde_json = "1.0.117"
+tokio = { version = "1.28.2", features = ["rt-multi-thread", "macros"] }

tools/changelog-gen/README.md

@@ -0,0 +1,4 @@
+### changelog-gen
+
+**changelog-gen** is a tool that outputs monthly-scoped AI generated summaries for
+pull requests present in a GitHub repository.

tools/changelog-gen/justfile

@@ -0,0 +1,9 @@
+set dotenv-load
+
+export RUST_LOG := 'info'
+
+fmt:
+ cargo fmt
+
+run *args:
+ cargo run -- {{args}}

tools/changelog-gen/prompt.txt

@@ -0,0 +1,21 @@
+Create a short, non-technical, and detailed blurb describing the purpose and
+changes in the following pull request.
+
+Examples:
+
+- Added support for using custom templates in `generate` command.
+- Fixed an issue with overflowing text in long paragraphs.
+- Updated dependencies to improve performance and security.
+
+Be sure to never generate a summary that starts with 'This pull request does ...'.
+We don't want to hear the phrase 'pull request' in the summary.
+
+Generate sentences in past tense format, as the PR is already merged. Use words such as 'added',
+'fixed', 'updated', etc.
+
+Never include a '-' at the beginning of the sentence.
+
+Never mention the issue number if its present within the pull request description.
+
+Be straight to the point and try to be as concise and as easy to understand for non-technical
+users as possible.