---

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';

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();
};

const aboutOurData = `
All data is stored in 
[\`awesome-privacy.yml\`](https://github.com/lissy93/awesome-privacy/blob/main/awesome-privacy.yml).

This file is then pulled into the website at build-time, and also used to generate
the repositories README file.
We use this method in the interest of transparency and data integrity,
as Git makes it possible to maintain a full log of what was changed, when, by who and why.

### Augmention
The data is augmented with some extra info, to add additional context to each service.
The aim of this is to give you a broader picture of each listing, to help you make a more informed decision.
Currently, this extra data is pulled from:

- **Privacy Policy** - To fetch a summerized version of each services Privacy Policy
	- Including policy and terms of service links, postives + negatives and privacy score
	- Via [ToS;DR](https://tosdr.org/)
- **GitHub** - To fetch info about each project's source code
	- Including author & contributors, creation & last updated date, languages, license and star count
	- Via the [GitHub API](https://developer.github.com/v3/)
- **Android App** - To fetch privacy info about each project's Android app
	- Including permissions, trackers, privacy score and metdata
	- Via [Exodus Privacy](https://exodus-privacy.eu.org/)
- **iOS App** - To fetch info about each project's iOS app
	- Including app size, rating, publish/update date, author and screenshots
	- Via [Apple App Store](https://developer.apple.com/documentation/appstoreconnectapi/app_store)
- **Docker** - To fetch info about each project's Docker image (if it's self-hosted)
	- Including supported architectures, run command, pull count, last updated and config options
	- Via [Portainer-Templates](https://portainer-templates.as93.net/) and the [Docker Hub](https://hub.docker.com/) API
- **Website** - To fetch privacy info about each project's website
	- Including SSL chain, WHOIS, server location, blacklist check and a screenshot
	- Via [Web-Check](https://web-check.xyz/)
- **Socials** - To fetch info about each project's social media presence
	- Including follower count, post frequency, engagement and a screenshot
	- Via the Reddit, Discord and Twitter APIs
- **User Reviews** - User-submitted comments + feedback on a given service
	- Implemented using self-hosted instance of Remark42

### API
We also have a free, no-auth, CORS-enabled RESR API,
which you can use to access Awesome Privacy's data programmatically,
or to build your own apps on top of it.

The [Swagger Spec](api) outlines all endpoints, usage and examples.

Use our public instance, at: \`https://api.awesome-privacy.xyz\` or [self-host your own](https://github.com/Lissy93/awesome-privacy/tree/main/api)
`;

const projectRequrements = `
For software to be included in this list, it must meet the following requirements: 

- **Privacy Respecting**
	- The project must respect users privacy, not collect more data than necessary, and store info securely
	- For hosted services, the project must have a clear privacy policy
	- The user must remain in full control of their data, and be able to delete it at any time
- **Secure**
  - The software must be secure by default, without requiring additional configuration
  - There should be no current, critical security issues
  - The handling of past issues must have been prompt, transparent and effective
  - Ideally hosted services should have been security audited, with the report published publicly
- **Open Source**
	- The full source code should be released under an open source license
	- Ideally it should be possible for the user to build and run/deploy the software themselves from source
- **Actively Maintained**
  - The developers should address dependency updates and security patches in a timely manner
  - Ideally the source should have been updated within the last 12 months 
- **Transparent**
  - It should be clear who is behind the project, what their motives are, and what (if any) the funding model is
  - For hosted solutions, the privacy policy should clearly state what data is collected, how it's used and how long it's stored
- **Ethical**
  - Must not suppress free speech, discriminate or disregard any human rights
- **Relevant**
	- The software must be relevant, and fit into one of the existing categories
- **Functional**
	- Must be fully functional, and not just a concept or idea
	- A stable (non-alpha/beta) release is required at a minimum
	- Must be accessible to the general public, and not just a select group of people
	- If technical knowledge is required to run it, the software must be well documented

_There may be some exceptions, but these would need to be fully justified, reviewed
by the community, and the drawbacks / anti-features must be clearly listed along-side the software.
Usually these entries go within the "Notable Mentions" section instead._
`;


const projects = [
	{
		title: 'Email Comparison',
		description: 'Objective comparison of private/secure mail providers',
		icon: 'https://email-comparison.as93.net/favicon.png',
		link: 'https://github.com/lissy93/email-comparison',
	},
	{
		title: 'Personal Security Checklist',
		description: 'Checklist of security tips, for protecting your privacy',
		icon: 'https://i.ibb.co/Rb6P6h6/shield.png',
		link: 'https://github.com/Lissy93/personal-security-checklist',
	},
	{
		title: 'Web-Check',
		description: 'OSINT tool for analysing any website',
		icon: 'https://web-check.as93.net/web-check.png',
		link: 'https://github.com/lissy93/web-check',
	},
	{
		title: 'Dashy',
		description: 'Dashboard app, for organising your self-hosted services',
		icon: 'https://dashy.to/img/dashy.png',
		link: 'https://github.com/lissy93/dashy',
	},
	{
		title: 'Portainer-Templates',
		description: 'Compiled repository of 1-click Docker apps for self-hosting',
		icon: 'https://portainer-templates.as93.net/favicon.png',
		link: 'https://github.com/lissy93/portainer-templates',
	},
	{
		title: 'AdGuardian',
		description: 'CLI tool for monitoring your networks traffic and AdGuard DNS stats',
		icon: 'https://adguardian.as93.net/favicon.png',
		link: 'https://github.com/lissy93/adguardian-term',
	},
	{
		title: 'Bug-Bounties',
		description: 'Database of websites which accept responsible vulnerability discolsure',
		icon: 'https://bug-bounties.as93.net/favicon.png',
		link: 'https://github.com/lissy93/bug-bounties',
	},
	{
		title: 'Git-In',
		description: 'Tools and resources to help beginners get into open source',
		icon: 'https://www.git-in.to/favicon.png',
		link: 'https://github.com/lissy93/git-in',
	},
];

export const socials = [
	{
		title: 'GitHub',
		icon: 'hub',
		link: 'https://github.com/lissy93',
		color: '#EA4AAA',
	},
	{
		title: 'Twitter',
		icon: 'twitter',
		link: 'https://x.com/lissy_sykes',
		color: '#1D9BF0',
	},
	{
		title: 'Mastodon',
		icon: 'mastodon',
		link: 'https://mastodon.social/@lissy93',
		color: '#6364FF',
	},
	{
		title: 'Dev',
		icon: 'dev',
		link: 'https://dev.to/lissy93',
		color: '#cece04',
	},
	{
		title: 'LinkedIn',
		icon: 'linkedin',
		link: 'https://linkedin.com/in/aliciasykes',
		color: '#0A66C2',
	},
];

const description = 'Privacy is a fundamental human right; '
	+ 'without it, we\'re just open books in a world where everyone\'s '
	+ 'watching. Let\'s take control back.\n'
	+ 'Migrating open-source applications which do not collect, sell or log your data is a great first step.'
	+ 'Awesome Privacy is a directory of alternative privacy-respecting software and services.';

---

<Layout title="About | Awesome Privacy" description={description}>
	<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(projectRequrements)}></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">
						{
							socials.map((social) => (
								<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>
					{
						projects.map((project) => (
							<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(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>
