Getting started

System requirements

To run and develop CSESoc Learn locally, you'll need the following installed:

• Node.js
• Yarn
• Rust
• GitHub CLI - optional but strongly recommended to make working with Git easier

Getting started

1. Clone the repo

Using Git:

git clone https://github.com/csesoc/learning-platform.git

Using GitHub CLI:

gh repo clone csesoc/learning-platform

2. Install dependencies

CSESoc Learn uses Yarn for package management. Do not use npm.
In the repo folder, run

yarn install

3. Install Stork

The Stork command line tool is required to build the search index.

cargo install stork-search --locked

4. Run the development server

Start the server using

yarn dev

Open http://localhost:3000 with your browser to view CSESoc Learn. You can start editing files immediately. New content is added by creating a .mdx file in data under the relevant content type subdirectory. You can invoke search by pressing the search button or pressing Command + K.

5. (If content is modified or added) Rebuild the search index

In the repo folder, run

yarn index

to rebuild the search index. A success message will appear. Reload the page to load the new search index.

Writing new content

CSESoc Learn uses Markdown syntax for authoring content. For a quick reference to the syntax, look here.

Working with Git, Contentlayer, Stitches and the design system

This is enough to get started developing for CSESoc Learn.

• Working with Git: Read Git in 5 Minutes and the GitLab Git tutorial. If you want to make a change, create a new branch, commit your changes there, then create a pull request before merging (this can be done on GitHub web, a pop-up will appear, but the GitHub CLI is recommended for ease of use).
• Contentlayer: Have a look at the Getting Started and read the CSESoc Learn code, in particular Articles.tsx. As seen, working with content is as easy as importing and mapping things out using the usual methods you would for working with fetched API data.
• Stitches: Read through the Stitches documentation and have a close look at the example CSESoc Learn tutorial + the CSESoc Learn code. In particular, look at Overriding Styles.
• Design System: The provided components are sufficient for composing a page. Have a look at the code to get a feel for how the components work, in particular the index and articles pages. More documentation will be written later.