umrover / mrover.org

The mrover.org public website

Home Page:https://mrover.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

mrover.org

The official website of the University of Michigan Mars Rover Team

Development Setup

If you are on Mac or Linux, simply follow this installation guide.

If you are on Windows, use this installation guide.

  • If you use the Ruby Installer for Windows, you will have to run the production build command from Git Bash or a similar program (recommended)
  • If you install Jekyll using the Windows Subsystem for Linux, you will have to run the bash command from Powershell to enter a bash prompt and run jekyll commands.

We recommend using Visual Studio Code as your text editor.

Testing the site

To test the site, simply navigate to the /mrover folder in a bash terminal and run

jekyll serve

You can connect to the site by opening your browser and navigating to localhost:4000. Any changes that you save will automatically trigger jekyll to rebuild the site. You can see these changes by refreshing the page. Only you will be able to see these changes.

Building the site for production

To build the site for production, navigate to the /mrover folder in a bash terminal and run

JEKYLL_ENV=production jekyll build

This special command is necessary to include our Google Analytics script, which is not included when simply testing the site.

Once you push to Github, Github Pages will automatically deploy the content in the /docs/ folder (generated by the build command) of the repository to the web.

Always check the version of the site on the web after you have made your changes. Note that it can take 2-15 minutes for all updates to appear online, and you may have to disable cacheing and refresh to get the newest version of the site.

If the site is not appearing, make sure there is a file called CNAME (no file extension) that contains the text mrover.org to the docs folder.

Using Google Analytics

Our site runs a Google Analytics script so that we can view website traffic. Head over to https://analytics.google.com/ and sign in as umrover@gmail.com to get started.

There you can find information such as which pages receive the most attention, how our viewers get to the site, what platforms our site is viewed on, user retention, when people typically view our site, and where in the world our viewers come from.

Updating the Favicon

Go to a website such as https://favicon.io/favicon-converter/ and upload the logo you would like.

Upload your logo image, and download the folder of generated .ico files.

Put the .ico files in the /mrover/icons folder.

Move favicon.ico to the /mrover folder.

You may have to refresh the cache using Ctrl-F5 (in Chrome) to see the favicon update.

Updating Background Pictures

Replace the image with the correct name in /mrover/css/images.

Open the page's .sass file in the _sass folder.

Modify the background-position property under .hero.

Updating About Page

Editing the Content

Navigate to the about/index.html. Each subteam corresponds to one <p> pagagraph with a <h4> heading, and each branch name corresponds to a <h3> heading. Simply modify the text and headings as desired.

Editing the images

Navigate to the about/index.html. Each image is specified as a url() in the style tag of a <div class="info-block">. Add your new image to the about/ folder. Either change the name in the corresponding url() to match your file, or change the name of the file to match the corresponding url().

Editing the structure

This may not be trivial. As of this writing (May 2020), we have working structures for branches with 2, 3, or 4 subteams. To change the number of subteams in a branch, attempt to replicate the div structure of a pre-exisiting branch with the number of subteams want. You may have to revert to the commit from May 2020 if there is no current branch has the numer of subteams you need.

Updating the Rovers Page

The content of the Rovers page is controlled by the .md files in the _roverInfo folder. The images for this page can be stored anywhere, although for the purpose of organization, we keep them in the rovers/roverImages folder.

The .md files in the _roverInfo folder contain data in a YAML frontmatter (surrounded by "---"). Use a text editor to modify the information.

To add a rover to the page, simply copy one of the .md files from a previous year and edit the data inside.

Updating Sponsorship Levels

Navigate to sponsor_us/index.html. All sponsorship level information is under the comment <!-- Sponsorship Levels -->. Simply replace the old information with the new.

Updating Contact Page

The contact page content is in contact/index.html. Simply replace the previous names and contact information with the new ones.

Updating Join Page

The only part of the join page that is typically modified is a message, in red text, indicating which subteams we aren't accepting new members on as SAR approaches.

Navigate to join.index.html. This section is in a <div style="color: red">. If you want to remove this message from the site, simply comment it out so that we can add it again in the future.

Updating Sponsors List

Sponsor information is location in _sponsors/, and sponsor logos are location in sponsorImages/. There is a one-to-one correspondence between each .md file in _sponsors/ and each logo in sponsorImages/.

There are sponsorship information attributes in .md files:

  • name - sponsor name
  • image_path - relative path to logo image, rooted at mrover/
  • rurl - URL of the sponsor's website. Use about:blank if they don't have a website.
  • level - sponsorship level.
    • 4 = platinum
    • 3 = gold
    • 2 = silver
    • 1 = bronze

Adding a sponsor

Copy a .md file in _sponsors/ and modify the information to reflect the new sponsor. Then put your sponsor logo in sponsorImages/ and reflect the image's name in the image_path attribute of the .md file.

Ensure that the sponsor logo is not higher-resolution than it needs to be, which will slow down website load times. You can use Photoshop or a free program like Paint.net or Gimp to change an image's resolution.

Removing a sponsor

Simply remove the sponsor's .md file from _sponsors/. We recommend deleting the corresponding logo from sponsorImages/ to prevent clutter, but the logo will not show up without a .md file.

Updating Donors List

The donors list is located in the _data/donors.csv file. Update this file to add donors.

Remove last year's donors from the list once it starts to get long. When we receive the funds from Giving Blueday is probably the right time.

Donation amounts must be stored with an equal number of digits, including leading zeroes, for Jekyll to sort them correctly. For example, if the greatest donation is 3 digit, then donations with fewer digits like $50 must be entered as 050.

Updating Video on Home Page

Navigate to mrover/index.html. The video is located in a <div class="row-container two">, and it has an iframe tag. To change the video, all that needs to be done is removing the old video ID in the src part and pasting in the new one.

Note

Do not edit the .html or .css files in the /docs folder directly. These are generated by Jekyll.

About

The mrover.org public website

https://mrover.org/


Languages

Language:HTML 52.3%Language:SCSS 42.7%Language:JavaScript 5.0%