spatial-model-editor.github.io

How it works

• the contents of each page are stored in yaml format in src/content
• there is a corresponding pug HTML template for each page in src/pug
• uses CSS and icons from the Bootstrap framework
• uses pnpm and webpack to manage the build and dependencies

Structure

• src/content
  • each page has a yaml file with the content for that page
  • this data is made available as content to the pug template of the same name
• src/pug
  • each page has a pug template
  • the html page is generated from this template
  • it inherits the base layout from src/pug/layouts/base.pug
  • it can use functions ('mixins') from src/pug/mixins
• src/assets
  • contains the image and video files
• src/scss
  • import and customize Bootstrap css
• src/js
  • additional client-side javascript
• src/index.js
  • webpack entry point: import all js and css dependencies

Deployment

On every commit to the main branch:

• deploy.yml action builds website & deploys to github-pages at spatial-model-editor.github.io

How to edit locally

• clone this repo
  • git clone https://github.com/spatial-model-editor/spatial-model-editor.github.io.git
  • cd spatial-model-editor.github.io
• (optional) install pre-commit to auto-format code
  • pip install pre-commit
  • pre-commit install
• install pnpm
  • windows: iwr https://get.pnpm.io/install.ps1 -useb | iex
  • linux/macOS: curl -fsSL https://get.pnpm.io/install.sh | sh -
• install website dependencies
  • pnpm install
• start a live in-browser local preview of the website
  • pnpm start
• make changes to the files in src/ and the preview will update automatically

Adding a new page

To add a page X:

• create a text file src/pug/X.pug with the contents extends layouts/base
• create a text file src/content/X.yml with the contents page_title: "X"
• add an entry for it to the list of pages in src/content/navbar.yml

Acknowledgements

• based on https://github.com/StartBootstrap/startbootstrap-heroic-features