add accordion option to containers

Author: Erik2609

content/english/technical-tools/BDT.md

@@ -1,10 +1,34 @@
 ---
 title: Unsupervised bias detection tool
 subtitle: >
-  Local-first tool using statistical analysis to identify groups that may be subject to unfair treatment by algorithms or AI. The tool informs
-  the qualitative doctrine of law and ethics which disparities need to be
+  Local-first tool using statistical analysis to identify groups that may be
+  subject to unfair treatment by algorithms or AI. The tool informs the
+  qualitative doctrine of law and ethics which disparities need to be
   scrutinised manually by domain experts.
 image: /images/svg-illustrations/illustration_cases.svg
+quick_navigation:
+  title: Content overview
+  links:
+    - title: Introduction
+      url: "#info"
+    - title: Web app
+      url: "#web-app"
+    - title: Source code
+      url: "#source-code"
+    - title: Anomaly detection algorithm
+      url: "#HBAC"
+    - title: Scientific paper and audit report
+      url: "#scientific-paper"
+    - title: Local-first computing
+      url: "#local-first"
+    - title: Supported by
+      url: "#supported-by"
+    - title: Awards and acknowledgements
+      url: "#awards-acknowledgements"
+    - title: Summary
+      url: "#summary"
+    - title: Team
+      url: "#team"
 reports_preview:
   title: Example output bias detection tool
   icon: fas fa-file
@@ -52,35 +76,12 @@ team:
       name: Mackenzie Jorgensen PhD
       bio: |
         Researcher Alan Turing Institute, London
-quick_navigation:
-  title: Content overview
-  links:
-    - title: Introduction
-      url: "#info"
-    - title: Web app
-      url: "#web-app"
-    - title: Source code
-      url: "#source-code"
-    - title: Anomaly detection algorithm
-      url: "#HBAC"
-    - title: Scientific paper and audit report
-      url: "#scientific-paper"
-    - title: Local-first computing
-      url: "#local-first"
-    - title: Supported by
-      url: "#supported-by"
-    - title: Awards and acknowledgements
-      url: "#awards-acknowledgements"
-    - title: Summary
-      url: "#summary"
-    - title: Team
-      url: "#team"
 type: bias-detection-tool
 ---
 
 <!-- Introduction -->
 
-{{< container_open title="Introduction – Unsupervised bias detection tool" icon="fas fa-search" id="info" >}}
+{{< container_open title="Introduction – Unsupervised bias detection tool" icon="fas fa-search" id="info" isAccordion={true} >}}
 
 <br>
 
@@ -145,7 +146,6 @@ Try the tool below ⬇️
 
 - The source code of the anolamy detection-algorithm is available on <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection" target="_blank">Github</a> and as a <a href="https://pypi.org/project/unsupervised-bias-detection/" target="_blank">pip package</a>: `pip install unsupervised-bias-detection`.
   [![!pypi](https://img.shields.io/pypi/v/unsupervised-bias-detection?logo=pypi&color=blue)](https://pypi.org/project/unsupervised-bias-detection/)
-
 - The architecture to run web apps local-first is also available on <a href="https://github.com/NGO-Algorithm-Audit/local-first-web-tool" target="_blank">Github</a>.
 
 {{< container_close >}}
@@ -188,11 +188,11 @@ Local-first computing is the opposite of cloud computing: the data is not upload
 
 <!-- Supported by -->
 
-{{< container_open title="Supported by" icon="fas fa-toolbox" id="supported-by">}}
+{{< container_open title="Supported by" icon="fas fa-toolbox" id="supported-by" >}}
 
 This tool is developed with support of public and philanthropic organisations.
 
-{{< accordions_area_open id="supported-by-accordion">}}
+{{< accordions_area_open id="supported-by-accordion" >}}
 
 {{< accordion_item_open title="Innovation grant Dutch Ministry of the Interior" image="/images/supported_by/BZK.jpg" tag1="2024-25" >}}
 
@@ -218,7 +218,7 @@ In 2024, the SIDN Fund <a href="https://www.sidnfonds.nl/projecten/open-source-a
 
 <!-- Awards and acknowledgements -->
 
-{{< container_open title="Awards and acknowledgements" icon="fas fa-medal" id="awards-acknowledgements">}}
+{{< container_open title="Awards and acknowledgements" icon="fas fa-medal" id="awards-acknowledgements" >}}
 
 This tool has received awards and is acknowledged by various <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection?tab=readme-ov-file#contributing-members" target="_blank">stakeholders</a>, including civil society organisations, industry representatives and academics.
 
@@ -246,7 +246,7 @@ The unsupervised bias detection tool is part of OECD's <a href="https://oecd.ai/
 
 <!-- Summary -->
 
-{{< container_open title="Summary" icon="fas fa-dot-circle" id="summary">}}
+{{< container_open title="Summary" icon="fas fa-dot-circle" id="summary" >}}
 
 Key take-aways about unsupervised bias detection tool:
 

layouts/shortcodes/container_close.html

@@ -1,4 +1,4 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-
+        </div>
     </div>
 </div>

layouts/shortcodes/container_open.html

@@ -1,16 +1,38 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-<div id={{.Get "id" }} class="container-fluid mt-5 p-0">
-    <div class="shadow mobile-desktop-container-layout rounded-lg">
-        <div class="row">
-            <div class="col-12">
+{{ $id := .Get "id" }}
+{{ $isAccordion := .Get "isAccordion" }}
+{{ if $isAccordion }}
+<script>
+    docReady(function () {
+        new Accordion('.accordion_container_{{$id}}');
+
+        $(".accordion_container_{{$id}} .ac-trigger").click(function() {
+            const isExpanded = $(this).attr("aria-expanded");
+            const elementToSetChevronOn = $(this).find("h3 > span.fas");
+            if  (isExpanded === "true") {
+                elementToSetChevronOn.removeClass("fa-chevron-up");
+                elementToSetChevronOn.addClass("fa-chevron-down");
+            } else {
+                elementToSetChevronOn.removeClass("fa-chevron-down");
+                elementToSetChevronOn.addClass("fa-chevron-up");
+            }
+        });
+    });
+</script>
+{{ end }}
+<div id={{$id}} class="{{ if $isAccordion }} accordion_container_{{$id}} {{ end }} container-fluid mt-5 p-0">
+    <div class="{{ if $isAccordion }} ac {{ end }} shadow mobile-desktop-container-layout rounded-lg ">
+        <div class="{{ if $isAccordion }} ac-header {{ end }} ">
+            <div class="col-12 row ac--has-own-icon {{ if $isAccordion }} ac-trigger {{ end }}">
 
                 <!-- Title and icon -->
                 <div>
                     <h3>
-                        <span class="{{.Get "icon" }} icon mb-4 pl-5"></span>
+                        <span class="{{if $isAccordion }} fas fa-chevron-up {{else}} {{.Get "icon" }} {{end}} icon mb-4 pl-5"></span>
                         {{ .Get "title" }}
                     </h3>
                 </div>
 
             </div>
-        </div>
+        </div>
+        <div class="{{ if $isAccordion }} ac-panel {{ end }} ">

static/css/accordion.min.css

@@ -20,7 +20,7 @@
     padding: 0
 }
 
-.ac .ac-trigger {
+.ac .ac-trigger:not(    .ac--has-own-icon) {
     text-align: left;
     width: 100%;
     padding: 8px 32px 8px 8px;
@@ -34,7 +34,7 @@
     border: 0
 }
 
-.ac .ac-trigger::after {
+.ac .ac-trigger:not(    .ac--has-own-icon)::after {
     content: "+";
     text-align: center;
     width: 15px;
@@ -68,6 +68,6 @@
     visibility: visible
 }
 
-.ac.is-active>.ac-header .ac-trigger::after {
+.ac.is-active>.ac-header .ac-trigger.ac-trigger:not(.ac--has-own-icon)::after {
     content: "–"
 }

static/js/quicknavigation.js

@@ -5,16 +5,20 @@ docReady(function () {
     var sections = quickLinks.map(function () {
       return $(this).attr("href");
     });
-    var sectionOffsets = sections.map(function (index, section) {
-      return $(section).offset().top - 300; // Adjust offset as needed
+    var sectionOffsets = sections.map(function (_, section) {
+      const sectionElement = $(section);
+      if (sectionElement.length === 0) {
+        return -1;
+      }
+      return sectionElement.offset().top - 250; // Adjust offset as needed
     });
     let highestActiveIndex = -1;
     var scrollPos = $(this).scrollTop();
     quickLinks.each(function () {
       $(this).removeClass("highlight-red-sm");
     });
     sectionOffsets.each(function (index) {
-      if (scrollPos >= this) {
+      if (this > 0 && scrollPos >= this) {
         highestActiveIndex = index;
       }
     });

tina/collections/shared/templates/container_open.ts

@@ -7,6 +7,14 @@ let template: RichTextTemplate = {
     end: ">}}",
   },
   fields: [
+    {
+      type: "boolean",
+      name: "isAccordion",
+      label: "Is Accordion",
+      description:
+        "Is this a collapsible accordion?, if so, the icon below is ignored",
+      required: false,
+    },
     {
       type: "string",
       name: "icon",

tina/collections/shared/templates/team.ts

@@ -1,19 +1,24 @@
-import { RichTextTemplate } from "@tinacms/schema-tools/dist/types/index"
-let pdf_frame : RichTextTemplate = {
-    name: 'team',
-    label: 'Team',
-    match: {
-        start: '{{<',
-        end: '>}}'
+import { RichTextTemplate } from "@tinacms/schema-tools/dist/types/index";
+let pdf_frame: RichTextTemplate = {
+  name: "team",
+  label: "Team",
+  match: {
+    start: "{{<",
+    end: ">}}",
+  },
+  fields: [
+    {
+      name: "id",
+      label: "ID",
+      type: "string",
     },
-    fields: [
-        {
-            name: 'title',
-            label: 'DONT USE',
-            type: 'string',
-            description: 'Use top level template',
-            required: false,
-        }
-    ]
+    {
+      name: "title",
+      label: "DONT USE",
+      type: "string",
+      description: "Use top level template",
+      required: false,
+    },
+  ],
 };
-export default pdf_frame;
+export default pdf_frame;