Bumped version of library and improvements on anchor tags and metadata

Informatievlaanderen · Jul 22, 2024 · 46dac60 · 46dac60
1 parent ab3592b
commit 46dac60
Show file tree

Hide file tree

Showing 15 changed files with 47 additions and 32 deletions.
diff --git a/packages/oslo-generator-html/lib/HtmlGenerationService.ts b/packages/oslo-generator-html/lib/HtmlGenerationService.ts
@@ -1,6 +1,6 @@
 import { writeFile, mkdir } from 'fs/promises';
 import { resolve, dirname } from 'path';
-import { sortClasses } from './utils/utils';
+import { sortClasses, sortDataTypeProperties } from './utils/utils';
 import { IService, Scope } from '@oslo-flanders/core';
 import { Logger, ServiceIdentifier, fetchFileOrUrl } from '@oslo-flanders/core';
 import { inject, injectable } from 'inversify';
@@ -57,7 +57,10 @@ export class HtmlGenerationService implements IService {
 
     data.entities = this.filterEntities(classes);
 
-    data.scopedDataTypes = this.filterClasses(dataTypes, this.isScoped);
+    data.scopedDataTypes = sortDataTypeProperties(
+      sortClasses(this.filterClasses(dataTypes, this.isScoped), languageKey),
+      languageKey,
+    );
 
     data.inPackageDataTypes = this.filterClasses(dataTypes, this.isInPackage);
     data.inPackageClasses = this.filterClasses(classes, this.isInPackage);
@@ -66,9 +69,9 @@ export class HtmlGenerationService implements IService {
       data.inPackageClasses,
       languageKey,
     );
-    data.inPackageProperties = this.filterAndFlattenProperties(
-      data.inPackageMerged,
-      this.isInPackage,
+    data.inPackageProperties = sortClasses(
+      this.filterAndFlattenProperties(data.inPackageMerged, this.isInPackage),
+      languageKey,
     );
 
     data.metadata = metadata;

diff --git a/packages/oslo-generator-html/lib/templates/application-profile/index.njk b/packages/oslo-generator-html/lib/templates/application-profile/index.njk
@@ -1,6 +1,5 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 {% set language = "nl" %}
-{% set sortattr = "sort" %}
 <html
   xml:lang="nl"
   lang="nl"

diff --git a/packages/oslo-generator-html/lib/templates/components/ap/dataTypes.njk b/packages/oslo-generator-html/lib/templates/components/ap/dataTypes.njk
@@ -1,10 +1,10 @@
 <div class="region region--no-space-top">
     <h2 class="h2">Datatypes</h2>
 </div>
-{% for dataType in data.scopedDataTypes | sort(attribute=sortattr) %}
+{% for dataType in data.scopedDataTypes %}
     <div class="region region--no-space-top">
         <h3 class="h3" id="{{ dataType.id }}">
-            <a href="{{ dataType.id }}" data-toggle="tooltip" data-content="{{ dataType.id }}" id="{{ dataType.applicationProfileLabel[language] }}" data-placement="right">
+            <a href="{{ dataType.id }}" data-toggle="tooltip" data-content="{{ dataType.id }}" id="{{ dataType.applicationProfileLabel[language] | replace(' ', '') }}" data-placement="right">
                 {{ dataType.applicationProfileLabel[language] }}</a>
         </h3>
         <div class="region region--no-space-top">
@@ -34,8 +34,9 @@
                         <dt>Eigenschappen</dt>
                         {% if ((dataType.properties | length) > 0 ) %}
                             <dd>Voor dit datatype zijn de volgende eigenschappen gedefinieerd:
-                                {%- for prop in dataType['properties'] | sort(attribute=sortattr) %}
-                                    <a href="#{{ (dataType.applicationProfileLabel[language] ~ '.' ~ prop.applicationProfileLabel[language]) | urlencode }}">{{ prop.applicationProfileLabel[language] }}</a>
+                                {%- for prop in dataType['properties'] %}
+                                    <a href="#{{ (dataType.applicationProfileLabel[language] ~ ':' ~ prop.applicationProfileLabel[language]) | replace(' ', '')
+                                        |urlencode }}">{{ prop.applicationProfileLabel[language] }}</a>
                                     {% if not loop.last %},
                                     {% endif %}
                                 {%- endfor %}.
@@ -59,8 +60,8 @@
                                 </tr>
                             </thead>
                             <tbody class="supertype">
-                                {% for prop in dataType['properties'] | sort(attribute=sortattr) %}
-                                    <tr id="{{ (dataType.applicationProfileLabel[language] ~ '.' ~ prop.applicationProfileLabel[language]) | urlencode }}" typeof="rdfs:Property" resource="{{ prop.uri }}">
+                                {% for prop in dataType['properties'] %}
+                                    <tr id="{{ (dataType.applicationProfileLabel[language] ~ ':' ~ prop.applicationProfileLabel[language]) | replace(' ', '') | urlencode }}" typeof="rdfs:Property" resource="{{ prop.uri }}">
                                         <td>
                                             <code property="rdfs:label">
                                                 <a href="{{ prop.id }}" data-toggle="tooltip" data-content="{{ prop.id }}" data-placement="right">

diff --git a/packages/oslo-generator-html/lib/templates/components/ap/entities.njk b/packages/oslo-generator-html/lib/templates/components/ap/entities.njk
@@ -1,7 +1,7 @@
 <div class="region region--no-space-top">
   <h2 class="h2">Entiteiten</h2>
 </div>
-{% for entity in data.entities | sort(attribute=sortattr) %}
+{% for entity in data.entities %}
   <div class="region region--no-space-top">
     <h3 class="h3" id="{{ entity.id }}">
       <a href="{{ entity.id }}" data-toggle="tooltip" data-content="{{ entity.id }}" id="{{ entity.applicationProfileLabel[language] }}" data-placement="right">
@@ -34,8 +34,8 @@
             <dt>Eigenschappen</dt>
             {% if ((entity.properties | length) > 0 ) %}
               <dd>Voor deze entiteit zijn de volgende eigenschappen gedefinieerd:
-                {%- for prop in entity['properties'] | sort(attribute=sortattr) %}
-                  <a href="#{{ (entity.applicationProfileLabel[language] ~ '.' ~ prop.applicationProfileLabel[language]) | urlencode }}">{{ prop.applicationProfileLabel[language] }}</a>
+                {%- for prop in entity['properties'] %}
+                  <a href="#{{ (entity.applicationProfileLabel[language] ~ ':' ~ prop.applicationProfileLabel[language]) | urlencode }}">{{ prop.applicationProfileLabel[language] }}</a>
                   {% if not loop.last %},
                   {% endif %}
                 {%- endfor %}.
@@ -59,8 +59,8 @@
                 </tr>
               </thead>
               <tbody class="supertype">
-                {% for prop in entity['properties'] | sort(attribute=sortattr) %}
-                  <tr id="{{ (entity.applicationProfileLabel[language] ~ '.' ~ prop.applicationProfileLabel[language]) | urlencode }}" typeof="rdfs:Property" resource="{{ prop.uri }}">
+                {% for prop in entity['properties'] %}
+                  <tr id="{{ (entity.applicationProfileLabel[language] ~ ':' ~ prop.applicationProfileLabel[language]) | urlencode }}" typeof="rdfs:Property" resource="{{ prop.uri }}">
                     <td>
                       <code property="rdfs:label">
                         <a href="{{ prop.id }}" data-toggle="tooltip" data-content="{{ prop.id }}" data-placement="right">

diff --git a/packages/oslo-generator-html/lib/templates/components/ap/overview.njk b/packages/oslo-generator-html/lib/templates/components/ap/overview.njk
@@ -5,7 +5,7 @@
             {% if ( ( data.entities | length > 0)   ) %}
                 <div class="region region--no-space-top">
                     <p>In dit document wordt correct gebruik van de volgende entiteiten toegelicht: <br/> |
-                        {%- for entity in data.entities |sort(attribute=sortattr) %}
+                        {%- for entity in data.entities %}
                             <a href="#{{ getAnchorTag(entity.id) }}">
                                 {{ entity.applicationProfileLabel[language] }}</a>
                             |
@@ -17,8 +17,8 @@
                 <div class="region region--no-space-top">
                     <p>
                         In dit document worden de volgende datatypes toegelicht: <br/> |
-                        {%- for dataType in data.scopedDataTypes |sort(attribute=sortattr) %}
-                            <a href="#{{ getAnchorTag(dataType.id) }}">
+                        {%- for dataType in data.scopedDataTypes %}
+                            <a href="#{{ dataType.applicationProfileLabel[language] | replace(' ', '') }}">
                                 {{ dataType.applicationProfileLabel[language] }}</a>
                             |
                         {%- endfor %}

diff --git a/packages/oslo-generator-html/lib/templates/components/license.njk b/packages/oslo-generator-html/lib/templates/components/license.njk
@@ -1,5 +1,5 @@
 <div class="region region--no-space-top">
-    <section typeof="bibo:Chapter" resource="#ref" rel="bibo:Chapter" id="license-and-liability">
+    <section typeof="bibo:Chapter" resource="#ref" rel="bibo:Chapter" id="license">
         <h2 class="h2" id="licenseandliability" aria-level="1" role="heading">
             <span class="secno">1.
             </span>Licentie</h2>

diff --git a/packages/oslo-generator-html/lib/templates/components/metadata.njk b/packages/oslo-generator-html/lib/templates/components/metadata.njk
@@ -1,7 +1,7 @@
 <h1 class="h1">
     {{ data.metadata.title }}
 </h1>
-<div class="head" role="status" id="status">
+<div class="head" role="status">
     <dl>
         <dt>Status</dt>
         <dd>

diff --git a/...b/templates/components/sideNavigation.njk → ...l/lib/templates/components/navigation.njk b/...b/templates/components/sideNavigation.njk → ...l/lib/templates/components/navigation.njk
diff --git a/packages/oslo-generator-html/lib/templates/components/voc/classes.njk b/packages/oslo-generator-html/lib/templates/components/voc/classes.njk
@@ -7,7 +7,7 @@
             <div class="region region--no-space-top">
                 <p>Deze sectie geeft een formele definitie aan elke klasse.</p>
             </div>
-            {% for class in data.inPackageMerged | sort(attribute=sortattr) %}
+            {% for class in data.inPackageMerged %}
                 <div class="region region--no-space-top">
                     <h3 class="h3" id="{{ class.vocabularyLabel[language] }}">Klasse
                         <em>{{ class.vocabularyLabel[language] }}</em>

diff --git a/packages/oslo-generator-html/lib/templates/components/voc/navigation.njk b/packages/oslo-generator-html/lib/templates/components/voc/navigation.njk
@@ -10,7 +10,7 @@
                         <a href="#sotd">Status van dit document</a>
                     </li>
                     <li class="side-navigation__item">
-                        <a href="#license-and-liability">1. Licentie</a>
+                        <a href="#license">1. Licentie</a>
                     </li>
                     <li class="side-navigation__item">
                         <a href="#conformance-statement">2. Conformiteit</a>

diff --git a/packages/oslo-generator-html/lib/templates/components/voc/overview.njk b/packages/oslo-generator-html/lib/templates/components/voc/overview.njk
@@ -25,7 +25,7 @@
                 <div class="grid">
                     <p>
                         |
-                        {% for class in data.inPackageMerged | sort(attribute=sortattr) %}
+                        {% for class in data.inPackageMerged %}
                             <a href="#{{ getAnchorTag(class.id) }}" rel="class">{{ class.vocabularyLabel[language] }}</a>
                             |
                         {% endfor %}
@@ -39,7 +39,7 @@
                 <div class="grid">
                     <p>
                         |
-                        {% for prop in data.inPackageProperties | sort(attribute=sortattr) %}
+                        {% for prop in data.inPackageProperties %}
                             <a href="#{{ getAnchorTag(prop.id) }}" rel="property">{{ prop.vocabularyLabel[language] }}</a>
                             |
                         {% endfor %}

diff --git a/packages/oslo-generator-html/lib/templates/components/voc/properties.njk b/packages/oslo-generator-html/lib/templates/components/voc/properties.njk
@@ -7,7 +7,7 @@
             <div class="region region--no-space-top">
                 <p>Deze sectie geeft een formele definitie aan elke eigenschap.</p>
             </div>
-            {% for property in data.inPackageProperties | sort(attribute=sortattr) %}
+            {% for property in data.inPackageProperties %}
                 <div class="region region--no-space-top">
                     <h3 class="h3" id="{{ property.vocabularyLabel[language] }}">Eigenschap
                         <em>{{ property.vocabularyLabel[language] }}</em>

diff --git a/packages/oslo-generator-html/lib/templates/vocabulary/index.njk b/packages/oslo-generator-html/lib/templates/vocabulary/index.njk
@@ -1,6 +1,5 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 {% set language = "nl" %}
-{% set sortattr = "sort" %}
 <html
   xml:lang="nl"
   lang="nl"

diff --git a/packages/oslo-generator-html/lib/utils/utils.ts b/packages/oslo-generator-html/lib/utils/utils.ts
@@ -1,10 +1,23 @@
 import type { Class } from '../types/Class';
 import type { Languages } from './languageEnum';
 
-export function sortClasses(classes: Class[], language: Languages): Class[] {
-  return classes.sort((classA, classB) =>
+export const sortClasses = (classes: Class[], language: Languages): Class[] =>
+  classes.sort((classA, classB) =>
     classA.vocabularyLabel[language].localeCompare(
       classB.vocabularyLabel[language],
     ),
   );
-}
+
+export const sortDataTypeProperties = (
+  dataTypes: Class[],
+  language: Languages,
+): Class[] =>
+  dataTypes.map((dataType) => ({
+    ...dataType,
+    properties: dataType?.properties?.sort(
+      (propertyA: Class, propertyB: Class) =>
+        propertyA.applicationProfileLabel[language].localeCompare(
+          propertyB.applicationProfileLabel[language],
+        ),
+    ),
+  }));
diff --git a/packages/oslo-generator-html/package.json b/packages/oslo-generator-html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oslo-flanders/html-generator",
-  "version": "0.0.5-alpha.0",
+  "version": "0.0.6-alpha.0",
   "description": "Generates an HTML file using an OSLO webuniversum config",
   "author": "Digitaal Vlaanderen <https://data.vlaanderen.be/id/organisatie/OVO002949>",
   "homepage": "https://github.com/informatievlaanderen/OSLO-UML-Transformer/tree/main/packages/oslo-generator-html#readme",