devcontainer support

.devcontainer/devcontainer.json

@@ -0,0 +1,39 @@
+{
+  "name": "grass-website",
+  "image": "mcr.microsoft.com/devcontainers/base:ubuntu-22.04",
+  "hostRequirements": {
+    "cpus": 2,
+    "memory": "4gb",
+    "storage": "5gb"
+  },
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "24.13.0"
+    },
+    "ghcr.io/devcontainers/features/hugo:1": {
+      "version": "0.113.0",
+      "extended": true
+    }
+  },
+  "workspaceFolder": "/workspaces/grass-website",
+  "forwardPorts": [1313],
+  "portsAttributes": {
+    "1313": {
+      "label": "Hugo server",
+      "onAutoForward": "openPreview"
+    }
+  },
+  "remoteEnv": {
+    "HUGO_ENVIRONMENT": "development",
+    "HUGO_ENV": "development"
+  },
+  "postCreateCommand": "npm ci",
+  "waitFor": "postCreateCommand",
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "terminal.integrated.defaultProfile.linux": "bash"
+      }
+    }
+  }
+}

.env

@@ -0,0 +1,5 @@
+HUGO_VERSION=0.113.0
+NGINX_VERSION=1.18.0
+NODE_VERSION=24.13.0
+BASE_URL=http://localhost
+SOURCE_PORT=8080

.github/workflows/hugo.yml

@@ -31,7 +31,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      HUGO_VERSION: 0.80.0
+      HUGO_VERSION: 0.113.8
     steps:
       - name: Install Hugo CLI
         run: |

.nvmrc

@@ -1 +1 @@
-22.14.0
+v24.13.0

README.md

@@ -1,13 +1,17 @@
 # Hugo theme for GRASS website
 
-This repository contains the code of the GRASS project website: https://grass.osgeo.org/
+This repository contains the code of the GRASS project website: [https://grass.osgeo.org/](https://grass.osgeo.org/)
 
-# Contribute
+## Contribute
 
 Below some instructions how to contribute by running a local instance for testing
 prior to commit changes as pull requests.
 
-## Hugo version in the server
+You do not need a local build environment for simple text-only changes (for example,
+adding a news article). You can edit Markdown and open a pull request. Use one of
+the options below when you want to preview the site or test a full build.
+
+### Hugo version in the server
 
 Currently, the website is built with hugo version 0.113.0.
 
@@ -21,14 +25,78 @@ Currently, the website is built with hugo version 0.113.0.
 
     apt install hugo
 
+### Install Node.js and npm
+
+Node.js is used to install the frontend dependencies (see `package.json`).
+The dev container and Docker build use Node.js 24 (see `.devcontainer/devcontainer.json`
+and `.env`).
+
+Install Node.js and npm using your preferred method for your OS. For example:
+
+    # Debian/Ubuntu (may not be the latest Node.js)
+    apt-get update
+    apt install nodejs npm
+
+Or using [`nvm`](https://github.com/nvm-sh/nvm):
+
+    nvm install 24
+    nvm use 24
+
 ### Build pages locally
 
     cd grass-website
 
+    # Install dependencies
+    npm ci
+
+    # Build site
     hugo
 
 Output HTML generated in the /public directory at the root of the `grass-website` directory
 
+### Add or update a dependency
+
+Frontend libraries are managed with npm and are referenced by Hugo via module mounts
+in `config.toml`.
+
+From the repository root:
+
+    # Add a runtime dependency
+    npm install <package>
+
+    # Or add a dev dependency
+    npm install --save-dev <package>
+
+Commit both `package.json` and `package-lock.json`, then verify the site still builds:
+
+    npm ci
+    hugo
+
+If you need to use the library in the site (CSS/JS/fonts), make it available to Hugo
+by adding a module mount in `config.toml` and then include it from the theme.
+
+Example (JS):
+
+    # config.toml
+    [[module.mounts]]
+    source = "node_modules/<package>/dist/<file>.min.js"
+    target = "assets/js/<package>/<file>.min.js"
+
+    # themes/grass/layouts/partials/head.html
+    {{ $lib := resources.Get "js/<package>/<file>.min.js" }}
+    <script src="{{ $lib.Permalink }}"></script>
+
+Example (CSS):
+
+    # config.toml
+    [[module.mounts]]
+    source = "node_modules/<package>/dist/<file>.min.css"
+    target = "assets/css/<package>/<file>.min.css"
+
+    # themes/grass/layouts/partials/head.html
+    {{ $styles := resources.Get "css/<package>/<file>.min.css" }}
+    <link rel="stylesheet" href="{{ $styles.Permalink }}">
+
 ### Run server locally
 
 Run hugo development server from the `grass-website` root directory:
@@ -37,17 +105,63 @@ Run hugo development server from the `grass-website` root directory:
 
     hugo server
 
-View the website running at  http://localhost:1313
+View the website running at  <http://localhost:1313>
+
+## Dev Container (optional)
+
+This repository includes a Dev Container configuration in `.devcontainer/` to
+provide a consistent Hugo/Node setup for local development. This is optional and
+works with any IDE or tooling that supports `devcontainer.json` (for example VS
+Code Dev Containers or GitHub Codespaces).
+
+In VS Code, use the Command Palette: `Dev Containers: Reopen in Container`.
+
+Open the repository in your Dev Container-enabled tool, then run:
+
+    hugo server --bind 0.0.0.0
+
+The dev container forwards port `1313` by default. View the site at
+<http://localhost:1313>
+
+## Test a production-like build with Docker Compose
+
+The `docker-compose.yml` setup builds the site with Hugo (using the versions
+defined in `.env`) and serves the generated `public/` directory using Nginx.
+This is useful to test a production-like build locally.
 
+Build and run:
+
+    docker compose up --build
+
+By default this publishes the site at <http://localhost:8080> (see `SOURCE_PORT` in
+`.env`). Stop with:
+
+    docker compose down
+
+### Notes on the Docker build container
+
+We are using the `hugomods/hugo` Docker image from [hugomods.com](https://docker.hugomods.com/docs/tags/).
+The image provides:
+
+* Extended Hugo
+* Go
+* Node.js
+* Git
+* Dart Sass
+
+You can also run a one-off build without starting Nginx:
+
+    docker compose run --rm build
 
 ## How to add content
 
 Content must be created in .md files using markdown syntax. HTML markup can also be mixed with markdown for more advanced content presentation.
 
 Useful resources:
- * [Hugo docs](https://gohugo.io/documentation/)
- * [Markdown guide](https://www.markdownguide.org/basic-syntax/)
- * [GRASS Website style guide](https://grass.osgeo.org/about/theme/)
+
+* [Hugo docs](https://gohugo.io/documentation/)
+* [Markdown guide](https://www.markdownguide.org/basic-syntax/)
+* [GRASS Website style guide](https://grass.osgeo.org/about/theme/)
 
 ### Add a news item
 
@@ -67,7 +181,7 @@ Useful resources:
 
       hugo
 
-* Check result at http://localhost:1313/news/
+* Check result at [http://localhost:1313/news/](http://localhost:1313/news/)
 
 ### Create a new content page
 
@@ -94,7 +208,7 @@ Useful resources:
 
       hugo
 
-* Check result at http://localhost:1313/about/mypage
+* Check result at [http://localhost:1313/about/mypage](http://localhost:1313/about/mypage)
 
 ### Mind SEO
 
@@ -121,7 +235,6 @@ If the md file used for generating the page has a summary, its value is used as
   layout: "event"
   logo: images/conferences_logos/CONF_LOGO_YEAR.png
 
-
 * Add your logo to `/grass-website/images/conferences_logos` folder
 
 * Rebuild if needed
@@ -130,7 +243,7 @@ If the md file used for generating the page has a summary, its value is used as
 
       hugo
 
-* Check result at http://localhost:1313/news/ in the `Next Events` section in the right sidebar.
+* Check result at [http://localhost:1313/news/](http://localhost:1313/news/) in the `Next Events` section in the right sidebar.
   Your event will show up only if it is one in the top three from today.
 
 ### Submit your changes

config.toml

@@ -1,5 +1,5 @@
 baseURL = "https://grass.osgeo.org/"
-theme = "grass"
+theme = ["grass"]
 enableInlineShortcodes = true
 
 [params]
@@ -12,6 +12,77 @@ changefreq = "monthly"
 filename = "sitemap_hugo.xml"
 priority = 0.5
 
+[security]
+  enableInlineShortcodes = true
+  [security.exec]
+    allow = ['^dart-sass-embedded$', '^go$', '^npx$', '^postcss$', '^babel$']
+
+[module]
+
+    [[module.mounts]]
+    source = "node_modules/bootstrap-icons/font/fonts"
+    target = "static/css/fonts"
+
+    [[module.mounts]]
+    source = "node_modules/@fortawesome/fontawesome-free/webfonts"
+    target = "static/css/webfonts"
+
+    [[module.mounts]]
+    source = "node_modules"
+    target = "assets/node_modules"
+
+    [[module.mounts]]
+    source = "static"
+    target = "static"
+
+    [[module.mounts]]
+    source = "assets"
+    target = "assets"
+
+    [[module.mounts]]
+    source = "node_modules/jquery/dist/jquery.slim.min.js"
+    target = "assets/js/jquery/jquery.slim.min.js"
+
+    [[module.mounts]]
+    source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+    target = "assets/js/bootstrap/bootstrap.bundle.min.js"
+
+    [[module.mounts]]
+    source = "node_modules/bootstrap/scss"
+    target = "assets/scss/bootstrap"
+
+    [[module.mounts]]
+    source = "node_modules/bootstrap/dist/css/bootstrap.min.css"
+    target = "assets/css/bootstrap/bootstrap.min.css"
+
+    [[module.mounts]]
+    source = "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+    target = "assets/css/fontawesome/all.min.css"
+
+    [[module.mounts]]
+    source = "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"
+    target = "assets/css/fontawesome/fontawesome.min.css"
+
+    [[module.mounts]]
+    source = "node_modules/flag-icons/css/flag-icons.min.css"
+    target = "assets/css/flag-icons/flag-icons.min.css"
+
+    [[module.mounts]]
+    source = "node_modules/@highlightjs/cdn-assets/highlight.min.js"
+    target = "assets/js/highlightjs/highlight.min.js"
+
+    [[module.mounts]]
+    source = "node_modules/@highlightjs/cdn-assets/styles/default.min.css"
+    target = "assets/css/highlightjs/default.min.css"
+
+    [[module.mounts]]
+    source = "node_modules/photoswipe/dist/photoswipe.css"
+    target = "assets/css/photoswipe/photoswipe.css"
+
+    [[module.mounts]]
+    source = "node_modules/photoswipe/dist/photoswipe-lightbox.esm.js"
+    target = "assets/js/photoswipe/photoswipe-lightbox.esm.js"
+
 
 [markup]
 defaultMarkdownHandler = "goldmark"

docker-compose.yml

@@ -0,0 +1,37 @@
+services:
+  build:
+    image: hugomods/hugo:${HUGO_VERSION}
+    env_file:
+      - .env
+    environment:
+      - HUGO_ENVIRONMENT=production
+      - HUGO_ENV=production
+      - HUGO_EXTENDED=true
+      - NODE_VERSION=${NODE_VERSION}
+    working_dir: /src
+    command: >-
+      sh -c "apk add --no-cache nodejs npm curl bash
+      && npm install -g n
+      && n \"$NODE_VERSION\"
+      && node -v
+      && npm ci
+      && hugo --minify --baseURL \"$BASE_URL:$SOURCE_PORT/\"
+      && chmod -R a+rX public"
+    volumes:
+      - ./:/src
+      - ~/hugo_cache:/tmp/hugo_cache
+
+  nginx:
+    image: nginx:${NGINX_VERSION}
+    env_file:
+      - .env
+    command: ["nginx", "-g", "daemon off;"]
+    depends_on:
+      build:
+        condition: service_completed_successfully
+    ports:
+      - ${SOURCE_PORT}:80
+    volumes:
+      - ./public:/usr/share/nginx/html:ro
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+