Skip to content

Commit 0b2cb0b

Browse files
dlebauerdlebauer
authored
Merge pull request #28 from GandalfGwaihir/migration
[Major]: Update website to new look
2 parents 10e4159 + 9ad5b40 commit 0b2cb0b

File tree

1,389 files changed

+29869
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,389 files changed

+29869
-3
lines changed

‎.github/workflows/build.yml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
name: build
2+
on:
3+
pull_request:
4+
branches: [master]
5+
jobs:
6+
build:
7+
runs-on: ubuntu-latest
8+
name: Build Test
9+
steps:
10+
- name: Checkout 🛎️
11+
uses: actions/[email protected]
12+
13+
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
14+
run: |
15+
npm install
16+
npm run build

‎.github/workflows/deploy.yml‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
name: deploy
2+
on:
3+
push:
4+
branches: [master]
5+
jobs:
6+
build-and-deploy:
7+
runs-on: ubuntu-latest
8+
steps:
9+
- name: Checkout 🛎️
10+
uses: actions/[email protected]
11+
12+
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
13+
run: |
14+
npm install
15+
npm run build
16+
17+
- name: Deploy 🚀
18+
uses: JamesIves/[email protected]
19+
with:
20+
branch: gh-pages # The branch the action should deploy to.
21+
folder: build # The folder the action should deploy.

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/node_modules
2+
.docusaurus
3+
/build

‎README.md‎

Lines changed: 192 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,193 @@
1-
PecanProject.github.io
2-
======================
1+
# PEcAn Project Website
32

4-
PEcAn webpage
3+
This repository contains the content of the PEcAn Project website.
4+
5+
This README is written for members of the PEcAn Project community who wish to add content to or otherwise modify the website.
6+
The website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
7+
The [Docusaurus Documentation](https://docusaurus.io/docs) provides details on maintaining the website; this README is not intended to replace the Docusaurus documentation.
8+
Rather, it is intended to provide a brief introduction to common tasks as well as project specific information.
9+
10+
This site was created by Eshan Tripathi with mentorship from Prakher Prashank as part of [GSoC '21](https://summerofcode.withgoogle.com/).
11+
12+
## Table of contents
13+
14+
<details open="open">
15+
<summary>Table of Contents</summary>
16+
<ol>
17+
<li>
18+
<a href="#getting-started">Getting Started</a>
19+
<ul>
20+
<li><a href="#prerequisites">Prerequisites</a></li>
21+
<li><a href="#installation">Installation</a></li>
22+
<li><a href="#local-development">Local Development</a></li>
23+
<li><a href="#build">Build</a></li>
24+
</ul>
25+
</li>
26+
<li>
27+
<a href="#adding-content">Adding Content</a>
28+
<ul>
29+
<li><a href="#feature-cards">Feature Cards</a></li>
30+
<li><a href="#pecan-people">PEcAn People</a></li>
31+
<li><a href="#blog">Blog</a></li>
32+
</ul>
33+
</li>
34+
<li><a href="#screenshots">Screenshots</a></li>
35+
<li><a href="#contributing">Contributing</a></li>
36+
<li>
37+
<a href="#next-steps">Next Steps</a>
38+
<ul>
39+
<li><a href="#optimising-documentation">Optimising documentation</a></li>
40+
<li><a href="#adding-tutorials">Adding tutorials section</a></li>
41+
<li><a href="#blog">Blog</a></li>
42+
</ul>
43+
</li>
44+
</ol>
45+
</details>
46+
47+
## Getting Started - Setting up the project for local development
48+
49+
This section will help one to setup the project for local development.
50+
51+
### Requirements
52+
53+
- Node version >= 12.13.0
54+
- yarn
55+
56+
This project has been built using [Docusaurus 2](https://docusaurus.io/), which requires Node version >=12.13.0, you can check this using `node -v`. [Install node](https://nodejs.org/en/download/).
57+
Make sure yarn is installed. [Install yarn](https://classic.yarnpkg.com/en/docs/install/#debian-stable).
58+
59+
### Installation
60+
61+
```console
62+
yarn install
63+
```
64+
65+
### Local Development
66+
67+
```console
68+
yarn start
69+
```
70+
71+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
72+
73+
### Build
74+
75+
```console
76+
yarn build
77+
```
78+
79+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
80+
81+
## Adding Content
82+
83+
This describes how to add or modify the Website's content.
84+
85+
### Add or Edit Feature Cards
86+
87+
Feature Cards on the website homepage highlight the key features of the PEcAn Project.
88+
89+
![Feature Card](screenshots/featureCard.png)
90+
91+
To modify the feature cards-
92+
93+
- Navigate to `src/components/HomepageFeatures.js`
94+
- Navigate to `const FeatureList` inside `HomepageFeatures.js`
95+
96+
![FeatureList](screenshots/FeatureList.png)
97+
98+
Every item inside the `FeatureList` array contains a JavaScript object enclosed `{}` and separated by `,` .
99+
Each of these objects is a feature that is displayed on the homepage and contains a `title`, `Svg` and `description`.
100+
You can edit or remove feature cards and the changes will be reflected after the code passes build test.
101+
If you are adding or editing an image file, the image file must is present inside `static/img` directory, otherwise the compiler would return an error.
102+
You should use SVG images when available.
103+
104+
### Add or Edit a Person (Contributors)
105+
106+
The people page contains details of the PEcAn team. The image here is a representation of how the page should look like with placeholder values.
107+
108+
![PecanPople](screenshots/pecanPeople.png)
109+
110+
```javascript
111+
const contributors = [
112+
{
113+
name: "John Doe",
114+
email: "[email protected]",
115+
role: "Lead PEcAn Developer",
116+
education: "PhD at MIT, USA",
117+
img: "https://previews.123rf.com/images/stockbroker/stockbroker1710/stockbroker171000524/89639450-portrait-of-a-young-smiling-professional-man-arms-crossed.jpg",
118+
},
119+
];
120+
```
121+
122+
To add and modify information move to the `static/utils/contributors.js` file.
123+
It contains an array called `contributors` which contains JavaScript objects which are enclosed by `{}` and contain following fields-
124+
125+
![Contributors.js](screenshots/contributors.png)
126+
127+
To add a contributor:
128+
129+
1. Copy an existing user's information and paste as a new object in the appropriate order.
130+
2. Make sure two objects are separated by a `,`.
131+
3. Edit information in the pasted object.
132+
4. Add an image to `static/img/people`
133+
5. Add link to image
134+
6. Build site and check that the new contributor record appears where expected
135+
136+
The new contributor and / or any changes will appear on the website automatically after changes are successfully merged into the main branch.
137+
138+
### Add or Edit a Blog Post
139+
140+
A link to blog posts can be found in the navigation menue at the top of the website.
141+
The Docusaurus blog feature is described in detail in the [Docusaurus documentation](https://docusaurus.io/docs/blog).
142+
By default when someone clicks on `blog` link they will be directed to a page containing list of all present blogs on the website.
143+
144+
Steps to add a blog post:
145+
146+
1. Create a new file named `blog/yyyy-mm-dd-title.md`
147+
2. In the top of your blog file add a yaml header.
148+
3. Add at least `title`, `author` and `tags` yaml fields.
149+
- These metadata fields help with search and navigation on the site.
150+
- These and other yaml header options are described in the [blog header options](https://docusaurus.io/docs/blog#header-options) section of the Docusaurus documentation.
151+
4. writing your blog and save the file.
152+
5. any images can be put in `static/img/` and referenced using a relative path `static/img/myimage.png`
153+
6. build the website to make sure the blog shows up as expected
154+
7. After the new changes are merged into the main branch, the new blog post will appear on the website.
155+
156+
```yml
157+
title: GSoC '21 Report- Webpage Updates
158+
author: Eshan Tripathi
159+
author_title: GSoC'21 participant @PEcAn Project
160+
author_url: https://github.com/eshantri
161+
author_image_url: https://avatars.githubusercontent.com/u/48446729?v=4
162+
tags: [gsoc, gsoc21]
163+
```
164+
165+
## Screenshots
166+
167+
This section contains screenshots of website's homepage in light and dark theme.
168+
169+
![LightTheme](screenshots/light.png)
170+
171+
![DarkTheme](screenshots/dark.png)
172+
173+
## Contributing
174+
175+
This is an open source project and contributions are what make an open source community.
176+
Everyone is welcome to contribute to this project.
177+
All involved are expected to follow the [PEcAn code of conduct](https://pecanproject.github.io/pecan-documentation/master/contributor-covenant-code-of-conduct.html) and contribute to a positive and inclusive environment.
178+
179+
First time contributors are welcome. Contributions can be very simple, make sure to check out beginner friendly issues, if present.
180+
181+
## Next Steps
182+
183+
This section contains future plans for the website. New contributors can use this section as a reference for planning their contributions.
184+
185+
### Optimising Documentation
186+
187+
At present the PEcAn's documentation is being served from (<https://pecanproject.github.io/pecan-documentation/master/>) using an iframe. While this saves a lot of overhead in converting Rmd files in (<https://github.com/PecanProject/pecan/tree/develop/book_source>) to md files so that docusaurus could render them, it also increases the loading time for documentation, it also looks less consistent.
188+
In future, it is suggested to find an optimised way to convert rmd files to md and integrate them via docusaurus's native documentation parser.
189+
190+
### Adding tutorials section
191+
192+
The tutorials section from old site need to be migrated into the new site.
193+
One can find tutorials here (<https://github.com/PecanProject/pecan/tree/develop/documentation/tutorials>).

‎babel.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3+
};

‎blog/2016-05-12-Terrestial-Model-Informatics-Workshop.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
slug: Terrestial-Model-Informatics-Workshop
3+
title: PEcAn Terrestial Model Informatics Workshop 2016
4+
author: Tony Gardella
5+
author_title: Ex Project Manager @PEcAn Project
6+
author_url: https://github.com/tonygardella
7+
author_image_url: https://avatars.githubusercontent.com/u/8570691?v=4
8+
tags: [PEcAn, workshop]
9+
---
10+
11+
12+
[](#background)PEcAn 2 Terrestial Model Informatics Workshop 2016
13+
=================================================================
14+
15+
#### Information
16+
17+
The PEcAn 2 Terrestrial Model Informatics Workshop took place from May 9th-11th 2016 at Boston University.
18+
19+
The big picture of this workshop was to discuss how new and emerging tools and technologies can accelerate the pace of progress in ecosystem and land surface modeling and allow us to better respond to the needs of the community, policy makers, and the general public. This workshop specifically targeted the modeling community.
20+
21+
<!--truncate-->
22+
23+
The goals of the meeting were to:
24+
25+
* Identify informatic, analysis, and cyberinfrastructure bottlenecks in the current workflows of the terrestrial ecosystem/land surface modeling community
26+
* Identify redundancies and opportunities for interoperability of tools/methods
27+
* Develop a roadmap for improving modeling cyberinfrastructure
28+
* Provide training in PEcAn tools
29+
* Present and solicit feedback on PEcAn development plan
30+
* Identify bottlenecks in PEcAn usability/adoption
31+
32+
The full agenda of the workshop can be found here: [link](https://docs.google.com/document/d/18T0ugOwf8iBbLzMMDFrWiouM7UE2J13DwKLtP-jzEPw/edit?usp=sharing)
33+
34+
The workshop will produce a paper outlining cyberinfrastructure bottelnecks, opportunities, and a roadmap. An updated PEcAn workplan will be produces as well.
35+
36+
To facilitate discussion, themes and subthemes were created to focus discussion (links lead to slides for each theme):
37+
38+
[Big Picture](https://docs.google.com/presentation/d/1AoQLkqLhudijcz3DQSwZrXcXTFpQVFyajNn44O_PNiA/edit?usp=sharing)
39+
40+
[Cyber-infrastructure Foundations](https://docs.google.com/presentation/d/1CAoq6BFMY_osgNGipN3bGTdEOiPHqiplYi9FAVOXtsk/edit?usp=sharing)
41+
42+
Provenance, Standards, Repeatability, Accessibility, Sharing & Communication, Transparency, Support for clusters, cloud, etc., Portability
43+
44+
[Data Ingest](https://docs.google.com/presentation/d/1nYF0GkE_m1UHvQpGWZ6BD62l63fPVJWyXhhhwUHVCrs/edit?usp=sharing)
45+
46+
Drivers, Constraints, Initial Conditions, Traits, Data uncertainty
47+
48+
[Validation, Benchmarking & Visualization](https://docs.google.com/presentation/d/1b4rkomRtMRRTKQqlhKY1tioGvtRkWEvlLMNb0LMr97I/edit?usp=sharing)
49+
50+
[Analysis](https://docs.google.com/presentation/d/1lnUh68jpDFkj2ncOZcI5SmXC_JXUZLTYEU4YEkKPeUA/edit?usp=sharing)
51+
52+
Model sensitivity, uncertainty, ensemble,etc.
53+
54+
[Tools for analyzing specific data types](https://docs.google.com/presentation/d/1X0Oo0p_3kKkWnCu52EHHfiyt3IZobEf9i3KD9AolARg/edit?usp=sharing)
55+
56+
[Calibration](https://drive.google.com/open?id=0B1m8BX9QfC1tU1RiSjFvT0sxbjA)
57+
58+
Trait meta-analysis, parameter data assimilation
59+
60+
[State Data Assimilation](https://docs.google.com/presentation/d/1OLG6jjy1MXhU7JBPzcOkhLAAhoZr-WAorJg03xoCjiY/edit?usp=sharing)
61+
62+
[Multi-model Synthesis](https://docs.google.com/presentation/d/1bfqtvnVodiJe-ZVk0QnX4oUX4Yk9o_CBRHFBGUXlCmQ/edit?usp=sharing)
63+
64+
Adding Models
65+
66+
Growing the PEcAn community
67+
68+
Challenges with running multiple models, tools for MIPs
69+
70+
#### Thank you to everyone that attended. The PEcAn Team looks forward to working with you all!
71+
72+
![](https://dl.dropboxusercontent.com/s/2v9ysx5fart78hh/Workshop_Photo.jpg?dl=0)

‎blog/2021-08-23-gsoc-blog.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
slug: eshan-gsoc-2021-report
3+
title: GSoC'21 Report- Webpage Updates
4+
author: Eshan Tripathi
5+
author_title: GSoC'21 participant @PEcAn Project
6+
author_url: https://github.com/eshantri
7+
author_image_url: https://avatars.githubusercontent.com/u/48446729?v=4
8+
tags: [gsoc, gsoc21]
9+
---
10+
11+
## Introduction
12+
13+
The project aims at creating and deploying a user friendly, interactive and accessible website for PEcAn Project.
14+
PEcAn Project's website consisted of html pages, bookdown and pkgdown pages being rendered separately. In this project, all separate sections have been integrated as a consistent, modern website with elegant UI with the help of [Docusaurus 2](https://docusaurus.io/), a static site generator. This project has been created as a part of [GSoC'21](https://summerofcode.withgoogle.com/).
15+
16+
<!--truncate-->
17+
18+
## Useful Links
19+
20+
- Github Repository- https://github.com/PecanProject/web
21+
- Hosted Link- https://pecanproject.github.io/web/
22+
- Documentation- https://github.com/PecanProject/web/blob/main/README.md
23+
24+
## Preparations
25+
26+
After my proposal was selected for the project I started interacting with the mentors and asked them about their expectation about design. I also studied the codebase of the existing website. Since I was familiar with ReactJs, I found it much better to have a static site generator for the project. I studied the official docusaurus docs and got familiar with its ecosystem.
27+
Using [figma](https://www.figma.com) I prepared wireframes for the website. After the first GSoC meeting, I got valuable suggestions from the mentors, which were used to improvise the designs and development of the working model of website began.
28+
29+
## Coding Period
30+
31+
To develop the working model on the website it was required to keep in mind the best practices and modular design, so that changes could be made easily in the future. I have tried to maintain this approach. In this period following goals have been accomplished:
32+
33+
- Revamped the website and converted it into a ReactJs based single page application.
34+
- Added a blog for posting blogs.
35+
- Integrated PEcAn's documentation as part of the website.
36+
- Automated build process of the website with the help of GitHub actions. This helps to deploy the website automatically to GitHub pages, as soon as changes are pushed.
37+
- Documented steps for PEcAn team to add and modify content.
38+
39+
## Challenges
40+
41+
Since the documentation is maintained as [bookdown](https://bookdown.org/) specific [Rmarkdown](https://rmarkdown.rstudio.com/docs/) format, it is difficult to parse it using docusaurus's native parser, which supports markdown. The bookdown doesn't offer a native way of converting into md, with relative directory structure to reference different files. I tried converting each Rmd file into md, one by one using RStudio's built-in `knit` function, but it wasn't feasible. The only optimal solution seemed was temporarily editing `MakeFile`, but it couldn't achieve desired results.
42+
This is also the exact challenge with tutorials section.
43+
44+
## Next Steps
45+
46+
At present we have an iframe which helps us load the documentation inside the website, though it looks like a part of the website, it is the website which is being rendered by bookdown. It can be found on this repo-
47+
https://github.com/PecanProject/pecan-documentation. An example of how this is achieved is shown in below codeblock-
48+
49+
```javascript
50+
<Layout title="Develop" style={{ height: "100%" }}>
51+
<Foot>
52+
<body className="documentation"></body>
53+
</Foot>
54+
<iframe
55+
src="https://pecanproject.github.io/pecan-documentation/develop/"
56+
style={{ border: "none" }}
57+
width="100%"
58+
height="100%"
59+
allowFullScreen
60+
id="iFrame1"
61+
>
62+
<p>
63+
<a href="/en-US/docs/Glossary">
64+
Fallback link for browsers that don't support iframes
65+
</a>
66+
</p>
67+
</iframe>
68+
</Layout>
69+
```
70+
71+
The main issue is that if we had docs already natively on the repository, they would have been much faster to load and would have offered the users a much better experience. So it is essential and recommended to figure out a way for achieving this. Further priorities would be-
72+
73+
- Adding the tutorials section
74+
- Adding a search bar that used scraping to find matches all across website.
75+
76+
## Acknowledgements
77+
78+
Finally, I'd like to say that this summer of 2021 has been the most amazing experience I've ever had. I learnt a lot of technical and non technical skills. [Dlebauer](https://github.com/dlebauer) and [ImPrakher](https://github.com/im-prakher) have been awesome mentors and their feedback and suggestions were a key to accomplishing the project.

0 commit comments

Comments
 (0)