Extract URLs in extra file and change riot link to element-link (#551)

* Update matrix chat link to new element URL

* Correct other usages of the element link

* Extracted static external links into separate file

Author: ErikMichelson

cypress/integration/link.spec.ts

@@ -138,8 +138,8 @@ describe('Links Intro', () => {
 
   describe('Follow us Links', () => {
     it('Github', () => {
-      cy.get('a[href="https://github.com/codimd/server"]')
-        .checkExternalLink('https://github.com/codimd/server')
+      cy.get('a[href="https://github.com/codimd/"]')
+        .checkExternalLink('https://github.com/codimd/')
     })
 
     it('Discourse', () => {
@@ -148,13 +148,13 @@ describe('Links Intro', () => {
     })
 
     it('Matrix', () => {
-      cy.get('a[href="https://riot.im/app/#/room/#hedgedoc:matrix.org"]')
-        .checkExternalLink('https://riot.im/app/#/room/#hedgedoc:matrix.org')
+      cy.get('a[href="https://app.element.io/#/room/#hedgedoc:matrix.org"]')
+        .checkExternalLink('https://app.element.io/#/room/#hedgedoc:matrix.org')
     })
 
     it('Mastodon', () => {
-      cy.get('a[href="https://social.codimd.org/mastodon"]')
-        .checkExternalLink('https://social.codimd.org/mastodon')
+      cy.get('a[href="https://social.codimd.org"]')
+        .checkExternalLink('https://social.codimd.org')
     })
 
     it('POEditor', () => {

src/components/editor/app-bar/help-button/links.tsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import { Col, Row } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../../../redux'
 import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
 import { TranslatedInternalLink } from '../../../common/links/translated-internal-link'
+import links from '../../../../links.json'
 
 export const Links: React.FC = () => {
   useTranslation()
+
+  const backendIssueTracker = useSelector((state: ApplicationState) => state.config.version.issueTrackerUrl)
   return (
     <Row className={'justify-content-center pt-4'}>
       <Col lg={4}>
@@ -15,7 +20,7 @@ export const Links: React.FC = () => {
             <li>
               <TranslatedExternalLink
                 i18nKey='editor.help.contacts.community'
-                href='https://community.codimd.org/'
+                href={links.community}
                 icon='users'
                 className='text-primary'
               />
@@ -24,23 +29,23 @@ export const Links: React.FC = () => {
               <TranslatedExternalLink
                 i18nKey='editor.help.contacts.meetUsOn'
                 i18nOption={{ service: 'Matrix' }}
-                href='https://riot.im/app/#/room/#hedgedoc:matrix.org'
+                href={links.chatElement}
                 icon='hashtag'
                 className='text-primary'
               />
             </li>
             <li>
               <TranslatedExternalLink
                 i18nKey='editor.help.contacts.reportIssue'
-                href='https://github.com/codimd/server/issues'
+                href={backendIssueTracker}
                 icon='tag'
                 className='text-primary'
               />
             </li>
             <li>
               <TranslatedExternalLink
                 i18nKey='editor.help.contacts.helpTranslating'
-                href='https://translate.codimd.org/'
+                href={links.translate}
                 icon='language'
                 className='text-primary'
               />
@@ -63,15 +68,15 @@ export const Links: React.FC = () => {
             <li>
               <TranslatedInternalLink
                 i18nKey='editor.help.documents.yamlMetadata'
-                href='/n/yaml-data'
+                href='/n/yaml-metadata'
                 icon='dot-circle-o'
                 className='text-primary'
               />
             </li>
             <li>
-              <TranslatedExternalLink
+              <TranslatedInternalLink
                 i18nKey='editor.help.documents.slideExample'
-                href='https://github.com/codimd/server/issues'
+                href='/n/slide-example'
                 icon='dot-circle-o'
                 className='text-primary'
               />

src/components/editor/document-bar/menus/export-menu.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Dropdown } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import links from '../../../../links.json'
 
 const ExportMenu: React.FC = () => {
   useTranslation()
@@ -44,7 +45,7 @@ const ExportMenu: React.FC = () => {
 
         <Dropdown.Divider/>
 
-        <Dropdown.Item className='small text-muted' dir={'auto'} href={'https://community.codimd.org/t/frequently-asked-questions/190'} target={'_blank'} rel='noopener noreferrer'>
+        <Dropdown.Item className='small text-muted' dir={'auto'} href={links.faq} target={'_blank'} rel='noopener noreferrer'>
           <ForkAwesomeIcon icon='file-pdf-o' className={'mx-2'}/>
           <Trans i18nKey={'editor.export.pdf'}/>
           &nbsp;

src/components/error-boundary/error-boundary.tsx

@@ -3,6 +3,7 @@ import { Button, Container } from 'react-bootstrap'
 import frontendVersion from '../../version.json'
 import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
 import { ExternalLink } from '../common/links/external-link'
+import links from '../../links.json'
 
 export class ErrorBoundary extends Component {
   state: {
@@ -35,7 +36,9 @@ export class ErrorBoundary extends Component {
           <div className='text-white d-flex flex-column align-items-center justify-content-center my-5'>
             <h1>An unknown error occurred</h1>
             <p>Don't worry, this happens sometimes. If this is the first time you see this page then try reloading the app.</p>
-            If you can reproduce this error, then we would be glad if you <ExternalLink text={'open an issue on github'} href={frontendVersion.issueTrackerUrl} className={'text-primary'}/> or <ExternalLink text={'contact us on matrix.'} href={'https://riot.im/app/#/room/#hedgedoc:matrix.org'} className={'text-primary'}/>
+            If you can reproduce this error, then we would be glad if you&#32;
+            <ExternalLink text={'open an issue on github'} href={frontendVersion.issueTrackerUrl} className={'text-primary'}/>&#32;
+            or <ExternalLink text={'contact us on matrix.'} href={links.chatElement} className={'text-primary'}/>
             <Button onClick={() => this.refreshPage()} title={'Reload App'} className={'mt-4'}>
               <ForkAwesomeIcon icon={'refresh'}/>&nbsp;Reload App
             </Button>

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

@@ -6,6 +6,7 @@ import { ExternalLink } from '../../common/links/external-link'
 import { TranslatedExternalLink } from '../../common/links/translated-external-link'
 import { TranslatedInternalLink } from '../../common/links/translated-internal-link'
 import { VersionInfo } from './version-info'
+import links from '../../../links.json'
 
 export const PoweredByLinks: React.FC = () => {
   useTranslation()
@@ -15,7 +16,7 @@ export const PoweredByLinks: React.FC = () => {
   return (
     <p>
       <Trans i18nKey="landing.footer.poweredBy">
-        <ExternalLink href="https://codimd.org" text="HedgeDoc"/>
+        <ExternalLink href={links.webpage} text="HedgeDoc"/>
       </Trans>
       &nbsp;|&nbsp;
       <TranslatedInternalLink href='/n/release-notes' i18nKey='landing.footer.releases'/>

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

@@ -1,17 +1,18 @@
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { ExternalLink } from '../../common/links/external-link'
+import links from '../../../links.json'
 
 const SocialLink: React.FC = () => {
   useTranslation()
   return (
     <p>
       <Trans i18nKey="landing.footer.followUs" components={[
-        <ExternalLink href="https://github.com/codimd/server" icon='github' text="GitHub"/>,
-        <ExternalLink href="https://community.codimd.org" icon='users' text="Discourse"/>,
-        <ExternalLink href="https://riot.im/app/#/room/#hedgedoc:matrix.org" icon="comment" text="Riot"/>,
-        <ExternalLink href="https://social.codimd.org/mastodon" icon='mastodon' text="Mastodon"/>,
-        <ExternalLink href="https://translate.codimd.org" icon="globe" text="POEditor"/>
+        <ExternalLink href={links.githubOrg} icon='github' text="GitHub"/>,
+        <ExternalLink href={links.community} icon='users' text="Discourse"/>,
+        <ExternalLink href={links.chatElement} icon="comment" text="Element"/>,
+        <ExternalLink href={links.mastodon} icon='mastodon' text="Mastodon"/>,
+        <ExternalLink href={links.translate} icon="globe" text="POEditor"/>
       ]}/>
     </p>
   )

src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Alert } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
+import links from '../../../../links.json'
 
 export const DeprecationWarning: React.FC = () => {
   useTranslation()
@@ -10,7 +11,7 @@ export const DeprecationWarning: React.FC = () => {
     <Alert className={'mt-2'} variant={'warning'}>
       <Trans i18nKey={'renderer.sequence.deprecationWarning'}/>
       &nbsp;
-      <TranslatedExternalLink i18nKey={'common.why'} className={'text-dark'} href={'https://community.codimd.org/t/frequently-asked-questions/190'}/>
+      <TranslatedExternalLink i18nKey={'common.why'} className={'text-dark'} href={links.faq}/>
     </Alert>
   )
 }

src/links.json

@@ -0,0 +1,9 @@
+{
+    "chatElement": "https://app.element.io/#/room/#hedgedoc:matrix.org",
+    "community": "https://community.codimd.org",
+    "faq": "https://community.codimd.org/t/frequently-asked-questions/190",
+    "githubOrg": "https://github.com/codimd/",
+    "mastodon": "https://social.codimd.org",
+    "translate": "https://translate.codimd.org",
+    "webpage": "https://codimd.org"
+}