Add about dialog to viewer

frontend/src/routes/(authenticated)/project/[project_code]/viewer/lfClassicLexboxApi.ts

@@ -10,7 +10,7 @@ import {
   type PartOfSpeech,
   type SemanticDomain
 } from 'viewer/lexbox-api';
-
+import { writable } from 'svelte/store';
 
 export class LfClassicLexboxApi implements LexboxApiClient {
   constructor(private projectCode: string) {
@@ -19,6 +19,7 @@ export class LfClassicLexboxApi implements LexboxApiClient {
   SupportedFeatures(): LexboxApiFeatures {
     return {
       feedback: true,
+      about: writable(aboutMarkdown),
     };
   }
 
@@ -121,3 +122,37 @@ export class LfClassicLexboxApi implements LexboxApiClient {
   }
 
 }
+
+const aboutMarkdown =
+`## What is this?
+
+This is a beta version of a new dictionary building tool that is currently under development.
+
+The data you see here reflects the current data in the corresponding [Language Forge](https://languageforge.org/) project.
+
+This read-only version of the new dictionary tool is primarily for gathering early feedback on its look and feel. So, please use the [Feedback](/api/feedback) button in the top right corner of the page.
+
+## It can edit FieldWorks projects!
+
+It's true! There's already another version of the tool that you can use today to open and edit your data in FieldWorks.
+It's also loaded with additional features! We're calling it [FieldWorks Lite](https://lexbox.org/fw-lite).
+So, please download and try out the alpha version of [FieldWorks Lite](https://lexbox.org/fw-lite) as well.
+
+## Should I be excited?
+
+Yes! FieldWorks Lite will be revolutionary in multiple ways. It will be:
+
+- Cross-platform: it will work on Windows, Linux, Mac and eventually mobile
+- Usable offline: you won't need an internet connection
+- Collaborative: you will see any changes other users make as they work
+- Faster than you're used to - we're quite confident about that 😀
+
+Eventually, FieldWorks Lite will replace both [WeSay](https://software.sil.org/wesay/) and [Language Forge](https://languageforge.org/).
+
+So, please send us your [feedback](/api/feedback). We want this tool to serve you as well as possible.
+
+## FieldWorks Lite is not
+
+- A replacement for [FieldWorks](https://software.sil.org/fieldworks/)
+- A replacement for [Dictionary App Builder](https://software.sil.org/dictionaryappbuilder/)
+- A replacement for [Webonary](https://www.webonary.org/)`;

frontend/viewer/package.json

@@ -29,6 +29,7 @@
     "@iconify-json/mdi": "^1.1.66",
     "@mdi/js": "^7.4.47",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tailwindcss/typography": "^0.5.13",
     "@tsconfig/svelte": "^5.0.4",
     "svelte": "catalog:",
     "svelte-check": "catalog:",
@@ -44,6 +45,7 @@
     "autoprefixer": "^10.4.19",
     "fast-json-patch": "^3.1.1",
     "postcss": "catalog:",
+    "svelte-exmarkdown": "^3.0.5",
     "svelte-preprocess": "catalog:",
     "svelte-routing": "^2.12.0",
     "svelte-ux": "^0.66.8",

frontend/viewer/src/ProjectView.svelte

@@ -36,6 +36,7 @@
   import {views} from './lib/entry-editor/view-data';
   import {initWritingSystems} from './lib/writing-systems';
   import {useEventBus} from './lib/services/event-bus';
+  import AboutDialog from './lib/about/AboutDialog.svelte';
 
   export let loading = false;
 
@@ -284,6 +285,9 @@
       {#if $features.history}
         <ActivityView {projectName}/>
       {/if}
+      {#if $features.about}
+        <AboutDialog text={$features.about} />
+      {/if}
       {#if $features.feedback}
         <Button
           href="/api/feedback"

frontend/viewer/src/lib/about/AboutDialog.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { mdiInformationVariantCircle } from '@mdi/js';
+  import { Button, Dialog, Toggle } from 'svelte-ux';
+  import type { Readable } from 'svelte/store';
+  import Markdown from 'svelte-exmarkdown';
+  import NewTabLinkRenderer from './NewTabLinkRenderer.svelte';
+  import { onMount } from 'svelte';
+
+  export let text: Readable<string>;
+
+  let toggle: Toggle;
+
+  onMount(() => {
+    if (!localStorage.getItem('suppressAbout')) {
+      toggle.on = true;
+      localStorage.setItem('suppressAbout', 'true');
+    }
+  });
+</script>
+
+<Toggle bind:this={toggle} let:on={open} let:toggleOn let:toggleOff>
+  <Button on:click={toggleOn} size="sm" variant="outline" icon={mdiInformationVariantCircle}>
+    <div class="hidden sm:contents">
+      About
+    </div>
+  </Button>
+  <Dialog {open} on:close={toggleOff} class="w-[700px]">
+    <div class="m-6 prose">
+      <Markdown md={$text} plugins={[{ renderer: { a: NewTabLinkRenderer } }]} />
+    </div>
+    <div class="flex-grow"></div>
+    <div slot="actions">
+      <Button>Close</Button>
+    </div>
+  </Dialog>
+</Toggle>

frontend/viewer/src/lib/about/NewTabLinkRenderer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let href: string;
+  export let title: string | undefined = undefined;
+</script>
+
+<a {href} {title} target="_blank" class="external-link link link-hover">
+  <!-- &nbsp; prevents the link from ever being at the very beginning of a new line -->
+  <slot />&nbsp;<span class="i-mdi-open-in-new external-link-icon" />
+</a>
+
+<style>
+  .external-link-icon {
+    margin-bottom: -0.7%;
+    font-size: 0.9em;
+  }
+</style>

frontend/viewer/src/lib/services/lexbox-api.ts

@@ -1,6 +1,7 @@
 import type {IEntry, IExampleSentence, ISense, PartOfSpeech, QueryOptions, SemanticDomain, WritingSystem, WritingSystems} from '../mini-lcm';
 
 import type { Operation } from 'fast-json-patch';
+import type { Readable } from 'svelte/store';
 
 export type {IEntry, IExampleSentence, ISense, QueryOptions, WritingSystem, WritingSystems, PartOfSpeech, SemanticDomain} from '../mini-lcm';
 
@@ -16,6 +17,7 @@ export interface LexboxApiFeatures {
   write?: boolean;
   openWithFlex?: boolean;
   feedback?: boolean;
+  about?: Readable<string>;
 }
 
 export interface LexboxApi {

frontend/viewer/tailwind.config.cjs

@@ -14,6 +14,7 @@ module.exports = {
       collections: getIconCollections(['mdi']),
     }),
     svelteUx({ colorSpace: 'oklch' }),
+    require('@tailwindcss/typography'),
   ],
   ux: {
     themeRoot: ':root, :host',