From 3b8bd7b44bd44dab8f8f6066d993a098e084165d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Fri, 1 Mar 2024 18:04:06 +0000
Subject: [PATCH] Improved additional info to display for each listing

---
 .../things/PrivacyPolicyDetails.astro         |  20 ++-
 web/src/pages/[...listing].astro              | 167 ++++++++++++++++--
 web/src/utils/fetch-privacy-policy.ts         |   2 +-
 3 files changed, 173 insertions(+), 16 deletions(-)

diff --git a/web/src/components/things/PrivacyPolicyDetails.astro b/web/src/components/things/PrivacyPolicyDetails.astro
index 1dad121..67e984c 100644
--- a/web/src/components/things/PrivacyPolicyDetails.astro
+++ b/web/src/components/things/PrivacyPolicyDetails.astro
@@ -28,7 +28,7 @@ const getIconName = (clasification: string) => {
   {(priv.points && priv.points.length) > 0 && (
     <div class="left">
       <h4>Privacy Policy Summary</h4>
-      <ul>
+      <ul class="no-point">
         {priv.points.map((point) => (
           <li class={`clasification ${point.case.classification}`}>
             <FontAwesome iconName={getIconName(point.case.classification)} />
@@ -70,8 +70,11 @@ const getIconName = (clasification: string) => {
     )}
     {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>
+      <p class="about-tosdr">
+        This data is kindly provided by <a href="https://tosdr.org/">tosdr.org</a>.
+        Read full report at: <a href={`https://tosdr.org/en/service/${priv.id}`}>#{priv.id}</a>
+      
+        </p>
     )}
   </div>
 </div>
@@ -111,6 +114,7 @@ h4 {
   li {
     :global(svg) {
       width: 1rem;
+      margin-right: 0.2rem;
     }
     &.clasification {
       &.good :global(svg) { color: #35b969; }
@@ -137,6 +141,10 @@ h4 {
         opacity: 0.7;
       }
     }
+    &.no-point {
+      list-style: none;
+      padding-left: 0.25rem;
+    }
   }
 
   .rating {
@@ -158,4 +166,10 @@ h4 {
     color: var(--rating-color);
     border-color: var(--rating-color);
   }
+
+  .about-tosdr {
+    display: inline;
+    font-size: 0.8rem;
+    opacity: 0.7;
+  }
 </style>
diff --git a/web/src/pages/[...listing].astro b/web/src/pages/[...listing].astro
index 73150e2..4a25234 100644
--- a/web/src/pages/[...listing].astro
+++ b/web/src/pages/[...listing].astro
@@ -12,6 +12,8 @@ import { fetchGitHubStats } from '@utils/fetch-repo-info';
 import { fetchTosdrPrivacy } from '@utils/fetch-privacy-policy';
 import { fetchWebsiteInfo } from '@utils/fetch-website-info';
 import { parseMarkdown, formatLink } from '@utils/parse-markdown';
+import FontAwesome from '@components/form/FontAwesome.svelte';
+import Button from '@components/form/Button.astro';
 
 interface Props extends Service {
   slug: string;
@@ -27,9 +29,9 @@ const {
   tosdrId,
   icon,
   followWith,
-  // securityAudited,
-  // openSource,
-  // acceptsCrypto,
+  securityAudited,
+  openSource,
+  acceptsCrypto,
   parentSection,
   categoryName,
 } = Astro.props;
@@ -103,14 +105,15 @@ export async function getStaticPaths() {
   });
 }
 
-// const makePaginationLinks = () => {
-//   const index = otherSections.findIndex(section => section.name === title);
-//   const previousSection = index >  0 ? otherSections[index -  1].name : null;
-//   const nextSection = index < otherSections.length -  1 ? otherSections[index +  1].name : null;
-//   return { previous: previousSection, next: nextSection };
-// };
+const makePaginationLinks = () => {
+  const allServices = parentSection.services || [];
+  const index = allServices.findIndex(item => item.name === name);
+  const previousItem = index >  0 ? allServices[index -  1].name : null;
+  const nextItem = index < allServices.length -  1 ? allServices[index +  1].name : null;
+  return { previous: previousItem, next: nextItem };
+};
 
-// const { previous, next } = makePaginationLinks();
+const { previous, next } = makePaginationLinks();
 
 
 const ignoredSites = ['github.gom', 'wikipedia.'];
@@ -151,7 +154,63 @@ const websiteData = (url && !ignoredSites.some(ignoredSite => url.includes(ignor
           data-service-url={formatLink(url)}
           src={icon || `https://icon.horse/icon/${formatLink(url)}`}
         />
+        <div>
         <p class="description" set:html={parseMarkdown(description)}></p>
+        <ul>
+          { url && (
+          <li>
+            <b>Homepage:</b>
+            <a href={url}>{formatLink(url)}</a>
+          </li>
+          )}
+          { github && (
+          <li>
+            <b>GitHub:</b>
+            <a href={`https://github.com/${github}`}>github.com/{github}</a>
+          </li>
+          )}
+          { tosdrId && (
+          <li>
+            <b>ToS;DR:</b>
+            <a href={`https://tosdr.org/en/service/${tosdrId}`}>{`tosdr.org/en/service/${tosdrId}`}</a>
+          </li>
+          )}
+          { url && (
+          <li>
+            <b>Web info:</b>
+            <a href={`https://web-check.xyz/results/${formatLink(url)}`}>{`web-check.xyz/results/${formatLink(url)}`}</a>
+          </li>
+          )}
+        </ul>
+        </div>
+      </div>
+      <div class="highlights">
+        { securityAudited && (
+          <span class="meta-item great" title={`${name} has been security audited by an accredited auditor, with results published publicly`}>
+            <FontAwesome iconName="securityAudited" /> Security Audited
+          </span>
+        )}
+        { acceptsCrypto && (
+          <span class="meta-item great" title={`${name} accepts anonymous payment methods`}>
+            <FontAwesome iconName="cryptoAccepted" /> Crypto Payments Accepted
+          </span>
+        )}
+        { securityAudited === false && (
+          <span class="meta-item warning" title={`${name} has not been audited`}>
+            <FontAwesome iconName="notSecurityAudited" /> No Security Audit
+          </span>
+        )}
+        { (openSource === false) && (
+          <span class="warning">
+            <FontAwesome iconName="closedSource" />
+            Not Open Source
+          </span>
+        )}
+        { openSource || (github && openSource !== false) ? (
+          <span class="meta-item great" title={`${name} is open source`}>
+            <FontAwesome iconName="openSource" /> Open Source
+          </span>
+        ) : null }
       </div>
     </section>
     { privacyData && (
@@ -188,6 +247,24 @@ const websiteData = (url && !ignoredSites.some(ignoredSite => url.includes(ignor
         sectionName={parentSection.name}
       />
     </section>
+
+    <div class="pagination-navigation">
+      { previous ? (
+        <Button url={`/${slugify(categoryName)}/${slugify(parentSection.name)}/${slugify(previous)}`}>
+          <span>← Previous</span>
+          <p>{previous}</p>
+        </Button>
+      ) : <p class="nothing"></p>}
+      <a href={`/${slugify(categoryName)}/${slugify(parentSection.name)}`} class="go-to-category">
+        View {parentSection.name} ({(parentSection.services || []).length})
+      </a>
+      { next && (
+        <Button url={`/${slugify(categoryName)}/${slugify(parentSection.name)}/${slugify(next)}`}>
+          <span>Next →</span>
+          <p>{next}</p>
+        </Button>
+      )}
+    </div>
   </main>
 </Layout>
 
@@ -261,10 +338,29 @@ h3 {
 .intro {
   font-size: 1.2rem;
   font-style: italic;
-  opacity: 0.7; 
+  opacity: 0.9; 
   display: flex;
-  align-items: center;
   gap: 0.5rem;
+  .service-icon {
+    border-radius: var(--curve-md);
+    margin-top: 1rem;
+  }
+  h4 {
+    margin-bottom: 0;
+  }
+  ul {
+    padding-left: 1rem;
+    list-style: circle;
+    font-style: normal;
+    font-size: 1rem;
+    margin-top: 0;
+    b {
+      font-size: 1rem;
+      font-weight: 400;
+      min-width: 85px;
+      display: inline-block;
+    }
+  }
 }
 
 .pagination-navigation {
@@ -343,4 +439,51 @@ h3 {
   }
 }
 
+.highlights {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: end;
+
+  .meta-item, .warning {
+    display: flex;
+    align-items: center;
+    // justify-content: center;
+    gap: 0.25rem;
+    opacity: 0.6;
+    font-size: 0.9rem;
+    padding: 0.5rem 0;
+    :global(svg) {
+      color: var(--foreground);
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+    a {
+      text-decoration: none;
+      color: var(--foreground);
+      display: flex;
+      gap: 0.25rem;
+      &:hover {
+        color: var(--accent-3);
+        :global(svg) {
+          color: var(--accent-3);
+        }
+      }
+    }
+  }
+  .warning {
+    color: var(--danger);
+    :global(svg) {
+      color: var(--danger);
+    }
+  }
+  .great {
+    color: #007930; // var(--success);
+    :global(svg) {
+      color: #007930; // var(--success);
+    }
+  }
+}
+
 </style>
diff --git a/web/src/utils/fetch-privacy-policy.ts b/web/src/utils/fetch-privacy-policy.ts
index 9b1cc29..2cff5a1 100644
--- a/web/src/utils/fetch-privacy-policy.ts
+++ b/web/src/utils/fetch-privacy-policy.ts
@@ -1,6 +1,6 @@
 
 export const fetchTosdrPrivacy = async (serviceId: string): Promise<PrivacyPolicyResponse | null> => {
-  const endpoint = `https://api.tosdr.org/service/v2?id=${serviceId}`;
+  const endpoint = `https://privacy-policies.as93.workers.dev/${serviceId}`;
   try {
     return await fetch(endpoint).then((res) => res.json());
   } catch (error) {