Skip to content

Commit e580ed7

Browse files
authored
Merge pull request #232 from revisit-studies/jay/tutorial
Add tutorial section
2 parents 419c4eb + 5fe7078 commit e580ed7

405 files changed

Lines changed: 2833 additions & 13362 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: Delete PR Preview
2+
3+
on:
4+
pull_request:
5+
types: [closed]
6+
7+
jobs:
8+
delete-preview:
9+
runs-on: ubuntu-latest
10+
permissions:
11+
contents: write
12+
pull-requests: write
13+
14+
steps:
15+
- name: Make empty directory
16+
run: mkdir -p public
17+
18+
- name: Delete preview folder
19+
uses: peaceiris/actions-gh-pages@v3
20+
with:
21+
github_token: ${{ secrets.GITHUB_TOKEN }}
22+
publish_dir: ./public
23+
destination_dir: "PR${{ github.event.number }}"
24+
25+
- name: Comment on PR
26+
uses: hasura/comment-progress@v2.2.0
27+
with:
28+
github-token: ${{ secrets.GITHUB_TOKEN }}
29+
repository: ${{ github.repository }}
30+
number: ${{ github.event.number }}
31+
id: deploy-preview
32+
message: "🪓PR closed, deleted preview."

.github/workflows/deploy.yml

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ on:
44
push:
55
branches:
66
- main
7+
workflow_dispatch:
8+
pull_request:
79

810
jobs:
911
deploy:
@@ -12,6 +14,7 @@ jobs:
1214
contents: write
1315
concurrency:
1416
group: ${{ github.workflow }}-${{ github.ref }}
17+
if: ${{ github.ref == 'refs/heads/main' }}
1518
steps:
1619
- uses: actions/checkout@v4
1720

@@ -35,3 +38,55 @@ jobs:
3538
github_token: ${{ secrets.GITHUB_TOKEN }}
3639
publish_dir: ./build
3740
cname: revisit.dev
41+
42+
pr-deploy:
43+
runs-on: ubuntu-latest
44+
permissions:
45+
contents: write
46+
pull-requests: write
47+
concurrency:
48+
group: ${{ github.workflow }}-${{ github.ref }}
49+
cancel-in-progress: true
50+
if: ${{ github.event_name == 'pull_request' }}
51+
52+
steps:
53+
- name: Comment on PR
54+
uses: hasura/comment-progress@v2.2.0
55+
with:
56+
github-token: ${{ secrets.GITHUB_TOKEN }}
57+
repository: ${{ github.repository }}
58+
number: ${{ github.event.number }}
59+
id: deploy-preview
60+
message: "Starting deployment of preview ⏳..."
61+
62+
- uses: actions/checkout@v4
63+
64+
- uses: actions/setup-node@v4
65+
with:
66+
node-version: lts/*
67+
cache: 'yarn'
68+
69+
- name: Install dependencies
70+
run: yarn install --immutable
71+
72+
- name: Build PR preview
73+
run: yarn build
74+
env:
75+
BASE_URL: "/PR${{ github.event.number }}/"
76+
77+
- name: Push PR deploy preview
78+
uses: peaceiris/actions-gh-pages@v3
79+
with:
80+
github_token: ${{ secrets.GITHUB_TOKEN }}
81+
publish_dir: ./build
82+
destination_dir: "PR${{ github.event.number }}"
83+
keep_files: true
84+
85+
- name: Update comment
86+
uses: hasura/comment-progress@v2.2.0
87+
with:
88+
github-token: ${{ secrets.GITHUB_TOKEN }}
89+
repository: ${{ github.repository }}
90+
number: ${{ github.event.number }}
91+
id: deploy-preview
92+
message: "A preview of ${{ github.sha }} is uploaded and can be seen here:\n\n ✨ https://revisit.dev/PR${{ github.event.number }} ✨\n\nChanges may take a few minutes to propagate."
153 KB
Loading
122 KB
Loading

docs/getting-started/installation.md

Lines changed: 100 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,54 @@ ReVISit project is open-source – meaning anyone can see the entire codebase. M
44

55
For most users, the best place to start is the template repository (first option below). If you want all demos and tighter upstream parity, or are considering contributing to reVISit, we recommend you fork the repository instead.
66

7+
## Installing Required Software
8+
9+
Install these tools before cloning and running a study locally:
10+
11+
- [Visual Studio Code](https://code.visualstudio.com/), or another editor with JSON support.
12+
- [Git](https://git-scm.com/downloads), so you can clone the template repository and share changes with collaborators.
13+
- The Active LTS version of [Node.js](https://nodejs.org/), which also installs NPM.
14+
15+
:::info
16+
NPM is installed with Node.js. You usually do not need to install NPM separately: install Node.js first, then use NPM to install Yarn. If NPM is not installed for any reason, review the [NPM documentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to get started.
17+
:::
18+
19+
You can check whether Git, Node.js, and NPM are already installed with:
20+
21+
```bash
22+
git --version
23+
node --version
24+
npm --version
25+
```
26+
27+
Yarn can be installed using NPM. Run the following command to install Yarn:
28+
29+
```bash
30+
npm i -g yarn
31+
```
32+
33+
:::note
34+
If your machine restricts global installs, run the command with administrator permissions:
35+
36+
```bash
37+
sudo npm i -g yarn
38+
```
39+
:::
40+
41+
After installing Yarn, check that it was installed correctly:
42+
43+
```bash
44+
yarn --version
45+
```
46+
747
## Starting from the Template Repository (Recommended)
848

949
Navigate to the [template repository](https://github.com/revisit-studies/template), and click the "Use this template" button. This will create a new repository in your GitHub account with the same files as the template repository, based on the latest stable release of reVISit.
1050

1151
![Use this template button](./img/template-repo.png)
1252

53+
![Create a new repository from the template](./img/create-new-repo.png)
54+
1355
:::info
1456
You can choose a name for the repository to suit your needs, but if you choose anything other than `study`, you also need to adjust the `VITE_BASE_PATH` in your [`.env`](https://github.com/revisit-studies/study/blob/main/.env) file to reflect that change.
1557
:::
@@ -25,68 +67,93 @@ Most likely, you will **receive a warning from GitHub about a potential security
2567
You can safely ignore this warning. The reason for this is that the Firebase API key is not a secret key, and it is intended to be shared publicly in client-side code. For more information, see the [Firebase documentation on API keys](https://firebase.google.com/docs/projects/api-keys#api_key_security_recommendations).
2668
:::
2769

28-
## Forking Repository (Advanced Alternative to Template Repository)
29-
30-
Forking the repository is a more advanced option that allows you to have a copy of the entire `study` repository in your GitHub account. This means that you will have access to all the demo studies and that you can choose to follow the latest changes from the main repository (e.g., by following the `dev` branch). However, it also means that your repository will be linked to the upstream repository's fork network, which can make it more complex to manage.
70+
### Clone your template repository
3171

32-
To fork, start by navigating to the following GitHub repository: https://github.com/revisit-studies/study
72+
After GitHub creates your repository from the template, open the repository page and click "Code". Copy the clone URL from the HTTPS and clone it to your computer:
3373

34-
You should see a "fork" button on the same row as the name of the repository. When you fork a repository, you are essentially creating your own copy of the repository in your GitHub account. This means that any changes you commit and push to this new repository will not affect the main source code.
74+
```bash
75+
git clone https://github.com/your-github-name/your-repository-name.git
76+
cd your-repository-name
77+
```
3578

36-
![Fork button](./img/fork-repo.png)
79+
![Copy the repository clone URL from GitHub](./img/clone-repo.png)
3780

38-
:::info
39-
GitHub only allows you to fork a repository once. If you have already forked the repository, you will need to clone the repository to your local machine, create a new repo on your account, and run `git remote set-url origin new.git.url/here` to allow you to have 2 versions of the repository in your account.
81+
:::note
82+
If you have not configured GitHub authentication locally, you can use "Download ZIP".
4083
:::
4184

42-
When forking the repository, you will be prompted for some basic information about this repository (such as the desired name). Once you've forked the repository into your own GitHub account, you can [clone the repository to your local computer](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
85+
## Run the Local Server
4386

44-
:::info
45-
You can rename the repository to suit your needs, but if you change the name, you also need to adjust the `VITE_BASE_PATH` in your [`.env`](https://github.com/revisit-studies/study/blob/main/.env) file to reflect that change.
46-
:::
87+
After cloning your repository, make sure you are inside the repository folder:
4788

48-
After the repository is on your local machine, you will have the entire codebase for your personal use. Any changes that you make to this repository can be committed and then pushed to your forked repository for other users in your organization to see.
89+
```bash
90+
cd your-repository-name
91+
```
4992

50-
## Installing Required Software
93+
Then install the packages that reVISit needs to run:
5194

52-
To continue, you will need the Active LTS [Node.js](https://nodejs.org/) version, and [Yarn](https://yarnpkg.com/) installed. If you already have Yarn installed, you can go to Step 2 below.
95+
```bash
96+
yarn install
97+
```
5398

54-
:::info
55-
Yarn requires that you have the package manager NPM installed. If you do not have NPM installed, please review the [NPM documentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to get started. These docs will also direct you on how to install Node – a prerequisite of NPM.
99+
Once this is finished, start the local server:
100+
101+
```bash
102+
yarn serve
103+
```
104+
105+
This will launch a local web server where you can view and interact with reVISit. By default, you can access it by visiting [http://localhost:8080/](http://localhost:8080/). Any change you make to the code will automatically update the website.
106+
107+
:::warning
108+
If `yarn install` or `yarn serve` says it cannot find `package.json`, you are probably not inside the repository folder. Run `cd your-repository-name` first, then try the command again.
56109
:::
57110

58-
**Step 1: Install Yarn on your local computer using NPM:**
111+
When you visit the site, you'll see the studies registered in your local `public/global.json` file. You can interact with any of these studies to get some familiarity (and hopefully some inspiration) for how reVISit can help you quickly launch a crowd-sourced visualization study.
59112

60-
```npm i -g yarn```
113+
:::note
114+
If you started from the template repository, this will be a smaller set of starter tutorial studies.
115+
:::
61116

62-
**Step 2: Once Yarn is successfully installed, navigate to your local repository and run the following Yarn command:**
117+
:::warning
118+
We do not support using `npm` to run reVISit. Please use `yarn` for all package management and running commands.
119+
:::
63120

64-
```yarn install```
121+
## Forking Repository (Advanced Alternative to Template Repository)
65122

66-
This will install all the packages that the reVISit requires to run.
123+
Forking the repository is a more advanced option that allows you to have a copy of the entire `study` repository in your GitHub account. This means that you will have access to all the demo studies and that you can choose to follow the latest changes from the main repository (e.g., by following the `dev` branch). However, it also means that your repository will be linked to the upstream repository's fork network, which can make it more complex to manage.
67124

68-
**Step 3: Once this is finished, you can now start the program:**
125+
To fork, start by navigating to the following GitHub repository: https://github.com/revisit-studies/study
69126

70-
```yarn serve```
127+
You should see a "fork" button on the same row as the name of the repository. When you fork a repository, you are essentially creating your own copy of the repository in your GitHub account. This means that any changes you commit and push to this new repository will not affect the main source code.
71128

72-
This will launch a local web server which can be accessed to view and interact with reVISit. By default, you can access this by visiting [http://localhost:8080/](http://localhost:8080/). Any change you make to the code will automatically update the website.
129+
![Fork button](./img/fork-repo.png)
73130

74-
When you visit the site, you'll see a list of demo studies, identical to [the demo page](https://revisit.dev/study/). You can interact with any of these studies to get some familiarity (and hopefully some inspiration) for how reVISit can help you quickly launch a crowd-sourced visualization study.
131+
:::info
132+
GitHub only allows you to fork a repository once. If you have already forked the repository, you will need to clone the repository to your local machine, create a new repo on your account, and run `git remote set-url origin new.git.url/here` to allow you to have 2 versions of the repository in your account.
133+
:::
75134

76-
:::warning
77-
We do not support using `npm` to run reVISit. Please use `yarn` for all package management and running commands.
135+
When forking the repository, you will be prompted for some basic information about this repository (such as the desired name). Once you've forked the repository into your own GitHub account, you can [clone the repository to your local computer](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
136+
137+
:::info
138+
You can rename the repository to suit your needs, but if you change the name, you also need to adjust the `VITE_BASE_PATH` in your [`.env`](https://github.com/revisit-studies/study/blob/main/.env) file to reflect that change.
78139
:::
79140

141+
After the repository is on your local machine, you will have the entire codebase for your personal use. Any changes that you make to this repository can be committed and then pushed to your forked repository for other users in your organization to see.
142+
80143
<!-- Importing links -->
81144
import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLinks.tsx';
82145

83146
<StructuredLinks
84-
referenceLinks={[
147+
codeLinks={[
85148
{name: "ReVISit Template Repository", url: "https://github.com/revisit-studies/template"},
86-
{name: "ReVISit Main Repository", url: "https://github.com/revisit-studies/study"},
149+
{name: "ReVISit Main Repository", url: "https://github.com/revisit-studies/study"}
150+
]}
151+
referenceLinks={[
87152
{name: "Cloning Repository", url: "https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository"},
153+
{name: "Visual Studio Code Installation", url: "https://code.visualstudio.com/"},
154+
{name: "Git Installation", url: "https://git-scm.com/downloads"},
88155
{name: "Node.js Installation", url: "https://nodejs.org/en"},
89-
{name: "Yarn Installation", url: "https://yarnpkg.com/"},
90-
{name: "NPM Installation", url: "https://docs.npmjs.com/downloading-and-installing-node-js-and-npm"}
156+
{name: "NPM Installation", url: "https://docs.npmjs.com/downloading-and-installing-node-js-and-npm"},
157+
{name: "Yarn Installation", url: "https://yarnpkg.com/getting-started/install"}
91158
]}
92-
/>
159+
/>

0 commit comments

Comments
 (0)