import Image from "next/image";
import Link from "next/link";
import Layout from "../components/Layout";
import Container from "../components/Container";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import { PrivacyIcon } from "../components/icons";

import faunaImg from "../public/static/images/privacy/fauna_hits.png";

const Privacy = () => (
  <Layout>
    <Container title="Privacy">
      <PageTitle
        title={
          <>
            <PrivacyIcon /> Privacy
          </>
        }
      />
      <Content>
        <p>Okay, this is an easy one. 😉</p>

        <h2 id="hosting">Hosting</h2>
        <p>
          Pages and first-party assets on this website are served by{" "}
          <a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">
            <strong>▲ Vercel</strong>
          </a>
          . Refer to their{" "}
          <a href="https://vercel.com/legal/privacy-policy" target="_blank" rel="noopener noreferrer">
            privacy policy
          </a>{" "}
          for more information.
        </p>
        <p>
          For a likely excessive level of privacy and security, this website is also mirrored on the{" "}
          <a href="https://www.torproject.org/" target="_blank" rel="noopener noreferrer">
            🧅 Tor network
          </a>{" "}
          at:
        </p>
        <blockquote>
          <p>
            <a
              href="http://jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion"
              target="_blank"
              rel="noopener noreferrer"
            >
              <strong>jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion</strong>
            </a>
          </p>
        </blockquote>

        <h2 id="analytics">Analytics</h2>
        <p>
          A very simple hit counter on each blog post tallies an aggregate number of pageviews (i.e.{" "}
          <code>hits = hits + 1</code>) in a{" "}
          <a href="https://fauna.com/" target="_blank" rel="noopener noreferrer">
            Fauna
          </a>{" "}
          database. Individual views and identifying (or non-identifying) details are{" "}
          <strong>never stored or logged</strong>.
        </p>
        <p>
          The{" "}
          <a
            href="https://github.com/jakejarvis/jarv.is/blob/main/pages/api/hits.ts"
            target="_blank"
            rel="noopener noreferrer"
          >
            serverless function
          </a>{" "}
          and{" "}
          <a
            href="https://github.com/jakejarvis/jarv.is/blob/main/components/hits/Hits.tsx"
            target="_blank"
            rel="noopener noreferrer"
          >
            client script
          </a>{" "}
          are open source, and{" "}
          <a href="https://github.com/jakejarvis/website-stats" target="_blank" rel="noopener noreferrer">
            snapshots of the database
          </a>{" "}
          are public.
        </p>
        <Image src={faunaImg} placeholder="blur" alt="The entire database schema." />
        <p>
          <a href="https://usefathom.com/ref/ZEYG0O" target="_blank" rel="noopener noreferrer">
            <strong>Fathom Analytics</strong>
          </a>
          , a <em>very</em>{" "}
          <a href="https://usefathom.com/privacy-focused-web-analytics" target="_blank" rel="noopener noreferrer">
            privacy-focused
          </a>{" "}
          service, is also used to gain insights into referrers, search terms, etc.{" "}
          <strong>without collecting anything identifiable about you</strong>. (My{" "}
          <a href="/stats/" target="_blank" rel="noopener noreferrer">
            dashboard
          </a>{" "}
          is completely public, too!)
        </p>
        <iframe src="https://app.usefathom.com/share/wbgnqukw/jarv.is" title="Fathom Analytics dashboard">
          <style jsx>{`
            iframe {
              width: 100%;
              height: 500px;
              border: 2px solid var(--kinda-light);
            }
          `}</style>
        </iframe>
        <p>
          <a href="https://vercel.com/analytics" target="_blank" rel="noopener noreferrer">
            <strong>Vercel Analytics</strong>
          </a>{" "}
          keeps track of{" "}
          <a href="https://vercel.com/docs/concepts/analytics/web-vitals" target="_blank" rel="noopener noreferrer">
            "web vitals"
          </a>{" "}
          (input delays, layout shifts, etc.), also in an anonymous and aggregate fashion.
        </p>

        <h2 id="third-party">Third-Party Content</h2>
        <p>
          Occasionally, embedded content from third-party services is included in posts, and some may contain tracking
          code that is outside of my control. Please refer to their privacy policies for more information:
        </p>
        <ul>
          <li>
            <a href="https://blog.codepen.io/documentation/privacy/" target="_blank" rel="noopener noreferrer">
              CodePen
            </a>
          </li>
          <li>
            <a href="https://www.facebook.com/policy.php" target="_blank" rel="noopener noreferrer">
              Facebook
            </a>
          </li>
          <li>
            <a
              href="https://docs.github.com/en/github/site-policy/github-privacy-statement"
              target="_blank"
              rel="noopener noreferrer"
            >
              GitHub
            </a>
          </li>
          <li>
            <a href="https://soundcloud.com/pages/privacy" target="_blank" rel="noopener noreferrer">
              SoundCloud
            </a>
          </li>
          <li>
            <a href="https://twitter.com/en/privacy" target="_blank" rel="noopener noreferrer">
              Twitter
            </a>
          </li>
          <li>
            <a href="https://vimeo.com/privacy" target="_blank" rel="noopener noreferrer">
              Vimeo
            </a>
          </li>
          <li>
            <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">
              YouTube
            </a>
          </li>
        </ul>

        <h2 id="hcaptcha">Fighting Spam</h2>
        <p>
          Using{" "}
          <a href="https://www.hcaptcha.com/" target="_blank" rel="noopener noreferrer">
            <strong>hCaptcha</strong>
          </a>{" "}
          to fight bot spam on the <Link href="/contact/">contact form</Link> was an easy choice over seemingly
          unavoidable alternatives like{" "}
          <a href="https://developers.google.com/recaptcha/" target="_blank" rel="noopener noreferrer">
            reCAPTCHA
          </a>
          .
        </p>
        <p>
          You can refer to hCaptcha's{" "}
          <a href="https://www.hcaptcha.com/privacy" target="_blank" rel="noopener noreferrer">
            privacy policy
          </a>{" "}
          and{" "}
          <a href="https://www.hcaptcha.com/terms" target="_blank" rel="noopener noreferrer">
            terms of service
          </a>{" "}
          for more details. While some information is sent to the hCaptcha API about your behavior{" "}
          <strong>(on the contact page only)</strong>, at least you won't be helping a certain internet conglomerate{" "}
          <a
            href="https://blog.cloudflare.com/moving-from-recaptcha-to-hcaptcha/"
            target="_blank"
            rel="noopener noreferrer"
          >
            train their self-driving cars
          </a>
          . 🚗
        </p>
        <p>
          I also enabled the setting to donate 100% of my{" "}
          <a href="https://humanprotocol.org/?lng=en-US" target="_blank" rel="noopener noreferrer">
            HMT token
          </a>{" "}
          earnings to the{" "}
          <a href="https://wikimediafoundation.org/" target="_blank" rel="noopener noreferrer">
            Wikimedia Foundation
          </a>
          , for what it's worth. (A few cents, probably... 💰)
        </p>
      </Content>
    </Container>
  </Layout>
);

export default Privacy;
