diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 66a30db28..b169af41d 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -282,6 +282,9 @@ importers: postcss: specifier: 'catalog:' version: 8.4.47 + svelte-exmarkdown: + specifier: ^3.0.5 + version: 3.0.5(svelte@4.2.19) svelte-preprocess: specifier: 'catalog:' version: 5.1.4(@babel/core@7.24.7)(postcss-load-config@4.0.2(postcss@8.4.47))(postcss@8.4.47)(svelte@4.2.19)(typescript@5.3.3) @@ -307,6 +310,9 @@ importers: '@sveltejs/vite-plugin-svelte': specifier: ^3.1.1 version: 3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.12.12)) + '@tailwindcss/typography': + specifier: ^0.5.13 + version: 0.5.13(tailwindcss@3.4.3) '@tsconfig/svelte': specifier: ^5.0.4 version: 5.0.4 diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/viewer/lfClassicLexboxApi.ts b/frontend/src/routes/(authenticated)/project/[project_code]/viewer/lfClassicLexboxApi.ts index ba15cd5ef..e16789517 100644 --- a/frontend/src/routes/(authenticated)/project/[project_code]/viewer/lfClassicLexboxApi.ts +++ b/frontend/src/routes/(authenticated)/project/[project_code]/viewer/lfClassicLexboxApi.ts @@ -11,6 +11,7 @@ import { type SemanticDomain } from 'viewer/lexbox-api'; import { SEMANTIC_DOMAINS_EN } from './semantic-domains.en.generated-data'; +import { writable } from 'svelte/store'; function prepareEntriesForUi(entries: IEntry[]): void { entries.forEach(entry => { @@ -37,6 +38,7 @@ export class LfClassicLexboxApi implements LexboxApiClient { SupportedFeatures(): LexboxApiFeatures { return { feedback: true, + about: writable(aboutMarkdown), }; } @@ -145,3 +147,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/)`; diff --git a/frontend/viewer/package.json b/frontend/viewer/package.json index 911f9499b..0b19bfda6 100644 --- a/frontend/viewer/package.json +++ b/frontend/viewer/package.json @@ -28,6 +28,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:", @@ -43,6 +44,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", diff --git a/frontend/viewer/src/ProjectView.svelte b/frontend/viewer/src/ProjectView.svelte index 3fe23bf66..8ffb793d0 100644 --- a/frontend/viewer/src/ProjectView.svelte +++ b/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; @@ -286,6 +287,9 @@ {#if $features.history} {/if} + {#if $features.about} + + {/if} {#if $features.feedback} + +
+ +
+
+
+ +
+
+ diff --git a/frontend/viewer/src/lib/about/NewTabLinkRenderer.svelte b/frontend/viewer/src/lib/about/NewTabLinkRenderer.svelte new file mode 100644 index 000000000..e1b72a91d --- /dev/null +++ b/frontend/viewer/src/lib/about/NewTabLinkRenderer.svelte @@ -0,0 +1,16 @@ + + + + +   + + + diff --git a/frontend/viewer/src/lib/services/lexbox-api.ts b/frontend/viewer/src/lib/services/lexbox-api.ts index c003fb7ec..e9795fe5c 100644 --- a/frontend/viewer/src/lib/services/lexbox-api.ts +++ b/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'; @@ -17,6 +18,7 @@ export interface LexboxApiFeatures { openWithFlex?: boolean; feedback?: boolean; sync?: boolean; + about?: Readable; } export interface LexboxApi { diff --git a/frontend/viewer/tailwind.config.cjs b/frontend/viewer/tailwind.config.cjs index a9ae479d5..4304eb406 100644 --- a/frontend/viewer/tailwind.config.cjs +++ b/frontend/viewer/tailwind.config.cjs @@ -14,6 +14,7 @@ module.exports = { collections: getIconCollections(['mdi']), }), svelteUx({ colorSpace: 'oklch' }), + require('@tailwindcss/typography'), ], ux: { themeRoot: ':root, :host',