New locale format (#94)

* Add new format for translation files
Co-authored-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

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

@@ -1,6 +1,6 @@
 import React, { Fragment, useEffect, useState } from 'react'
 import { useLocation } from 'react-router'
-import { setUp, InitTask } from '../../initializers'
+import { InitTask, setUp } from '../../initializers'
 import './application-loader.scss'
 
 import { LoadingScreen } from './loading-screen'
@@ -24,7 +24,7 @@ export const ApplicationLoader: React.FC = ({ children }) => {
       return
     }
     setTasksAlreadyTriggered(true)
-    const baseUrl:string = window.location.pathname.replace(pathname, '') + '/'
+    const baseUrl: string = window.location.pathname.replace(pathname, '') + '/'
     console.debug('Base URL is', baseUrl)
     setInitTasks(setUp(baseUrl))
   }, [tasksAlreadyTriggered, pathname])

src/components/editor/task-bar/dark-mode-button.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next';
 
 const DarkModeButton: React.FC = () => {
+  const { t } = useTranslation();
   const [buttonState, setButtonState] = useState(false)
   const buttonToggle = () => {
     setButtonState(prevState => !prevState)
@@ -10,7 +12,12 @@ const DarkModeButton: React.FC = () => {
 
   return (
     <ToggleButtonGroup type="checkbox" defaultValue={[]} name="dark-mode" className="ml-2" value={buttonState ? ['dark'] : ['']}>
-      <ToggleButton variant={ buttonState ? 'secondary' : 'light' } className={ buttonState ? 'text-white' : 'text-secondary' } onChange={buttonToggle} value={'dark'}>
+      <ToggleButton
+        title={ buttonState ? t('editor.darkMode.switchToDark') : t('editor.darkMode.switchToLight')}
+        variant={ buttonState ? 'secondary' : 'light' }
+        className={ buttonState ? 'text-white' : 'text-secondary' }
+        onChange={buttonToggle} value={'dark'}
+      >
         <FontAwesomeIcon icon="moon"/>
       </ToggleButton>
     </ToggleButtonGroup>

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

@@ -8,24 +8,27 @@ const EditorMenu: React.FC = () => {
   return (
     <Dropdown className="small" alignRight={true}>
       <Dropdown.Toggle variant="light" size="sm" id="editor-menu" className="text-secondary">
-        <Trans i18nKey="menu"/>
+        <Trans i18nKey="editor.menu.menu"/>
       </Dropdown.Toggle>
 
       <Dropdown.Menu>
         <Dropdown.Header>
-          <Trans i18nKey="extra"/>
+          <Trans i18nKey="editor.menu.extra"/>
         </Dropdown.Header>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="history"/> <Trans i18nKey="revision"/>
+          <FontAwesomeIcon icon="history"/> <Trans i18nKey="editor.menu.revision"/>
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="tv"/> <Trans i18nKey="slideMode"/>
+          <FontAwesomeIcon icon="tv"/> <Trans i18nKey="editor.menu.slideMode"/>
+        </Dropdown.Item>
+        <Dropdown.Item className="small">
+          <FontAwesomeIcon icon="trash"/> <Trans i18nKey="editor.menu.deleteNote"/>
         </Dropdown.Item>
 
         <Dropdown.Divider/>
 
         <Dropdown.Header>
-          <Trans i18nKey="export"/>
+          <Trans i18nKey="common.export"/>
         </Dropdown.Header>
         <Dropdown.Item className="small">
           <FontAwesomeIcon icon={['fab', 'dropbox']}/> Dropbox
@@ -37,7 +40,7 @@ const EditorMenu: React.FC = () => {
         <Dropdown.Divider/>
 
         <Dropdown.Header>
-          <Trans i18nKey="import"/>
+          <Trans i18nKey="common.import"/>
         </Dropdown.Header>
         <Dropdown.Item className="small">
           <FontAwesomeIcon icon={['fab', 'dropbox']}/> Dropbox
@@ -46,13 +49,13 @@ const EditorMenu: React.FC = () => {
           <FontAwesomeIcon icon={['fab', 'github']}/> Gist
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="paste"/> <Trans i18nKey="clipboard"/>
+          <FontAwesomeIcon icon="paste"/> <Trans i18nKey="editor.import.clipboard"/>
         </Dropdown.Item>
 
         <Dropdown.Divider/>
 
         <Dropdown.Header>
-          <Trans i18nKey="download"/>
+          <Trans i18nKey="editor.menu.download"/>
         </Dropdown.Header>
         <Dropdown.Item className="small">
           <FontAwesomeIcon icon="file-alt"/> Markdown
@@ -61,7 +64,7 @@ const EditorMenu: React.FC = () => {
           <FontAwesomeIcon icon="file-code"/> HTML
         </Dropdown.Item>
         <Dropdown.Item className="small">
-          <FontAwesomeIcon icon="file-code"/> Raw HTML
+          <FontAwesomeIcon icon="file-code"/> <Trans i18nKey='editor.export.rawHtml'/>
         </Dropdown.Item>
 
       </Dropdown.Menu>

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

@@ -5,8 +5,10 @@ import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../redux'
 import { EditorMode } from '../../../redux/editor/types'
 import { setEditorModeConfig } from '../../../redux/editor/methods'
+import { useTranslation } from 'react-i18next'
 
 const EditorViewMode: React.FC = () => {
+  const { t } = useTranslation();
   const editorConfig = useSelector((state: ApplicationState) => state.editorConfig)
   return (
     <ToggleButtonGroup
@@ -14,13 +16,13 @@ const EditorViewMode: React.FC = () => {
       name="options"
       defaultValue={editorConfig.editorMode}
       onChange={(value: EditorMode) => { setEditorModeConfig(value) }}>
-      <ToggleButton value={EditorMode.PREVIEW} variant="outline-secondary">
+      <ToggleButton value={EditorMode.PREVIEW} variant="outline-secondary" title={t('editor.viewMode.view')}>
         <FontAwesomeIcon icon="eye"/>
       </ToggleButton>
-      <ToggleButton value={EditorMode.BOTH} variant="outline-secondary">
+      <ToggleButton value={EditorMode.BOTH} variant="outline-secondary" title={t('editor.viewMode.both')}>
         <FontAwesomeIcon icon="columns"/>
       </ToggleButton>
-      <ToggleButton value={EditorMode.EDITOR} variant="outline-secondary">
+      <ToggleButton value={EditorMode.EDITOR} variant="outline-secondary" title={t('editor.viewMode.edit')}>
         <FontAwesomeIcon icon="pencil-alt"/>
       </ToggleButton>
     </ToggleButtonGroup>

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

@@ -27,10 +27,10 @@ const TaskBar: React.FC = () => {
       </Nav>
       <Nav className="d-flex align-items-center text-secondary">
         <Button className="ml-2 text-secondary" size="sm" variant="outline-light">
-          <FontAwesomeIcon icon="plus"/> <Trans i18nKey="new"/>
+          <FontAwesomeIcon icon="plus"/> <Trans i18nKey="editor.menu.new"/>
         </Button>
         <Button className="ml-2 text-secondary" size="sm" variant="outline-light">
-          <FontAwesomeIcon icon="share-square"/> <Trans i18nKey="publish"/>
+          <FontAwesomeIcon icon="share-square"/> <Trans i18nKey="editor.menu.publish"/>
         </Button>
         <div className="text-secondary">
           <EditorMenu/>

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

@@ -18,14 +18,14 @@ export const PoweredByLinks: React.FC = () => {
 
   return (
     <p>
-      <Trans i18nKey="poweredBy">
+      <Trans i18nKey="landing.footer.poweredBy">
         <ExternalLink href="https://codimd.org" text="CodiMD"/>
       </Trans>
       {
         Object.entries({ ...defaultLinks, ...(config.specialLinks) }).map(([i18nKey, href]) =>
           <Fragment key={i18nKey}>
             &nbsp;|&nbsp;
-            <TranslatedExternalLink href={href} i18nKey={i18nKey}/>
+            <TranslatedExternalLink href={href} i18nKey={'landing.footer.' + i18nKey}/>
           </Fragment>
         )
       }

src/components/landing/layout/footer/social-links.tsx

@@ -6,7 +6,7 @@ const SocialLink: React.FC = () => {
   useTranslation()
   return (
     <p>
-      <Trans i18nKey="followUs" components={[
+      <Trans i18nKey="landing.footer.followUs" components={[
         <ExternalLink href="https://github.com/codimd/server" icon={['fab', 'github']} text="GitHub"/>,
         <ExternalLink href="https://community.codimd.org" icon={['fab', 'discourse']} text="Discourse"/>,
         <ExternalLink href="https://riot.im/app/#/room/#codimd:matrix.org" icon="comment" text="Riot"/>,

src/components/landing/layout/navigation/header-bar/header-bar.tsx

@@ -19,10 +19,10 @@ const HeaderBar: React.FC = () => {
     <Navbar className="justify-content-between">
       <div className="nav header-nav">
         <HeaderNavLink to="/intro">
-          <Trans i18nKey="intro"/>
+          <Trans i18nKey="landing.navigation.intro"/>
         </HeaderNavLink>
         <HeaderNavLink to="/history">
-          <Trans i18nKey="history"/>
+          <Trans i18nKey="landing.navigation.history"/>
         </HeaderNavLink>
       </div>
       <div className="d-inline-flex">

src/components/landing/layout/navigation/new-guest-note-button.tsx

@@ -5,16 +5,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Trans, useTranslation } from 'react-i18next'
 
 export const NewGuestNoteButton: React.FC = () => {
-  const { i18n } = useTranslation()
+  const { t } = useTranslation()
   return (
-    <LinkContainer to={'/new'} title={i18n.t('newGuestNote')}>
+    <LinkContainer to={'/new'} title={t('landing.navigation.newGuestNote')}>
       <Button
         variant="primary"
         size="sm"
         className="d-inline-flex align-items-center">
         <FontAwesomeIcon icon="plus" className="mr-1"/>
         <span>
-          <Trans i18nKey='newGuestNote'/>
+          <Trans i18nKey='landing.navigation.newGuestNote'/>
         </span>
       </Button>
     </LinkContainer>)

src/components/landing/layout/navigation/new-user-note-button.tsx

@@ -5,16 +5,16 @@ import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 
 export const NewUserNoteButton: React.FC = () => {
-  const { i18n } = useTranslation()
+  const { t } = useTranslation()
   return (
-    <LinkContainer to={'/new'} title={i18n.t('newNote')}>
+    <LinkContainer to={'/new'} title={t('landing.navigation.newNote')}>
       <Button
         variant="primary"
         size="sm"
         className="d-inline-flex align-items-center">
         <FontAwesomeIcon icon="plus" className="mr-1"/>
         <span>
-          <Trans i18nKey='newNote'/>
+          <Trans i18nKey='landing.navigation.newNote'/>
         </span>
       </Button>
     </LinkContainer>

src/components/landing/layout/navigation/sign-in-button.tsx

@@ -4,15 +4,15 @@ import { Trans, useTranslation } from 'react-i18next'
 import { LinkContainer } from 'react-router-bootstrap'
 
 export const SignInButton: React.FC = () => {
-  const { i18n } = useTranslation()
+  const { t } = useTranslation()
 
   return (
-    <LinkContainer to="/login" title={i18n.t('signIn')}>
+    <LinkContainer to="/login" title={t('login.signIn')}>
       <Button
         variant="success"
         size="sm"
       >
-        <Trans i18nKey="signIn"/>
+        <Trans i18nKey="login.signIn"/>
       </Button>
     </LinkContainer>
   )

src/components/landing/layout/navigation/user-dropdown/user-dropdown.tsx

@@ -5,10 +5,11 @@ import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../../../redux'
 import { LinkContainer } from 'react-router-bootstrap'
 import { clearUser } from '../../../../../redux/user/methods'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { UserAvatar } from '../../user-avatar/user-avatar'
 
 export const UserDropdown: React.FC = () => {
+  useTranslation();
   const user = useSelector((state: ApplicationState) => state.user)
 
   return (
@@ -21,25 +22,25 @@ export const UserDropdown: React.FC = () => {
         <LinkContainer to={'/features'}>
           <Dropdown.Item>
             <FontAwesomeIcon icon="bolt" fixedWidth={true} className="mr-2"/>
-            <Trans i18nKey="features"/>
+            <Trans i18nKey="editor.help.documents.features"/>
           </Dropdown.Item>
         </LinkContainer>
         <LinkContainer to={'/me/export'}>
           <Dropdown.Item>
             <FontAwesomeIcon icon="cloud-download-alt" fixedWidth={true} className="mr-2"/>
-            <Trans i18nKey="exportUserData"/>
+            <Trans i18nKey="profile.exportUserData"/>
           </Dropdown.Item>
         </LinkContainer>
         <Dropdown.Item href="#">
           <FontAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
-          <Trans i18nKey="deleteUser"/>
+          <Trans i18nKey="profile.deleteUser"/>
         </Dropdown.Item>
         <Dropdown.Item
           onClick={() => {
             clearUser()
           }}>
           <FontAwesomeIcon icon="sign-out-alt" fixedWidth={true} className="mr-2"/>
-          <Trans i18nKey="signOut"/>
+          <Trans i18nKey="login.signOut"/>
         </Dropdown.Item>
       </Dropdown.Menu>
     </Dropdown>)

src/components/landing/layout/user-avatar/user-avatar.tsx

@@ -8,6 +8,7 @@ export interface UserAvatarProps {
 }
 
 const UserAvatar: React.FC<UserAvatarProps> = ({ name, photo, additionalClasses = '' }) => {
+  // ToDo: add Translation Key for Avatar of ${name}
   return (
     <span className={'d-inline-flex align-items-center ' + additionalClasses}>
       <img

src/components/landing/layout/version-info/version-info.tsx

@@ -23,9 +23,9 @@ export const VersionInfo: React.FC = () => {
       <h5>{title}</h5>
       <VersionInputField version={version}/>
       {sourceCodeLink
-        ? <TranslatedExternalLink i18nKey={'sourceCode'} className={'btn btn-sm btn-primary d-block mb-2'} href={sourceCodeLink}/> : null}
+        ? <TranslatedExternalLink i18nKey={'landing.versionInfo.sourceCode'} className={'btn btn-sm btn-primary d-block mb-2'} href={sourceCodeLink}/> : null}
       {issueTrackerLink
-        ? <TranslatedExternalLink i18nKey={'issueTracker'} className={'btn btn-sm btn-primary d-block mb-2'} href={issueTrackerLink}/> : null}
+        ? <TranslatedExternalLink i18nKey={'landing.versionInfo.issueTracker'} className={'btn btn-sm btn-primary d-block mb-2'} href={issueTrackerLink}/> : null}
     </Col>
   )
 
@@ -34,15 +34,15 @@ export const VersionInfo: React.FC = () => {
       <Link to={'#'} className={'text-light'} onClick={handleShow}><Trans i18nKey={'versionInfo'}/></Link>
       <Modal show={show} onHide={handleClose} animation={true}>
         <Modal.Body className="text-dark">
-          <h3><Trans i18nKey={'youAreUsing'}/></h3>
+          <h3><Trans i18nKey={'landing.versionInfo.title'}/></h3>
           <Row>
-            {column(t('serverVersion'), serverVersion.version, serverVersion.sourceCodeUrl, serverVersion.issueTrackerUrl)}
-            {column(t('clientVersion'), frontendVersion.version, frontendVersion.sourceCodeUrl, frontendVersion.issueTrackerUrl)}
+            {column(t('landing.versionInfo.serverVersion'), serverVersion.version, serverVersion.sourceCodeUrl, serverVersion.issueTrackerUrl)}
+            {column(t('landing.versionInfo.clientVersion'), frontendVersion.version, frontendVersion.sourceCodeUrl, frontendVersion.issueTrackerUrl)}
           </Row>
         </Modal.Body>
         <Modal.Footer>
           <Button variant="secondary" onClick={handleClose}>
-            <Trans i18nKey={'close'}/>
+            <Trans i18nKey={'common.close'}/>
           </Button>
         </Modal.Footer>
       </Modal>

src/components/landing/layout/version-info/version-input-field.tsx

@@ -1,13 +1,14 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { Fragment, useRef, useState } from 'react'
 import { Button, FormControl, InputGroup, Overlay, Tooltip } from 'react-bootstrap'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 
 export interface VersionInputFieldProps {
   version: string
 }
 
 export const VersionInputField: React.FC<VersionInputFieldProps> = ({ version }) => {
+  useTranslation();
   const inputField = useRef<HTMLInputElement>(null)
   const [showCopiedTooltip, setShowCopiedTooltip] = useState(false)
 
@@ -25,7 +26,7 @@ export const VersionInputField: React.FC<VersionInputFieldProps> = ({ version })
       <Overlay target={inputField} show={showCopiedTooltip} placement="top">
         {(props) => (
           <Tooltip id={'copied_' + version} {...props}>
-            <Trans i18nKey={'successfullyCopied'}/>
+            <Trans i18nKey={'landing.versionInfo.successfullyCopied'}/>
           </Tooltip>
         )}
       </Overlay>

src/components/landing/pages/history/history-card/history-card.tsx

@@ -4,12 +4,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { PinButton } from '../common/pin-button'
 import { CloseButton } from '../common/close-button'
 import moment from 'moment'
-import { useTranslation } from 'react-i18next'
 import { HistoryEntryProps } from '../history-content/history-content'
 import { formatHistoryDate } from '../../../../../utils/historyUtils'
 
 export const HistoryCard: React.FC<HistoryEntryProps> = ({ entry, onPinClick }) => {
-  useTranslation()
   return (
     <div className="p-2 col-xs-12 col-sm-6 col-md-6 col-lg-4">
       <Card className="p-0" text={'dark'} bg={'light'}>

src/components/landing/pages/history/history-content/history-content.tsx

@@ -2,7 +2,7 @@ import React, { Fragment, useState } from 'react'
 import { HistoryEntry, pinClick } from '../history'
 import { HistoryTable } from '../history-table/history-table'
 import { Alert, Row } from 'react-bootstrap'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { HistoryCardList } from '../history-card/history-card-list'
 import { ViewStateEnum } from '../history-toolbar/history-toolbar'
 import { PagerPagination } from '../../../../pagination/pager-pagination'
@@ -26,6 +26,7 @@ export interface HistoryEntriesProps {
 }
 
 export const HistoryContent: React.FC<HistoryContentProps> = ({ viewState, entries, onPinClick }) => {
+  useTranslation()
   const [pageIndex, setPageIndex] = useState(0)
   const [lastPageIndex, setLastPageIndex] = useState(0)
 
@@ -33,7 +34,7 @@ export const HistoryContent: React.FC<HistoryContentProps> = ({ viewState, entri
     return (
       <Row className={'justify-content-center'}>
         <Alert variant={'secondary'}>
-          <Trans i18nKey={'noHistory'}/>
+          <Trans i18nKey={'landing.history.noHistory'}/>
         </Alert>
       </Row>
     )

src/components/landing/pages/history/history-table/history-table-row.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
 import { PinButton } from '../common/pin-button'
 import { CloseButton } from '../common/close-button'
-import { useTranslation } from 'react-i18next'
 import { HistoryEntryProps } from '../history-content/history-content'
 import { formatHistoryDate } from '../../../../../utils/historyUtils'
 import { Badge } from 'react-bootstrap'
 
 export const HistoryTableRow: React.FC<HistoryEntryProps> = ({ entry, onPinClick }) => {
-  useTranslation()
   return (
     <tr>
       <td>{entry.title}</td>

src/components/landing/pages/history/history-table/history-table.tsx

@@ -2,18 +2,19 @@ import React from 'react'
 import { Table } from 'react-bootstrap'
 import { HistoryTableRow } from './history-table-row'
 import { HistoryEntriesProps } from '../history-content/history-content'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { Pager } from '../../../../pagination/pager'
 
 export const HistoryTable: React.FC<HistoryEntriesProps> = ({ entries, onPinClick, pageIndex, onLastPageIndexChange }) => {
+  useTranslation()
   return (
     <Table striped bordered hover size="sm" variant="dark">
       <thead>
         <tr>
-          <th><Trans i18nKey={'title'}/></th>
-          <th><Trans i18nKey={'lastVisit'}/></th>
-          <th><Trans i18nKey={'tags'}/></th>
-          <th><Trans i18nKey={'actions'}/></th>
+          <th><Trans i18nKey={'landing.history.tableHeader.title'}/></th>
+          <th><Trans i18nKey={'landing.history.tableHeader.lastVisit'}/></th>
+          <th><Trans i18nKey={'landing.history.tableHeader.tags'}/></th>
+          <th><Trans i18nKey={'landing.history.tableHeader.actions'}/></th>
         </tr>
       </thead>
       <tbody>

src/components/landing/pages/history/history-toolbar/clear-history-button.tsx

@@ -16,20 +16,22 @@ export const ClearHistoryButton: React.FC<ClearHistoryButtonProps> = ({ onClearH
 
   return (
     <Fragment>
-      <Button variant={'light'} title={t('clearHistory')} onClick={handleShow}>
+      <Button variant={'light'} title={t('landing.history.toolbar.clear')} onClick={handleShow}>
         <FontAwesomeIcon icon={'trash'}/>
       </Button>
-      <Modal show={show} onHide={handleClose} animation={true} size="sm">
+      <Modal show={show} onHide={handleClose} animation={true} className="text-dark">
+        <Modal.Header closeButton>
+          <Modal.Title>
+            <Trans i18nKey={'landing.history.modal.clearHistory.title'}/>
+          </Modal.Title>
+        </Modal.Header>
         <Modal.Body className="text-dark">
-          <h5><Trans i18nKey={'clearHistoryQuestion'}/></h5>
-          <h6><Trans i18nKey={'clearHistoryDisclaimer'}/></h6>
+            <h5><Trans i18nKey={'landing.history.modal.clearHistory.question'}/></h5>
+          <h6><Trans i18nKey={'landing.history.modal.clearHistory.disclaimer'}/></h6>
         </Modal.Body>
         <Modal.Footer>
-          <Button variant="secondary" onClick={handleClose}>
-            <Trans i18nKey={'close'}/>
-          </Button>
           <Button variant="danger" onClick={onClearHistory}>
-            <Trans i18nKey={'clearHistory'}/>
+            <Trans i18nKey={'landing.history.toolbar.clear'}/>
           </Button>
         </Modal.Footer>
       </Modal>

src/components/landing/pages/history/history-toolbar/history-toolbar.tsx

@@ -74,52 +74,52 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
 
   return (
     <Form inline={true}>
-      <InputGroup className={'mr-1'}>
-        <Typeahead id={'tagsSelection'} options={tags} multiple={true} placeholder={t('selectTags')}
+      <InputGroup className={'mr-1 mb-1'}>
+        <Typeahead id={'tagsSelection'} options={tags} multiple={true} placeholder={t('landing.history.toolbar.selectTags')}
           onChange={selectedTagsChanged}/>
       </InputGroup>
-      <InputGroup className={'mr-1'}>
+      <InputGroup className={'mr-1 mb-1'}>
         <FormControl
-          placeholder={t('searchKeywords')}
-          aria-label={t('searchKeywords')}
+          placeholder={t('landing.history.toolbar.searchKeywords')}
+          aria-label={t('landing.history.toolbar.searchKeywords')}
           onChange={keywordSearchChanged}
         />
       </InputGroup>
-      <InputGroup className={'mr-1'}>
+      <InputGroup className={'mr-1 mb-1'}>
         <SortButton onChange={titleSortChanged} direction={state.titleSortDirection} variant={'light'}><Trans
-          i18nKey={'sortByTitle'}/></SortButton>
+          i18nKey={'landing.history.toolbar.sortByTitle'}/></SortButton>
       </InputGroup>
-      <InputGroup className={'mr-1'}>
+      <InputGroup className={'mr-1 mb-1'}>
         <SortButton onChange={lastVisitedSortChanged} direction={state.lastVisitedSortDirection}
-          variant={'light'}><Trans i18nKey={'sortByLastVisited'}/></SortButton>
+          variant={'light'}><Trans i18nKey={'landing.history.toolbar.sortByLastVisited'}/></SortButton>
       </InputGroup>
-      <InputGroup className={'mr-1'}>
-        <Button variant={'light'} title={t('exportHistory')}>
+      <InputGroup className={'mr-1 mb-1'}>
+        <Button variant={'light'} title={t('landing.history.toolbar.export')}>
           <FontAwesomeIcon icon={'download'}/>
         </Button>
       </InputGroup>
-      <InputGroup className={'mr-1'}>
-        <Button variant={'light'} title={t('importHistory')}>
+      <InputGroup className={'mr-1 mb-1'}>
+        <Button variant={'light'} title={t('landing.history.toolbar.import')}>
           <FontAwesomeIcon icon={'upload'}/>
         </Button>
       </InputGroup>
-      <InputGroup className={'mr-1'}>
+      <InputGroup className={'mr-1 mb-1'}>
         <ClearHistoryButton onClearHistory={onClearHistory}/>
       </InputGroup>
-      <InputGroup className={'mr-1'}>
-        <Button variant={'light'} title={t('refreshHistory')}>
+      <InputGroup className={'mr-1 mb-1'}>
+        <Button variant={'light'} title={t('landing.history.toolbar.refresh')}>
           <FontAwesomeIcon icon={'sync'}/>
         </Button>
       </InputGroup>
-      <InputGroup className={'mr-1'}>
+      <InputGroup className={'mr-1 mb-1'}>
         <ToggleButtonGroup type="radio" name="options" value={state.viewState}
           onChange={(newViewState: ViewStateEnum) => {
             toggleViewChanged(newViewState)
           }}>
           <ToggleButton className={'btn-light'} value={ViewStateEnum.CARD}><Trans
-            i18nKey={'cards'}/></ToggleButton>
+            i18nKey={'landing.history.toolbar.cards'}/></ToggleButton>
           <ToggleButton className={'btn-light'} value={ViewStateEnum.TABLE}><Trans
-            i18nKey={'table'}/></ToggleButton>
+            i18nKey={'landing.history.toolbar.table'}/></ToggleButton>
         </ToggleButtonGroup>
       </InputGroup>
     </Form>

src/components/landing/pages/history/history.tsx

@@ -60,8 +60,8 @@ export const History: React.FC = () => {
 
   return (
     <Fragment>
-      <h1 className="mb-4"><Trans i18nKey="history"/></h1>
-      <Row className={'justify-content-center mb-3'}>
+      <h1 className="mb-4"><Trans i18nKey="landing.navigation.history"/></h1>
+      <Row className={'justify-content-center mt-5 mb-3'}>
         <HistoryToolbar
           onSettingsChange={setViewState}
           tags={tags}

src/components/landing/pages/intro/cover-buttons/cover-buttons.tsx

@@ -23,12 +23,12 @@ export const CoverButtons: React.FC = () => {
           variant="success"
           size="lg"
         >
-          <Trans i18nKey="signIn"/>
+          <Trans i18nKey="login.signIn"/>
         </Button>
       </Link>
 
       <span className="m-2">
-        <Trans i18nKey="or"/>
+        <Trans i18nKey="common.or"/>
       </span>
 
       <Link to="/features">
@@ -37,7 +37,7 @@ export const CoverButtons: React.FC = () => {
           variant="primary"
           size="lg"
         >
-          <Trans i18nKey="exploreFeatures"/>
+          <Trans i18nKey="landing.intro.exploreFeatures"/>
         </Button>
       </Link>
     </div>

src/components/landing/pages/intro/feature-links.tsx

@@ -12,7 +12,7 @@ export const FeatureLinks: React.FC = () => {
         <Link to={'/features#Share-Notes'} className="text-light">
           <FontAwesomeIcon icon="bolt" size="3x"/>
           <h5>
-            <Trans i18nKey="featureCollaboration"/>
+            <Trans i18nKey="landing.intro.features.collaboration"/>
           </h5>
         </Link>
       </Col>
@@ -20,7 +20,7 @@ export const FeatureLinks: React.FC = () => {
         <Link to={'/features#MathJax'} className="text-light">
           <FontAwesomeIcon icon="chart-bar" size="3x"/>
           <h5>
-            <Trans i18nKey="featureMathJax"/>
+            <Trans i18nKey="landing.intro.features.mathJax"/>
           </h5>
         </Link>
       </Col>
@@ -28,7 +28,7 @@ export const FeatureLinks: React.FC = () => {
         <Link to={'/features#Slide-Mode'} className="text-light">
           <FontAwesomeIcon icon="tv" size="3x"/>
           <h5>
-            <Trans i18nKey="featureSlides"/>
+            <Trans i18nKey="landing.intro.features.slides"/>
           </h5>
         </Link>
       </Col>

src/components/landing/pages/intro/intro.tsx

@@ -6,7 +6,7 @@ import { FeatureLinks } from './feature-links'
 import { CoverButtons } from './cover-buttons/cover-buttons'
 
 const Intro: React.FC = () => {
-  useTranslation()
+  const { t } = useTranslation()
 
   return (
     <div>
@@ -14,12 +14,12 @@ const Intro: React.FC = () => {
         <FontAwesomeIcon icon="file-alt"/> CodiMD
       </h1>
       <p className="lead mb-5">
-        <Trans i18nKey="coverSlogan"/>
+        <Trans i18nKey="app.slogan"/>
       </p>
 
       <CoverButtons/>
 
-      <img alt="CodiMD Screenshot" src={screenshot} className="img-fluid mb-5"/>
+      <img alt={t("landing.intro.screenShotAltText")} src={screenshot} className="img-fluid mb-5"/>
       <FeatureLinks/>
     </div>
   )

src/components/landing/pages/login/auth/via-email.tsx

@@ -24,7 +24,7 @@ export const ViaEMail: React.FC = () => {
     <Card className="bg-dark mb-4">
       <Card.Body>
         <Card.Title>
-          <Trans i18nKey="signInVia" values={{ service: 'E-Mail' }}/>
+          <Trans i18nKey="login.signInVia" values={{ service: 'E-Mail' }}/>
         </Card.Title>
         <Form onSubmit={onFormSubmit}>
           <Form.Group controlId="email">
@@ -32,7 +32,7 @@ export const ViaEMail: React.FC = () => {
               isInvalid={error}
               type="email"
               size="sm"
-              placeholder={t('email')}
+              placeholder={t('login.auth.email')}
               onChange={(event) => setEmail(event.currentTarget.value)} className="bg-dark text-white"
             />
           </Form.Group>
@@ -42,20 +42,20 @@ export const ViaEMail: React.FC = () => {
               isInvalid={error}
               type="password"
               size="sm"
-              placeholder={t('password')}
+              placeholder={t('login.auth.password')}
               onChange={(event) => setPassword(event.currentTarget.value)}
               className="bg-dark text-white"/>
           </Form.Group>
 
           <Alert className="small" show={error} variant="danger">
-            <Trans i18nKey="errorEmailLogin"/>
+            <Trans i18nKey="login.auth.error.emailLogin"/>
           </Alert>
 
           <Button
             type="submit"
 
             variant="primary">
-            <Trans i18nKey="signIn"/>
+            <Trans i18nKey="login.signIn"/>
           </Button>
         </Form>
       </Card.Body>

src/components/landing/pages/login/auth/via-ldap.tsx

@@ -35,7 +35,7 @@ export const ViaLdap: React.FC = () => {
     <Card className="bg-dark mb-4">
       <Card.Body>
         <Card.Title>
-          <Trans i18nKey="signInVia" values={{ service: name }}/>
+          <Trans i18nKey="login.signInVia" values={{ service: name }}/>
         </Card.Title>
         <Form onSubmit={onFormSubmit}>
           <Form.Group controlId="username">
@@ -43,7 +43,7 @@ export const ViaLdap: React.FC = () => {
               isInvalid={error}
               type="text"
               size="sm"
-              placeholder={t('username')}
+              placeholder={t('login.auth.username')}
               onChange={(event) => setUsername(event.currentTarget.value)} className="bg-dark text-white"
             />
           </Form.Group>
@@ -53,19 +53,19 @@ export const ViaLdap: React.FC = () => {
               isInvalid={error}
               type="password"
               size="sm"
-              placeholder={t('password')}
+              placeholder={t('login.auth.password')}
               onChange={(event) => setPassword(event.currentTarget.value)}
               className="bg-dark text-white"/>
           </Form.Group>
 
           <Alert className="small" show={error} variant="danger">
-            <Trans i18nKey="errorLdapLogin"/>
+            <Trans i18nKey="login.auth.error.ldapLogin"/>
           </Alert>
 
           <Button
             type="submit"
             variant="primary">
-            <Trans i18nKey="signIn"/>
+            <Trans i18nKey="login.signIn"/>
           </Button>
         </Form>
       </Card.Body>

src/components/landing/pages/login/auth/via-openid.tsx

@@ -22,7 +22,7 @@ export const ViaOpenId: React.FC = () => {
     <Card className="bg-dark mb-4">
       <Card.Body>
         <Card.Title>
-          <Trans i18nKey="signInVia" values={{ service: 'OpenID' }}/>
+          <Trans i18nKey="login.signInVia" values={{ service: 'OpenID' }}/>
         </Card.Title>
 
         <Form onSubmit={onFormSubmit}>
@@ -38,13 +38,13 @@ export const ViaOpenId: React.FC = () => {
           </Form.Group>
 
           <Alert className="small" show={error} variant="danger">
-            <Trans i18nKey="errorOpenIdLogin"/>
+            <Trans i18nKey="login.auth.error.openIdLogin"/>
           </Alert>
 
           <Button
             type="submit"
             variant="primary">
-            <Trans i18nKey="signIn"/>
+            <Trans i18nKey="login.signIn"/>
           </Button>
         </Form>
       </Card.Body>

src/components/landing/pages/login/login.tsx

@@ -53,7 +53,7 @@ export const Login: React.FC = () => {
           <Card className="bg-dark mb-4">
             <Card.Body>
               <Card.Title>
-                <Trans i18nKey="signInVia" values={{ service: '' }}/>
+                <Trans i18nKey="login.signInVia" values={{ service: '' }}/>
               </Card.Title>
               {
                 Object.values(OneClickType)