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 Nunjucks HTML template for each page in src/pages
• uses CSS and icons from the Bootstrap framework
• uses pnpm and webpack to manage the build and dependencies
• uses Eleventy as the static site generator

Structure

• src/content
  • each page has a yaml file with the content for that page
  • this data is made available to the Nunjucks template of the same name
• src/pages
  • each page has a Nunjucks template (.njk)
  • the html page 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/assets
  • contains the image and video files
• src/css
  • custom CSS styles
• 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/content/X.yml with the contents page_title: "X"
• create a text file src/pages/X.njk that extends the base layout
• create a text file src/pages/X.11tydata.js with the contents module.exports = require("./_helpers/loadContent")("X.yml");
• 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