Footer: add 'About' page

* Includes sub-pages 'API Docs', 'About DAMAP' & 'About VRE'

CHANGES.rst

@@ -12,6 +12,8 @@ Changes
 Version <next>
 
 - Reverse order of listed users on admin endpoint
+- Footer: Add `About` page
+- Add following subpages to the `About` page: `API Docs`, `About VRE`, `About DAMAP`
 
 
 Version v2025.1.9 (released 2025-03-11)

invenio_theme_tuw/theme/assets/semantic-ui/js/invenio_theme_tuw/clipboard/index.js

+// Copyright (C) 2025 TU Wien.
+//
+// Invenio Theme TUW is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".code-block").forEach((block) => {
+    const button = block.querySelector(".copy-btn");
+    const codeText = block.innerText.trim();
+
+    // Skip this block if the required elements are missing
+    if (!button) return;
+
+    const resetTooltip = (btn) => {
+      btn.setAttribute("data-tooltip", "Copy to clipboard");
+      btn.querySelector("i").classList.replace("check", "copy");
+    };
+
+    const handleCopy = () => {
+      navigator.clipboard
+        .writeText(codeText)
+        .then(() => onCopySuccess(button))
+        .catch((error) => console.error("Failed to copy: ", error));
+    };
+
+    const onCopySuccess = (btn) => {
+      btn.setAttribute("data-tooltip", "Copied!");
+      btn.querySelector("i").classList.replace("copy", "check");
+
+      setTimeout(resetTooltip, 2000, btn);
+    };
+
+    button.addEventListener("click", handleCopy);
+  });
+});

invenio_theme_tuw/theme/assets/semantic-ui/less/invenio_theme_tuw/theme/custom/about.less

+/* ------------------ */
+/* About page styling */
+/* ------------------ */
+
+.about.container {
+
+  .code-container {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 2em;
+
+    .code-block {
+      position: relative;
+      background: #f8f9fa;
+      padding: 10px;
+      border-radius: 5px;
+      font-family: monospace;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .copy-btn {
+        background: none !important;
+        border: none;
+        padding: 5px;
+        display: flex;
+        align-items: center;
+        transition: color 0.3s ease;
+
+        i {
+          font-size: 16px;
+          color: black !important;
+          margin: 0 !important;
+        }
+      }
+    }
+  }
+}

invenio_theme_tuw/theme/assets/semantic-ui/less/invenio_theme_tuw/theme/globals/site.overrides

@@ -4,6 +4,7 @@
 
 @import "@less/invenio_app_rdm/theme/globals/site.overrides";
 
+@import "../custom/about.less";
 @import "../custom/contact.less";
 @import "../custom/flip-card.less";
 @import "../custom/file-list.less";

invenio_theme_tuw/theme/templates/semantic-ui/invenio_theme_tuw/about.html

+{# -*- coding: utf-8 -*-
+
+  Copyright (C) 2025 TU Wien.
+
+  Invenio Theme TUW is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{%- extends config.BASE_TEMPLATE %}
+
+{%- block page_hero %}
+  <section id="hero" class="policies no-shrink"></section>
+{%- endblock page_hero %}
+
+{%- block page_body %}
+  <section class="ui about container rel-mt-3">
+    <h1>{{ _("About %(sitename)s", sitename=config.THEME_SITENAME) }}</h1>
+    <p>
+      {%- trans trimmed sitename=config.THEME_SITENAME, package_version=package_version  -%}
+        {{ sitename }} (powered by {{ package_version }}) is an institution-wide platform for TU Wien researchers to share and preserve their research output.
+        It meets institutional and legal requirements for data storage, long-term preservation, and sharing, in compliance with the <a href="https://www.go-fair.org/fair-principles/">FAIR principles</a>, <a href="https://www.bmbwf.gv.at/Themen/HS-Uni/Hochschulgovernance/Leitthemen/Digitalisierung/Open-Science.html">Open Science</a>, and funders' demands.
+      {%- endtrans -%}
+    </p>
+    <p>
+      {{ _("Key features of the repository %(sitename)s are:", sitename=config.THEME_SITENAME) }}
+      <ul>
+        <li><strong>{{ _("Data Management") }}:</strong> {{ _("Upload and describe datasets with appropriate metadata;") }}</li>
+        <li><strong>{{ _("Persistent Identifiers") }}:</strong> {{ _("Get DOIs for your datasets;") }}</li>
+        <li><strong>{{ _("Access Control") }}:</strong> {{ _("Share data publicly, with selected collaborators, or keep it private.") }}</li>
+      </ul>
+    </p>
+
+    <h2>{{ _("Further features") }}</h2>
+    <strong>{{ _("Programmatic access:") }}</strong>
+    <p>
+      {%- trans trimmed sitename=config.THEME_SITENAME %}
+        We provide a set of REST APIs that allow researchers and developers to integrate data access capabilities directly into their workflows and systems.
+        Our APIs range from querying metadata and performing advanced searches to automating data ingestion.
+        Data-altering operations, such as creating or updating records, can be performed with token-based authentication.
+        Read-only operations, such as retrieving metadata or performing searches, are openly accessible.
+        This is consistent with the principles of transparent access to research data.
+      {%- endtrans %}
+    </p>
+    <p>
+      {%- trans trimmed api_page_link = url_for("invenio_theme_tuw.tuw_about_api") %}
+        For step-by-step instructions, code examples, and advanced use cases, please visit the <a href="{{ api_page_link }}">API Documentation</a> page.
+      {%- endtrans %}
+    </p>
+
+    <strong>{{ _("Connecting to Virtual Research Environments (VREs):") }}</strong>
+    <p>
+      {%- trans trimmed %}
+        For direct access to data in our repository, we provide a plugin (the VRE Repository Connector) that integrates our repository with Jupyter Notebooks.
+      {%- endtrans %}
+    </p>
+    <p>
+      {{ _("Once the VRE extension is installed and users authenticate with their repository access token, they can") }}
+      <ul>
+        <li>{{ _("Search for datasets using advanced query parameters;") }}</li>
+        <li>{{ _("Retrieve detailed metadata for analysis;") }}</li>
+        <li>{{ _("Download files directly to notebook environments;") }}</li>
+        <li>{{ _("Upload new datasets or update existing records.") }}</li>
+      </ul>
+    </p>
+    <p>
+      {%- trans trimmed vre_page_link = url_for("invenio_theme_tuw.tuw_about_vre") %}
+        Visit our dedicated <a href="{{ vre_page_link }}">VRE Repository Connector page</a> for usage instructions and examples.
+      {%- endtrans %}
+    </p>
+
+    <h2>{{ _("Support and contact information") }}</h2>
+    <p>
+      {%- trans trimmed contact_page_link = url_for("invenio_theme_tuw.tuw_contact") %}
+        If you have further questions, please refer to the <a href={{ contact_page_link }}>contact page</a>.
+      {%- endtrans %}
+    </p>
+  </section>
+{%- endblock page_body %}

invenio_theme_tuw/theme/templates/semantic-ui/invenio_theme_tuw/about_damap.html

+{# -*- coding: utf-8 -*-
+
+  Copyright (C) 2025 TU Wien.
+
+  Invenio Theme TUW is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{%- extends config.BASE_TEMPLATE %}
+
+{# This link is used multiple times throughout this page. #}
+{% set token_link = url_for("invenio_oauth2server_settings.token_new") %}
+
+{%- block page_hero %}
+  <section id="hero" class="policies no-shrink"></section>
+{%- endblock page_hero %}
+
+{%- block page_body %}
+  <section class="ui about container rel-mt-3">
+    <a href="{{ url_for("invenio_theme_tuw.tuw_about_api") }}">⬅️ {{ _("To parent page") }}</a>
+
+    <h1>{{ _("About DAMAP") }}</h1>
+    <ul>
+      <li>
+        <p>{{ _("Fetch your maDMPs:") }}</p>
+        <p><strong>{{ _("Endpoint:") }} </strong><code>GET /api/invenio_damap/damap/dmp</code></p>
+        <p>
+          <strong>{{ _("Token Required:") }}</strong>
+          {% trans trimmed token_link = token_link %}
+            Yes — generate one <a href="{{ token_link }}">here</a>.
+          {% endtrans %}
+        </p>
+
+        <p><strong>cURL:</strong></p>
+        <div class="ui code-container">
+          <pre class="ui segment code-block">
+{#- ################# PREFORMATTED AREA TEXT BEGIN ################# #}
+curl "{{ config.SITE_API_URL }}/invenio_damap/damap/dmp" \
+     -H "Authorization: Bearer {your-access-token}"
+{#- ################## PREFORMATTED AREA TEXT END ################## -#}
+            <button class="ui button copy-btn" data-tooltip="{{ _("Copy to clipboard") }}">
+              <i class="copy icon"></i>
+            </button>
+          </pre>
+        </div>
+
+        <p><strong>Python (requests):</strong></p>
+        <div class="ui code-container">
+          <pre class="ui segment code-block">
+{#- ################# PREFORMATTED AREA TEXT BEGIN ################# #}
+import requests
+url = "{{ config.SITE_API_URL }}/invenio_damap/damap/dmp"
+headers = {
+    "Authorization": "Bearer {your-access-token}",
+}
+response = requests.post(url, headers=headers)
+print(response.json())
+{#- ################## PREFORMATTED AREA TEXT END ################## -#}
+            <button class="ui button copy-btn" data-tooltip="Copy to clipboard">
+              <i class="copy icon"></i>
+            </button>
+          </pre>
+        </div>
+
+        <p><strong>{{ _("Example Response") }} (HTTP 200 - OK):</strong></p>
+        <div class="ui code-container">
+          <pre class="ui segment code-block">
+{#- ################# PREFORMATTED AREA TEXT BEGIN ################# #}
+{
+  "hits": {
+    "hits": [
+      {
+        "id": 4002,
+        "created": "2025-02-10T11:28:03.472Z",
+        "project": {
+          "id": 4002,
+          "description": "A very important chemistry project.",
+          "title": "Advanced Chemical Reactions Study"
+        },
+        "datasets": [],
+        "links": {}
+      },
+      {
+        "id": 4001,
+        "created": "2025-01-10T14:07:26.234Z",
+        "project": {
+          "id": 4001,
+          "description": "A very important climate project.",
+          "title": "Global Climate Change Analysis"
+        },
+        "datasets": [],
+        "links": {}
+      }
+    ],
+    "total": 10
+  },
+  "links": {
+    "self": "{{ config.SITE_API_URL }}/invenio_damap/damap/dmp?facets=%7B%7D"
+  }
+}
+{#- ################## PREFORMATTED AREA TEXT END ################## -#}
+            <button class="ui button copy-btn" data-tooltip="{{ _("Copy to clipboard") }}">
+              <i class="copy icon"></i>
+            </button>
+          </pre>
+        </div>
+      </li>
+
+      <li>
+        <p>{{ _("Link your selected InvenioRDM record to the target maDMP:") }}</p>
+        <p><strong>{{ _("Endpoint:") }} </strong><code>POST /api/invenio_damap/damap/dmp/{dmp_id}/dataset/{record_id}</code></p>
+        <p>
+          <strong>{{ _("Token Required:") }}</strong>
+          {% trans trimmed token_link = token_link %}
+            Yes — generate one <a href="{{ token_link }}">here</a>.
+          {% endtrans %}
+        </p>
+
+        <p><strong>cURL:</strong></p>
+        <div class="ui code-container">
+          <pre class="ui segment code-block">
+{#- ################# PREFORMATTED AREA TEXT BEGIN ################# #}
+curl -X POST "{{ config.SITE_API_URL }}/invenio_damap/dmp/1337/dataset/abcde-12345" \
+     -H "Authorization: Bearer {your-access-token}"
+{#- ################## PREFORMATTED AREA TEXT END ################## -#}
+            <button class="ui button copy-btn" data-tooltip="{{ _("Copy to clipboard") }}">
+              <i class="copy icon"></i>
+            </button>
+          </pre>
+        </div>
+
+        <p><strong>Python (requests):</strong></p>
+        <div class="ui code-container">
+          <pre class="ui segment code-block">
+{#- ################# PREFORMATTED AREA TEXT BEGIN ################# #}
+import requests
+url = "{{ config.SITE_API_URL }}/invenio_damap/dmp/1337/dataset/abcde-12345"
+headers = {
+    "Authorization": "Bearer {your-access-token}",
+}
+response = requests.post(url, headers=headers)
+print(response.json())
+{#- ################## PREFORMATTED AREA TEXT END ################## -#}
+            <button class="ui button copy-btn" data-tooltip="{{ _("Copy to clipboard") }}">
+              <i class="copy icon"></i>
+            </button>
+          </pre>
+        </div>
+
+        <p><strong>{{ _("Example Response") }} (HTTP 201 - CREATED):</strong></p>
+        <div class="ui code-container">
+          <pre class="ui segment code-block">
+{#- ################# PREFORMATTED AREA TEXT BEGIN ################# #}
+{
+  "id": "abcde-12345",
+  "metadata": {
+    "title": "New Dataset Title",
+    "creators": [{"name": "Doe, Jane"}],
+    "publication_date": "2025-01-09",
+    "resource_type": {"id": "dataset"}
+  },
+  "links": {
+    "self": "{{ config.SITE_API_URL }}/records/abcde-12345",
+    "files": "{{ config.SITE_API_URL }}/records/abcde-12345/files"
+  }
+}
+{#- ################## PREFORMATTED AREA TEXT END ################## -#}
+            <button class="ui button copy-btn" data-tooltip="{{ _("Copy to clipboard") }}">
+              <i class="copy icon"></i>
+            </button>
+          </pre>
+        </div>
+      </li>
+    </ul>
+  </section>
+
+  {%- block javascript %}
+    {{ super() }}
+    {{ webpack["invenio-theme-tuw-clipboard.js"] }}
+  {%- endblock javascript %}
+
+{%- endblock page_body %}

invenio_theme_tuw/theme/templates/semantic-ui/invenio_theme_tuw/about_vre.html

+{# -*- coding: utf-8 -*-
+
+  Copyright (C) 2025 TU Wien.
+
+  Invenio Theme TUW is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{%- extends config.BASE_TEMPLATE %}
+
+{%- block page_hero %}
+  <section id="hero" class="policies no-shrink"></section>
+{%- endblock page_hero %}
+
+{%- block page_body %}
+  <section class="ui about container rel-mt-3">
+    <a href="{{ url_for("invenio_theme_tuw.tuw_about") }}">⬅️ {{ _("To parent page") }}</a>
+
+    <h1>{{ _("About the VRE extension") }}</h1>
+    <p>
+      {{ _("The VRE extension can be easily installed via") }}
+      <code>pip install vre-repository-connector</code>.
+    </p>
+    <p>
+      <strong>{{ _("Why Use It?") }}</strong>
+      <ul>
+        <li><strong>{{ _("Easy Integration:") }}</strong> {{ _("Access repository datasets straight from your notebook. No need to download files manually—just pull the data and dive in.") }}</li>
+        <li><strong>{{ _("Interactive Data Exploration:") }}</strong> {{ _("Search, filter, and preview datasets in real time. Write simple code that interacts with the repository's API and get instant results.") }}</li>
+        <li><strong>{{ _("Smoother Workflows:") }}</strong> {{ _("Automate repetitive tasks like retrieving metadata, cleaning data, and processing files, so you can focus on the actual research.") }}</li>
+      </ul>
+    </p>
+    <br>
+    <p>
+      <strong>{{ _("Use Case Example:") }}</strong>
+        {{ _("Assume, for instance, that you are a climate scientist who must examine the most recent temperature data.") }}
+        {{ _("With the VRE Repository Connector, you can write a few lines of Python code in your Jupyter Notebook to retrieve the dataset and start analyzing it immediately:") }}
+    </p>
+
+    <div class="ui code-container">
+      <pre class="ui segment code-block">
+{#- ################# PREFORMATTED AREA TEXT BEGIN ################# #}
+# Example Jupyter Notebook using the VRE Connector
+[1]: pip install vre-repository-connector
+[1]: ...
+
+[2]: import vre_repository_connector as vrc
+     doi = "https://doi.org/10.12345/abcde-12345"
+
+# Retrieve a specific dataset's file by its DOI
+[3]: vrc.download(doi)
+[3]: 1) x.zip
+  2) y.zip
+  3) z.zip
+  Select [1-3]: 2
+  '/tmp/tmpj8huipi7/abcde-12345/y.zip'
+
+# Proceed with your analysis using libraries like pandas or matplotlib
+{#- ################## PREFORMATTED AREA TEXT END ################## -#}
+        <button class="ui button copy-btn" data-tooltip="{{ _("Copy to clipboard") }}">
+          <i class="copy icon"></i>
+        </button>
+      </pre>
+    </div>
+
+    <p>
+      {{ _("And just like that, you\'re ready to analyze!") }}
+    </p>
+    <p>
+      {{ _("In addition to saving time, the VRE Repository Connector promotes repeatable, data-driven research by bridging the gap between interactive research tools and robust repository capabilities.") }}
+      {{ _("VRE is intended to make your research workflow as integrated and efficient as possible, whether you're exploring new datasets or automating your analysis pipeline — all from within Jupyter.") }} 🚀
+    </p>
+    <h2>{{ _("Additional Resources") }}</h2>
+    <p>
+      {%- trans trimmed vre_repo_page = "https://gitlab.tuwien.ac.at/crdm/vre-repository-connector" %}
+        For further details, please refer to the
+        <a href="{{ vre_repo_page }}" target="_blank" rel="noopener">VRE Repository Connector page</a>.
+      {%- endtrans %}
+    </p>
+  </section>
+
+  {%- block javascript %}
+    {{ super() }}
+    {{ webpack["invenio-theme-tuw-clipboard.js"] }}
+  {%- endblock javascript %}
+
+{%- endblock page_body %}

invenio_theme_tuw/theme/templates/semantic-ui/invenio_theme_tuw/overrides/footer.html

@@ -3,7 +3,7 @@
   Copyright (C) 2019-2020 CERN.
   Copyright (C) 2019-2020 Northwestern University.
   Copyright (C)      2021 Graz University of Technology.
-  Copyright (C) 2020-2023 TU Wien.
+  Copyright (C) 2020-2025 TU Wien.
 
   Invenio Theme TUW is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -20,6 +20,7 @@
 {%- set fairsharing_url = "https://fairsharing.org/FAIRsharing.88d503" %}
 
 {#- urls for footer links #}
+{%- set about_url         = url_for("invenio_theme_tuw.tuw_about") %}
 {%- set policies_url      = url_for("invenio_theme_tuw.tuw_policies") %}
 {%- set terms_of_use_url  = url_for("invenio_theme_tuw.tuw_terms_of_use") %}
 {%- set privacy_info_url  = "https://www.tuwien.at/index.php?eID=dms&s=4&path=Documents/Data%20Protection%20Declaration%20Other/Data_Protection_Information_Research_Data.pdf" %}
@@ -46,6 +47,7 @@
   </div>
   <div class="row-border"></div>
   <nav id="links-container" class="grid-container">
+    <a href="{{ about_url }}">{{ _("About") }}</a>
     <a href="{{ policies_url }}">{{ _("Policies") }}</a>
     <a href="{{ terms_of_use_url }}">{{ _("Terms of Use") }}</a>
     <a href="{{ privacy_info_url }}" target="_blank" rel="noopener">{{ _("Privacy Info") }}</a>

invenio_theme_tuw/views.py

 # -*- coding: utf-8 -*-
 #
-# Copyright (C) 2020-2024 TU Wien.
+# Copyright (C) 2020-2025 TU Wien.
 #
 # Invenio-Theme-TUW is free software; you can redistribute it and/or modify
 # it under the terms of the MIT License; see LICENSE file for more details.
@@ -20,6 +20,7 @@ from flask import (
 )
 from flask_login import current_user, login_required
 from invenio_accounts.proxies import current_datastore
+from invenio_app_rdm.config import _get_package_version
 from invenio_app_rdm.records_ui.views.deposits import deposit_create, deposit_edit
 from invenio_communities.proxies import current_communities
 from invenio_communities.views.communities import communities_new
@@ -248,6 +249,28 @@ def create_blueprint(app):
         )
         return response, 200 if not captcha_failed else 428
 
+    @blueprint.route("/tuw/about")
+    def tuw_about():
+        """Page showing general information about TUWRD."""
+        return render_template(
+            "invenio_theme_tuw/about.html", package_version=_get_package_version()
+        )
+
+    @blueprint.route("/tuw/about/api")
+    def tuw_about_api():
+        """Page showing information about the TUWRD API."""
+        return render_template("invenio_theme_tuw/about_api.html")
+
+    @blueprint.route("/tuw/about/damap")
+    def tuw_about_damap():
+        """Page showing information about the TUWRD API."""
+        return render_template("invenio_theme_tuw/about_damap.html")
+
+    @blueprint.route("/tuw/about/vre")
+    def tuw_about_vre():
+        """Page showing information about the TUWRD API."""
+        return render_template("invenio_theme_tuw/about_vre.html")
+
     @blueprint.route("/tuw/policies")
     def tuw_policies():
         """Page showing the available repository policies."""

invenio_theme_tuw/webpack.py

@@ -68,10 +68,13 @@ theme = WebpackThemeBundle(
     themes={
         "semantic-ui": {
             "entry": {
-                "invenio-theme-tuw-login": "./less/invenio_theme_tuw/login.less",
-                "invenio-theme-tuw-tracking": "./js/invenio_theme_tuw/tracking/index.js",
+                # JS
+                "invenio-theme-tuw-clipboard": "./js/invenio_theme_tuw/clipboard/index.js",
                 "invenio-theme-tuw-mobilemenu": "./js/invenio_theme_tuw/mobilemenu/index.js",
                 "invenio-theme-tuw-snowfall": "./js/invenio_theme_tuw/snowfall/index.js",
+                "invenio-theme-tuw-tracking": "./js/invenio_theme_tuw/tracking/index.js",
+                # LESS
+                "invenio-theme-tuw-login": "./less/invenio_theme_tuw/login.less",
                 "invenio-theme-tuw-tuwstones": "./less/invenio_theme_tuw/tuwstone.less",
                 "invenio-theme-tuw-user-infos": "./less/invenio_theme_tuw/user_infos.less",
                 "invenio-theme-tuw-users-welcome": "./less/invenio_theme_tuw/users_welcome.less",