spatial-model-editor.github.io

How it works

• each page is a Nunjucks HTML template in src/pages
• the contents of each page are stored in a corresponding yaml file next to the template
• uses CSS, JS and icons from the Bootstrap framework
• uses pnpm to manage dependencies
• uses Eleventy as the static site generator

Structure

• src/pages
  • each page X has a Nunjucks template X.njk
  • and a yaml file X.11tydata.yml with the content for that page, which is made available to the template
  • the html page X.html is generated from this template
  • it inherits the base layout from src/pages/_includes/layouts/base.njk
  • it can use functions ('macros') from src/pages/_includes/macros
• src/pages/_data
  • global data available to all pages, e.g. the list of pages in the navbar
  • the news page content is generated from the CHANGELOG by releases.js
• src/assets
  • contains the image and video files
• src/icons
  • svg icons that are not in Bootstrap Icons
• src/css
  • custom CSS styles
• src/js
  • additional client-side javascript

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/pages/X.11tydata.yml with the contents page_title: "X"
• create a text file src/pages/X.njk that extends the base layout
• add an entry for it to the list of pages in src/pages/_data/navbar.yml

Acknowledgements

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