Use the site-commons theme

.github/workflows/gh-pages.yml

@@ -8,7 +8,6 @@ on:
 
 env:
   HUGO_VERSION: 0.150.0
-  GH_USER: site-commons-machine-user
 
 jobs:
   deploy:
@@ -49,9 +48,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-hugomod-
 
-      - name: Prepare Environment
-        run: git config --global url."https://${{ env.GH_USER }}:${{ secrets.GH_SITE_COMMONS_PAT }}@github.com".insteadOf "https://github.com"
-
       - name: Install Dependencies
         working-directory: site
         run: npm ci

.github/workflows/proof-links.yml

@@ -3,7 +3,6 @@ on: [pull_request, workflow_dispatch]
 
 env:
   HUGO_VERSION: 0.147.8
-  GH_USER: site-commons-machine-user
   LYCHEE_RELEASE: "lychee-v0.15.1-x86_64-unknown-linux-gnu.tar.gz"
   LYCHEE_VERSION_TAG: "v0.15.1"
 
@@ -43,9 +42,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-hugomod-
 
-      - name: Prepare environment
-        run: git config --global url."https://${{ env.GH_USER }}:${{ secrets.GH_SITE_COMMONS_PAT }}@github.com".insteadOf "https://github.com"
-
       - name: Install Dependencies
         working-directory: site
         run: npm ci

AUTHORING.md

@@ -7,6 +7,7 @@ This document is a guide for adding content to the [spine.io](https://spine.io)
     * [URLs in markdown](#urls-in-markdown)
       * [Rule 1](#rule-1----all-internal-links-must-not-start-with-a-slash)
       * [Rule 2](#rule-2----each-link-should-end-with-a-slash-to-prevent-unnecessary-redirects)
+      * [Variables](#variables)
     * [Images](#images)
     * [URLs in HTML](#urls-in-html)
 * [Navigation](#navigation)
@@ -44,6 +45,30 @@ There are two rules to follow:
 |--------------------------------------|-------------------------------------|
 | `[Introduction](docs/introduction/)` | `[Introduction](/docs/introduction)`|
 
+#### Variables
+
+This example shows how to use data variables and a version variable in a URL:
+
+```markdown
+[Hello World]({{% get-site-data "repositories.examples" %}}/hello/)
+
+[Introduction](docs/{{% version %}}/)
+```
+
+Will be rendered as:
+
+```html
+<a href="https://github.com/spine-examples/hello/" target="_blank">Hello World</a>
+
+<a href="/docs/1.9.0/">Introduction</a>
+```
+
+Where:
+
+* {{% get-site-data "repositories.core_jvm_repo" %}} will apply the `core_jvm_repo`
+  from the `site-commons` -> `data/repositories.yml` file.
+* {{% version %}} adds the version label of the current page -> `1.9.0`.
+
 ### Images
 
 To render an image in markdown use:
@@ -70,22 +95,57 @@ When working with layout partials, URLs should be specified using the following
 <img class="logo" src="{{ `img/spine-logo.svg` | relURL }}" alt="Spine logo">
 ```
 
+# Markdown pages
+
+It is nice to have the following parameters on every markdown page, especially in documentation:
+
+```markdown
+---
+title: Getting Started in Java
+description: This guide shows how to start working with Spine in Java.
+headline: Documentation
+---
+```
+
+Where:
+* `title` page title.
+* `description` a short summary of what this page is about. Used for SEO.
+* `headline` shown under the main navigation. If omitted, it is not rendered.
+
+Optional parameters:
+
+```markdown
+---
+header_type: fixed-header
+body_class: privacy
+customjs: js/pages/privacy.js
+---
+```
+
+Where:
+* `header_type` controls how the page header behaves (for example, stays fixed while scrolling).
+* `body_class` adds a CSS class to style a specific page. By default, the body class is based on the page type.
+* `customjs` loads page-specific JavaScript.
+
 # Navigation
 
 ### Main navigation
 
 To edit navigation items, modify `site/data/navbar.yml`. 
-The navigation template is located at `site/layouts/_partials/components/navbar/navigation.html`.
+The navigation layout template is located at `site/layouts/_partials/components/navbar/navigation.html`.
 
 ### Documentation side navigation
 
-The documentation side navigation can be edited in the [SpineEventEngine/documentation](https://github.com/SpineEventEngine/documentation)
-repository in the `docs/data/docs/<version>/sidenav.yml` file.
+The documentation side navigation can be edited in the [SpineEventEngine/documentation][documentation-repo]
+repository in the `docs/data/docs/<version_id>/sidenav.yml` file.
+
+If it is part of a specific documentation module, it can be found in the corresponding repository 
+at `docs/data/docs/<module>/<version_id>/sidenav.yml`.
 
 ### Documentation “Next/Prev” buttons
 
-The “Prev”/“Next” buttons are generated automatically for all document pages.
-The implementation is inside the [SpineEventEngine/documentation](https://github.com/SpineEventEngine/documentation).
+The “Prev”/“Next” buttons are generated automatically for all document pages based on the `sidenav.yml`.
+The implementation is inside the [SpineEventEngine/site-commons][site-commons].
 
 # Adding code samples to the site
 
@@ -120,18 +180,18 @@ file for details.
 # Cloak email
 
 The `cloakemail` shortcode is used to cloak emails or phone numbers from
-spamming bots. We store all email variables in the `site/data/spine.yml` file.
+spamming bots. We store all email variables in the `site/data/emails.yml` file in the `site-commons`.
 
 In markdown files, use the shortcode with a provided variable from a data file, for example:
 
 ```markdown
-{{< cloakemail address_variable="spine.sales_email" >}}
+{{< cloakemail address_variable="emails.sales_email" >}}
 ```
 
 or with the display text:
 
 ```markdown
-{{< cloakemail address_variable="spine.sales_email" display="Contact us" >}}
+{{< cloakemail address_variable="emails.sales_email" display="Contact us" >}}
 ```
 
 # Note blocks
@@ -216,3 +276,5 @@ the entire line with background.
 
 [code-fences-doc]: https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences
 [syntax-highlighting-languages]: https://gohugo.io/content-management/syntax-highlighting/#languages
+[documentation-repo]: https://github.com/SpineEventEngine/documentation
+[site-commons]: https://github.com/SpineEventEngine/site-commons

README.md

@@ -21,12 +21,10 @@ into the pages, please see the [`_code/EMBEDDING.md`](_code/EMBEDDING.md) file.
 2. [Go][go] `1.12` or newer.
 3. [Node.js][nodejs] `18+`.
 4. [Hugo Extended][hugo-quick-start] in version `v0.150.0` or higher.
-5. Access to the [`site-commons`][site-commons] repository — to download the theme.
 
 ## Configuration
 
-1. Make sure [SSH][site-commons-ssh] configured correctly and the passphrase is stored in the keychain.
-2. Install project dependencies from the `site` directory by running `npm install`.
+1. Install project dependencies from the `site` directory by running `npm install`.
 
 ## Running the site locally
 
@@ -49,9 +47,7 @@ Another way to run the site locally is to follow these steps:
    hugo server
    ```
 
-If you receive a `permission denied` message, but you are sure that you have
-all the rights to the [required repositories](#prerequisites), try clearing
-the cache:
+If you receive an error, try clearing the cache:
 
 ```shell
 hugo mod clean --all
@@ -64,7 +60,8 @@ Then run the `hugo serve` again.
 The documentation is located in a [separate repository][documentation-repo].
 It is added to this site as a Hugo Module.
 
-Any changes to the documentation must be made in its own [repository][documentation-repo].
+Any changes to the documentation must be made in its own [repository][documentation-repo] 
+or documentation modules.
 
 The `documentation` repository is made to be self-sustainable in terms of editing. A fully-fledged 
 Hugo site has been set up for it. All the contents and links in it are working as intended. 
@@ -76,21 +73,27 @@ are used to embed the content.
 ### Steps to get documentation updates
 
 1. Navigate to the `site` directory.
-2. Clean the module cache:
+2. Get the documentation Hugo Module:
 
    ```shell
-   hugo mod clean
+   hugo mod get -u github.com/SpineEventEngine/documentation/docs
    ```
 
-3. Get the documentation Hugo Module:
+   or update all the modules recursively (including the site-commons):
 
    ```shell
-   hugo mod get -u github.com/SpineEventEngine/documentation/docs
+   hugo mod get -u ./...
    ```
 
-4. Commit and push changes from `go.mod` and `go.sum` files.
+3. Commit and push changes from `go.mod` and `go.sum` files.
    In the `go.sum` file, keep only the two required entries for each theme to avoid file clutter.
 
+   If there is an error while getting new updates, clear the cache and repeat step 2:
+
+   ```shell
+   hugo mod clean
+   ```
+
 ## Common theme
 
 This project uses the [`site-commons`][site-commons] Hugo theme for general components such 
@@ -100,7 +103,7 @@ as anchor icons, snackbars, etc.
 2. To get theme updates, run:
 
    ```shell
-   hugo mod get -u github.com/TeamDev-Ltd/site-commons
+   hugo mod get -u github.com/SpineEventEngine/site-commons
    ```
 
 3. Commit and push changes from `go.mod` and `go.sum` files.
@@ -114,8 +117,7 @@ the [`AUTHORING.md`](AUTHORING.md) file.
 [go]: https://go.dev/doc/install
 [nodejs]: https://nodejs.org/en/download/current
 [hugo-quick-start]: https://gohugo.io/getting-started/quick-start/#step-1-install-hugo
-[site-commons]: https://github.com/TeamDev-Ltd/site-commons
-[site-commons-ssh]: https://github.com/TeamDev-Ltd/site-commons/tree/master?tab=readme-ov-file#configure-go-to-use-ssh-for-github
+[site-commons]: https://github.com/SpineEventEngine/site-commons
 [hugo-modules]: https://gohugo.io/hugo-modules/introduction
 [embed-code]: https://github.com/SpineEventEngine/embed-code/tree/embed-code-go
 [documentation-repo]: https://github.com/SpineEventEngine/documentation.git

site/assets/js/pages/faq.js

@@ -26,7 +26,7 @@
 
 'use strict';
 
-import {copyToClipboard} from "js/components/copy-to-clipboard";
+import {copyToClipboard} from "js/theme/copy-to-clipboard";
 
 /**
  * Opens the collapsed FAQ item on hash change and handles the anchor icon click.

site/assets/scss/base/_colors.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2025, TeamDev. All rights reserved.
+ * Copyright 2026, TeamDev. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,45 +24,14 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-// Brand Colors
-$main-brand-color: #1a96de;
-$second-brand-color: #116db4;
-$inverse-brand-color: #ffffff;
-$body-light-gray-color: #f6f8fA;
-$warning-color: #deba32;
-$nav-blue-gradient: linear-gradient(152deg, #1378DA 0%, #0B64CC 100%);
-$light-blue-bg-color: #edf8ff;
-$note-bg-color: #e0f2ff;
+/* Extends colors from `site-commons`. */
 
-// Dividers
-$divider-color: rgba(0, 0, 0, .08);
+$nav-blue-gradient: linear-gradient(152deg, #1378da 0%, #0b64cc 100%);
+$light-blue-bg-color: #edf8ff;
 $divider: 1px solid $divider-color;
-$article-border-color: #e6ecf1;
-
-// General Colors
-$black: #2e2e2e;
-$white: #ffffff;
 $light-gray-blue: #eef1f3;
-$text-color: #3a3a3a;
-$error-color: #c40003;
 
-// Links
-$link-color: $main-brand-color;
-$link-hover-color: darken($link-color, 10%);
-$link-blue-color: #5dc4ff;
-
-// Footer
 $footer-color: #232526;
-$footer-text: #eaeaea;
-
-// Grays
-$gray-100: rgba(black, .12);
-$gray-200: rgba(black, .26);
-$gray-300: rgba(black, .38);
-$gray-500: rgba(black, .54);
-$gray-600: rgba(black, .6);
-$gray-700: rgba(black, .7);
+$footer-text-color: #eaeaea;
 
-// Shadows
-$feature-card-shadow: 0 1px 3px 0 rgba($footer-color, .08);
 $navbar-shadow: 0 3px 4px 0 rgba(0, 0, 0, .25);

site/assets/scss/base/_common.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2025, TeamDev. All rights reserved.
+ * Copyright 2026, TeamDev. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -49,10 +49,6 @@
   transition: all .3s ease-in-out;
 }
 
-.nobr {
-  white-space: nowrap;
-}
-
 .section {
   padding: 50px 0;
   position: relative;
@@ -72,17 +68,6 @@
   }
 }
 
-table,
-th,
-td {
-  border: 1px solid lighten($text-color, 20%);
-  padding: 6px
-}
-
-table {
-  border-collapse: collapse;
-}
-
 // Expandable title with caret icon before.
 %expandable-title {
   font-size: $font-size--primary;
@@ -95,8 +80,8 @@ table {
     content: '';
     position: absolute;
     background: url('img/icons/icon-caret-right.svg') no-repeat center/cover;
-    width: $icon-size--s;
-    height: $icon-size--s;
+    width: $icon-size-s;
+    height: $icon-size-s;
     margin-left: -40px;
     margin-top: -2px;
     opacity: .54;