Consolidate documentation website under docs/ (#14)

.gitignore

@@ -7,8 +7,8 @@
 /out-tsc
 
 # Static web output
-/build
-.docusaurus
+build/
+.docusaurus/
 
 # Runtime data
 pids

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ npm install
+```
+
+### Local Development
+
+```
+$ npm run start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ npm run build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true npm run deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> npm run deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/docs/04-style.md → docs/docs/04-style.md

@@ -85,10 +85,12 @@ user-defined style --> drawAll --> drawClass/drawObject --> drawText/drawRect
 
 ### Example 1
 
-`style:
+```
+style:
         {"text_value" : {"font-style" : "italic"},
         'box_id': {fill: 'blue', fillStyle: "dots"}}
-`
+```
+
 In this example, it is important to note that for box styles
 (the ones which uses rough.js module), `fill` must be passed in if
 fillStyle argument will be passed in by the user. Otherwise, the behavior of the style will be in the default format
@@ -97,10 +99,12 @@ flexibility for defining the styles related to both boxes and text drawn on the
 
 ### Example 2
 
-`style: {
+```
+style: {
         "box_container": {fill:"green", fillStyle: "zigzag"},
         "box_id": {fill: 'red', fillWeight: 3},
-        "box_type": {bowing: 8, stroke: "green", strokeWidth: 3}}`
+        "box_type": {bowing: 8, stroke: "green", strokeWidth: 3}}
+```
 
 This example illustrates that our implementation for box styles are defined on
 three boxes: the container, the box that represents the id and the box that represents
@@ -109,10 +113,12 @@ are drawn on the canvas (two for stack-frames, as they do not have ids associate
 
 ### Example 3
 
-`style:{
+```
+style:{
       "text_id" : {fill : "yellow", stroke: "green"},
       "text_value": {"font-style" : "italic"},
-      "text_type": {"font-size: "xx-large"}}`
+      "text_type": {"font-size: "xx-large"}}
+```
 
 This example shows that for each container (for each data that is represented on the canvas)
 there are the texts that the user can alter its style: the text representing the value and/or values,

website/docs/99-api/index.md → docs/docs/99-api/index.md

@@ -37,7 +37,7 @@ This uses the [Rough.js](https://roughjs.com/) Javascript library to emulate the
 4. Compile the Javascript assets using [webpack](https://webpack.js.org/guides/getting-started/):
 
     ```console
-    $ npm run build
+    $ npm run build-dev
     ```
 
 5. Install the pre-commit hooks to automatically format your code when you make commits:
@@ -53,7 +53,7 @@ You should then be able to try out the demo in the [Example usage](#example-usag
 
 ### Automatic Javascript compilation
 
-Rather than running `npm run build` to recompile your Javascript bundle every time you make a change, you can instead run the following command:
+Rather than running `npm run build-dev` to recompile your Javascript bundle every time you make a change, you can instead run the following command:
 
 ```console
 $ npm run watch

docs/docs/99-api/modules.md

@@ -0,0 +1,35 @@
+---
+id: "modules"
+title: "memory-models-rough"
+sidebar_label: "Exports"
+sidebar_position: 0.5
+custom_edit_url: null
+---
+
+## Functions
+
+### draw
+
+▸ **draw**(`objects`, `automation`, `configuration`): `any`
+
+Draw the given objects on the canvas.
+
+The format of the array of objects must adhere to the description provided in MemoryModel.drawAll.
+
+#### Parameters
+
+| Name            | Type  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| :-------------- | :---- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `objects`       | `any` | The array of objects to be drawn: this could be passed as an actual JavaScript array of objects, or as a JSON file containing the object array. This array of objects may also include the user-defined style configuration. See the demo files and style.md file for details.                                                                                                                                                                             |
+| `automation`    | `any` | Whether the coordinates (of the objects on the canvas) should be automatically generated or manually inputted.                                                                                                                                                                                                                                                                                                                                             |
+| `configuration` | `any` | The configuration (display settings) defined by the user. This is also the place to define `sort_by` ("height" or "id") for the object space. NOTE: In the case that automation == true, then the user must define configuration.width, as this will be used as the "max canvas width" for the automation process. If automation == false, then all configuration properties are optional, and the function will still operate even without defining them. |
+
+#### Returns
+
+`any`
+
+the produced canvas
+
+#### Defined in
+
+[user_functions.ts:29](https://github.com/david-yz-liu/memory-models-rough/blob/e58844e/src/user_functions.ts#L29)

docs/docs/intro.md

@@ -0,0 +1,47 @@
+---
+sidebar_position: 1
+---
+
+# Tutorial Intro
+
+Let's discover **Docusaurus in less than 5 minutes**.
+
+## Getting Started
+
+Get started by **creating a new site**.
+
+Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+
+### What you'll need
+
+-   [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
+    -   When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
+## Generate a new site
+
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run the command:
+
+```bash
+npm init docusaurus@latest my-website classic
+```
+
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
+## Start your site
+
+Run the development server:
+
+```bash
+cd my-website
+npm run start
+```
+
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

website/docusaurus.config.js → docs/docusaurus.config.js

@@ -1,8 +1,10 @@
 // @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
+// `@type` JSDoc annotations allow editor autocompletion and type checking
+// (when paired with `@ts-check`).
+// There are various equivalent ways to declare your Docusaurus config.
+// See: https://docusaurus.io/docs/api/docusaurus-config
 
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+import { themes as prismThemes } from "prism-react-renderer";
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -14,7 +16,7 @@ const config = {
     url: "https://www.cs.toronto.edu/",
     // Set the /<baseUrl>/ pathname under which your site is served
     // For GitHub pages deployment, it is often '/<projectName>/'
-    baseUrl: "/~david/memory-models-rough/",
+    baseUrl: "/~david/memory-models-rough",
 
     // GitHub pages deployment config.
     // If you aren't using GitHub pages, you don't need these.
@@ -24,9 +26,9 @@ const config = {
     onBrokenLinks: "throw",
     onBrokenMarkdownLinks: "warn",
 
-    // Even if you don't use internalization, you can use this field to set useful
-    // metadata like html lang. For example, if your site is Chinese, you may want
-    // to replace "en" with "zh-Hans".
+    // Even if you don't use internationalization, you can use this field to set
+    // useful metadata like html lang. For example, if your site is Chinese, you
+    // may want to replace "en" with "zh-Hans".
     i18n: {
         defaultLocale: "en",
         locales: ["en"],
@@ -38,8 +40,7 @@ const config = {
             /** @type {import('@docusaurus/preset-classic').Options} */
             ({
                 docs: {
-                    routeBasePath: "/",
-                    sidebarPath: require.resolve("./sidebars.js"),
+                    sidebarPath: "./sidebars.js",
                     // Please change this to your repo.
                     // Remove this to remove the "edit this page" links.
                     editUrl:
@@ -54,7 +55,7 @@ const config = {
                 //     'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
                 // },
                 theme: {
-                    customCss: require.resolve("./src/css/custom.css"),
+                    customCss: "./src/css/custom.css",
                 },
             }),
         ],
@@ -92,8 +93,8 @@ const config = {
                         title: "Docs",
                         items: [
                             {
-                                label: "Docs",
-                                to: "/api",
+                                label: "Tutorial",
+                                to: "/docs/intro",
                             },
                         ],
                     },
@@ -131,8 +132,8 @@ const config = {
                 copyright: `Copyright © ${new Date().getFullYear()} David Liu. Built with Docusaurus.`,
             },
             prism: {
-                theme: lightCodeTheme,
-                darkTheme: darkCodeTheme,
+                theme: prismThemes.github,
+                darkTheme: prismThemes.dracula,
             },
         }),
     plugins: [
@@ -141,13 +142,12 @@ const config = {
 
             // Plugin / TypeDoc options
             {
-                entryPoints: ["../src/user_functions.js"],
-                tsconfig: "../jsconfig.json",
-
+                entryPoints: ["../src/user_functions.ts"],
+                tsconfig: "../tsconfig.json",
                 out: "99-api",
             },
         ],
     ],
 };
 
-module.exports = config;
+export default config;