Add separate "About" and "Donate" dialogs

Gives more context about the project than the link to the initial blog post.

Updates #100

src/About.tsx

@@ -0,0 +1,83 @@
+import {useEffect, useState} from "react";
+import {Dialog} from "./Dialog";
+import {Donate} from "./Donate";
+import * as varz from "./varz";
+
+export function About({onDone}: {onDone: () => void}) {
+    const email = [
+        109, 105, 104, 97, 105, 64, 112, 101, 114, 115, 105, 115, 116, 101, 110,
+        116, 46, 105, 110, 102, 111,
+    ]
+        .map(c => String.fromCharCode(c))
+        .join("");
+    const [donateVisible, setDonateVisible] = useState(false);
+    useEffect(() => {
+        varz.increment("about_shown");
+    });
+    if (donateVisible) {
+        return <Donate onDone={onDone} />;
+    }
+
+    return (
+        <Dialog title="About" onDone={onDone}>
+            <p>
+                Infinite Mac is a project by Mihai Parparita to make classic Mac
+                emulation easily accessible.
+            </p>
+            <p>
+                It uses WebAssembly ports of{" "}
+                <a href="https://www.gryphel.com/c/minivmac/">Mini vMac</a>,{" "}
+                <a href="https://basilisk.cebix.net/">Basilisk II</a> and{" "}
+                <a href="https://sheepshaver.cebix.net/">SheepShaver</a> to
+                allow a broad set of System Software/Mac OS versions to run on
+                the web:
+            </p>
+            <ul>
+                <li>
+                    System 6.0.8: <a href="https://system6.app">system6.app</a>
+                </li>
+                <li>
+                    System 7.5.3: <a href="https://system7.app">system7.app</a>
+                </li>
+                <li>
+                    KanjiTalk 7.5.3:{" "}
+                    <a href="https://kanjitalk7.app">kanjitalk7.app</a>
+                </li>
+                <li>
+                    Mac OS 8.1: <a href="https://macos8.app">macos8.app</a>
+                </li>
+                <li>
+                    Mac OS 9.0.4: <a href="https://macos9.app">macos9.app</a>
+                </li>
+            </ul>
+            <p>
+                To learn more, including how it was built, see{" "}
+                <a href="https://blog.persistent.info/search/label/Infinite%20Mac">
+                    this series of blog posts
+                </a>
+                . Source code is{" "}
+                <a href="https://github.com/mihaip/infinite-mac">
+                    available on GitHub
+                </a>
+                .
+            </p>
+            <p>
+                For feedback, you can reach Mihai at{" "}
+                <a href={`mailto:${email}`}>{email}</a> or{" "}
+                <a href="https://hachyderm.io/@mihaip">@[email protected]</a>.
+                For bug reports or software requests, you can also{" "}
+                <a href="https://github.com/mihaip/infinite-mac/issues/new">
+                    file an issue on GitHub
+                </a>
+                .
+            </p>
+            <p>
+                If you'd like to support the project, you can{" "}
+                <span className="link" onClick={() => setDonateVisible(true)}>
+                    donate
+                </span>
+                .
+            </p>
+        </Dialog>
+    );
+}

src/Dialog.css

@@ -8,6 +8,7 @@
     border-radius: 8px;
     background: #fff;
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+    max-width: 600px;
 }
 
 .Dialog h1 {
@@ -44,3 +45,10 @@
     min-width: 60px;
     font-size: 14px;
 }
+
+.Dialog a,
+.Dialog .link {
+    cursor: pointer;
+    text-decoration: underline;
+    color: #00c;
+}

src/Donate.tsx

@@ -0,0 +1,30 @@
+import {useEffect} from "react";
+import {Dialog} from "./Dialog";
+import * as varz from "./varz";
+
+export function Donate({onDone}: {onDone: () => void}) {
+    useEffect(() => {
+        varz.increment("donate_shown");
+    });
+
+    return (
+        <Dialog title="Donate" onDone={onDone}>
+            <p>
+                While working on the project is its own reward (and I have a
+                full-time job), there are hosting costs associated with the
+                infrastructure that it needs (mostly domain name registrations
+                and web hosting). I'm hoping that sponsorship can cover them.
+            </p>
+            <p>
+                Donations to support the project can be done via{" "}
+                <a href="https://github.com/sponsors/mihaip">GitHub Sponsors</a>{" "}
+                or{" "}
+                <a href="https://www.paypal.com/donate/?hosted_button_id=394METCPT6PYN">
+                    PayPal
+                </a>
+                .
+            </p>
+            <p>Thanks!</p>
+        </Dialog>
+    );
+}

src/Footer.css

@@ -10,9 +10,9 @@
     border-radius: 10px;
 }
 
-.Footer a {
-    color: #fff;
+.Footer span {
     text-decoration: underline;
+    cursor: pointer;
 }
 
 .fullscreen .Footer {

src/Footer.tsx

@@ -1,14 +1,19 @@
+import {useState} from "react";
+import {About} from "./About";
+import {Donate} from "./Donate";
 import "./Footer.css";
 
 export function Footer() {
+    const [aboutVisible, setAboutVisible] = useState(false);
+    const [donateVisible, setDonateVisible] = useState(false);
+
     return (
         <div className="Footer">
-            Infinite Mac - A project by{" "}
-            <a href="http://persistent.info">Mihai Parparita</a> -{" "}
-            <a href="https://blog.persistent.info/2022/03/blog-post.html">
-                About
-            </a>{" "}
-            - <a href="https://github.com/mihaip/infinite-mac">Source</a>
+            {aboutVisible && <About onDone={() => setAboutVisible(false)} />}
+            {donateVisible && <Donate onDone={() => setDonateVisible(false)} />}
+            Infinite Mac -{" "}
+            <span onClick={() => setAboutVisible(true)}>About</span> -{" "}
+            <span onClick={() => setDonateVisible(true)}>Donate</span>
         </div>
     );
 }