Editor Help Modal (#99)

* removed css from body
* added internal-link and translated-internal-link
* icon in links are always fixedWidth
* added help button

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

public/locales/ar.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "جهات الاتصال",
                 "community": "انضم إلى المجتمع",
-                "meetUsOn": "قابِلنا في %s",
+                "meetUsOn": "قابِلنا في {{service}}",
                 "helpTranslating": "ساعدنا في الترجمة",
                 "reportIssue": "بلغ عن خطأ"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/ca.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Contactes",
                 "community": "Unir-se a la comunitat",
-                "meetUsOn": "Coneix-nos a %s",
+                "meetUsOn": "Coneix-nos a {{service}}",
                 "helpTranslating": "Ajuda'ns traduïnt",
                 "reportIssue": "Reportar un problema"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/cs.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Kontakty",
                 "community": "Připojit ke komunitě",
-                "meetUsOn": "Potkejte se s námi na %s",
+                "meetUsOn": "Potkejte se s námi na {{service}}",
                 "helpTranslating": "Pomoci nám s překladem",
                 "reportIssue": "Nahlásit problém"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/de.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Kontakte",
                 "community": "Tritt der Community bei",
-                "meetUsOn": "Triff uns auf %s",
+                "meetUsOn": "Triff uns auf {{service}}",
                 "helpTranslating": "Hilf uns beim Übersetzen",
                 "reportIssue": "Fehlerbericht senden"
             },
@@ -193,4 +193,4 @@
             }
         }
     }
-}
+}

public/locales/en.json

@@ -82,7 +82,7 @@
             "contacts": {
                 "title": "Contacts",
                 "community": "Join the community",
-                "meetUsOn": "Meet us on %s",
+                "meetUsOn": "Meet us on {{service}}",
                 "helpTranslating": "Help us translating",
                 "reportIssue": "Report an issue"
             },
@@ -224,7 +224,7 @@
                 "openIdLogin": "Invalid OpenID provided",
                 "emailLogin": "Invalid email or password",
                 "ldapLogin": "Invalid username or password"
-            } 
+            }
         }
     }
-}
+}

public/locales/es.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Contactos",
                 "community": "Únete a la comunidad",
-                "meetUsOn": "Encuéntranos en %s",
+                "meetUsOn": "Encuéntranos en {{service}}",
                 "helpTranslating": "Ayúdanos traduciendo",
                 "reportIssue": "Reportar un problema"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/fr.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Contacts",
                 "community": "Rejoignez la communauté",
-                "meetUsOn": "Rencontrez-nous sur %s",
+                "meetUsOn": "Rencontrez-nous sur {{service}}",
                 "helpTranslating": "Aidez-nous à traduire",
                 "reportIssue": "Signaler un problème"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/id.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Kontak",
                 "community": "Bergabung dengan komunitas",
-                "meetUsOn": "Temui kami di %s",
+                "meetUsOn": "Temui kami di {{service}}",
                 "helpTranslating": "Bantu kami menerjemahkan",
                 "reportIssue": "Laporkan kesalahan"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/it.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Contatti",
                 "community": "Unisciti alla comunità",
-                "meetUsOn": "Vieni a trovarci su %s",
+                "meetUsOn": "Vieni a trovarci su {{service}}",
                 "helpTranslating": "Aiutaci nella traduzione",
                 "reportIssue": "Segnala un problema"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/ja.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "コンタクト",
                 "community": "コミュニティに参加しましょう",
-                "meetUsOn": "%sでチャットする",
+                "meetUsOn": "{{service}}でチャットする",
                 "helpTranslating": "翻訳のお手伝いをお願いします",
                 "reportIssue": "問題を報告する"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/ko.json

@@ -61,7 +61,7 @@
         "help": {
             "contacts": {
                 "title": "연락처",
-                "meetUsOn": "%s에서 만나보세요",
+                "meetUsOn": "{{service}}에서 만나보세요",
                 "reportIssue": "이슈 보고하기"
             },
             "documents": {
@@ -181,4 +181,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/nl.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Contacten",
                 "community": "Lid worden",
-                "meetUsOn": "Ontmoet ons op %s",
+                "meetUsOn": "Ontmoet ons op {{service}}",
                 "helpTranslating": "Help ons vertalen",
                 "reportIssue": "Probleem rapporteren"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/pl.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Kontakty",
                 "community": "Dołącz do społeczności",
-                "meetUsOn": "Spotkaj się z nami na %s",
+                "meetUsOn": "Spotkaj się z nami na {{service}}",
                 "helpTranslating": "Pomóż nam w tłumaczeniu",
                 "reportIssue": "Zgłoś błąd"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/pt.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Contatos",
                 "community": "Join the community",
-                "meetUsOn": "Meet us on %s",
+                "meetUsOn": "Meet us on {{service}}",
                 "helpTranslating": "Help us translating",
                 "reportIssue": "Relatar um problema"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/ru.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Контакты",
                 "community": "Присоединиться к сообществу",
-                "meetUsOn": "Познакомьтесь с нами в %s",
+                "meetUsOn": "Познакомьтесь с нами в {{service}}",
                 "helpTranslating": "Помочь с переводом",
                 "reportIssue": "Сообщить о проблеме"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/sk.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Kontakty",
                 "community": "Pripojiť sa ku komunite",
-                "meetUsOn": "Stretnite nás na %s",
+                "meetUsOn": "Stretnite nás na {{service}}",
                 "helpTranslating": "Pomôžte nám s prekladom",
                 "reportIssue": "Nahlásiť problém"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/sr.json

@@ -63,7 +63,7 @@
             "contacts": {
                 "title": "Контакти",
                 "community": "Приступите заједници",
-                "meetUsOn": "Пронађите нас на %s",
+                "meetUsOn": "Пронађите нас на {{service}}",
                 "helpTranslating": "Помозите око превода",
                 "reportIssue": "Пријава проблема"
             },
@@ -185,4 +185,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/sv.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "Kontakter",
                 "community": "Gå med i samhället",
-                "meetUsOn": "Träffa oss på %s",
+                "meetUsOn": "Träffa oss på {{service}}",
                 "helpTranslating": "Hjälp oss att översätta",
                 "reportIssue": "Rapportera ett fel"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/vi.json

@@ -63,7 +63,7 @@
             "contacts": {
                 "title": "Liên Lạc",
                 "community": "Tham gia vào cộng đồng",
-                "meetUsOn": "Gặp chúng tôi ở %s",
+                "meetUsOn": "Gặp chúng tôi ở {{service}}",
                 "helpTranslating": "Giúp chúng tôi dịch",
                 "reportIssue": "Báo cáo vấn đề"
             },
@@ -185,4 +185,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/zh-CN.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "联系我们",
                 "community": "加入社区",
-                "meetUsOn": "在 %s 上联系我们",
+                "meetUsOn": "在 {{service}} 上联系我们",
                 "helpTranslating": "帮助我们翻译",
                 "reportIssue": "报告问题"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

public/locales/zh-TW.json

@@ -64,7 +64,7 @@
             "contacts": {
                 "title": "聯絡方式",
                 "community": "加入社群",
-                "meetUsOn": "透過 %s 聯絡我們",
+                "meetUsOn": "透過 {{service}} 聯絡我們",
                 "helpTranslating": "幫助我們改進翻譯",
                 "reportIssue": "回報問題"
             },
@@ -186,4 +186,4 @@
             "error": {}
         }
     }
-}
+}

src/components/application-loader/loading-screen.tsx

@@ -9,7 +9,7 @@ export interface LoadingScreenProps {
 export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTitle }) => {
   return (
     <div className="loader middle">
-      <div className="icon">
+      <div className="icon text-white">
         <FontAwesomeIcon icon="file-alt" size="6x"
           className={failedTitle ? 'animation-shake' : 'animation-pulse'}/>
       </div>

src/components/editor/task-bar/help-button.tsx

@@ -0,0 +1,290 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { Fragment, useState } from 'react'
+import { Button, Card, Col, Modal, Row, Table } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { TranslatedExternalLink } from '../../links/translated-external-link'
+
+export const HelpButton: React.FC = () => {
+  const { t } = useTranslation()
+  const [show, setShow] = useState(false)
+
+  const handleShow = () => setShow(true)
+  const handleClose = () => setShow(false)
+  return (
+    <Fragment>
+      <Button title={t('editor.menu.help')} className="ml-2 text-secondary" size="sm" variant="outline-light"
+        onClick={handleShow}>
+        <FontAwesomeIcon icon="question-circle"/>
+      </Button>
+      <Modal show={show} onHide={handleClose} animation={true} className="text-dark" size='lg'>
+        <Modal.Header closeButton>
+          <Modal.Title>
+            <FontAwesomeIcon icon="question-circle"/> <Trans i18nKey={'editor.menu.help'}/>
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body className="text-dark">
+          <Row>
+            <Col lg={4}>
+              <Card>
+                <Card.Header><Trans i18nKey='editor.help.contacts.title'/></Card.Header>
+                <Card.Body>
+                  <Card.Text>
+                    <ul className="list-unstyled">
+                      <li>
+                        <TranslatedExternalLink
+                          i18nKey='editor.help.contacts.community'
+                          href='https://community.codimd.org/'
+                          icon='users'
+                          className='text-primary'
+                        />
+                      </li>
+                      <li>
+                        <TranslatedExternalLink
+                          i18nKey='editor.help.contacts.meetUsOn'
+                          i18nOption={{ service: 'Matrix' }}
+                          href='https://riot.im/app/#/room/#codimd:matrix.org'
+                          icon='hashtag'
+                          className='text-primary'
+                        />
+                      </li>
+                      <li>
+                        <TranslatedExternalLink
+                          i18nKey='editor.help.contacts.reportIssue'
+                          href='https://github.com/codimd/server/issues'
+                          icon='tag'
+                          className='text-primary'
+                        />
+                      </li>
+                      <li>
+                        <TranslatedExternalLink
+                          i18nKey='editor.help.contacts.helpTranslating'
+                          href='https://translate.codimd.org/'
+                          icon='language'
+                          className='text-primary'
+                        />
+                      </li>
+                    </ul>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+              <Card>
+                <Card.Header><Trans i18nKey='editor.help.documents.title'/></Card.Header>
+                <Card.Body>
+                  <Card.Text>
+                    <ul className="list-unstyled">
+                      <li>
+                        <TranslatedExternalLink
+                          i18nKey='editor.help.documents.features'
+                          href='/n/features'
+                          icon='dot-circle'
+                          className='text-primary'
+                        />
+                      </li>
+                      <li>
+                        <TranslatedExternalLink
+                          i18nKey='editor.help.documents.yamlMetadata'
+                          href='/n/yaml-data'
+                          icon='dot-circle'
+                          className='text-primary'
+                        />
+                      </li>
+                      <li>
+                        <TranslatedExternalLink
+                          i18nKey='editor.help.documents.slideExample'
+                          href='https://github.com/codimd/server/issues'
+                          icon='dot-circle'
+                          className='text-primary'
+                        />
+                      </li>
+                    </ul>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col lg={8}>
+              <Card>
+                <Card.Header><Trans i18nKey='editor.help.cheatsheet.title'/></Card.Header>
+                <Card.Body>
+                  <Card.Text>
+                    <Table className="table-condensed table-cheatsheet">
+                      <thead>
+                        <tr>
+                          <td><Trans i18nKey='editor.help.cheatsheet.example'/></td>
+                          <td><Trans i18nKey='editor.help.cheatsheet.syntax'/></td>
+                        </tr>
+                      </thead>
+                      <tbody className="markdown-body"
+                        style={{ fontFamily: 'inherit', fontSize: '14px', padding: 0, maxWidth: 'inherit' }}>
+                        <tr>
+                          <td><Trans i18nKey='editor.editorToolbar.header'/></td>
+                          <td>
+                            <pre># <Trans i18nKey='editor.editorToolbar.header'/></pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <ul>
+                              <li><Trans i18nKey='editor.editorToolbar.unorderedList'/></li>
+                            </ul>
+                          </td>
+                          <td>
+                            <pre>- <Trans i18nKey='editor.editorToolbar.unorderedList'/></pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <ol>
+                              <li><Trans i18nKey='editor.editorToolbar.orderedList'/></li>
+                            </ol>
+                          </td>
+                          <td>
+                            <pre>1. <Trans i18nKey='editor.editorToolbar.orderedList'/></pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <ul>
+                              <li className="task-list-item">
+                                <input type="checkbox" className="task-list-item-checkbox" disabled={false}/>
+                                <label><Trans i18nKey='editor.editorToolbar.checkList'/></label>
+                              </li>
+                            </ul>
+                          </td>
+                          <td>
+                            <pre>- [ ] <Trans i18nKey='editor.editorToolbar.checkList'/></pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <blockquote><Trans i18nKey='editor.editorToolbar.blockquote'/></blockquote>
+                          </td>
+                          <td>
+                            <pre>> <Trans i18nKey='editor.editorToolbar.blockquote'/></pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><strong><Trans i18nKey='editor.editorToolbar.bold'/></strong></td>
+                          <td>
+                            <pre>**<Trans i18nKey='editor.editorToolbar.bold'/>**</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><i><Trans i18nKey='editor.editorToolbar.italic'/></i></td>
+                          <td>
+                            <pre>*<Trans i18nKey='editor.editorToolbar.italic'/>*</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><s><Trans i18nKey='editor.editorToolbar.strikethrough'/></s></td>
+                          <td>
+                            <pre>~~<Trans i18nKey='editor.editorToolbar.strikethrough'/>~~</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>19<sup>th</sup></td>
+                          <td>
+                            <pre>19^th^</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>H<sub>2</sub>O</td>
+                          <td>
+                            <pre>H~2~O</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <ins><Trans i18nKey='editor.help.cheatsheet.underlinedText'/></ins>
+                          </td>
+                          <td>
+                            <pre>++<Trans i18nKey='editor.help.cheatsheet.underlinedText'/>++</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <mark><Trans i18nKey='editor.help.cheatsheet.highlightedText'/></mark>
+                          </td>
+                          <td>
+                            <pre>==<Trans i18nKey='editor.help.cheatsheet.highlightedText'/>==</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><a href='https://example.com'><Trans i18nKey='editor.editorToolbar.link'/></a></td>
+                          <td>
+                            <pre>[link text](https://example.com)</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><Trans i18nKey='editor.editorToolbar.image'/></td>
+                          <td>
+                            <pre>![image alt](https:// "title")</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code><Trans i18nKey='editor.editorToolbar.code'/></code></td>
+                          <td>
+                            <pre>`<Trans i18nKey='editor.editorToolbar.code'/>`</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <pre style={{ border: 'none !important' }}>
+                              <code className="javascript hljs">
+                                <div className="wrapper">
+                                  <div className="gutter linenumber">
+                                    <span data-linenumber="1"/>
+                                  </div>
+                                  <div className="code">
+                                    <span className="hljs-keyword">var</span> x = <span className="hljs-number">5</span>;
+                                  </div>
+                                </div>
+                              </code>
+                            </pre>
+                          </td>
+                          <td>
+                            <pre>```javascript<br/>var x = 5;<br/>```</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><img alt=":smile:" className="emoji" src="./build/emojify.js/dist/images/basic/smile.png"
+                            title=":smile:"/></td>
+                          <td>
+                            <pre>:smile:</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>Extern</td>
+                          <td>
+                            <pre>{'{'}%youtube youtube_id %{'}'}</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>L<sup>a</sup>T<sub>e</sub>X</td>
+                          <td>
+                            <pre>$L^aT_eX$</pre>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <div className="alert alert-info">
+                              <p>
+                                <Trans i18nKey='editor.help.cheatsheet.exampleAlert'/>
+                              </p>
+                            </div>
+                          </td>
+                          <td>
+                            <pre>:::info<br/><Trans i18nKey='editor.help.cheatsheet.exampleAlert'/><br/>:::</pre>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </Table>
+                  </Card.Text>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+        </Modal.Body>
+      </Modal>
+    </Fragment>
+  )
+}

src/components/editor/task-bar/task-bar.tsx

@@ -7,6 +7,7 @@ import { EditorViewMode } from './editor-view-mode'
 import { Trans, useTranslation } from 'react-i18next'
 import { EditorMenu } from './editor-menu'
 import { ConnectionIndicator } from './connection-indicator'
+import { HelpButton } from './help-button'
 
 const TaskBar: React.FC = () => {
   useTranslation()
@@ -20,10 +21,7 @@ const TaskBar: React.FC = () => {
         </Navbar.Brand>
         <EditorViewMode/>
         <DarkModeButton/>
-        <Button className="ml-2 text-secondary" size="sm"
+        <HelpButton/>
-          variant="outline-light">
-          <FontAwesomeIcon icon="question-circle"/>
-        </Button>
       </Nav>
       <Nav className="d-flex align-items-center text-secondary">
         <Button className="ml-2 text-secondary" size="sm" variant="outline-light">

src/components/landing/landing-layout.tsx

@@ -6,7 +6,7 @@ import './layout/style/index.scss'
 
 export const LandingLayout: React.FC = ({ children }) => {
   return (
-    <Container>
+    <Container className="text-center text-white">
       <HeaderBar/>
       {children}
       <Footer/>

src/components/landing/layout/footer/powered-by-links.tsx

@@ -4,16 +4,12 @@ import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../../redux'
 import { ExternalLink } from '../../../links/external-link'
 import { TranslatedExternalLink } from '../../../links/translated-external-link'
+import { TranslatedInternalLink } from '../../../links/translated-internal-link'
 import { VersionInfo } from '../version-info/version-info'
 
 export const PoweredByLinks: React.FC = () => {
   useTranslation()
 
-  const defaultLinks =
-    {
-      releases: '/n/release-notes'
-    }
-
   const config = useSelector((state: ApplicationState) => state.backendConfig)
 
   return (
@@ -21,8 +17,10 @@ export const PoweredByLinks: React.FC = () => {
       <Trans i18nKey="landing.footer.poweredBy">
         <ExternalLink href="https://codimd.org" text="CodiMD"/>
       </Trans>
+      &nbsp;|&nbsp;
+      <TranslatedInternalLink path='/n/release-notes' i18nKey='landing.footer.releases'/>
       {
-        Object.entries({ ...defaultLinks, ...(config.specialLinks) }).map(([i18nKey, href]) =>
+        Object.entries({ ...config.specialLinks }).map(([i18nKey, href]) =>
           <Fragment key={i18nKey}>
             &nbsp;|&nbsp;
             <TranslatedExternalLink href={href} i18nKey={'landing.footer.' + i18nKey}/>

src/components/landing/layout/style/index.scss

@@ -7,8 +7,6 @@ html {
 }
 body {
   min-height: 100%;
-  color: #fff;
-  text-align: center;
   //text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
   font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
 }

src/components/links/external-link.tsx

@@ -4,12 +4,15 @@ import { IconProp } from '../../utils/iconProp'
 
 export interface ExternalLinkProp {
   href: string;
-  text: string;
   icon?: IconProp;
   className?: string
 }
 
-export const ExternalLink: React.FC<ExternalLinkProp> = ({ href, text, icon, className = 'text-light' }) => {
+export interface ExternalLinkTextProp {
+  text: string;
+}
+
+export const ExternalLink: React.FC<ExternalLinkProp & ExternalLinkTextProp> = ({ href, text, icon, className = 'text-light' }) => {
   return (
     <a href={href}
       target="_blank"
@@ -18,7 +21,7 @@ export const ExternalLink: React.FC<ExternalLinkProp> = ({ href, text, icon, cla
       {
         icon
           ? <Fragment>
-            <FontAwesomeIcon icon={icon}/>&nbsp;
+            <FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
           </Fragment>
           : null
       }

src/components/links/internal-link.tsx

@@ -0,0 +1,30 @@
+import React, { Fragment } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { LinkContainer } from 'react-router-bootstrap'
+import { IconProp } from '../../utils/iconProp'
+
+export interface InternalLinkProp {
+  path: string;
+  icon?: IconProp;
+  className?: string
+}
+
+export interface InternalLinkTextProp {
+  text: string;
+}
+
+export const InternalLink: React.FC<InternalLinkProp & InternalLinkTextProp> = ({ path, text, icon, className = 'text-light' }) => {
+  return (
+    <LinkContainer to={path}
+      className={className}>
+      {
+        icon
+          ? <Fragment>
+            <FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
+          </Fragment>
+          : null
+      }
+      {text}
+    </LinkContainer>
+  )
+}

src/components/links/translated-external-link.tsx

@@ -1,19 +1,17 @@
+import { StringMap, TOptionsBase } from 'i18next'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { IconProp } from '../../utils/iconProp'
+import { ExternalLink, ExternalLinkProp } from './external-link'
-import { ExternalLink } from './external-link'
 
 export interface TranslatedLinkProps {
   i18nKey: string;
-  href: string;
+  i18nOption?: (TOptionsBase & StringMap) | string
-  icon?: IconProp;
-  className?: string
 }
 
-const TranslatedExternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, ...props }) => {
+const TranslatedExternalLink: React.FC<TranslatedLinkProps & ExternalLinkProp> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
   return (
-    <ExternalLink text={t(i18nKey)} {...props}/>
+    <ExternalLink text={t(i18nKey, i18nOption)} {...props}/>
   )
 }
 

src/components/links/translated-internal-link.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { InternalLink, InternalLinkProp } from './internal-link'
+import { TranslatedLinkProps } from './translated-external-link'
+
+export const TranslatedInternalLink: React.FC<TranslatedLinkProps & InternalLinkProp> = ({ i18nKey, i18nOption, ...props }) => {
+  const { t } = useTranslation()
+  return (
+    <InternalLink text={t(i18nKey, i18nOption)} {...props}/>
+  )
+}

src/initializers/fontAwesome.ts

@@ -19,12 +19,15 @@ import {
   faColumns,
   faComment,
   faCopy,
+  faDotCircle,
   faDownload,
   faEye,
   faFileAlt,
   faFileCode,
   faGlobe,
+  faHashtag,
   faHistory,
+  faLanguage,
   faMoon,
   faPaste,
   faPencilAlt,
@@ -36,6 +39,7 @@ import {
   faSortDown,
   faSortUp,
   faSync,
+  faTag,
   faThumbtack,
   faTimes,
   faTrash,
@@ -50,5 +54,6 @@ export const setUpFontAwesome: (() => void) = () => {
     faThumbtack, faClock, faTimes, faGithub, faGitlab, faGoogle, faFacebook,
     faDropbox, faTwitter, faUsers, faAddressCard, faEye, faPencilAlt, faColumns,
     faMoon, faQuestionCircle, faShareSquare, faHistory, faFileCode, faPaste,
-    faCircle, faSort, faDownload, faUpload, faTrash, faSync, faSortUp, faSortDown, faCopy)
+    faCircle, faSort, faDownload, faUpload, faTrash, faSync, faSortUp, faSortDown, faCopy,
+    faHashtag, faLanguage, faTag, faDotCircle)
 }