awesome-privacy/web/src/pages/about.astro
2024-04-17 21:10:08 +01:00

359 lines
9.4 KiB
Text

---
import Layout from '@layouts/Layout.astro';
import Main from '@components/scafold/MainCard.astro';
import Icon from '@components/form/Icon.astro';
import SocialShare from '@components/form/Social.astro';
import { parseMarkdown } from '@utils/parse-markdown';
import { authorProjects, authorSocials, aboutOurData, projectRequirements, appDescription } from '../site-config';
const contributorsResource = async () => {
const url = 'https://api.github.com/repos/lissy93/personal-security-checklist/contributors?per_page=100';
const response = await fetch(url);
if (!response.ok) {
throw new Error('Failed to fetch contributors');
}
return await response.json();
};
const sponsorsResource = async () => {
const url = 'https://github-sponsors.as93.workers.dev/lissy93';
const response = await fetch(url);
if (!response.ok) {
throw new Error('Failed to fetch sponsors');
}
return await response.json();
};
const licenseContent = async () => {
const url = 'https://raw.githubusercontent.com/Lissy93/awesome-privacy/HEAD/LICENSE';
const response = await fetch(url);
if (!response.ok) {
throw new Error('Failed to fetch license');
}
return await response.text();
};
---
<Layout title="About | Awesome Privacy" description={appDescription}>
<div class="about-page">
<Main>
<h2 id="objective">Objective</h2>
<p>
Large data-hungry corporations dominate the digital world but with little,
or no respect for your privacy.
We believe that privacy is a fundamental human right and that it should be protected.
<br /><br />
Migrating to open-source applications and those with a strong emphasis on
privacy & security will help safegaurd you from corporations,
governments, and hackers who log, store or sell your sensetive personal data.
<br /><br />
Awesome Privacy is a directory of alternative software which respects your privacy.
<br /><br />
</p>
<hr />
<h2 id="creteria">Software Requirements</h2>
<div class="software-requirements"><p set:html={parseMarkdown(projectRequirements)}></p></div>
<hr />
<h2 id="our-data">Our Data</h2>
<div class="about-the-data"><p set:html={parseMarkdown(aboutOurData)}></p></div>
<hr />
<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.
<br /><br />
We welcome suggestions, additions, edits and removals to the list.<br />
It's thanks to contributors like you that this project is possible 💜
<br /><br />
To get started, head over to our <a href="https://github.com/lissy93/awesome-privacy">GitHub repository</a>.
From here, you'll be able to edit <a href="#"><code>awesome-privacy.yml</code></a>
where all data is stored, and then submit your changes as a pull request.
<br /><br />
If you're new to open source, you can find some resources to get you started
at <a href="https://git-in.to">git-in.to</a>, but feel free to reach out if you need any help 😊
</p>
<hr />
<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) => {
return sponsors.map((sponsor: any) => (
<a class="user" href={`https://github.com/${sponsor.login}`} target="_blank" rel="noreferrer">
<img src={sponsor.avatarUrl} alt={sponsor.login} />
<p>{sponsor.name || sponsor.login}</p>
</a>
));
})}
</div>
<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 🌟
</p>
<div class="user-list">
{contributorsResource().then((sponsors) => {
return sponsors.map((sponsor: any) => (
<a class="user" href={sponsor.html_url} target="_blank" rel="noreferrer">
<img src={sponsor.avatar_url} alt={sponsor.login} />
<p>{sponsor.login}</p>
</a>
));
})}
</div>
<hr />
<h2 id="support-us">Help us out</h2>
<p>
Awesome Privacy is a free, open source and community-maintained resource.<br />
There's a few ways you can support us:
<ul class="help-list">
<li>Visiting, forking, or starring or our <a href="https://github.com/lissy93/awesome-privacy">GitHub repository</a></li>
<li>Help us keep our info up-to-date, but submitting an addition, removal or ammendment</li>
<li>Leave feedback on services that you've used, to help others make a more informed decission</li>
<li>Consider <a href="https://github.com/sponsors/Lissy93">sponsoring us on GitHub</a>, if you're able 💖</li>
<li>Share Awesome Privacy with your network</li>
</ul>
<SocialShare />
</p>
<hr />
<h2 id="author">Author</h2>
<article class="author">
<p>
This project was originally started by
me, <a href="https://aliciasykes.com">Alicia Sykes</a>
(with a lot of help from the community)
</p>
<br />
<p class="about">
I build apps which aim to help people escape big tech, secure their data,
and protect their privacy.
</p>
<br />
<div class="pic-and-socials">
<a href="https://aliciasykes.com">
<img class="pic" width="180" height="240" alt="Alicia Sykes" src="https://i.ibb.co/fq10qhL/DSC-0597.jpg" />
</a>
<div class="socials">
{
authorSocials.map((social: { link: string; color: string; icon: string; }) => (
<a href={social.link} style={`--color: ${social.color}`} target="_blank">
<Icon icon={social.icon} width={24} height={24} />
</a>
))
}
</div>
</div>
<p class="more-about">
I have a particular interest in self-hosting, Linux, security and OSINT.<br />
So if this type of stuff interests you, check out these other projects:
</p>
<ul>
{
authorProjects.map((project: { title: string; icon: string; link: string; description: string; }) => (
<li>
<img width="20" height="20" alt={project.title} src={project.icon} />
<a href={project.link} target="_blank" rel="noreferrer">
{project.title}
</a> - {project.description}
</li>
))
}
<li>
...and loads more, over at <a href="https://apps.aliciasykes.com/">apps.aliciasykes.com</a>
and on <a href="https://github.com/lissy93">github.com/lissy93</a>
</li>
</ul>
<br />
<p>
If you'd like to support the ongoing work on Awesome Privacy,
and other similar projects,
consider <a href="https://github.com/sponsors/lissy93">sponsoring me</a> on GitHub 💖
</p>
</article>
<hr />
<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.
The code for the website is licensed under MIT.
</p>
<p>
{licenseContent().then((license) => {
return (<pre class="license-content">{license}</pre>)
})}
</p>
</Main>
</div>
</Layout>
<style lang="scss">
h2 {
font-size: 2rem;
margin: 2rem 0 1rem 0;
}
p {
font-size: 1.2rem;
}
hr {
margin: 2rem 0;
border: 0;
border-top: 2px solid var(--accent);
&:nth-child(6) {
border-color: var(--accent-3);
}
&:nth-child(9) {
border-color: var(--accent-2);
}
}
h3 {
font-size: 1.6rem;
}
.software-requirements, .about-the-data {
:global(p) {
font-size: 1.2rem;
margin: 0 0 0.5rem 0;
}
:global(ul) {
padding-left: 0.5rem;
list-style: none;
font-size: 1.2rem;
:global(li ul) {
padding: 0 0 0.5rem 1rem;
list-style: circle;
}
}
:global(h3) {
font-size: 1.6rem;
margin-bottom: 0;
}
:global(strong) {
font-weight: 500;
}
:global(small) {
font-size: 0.8rem;
opacity: 0.7;
:global(a) {
color: var(--accent-3);
}
}
:global(code) {
font-family: 'Courier New', Courier, monospace;
background: #acabb782;
padding: 0.2rem 0.4rem;
border-radius: var(--curve-sm);
font-size: 0.9rem;
}
}
.user-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 2rem 0;
.user {
width: 6rem;
overflow: hidden;
text-align: center;
img {
width: 5rem;
height: 5rem;
border-radius: var(--curve-md);
}
p {
font-size: 1rem;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
.license-content {
max-height: 500px;
overflow: scroll;
background: var(--background-form);
width: fit-content;
border-radius: var(--curve-sm);
padding: 0.5rem;
font-size: 0.7rem;
font-family: mono;
max-width: 100vw;
white-space: pre-line;
}
.help-list {
padding-left: 1rem;
list-style: circle;
font-size: 1.1rem;
}
.author {
p {
margin: 1rem 0 0 0;
}
ul {
padding-left: 1.5rem;
list-style: circle;
margin-bottom: 0;
li {
font-size: 1.1rem;
}
}
.about {
font-size: 1.4rem;
font-style: italic;
font-weight: 300;
color: var(--accent-3);
text-align: center;
max-width: 550px;
margin: 0 auto;
}
small {
font-size: 1rem;
margin: 1rem 0;
}
.pic-and-socials {
float:right;
img {
margin: 0.5rem 1rem;
border-radius: var(--curve-md);
border: 2px solid var(--box-outline);
box-shadow: 4px 4px 0 var(--box-outline);
}
.socials {
display: flex;
margin: 0.5rem 1rem;
justify-content: space-between;
:global(a svg) {
color: var(--foreground);
transition: color 0.2s ease-in-out;
&:hover {
color: var(--color);
}
}
}
}
}
</style>