From 167e1df54ef55cc3443b514e8ab1e660afca7b4a Mon Sep 17 00:00:00 2001 From: David Liu Date: Sat, 7 Dec 2024 03:55:31 +0000 Subject: [PATCH] Update documentation links and syntax highlighting (#120) --- CHANGELOG.md | 1 + README.md | 16 ++++++++-------- demo/README.md | 4 ++-- docs/README.md | 8 ++++---- memory-viz/README.md | 22 +++++++++++----------- webstepper/README.md | 4 ++-- 6 files changed, 28 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e3a2892..925758b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ### 📚 Documentation and demo website changes - Ensure GitHub Action deploys documentation to correct location +- Fixed links and syntax highlighting in READMEs ### 🔧 Internal changes diff --git a/README.md b/README.md index 2c32d46..4fa3367 100644 --- a/README.md +++ b/README.md @@ -4,19 +4,19 @@ Welcome to the repository for the MemoryViz project! MemoryViz is a visualization tool that generates memory model diagrams for Python code, aimed at students and educators. MemoryViz is written in Javascript and is built on top of the [Rough.js](https://roughjs.com/) library. -For more information, check out our [demo](https://www.cs.toronto.edu/~david/memory-viz/demo/) [project documentation](https://www.cs.toronto.edu/~david/memory-viz/). +For more information, check out our [demo](https://www.cs.toronto.edu/~david/memory-viz/demo/) and [project documentation](https://www.cs.toronto.edu/~david/memory-viz/). ## Installation Install MemoryViz using `npm` (requires [Node.js](https://nodejs.org/en) to be installed): -```console +```bash $ npm install memory-viz ``` ## Example -Given a JSON file [`demo.json`](examples/demo.json) that encodes a state of Python memory and some styling options: +Given a JSON file [`demo.json`](examples/memory-viz-cli/demo.json) that encodes a state of Python memory and some styling options: ```json [ @@ -66,32 +66,32 @@ This repository contains multiple [npm workspaces](https://docs.npmjs.com/cli/v7 1. Install [Node.js](https://nodejs.org/en/). 2. Clone the MemoryViz repository and `cd` into it: - ```console + ```bash $ git clone https://github.com/david-yz-liu/memory-viz.git $ cd memory-viz ``` 3. Install the dependencies: - ```console + ```bash $ npm install ``` 4. Install the pre-commit hooks to automatically format your code when you make commits: - ```console + ```bash $ npx husky init ``` 5. Compile the MemoryViz library: - ```console + ```bash $ npm run build-dev --workspace=memory-viz ``` 6. Run the test suite to check that all tests pass: - ```console + ```bash $ npm test ``` diff --git a/demo/README.md b/demo/README.md index 5190a6f..b140f99 100644 --- a/demo/README.md +++ b/demo/README.md @@ -10,13 +10,13 @@ _Note_: you can instead run the commands in the root project directory by adding 1. First, build the assets using Webpack: - ```console + ```bash $ npm run build-dev ``` 2. Then run the website: - ```console + ```bash $ npm start ``` diff --git a/docs/README.md b/docs/README.md index 5bb0dc3..3ddc3fc 100644 --- a/docs/README.md +++ b/docs/README.md @@ -7,7 +7,7 @@ You can instead run them in the root project directory by adding the argument `- ## Local Development -```console +```bash $ npm start ``` @@ -16,7 +16,7 @@ Most changes are reflected live without having to restart the server. ## Build -```console +```bash $ npm run build ``` @@ -26,13 +26,13 @@ This command generates static content into the `build` directory and can be serv Using SSH: -```console +```bash $ USE_SSH=true npm run deploy ``` Not using SSH: -```console +```bash $ GIT_USER= npm run deploy ``` diff --git a/memory-viz/README.md b/memory-viz/README.md index 1e5f0f5..33d2aff 100644 --- a/memory-viz/README.md +++ b/memory-viz/README.md @@ -3,13 +3,13 @@ MemoryViz is a visualization tool that generates memory model diagrams for Python code, aimed at students and educators. MemoryViz is written in Javascript and is built on top of the [Rough.js](https://roughjs.com/) library. -For more information, check out our [demo](https://www.cs.toronto.edu/~david/memory-viz/demo/) [project documentation](https://www.cs.toronto.edu/~david/memory-viz/). +For more information, check out our [demo](https://www.cs.toronto.edu/~david/memory-viz/demo/) and [project documentation](https://www.cs.toronto.edu/~david/memory-viz/). ## Installation Install MemoryViz using `npm` (requires [Node.js](https://nodejs.org/en) to be installed): -```console +```bash $ npm install memory-viz ``` @@ -19,7 +19,7 @@ MemoryViz can be run from the command line or using its Javascript API. ### Command-line interface -Given a JSON file [`demo.json`](examples/demo.json) that encodes a state of Python memory and some styling options: +Given a JSON file [`demo.json`](https://github.com/david-yz-liu/memory-viz/blob/master/examples/memory-viz-cli/demo.json) that encodes a state of Python memory and some styling options: ```json [ @@ -45,13 +45,13 @@ Given a JSON file [`demo.json`](examples/demo.json) that encodes a state of Pyth you can run the following command in the terminal: -```console +```bash $ npx memory-viz --output demo_output.svg demo.json ``` This producs an SVG file, `demo_output.svg`, that visualizes the state of memory: -![Sample usage svg output](examples/demo_output.svg) +![Sample usage svg output](https://github.com/david-yz-liu/memory-viz/blob/master/examples/memory-viz-cli/demo_output.svg) ## Javascript API (Node.js) @@ -98,32 +98,32 @@ Here is a [standalone example](https://github.com/david-yz-liu/memory-viz/tree/m 1. Install [Node.js](https://nodejs.org/en/). 2. Clone the MemoryViz repository and `cd` into it: - ```console + ```bash $ git clone https://github.com/david-yz-liu/memory-viz.git $ cd memory-viz ``` 3. Install the dependencies: - ```console + ```bash $ npm install ``` 4. Install the pre-commit hooks to automatically format your code when you make commits: - ```console + ```bash $ npx husky init ``` 5. Compile the MemoryViz library: - ```console + ```bash $ npm run build-dev --workspace=memory-viz ``` 6. Run the test suite to check that all tests pass: - ```console + ```bash $ npm test ``` @@ -131,7 +131,7 @@ Here is a [standalone example](https://github.com/david-yz-liu/memory-viz/tree/m **Automatic Javascript compilation**. 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 +```bash $ npm run watch --workspace=memory-viz ``` diff --git a/webstepper/README.md b/webstepper/README.md index 7731250..c80c7b6 100644 --- a/webstepper/README.md +++ b/webstepper/README.md @@ -10,13 +10,13 @@ _Note_: you can instead run the commands in the root project directory by adding 1. First, build the assets using Webpack: - ```console + ```bash $ npm run build-dev ``` 2. Then run the website: - ```console + ```bash $ npm start ```