[Major]: Update website to new look

.github/workflows/build.yml

@@ -0,0 +1,16 @@
+name: build
+on:
+  pull_request:
+    branches: [master]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build Test
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2.3.1
+
+      - 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.
+        run: |
+          npm install
+          npm run build

.github/workflows/deploy.yml

@@ -0,0 +1,21 @@
+name: deploy
+on:
+  push:
+    branches: [master]
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2.3.1
+
+      - 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.
+        run: |
+          npm install
+          npm run build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@4.1.4
+        with:
+          branch: gh-pages # The branch the action should deploy to.
+          folder: build # The folder the action should deploy.

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+.docusaurus
+/build

README.md

@@ -1,4 +1,193 @@
-PecanProject.github.io
-======================
+# PEcAn Project Website
 
-PEcAn webpage
+This repository contains the content of the PEcAn Project website.
+
+This README is written for members of the PEcAn Project community who wish to add content to or otherwise modify the website.
+The website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+The [Docusaurus Documentation](https://docusaurus.io/docs) provides details on maintaining the website; this README is not intended to replace the Docusaurus documentation.
+Rather, it is intended to provide a brief introduction to common tasks as well as project specific information.
+
+This site was created by Eshan Tripathi with mentorship from Prakher Prashank as part of [GSoC '21](https://summerofcode.withgoogle.com/).
+
+## Table of contents
+
+<details open="open">
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+        <li><a href="#local-development">Local Development</a></li>
+        <li><a href="#build">Build</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#adding-content">Adding Content</a>
+      <ul>
+        <li><a href="#feature-cards">Feature Cards</a></li>
+        <li><a href="#pecan-people">PEcAn People</a></li>
+        <li><a href="#blog">Blog</a></li>
+      </ul>
+    </li>
+    <li><a href="#screenshots">Screenshots</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li>
+      <a href="#next-steps">Next Steps</a>
+      <ul>
+        <li><a href="#optimising-documentation">Optimising documentation</a></li>
+        <li><a href="#adding-tutorials">Adding tutorials section</a></li>
+        <li><a href="#blog">Blog</a></li>
+      </ul>
+    </li>
+  </ol>
+</details>
+
+## Getting Started - Setting up the project for local development
+
+This section will help one to setup the project for local development.
+
+### Requirements
+
+- Node version >= 12.13.0
+- yarn
+
+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/).
+Make sure yarn is installed. [Install yarn](https://classic.yarnpkg.com/en/docs/install/#debian-stable).
+
+### Installation
+
+```console
+yarn install
+```
+
+### Local Development
+
+```console
+yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```console
+yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+## Adding Content
+
+This describes how to add or modify the Website's content.
+
+### Add or Edit Feature Cards
+
+Feature Cards on the website homepage highlight the key features of the PEcAn Project.
+
+![Feature Card](screenshots/featureCard.png)
+
+To modify the feature cards-
+
+- Navigate to `src/components/HomepageFeatures.js`
+- Navigate to `const FeatureList` inside `HomepageFeatures.js`
+
+![FeatureList](screenshots/FeatureList.png)
+
+Every item inside the `FeatureList` array contains a JavaScript object enclosed `{}` and separated by `,` .
+Each of these objects is a feature that is displayed on the homepage and contains a `title`, `Svg` and `description`.
+You can edit or remove feature cards and the changes will be reflected after the code passes build test.
+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.
+You should use SVG images when available.
+
+### Add or Edit a Person (Contributors)
+
+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.
+
+![PecanPople](screenshots/pecanPeople.png)
+
+```javascript
+const contributors = [
+  {
+    name: "John Doe",
+    email: "abc@xyz.com",
+    role: "Lead PEcAn Developer",
+    education: "PhD at MIT, USA",
+    img: "https://previews.123rf.com/images/stockbroker/stockbroker1710/stockbroker171000524/89639450-portrait-of-a-young-smiling-professional-man-arms-crossed.jpg",
+  },
+];
+```
+
+To add and modify information move to the `static/utils/contributors.js` file.
+It contains an array called `contributors` which contains JavaScript objects which are enclosed by `{}` and contain following fields-
+
+![Contributors.js](screenshots/contributors.png)
+
+To add a contributor:
+
+1. Copy an existing user's information and paste as a new object in the appropriate order.
+2. Make sure two objects are separated by a `,`.
+3. Edit information in the pasted object.
+4. Add an image to `static/img/people`
+5. Add link to image
+6. Build site and check that the new contributor record appears where expected
+
+The new contributor and / or any changes will appear on the website automatically after changes are successfully merged into the main branch.
+
+### Add or Edit a Blog Post
+
+A link to blog posts can be found in the navigation menue at the top of the website.
+The Docusaurus blog feature is described in detail in the [Docusaurus documentation](https://docusaurus.io/docs/blog).
+By default when someone clicks on `blog` link they will be directed to a page containing list of all present blogs on the website.
+
+Steps to add a blog post:
+
+1. Create a new file named `blog/yyyy-mm-dd-title.md`
+2. In the top of your blog file add a yaml header.
+3. Add at least `title`, `author` and `tags` yaml fields.
+   - These metadata fields help with search and navigation on the site.
+   - 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.
+4. writing your blog and save the file.
+5. any images can be put in `static/img/` and referenced using a relative path `static/img/myimage.png`
+6. build the website to make sure the blog shows up as expected
+7. After the new changes are merged into the main branch, the new blog post will appear on the website.
+
+```yml
+title: GSoC '21 Report- Webpage Updates
+author: Eshan Tripathi
+author_title: GSoC'21 participant @PEcAn Project
+author_url: https://github.com/eshantri
+author_image_url: https://avatars.githubusercontent.com/u/48446729?v=4
+tags: [gsoc, gsoc21]
+```
+
+## Screenshots
+
+This section contains screenshots of website's homepage in light and dark theme.
+
+![LightTheme](screenshots/light.png)
+
+![DarkTheme](screenshots/dark.png)
+
+## Contributing
+
+This is an open source project and contributions are what make an open source community.
+Everyone is welcome to contribute to this project.
+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.
+
+First time contributors are welcome. Contributions can be very simple, make sure to check out beginner friendly issues, if present.
+
+## Next Steps
+
+This section contains future plans for the website. New contributors can use this section as a reference for planning their contributions.
+
+### Optimising Documentation
+
+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.
+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.
+
+### Adding tutorials section
+
+The tutorials section from old site need to be migrated into the new site.
+One can find tutorials here (<https://github.com/PecanProject/pecan/tree/develop/documentation/tutorials>).

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

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

@@ -0,0 +1,72 @@
+---
+slug: Terrestial-Model-Informatics-Workshop
+title: PEcAn Terrestial Model Informatics Workshop 2016
+author: Tony Gardella
+author_title: Ex Project Manager @PEcAn Project
+author_url: https://github.com/tonygardella
+author_image_url: https://avatars.githubusercontent.com/u/8570691?v=4
+tags: [PEcAn, workshop]
+---
+
+
+[](#background)PEcAn 2 Terrestial Model Informatics Workshop 2016
+=================================================================
+
+#### Information
+
+The PEcAn 2 Terrestrial Model Informatics Workshop took place from May 9th-11th 2016 at Boston University.
+
+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.
+
+<!--truncate-->
+
+The goals of the meeting were to:
+
+*   Identify informatic, analysis, and cyberinfrastructure bottlenecks in the current workflows of the terrestrial ecosystem/land surface modeling community
+*   Identify redundancies and opportunities for interoperability of tools/methods
+*   Develop a roadmap for improving modeling cyberinfrastructure
+*   Provide training in PEcAn tools
+*   Present and solicit feedback on PEcAn development plan
+*   Identify bottlenecks in PEcAn usability/adoption
+
+The full agenda of the workshop can be found here: [link](https://docs.google.com/document/d/18T0ugOwf8iBbLzMMDFrWiouM7UE2J13DwKLtP-jzEPw/edit?usp=sharing)
+
+The workshop will produce a paper outlining cyberinfrastructure bottelnecks, opportunities, and a roadmap. An updated PEcAn workplan will be produces as well.
+
+To facilitate discussion, themes and subthemes were created to focus discussion (links lead to slides for each theme):
+
+[Big Picture](https://docs.google.com/presentation/d/1AoQLkqLhudijcz3DQSwZrXcXTFpQVFyajNn44O_PNiA/edit?usp=sharing)
+
+[Cyber-infrastructure Foundations](https://docs.google.com/presentation/d/1CAoq6BFMY_osgNGipN3bGTdEOiPHqiplYi9FAVOXtsk/edit?usp=sharing)
+
+Provenance, Standards, Repeatability, Accessibility, Sharing & Communication, Transparency, Support for clusters, cloud, etc., Portability
+
+[Data Ingest](https://docs.google.com/presentation/d/1nYF0GkE_m1UHvQpGWZ6BD62l63fPVJWyXhhhwUHVCrs/edit?usp=sharing)
+
+Drivers, Constraints, Initial Conditions, Traits, Data uncertainty
+
+[Validation, Benchmarking & Visualization](https://docs.google.com/presentation/d/1b4rkomRtMRRTKQqlhKY1tioGvtRkWEvlLMNb0LMr97I/edit?usp=sharing)
+
+[Analysis](https://docs.google.com/presentation/d/1lnUh68jpDFkj2ncOZcI5SmXC_JXUZLTYEU4YEkKPeUA/edit?usp=sharing)
+
+Model sensitivity, uncertainty, ensemble,etc.
+
+[Tools for analyzing specific data types](https://docs.google.com/presentation/d/1X0Oo0p_3kKkWnCu52EHHfiyt3IZobEf9i3KD9AolARg/edit?usp=sharing)
+
+[Calibration](https://drive.google.com/open?id=0B1m8BX9QfC1tU1RiSjFvT0sxbjA)
+
+Trait meta-analysis, parameter data assimilation
+
+[State Data Assimilation](https://docs.google.com/presentation/d/1OLG6jjy1MXhU7JBPzcOkhLAAhoZr-WAorJg03xoCjiY/edit?usp=sharing)
+
+[Multi-model Synthesis](https://docs.google.com/presentation/d/1bfqtvnVodiJe-ZVk0QnX4oUX4Yk9o_CBRHFBGUXlCmQ/edit?usp=sharing)
+
+Adding Models
+
+Growing the PEcAn community
+
+Challenges with running multiple models, tools for MIPs
+
+#### Thank you to everyone that attended. The PEcAn Team looks forward to working with you all!
+
+![](https://dl.dropboxusercontent.com/s/2v9ysx5fart78hh/Workshop_Photo.jpg?dl=0)

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

@@ -0,0 +1,78 @@
+---
+slug: eshan-gsoc-2021-report
+title: GSoC'21 Report- Webpage Updates
+author: Eshan Tripathi
+author_title: GSoC'21 participant @PEcAn Project
+author_url: https://github.com/eshantri
+author_image_url: https://avatars.githubusercontent.com/u/48446729?v=4
+tags: [gsoc, gsoc21]
+---
+
+## Introduction
+
+The project aims at creating and deploying a user friendly, interactive and accessible website for PEcAn Project.
+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/).
+
+<!--truncate-->
+
+## Useful Links
+
+- Github Repository- https://github.com/PecanProject/web
+- Hosted Link- https://pecanproject.github.io/web/
+- Documentation- https://github.com/PecanProject/web/blob/main/README.md
+
+## Preparations
+
+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.
+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.
+
+## Coding Period
+
+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:
+
+- Revamped the website and converted it into a ReactJs based single page application.
+- Added a blog for posting blogs.
+- Integrated PEcAn's documentation as part of the website.
+- 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.
+- Documented steps for PEcAn team to add and modify content.
+
+## Challenges
+
+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.
+This is also the exact challenge with tutorials section.
+
+## Next Steps
+
+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-
+https://github.com/PecanProject/pecan-documentation. An example of how this is achieved is shown in below codeblock-
+
+```javascript
+<Layout title="Develop" style={{ height: "100%" }}>
+  <Foot>
+    <body className="documentation"></body>
+  </Foot>
+  <iframe
+    src="https://pecanproject.github.io/pecan-documentation/develop/"
+    style={{ border: "none" }}
+    width="100%"
+    height="100%"
+    allowFullScreen
+    id="iFrame1"
+  >
+    <p>
+      <a href="/en-US/docs/Glossary">
+        Fallback link for browsers that don't support iframes
+      </a>
+    </p>
+  </iframe>
+</Layout>
+```
+
+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-
+
+- Adding the tutorials section
+- Adding a search bar that used scraping to find matches all across website.
+
+## Acknowledgements
+
+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.