Merge pull request #225 from diplodoc-platform/static-build-langs

feat: add language control selector for static build

src/components/Controls/Controls.tsx

@@ -24,7 +24,7 @@ const b = block('dc-controls');
 
 export interface ControlsProps {
     lang?: Lang;
-    langs?: string[];
+    langs?: Lang[];
     fullScreen?: boolean;
     singlePage?: boolean;
     wideFormat?: boolean;

src/components/Controls/single-controls/LangControl/LangControl.scss

@@ -0,0 +1,3 @@
+.dc-controls__lang-item {
+    padding: 0 18px;
+}

src/components/Controls/single-controls/LangControl.tsx → src/components/Controls/single-controls/LangControl/LangControl.tsx

@@ -5,13 +5,14 @@ import {List, Popover} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import allLangs from 'langs';
 
-import {usePopupState, useTranslation} from '../../../hooks';
-import {Lang} from '../../../models';
-import {getPopupPosition} from '../../../utils';
-import {Control} from '../../Control';
-import {ControlsLayoutContext} from '../ControlsLayout';
-
-import '../Controls.scss';
+import {usePopupState, useTranslation} from '../../../../hooks';
+import {Lang} from '../../../../models';
+import {getPopupPosition} from '../../../../utils';
+import {Control} from '../../../Control';
+import {ControlsLayoutContext} from '../../ControlsLayout';
+
+import '../../Controls.scss';
+import './LangControl.scss';
 
 const DEFAULT_LANGS = ['en', 'ru', 'he'];
 const LEGACY_LANG_ITEMS = [

src/components/Controls/single-controls/index.ts

@@ -1,7 +1,7 @@
 export {default as FullScreenControl} from './FullScreenControl';
 export {default as SettingsControl} from './SettingsControl/SettingsControl';
 export {default as SinglePageControl} from './SinglePageControl';
-export {default as LangControl} from './LangControl';
+export {default as LangControl} from './LangControl/LangControl';
 export {default as DividerControl} from './DividerControl/DividerControl';
 export {default as PdfControl} from './PdfControl';
 export {default as EditControl} from './EditControl';

src/components/DocPage/DocPage.tsx

@@ -36,7 +36,7 @@ const b = block('dc-doc-page');
 
 export interface DocPageProps extends DocPageData, DocSettings {
     lang: Lang;
-    langs?: string[];
+    langs?: Lang[];
     router: Router;
     headerHeight?: number;
     tocTitleIcon?: React.ReactNode;

src/utils/index.ts

@@ -27,7 +27,7 @@ export type ChangeHandler<S> = <K extends keyof S, V extends S[K]>(
 ) => () => void;
 
 export function normalizePath(path?: string | null) {
-    return path?.replace(/\/index$/, '/');
+    return path?.replace(/\.html$/, '')?.replace(/\/index$/, '/');
 }
 
 export function normalizeHash(hash?: string | null) {
@@ -45,6 +45,18 @@ export function isActiveItem(router: Router, href: string, singlePage?: boolean)
     return normalizePath(router.pathname) === normalizePath(parse(href).pathname);
 }
 
+/*
+Algorithm:
+1. Normalize hash route if it presents
+2. Split by "../" and take the last value
+5. Join the result
+*/
+export function getLangPath(router: Router, lang: string) {
+    const path = router.hash ? normalizeHash(router.hash) : normalizePath(router.pathname);
+    const route = path?.split('../') || [];
+    return `../${lang}/${route[route.length - 1] || ''}`;
+}
+
 export function isExternalHref(href: string) {
     return href.startsWith('http') || href.startsWith('//');
 }