RTF LanguageSystem e. g. Link usage

.gitignore

@@ -37,3 +37,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Custom
+*.env

libs/shared/components/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/rt/rt';
 export * from './lib/header/header';
 export * from './lib/button/button';
 export * from './lib/page-title/page-title';

libs/shared/components/src/lib/rt/rt.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Rt from './rt';
+
+describe('Rt', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Rt />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/shared/components/src/lib/rt/rt.tsx

@@ -0,0 +1,16 @@
+import './rt.scss';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { tr } from '@alpsbte/shared/language';
+
+/* eslint-disable-next-line */
+export interface RtProps {
+  p: any; // get correct time in the future
+}
+
+export function Rt(props: RtProps) {
+  const markdown = tr(props.p);
+  return <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />;
+}
+
+export default Rt;

libs/shared/language/src/lib/tr.ts

@@ -2,6 +2,9 @@
 import { languageStore } from '@alpsbte/shared/stores';
 import { deepFind, InternalError } from '@alpsbte/shared/util';
 import { ISet } from './interfaces/set';
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
 
 type Divider = '.';
 type ___ = '';
@@ -41,7 +44,7 @@ export type TranslationPath = TranslationPathFactory<typeof languageStore.set>;
  * Only works in components that have the languageStore injected!
  */
 export function tr(key: TranslationPath): string {
-  return (
-    deepFind<ISet>(languageStore.set, key) ?? InternalError.missingTranslation
-  );
+  const text = (deepFind<ISet>(languageStore.set, key) ??
+    InternalError.missingTranslation) as string;
+  return text;
 }

libs/shared/theme/src/lib/styles/link.scss

@@ -8,4 +8,8 @@ a {
 
 a.link {
   color: colors.$link;
+
+  &:visited {
+    color: colors.$link-visited;
+  }
 }

libs/shared/theme/src/lib/variables/colors.scss

@@ -19,4 +19,5 @@ $green: #45c631;
 $orange: #ffa202;
 
 //misc
-$link: #96AFEA
+$link: #96afea;
+$link-visited: #b680e7;