awesome-privacy/web/src/pages/all.astro

---


import Layout from '@layouts/Layout.astro';
import ServiceCard from '@components/things/ServiceCard.astro';
import type { AwesomePrivacy, Section, Service } from '../types/Service';
import { fetchData, slugify } from '@utils/fetch-data';
import FontAwesome from '@components/form/FontAwesome.svelte';

const categories = (await fetchData() as AwesomePrivacy)?.categories || [];

---

<script>

const toggleSidebar = () => {
  const intro = document.querySelector('#welcome-to-all');
  const sidebar = document.querySelector('.sidebar');
  sidebar && sidebar.classList.toggle('hidden');
  intro && intro.classList.toggle('hidden');
  const button = document.querySelector('#toggle-sidebar');
  if (button) {
    button.textContent = (button.textContent === "Show Contents" ? "Hide Contents" : "Show Contents");
  }
};

  const tgt = document.querySelector("#toggle-sidebar");
  tgt && tgt.addEventListener("click", () => {
    toggleSidebar();
  });
</script>

<Layout title="Awesome Privacy">
    <main>
    <div id="content">
    <button id="toggle-sidebar">Show Contents</button>
    <div id="welcome-to-all" class="hidden">
      <p>
        Welcome to <a href="/">Awesome Privacy</a>!
        Here you'll find a summerized collection of all verified services we have listed.
        <br /><br />
        Click a section or category heading, to view more listings and privacy tips in that group,
        or a service title to view it's complete privacy report
        <br /><br />
        Looking for something specific? Try the <a href="/search">Search</a> page, or take a
        scroll through the <a href="/sitemap">Sitemap</a>
        <br /><br />
        If you want to make an edit, removal or submit an addition, then either click
        the Edit button within any sub-page, or visit our <a href="/about">About</a> page
        <br /><br />
        This project, all it's data as well as source code is freely availible
        on <a href="https://github.com/lissy93/awesome-privacy">GitHub</a>,
        licensed under MIT, (C) <a href="https://aliciasykes.com">Alicia Sykes</a> 2024
      </p>
    </div>
    <div class="sidebar hidden">
      <p class="sidebar-title">Contents</p>
      <ul>
        {categories.map((category) => (
          <li class="top-level">
            <a href={`#${slugify(category.name)}`}>{category.name}</a>  
          </li>
          <li>
            <ul>
              {category.sections.map((section: Section) => (
                <li>
                  <a href={`#${slugify(category.name)}-${slugify(section.name)}`}>{section.name}</a>
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </div>
    {categories.map((category) => (
      <h2  id={`${slugify(category.name)}`}>
        <FontAwesome iconName={slugify(category.name)} />
        <a href={`/${slugify(category.name)}`}>{category.name}</a>
      </h2>
      
        <article>
          {category.sections.map((section: Section) => (
            <h3 id={`${slugify(category.name)}-${slugify(section.name)}`}>
              <a href={`/${slugify(category.name)}/${slugify(section.name)}`}>{section.name}</a>
            </h3>
            <section class="section">
              { section.services.map((service: Service) => (
                <ServiceCard service={service} sectionName={section.name} categoryName={category.name}/>
              ))}
            </section>
            <div>
              {!section || !section.services || section.services.length === 0 ? (
                <div class="nothing-yet">
                  <p>
                    <strong>⚠️ This section is still a work in progress ⚠️</strong><br />
                    Check back soon, or help us complete it by submiting a pull request on GitHub.
                    <br />
                    <span class="quick-submit">Or submit an entry <a href="/submit">here</a></span>
                  </p>
                </div>
              ) : null}
            </div>
          ))}
        </article>
      
    ))}
    </div>
  </main>
  
</Layout>

<style lang="scss">

main {
  margin: 0 auto 2rem auto;
  padding: 1rem;
  width: 1200px;
  max-width: calc(100% - 5rem);

  display: flex;
  justify-content: space-between;
}

.hidden {
  display: none;
}

#content {
  margin: 0 auto;
}

#welcome-to-all {
  text-align: justify;
  width: 600px;
  margin: 0 auto;
  background: var(--background-form);
  padding: 1rem;
  border-radius: var(--curve-sm);
}

#toggle-sidebar {
  // float: right;
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  &:hover {
    text-decoration: underline;
  }
}


.sidebar {
  border-radius: var(--curve-md);
  .sidebar-title {
    font-size: 1.6rem;
    background: var(--accent-3);
    color: var(--accent-fg);
    border: 2px solid var(--box-outline);
    box-shadow: 6px 6px 0 var(--box-outline);
    border-radius: var(--curve-sm);
    margin: 1rem auto;
    text-align: center;
  }
  ul {
    list-style: none;
    padding-left: 1.6rem;
    column-width: 16rem;
    a {
      text-decoration: none;
      color: var(--foreground);
      transition: all 0.18s ease-in-out;
      &:hover {
        color: var(--accent);
        opacity: 1;
      }
    }
    li ul {
      list-style: circle;
    }
    .top-level {
      font-weight: bold;
      margin-top: 0.5rem;
      &:hover a {
        color: var(--accent-3);
      }
    }
  } 
}

.section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  width: 100%;
  margin: 0 auto;
}

.card {
  margin: 2rem auto 5rem auto;
  padding: 0 2rem;
  border: 2px solid var(--box-outline);
  box-shadow: 6px 6px 0 var(--box-outline);
  background: var(--accent-fg);
}

h2 {
  margin: 2rem auto 0 auto;
  font-size: 3rem;
  text-align: center;
  opacity: 0.6;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  a {
    color: var(--accent-3);
    text-decoration: none;
  }
  :global(svg) {
    width: 3rem;
    height: 3rem;
    color: var(--accent-3);
  }
}

h3 {
    font-size: 2rem;
    margin: 2rem 0 1rem 0;
    box-shadow: 6px 6px 0 var(--box-outline);
    background: var(--accent);
    color: var(--accent-fg);
    width: fit-content;
    padding: 0.25rem 0.5rem;
    a {
      color: var(--accent-fg);
      font-family: "Lekton", sans-serif;
      text-decoration: none;
    }
  }

  .nothing-yet {
    width: 100%;
    margin: 0 auto;
    background: var(--accent-fg);
    border: 2px solid var(--box-outline);
    box-shadow: 6px 6px 0 var(--box-outline);
    border-radius: var(--curve-sm);
    display: flex;

    p {
      font-size: 1.2rem;
      opacity: 0.8;
      font-style: italic;
      text-align: center;
      margin: 4rem auto;
    }
    .quick-submit {
      margin-top: 1rem;
      font-size: 0.8rem;
      opacity: 0.8;
    }
  }


</style>