Fixed #102, donation link.

src/components/app/BigLink.svelte

@@ -2,10 +2,15 @@
     import Link from './Link.svelte';
 
     export let to: string;
-    export let subtitle: string;
+    export let subtitle: string | undefined = undefined;
+    export let external = false;
 </script>
 
-<p><Link {to}><slot /></Link><span class="subtitle"><br />{subtitle}</span></p>
+<p
+    ><Link {to} {external}><slot /></Link>{#if subtitle}<span class="subtitle"
+            ><br />{subtitle}</span
+        >{/if}</p
+>
 
 <style>
     p {

src/components/app/Page.svelte

@@ -33,6 +33,7 @@
         <Link to="/galleries"
             >{$locales.get((l) => l.ui.page.galleries.header)}</Link
         >
+        <Link to="/donate">{$locales.get((l) => l.ui.page.donate.header)}</Link>
         <Settings />
     </footer>
 </div>

src/components/settings/Settings.svelte

@@ -51,11 +51,6 @@
 </script>
 
 <div class="settings">
-    <Link external to="https://discord.gg/Jh2Qq9husy"
-        >{$locales.get((l) => l.term.help)}/{$locales.get(
-            (l) => l.term.feedback
-        )}</Link
-    >
     <Dialog
         button={{ tip: 'Show dialog to what beta means', label: 'beta' }}
         width="50vw"
@@ -64,7 +59,11 @@
             explanation: '',
         }}><Beta /></Dialog
     >
-
+    <Link external to="https://discord.gg/Jh2Qq9husy"
+        >{$locales.get((l) => l.term.help)}/{$locales.get(
+            (l) => l.term.feedback
+        )}</Link
+    >
     <Status />
     <Link to="/login">
         <CreatorView

src/components/widgets/Dialog.svelte

@@ -4,6 +4,7 @@
     import Button from './Button.svelte';
     import type { DialogText } from '../../locale/UITexts';
     import Header from '../app/Header.svelte';
+    import MarkupHtmlView from '../concepts/MarkupHTMLView.svelte';
 
     export let show = false;
     export let description: DialogText;
@@ -51,7 +52,7 @@
 >
     <div class="content">
         <Header>{description.header}</Header>
-        <p>{description.explanation}</p>
+        <MarkupHtmlView markup={description.explanation} />
         <slot />
         {#if closeable}
             <div class="close">

src/locale/UITexts.ts

@@ -28,7 +28,7 @@ export type DialogText = {
     /** The header to be shown at the top of the dialog */
     header: string;
     /** The explanation text just below the header. */
-    explanation: Template;
+    explanation: Template | Template[];
 };
 
 export type ConfirmText = {
@@ -739,6 +739,15 @@ type UITexts = {
             /** The consequences of violating a promise. */
             consequences: Template[];
         };
+        /** Giving related text */
+        donate: {
+            /** The label for the link and header */
+            header: Template;
+            /** The explanation of the link */
+            prompt: Template;
+            /** The content of the page */
+            content: Template[];
+        };
     };
     /** Descriptions of cursor positions and code transformations */
     edit: EditTexts;

src/locale/en-US.json

@@ -4266,6 +4266,21 @@
                 "consequences": [
                     "If we find a project or gallery that violates these rules, we will warn creators before they view it, or block it from being viewed. If you repeatedly violate these rules, you'll lose the privilege of posting publicly."
                 ]
+            },
+            "donate": {
+                "header": "Donate",
+                "prompt": "Enable more accessible, global programming.",
+                "content": [
+                    "Wordplay is a free, community-based project supported by the <University of Washington@https://washington.edu>. We rely on gifts from people who believe in our mission of accessible, language-inclusive, educational programming languages.",
+                    "Here are our current costs:",
+                    "• We compensate University of Washington undergraduates, especially those who are disabled or whose first language was not English, to evolve and maintain the project. This is about 90% of our costs.",
+                    "• We give stipends to teachers who we collaborate with to develop multilingual, accessible curricula.",
+                    "• We pay Google for <Firebase@https://firebase.google.com/> bandwidth and storage, and <Workspace@https://workspace.google.com/> services.",
+                    "• We pay <Squarespace@https://www.squarespace.com/> annually for the domain.",
+                    "Our current costs, assuming 5 undergraduates at $20/hour, 10 hours/week during the academic year (36 weeks) and 2 undergraduates during the summer (12 weeks), plus cloud services, are about $60K per year.",
+                    "If 2,400 people gave $25 USD per year, that would cover our current costs, with any excess going to compensation more students and teachers.",
+                    "Can you be one of those 2,400 people? If so, here's our University of Washington giving link:"
+                ]
             }
         },
         "edit": {

src/routes/+page.svelte

@@ -69,6 +69,11 @@
             subtitle={$locales.get((l) => l.ui.page.landing.link.rights)}
             >{$locales.get((l) => l.ui.page.rights.header)}</BigLink
         >
+        <BigLink
+            to="/donate"
+            subtitle={$locales.get((l) => l.ui.page.donate.prompt)}
+            >{$locales.get((l) => l.ui.page.donate.header)}</BigLink
+        >
     {/if}
 </Writing>
 

src/routes/donate/+page.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import Writing from '../../components/app/Writing.svelte';
+    import MarkupHtmlView from '../../components/concepts/MarkupHTMLView.svelte';
+    import Header from '../../components/app/Header.svelte';
+    import { locales } from '../../db/Database';
+    import BigLink from '../../components/app/BigLink.svelte';
+</script>
+
+<Writing>
+    <Header>{$locales.get((l) => l.ui.page.donate.header)}</Header>
+
+    <MarkupHtmlView markup={$locales.get((l) => l.ui.page.donate.content)} />
+
+    <p class="donate">
+        <BigLink
+            external
+            to="https://www.washington.edu/giving/make-a-gift/?page=make&code=GIDGET&amount=25"
+            >{$locales.get((l) => l.ui.page.donate.header)}</BigLink
+        ></p
+    >
+</Writing>
+
+<style>
+    .donate {
+        text-align: center;
+    }
+</style>

static/locales/es-MX/es-MX.json

@@ -2650,6 +2650,11 @@
                 "consequences": [
                     "Si encontramos un proyecto o galería que viola estas reglas, advertiremos a los creadores antes de que lo vean o bloquearemos su visualización. Si violas repetidamente estas reglas, perderás el privilegio de publicar públicamente."
                 ]
+            },
+            "donate": {
+                "header": "$?",
+                "prompt": "$?",
+                "content": ["$?"]
             }
         },
         "edit": {

static/locales/example/example.json

@@ -2570,6 +2570,11 @@
                 "header": "$?",
                 "content": ["$?"],
                 "consequences": ["$?"]
+            },
+            "donate": {
+                "header": "$?",
+                "prompt": "$?",
+                "content": ["$?"]
             }
         },
         "edit": {

static/locales/zh-CN/zh-CN.json

@@ -2570,6 +2570,11 @@
                 "header": "$?",
                 "content": ["$?"],
                 "consequences": ["$?"]
+            },
+            "donate": {
+                "header": "$?",
+                "prompt": "$?",
+                "content": ["$?"]
             }
         },
         "edit": {