From 7988e8c34686183381f766ec64be1b9bcb4e18df Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Mon, 30 Mar 2026 15:11:58 -0400
Subject: [PATCH 1/8] chore: Changed main README to reflect current state of
 repo

---
 README.md | 59 +++++++++----------------------------------------------
 1 file changed, 9 insertions(+), 50 deletions(-)

diff --git a/README.md b/README.md
index 2be4015..e42dcf5 100644
--- a/README.md
+++ b/README.md
@@ -1,59 +1,18 @@
 # Reactome
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.2.
+REACTOME is an open-source, open access, manually curated and peer-reviewed pathway database.
 
-## Development server
-
-To start a local development server, run:
-
-```bash
-ng serve
-```
-
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the project run:
-
-```bash
-ng build
-```
-
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
+## Local Development Server
+To setup a local environment
 
 ```bash
-ng e2e
+npm install --legacy-peer-deps
+npm start
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+## Usage
+Reactome has a wide range of features, to explore more of Reactome or get more information visit [the documentation page](https://reactome.org/documentation) or see the ````/documentation```` folder in the root directory.
 
-## Additional Resources
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+## LICENSE
+[Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0)

From f5a99a634095bec0360edb7a7a394b04a4b4f956 Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Mon, 30 Mar 2026 15:50:20 -0400
Subject: [PATCH 2/8] chore: Added local environment installation instructions
 (npm)

---
 documentation/local-environment.md | 34 ++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 documentation/local-environment.md

diff --git a/documentation/local-environment.md b/documentation/local-environment.md
new file mode 100644
index 0000000..6a6d4ba
--- /dev/null
+++ b/documentation/local-environment.md
@@ -0,0 +1,34 @@
+# Guide to Setting up Reactome as a local Environment
+**Hello and welcome to the local environment installation guide!**  
+In an effort to minimize the suffering of all who come here after me I will do my best to assume no pre-exsisting knowledge on github or Angular development.  
+
+Feel free to skip ahead if you have already completed some of these steps!
+
+## Step 1: Installing git
+If you are rolling your eyes at the pedantry of this guide please skip to the next step.  
+  
+In order to get a local version of Reactome on your computer, you will need to get the code onto your computer. We will be doing this with the command line tool git which you can install for Windows, Linux or MacOS [here](https://git-scm.com/install/).
+  
+Once git is installed clone and enter the repository with the following commands:  
+````
+git clone https://github.com/reactome/WebsiteAngular.git
+cd WebsiteAngular
+````  
+this will place a local copy of the project onto you computer and open the folder containing it.
+  
+
+## Step 2: Installing Node
+Node is the tool that will compile and run the reactome project. You can download it [here](https://nodejs.org/en/download)!  
+Once node is installed run the following commands in the ````WebsiteAngular/```` directory.
+
+````
+npm install --legacy-peer-deps
+npm start
+````
+
+After this you should have a fully functional copy of Reactome running on your computer.   
+
+If you run into any issues, try your best to follow any instructions in the error message or any advice found online.
+
+# Step 3: Rejoice!
+Nothing to do here but reap the benifits of your hard work I guess? Why are you still reading this?
\ No newline at end of file

From 513dd842a886156d9bd9e836257de0eb83c2a083 Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Mon, 30 Mar 2026 16:01:34 -0400
Subject: [PATCH 3/8] chore: Grammar fixes, guide to docker installation and
 local environment

---
 documentation/local-environment-docker.md | 14 ++++++++++++++
 documentation/local-environment.md        |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 documentation/local-environment-docker.md

diff --git a/documentation/local-environment-docker.md b/documentation/local-environment-docker.md
new file mode 100644
index 0000000..343bfe7
--- /dev/null
+++ b/documentation/local-environment-docker.md
@@ -0,0 +1,14 @@
+# Guide to Running Reactome as a Docker Container
+This guide will instruct you in setting up Reactome in a Docker container!
+
+## Step 1: Installing Docker
+Docker is a containerization tool that allows you to run environments you may not have installed on you computer. You can install Docker by following these [instructions](https://docs.docker.com/get-started/get-docker/). Check that docker has installed correctly by running ````docker --version```` if you see a version number then everything is installed correctly.
+
+## Step 2: Building and Running the Image
+Once docker has been installed run the following command to prepare the local environment
+````
+docker compose up --build
+````
+
+## Step 3: Explore Reactome!
+You're all done! Good job.
\ No newline at end of file
diff --git a/documentation/local-environment.md b/documentation/local-environment.md
index 6a6d4ba..9ce534f 100644
--- a/documentation/local-environment.md
+++ b/documentation/local-environment.md
@@ -18,7 +18,7 @@ this will place a local copy of the project onto you computer and open the folde
   
 
 ## Step 2: Installing Node
-Node is the tool that will compile and run the reactome project. You can download it [here](https://nodejs.org/en/download)!  
+Node is the tool that will compile and run the Reactome project. You can download it [here](https://nodejs.org/en/download)!  
 Once node is installed run the following commands in the ````WebsiteAngular/```` directory.
 
 ````
@@ -31,4 +31,4 @@ After this you should have a fully functional copy of Reactome running on your c
 If you run into any issues, try your best to follow any instructions in the error message or any advice found online.
 
 # Step 3: Rejoice!
-Nothing to do here but reap the benifits of your hard work I guess? Why are you still reading this?
\ No newline at end of file
+Nothing to do here but reap the benefits of your hard work I guess? Why are you still reading this.
\ No newline at end of file

From 89ec2dc91bdb8d19aff308a0930a5fa1869f860c Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Mon, 30 Mar 2026 16:04:52 -0400
Subject: [PATCH 4/8] chore: Added empty documentation files

---
 documentation/PathwayBrowser/pathway-browser.md   | 0
 documentation/TinaCMS/tina-cms.md                 | 0
 documentation/WebsiteAngular/adding-components.md | 0
 documentation/WebsiteAngular/adding-pages.md      | 0
 documentation/WebsiteAngular/changing-styles.md   | 0
 documentation/WebsiteAngular/website-angular.md   | 0
 6 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 documentation/PathwayBrowser/pathway-browser.md
 create mode 100644 documentation/TinaCMS/tina-cms.md
 create mode 100644 documentation/WebsiteAngular/adding-components.md
 create mode 100644 documentation/WebsiteAngular/adding-pages.md
 create mode 100644 documentation/WebsiteAngular/changing-styles.md
 create mode 100644 documentation/WebsiteAngular/website-angular.md

diff --git a/documentation/PathwayBrowser/pathway-browser.md b/documentation/PathwayBrowser/pathway-browser.md
new file mode 100644
index 0000000..e69de29
diff --git a/documentation/TinaCMS/tina-cms.md b/documentation/TinaCMS/tina-cms.md
new file mode 100644
index 0000000..e69de29
diff --git a/documentation/WebsiteAngular/adding-components.md b/documentation/WebsiteAngular/adding-components.md
new file mode 100644
index 0000000..e69de29
diff --git a/documentation/WebsiteAngular/adding-pages.md b/documentation/WebsiteAngular/adding-pages.md
new file mode 100644
index 0000000..e69de29
diff --git a/documentation/WebsiteAngular/changing-styles.md b/documentation/WebsiteAngular/changing-styles.md
new file mode 100644
index 0000000..e69de29
diff --git a/documentation/WebsiteAngular/website-angular.md b/documentation/WebsiteAngular/website-angular.md
new file mode 100644
index 0000000..e69de29

From 25c3cc1e87207d6ecb9aa4aa03df3d091b18c59c Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Wed, 1 Apr 2026 10:25:57 -0400
Subject: [PATCH 5/8] chore: Added TinaCMS guide

---
 documentation/TinaCMS/tina-cms.md | 94 +++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)

diff --git a/documentation/TinaCMS/tina-cms.md b/documentation/TinaCMS/tina-cms.md
index e69de29..9f613d0 100644
--- a/documentation/TinaCMS/tina-cms.md
+++ b/documentation/TinaCMS/tina-cms.md
@@ -0,0 +1,94 @@
+# TinaCMS
+TinaCMS is the content management system that Reactome is using for the majority of its pages and all of its articles. This document will instruct you on how to **add**, **edit** and **customize** TinaCMS pages.
+
+### Important!!!
+Before making any changes make sure your working git branch is up to date with origin/main. To do this run ````git pull```` or ````git fetch````.
+
+## Adding a new page to Reactome from the Browser
+Adding a page to Tina can be done in a few steps
+1. **Choose where you are adding the page**  
+Depending on whether you are adding an *about*, *content*, *documentation*, *tools*, *community*, *news*, *FAQ*, or *research spotlight* page will determine how you proceed.  
+
+2. **Start your Reactome local dev environment**  
+If you followed the ````documentation/local-environment.md```` tutorial run ````npm start````  
+If you followed the ````documentation/local-environment-docker.md```` tutorial run ````docker compose up --build````  
+
+3. **Navigate to /admin**
+4. **Go to the collection you would like to add to**  
+Find the "Navigation Menu" button and click on the *collection* you would like to add to.  
+5. **Click Add File**
+6. **Edit your page / article**  
+Don't forget to set the DatePublished!  
+
+7. **Click Save**
+8. **Refresh your local environment**  
+Stop it with ````^C```` and run again with the command from *Step 2*  
+
+Your Page will now appear in your local environment. To publish it view the *publishing to github* portion of this tutorial.
+
+## Editing a TinaCMS page from the Browser
+To Edit a pre-existing page in your local dev environment follow the following steps.
+1. **Start your Reactome local dev environment**  
+If you followed the ````documentation/local-environment.md```` tutorial run ````npm start````  
+If you followed the ````documentation/local-environment-docker.md```` tutorial run ````docker compose up --build````  
+2. **Navigate to /admin**
+3.  **Go to the collection you would like to edit from**  
+Find the "Navigation Menu" button and click on the *collection* that the article you would like to edit is in.  
+4. **Find your chosen article**
+5. **Click on the ... menu and select Edit in Admin**
+6. **Edit your page / article**  
+7. **Click Save**  
+   
+8. **Refresh your local environment**  
+Stop it with ````^C```` and run again with the command from *Step 1* 
+
+Your edited page will now appear in your local environment. To publish your changes, view the *publishing to github* portion of this tutorial.
+
+## Adding and Editing Pages Through mdx files
+If you would prefer to use your own .md or .mdx file editor or do not wish to use a local dev environment -- you can instead edit the files directly.  
+
+All articles and pages are stored in the ````projects/website-angular/content```` directory of this repository. Simply find the collection relevant to your page (i.e ````about/news```` for News articles) and add or edit the relevant files as you see fit.  
+
+If you are adding net new files please follow these templates.  
+For articles ````about/news````, ````content/reactome-research-spotlight```` or ````documentation/faq````:
+````
+---
+title: <Title Here>
+date: <YYYY-MM-DD>
+author: <Author Here>
+tags:
+  - tag
+image: /uploads/<upload path here>
+---
+
+<Article Body Here>
+````  
+For all other types of pages:
+````
+---
+title: <Title Here>
+description: <Description Here>
+category: <about, content, documentation, tools, community, download>
+image: /uploads/<upload path here>
+---
+
+<Body Here>
+````  
+  
+
+## Publishing to Github
+Once you are happy with your changes its time to publish them to github for review. This will require a github account so make sure you have one [here](https://github.com/login).  
+Once you are ready run these commands from your clone of the repository.
+````
+git status
+git switch -c <Your Article/Branch Name Here>
+git push -u origin <Your Article/Branch Name Here>
+````
+Your branch is now available on the remote repository where you can make a pull request and have your article reviewed. Once everything has been approved the pull request (PR) can be merged into the working branch from which it can be put into the next release.  
+
+If you are uncomfortable with command line there are convenient tools like the [VScode extension](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-github-actions) or [Github Desktop](https://www.gitkraken.com/download?_gl=1*u0whzn*_up*MQ..*_gs*MQ..&gclid=CjwKCAjwhLPOBhBiEiwA8_wJHPBQZEe_3tLOunlEc4lXI8wM8Wxgpov5AYK6cOdTyhM8m1IfV02dCRoCaXgQAvD_BwE) that can make things easier.
+
+## Other Notes on TinaCMS
+- If you ever have to edit the collections or general setup of TinaCMS that can be done in ````projects/website-angular/tina/config.ts````
+- If you need to make a home / landing page for a collection (i.e *about/*, *content/*) just name the file ````index.mdx```` and place it in the correct folder
+- Additional Information about TinaCMS can be found [here](https://tina.io/)
\ No newline at end of file

From 21f15cfd7cf41ed21200585d0b5cfa7743ab395c Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Wed, 1 Apr 2026 10:30:29 -0400
Subject: [PATCH 6/8] fix: Incorrect commands in TinaCMS tutorial

---
 documentation/TinaCMS/tina-cms.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/documentation/TinaCMS/tina-cms.md b/documentation/TinaCMS/tina-cms.md
index 9f613d0..5255feb 100644
--- a/documentation/TinaCMS/tina-cms.md
+++ b/documentation/TinaCMS/tina-cms.md
@@ -82,6 +82,8 @@ Once you are ready run these commands from your clone of the repository.
 ````
 git status
 git switch -c <Your Article/Branch Name Here>
+git add .
+git commit -m "<Your Commit Message Here>"
 git push -u origin <Your Article/Branch Name Here>
 ````
 Your branch is now available on the remote repository where you can make a pull request and have your article reviewed. Once everything has been approved the pull request (PR) can be merged into the working branch from which it can be put into the next release.  

From 54a6c4ec2181d60cfd50a4bad16329d8ebf17866 Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Wed, 1 Apr 2026 11:17:40 -0400
Subject: [PATCH 7/8] chore: Added angular documentation

---
 .../PathwayBrowser/pathway-browser.md         |  3 ++
 .../WebsiteAngular/adding-components.md       | 10 ++++++
 documentation/WebsiteAngular/adding-pages.md  | 10 ++++++
 .../WebsiteAngular/changing-styles.md         | 32 +++++++++++++++++++
 .../WebsiteAngular/website-angular.md         |  6 ++++
 documentation/{TinaCMS => }/tina-cms.md       |  0
 6 files changed, 61 insertions(+)
 rename documentation/{TinaCMS => }/tina-cms.md (100%)

diff --git a/documentation/PathwayBrowser/pathway-browser.md b/documentation/PathwayBrowser/pathway-browser.md
index e69de29..197c2b5 100644
--- a/documentation/PathwayBrowser/pathway-browser.md
+++ b/documentation/PathwayBrowser/pathway-browser.md
@@ -0,0 +1,3 @@
+# PathwayBrowser
+[Userguide](http://localhost:4200/documentation/userguide/pathway-browser)
+Dev docs loading...
\ No newline at end of file
diff --git a/documentation/WebsiteAngular/adding-components.md b/documentation/WebsiteAngular/adding-components.md
index e69de29..f4fc770 100644
--- a/documentation/WebsiteAngular/adding-components.md
+++ b/documentation/WebsiteAngular/adding-components.md
@@ -0,0 +1,10 @@
+# Adding Components to Reactome
+## What is a Component 
+"Components are the main building blocks of Angular applications. Each component represents a part of a larger web page. Organizing an application into components helps provide structure to your project, clearly separating code into specific parts that are easy to maintain and grow over time." - [Angular Docs](https://angular.dev/essentials/components)  
+
+## How to Add one
+To add a component to this project use the following command
+````
+ng generate component <Component name and path here>
+````
+and edit the files it generates to your hearts content. You will then be able to use the component wherever you want in the HTML files.
\ No newline at end of file
diff --git a/documentation/WebsiteAngular/adding-pages.md b/documentation/WebsiteAngular/adding-pages.md
index e69de29..54a7539 100644
--- a/documentation/WebsiteAngular/adding-pages.md
+++ b/documentation/WebsiteAngular/adding-pages.md
@@ -0,0 +1,10 @@
+# Adding a Page to Reactome
+The first thing to consider here is whether or not your page needs custom angular functionality. If the pages will be comprised of only text, images and video, a TinaCMS page will suffice and you can follow the TinaCMS tutorial instead.  
+
+To create a new angular page follow these steps
+1. Generate a new component (this will be your page)  
+Follow the tutorial in adding-components
+2. Add the route for your page in ````projects/website-angular/src/app/app.routes.ts````  
+Your "route" is what makes your page show up at the correct address in the browser.
+3. Edit your page to your hearts content.  
+This step will require a bit more creativity and Angular experience. I can't be sure what kind of page you are creating so do your best to get the functionality your need with the power of the internet on your side. I believe in you!
\ No newline at end of file
diff --git a/documentation/WebsiteAngular/changing-styles.md b/documentation/WebsiteAngular/changing-styles.md
index e69de29..d8f6bf6 100644
--- a/documentation/WebsiteAngular/changing-styles.md
+++ b/documentation/WebsiteAngular/changing-styles.md
@@ -0,0 +1,32 @@
+# Changing Styles
+Hey!!! Are you here because you think my work is ugly?! Not cool.  
+Jokes aside here is your guide to changing the look of anything on the website.
+
+## SCSS
+[SCSS](https://sass-lang.com/) is the framework we use for *styling* (assigning visual traits to HTML tags) in this repository.
+
+## Changing or Adding Styles
+For the sake of simplicity I will guide you through a basic tutorial on changing the style of an element which will hopefully be applicable to whatever you are trying to do.
+
+1. Find class you are trying to restyle on the page (or add a *class* to the component)  
+For this tutorial we will use the copyright text at the bottom of the Reactome page ```` © 2026 Reactome````.
+1. Use right click and select *Inspect* on the component you want to change  
+This will open up the *inspector* menu and allow you to see the base HTML of the page. We can see here that the *class* for the box the the copyright text is in is named ````copyright````.
+1. Find the class definition in a SCSS file (or make one)
+It would help if you already know the file you're working in but if you don't then use a text-search function to match text or class name until you find the correct file. In this case ````projects/website-angular/src/app/copyright-footer/copyright-footer.component.scss````.
+1. Edit the style
+Now that we have found the *copyright* class definition we can change it as we see fit. To change the colour of the copyright box. Replace the ````.copyright```` section with this.
+````
+.copyright {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  color: pink;
+  background-color: pink; #change this line
+}
+```` 
+
+Now you have all the skills you need to change styles wherever you like! Go forth and style away.
\ No newline at end of file
diff --git a/documentation/WebsiteAngular/website-angular.md b/documentation/WebsiteAngular/website-angular.md
index e69de29..b60d5d8 100644
--- a/documentation/WebsiteAngular/website-angular.md
+++ b/documentation/WebsiteAngular/website-angular.md
@@ -0,0 +1,6 @@
+# Website Angular
+What can I even say? This document refers to the code in the ````projects/website-angular```` directory. This code handles the majority of UI on the website barring certain special pages such as ````/PathwayBrowser````, ````/chat```` and a few others.  
+
+The website is an [angular](https://angular.dev/) project making use of TinaCMS for content management.  
+
+For information on adding pages, components or changing styles please check out the other documentation files.
\ No newline at end of file
diff --git a/documentation/TinaCMS/tina-cms.md b/documentation/tina-cms.md
similarity index 100%
rename from documentation/TinaCMS/tina-cms.md
rename to documentation/tina-cms.md

From 5d20f54cab671d592428505f6ae986e30386646e Mon Sep 17 00:00:00 2001
From: junaid7haque <junaid7haque@gmail.com>
Date: Wed, 1 Apr 2026 14:50:39 -0400
Subject: [PATCH 8/8] Improve Docker setup instructions in documentation

Added link to local host and docker compose down instructions
---
 documentation/local-environment-docker.md | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/documentation/local-environment-docker.md b/documentation/local-environment-docker.md
index 343bfe7..ce60b41 100644
--- a/documentation/local-environment-docker.md
+++ b/documentation/local-environment-docker.md
@@ -2,13 +2,19 @@
 This guide will instruct you in setting up Reactome in a Docker container!
 
 ## Step 1: Installing Docker
-Docker is a containerization tool that allows you to run environments you may not have installed on you computer. You can install Docker by following these [instructions](https://docs.docker.com/get-started/get-docker/). Check that docker has installed correctly by running ````docker --version```` if you see a version number then everything is installed correctly.
+Docker is a containerization tool that allows you to run environments you may not have installed on your computer. You can install Docker by following these [instructions](https://docs.docker.com/get-started/get-docker/). Check that Docker has installed correctly by running ```docker --version```. If you see a version number, then everything is installed correctly.
 
 ## Step 2: Building and Running the Image
-Once docker has been installed run the following command to prepare the local environment
-````
+Once Docker has been installed, run the following command to prepare the local environment:
+```
 docker compose up --build
-````
+```
 
 ## Step 3: Explore Reactome!
-You're all done! Good job.
\ No newline at end of file
+Visit [http://localhost:4200/](http://localhost:4200/) to access the website.
+You're all done! Good job.
+
+Once finished with accessing the website, run the following command:
+```
+docker compose down
+```