Add related reuses in collection page

data/reuses/digital-services-terms-and-conditions-database.yaml

@@ -9,3 +9,4 @@ description:
   fr: Portail d'accès aux données d'une collection opérée par l’équipe « application du DSA » au sein de la Commission européenne.
 website: https://platform-contracts.digital-strategy.ec.europa.eu/
 weight: 8
+related_collections: ["p2b-compliance"]

data/reuses/documents-readability.yaml

@@ -9,3 +9,4 @@ description:
   fr: Calcule la lisibilité et le niveau d'études nécessaires pour comprendre un document contractuel.
 website: https://disinfo.quaidorsay.fr/en/open-terms-archive/experiments
 weight: 3
+related_collections: ["contrib"]

data/reuses/french-elections-memos.yaml

@@ -9,3 +9,4 @@ description:
   en: Tracks major platforms behaviour over the French 2022 elections.
 website: https://www.reset.tech/resources/french-election-report-2022/
 weight: 5
+related_collections: ["france-elections"]

data/reuses/p2b-impact-assessment.yaml

@@ -9,3 +9,4 @@ description:
   fr: Évaluation de la conformité de plus de 200 plateformes opérant dans l'Union européenne au « règlement P2B » sur la transparence pour les entreprises.
 website: https://op.europa.eu/en/publication-detail/-/publication/d6a287b5-5116-11ee-9220-01aa75ed71a1/language-en/
 weight: 7
+related_collections: ["p2b-compliance"]

data/reuses/research-on-the-impact-on-human-rights.yaml

@@ -9,3 +9,4 @@ description:
   fr: Papier de recherche sur l'impact sur les droits de l’homme de l’évolution des conditions d’utilisation des réseaux sociaux.
 website: https://grsomedia.wordpress.com/2023/10/10/publication-du-rapport-les-conditions-dutilisation-des-reseaux-sociaux-et-leur-impact-sur-les-droits-de-lhomme/
 weight: 6
+related_collections: ["contrib", "pga"]

data/reuses/scripta-manent.yaml

@@ -9,3 +9,4 @@ description:
   fr: Consolide l'intégralité des modifications d'un document contractuel entre deux dates.
 website: https://disinfo.quaidorsay.fr/fr/open-terms-archive/scripta-manent
 weight: 2
+related_collections: ["contrib"]

data/reuses/terms-of-service-didnt-read.yaml

@@ -9,3 +9,4 @@ description:
   fr: Permet aux utilisateurs de donner collaborativement une note aux conditions d’utilisation selon le respect de leurs droits.
 website: https://tosdr.org
 weight: 4
+related_collections: ["contrib"]

data/reuses/tosback.yaml

@@ -9,3 +9,4 @@ description:
   fr: L’ancêtre d’Open Terms Archive ! Depuis octobre 2020, les changements affichés sont fournis par une collection dédiée d’Open Terms Archive.
 website: https://tosback.org/
 weight: 1
+related_collections: ["contrib"]

i18n/en.yaml

@@ -92,6 +92,7 @@ collections:
     details: View details
     download: Download dataset
     endpoint: Access API
+    reuses: See all reuses
   volunteer_contributors: Volunteer contributors
   new: Want to track services for different languages, jurisdictions, or industries? Contact us to collaborate!
   contribute:
@@ -106,6 +107,9 @@ collections:
     title: Memos
     subtitle: Memos are short analyses of significant changes that clearly explain their consequences for end users.
     cta: See all memos
+  reuses:
+    title: Reuses
+    subtitle: Identified reuses of the data in this collection.
   governance:
     title: Governance
     subtitle: These people and entities ensure that terms in this collection are tracked properly.
@@ -151,3 +155,4 @@ pagination:
       aria_label: Current page, number {{ .currrentPageNumber }}
 memos:
   author: By <a href="{{ .profile }}" target="_blank" rel="noopener">{{ .name }}</a>, a third-party contributor
+reuses: Reuses

i18n/fr.yaml

@@ -92,6 +92,7 @@ collections:
     details: Voir les détails
     download: Télécharger le jeu de données
     endpoint: Accéder à l'API
+    reuses: Voir toutes les réutilisations
   volunteer_contributors: Contributeurs bénévoles
   new: Vous voulez suivre des services visant une autre langue, juridiction ou industrie ? Contactez-nous pour commencer à collaborer !
   contribute:
@@ -106,6 +107,9 @@ collections:
     title: Mémos
     subtitle: Un mémo est une courte analyse de changements significatifs qui explique clairement leurs conséquences pour les utilisateurs.
     cta: Voir tous les mémos
+  reuses:
+    title: Réutilisations
+    subtitle: Des réutilisations identifiées des données de cette collection.
   governance:
     title: Gouvernance
     subtitle: Ces personnes et entités s'assurent que les termes de cette collection sont bien suivis.
@@ -151,3 +155,4 @@ pagination:
       aria_label: Page courante, numéro {{ .currrentPageNumber }}
 memos:
   author: Par <a href="{{ .profile }}" target="_blank" rel="noopener">{{ .name }}</a>, un‧e contributeur tiers
+reuses: Réutilisations

themes/opentermsarchive/assets/css/components/collection__reuses.css

@@ -0,0 +1,9 @@
+.collection__reuses-cta {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--m2XL);
+
+  @media (--tabletLarge) {
+    justify-content: center;
+  }
+}

themes/opentermsarchive/assets/css/loader.css

@@ -43,6 +43,7 @@
 @import "themes/opentermsarchive/assets/css/components/collection__contribute.css";
 @import "themes/opentermsarchive/assets/css/components/collection__memos.css";
 @import "themes/opentermsarchive/assets/css/components/collection__governance.css";
+@import "themes/opentermsarchive/assets/css/components/collection__reuses.css";
 @import "themes/opentermsarchive/assets/css/components/container.css";
 @import "themes/opentermsarchive/assets/css/components/contributors.css";
 @import "themes/opentermsarchive/assets/css/components/distinctions.css";

themes/opentermsarchive/layouts/collections/single.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+{{ $currentCollectionID := .Params.id }}
   <div class="collection">
 
     {{ $isGraySectionIndex := 0 }}
@@ -113,14 +114,14 @@
               <i class="icon icon--primary icon--big icon--stroke-thin" data-lucide="hand-heart"></i>
             </div>
             <h4 class="h4--ultralight">{{ i18n "collections.contribute.donate" }}</h4>
             <a class="contribute__item-link" href="{{ .Param "opencollective.url" }}" target="_blank" rel="noopener" aria-label="{{ i18n "collections.contribute.donate" }}"></a>
           </div>
           <div class="collection__contribute-item">
             <div class="icon__circle-wrapper icon__circle-wrapper--big icon__circle-wrapper--graylight">
               <i class="icon icon--primary icon--big icon--stroke-thin" data-lucide="square-pen"></i>
             </div>
             <h4 class="h4--ultralight">{{ i18n "collections.contribute.publish" }}</h4>
             <a class="contribute__item-link" href="{{ .Param "memos.how_to_publish.url" }}" target="_blank" rel="noopener" aria-label="{{ i18n "collections.contribute.publish" }}"></a>
           </div>
           <div class="collection__contribute-item">
             <div class="icon__circle-wrapper icon__circle-wrapper--big icon__circle-wrapper--graylight">
@@ -150,7 +151,6 @@
     {{ $isGraySectionIndex = add $isGraySectionIndex 1 }}
 
     {{ $memosRelRef := relref . "/memos" }}
-    {{ $currentCollectionID := .Params.id }}
     {{ $memos := where .Site.RegularPages "Type" "memos" }}
     {{ $filteredMemos := slice }}
 
@@ -184,6 +184,13 @@
       {{ $isGraySectionIndex = add $isGraySectionIndex 1 }}
     {{ end }}
 
+    {{ $reusesClass := cond (modBool $isGraySectionIndex 2) "container--is-gray" "" }}
+    {{ $relatedReuses := partial "func/getRelatedReuses.html" (dict "relatedTo" $currentCollectionID "context" . ) }}
+    {{ partial "reuses.html" (dict "reuses" $relatedReuses "title" (i18n "collections.reuses.title") "subtitle" (i18n "collections.reuses.subtitle") "class" $reusesClass "relatedTo" $currentCollectionID "context" . ) }}
+    {{ if $relatedReuses }}
+      {{ $isGraySectionIndex = add $isGraySectionIndex 1 }}
+    {{ end }}
+
     <div class="container container--wide container--has-no-padding-y {{ if modBool $isGraySectionIndex 2 }}container--is-gray{{ end }}">
       <div class="collection__governance container container--1211 container--has-no-padding-x">
         <h3>{{ i18n "collections.governance.title" }}</h3>

themes/opentermsarchive/layouts/index.html

@@ -4,7 +4,8 @@
   {{ partial "collections.html" (dict "featured" true "context" .) }}
   {{ partial "follow-us.html" . }}
   {{ partial "how-it-works.html" . }}
-  {{ partial "reuses.html" . }}
+  {{ $reuses := partial "func/getReuses.html" (dict "context" . ) }}
+  {{ partial "reuses.html" (dict "reuses" $reuses "title" .Params.reuses.title "subtitle" .Params.reuses.subtitle "class" "container--is-gray container--has-no-padding-top" "context" .) }}
   {{ partial "product-newsletter.html" . }}
   {{ partial "foss.html" . }}
 {{ end }}

themes/opentermsarchive/layouts/partials/func/getRelatedReuses.html

@@ -0,0 +1,3 @@
+{{ $reuses := partial "func/getReuses.html" . }}
+{{ $reuses = where $reuses "data.related_collections" "intersect" (slice .relatedTo) }}
+{{ return $reuses }}

themes/opentermsarchive/layouts/partials/func/getReuses.html

@@ -0,0 +1,11 @@
+{{/*
+As Hugo removes the first level keys when sorting the reuses map,
+we recreate a temporary reuses collection which stores the filename,
+to be able to display the reuse image in the partial
+*/}}
+{{ $reusesWithfilenames := slice }}
+{{ range $filename, $data := site.Data.reuses }}
+  {{ $reusesWithfilenames = $reusesWithfilenames | append (dict "filename" $filename "data" $data) }}
+{{ end }}
+{{ $reuses := sort $reusesWithfilenames "data.weight" "desc" }}
+{{ return $reuses }}

themes/opentermsarchive/layouts/partials/reuses.html

@@ -1,27 +1,42 @@
-{{/*
-As Hugo removes the first level keys when sorting the reuses map,
-we recreate a temporary reuses collection which stores the filename,
-to be able to display the reuse image in the partial
-*/}}
-{{ $reusesWithfilenames := slice }}
-{{ range $filename, $data := site.Data.reuses }}
-  {{ $reusesWithfilenames = $reusesWithfilenames | append (dict "filename" $filename "data" $data) }}
-{{ end }}
-{{ $sortedReuses := sort $reusesWithfilenames "data.weight" "desc" }}
+{{ $relatedTo := default "all" .relatedTo }}
 
-<div class="reuses container container--is-gray container--wide container--has-no-padding-x container--has-no-padding-top" id="reuses">
-  <div class="container container--1211">
-    <div class="collections cardlist">
-      <div class="cardlist__header">
-        <h2 class="cardlist__title">{{ .Params.reuses.title }}</h2>
-        <h3 class="cardlist__subtitle h3--light">{{ .Params.reuses.subtitle }}</h3>
-      </div>
-      <div class="cardlist__items">
-        {{ range $sortedReuses }}
-          {{ partial "reuse.html" . }}
+{{ if .reuses }}
+  <div class="reuses container container--wide container--has-no-padding-x {{ with .class }}{{ . }}{{ end }}" id="{{ i18n "reuses" | urlize }}">
+    <div class="container container--1211 {{ if ne $relatedTo "all" }}container--has-no-padding-y{{ end }}">
+      <div class="collections cardlist">
+        {{ if or .title .subtitle }}
+          <div class="cardlist__header">
+            {{ with .title }}
+              {{ if ne $relatedTo "all" }}
+                <h3>{{ . }}</h3>
+              {{ else }}
+                <h2 class="cardlist__title">{{ . }}</h2>
+              {{ end }}
+            {{ end }}
+            {{ with .subtitle }}
+              {{ if ne $relatedTo "all" }}
+                <h5 class="h5--light mt--m mb--xl">{{ . }}</h5>
+              {{ else }}
+                <h3 class="cardlist__subtitle h3--light">{{ . }}</h3>
+              {{ end }}
+            {{ end }}
+          </div>
         {{ end }}
-        {{ partial "new-reuse.html" . }}
+        <div class="cardlist__items">
+          {{ range .reuses }}
+            {{ partial "reuse.html" . }}
+          {{ end }}
+          {{ if eq $relatedTo "all" }}
+            {{ partial "new-reuse.html" .context }}
+          {{ end }}
+        </div>
       </div>
+      {{ if ne $relatedTo "all" }}
+        {{ $reusesRelRef := printf "%s#%s" (relref .context "/") (i18n "reuses" | urlize) }}
+        <div class="collection__reuses-cta">
+          <a class="button button--secondary" href="{{ $reusesRelRef }}">{{ i18n "collections.cta.reuses" }}</a>
+        </div>
+      {{ end}}
     </div>
   </div>
-</div>
+{{ end }}