Skip to content

README.md

Latest commit

 

History

History
56 lines (45 loc) · 3.77 KB

README.md

File metadata and controls

56 lines (45 loc) · 3.77 KB
Raw

OpenSpace Project Website

To build the webpage:

  • Run pip install -r requirements.txt from the root folder to install Python dependencies
  • For development, run quarto preview in the root folder. A brower will open to localhost:12800. This uses hot reloading, so whenever any file is changed the webpage will reload
  • For deployment, run quarto render. The generated webpage is created in the _site folder

General considerations

For loading performance, consider converting image files to .webp format using, for example, ImageMagick.

File formats and tools used in the webpage:

  • YML: Both used for configuration and data files
  • SCSS: Style sheets
  • EJS: Templating language to turn files/YML into HTML
  • Bootstrap: Layout for the webpage

File locations

  • assets: Assets used globally for the webpage itself
    • assets/images: General folder for images. Images should have a naming scheme of separating individual words using _. If multiple images are present for a single name, -1, -2, etc are appended. If a specific image variant is used (black, white, color, ...) it is separated with --, for example logo--white.webp
      • assets/images/banner: Images used for the hero banner section. Images in this folder should be of the aspect ratio φ:1 (1.61803398874989:1)
      • assets/images/carousel: Images that are automatically rotated through in the main page carousel
      • assets/images/features: Images used on feature pages
      • assets/images/use-cases: Images used on the use-cases page
      • assets/images/user-meetings: Images used on user meeting pages
    • assets/brand: Brand assets (logos, wordmarks) for OpenSpace and partner institutions
    • assets/js: JavaScript files used by the webpage
    • assets/style: SCSS style files used for the webpage
    • assets/team: Profile images and information about team members
    • assets/listing: Different listings that are used to generate content on different pages. Each .yml in this folder is named after the webpage on which it is used
    • assets/videos: Video assets used on the webpage
  • community/events: A list of events that will automatically be added to the events page. Each event should be in a subfolder that has an index.qmd
  • resources: Resources that are provided by the webpage for external use
  • _template: Partial pages that are included or EJS file templates used by other pages
  • _announcement.yml: Configuration file to control a top-level announcement banner
  • _footer.yml: Configuration file to control the information provided in the footer
  • _navbar.yml: Configuration file to control the top navigation bar
  • _sidebars.yml: Configuration file to control per-page sidebars
  • _quarto.yml: Root configuration file for Quarto
  • 404.qmd: Special 404 page that gets displayed when someone navigates to a page that doesn't exist
  • index.qmd: Root page

Checklists

Add new Team Member / Student

  • Resize profile image to 500x500 pixels
  • Copy profile image into the correct subfolder in assets/team. The first two characters should be a sequence number within that folder
  • Add the new person to the assets/team/team.yml

Team Member becomes inactive

  • Move profile image from the current folder in assets/team to the -previous version
  • Update the profile image file name to have the correct sequence number. We try our best to have previous members ordered based on their seniority; longer time in the project -> lower number
  • Move the persons entry in the assets/team/team.yml to the current group, update type and image entries