feat(*): support to edit on arcanum

src/components/DocPage/DocPage.scss

@@ -21,18 +21,7 @@
         &-link {
             @include link();
 
-            display: flex;
-            align-items: center;
-
             color: var(--dc-text-content-color);
-
-            &-icon {
-                margin-right: 6px;
-
-                &_type_github {
-                    fill: var(--yc-color-github);
-                }
-            }
         }
 
         &-separator {

src/components/DocPage/DocPage.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import block from 'bem-cn-lite';
-import {withTranslation, WithTranslation, WithTranslationProps} from 'react-i18next';
 import 'yfm-transform/dist/js/yfm';
 
 import {DocPageData, Router, Lang} from '../../models';
@@ -9,8 +8,7 @@ import {DocPageTitle} from '../DocPageTitle';
 import {MiniToc} from '../MiniToc';
 import {Breadcrumbs} from '../Breadcrumbs';
 import {HTML} from '../HTML';
-
-import GithubIcon from '../../../assets/icons/github.svg';
+import {VcsLink} from '../VcsLink';
 
 import 'yfm-transform/dist/css/yfm.css';
 import './DocPage.scss';
@@ -23,20 +21,7 @@ export interface DocPageProps extends DocPageData {
     headerHeight?: number;
 }
 
-type DocPageInnerProps =
-    & DocPageProps
-    & WithTranslation
-    & WithTranslationProps;
-
-class DocPage extends React.Component<DocPageInnerProps> {
-
-    componentDidUpdate(prevProps: DocPageProps) {
-        const {i18n, lang} = this.props;
-        if (prevProps.lang !== lang) {
-            i18n.changeLanguage(lang);
-        }
-    }
-
+class DocPage extends React.Component<DocPageProps> {
     render() {
         const {toc, router, lang, headerHeight} = this.props;
 
@@ -145,39 +130,27 @@ class DocPage extends React.Component<DocPageInnerProps> {
     }
 
     private renderAsideLinks() {
-        const {toc, meta, githubUrl, lang, i18n, t} = this.props;
+        const {toc, meta, vcsUrl, vcsType, lang} = this.props;
         const editable = (
             toc.stage !== 'preview' &&
             meta.stage !== 'preview' &&
             meta.editable !== false &&
             toc.editable !== false
         );
-        const iconSize = 24;
 
-        if (!editable || !githubUrl) {
+        if (!editable || !vcsUrl || !vcsType) {
             return null;
         }
 
-        if (i18n.language !== lang) {
-            i18n.changeLanguage(lang);
-        }
-
         return (
             <ul className={b('aside-links')}>
                 <li className={b('aside-links-item')}>
-                    <a
-                        href={githubUrl}
-                        target="_blank"
-                        rel="noreferrer noopener"
+                    <VcsLink
+                        vcsUrl={vcsUrl}
+                        vcsType={vcsType}
+                        lang={lang}
                         className={b('aside-link')}
-                    >
-                        <GithubIcon
-                            className={b('aside-link-icon', {type: 'github'})}
-                            width={iconSize}
-                            height={iconSize}
-                        />
-                        {t('label_link-github')}
-                    </a>
+                    />
                 </li>
             </ul>
         );
@@ -202,4 +175,4 @@ class DocPage extends React.Component<DocPageInnerProps> {
     }
 }
 
-export default withTranslation('docPage')(DocPage);
+export default DocPage;

src/components/VcsLink/VcsLink.scss

@@ -0,0 +1,12 @@
+.dc-vcs-link {
+    display: flex;
+    align-items: center;
+
+    &__icon {
+        margin-right: 6px;
+
+        &_type_github {
+            fill: var(--yc-color-github);
+        }
+    }
+}

src/components/VcsLink/VcsLink.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import {withTranslation, WithTranslation, WithTranslationProps} from 'react-i18next';
+
+import GithubIcon from '../../../assets/icons/github.svg';
+import ArcanumIcon from '../../../assets/icons/arcanum.svg';
+
+import {Vcs, Lang} from '../../models';
+
+import './VcsLink.scss';
+
+const b = block('dc-vcs-link');
+
+export interface VcsLinkProps {
+    vcsUrl: string;
+    vcsType: Vcs;
+    lang: Lang;
+    className?: string;
+}
+
+type VcsLinkInnerProps =
+    & VcsLinkProps
+    & WithTranslation
+    & WithTranslationProps;
+
+export interface IconProps {
+    className: string;
+    width: number;
+    height: number;
+}
+
+class VcsLink extends React.Component<VcsLinkInnerProps> {
+    componentDidUpdate(prevProps: VcsLinkProps) {
+        const {i18n, lang} = this.props;
+        if (prevProps.lang !== lang) {
+            i18n.changeLanguage(lang);
+        }
+    }
+
+    render() {
+        const {vcsUrl, className} = this.props;
+
+        return (
+            <a
+                href={vcsUrl}
+                target="_blank"
+                rel="noreferrer noopener"
+                className={b(null, className)}
+            >
+                {this.renderIcon()}
+                {this.renderText()}
+            </a>
+        );
+    }
+
+    private renderIcon() {
+        const {vcsType} = this.props;
+
+        const iconSize = 24;
+        const iconClassName = b('icon', {type: vcsType});
+        const iconProps: IconProps = {
+            className: iconClassName,
+            width: iconSize,
+            height: iconSize,
+        };
+
+        switch (vcsType) {
+            case Vcs.Github:
+                return <GithubIcon {...iconProps}/>;
+            case Vcs.Arcanum:
+                return <ArcanumIcon {...iconProps}/>;
+            default:
+                return null;
+        }
+    }
+
+    private renderText() {
+        const {vcsType, lang, i18n, t} = this.props;
+
+        if (i18n.language !== lang) {
+            i18n.changeLanguage(lang);
+        }
+
+        return t(`label_link-${vcsType}`);
+    }
+}
+
+export default withTranslation('vcsLink')(VcsLink);

src/components/VcsLink/index.ts

@@ -0,0 +1,2 @@
+export {default as VcsLink} from './VcsLink';
+export * from './VcsLink';

src/i18n/en.json

@@ -1,6 +1,7 @@
 {
-    "docPage": {
-        "label_link-github": "Edit on GitHub"
+    "vcsLink": {
+        "label_link-github": "Edit on GitHub",
+        "label_link-arcanum": "Edit on Arcanum"
     },
     "toc": {
         "label_toc-filter-placeholder": "Filter by section titles"

src/i18n/index.ts

@@ -9,7 +9,7 @@ export default i18n
     .use(initReactI18next)
     .init({
         fallbackLng: Lang.Ru,
-        ns: ['toc', 'docPage'],
+        ns: ['toc', 'vcsLink'],
         resources: {ru, en},
         interpolation: {
             escapeValue: false,

src/i18n/ru.json

@@ -1,6 +1,7 @@
 {
-    "docPage": {
-        "label_link-github": "Редактировать на GitHub"
+    "vcsLink": {
+        "label_link-github": "Редактировать на GitHub",
+        "label_link-arcanum": "Редактировать в Arcanum"
     },
     "toc": {
         "label_toc-filter-placeholder": "Фильтр по заголовкам разделов"

src/index.ts

@@ -15,5 +15,6 @@ export * from './components/Text';
 export * from './components/TextInput';
 export * from './components/Toc';
 export * from './components/ToggleArrow';
+export * from './components/VcsLink';
 
 export * from './models';

src/models/index.ts

@@ -21,14 +21,20 @@ export interface DocLeadingLinks {
     href: string;
 }
 
+export enum Vcs {
+    Github = 'github',
+    Arcanum = 'arcanum'
+}
+
 export interface DocPageData extends DocBasePageData {
     leading?: false;
     breadcrumbs: BreadcrumbItem[];
     html: string;
     title: string;
     headings: DocHeadingItem[];
     meta: DocMeta;
-    githubUrl?: string;
+    vcsUrl?: string;
+    vcsType?: Vcs;
 }
 
 export interface DocHeadingItem {