From e2dbe974f163226235f284c9f6fc0cacb9e87c00 Mon Sep 17 00:00:00 2001
From: Jens Deprez <jens.deprez@gmail.com>
Date: Wed, 8 Jan 2025 13:54:42 +0100
Subject: [PATCH] Conditional removal of the image: This ensures the image
 wrapper is not rendered if imageUrlFormatted evaluates to null.

---
 src/components/lod-card/lod-card.tsx | 109 ++++++++++++++-------------
 src/index.html                       |  87 +++++++++++++++++++++
 2 files changed, 143 insertions(+), 53 deletions(-)

diff --git a/src/components/lod-card/lod-card.tsx b/src/components/lod-card/lod-card.tsx
index 04cd7b7..c88c399 100644
--- a/src/components/lod-card/lod-card.tsx
+++ b/src/components/lod-card/lod-card.tsx
@@ -57,52 +57,53 @@ export class LodCard {
     return readMoreText && readMoreText !== "" ? readMoreText : "Lees meer";
   }
 
-  render() {
-    return (
-      <li class="lod-card teaser teaser--wide">
-        <article class="teaser-content">
-          <div class="content__second">
-            {this.cardTitle && <h3 class="h4">{this.cardTitle}</h3>}
+render() {
+  return (
+    <li class="lod-card teaser teaser--wide">
+      <article class="teaser-content">
+        <div class="content__second">
+          {this.cardTitle && <h3 class="h4">{this.cardTitle}</h3>}
 
-            {this.tagSplitted?.length > 0 && (
-              <div class="tag-list-wrapper">
-                <ul class="tag-list">
-                  {this.tagSplitted?.map((tag) => (
-                    <li>
-                      <span class="tag"> {tag} </span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            <div class="lod-card__description">
-              {this.description && this.description !== "" && (
-                <p>{this.description}</p>
-              )}
-
-              {this.address && this.address !== "" && (
-                <a
-                  target="_blank"
-                  href={`https://maps.google.com/maps?q=${this.address}`}
-                >
-                  {this.address}
-                </a>
-              )}
-              {this.date && this.date !== "" && <time>{this.date}</time>}
+          {this.tagSplitted?.length > 0 && (
+            <div class="tag-list-wrapper">
+              <ul class="tag-list">
+                {this.tagSplitted?.map((tag) => (
+                  <li>
+                    <span class="tag"> {tag} </span>
+                  </li>
+                ))}
+              </ul>
             </div>
+          )}
+
+          <div class="lod-card__description">
+            {this.description && this.description !== "" && (
+              <p>{this.description}</p>
+            )}
 
-            {this.readMoreUrl && (
-              <a href={this.readMoreUrl} class="read-more standalone-link">
-                {this.readMoreTextFormatted}
-                <span class="visually-hidden"> over {this.cardTitle} </span>
+            {this.address && this.address !== "" && (
+              <a
+                target="_blank"
+                href={`https://maps.google.com/maps?q=${this.address}`}
+              >
+                {this.address}
               </a>
             )}
+            {this.date && this.date !== "" && <time>{this.date}</time>}
           </div>
 
-          <div class="content__first">
-            <div class="tags-label-wrapper"></div>
+          {this.readMoreUrl && (
+            <a href={this.readMoreUrl} class="read-more standalone-link">
+              {this.readMoreTextFormatted}
+              <span class="visually-hidden"> over {this.cardTitle} </span>
+            </a>
+          )}
+        </div>
 
+        <div class="content__first">
+          <div class="tags-label-wrapper"></div>
+
+          {this.imageUrlFormatted && (
             <div class="figure-wrapper">
               <figure>
                 <div class="image-wrapper" data-ratio="1:1">
@@ -115,19 +116,21 @@ export class LodCard {
                 </div>
               </figure>
             </div>
-          </div>
-        </article>
-        {this.readMoreUrl && (
-          <a
-            href={this.readMoreUrl}
-            class="teaser-overlay-link"
-            tabIndex={-1}
-            aria-hidden="true"
-          >
-            {this.readMoreTextFormatted}
-          </a>
-        )}
-      </li>
-    );
-  }
+          )}
+        </div>
+      </article>
+      {this.readMoreUrl && (
+        <a
+          href={this.readMoreUrl}
+          class="teaser-overlay-link"
+          tabIndex={-1}
+          aria-hidden="true"
+        >
+          {this.readMoreTextFormatted}
+        </a>
+      )}
+    </li>
+  );
+}
+
 }
diff --git a/src/index.html b/src/index.html
index 6a900ce..43324af 100644
--- a/src/index.html
+++ b/src/index.html
@@ -55,6 +55,93 @@
       <span class="h3" slot="title"> Meest recente reglementen Stad Gent </span>
     </lod-regulations-list>
 
+    <lod-cards
+      pager-disabled="false"
+      items-per-page="5"
+      query="PREFIX dct: <http://purl.org/dc/terms/>
+           PREFIX prov: <http://www.w3.org/ns/prov#>
+           PREFIX eli: <http://data.europa.eu/eli/ontology#>
+           PREFIX besluit: <http://data.vlaanderen.be/ns/besluit#>
+           PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+           PREFIX mandaat: <http://data.vlaanderen.be/ns/mandaat#>
+           PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+
+           SELECT DISTINCT ?txt ?url
+           WHERE {
+             ?besluit a besluit:Besluit ;
+                     eli:title_short ?txt ;
+                     prov:wasDerivedFrom ?url ;
+                     prov:wasGeneratedBy ?behandelingVanAgendapunt .
+             ?behandelingVanAgendapunt dct:subject ?agendapunt .
+             ?agendapunt ^besluit:behandelt ?zitting .
+             ?zitting besluit:isGehoudenDoor ?bestuursorgaanURI ;
+                     besluit:geplandeStart ?zitting_datum .
+             ?bestuursorgaanURI skos:prefLabel ?orgaanLabel .
+             ?besluit ext:hasAnnotation ?annotation .
+             ?annotation ext:withTaxonomy ?thema ;
+                        ext:creationDate ?date ;
+                        ext:hasLabel ?label .
+             ?label ext:isTaxonomy ?concept .
+             VALUES ?thema { <http://stad.gent/id/concepts/decision_making_themes> }
+             VALUES ?concept { <http://stad.gent/id/concepts/decision_making_themes/concept_36> }
+             FILTER (!CONTAINS(STR(?orgaanLabel), 'personeel'))
+             FILTER (!CONTAINS(STR(?orgaanLabel), 'gemeenteraad'))
+           }
+           ORDER BY DESC(?zitting_datum)"
+count-query="
+  PREFIX dct: <http://purl.org/dc/terms/>
+  PREFIX prov: <http://www.w3.org/ns/prov#>
+  PREFIX eli: <http://data.europa.eu/eli/ontology#>
+  PREFIX besluit: <http://data.vlaanderen.be/ns/besluit#>
+  PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+  PREFIX mandaat: <http://data.vlaanderen.be/ns/mandaat#>
+  PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+
+  SELECT (COUNT(DISTINCT(?besluit)) AS ?count)
+  WHERE {
+    ?besluit a besluit:Besluit ;
+             eli:title_short ?title ;
+             prov:wasDerivedFrom ?url ;
+             prov:wasGeneratedBy ?behandelingVanAgendapunt .
+    ?behandelingVanAgendapunt dct:subject ?agendapunt .
+    ?agendapunt ^besluit:behandelt ?zitting .
+    ?zitting besluit:isGehoudenDoor ?bestuursorgaanURI ;
+            besluit:geplandeStart ?zitting_datum .
+
+    ?bestuursorgaanURI skos:prefLabel ?orgaanLabel .
+
+    ?besluit ext:hasAnnotation ?annotation .
+    ?annotation ext:withTaxonomy ?thema ;
+               ext:creationDate ?date ;
+               ext:hasLabel ?label .
+    ?label ext:isTaxonomy ?concept .
+
+    VALUES ?thema { <http://stad.gent/id/concepts/decision_making_themes> }
+    VALUES ?concept { <http://stad.gent/id/concepts/decision_making_themes/concept_36> }
+
+    FILTER (!CONTAINS(STR(?url), '/notulen'))
+    FILTER (!CONTAINS(STR(?orgaan), 'personeel'))
+    FILTER (!CONTAINS(STR(?orgaan), 'gemeenteraad'))
+
+    OPTIONAL { ?bestuursorgaanURI besluit:bestuurt ?bestuureenheidURI. }
+    OPTIONAL {
+      ?besluit prov:wasGeneratedBy/besluit:heeftStemming/besluit:gevolg ?status
+    }
+    BIND(COALESCE(?status, 'Onbekend'@nl) AS ?status)
+
+    VALUES ?bestuursorgaanURI {
+      <http://data.lblod.info/id/bestuursorganen/c126b20bc1a94de293b7fceaf998c82e9a7a1d56ba34cbf9992aa4bf01ae2b01>
+      <http://data.lblod.info/id/bestuursorganen/ce3232c33d7399f6efc93102e2184c9a8bc24a6d2fcb218582a9eb4e01dfb67f>
+    }
+
+    BIND(CONCAT(UCASE(SUBSTR(?orgaanLabel, 1, 1)), SUBSTR(?orgaanLabel, 2)) AS ?orgaan)
+  }
+"
+      endpoint="https://probe.stad.gent/sparql"
+      cta-text="Gepersonaliseerde CTA tekst"
+      read-more-text="Gepersonaliseerde lees meer"
+    ></lod-cards>
+
     <lod-cards
       pager-disabled="false"
       items-per-page="5"