AquaPack Robotics

This is the AquaPack Robotics website, built with Eleventy using the Eleventy Excellent starter created by Lene Saile.

Development

npm is required to build this project, so install Node.js and npm if they are not already installed.

Install Dependencies (Do this first)

npm install

Previewing changes

The following command will watch for changes to the site as you edit and make a live preview available. You can view the preview in your browser by navigating to http://localhost:8080 (by default).

npm start

Tip

• The output will tell you if there are any errors, keep an eye on it while editing.
• If you add any new image files, it is recommended to stop and rerun this command.

Production build

This minifies all HTML, CSS, and JavaScript files. The result is in the dist directory.

npm run build

Important

A production build is automatically deployed when changes are pushed to Github, you should never need to do this.

Generating favicons

This command will auto generate the favicons in src/assets/images/favicon using src/assets/svg/misc/logo.svg.

npm run favicons

Generating colors

This command will regenerate the color palette based on the contents of src/_data/designTokens/colorsBase.json.

npm run colors

Cleaning

Removes files generated by the build process:

• dist
• src/_includes/css
• src/_includes/scripts

npm run clean

Removes Open Graph preview images (src/assets/og-images)

npm run clean:og

Editing Content

Comments in the following format sections may contain the following tags:

• [Required]: The value must be specified
• [Optional]: The value may or may not be specified
• [Optional(Value): The value will default to Value if not specified

Navigation Bar

Buttons in the navigation bar are stored as yaml in src/_data/navigation.yaml

Format

# [Required] A list of elements to be displayed in the top bar
#   Can be empty, but must be defined
top:
  # [Optional] An element in the top bar 
  - text: Example  # [Required] The elements name
    url: /example/ # [Required] The url navigated to when clicked

  - text: Example 2
    url: /example-2/

  # Submenus are defined like so:
  - text: SeaWolves
    url: # 
    submenu:
      - text: SeaWolf VIII
        url: /seawolves/seawolfVIII/

      - text: Past SeaWolves
        url: /seawolves/pastSeawolves/

# [Required] A list of elements to be displayed in the footer
bottom:
  - text: Example 3
    url: /example-3/

  - text: Example 4
    url: /example-4/

Members

• Member data is stored as a yaml dictionary in src/_data/members.yaml
• The top level key for each member should be formatted in camel case with all punctuation removed
• Member photos are expected to be in src/assets/images/members/ and name firstName-lastName.jpg
  • John Doe would need a photo at src/assets/images/members/John-Doe.jpg
  • If the photo is in a different format or cannot be renamed, manually specify the image as shown in the format below

Format

johnDoe:
  firstName: John # [Required] Their first name
  lastName: Doe   # [Required] Their last name

  # [Optional] The title to be displayed under their name
  position: Vice Vice President
  
  # [Optional(false)] If they will appear in the Leadership section
  leadership: true
  
  # [Optional(false)] If they will appear in the Alum section
  #   Takes priority over leadership
  alum: false
  
  # [Optional] Will be displayed as chips below their title
  teams:
    - Software
    - Mechanical
    - Electrical
    - Business
    - Admin

  # [Optional] Will be displayed below their team chips
  info:
    - 1st Year Undergraduate Student
    - Engineering

  # [Optional] The link to their linkedin profile
  linkedin: https://www.linkedin.com/in/jdoe

  # [Optional] The link to their github profile
  github: https://github.com/jdoe/
  
  # [Optional] Determines the image displayed
  #   If not present, firstName + "-" + lastName + ".jpg" will be used
  #   If false, a default image will be used
  #   If set to a string, it will be used as the file name
  image: "jdoe-abcdefg.png"

Subteams

Subteam data is stored as a yaml list in src/_data/subteams.yaml

Format

- name: Electrical # [Required]
  icon: bolt       # [Required]
  description: Design and wiring of robot circuitry # [Required]
  hours: 2500 # [Optional] Used to generate hour bars on the homepage

Files

This is a compressed view of the structure of this repository. Many files and directories are not shown, but the ones that you'll interact with the most or are important to be aware of are shown.

src
├── _data/ <----- Contains data files, such as the member manifest
│
├── _includes <-- Snippets that can be included in other pages
│   ├── partials/
│   └── webc/ <-- Custom WebC component declarations
│
├── _layouts/ <-- Page layouts, such as 'base' and 'post'
│
├── assets
│   ├── css
│   │   ├── global/ <---- Sitewide css (you usually don't want to change this)
│   │   └── local/ <----- Per-page css
│   │  
│   ├── images
│   │   ├── favicon/ <--- Auto-generated favicon images (do not touch these)
│   │   ├── members/ <--- Member headshots
│   │   ├── seawolves/ <- Robot photos 
│   │   └── static/ <---- Images that need to be copied directly 
│   │
│   └── svg
│       ├── misc/ <----- It goes here if it doesn't fit in the below categories
│       ├── platform/ <- Icons for platforms like github, linkedin, etc.
│       ├── sponsors/ <- Sponsor logos
│       └── subteams/ <- Subteam icons
│
├── pages/ <- Normal pages, like the homepage
└── posts/ <- Blog posts