Add a vitepress documentation server for the repository

Author: leeyi45

docs/.gitignore

@@ -0,0 +1,2 @@
+.vitepress/cache
+.vitepress/dist

docs/.vitepress/config.ts

@@ -0,0 +1,81 @@
+import { defineConfig } from 'vitepress';
+import _package from '../../package.json' with { type: 'json' };
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'Modules Developer Documentation',
+  description: 'Developer documentation for the Source Academy modules repository',
+  srcDir: 'src',
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Develop a Module', link: '/modules' }
+    ],
+
+    sidebar: {
+      '/': [{
+        text: 'Examples',
+        items: [
+          { text: 'Markdown Examples', link: '/markdown-examples' },
+          { text: 'Runtime API Examples', link: '/api-examples' }
+        ]
+      }],
+      '/modules/': [
+        {
+          text: 'Developing Modules',
+          items: [
+            {
+              text: 'Modules Overview',
+              link: '/modules'
+            },
+            {
+              text: 'Writing Tests',
+              link: '/modules/testing'
+            },
+            {
+              text: 'Linting',
+              link: '/modules/linting'
+            },
+            {
+              text: 'Module Contexts',
+              link: '/modules/context'
+            },
+            {
+              text: 'Bundles',
+              items: [
+                {
+                  text: 'Bundles Overview',
+                  link: '/modules/bundle'
+                },
+                {
+                  text: 'Creating a Bundle',
+                  link: '/modules/bundle/creating'
+                },
+                {
+                  text: 'Editing a Bundle',
+                  link: '/modules/bundle/editing'
+                },
+                {
+                  text: 'Compiling a Bundle',
+                  link: '/modules/bundle/compiling'
+                }
+              ]
+            },
+            {
+              text: 'Tabs',
+              items: [{
+                text:' Tabs Overview',
+                link: '/modules/tabs/overview'
+              }]
+            }
+          ]
+        },
+      ]
+    },
+
+    socialLinks: [
+      { icon: 'github', link: _package.repository }
+    ]
+  }
+});

docs/.vitepress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["./config.ts"]
+}

docs/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@sourceacademy/modules-devdocs",
+  "description": "Developer documentation for the Source Academy modules repository",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "devDependencies": {
+    "vitepress": "^1.6.3"
+  },
+  "scripts": {
+    "docs:dev": "vitepress dev .",
+    "docs:build": "vitepress build .",
+    "docs:preview": "vitepress preview ."
+  }
+}

docs/src/getting-started.md

@@ -0,0 +1,31 @@
+# Setting up the development environment
+To begin developing using this repository, follow the following steps to setup your local development environment.
+
+## 1. Download and Install NodeJS
+A stable version of [NodeJS](https://nodejs.org/en/) is required on your local development machine. Select a version of NodeJS that is compatible with the version that the repository uses (found in the `.node-version` file). Typically, the LTS release will suffice.
+
+You can use [nvm](https://github.com/creationix/nvm#installation) _(macOS/Linux)_ or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) _(windows)_ to switch Node versions between different projects.
+
+## 2. Clone this Repository
+Clone the modules repository to your local machine using `git` or your tool of choice.
+
+## 3. Install Yarn
+The modules repository pipelines rely on the [Yarn](https://yarnpkg.com/) package manager. To install the Yarn package manager through [NPM](https://www.npmjs.com/), you can run the following command in the development directory: `npm install yarn`
+
+> [!TIP]
+> If you already have Yarn installed, you might find that you have a different version installed than the one used by the repository. Use the `yarn set version` command to install the correct version.
+
+> [!TIP]
+> If you are on MacOS, you may find that the version of Yarn used by your terminal is not correct, even after running `yarn set version`. You may have to run the command every time you start a new terminal instance.
+
+At this point it is not necessary to run `yarn install` yet to install dependencies. Depending on what you are doing, there are different methods for installing dependencies.
+
+## Next Steps
+Once your environment has been setup, refer to the following guides:
+* [Creating a new bundle](./bundle/creating)
+* [Creating a new tab](./creating/tab)
+* [Modifying an existing bundle](./idk)
+
+## Development with local versions of `js-slang`
+
+If you require a custom version of `js-slang` follow the instructions [here](https://github.com/source-academy/js-slang#using-your-js-slang-in-your-local-source-academy).

docs/src/index.md

@@ -0,0 +1,34 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Modules Developer Documentation"
+  text: "Developer documentation for the Source Academy modules repository"
+  tagline: My great project tagline
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /getting-started
+    - theme: brand
+      text: Create a tab or bundle
+      link: /creating
+    - theme: brand
+      text: Repo Overview
+    - theme: alt
+      text: Developer Instructions
+      link: /api-examples
+
+features:
+  - title: Creating a bundle
+    details: Instructions for creating a bundle
+
+  - title: Creating a tab
+    details: Instructions for creating a tab
+
+  - title: The Development Server
+    details: How and why to use the development server
+
+  - title: Build Tools
+    details: Details behind the tooling that compiles Source Academy modules
+---

docs/src/modules/bundle/compiling.md

@@ -0,0 +1,69 @@
+# Compiling a Bundle
+This page contains information on compiling bundles, both for consumption by `js-slang` as well as other bundles.
+
+> [!WARNING]
+> The build tools automatically ignore files under a `__tests__` directory. Such files are considered
+> test files and will not be included in the compiled output.
+
+## For `js-slang`
+In its raw ESM format, the bundle is unsuitable for use with `js-slang`. It is thus necessary to compile your written Typescript into the format needed by `js-slang`.
+
+Run the following command from within your bundle directory.
+
+```sh
+yarn build
+```
+
+Note that running this command will **NOT** perform typechecking. If you wish to perform typechecking, use the following command:
+```sh
+yarn build --tsc
+```
+
+This will run the TypeScript compiler before compiling your bundle. If there are any type errors, it will be displayed in the command line
+and your bundle will not be compiled.
+
+The output for your bundle will be placed at `/build/bundles/[your_bundle_name].js`.
+
+## For Other Bundles
+A Source Bundle may use another Source Bundle as a dependency. As an example, the `plotly` bundle relies on the `curve` bundle:
+```ts {2,3}
+// plotly/src/curve_functions.ts
+import { x_of, y_of, z_of, r_of, g_of, b_of } from '@sourceacademy/bundle-curve';
+import type { Curve } from '@sourceacademy/bundle-curve/curves_webgl';
+import Plotly, { type Data, type Layout } from 'plotly.js-dist';
+import { CurvePlot } from './plotly';
+```
+
+If you intend for your bundle to be consumed from other bundles, do the following:
+
+### 1. Ensure that your `tsconfig.json` is properly configured
+```json
+{
+  "compilerOptions" {
+    "outDir": "./dist", // Make sure outDir is specified
+    "noEmit": false,    // noEmit needs to be false
+    "declaration": true // declaration needs to be true
+  }
+}
+```
+
+### 2. Ensure that your `package.json` points to the correct exports
+```json
+{
+  "name": "@sourceacademy/bundle-curve",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./dist/*.js"
+  },
+  "scripts": {
+    "prepare": "yarn buildtools tsc"
+  }
+}
+```
+Refer to [this page](https://nodejs.org/api/packages.html#package-entry-points) for more information on how to configure your package exports.
+
+The `prepare` script is necessary as the bundle will need to be built using `tsc` during installation.
+
+### 3. Run `tsc`
+If necessary, run `yarn tsc` to produce Javascript and Typescript declaration files.

docs/src/modules/bundle/creating/index.md

@@ -0,0 +1,38 @@
+# Creating a Bundle
+This page contains instructions for creating a new bundle from scratch. If you are looking to edit an existing bundle refer to [these](../editing) instructions instead.
+## Running the Template Command
+> [!TIP]
+> If necessary, before running the `template` command, you can run 
+> ```sh
+> yarn workspaces focus @sourceacademy/modules
+> ```
+> to install **only** the dependencies required for your creating nbundle.
+
+To create a new bundle, use the `template` command.
+
+```sh
+yarn template
+```
+This will start an interactive prompt that will help you through the process of creating a bundle.  Enter `module` to create a new bundle.
+
+```
+What would you like to create? (module/tab)
+module
+```
+
+Then enter the name of your new bundle. It must be in `snake_case`.
+```
+What would you like to create? (module/tab)
+module
+
+What is the name of your new module? (eg. binary_tree)
+new_bundle
+```
+
+This will create a folder under `src/bundles/new_bundle` with all the necessary files for creating your bundle:
+
+![](image.png)
+
+From there you can edit your bundle as necessary
+
+When you are ready to compile you can refer to [this](../editing/compiling) page.

docs/src/modules/bundle/creating/new_bundle.png

@@ -0,0 +1,39 @@
+# Editing an Existing Bundle
+This page contains instructions for modifying an existing bundle. If you are creating a new bundle from scratch, refer to [these](../creating/) instructions instead.
+
+## Installing Dependencies
+To install **only** the dependencies required by the bundle you are modifying, use the command below:
+
+```sh
+yarn workspaces focus @sourceacademy/bundle-[desired bundle]
+```
+
+## Adding Dependencies
+Your bundle may need other Javascript packages. To add a dependency to your bundle, run the command below:
+```sh
+yarn add [dependency]
+```
+
+If the dependency does not need to be present during runtime, then use:
+```sh
+yarn add --dev [dependency]
+```
+This adds the dependency to `devDependencies` instead.
+
+> [!WARNING]
+> You should only run this command in the directory of your bundle. Otherwise, the dependency will end up being added to the
+> root repository.
+
+> [!NOTE]
+> There are certain dependencies that are common to all bundles (like `react`). When adding such a dependency, remember to add the exact version
+> specified in the root repository `package.json`:
+> ```sh
+> yarn add react@^18.3.1
+> ```
+> You can also use the command `yarn constraints`  to check if you have incorrectly specified the version of a dependency.
+
+> [!NOTE]
+> When adding dependencies that originate from the repository (e.g `@sourceacademy/modules-lib`), use `workspace:^` as the given version:
+> ```sh
+> yarn add @sourceacademy/modules-lib@workspace:^
+> ```