Updates service lists props, adds new route for viewing listing

web/src/components/form/Button.astro

@@ -1,10 +1,14 @@
 ---
 
-const { text, url } = Astro.props;
+const {
+  text,
+  url,
+  className,
+} = Astro.props;
 
 ---
 
-<div class="button">
+<div class={`button ${className || ''}`}>
   <a href={url}>{text}<slot /></a>
 </div>
 

web/src/components/form/FontAwesome.svelte

@@ -18,6 +18,17 @@
     owner: solidIcons.faUser,
     language: solidIcons.faFileCode,
 
+    download: solidIcons.faDownload,
+    faceGood: solidIcons.faSmile,
+    faceMeh: solidIcons.faMeh,
+    faceBad: solidIcons.faFrown,
+
+    // Website Detailed Stats
+    blacklistFound: solidIcons.faDoNotEnter,
+    blacklistNotFound: solidIcons.faShieldCheck,
+    redirectFound: solidIcons.faDiamondTurnRight,
+    redirectNotFound: solidIcons.faSquareCheck,
+
     // Meta info icons
     openSource: brands.faOsi,
     closedSource: solidIcons.faHexagonExclamation,

web/src/components/scafold/MainCard.astro

@@ -13,5 +13,6 @@
 		border: 2px solid var(--foreground);
     box-shadow: 6px 6px 0 var(--foreground);
 		background: var(--accent-fg);
+		position: relative;
 	}	
 </style>

web/src/components/things/Comments.svelte

@@ -1,23 +1,19 @@
 <svelte:head>
   <script async lang="javascript">
-    var remark_config = {
-      host: "https://comments.as93.net",
-      site_id: "awesome-privacy",
-      components: ["embed"],
-      show_rss_subsription: true,
-      theme: "dark",
-    };
-    !(function (e, n) {
-      for (var o = 0; o < e.length; o++) {
-        var r = n.createElement("script"),
-          c = ".js",
-          d = n.head || n.body;
-        "noModule" in r ? ((r.type = "module"), (c = ".mjs")) : (r.async = !0),
-          (r.defer = !0),
-          (r.src = remark_config.host + "/web/" + e[o] + c),
-          d.appendChild(r);
-      }
-    })(remark_config.components || ["embed"], document);
+  var remark_config = {
+    host: 'https://comments.as93.net', site_id: 'awesome-privacy.xyz',
+    components: ['embed'], show_rss_subsription: true, theme: 'light',
+  };
+  !(function (e, n) {
+    for (var o = 0; o < e.length; o++) {
+      var r = n.createElement('script'), d = n.head || n.body;
+      'noModule' in r ?
+        (r.type = 'module', r.src = remark_config.host + '/web/' + e[o] + '.mjs')
+      : ( r.async = !0, r.defer = !0, r.src = remark_config.host + '/web/' + e[o] + '.js'),
+      d.appendChild(r);
+    }
+  })(remark_config.components || ['embed'], document);
+
   </script>
 </svelte:head>
 

web/src/components/things/Search.svelte

@@ -23,7 +23,7 @@
     if (!cat) return '/'
     if (!sec) return `/${slugify(cat)}`
     if (!itm) return `/${slugify(cat)}/${slugify(sec)}`
-    return `/${slugify(cat)}/${slugify(sec)}#${slugify(itm)}`;
+    return `/${slugify(cat)}/${slugify(sec)}/${slugify(itm)}`;
   };
 
   const makeResultText = (cat?: string, sec?: string, itm?: string) => {

web/src/components/things/ServiceList.astro

@@ -8,7 +8,23 @@ import { slugify } from '@utils/fetch-data';
 
 import GitHubMetrics from '@components/things/ItemGitHubMetrics.astro';
 
-const { services, subHeading, buttonLink, noGitHubMetrics } = Astro.props;
+interface Props {
+  services: Service[];
+  subHeading?: boolean;
+  buttonLink?: string;
+  noGitHubMetrics?: boolean;
+  sectionName: string;
+  categoryName: string;
+}
+
+const {
+  services,
+  subHeading,
+  buttonLink,
+  noGitHubMetrics,
+  sectionName,
+  categoryName,
+} = Astro.props;
 
 ---
 
@@ -36,6 +52,9 @@ const { services, subHeading, buttonLink, noGitHubMetrics } = Astro.props;
     <ul>
     {services.map((service: Service) => (
       <li id={slugify(service.name)}>
+        <div class="actions">
+        
+          </div>
         <div class="service-head">
           <img 
             width="40"
@@ -89,6 +108,9 @@ const { services, subHeading, buttonLink, noGitHubMetrics } = Astro.props;
                 </a>
               </span>
             ) }
+            <div class="view-service">
+              <a href={`/${slugify(categoryName)}/${slugify(sectionName)}/${slugify(service.name)}`}>View {service.name} Report</a>
+            </div>
           </div>
         </div>
       </li>
@@ -101,7 +123,7 @@ const { services, subHeading, buttonLink, noGitHubMetrics } = Astro.props;
     </p>
   )}
 
-  {buttonLink && ( <Button text="View More..." url={buttonLink} /> )}
+  {buttonLink && ( <Button className="view-all" text="View More..." url={buttonLink} /> )}
 </section>
 
 
@@ -217,7 +239,18 @@ const { services, subHeading, buttonLink, noGitHubMetrics } = Astro.props;
     }
   }
 
-section :global(.button) {
+.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;
   position: absolute;
   right: 1rem;

web/src/components/things/SmartSuggestions.svelte

@@ -28,7 +28,7 @@
       (category.sections || []).forEach((section) => {
         (section.services || []).forEach((service) => {
           if (fetchedServices.includes(normalize(service.name))) {
-            const path = `/${slugify(category.name)}/${slugify(section.name)}#${slugify(service.name)}`
+            const path = `/${slugify(category.name)}/${slugify(section.name)}/${slugify(service.name)}`
             tmpResults.push({ ...service, path });
             return;
           }

web/src/layouts/Layout.astro

@@ -57,7 +57,7 @@ const {
 		<meta name="twitter:image" content="/banner.png">
 
 		<!-- Non-tracking hit counter -->
-		<script defer
+		<script defer is:inline
 			type="text/partytown"
 			data-domain="awesome-privacy.xyz"
 			src="https://no-track.as93.net/js/script.js">

web/src/pages/[...listing].astro

@@ -0,0 +1,352 @@
+---
+
+import Layout from '@layouts/Layout.astro';
+import Button from '@components/form/Button.astro';
+import Main from '@components/scafold/MainCard.astro';
+import ServiceList from '@components/things/ServiceList.astro';
+import Comments from '@components/things/Comments.svelte';
+import GitHubDetailedInfo from '@components/things/GitHubDetailedInfo.astro';
+import PrivacyPolicyDetails from '@components/things/PrivacyPolicyDetails.astro';
+import WebsiteDetailedInfo from '@components/things/WebsiteDetailedInfo.astro';
+import type { AwesomePrivacy, Section, Service } from '../types/Service';
+import { fetchData, slugify } from '@utils/fetch-data';
+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';
+
+interface Props extends Service {
+  slug: string;
+  parentSection: Section;
+  categoryName: string;
+}
+
+const {
+  name,
+  description,
+  url,
+  github,
+  tosdrId,
+  icon,
+  followWith,
+  securityAudited,
+  openSource,
+  acceptsCrypto,
+  parentSection,
+  categoryName,
+} = Astro.props;
+
+
+/**
+ * Make a list of keywords, for the <meta keywords> tag
+ */
+const makeKeyWordTag = () => {
+  const keywords = [];
+  // keywords.push(`free and open source ${title} software`);
+  // keywords.push(`private ${title} comparison`);
+  // (alternativeTo || []).forEach((alt: string) => {
+  //   keywords.push(`privacy-respecting ${alt} alternative`);
+  //   keywords.push(`free open source ${alt} alternative`);
+  // });
+  // (services || []).forEach((serv: Service) => {
+  //   keywords.push(serv.name);
+  // });
+  // keywords.push('ad free');
+  // keywords.push('open source software');
+  // keywords.push('privacy respecting apps');
+  return keywords.join(', ');
+};
+
+/**
+ * Make a page title
+ */
+const makePageTitle = () => {
+  return `${name} | ${parentSection.name} | ${categoryName} | Awesome Privacy`;
+};
+
+/**
+ * Make a string page intro, for the description tag
+ */
+const makeDescriptionTag = () => {
+  let description = `A list of privacy respecting ${name}. `;
+  // if (services && services.length > 0) {
+  //   const serviceList = services.map((serv: Service) => serv.name);
+  //   description += `Compare ${serviceList.join(', ')} and more private apps and services. `
+  // } else {
+  //   description += `Find private apps and services. This section is still a work in progress. `;
+  // }
+  // description += 'All this, and much more at Awesome Privacy, '
+  // description += 'the free and open source list of private software alternatives.';
+  return description;
+};
+
+// Return a list of Services, except for the currtent one
+const filterServices = () => {
+  return parentSection.services.filter((service: Service) => service.name !== name);
+};
+
+export async function getStaticPaths() {
+  const pages = await fetchData().then((data) => {
+    const results: Array<Props> = [];
+    if (!data || !data.categories) return results;
+    (data as AwesomePrivacy).categories.forEach((category) => {
+      category.sections.forEach((section) => {
+        const services = (section.services || []).map((service) => {
+          return {
+            slug: `${slugify(category.name)}/${slugify(section.name)}/${slugify(service.name)}`,
+            parentSection: section,
+            categoryName: category.name,
+            ...service,
+          };
+        });
+        results.push(...services);
+      });
+      
+    });
+    return results;
+  });
+
+  return pages.map((props: Props) => {
+    return {params: { listing: props.slug }, props };
+  });
+}
+
+// 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 { previous, next } = makePaginationLinks();
+
+
+// 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;
+
+---
+
+<Layout title={makePageTitle()} keywords={makeKeyWordTag()} description={makeDescriptionTag()} >
+  <main>
+    <section>
+      <div class="service-head">
+        <h2>{name}</h2>
+        <span class="url-wrap">
+          <a class="service-url" href={url}>{formatLink(url)}</a>
+          <span class="follow-with">{followWith}</span>
+        </span>
+      </div>
+      <div class="breadcrumbs">
+        <span>
+          <a href="/">Awesome Privacy</a>
+          ➔ <a href={`/${slugify(categoryName)}`}>{categoryName}</a>
+          ➔ <a href={`/${slugify(categoryName)}/${slugify(parentSection.name)}`}>{parentSection.name}</a>
+          ➔ <a href={`/${slugify(categoryName)}/${slugify(parentSection.name)}/${slugify(name)}`}>{name}</a>
+        </span>
+      </div>     
+      <div class="intro">
+        <img 
+          width="60"
+          height="60"
+          loading="lazy"
+          decoding="async"
+          class="service-icon"
+          alt={`${name} Icon`}
+          data-service-url={formatLink(url)}
+          src={icon || `https://icon.horse/icon/${formatLink(url)}`}
+        />
+        <p class="description" set:html={parseMarkdown(description)}></p>
+      </div>
+    </section>
+    { privacyData && (
+      <section>
+        <h3>{name} Privacy Policy</h3>
+        <PrivacyPolicyDetails privacyData={privacyData} />
+      </section>
+    )}
+    { github && githubData && (
+      <section class="github-wrap">
+        <h3>{name} Source Code</h3>
+        <GitHubDetailedInfo gitHubData={githubData} repo={github} />
+      </section>
+    )}
+
+    { websiteData && (
+      <section>
+        <h3>{name} Website</h3>
+        <WebsiteDetailedInfo url={url} websiteInfo={websiteData} />
+      </section>
+    )}
+    <section>
+      <h3>{name} Reviews</h3>
+      <Comments client:visible />
+    </section>
+    <section>
+      <h3>More {parentSection.name}</h3>
+      <ServiceList
+        services={filterServices()}
+        subHeading={true}
+        noGitHubMetrics={true}
+        buttonLink={`/${slugify(categoryName)}/${slugify(parentSection.name)}`}
+        categoryName={categoryName}
+        sectionName={parentSection.name}
+      />
+    </section>
+  </main>
+</Layout>
+
+<style lang="scss">
+
+main {
+  margin: 2rem auto;
+  padding: 1rem;
+  width: 1000px;
+  max-width: calc(100% - 5rem);
+  position: relative;
+}	
+
+section {
+  margin: 1rem 0 4rem 0;
+  padding: 1rem;
+  min-height: 8rem;
+  position: relative;
+  border: 2px solid var(--foreground);
+  box-shadow: 6px 6px 0 var(--foreground);
+  background: var(--accent-fg);
+
+}
+
+h3 {
+    font-size: 2rem;
+    margin: -2rem 0 1rem -2rem;
+    box-shadow: 6px 6px 0 var(--foreground);
+    background: var(--accent);
+    color: var(--accent-fg);
+    width: fit-content;
+    padding: 0.25rem 0.5rem;
+  }
+
+.service-head {
+  h2 {
+    font-size: 3rem;
+    margin: 0;
+  }
+  .url-wrap {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    a {
+      font-size: 1.2rem;
+    }
+    .follow-with {
+      font-style: italic;
+      opacity: 0.6;
+    }
+  }
+  
+}
+
+.breadcrumbs {
+  opacity: 0.5;
+  font-size: 0.8rem;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  a {
+    color: var(--foreground);
+    transition: all 0.15s ease-in-out;
+    
+    &:hover {
+      color: var(--accent);
+    }
+  }
+}
+
+.intro {
+  font-size: 1.2rem;
+  font-style: italic;
+  opacity: 0.7; 
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.pagination-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  :global(.button) {
+    min-width: 120px;
+    width: fit-content;
+    padding: 0.25rem 1rem;
+    text-align: right;
+    &:first-child { text-align: left; }
+    p {
+      margin: 0;
+      font-weight: normal;
+      font-size: 1rem;
+    }
+    span {
+      font-size: 0.8rem;
+    }
+    
+  }
+  .nothing {
+    width: 120px;
+  }
+  .go-to-category {
+    color: var(--foreground);
+    font-size: 0.8rem;
+    opacity: 0.5;
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+}
+
+
+
+.further-info, .notable-mentions, .word-of-warning {
+  h3 {
+    font-size: 1.4rem;
+    margin: 1rem 0;
+  }
+  :global(p) {
+    font-size: 0.9rem;
+    opacity: 0.7; 
+    :global(strong) {
+      font-weight: 500;
+    }
+    :global(a) {
+      color: var(--foreground);
+      transition: all 0.15s ease-in-out;
+      &:hover {
+        color: var(--accent);
+      }
+    }
+  }
+  :global(strong) {
+    font-weight: 500;
+  }
+  :global(h4) {
+    font-size: 1.2rem;
+    margin: 0.5rem 0 0 0;
+  }
+  :global(ul) {
+    list-style: circle;
+    padding-left: 1rem;
+    font-size: 0.9rem;
+    opacity: 0.7;
+    li {
+      margin-bottom: 0.25rem;
+      :global(p) {
+        display: inline;
+      }
+    }
+  }
+}
+
+</style>

web/src/pages/[...section].astro

@@ -119,7 +119,7 @@ const { previous, next } = makePaginationLinks();
       </section>
     )}
 
-    <ServiceList title={title} services={services} />
+    <ServiceList services={services} sectionName={title} categoryName={categoryName} />
 
     {notableMentions && (
       <section class="notable-mentions">

web/src/pages/about.astro

@@ -82,7 +82,7 @@ const projects = [
 	{
 		title: 'Web-Check',
 		description: 'OSINT tool for analysing any website',
-		icon: 'https://icon.horse/icon/web-check.xyz',
+		icon: 'https://web-check.as93.net/web-check.png',
 		link: 'https://github.com/lissy93/web-check',
 	},
 	{
@@ -156,7 +156,7 @@ const description = 'Privacy is a fundamental human right; '
 <Layout title="About | Awesome Privacy" description={description}>
 	<div class="about-page">
 	<Main>
-		<h2>Objective</h2>
+		<h2 id="objective">Objective</h2>
 		<p>
 			Large data-hungry corporations dominate the digital world but with little,
 			or no respect for your privacy.
@@ -172,11 +172,11 @@ const description = 'Privacy is a fundamental human right; '
 		</p>
 		<hr />
 
-		<h2>Software Requirements</h2>
+		<h2 id="creteria">Software Requirements</h2>
 		<div class="software-requirements"><p set:html={parseMarkdown(projectRequrements)}></p></div>
 		<hr />
 
-		<h2>Contributing</h2>
+		<h2 id="contributing">Contributing</h2>
 		<p>
 			Awesome Privacy (including all data and code) is fully open source,
 			maintained by a core group of volenteers, with a lot of help from the community.
@@ -193,8 +193,8 @@ const description = 'Privacy is a fundamental human right; '
 		</p>
 		<hr />
 
-		<h2>Credits</h2>
-		<h3>Sponsors</h3>
+		<h2 id="acknowledgements">Acknowledgements</h2>
+		<h3 id="sponsors">Sponsors</h3>
 		<p>Huge thanks to the following sponsors, for their ongoing support 💖</p>
 		<div class="user-list">
 			{sponsorsResource().then((sponsors) => {
@@ -207,7 +207,7 @@ const description = 'Privacy is a fundamental human right; '
 			})}
 		</div>
 
-		<h3>Contributors</h3>
+		<h3 id="contributors">Contributors</h3>
 		<p>
 			This project exists thanks to all the people who've helped build and maintain it.<br />
 			Special thanks to the below, top-100 contributors 🌟
@@ -225,7 +225,7 @@ const description = 'Privacy is a fundamental human right; '
 
 		<hr />
 
-		<h2>Author</h2>
+		<h2 id="author">Author</h2>
 		<article class="author">
 				<p>
 					This project was originally started by
@@ -283,7 +283,7 @@ const description = 'Privacy is a fundamental human right; '
 		
 		<hr />
 
-		<h2>License</h2>
+		<h2 id="license">License</h2>
 		<p>
 			All content on Awesome Privacy is freely available, within the public domain,
 			licensed under Creative Commons Zero v1.0 Universal.
@@ -376,6 +376,8 @@ h3 {
   padding: 0.5rem;
   font-size: 0.7rem;
   font-family: mono;
+	max-width: 100vw;
+	white-space: pre-line;
 }
 
 .author {

web/src/pages/all.astro

@@ -47,11 +47,12 @@ const toggleSidebar = () => {
                 <a href={`/${slugify(category.name)}/${slugify(section.name)}`}>{section.name}</a>
               </h3>
               <ServiceList
-                title={section.name}
                 services={section.services}
                 subHeading={true}
                 buttonLink={`/${slugify(category.name)}/${slugify(section.name)}`}
                 noGitHubMetrics={true}
+                sectionName={section.name}
+                categoryName={category.name}
               />
             </section>
           ))}

web/src/pages/search/index.astro

@@ -13,6 +13,7 @@ const categories = (await fetchData())?.categories;
   <section>
     <h1>Search</h1>
     <Search client:visible data={categories} />
+    <p class="sitemap-link">Or, view all pages in the <a href="/sitemap">Sitemap</a></p>
   </section>
 </Layout>
 
@@ -40,5 +41,15 @@ section {
 		text-align: center;
 		margin: 1rem 0;
   }
+  .sitemap-link {
+    opacity: 0.6;
+    text-align: center;
+    font-size: 0.8rem;
+    margin: 2rem auto;
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 }
 </style>

web/src/styles/values.css

@@ -14,4 +14,6 @@
 
   --danger: #ff0048;
   --success: #00ff64;
+
+  --transparent-accent: #5f53f482;
 }

web/src/types/Service.ts

@@ -16,6 +16,7 @@ export interface Service {
   securityAudited?: boolean;
   openSource?: boolean;
   acceptsCrypto?: boolean;
+  tosdrId?: string;
 }
 
 export interface Section {

web/src/utils/fetch-data.ts

@@ -13,5 +13,5 @@ export const fetchData = async (): Promise<AwesomePrivacy> => {
 }
 
 export const slugify = (title: string) => {
-  return title.toLowerCase().replace(/\s/g, '-');
+  return (title || '').toLowerCase().replace(/\s/g, '-');
 };