From 5d658452f45f1cfb46ecfed260d060f5e56e8c31 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Fri, 1 Mar 2024 12:06:42 +0000
Subject: [PATCH] Fixes privacy policy undefined bugs, improves link to listing
 report

---
 .../things/PrivacyPolicyDetails.astro         | 84 +++++++++++--------
 web/src/components/things/ServiceList.astro   | 55 ++++++++----
 web/src/pages/[...listing].astro              |  4 +-
 3 files changed, 92 insertions(+), 51 deletions(-)

diff --git a/web/src/components/things/PrivacyPolicyDetails.astro b/web/src/components/things/PrivacyPolicyDetails.astro
index 3e8a7a7..e60e25a 100644
--- a/web/src/components/things/PrivacyPolicyDetails.astro
+++ b/web/src/components/things/PrivacyPolicyDetails.astro
@@ -23,43 +23,55 @@ const getIconName = (clasification: string) => {
 ---
 
 <div class="privacy-policy-wrapper">
-  <div class="left">
-    <h4>Privacy Policy Summary</h4>
-    <ul>
-      {priv.points.map((point) => (
-        <li class={`clasification ${point.case.classification}`}>
-          <FontAwesome iconName={getIconName(point.case.classification)} />
-          {point.title}
-        </li>
-      ))}
-    </ul>
-  </div>
-  <div class="right">
-    <h4>Score</h4>
-    <div class={`rating rating-${priv.rating}`}>
-      <p>{priv.rating}</p>
+  
+  {(priv.points && priv.points.length) > 0 && (
+    <div class="left">
+      <h4>Privacy Policy Summary</h4>
+      <ul>
+        {priv.points.map((point) => (
+          <li class={`clasification ${point.case.classification}`}>
+            <FontAwesome iconName={getIconName(point.case.classification)} />
+            {point.title}
+          </li>
+        ))}
+      </ul>
     </div>
-    <h4>Documents</h4>
-    <ul>
-      {priv.documents.map((document) => (
-        <li class="list-item">
-          <a href={document.url} target="_blank">{document.name}</a>
-          <div class="date-block">
-            Created {formatDate(document.created_at)},
-            Last modified {timeAgo(document.updated_at)}
-          </div>
-        </li>
-      ))}
-    </ul>
-    <h4>Domains Covered by Policy</h4>
-    <ul>
-      {priv.urls.map((url) => (
-        <li>{url}</li>
-      ))}
-    </ul>
-    <h4>About the Data</h4>
-    <p>This data is kindly provided by <a href="https://tosdr.org/">tosdr.org</a></p>
-    <p>View the full report at: <a href={`https://tosdr.org/en/service/${priv.id}`}>tosdr.org/en/service/{priv.id}</a></p>
+  )}
+  
+  <div class="right">
+    { priv.rating && (
+      <h4>Score</h4>
+      <div class={`rating rating-${priv.rating}`}>
+        <p>{priv.rating}</p>
+      </div>
+    )}
+    {priv.documents && priv.documents.length > 0 && (
+      <h4>Documents</h4>
+      <ul>
+        {priv.documents.map((document) => (
+          <li class="list-item">
+            <a href={document.url} target="_blank">{document.name}</a>
+            <div class="date-block">
+              Created {formatDate(document.created_at)},
+              Last modified {timeAgo(document.updated_at)}
+            </div>
+          </li>
+        ))}
+      </ul>
+    )}
+    {priv.urls && priv.urls.length > 1 && (
+      <h4>Domains Covered by Policy</h4>
+      <ul>
+        {priv.urls.map((url) => (
+          <li>{url}</li>
+        ))}
+      </ul>
+    )}
+    {priv.points && priv.points.length > 0 && (
+      <h4>About the Data</h4>
+      <p>This data is kindly provided by <a href="https://tosdr.org/">tosdr.org</a></p>
+      <p>View the full report at: <a href={`https://tosdr.org/en/service/${priv.id}`}>tosdr.org/en/service/{priv.id}</a></p>
+    )}
   </div>
 </div>
 
diff --git a/web/src/components/things/ServiceList.astro b/web/src/components/things/ServiceList.astro
index 77487fa..e91507e 100644
--- a/web/src/components/things/ServiceList.astro
+++ b/web/src/components/things/ServiceList.astro
@@ -67,13 +67,16 @@ const {
             src={service.icon || `https://icon.horse/icon/${formatLink(service.url)}`}
           />
 
-          {subHeading ? <h4>{service.name}</h4> : <h3>{service.name}</h3>}
+          <a class="service-title" href={`/${slugify(categoryName)}/${slugify(sectionName)}/${slugify(service.name)}`}>
+            {subHeading ? <h4>{service.name}</h4> : <h3>{service.name}</h3>}
+          </a>
           {service.followWith && <p class="follow-with">({service.followWith})</p> }
           <a class="service-link" href={service.url}>{formatLink(service.url)}</a>
         </div>
         <div class="service-body">
           <p set:html={parseMarkdown(service.description)}></p>
           <div class="service-stats">
+            <div class="left">
             { service.securityAudited && (
               <span class="meta-item great" title={`${service.name} has been security audited by an accredited auditor, with results published publicly`}>
                 <FontAwesome iconName="securityAudited" /> Security Audited
@@ -108,6 +111,7 @@ const {
                 </a>
               </span>
             ) }
+            </div>
             <div class="view-service">
               <a href={`/${slugify(categoryName)}/${slugify(sectionName)}/${slugify(service.name)}`}>View {service.name} Report</a>
             </div>
@@ -156,10 +160,15 @@ const {
         align-items: center;
         gap: 0.5rem;
         flex-wrap: wrap;
-        h3, h4 {
-          margin: 0;
-          font-size: 1.6rem;
+        .service-title {
+          text-decoration: none;
+          color: var(--foreground);
+          h3, h4 {
+            margin: 0;
+            font-size: 1.6rem;
+          }
         }
+        
         .service-icon {
           width: 2.5rem;
           height: 2.5rem;
@@ -193,10 +202,37 @@ const {
           }
         }
         .service-stats {
+          .left {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+            align-items: center;
+          }
           display: flex;
           gap: 1rem;
           flex-wrap: wrap;
+          align-items: center;
+          justify-content: space-between;
         }
+        .view-service {
+          transition: all 0.2s ease-in-out;
+          opacity: 0.8;
+          a {
+            padding: 0.25rem 0.6rem;
+            width: fit-content;
+            right: 1rem;
+            font-size: 0.9rem;
+            background: var(--accent-3);
+            color: var(--accent-fg);
+            text-decoration: none;
+            border-radius: var(--curve-md);
+          }
+          &:hover {
+            opacity: 1;
+            transform: scale(1.05);
+          }
+        }
+
         .meta-item, .warning {
           display: flex;
           align-items: center;
@@ -239,16 +275,7 @@ const {
     }
   }
 
-.view-service {
-  a {
-  padding: 0.25rem 0.6rem;
-  color: var(--accent-3);
-  width: fit-content;
-  position: absolute;
-  right: 1rem;
-  transform: scale(0.8);
-  }
-}
+
 
 section :global(.view-all) {
   width: fit-content;
diff --git a/web/src/pages/[...listing].astro b/web/src/pages/[...listing].astro
index 8f35c68..91b39e1 100644
--- a/web/src/pages/[...listing].astro
+++ b/web/src/pages/[...listing].astro
@@ -121,10 +121,12 @@ export async function getStaticPaths() {
 // const { previous, next } = makePaginationLinks();
 
 
+const ignoredSites = ['github.gom', 'wikipedia.'];
+
 // Fetch detailed data about the services GitHub repo, privacy policy and website
 const githubData = github ? await fetchGitHubStats(github) : null;
 const privacyData = tosdrId ? await fetchTosdrPrivacy(tosdrId) : null;
-const websiteData = (url && !url.includes('github.com')) ? await fetchWebsiteInfo(url) : null;
+const websiteData = (url && !ignoredSites.some(ignoredSite => url.includes(ignoredSite))) ? await fetchWebsiteInfo(url) : null;
 
 ---