Skip to content

Commit bd1de04

Browse files
el-rabiesel-rabies
authored
Merge pull request #50 from reactome/13-update-readme-and-documentation
13 update readme and documentation
2 parents d813bf7 + 5d20f54 commit bd1de04

File tree

9 files changed

+220
-50
lines changed

9 files changed

+220
-50
lines changed

‎README.md‎

Lines changed: 9 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,18 @@
11
# Reactome
22

3-
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.2.
3+
REACTOME is an open-source, open access, manually curated and peer-reviewed pathway database.
44

5-
## Development server
6-
7-
To start a local development server, run:
8-
9-
```bash
10-
ng serve
11-
```
12-
13-
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.
14-
15-
## Code scaffolding
16-
17-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18-
19-
```bash
20-
ng generate component component-name
21-
```
22-
23-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24-
25-
```bash
26-
ng generate --help
27-
```
28-
29-
## Building
30-
31-
To build the project run:
32-
33-
```bash
34-
ng build
35-
```
36-
37-
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.
38-
39-
## Running unit tests
40-
41-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
42-
43-
```bash
44-
ng test
45-
```
46-
47-
## Running end-to-end tests
48-
49-
For end-to-end (e2e) testing, run:
5+
## Local Development Server
6+
To setup a local environment
507

518
```bash
52-
ng e2e
9+
npm install --legacy-peer-deps
10+
npm start
5311
```
5412

55-
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
13+
## Usage
14+
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.
5615

57-
## Additional Resources
5816

59-
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.
17+
## LICENSE
18+
[Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0)

‎documentation/PathwayBrowser/pathway-browser.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# PathwayBrowser
2+
[Userguide](http://localhost:4200/documentation/userguide/pathway-browser)
3+
Dev docs loading...

‎documentation/WebsiteAngular/adding-components.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Adding Components to Reactome
2+
## What is a Component
3+
"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)
4+
5+
## How to Add one
6+
To add a component to this project use the following command
7+
````
8+
ng generate component <Component name and path here>
9+
````
10+
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.

‎documentation/WebsiteAngular/adding-pages.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Adding a Page to Reactome
2+
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.
3+
4+
To create a new angular page follow these steps
5+
1. Generate a new component (this will be your page)
6+
Follow the tutorial in adding-components
7+
2. Add the route for your page in ````projects/website-angular/src/app/app.routes.ts````
8+
Your "route" is what makes your page show up at the correct address in the browser.
9+
3. Edit your page to your hearts content.
10+
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!

‎documentation/WebsiteAngular/changing-styles.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Changing Styles
2+
Hey!!! Are you here because you think my work is ugly?! Not cool.
3+
Jokes aside here is your guide to changing the look of anything on the website.
4+
5+
## SCSS
6+
[SCSS](https://sass-lang.com/) is the framework we use for *styling* (assigning visual traits to HTML tags) in this repository.
7+
8+
## Changing or Adding Styles
9+
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.
10+
11+
1. Find class you are trying to restyle on the page (or add a *class* to the component)
12+
For this tutorial we will use the copyright text at the bottom of the Reactome page ```` © 2026 Reactome````.
13+
1. Use right click and select *Inspect* on the component you want to change
14+
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````.
15+
1. Find the class definition in a SCSS file (or make one)
16+
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````.
17+
1. Edit the style
18+
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.
19+
````
20+
.copyright {
21+
display: flex;
22+
flex: 1;
23+
flex-direction: row;
24+
align-items: center;
25+
justify-content: flex-start;
26+
gap: 4px;
27+
color: pink;
28+
background-color: pink; #change this line
29+
}
30+
````
31+
32+
Now you have all the skills you need to change styles wherever you like! Go forth and style away.

‎documentation/WebsiteAngular/website-angular.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Website Angular
2+
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.
3+
4+
The website is an [angular](https://angular.dev/) project making use of TinaCMS for content management.
5+
6+
For information on adding pages, components or changing styles please check out the other documentation files.

‎documentation/local-environment-docker.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Guide to Running Reactome as a Docker Container
2+
This guide will instruct you in setting up Reactome in a Docker container!
3+
4+
## Step 1: Installing Docker
5+
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.
6+
7+
## Step 2: Building and Running the Image
8+
Once Docker has been installed, run the following command to prepare the local environment:
9+
```
10+
docker compose up --build
11+
```
12+
13+
## Step 3: Explore Reactome!
14+
Visit [http://localhost:4200/](http://localhost:4200/) to access the website.
15+
You're all done! Good job.
16+
17+
Once finished with accessing the website, run the following command:
18+
```
19+
docker compose down
20+
```

‎documentation/local-environment.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Guide to Setting up Reactome as a local Environment
2+
**Hello and welcome to the local environment installation guide!**
3+
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.
4+
5+
Feel free to skip ahead if you have already completed some of these steps!
6+
7+
## Step 1: Installing git
8+
If you are rolling your eyes at the pedantry of this guide please skip to the next step.
9+
10+
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/).
11+
12+
Once git is installed clone and enter the repository with the following commands:
13+
````
14+
git clone https://github.com/reactome/WebsiteAngular.git
15+
cd WebsiteAngular
16+
````
17+
this will place a local copy of the project onto you computer and open the folder containing it.
18+
19+
20+
## Step 2: Installing Node
21+
Node is the tool that will compile and run the Reactome project. You can download it [here](https://nodejs.org/en/download)!
22+
Once node is installed run the following commands in the ````WebsiteAngular/```` directory.
23+
24+
````
25+
npm install --legacy-peer-deps
26+
npm start
27+
````
28+
29+
After this you should have a fully functional copy of Reactome running on your computer.
30+
31+
If you run into any issues, try your best to follow any instructions in the error message or any advice found online.
32+
33+
# Step 3: Rejoice!
34+
Nothing to do here but reap the benefits of your hard work I guess? Why are you still reading this.

‎documentation/tina-cms.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# TinaCMS
2+
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.
3+
4+
### Important!!!
5+
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````.
6+
7+
## Adding a new page to Reactome from the Browser
8+
Adding a page to Tina can be done in a few steps
9+
1. **Choose where you are adding the page**
10+
Depending on whether you are adding an *about*, *content*, *documentation*, *tools*, *community*, *news*, *FAQ*, or *research spotlight* page will determine how you proceed.
11+
12+
2. **Start your Reactome local dev environment**
13+
If you followed the ````documentation/local-environment.md```` tutorial run ````npm start````
14+
If you followed the ````documentation/local-environment-docker.md```` tutorial run ````docker compose up --build````
15+
16+
3. **Navigate to /admin**
17+
4. **Go to the collection you would like to add to**
18+
Find the "Navigation Menu" button and click on the *collection* you would like to add to.
19+
5. **Click Add File**
20+
6. **Edit your page / article**
21+
Don't forget to set the DatePublished!
22+
23+
7. **Click Save**
24+
8. **Refresh your local environment**
25+
Stop it with ````^C```` and run again with the command from *Step 2*
26+
27+
Your Page will now appear in your local environment. To publish it view the *publishing to github* portion of this tutorial.
28+
29+
## Editing a TinaCMS page from the Browser
30+
To Edit a pre-existing page in your local dev environment follow the following steps.
31+
1. **Start your Reactome local dev environment**
32+
If you followed the ````documentation/local-environment.md```` tutorial run ````npm start````
33+
If you followed the ````documentation/local-environment-docker.md```` tutorial run ````docker compose up --build````
34+
2. **Navigate to /admin**
35+
3. **Go to the collection you would like to edit from**
36+
Find the "Navigation Menu" button and click on the *collection* that the article you would like to edit is in.
37+
4. **Find your chosen article**
38+
5. **Click on the ... menu and select Edit in Admin**
39+
6. **Edit your page / article**
40+
7. **Click Save**
41+
42+
8. **Refresh your local environment**
43+
Stop it with ````^C```` and run again with the command from *Step 1*
44+
45+
Your edited page will now appear in your local environment. To publish your changes, view the *publishing to github* portion of this tutorial.
46+
47+
## Adding and Editing Pages Through mdx files
48+
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.
49+
50+
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.
51+
52+
If you are adding net new files please follow these templates.
53+
For articles ````about/news````, ````content/reactome-research-spotlight```` or ````documentation/faq````:
54+
````
55+
---
56+
title: <Title Here>
57+
date: <YYYY-MM-DD>
58+
author: <Author Here>
59+
tags:
60+
- tag
61+
image: /uploads/<upload path here>
62+
---
63+
64+
<Article Body Here>
65+
````
66+
For all other types of pages:
67+
````
68+
---
69+
title: <Title Here>
70+
description: <Description Here>
71+
category: <about, content, documentation, tools, community, download>
72+
image: /uploads/<upload path here>
73+
---
74+
75+
<Body Here>
76+
````
77+
78+
79+
## Publishing to Github
80+
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).
81+
Once you are ready run these commands from your clone of the repository.
82+
````
83+
git status
84+
git switch -c <Your Article/Branch Name Here>
85+
git add .
86+
git commit -m "<Your Commit Message Here>"
87+
git push -u origin <Your Article/Branch Name Here>
88+
````
89+
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.
90+
91+
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.
92+
93+
## Other Notes on TinaCMS
94+
- If you ever have to edit the collections or general setup of TinaCMS that can be done in ````projects/website-angular/tina/config.ts````
95+
- 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
96+
- Additional Information about TinaCMS can be found [here](https://tina.io/)

0 commit comments

Comments
 (0)