feat(support): link Discord for support and feedback (BLD-217)

bitext/src/lib/brand.ts

@@ -28,8 +28,11 @@ export const EXPORT_ATTRIBUTION_PLAIN = `Created with ${ALIGNER_SITE_HOST}`;
 /** Google Analytics 4 measurement ID (gtag). */
 export const GA_MEASUREMENT_ID = 'G-6Z5775NY39';
 
+/** Discord invite into the support channel; the main support and feedback route. */
+export const DISCORD_INVITE_URL = 'https://discord.gg/T6jHGWT5Vz';
+
 /**
- * Tally feedback form: opened by the embed in `app.html` via a trigger with
- * `data-tally-open` (https://tally.so/help/install-with-javascript).
+ * Tally feedback form, offered on the About page: opened by the embed in `app.html` via a
+ * trigger with `data-tally-open` (https://tally.so/help/install-with-javascript).
  */
 export const TALLY_FORM_ID = 'Ekb2l2';

bitext/src/lib/components/layout/SiteFooter.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
-	import { ALIGNER_DISPLAY_NAME, TALLY_FORM_ID } from '$lib/brand.js';
+	import { ALIGNER_DISPLAY_NAME, DISCORD_INVITE_URL } from '$lib/brand.js';
 
 	let { class: className = '' }: { class?: string } = $props();
 
 	const linkClass =
 		'font-medium text-primary-700 underline decoration-primary-700/40 underline-offset-2 hover:text-primary-800 hover:decoration-primary-800 dark:text-primary-400 dark:decoration-primary-400/50 dark:hover:text-primary-300';
 
-	const feedbackBtnClass =
-		'inline cursor-pointer border-0 bg-transparent p-0 text-sm text-gray-600 underline decoration-gray-400/50 underline-offset-2 transition-colors hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-gray-400 dark:decoration-gray-500/50 dark:hover:text-gray-200 dark:focus-visible:outline-primary-500';
+	const discordLinkClass =
+		'text-sm text-gray-600 underline decoration-gray-400/50 underline-offset-2 transition-colors hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-gray-400 dark:decoration-gray-500/50 dark:hover:text-gray-200 dark:focus-visible:outline-primary-500';
 
 	const year = new Date().getFullYear();
 	const authorSite = 'https://danipolani.github.io/en/';
@@ -41,16 +41,9 @@
 		and conlanging.
 	</p>
 	<p class="mt-4">
-		<button
-			type="button"
-			class={feedbackBtnClass}
-			data-tally-open={TALLY_FORM_ID}
-			data-tally-auto-close="0"
-			data-tally-hide-title="1"
-			data-tally-form-events-forwarding="1"
+		<a href={DISCORD_INVITE_URL} class={discordLinkClass} target="_blank" rel="noopener noreferrer"
+			>Support and feedback on Discord</a
 		>
-			Send feedback
-		</button>
 	</p>
 	<p class="mt-4 text-gray-500 dark:text-gray-500">© {year} Dani Polani</p>
 </footer>

bitext/src/lib/components/layout/SiteHeader.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import { DiscordSolid } from 'flowbite-svelte-icons';
 	import { settingsStore } from '$lib/state/settings.svelte.js';
-	import { TALLY_FORM_ID } from '$lib/brand.js';
+	import { DISCORD_INVITE_URL } from '$lib/brand.js';
 
 	const siteTheme = $derived(settingsStore.settings.theme);
 
 	const navLink =
 		'text-sm font-medium text-gray-600 underline decoration-gray-400/50 underline-offset-2 hover:text-gray-900 hover:decoration-gray-500/60 dark:text-gray-400 dark:decoration-gray-500/50 dark:hover:text-gray-100 dark:hover:decoration-gray-400/60';
 
-	const feedbackBtn =
-		'inline-flex cursor-pointer items-center gap-1.5 rounded-none border-0 bg-transparent p-0 text-sm font-medium text-primary-700 hover:text-primary-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-primary-400 dark:hover:text-primary-300';
+	const discordLink =
+		'inline-flex items-center gap-1.5 text-sm font-medium text-primary-700 hover:text-primary-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-primary-400 dark:hover:text-primary-300';
 
 	const themeBtn =
 		'inline-flex h-8 w-8 items-center justify-center border-0 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-gray-400';
@@ -49,31 +50,16 @@
 			<a href={resolve('/guide')} class={navLink}>Guides</a>
 			<a href={resolve('/about')} class={navLink}>About</a>
 		</nav>
-		<button
-			type="button"
-			class={feedbackBtn}
-			title="Send feedback"
-			data-tally-open={TALLY_FORM_ID}
-			data-tally-auto-close="0"
-			data-tally-hide-title="1"
-			data-tally-form-events-forwarding="1"
+		<a
+			href={DISCORD_INVITE_URL}
+			class={discordLink}
+			title="Support and feedback on Discord"
+			target="_blank"
+			rel="noopener noreferrer"
 		>
-			<svg
-				class="h-4 w-4 shrink-0"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="1.8"
-				aria-hidden="true"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M8 10h8M8 14h5M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.4A8 8 0 1 1 21 12Z"
-				/>
-			</svg>
-			<span class="hidden sm:inline">Feedback</span>
-		</button>
+			<DiscordSolid class="h-4 w-4 shrink-0" aria-hidden="true" />
+			<span class="sr-only sm:not-sr-only">Discord</span>
+		</a>
 		<div
 			class="inline-flex overflow-hidden rounded-none border border-gray-300 dark:border-gray-600"
 			role="group"

bitext/src/routes/+page.svelte

@@ -33,7 +33,7 @@
 	import { SCHEMA_VERSION, type AppStateV2 } from '$lib/serialization/schema.js';
 	import { editorExamples, type ExampleId } from '$lib/state/examples.js';
 	import { DEFAULT_DESCRIPTION, DEFAULT_TITLE, SITE_NAME } from '$lib/seo/metadata.js';
-	import { SITE_AUTHOR_URL, TALLY_FORM_ID } from '$lib/brand.js';
+	import { DISCORD_INVITE_URL, SITE_AUTHOR_URL } from '$lib/brand.js';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
@@ -139,8 +139,8 @@
 	const footerLink =
 		'font-medium text-gray-700 underline decoration-gray-400/50 underline-offset-2 hover:text-gray-900 dark:text-gray-300 dark:decoration-gray-500/50 dark:hover:text-gray-100';
 	const footerSep = 'text-gray-300 dark:text-gray-600';
-	const footerFeedback =
-		'inline cursor-pointer border-0 bg-transparent p-0 font-medium text-primary-700 underline decoration-primary-700/40 underline-offset-2 hover:text-primary-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-primary-400 dark:hover:text-primary-300';
+	const footerDiscord =
+		'font-medium text-primary-700 underline decoration-primary-700/40 underline-offset-2 hover:text-primary-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-primary-400 dark:hover:text-primary-300';
 
 	const exampleBtn =
 		'inline-flex list-none cursor-pointer items-center gap-1 rounded-none border border-gray-300 bg-white px-2 py-1.5 text-sm font-medium text-gray-800 shadow-sm marker:hidden outline-none hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-primary-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700/80 [&::-webkit-details-marker]:hidden';
@@ -372,16 +372,13 @@
 				<span class={footerSep} aria-hidden="true">·</span>
 				<a href={resolve('/terms')} class={footerLink}>Terms of use</a>
 				<span class={footerSep} aria-hidden="true">·</span>
-				<button
-					type="button"
-					class={footerFeedback}
-					data-tally-open={TALLY_FORM_ID}
-					data-tally-auto-close="0"
-					data-tally-hide-title="1"
-					data-tally-form-events-forwarding="1"
+				<a
+					href={DISCORD_INVITE_URL}
+					class={footerDiscord}
+					title="Support and feedback on Discord"
+					target="_blank"
+					rel="noopener noreferrer">Discord</a
 				>
-					Send feedback
-				</button>
 			</nav>
 		</footer>
 	{/if}

bitext/src/routes/about/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { resolve } from '$app/paths';
-	import { SITE_CONTACT_EMAIL, TALLY_FORM_ID } from '$lib/brand.js';
+	import { DISCORD_INVITE_URL, SITE_CONTACT_EMAIL, TALLY_FORM_ID } from '$lib/brand.js';
 	import PartnerBannerCursor from '$lib/components/partners/PartnerBannerCursor.svelte';
 	import PartnerBannerPreply from '$lib/components/partners/PartnerBannerPreply.svelte';
 	import PartnerBannerRailway from '$lib/components/partners/PartnerBannerRailway.svelte';
@@ -43,8 +43,7 @@
 		'overflow-hidden border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900/50';
 	const linkClass =
 		'font-medium text-primary-700 underline decoration-primary-700/40 underline-offset-2 hover:text-primary-800 hover:decoration-primary-800 dark:text-primary-400 dark:decoration-primary-400/50 dark:hover:text-primary-300';
-	const feedbackBtnClass =
-		'inline cursor-pointer border-0 bg-transparent p-0 text-sm text-gray-600 underline decoration-gray-400/50 underline-offset-2 transition-colors hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-gray-400 dark:decoration-gray-500/50 dark:hover:text-gray-200 dark:focus-visible:outline-primary-500';
+	const feedbackBtnClass = `inline cursor-pointer border-0 bg-transparent p-0 ${linkClass}`;
 
 	const ctaPrimary =
 		'inline-flex items-center gap-2 border border-primary-600 bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white no-underline transition-colors hover:bg-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:border-primary-500 dark:hover:bg-primary-500';
@@ -553,9 +552,14 @@
 			Contact
 		</h2>
 		<p class="mt-3 text-gray-700 dark:text-gray-300">
-			Questions or feedback about {DISPLAY_NAME}:
-			<a href={`mailto:${SITE_CONTACT_EMAIL}`} class={linkClass}>{SITE_CONTACT_EMAIL}</a>
-			<span class="text-gray-400 dark:text-gray-600"> · </span>
+			Questions and feedback about {DISPLAY_NAME} go to the
+			<a href={DISCORD_INVITE_URL} class={linkClass} target="_blank" rel="noopener noreferrer"
+				>#word-aligner-support</a
+			>
+			channel on Discord.
+		</p>
+		<p class="mt-3 text-gray-700 dark:text-gray-300">
+			You can also use the
 			<button
 				type="button"
 				class={feedbackBtnClass}
@@ -564,8 +568,10 @@
 				data-tally-hide-title="1"
 				data-tally-form-events-forwarding="1"
 			>
-				Feedback form (Tally)
+				feedback form
 			</button>
+			or write to
+			<a href={`mailto:${SITE_CONTACT_EMAIL}`} class={linkClass}>{SITE_CONTACT_EMAIL}</a>.
 		</p>
 
 		<h2

bitext/src/routes/privacy/+page.svelte

@@ -125,8 +125,8 @@
 		</li>
 		<li>
 			<strong class="text-gray-900 dark:text-white">Tally</strong> (Tally BV) — used only when you
-			open the "Send feedback" form. Submitting feedback shares whatever you type with Tally, who
-			delivers it to us. See
+			open the feedback form on the About page. Submitting feedback shares whatever you type with
+			Tally, who delivers it to us. See
 			<a
 				class={linkClass}
 				href="https://tally.so/help/privacy-policy"
@@ -184,6 +184,6 @@
 			href="https://danipolani.github.io/en/"
 			target="_blank"
 			rel="noopener noreferrer">author's site</a
-		>, or the in-app "Send feedback" form (Tally).
+		>, or the feedback form on the <a class={linkClass} href={resolve('/about')}>About page</a>.
 	</p>
 </main>

bitext/src/routes/terms/+page.svelte

@@ -193,6 +193,6 @@
 			href="https://danipolani.github.io/en/"
 			target="_blank"
 			rel="noopener noreferrer">author's site</a
-		>, or the in-app "Send feedback" form.
+		>, or the feedback form on the <a class={linkClass} href={resolve('/about')}>About page</a>.
 	</p>
 </main>