Moved over all pages/shared components and dependencies to react-shared

15 files changed, 550 insertions, 11 deletions

diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json
index e1cc2ad8b..e96659e47 100644
--- a/packages/react-shared/package.json
+++ b/packages/react-shared/package.json
@@ -7,6 +7,7 @@
   "scripts": {
     "lint": "tslint --project . 'src/ts/**/*.ts' 'src/ts/**/*.tsx'",
     "build": "tsc",
+    "build:watch": "tsc -w",
     "clean": "shx rm -rf lib"
   },
   "author": "Fabio Berger",
@@ -29,6 +30,7 @@
     "react-dom": "15.6.1",
     "lodash": "^4.17.4",
     "react-scroll": "^1.5.2",
-    "react-tap-event-plugin": "^2.0.1"
+    "react-tap-event-plugin": "^2.0.1",
+    "react-highlight": "0xproject/react-highlight"
   }
 }
diff --git a/packages/react-shared/src/ts/components/anchor_title.tsx b/packages/react-shared/src/ts/components/anchor_title.tsx
index aa839cac9..f44354097 100644
--- a/packages/react-shared/src/ts/components/anchor_title.tsx
+++ b/packages/react-shared/src/ts/components/anchor_title.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
 
-import { constants } from '../constants';
 import { HeaderSizes, Styles } from '../types';
-import { utils } from '../utils';
+import { constants } from '../utils/constants';
+import { utils } from '../utils/utils';
 
 const headerSizeToScrollOffset: { [headerSize: string]: number } = {
     h2: -20,
diff --git a/packages/react-shared/src/ts/components/markdown_code_block.tsx b/packages/react-shared/src/ts/components/markdown_code_block.tsx
new file mode 100644
index 000000000..2070bb8e1
--- /dev/null
+++ b/packages/react-shared/src/ts/components/markdown_code_block.tsx
@@ -0,0 +1,25 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as HighLight from 'react-highlight';
+
+export interface MarkdownCodeBlockProps {
+    value: string;
+    language: string;
+}
+
+export interface MarkdownCodeBlockState {}
+
+export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, MarkdownCodeBlockState> {
+    // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
+    // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
+    public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
+        return nextProps.value !== this.props.value || nextProps.language !== this.props.language;
+    }
+    public render() {
+        return (
+            <span style={{ fontSize: 14 }}>
+                <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight>
+            </span>
+        );
+    }
+}
diff --git a/packages/react-shared/src/ts/components/markdown_link_block.tsx b/packages/react-shared/src/ts/components/markdown_link_block.tsx
new file mode 100644
index 000000000..8f5862249
--- /dev/null
+++ b/packages/react-shared/src/ts/components/markdown_link_block.tsx
@@ -0,0 +1,47 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { constants } from '../utils/constants';
+import { utils } from '../utils/utils';
+
+export interface MarkdownLinkBlockProps {
+    href: string;
+}
+
+export interface MarkdownLinkBlockState {}
+
+export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> {
+    // Re-rendering a linkBlock causes it to remain unclickable.
+    // We therefore noop re-renders on this component if it's props haven't changed.
+    public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) {
+        return nextProps.href !== this.props.href;
+    }
+    public render() {
+        const href = this.props.href;
+        const isLinkToSection = _.startsWith(href, '#');
+        // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons
+        if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) {
+            return (
+                <a href={href} target="_blank" rel="nofollow noreferrer noopener">
+                    {this.props.children}
+                </a>
+            );
+        } else if (isLinkToSection) {
+            return (
+                <a
+                    style={{ cursor: 'pointer', textDecoration: 'underline' }}
+                    onClick={this._onHashUrlClick.bind(this, href)}
+                >
+                    {this.props.children}
+                </a>
+            );
+        } else {
+            return <a href={href}>{this.props.children}</a>;
+        }
+    }
+    private _onHashUrlClick(href: string) {
+        const hash = href.split('#')[1];
+        utils.scrollToHash(hash, constants.SCROLL_CONTAINER_ID);
+        utils.setUrlHash(hash);
+    }
+}
diff --git a/packages/react-shared/src/ts/components/markdown_section.tsx b/packages/react-shared/src/ts/components/markdown_section.tsx
new file mode 100644
index 000000000..682b6ef8f
--- /dev/null
+++ b/packages/react-shared/src/ts/components/markdown_section.tsx
@@ -0,0 +1,87 @@
+import * as _ from 'lodash';
+import RaisedButton from 'material-ui/RaisedButton';
+import * as React from 'react';
+import * as ReactMarkdown from 'react-markdown';
+import { Element as ScrollElement } from 'react-scroll';
+
+import { HeaderSizes } from '../types';
+import { colors } from '../utils/colors';
+import { utils } from '../utils/utils';
+
+import { AnchorTitle } from './anchor_title';
+import { MarkdownCodeBlock } from './markdown_code_block';
+import { MarkdownLinkBlock } from './markdown_link_block';
+
+export interface MarkdownSectionProps {
+    sectionName: string;
+    markdownContent: string;
+    headerSize?: HeaderSizes;
+    githubLink?: string;
+}
+
+export interface MarkdownSectionState {
+    shouldShowAnchor: boolean;
+}
+
+export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
+    public static defaultProps: Partial<MarkdownSectionProps> = {
+        headerSize: HeaderSizes.H3,
+    };
+    constructor(props: MarkdownSectionProps) {
+        super(props);
+        this.state = {
+            shouldShowAnchor: false,
+        };
+    }
+    public render() {
+        const sectionName = this.props.sectionName;
+        const id = utils.getIdFromName(sectionName);
+        return (
+            <div
+                className="md-px1 sm-px2 overflow-hidden"
+                onMouseOver={this._setAnchorVisibility.bind(this, true)}
+                onMouseOut={this._setAnchorVisibility.bind(this, false)}
+            >
+                <ScrollElement name={id}>
+                    <div className="clearfix pt3">
+                        <div className="col lg-col-8 md-col-8 sm-col-12">
+                            <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
+                                <AnchorTitle
+                                    headerSize={this.props.headerSize}
+                                    title={sectionName}
+                                    id={id}
+                                    shouldShowAnchor={this.state.shouldShowAnchor}
+                                />
+                            </span>
+                        </div>
+                        <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}>
+                            {!_.isUndefined(this.props.githubLink) && (
+                                <a
+                                    href={this.props.githubLink}
+                                    target="_blank"
+                                    style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }}
+                                >
+                                    Edit on Github
+                                </a>
+                            )}
+                        </div>
+                    </div>
+                    <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
+                    <ReactMarkdown
+                        source={this.props.markdownContent}
+                        escapeHtml={false}
+                        renderers={{
+                            code: MarkdownCodeBlock,
+                            link: MarkdownLinkBlock,
+                        }}
+                    />
+                </ScrollElement>
+            </div>
+        );
+    }
+    private _setAnchorVisibility(shouldShowAnchor: boolean) {
+        this.setState({
+            shouldShowAnchor,
+        });
+    }
+}
diff --git a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
new file mode 100644
index 000000000..2506124af
--- /dev/null
+++ b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
@@ -0,0 +1,179 @@
+import * as _ from 'lodash';
+import MenuItem from 'material-ui/MenuItem';
+import * as React from 'react';
+import { Link as ScrollLink } from 'react-scroll';
+
+import { MenuSubsectionsBySection, Styles } from '../types';
+import { colors } from '../utils/colors';
+import { constants } from '../utils/constants';
+import { utils } from '../utils/utils';
+
+import { VersionDropDown } from './version_drop_down';
+
+export interface NestedSidebarMenuProps {
+    topLevelMenu: { [topLevel: string]: string[] };
+    menuSubsectionsBySection: MenuSubsectionsBySection;
+    title: string;
+    shouldDisplaySectionHeaders?: boolean;
+    onMenuItemClick?: () => void;
+    selectedVersion?: string;
+    versions?: string[];
+}
+
+export interface NestedSidebarMenuState {}
+
+const styles: Styles = {
+    menuItemWithHeaders: {
+        minHeight: 0,
+    },
+    menuItemWithoutHeaders: {
+        minHeight: 48,
+    },
+    menuItemInnerDivWithHeaders: {
+        color: colors.grey800,
+        fontSize: 14,
+        lineHeight: 2,
+        padding: 0,
+    },
+};
+
+const titleToIcon: { [title: string]: string } = {
+    '0x.js': 'zeroExJs.png',
+    '0x Connect': 'connect.png',
+    '0x Smart Contracts': 'contracts.png',
+    Wiki: 'wiki.png',
+};
+
+export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
+    public static defaultProps: Partial<NestedSidebarMenuProps> = {
+        shouldDisplaySectionHeaders: true,
+        onMenuItemClick: _.noop,
+    };
+    public render() {
+        const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
+            const finalSectionName = sectionName.replace(/-/g, ' ');
+            if (this.props.shouldDisplaySectionHeaders) {
+                const id = utils.getIdFromName(sectionName);
+                return (
+                    <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}>
+                        <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1">
+                            {finalSectionName.toUpperCase()}
+                        </div>
+                        {this._renderMenuItems(menuItems)}
+                    </div>
+                );
+            } else {
+                return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
+            }
+        });
+        return (
+            <div>
+                {this._renderEmblem()}
+                {!_.isUndefined(this.props.versions) &&
+                    !_.isUndefined(this.props.selectedVersion) && (
+                        <VersionDropDown selectedVersion={this.props.selectedVersion} versions={this.props.versions} />
+                    )}
+                <div className="pl1">{navigation}</div>
+            </div>
+        );
+    }
+    private _renderEmblem() {
+        return (
+            <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
+                <div className="flex" style={{ fontSize: 25 }}>
+                    <div className="robotoMono" style={{ fontWeight: 'bold' }}>
+                        0x
+                    </div>
+                    <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
+                        docs
+                    </div>
+                </div>
+                <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
+                    |
+                </div>
+                <div className="flex">
+                    <div>
+                        <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
+                    </div>
+                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
+                        {this.props.title}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] {
+        const menuItemStyles = this.props.shouldDisplaySectionHeaders
+            ? styles.menuItemWithHeaders
+            : styles.menuItemWithoutHeaders;
+        const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
+        const menuItems = _.map(menuItemNames, menuItemName => {
+            const id = utils.getIdFromName(menuItemName);
+            return (
+                <div key={menuItemName}>
+                    <ScrollLink
+                        key={`menuItem-${menuItemName}`}
+                        to={id}
+                        offset={-10}
+                        duration={constants.DOCS_SCROLL_DURATION_MS}
+                        containerId={constants.DOCS_CONTAINER_ID}
+                    >
+                        <MenuItem
+                            onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
+                            style={menuItemStyles}
+                            innerDivStyle={menuItemInnerDivStyles}
+                        >
+                            <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span>
+                        </MenuItem>
+                    </ScrollLink>
+                    {this._renderMenuItemSubsections(menuItemName)}
+                </div>
+            );
+        });
+        return menuItems;
+    }
+    private _renderMenuItemSubsections(menuItemName: string): React.ReactNode {
+        if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) {
+            return null;
+        }
+        return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]);
+    }
+    private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode {
+        return (
+            <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}>
+                {_.map(entityNames, entityName => {
+                    const name = `${menuItemName}-${entityName}`;
+                    const id = utils.getIdFromName(name);
+                    return (
+                        <li key={`menuItem-${entityName}`}>
+                            <ScrollLink
+                                to={id}
+                                offset={0}
+                                duration={constants.DOCS_SCROLL_DURATION_MS}
+                                containerId={constants.DOCS_CONTAINER_ID}
+                                onTouchTap={this._onMenuItemClick.bind(this, name)}
+                            >
+                                <MenuItem
+                                    onTouchTap={this._onMenuItemClick.bind(this, name)}
+                                    style={{ minHeight: 35 }}
+                                    innerDivStyle={{
+                                        paddingLeft: 16,
+                                        fontSize: 14,
+                                        lineHeight: '35px',
+                                    }}
+                                >
+                                    {entityName}
+                                </MenuItem>
+                            </ScrollLink>
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    }
+    private _onMenuItemClick(name: string): void {
+        const id = utils.getIdFromName(name);
+        utils.setUrlHash(id);
+        this.props.onMenuItemClick();
+    }
+}
diff --git a/packages/react-shared/src/ts/components/section_header.tsx b/packages/react-shared/src/ts/components/section_header.tsx
new file mode 100644
index 000000000..90fabf9ff
--- /dev/null
+++ b/packages/react-shared/src/ts/components/section_header.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Element as ScrollElement } from 'react-scroll';
+
+import { HeaderSizes } from '../types';
+import { colors } from '../utils/colors';
+import { utils } from '../utils/utils';
+
+import { AnchorTitle } from './anchor_title';
+
+export interface SectionHeaderProps {
+    sectionName: string;
+    headerSize?: HeaderSizes;
+}
+
+export interface SectionHeaderState {
+    shouldShowAnchor: boolean;
+}
+
+export class SectionHeader extends React.Component<SectionHeaderProps, SectionHeaderState> {
+    public static defaultProps: Partial<SectionHeaderProps> = {
+        headerSize: HeaderSizes.H2,
+    };
+    constructor(props: SectionHeaderProps) {
+        super(props);
+        this.state = {
+            shouldShowAnchor: false,
+        };
+    }
+    public render() {
+        const sectionName = this.props.sectionName.replace(/-/g, ' ');
+        const id = utils.getIdFromName(sectionName);
+        return (
+            <div
+                onMouseOver={this._setAnchorVisibility.bind(this, true)}
+                onMouseOut={this._setAnchorVisibility.bind(this, false)}
+            >
+                <ScrollElement name={id}>
+                    <AnchorTitle
+                        headerSize={this.props.headerSize}
+                        title={
+                            <span
+                                style={{
+                                    textTransform: 'uppercase',
+                                    color: colors.grey,
+                                    fontFamily: 'Roboto Mono',
+                                    fontWeight: 300,
+                                    fontSize: 27,
+                                }}
+                            >
+                                {sectionName}
+                            </span>
+                        }
+                        id={id}
+                        shouldShowAnchor={this.state.shouldShowAnchor}
+                    />
+                </ScrollElement>
+            </div>
+        );
+    }
+    private _setAnchorVisibility(shouldShowAnchor: boolean) {
+        this.setState({
+            shouldShowAnchor,
+        });
+    }
+}
diff --git a/packages/react-shared/src/ts/components/version_drop_down.tsx b/packages/react-shared/src/ts/components/version_drop_down.tsx
new file mode 100644
index 000000000..86fe43507
--- /dev/null
+++ b/packages/react-shared/src/ts/components/version_drop_down.tsx
@@ -0,0 +1,46 @@
+import * as _ from 'lodash';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
+import * as React from 'react';
+
+import { utils } from '../utils/utils';
+
+export interface VersionDropDownProps {
+    selectedVersion: string;
+    versions: string[];
+}
+
+export interface VersionDropDownState {}
+
+export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
+    public render() {
+        return (
+            <div className="mx-auto" style={{ width: 120 }}>
+                <DropDownMenu
+                    maxHeight={300}
+                    value={this.props.selectedVersion}
+                    onChange={this._updateSelectedVersion.bind(this)}
+                >
+                    {this._renderDropDownItems()}
+                </DropDownMenu>
+            </div>
+        );
+    }
+    private _renderDropDownItems() {
+        const items = _.map(this.props.versions, version => {
+            return <MenuItem key={version} value={version} primaryText={`v${version}`} />;
+        });
+        return items;
+    }
+    private _updateSelectedVersion(e: any, index: number, semver: string) {
+        let path = window.location.pathname;
+        const lastChar = path[path.length - 1];
+        if (_.isFinite(_.parseInt(lastChar))) {
+            const pathSections = path.split('/');
+            pathSections.pop();
+            path = pathSections.join('/');
+        }
+        const baseUrl = utils.getCurrentBaseUrl();
+        window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
+    }
+}
diff --git a/packages/react-shared/src/ts/globals.d.ts b/packages/react-shared/src/ts/globals.d.ts
index e69de29bb..875721533 100644
--- a/packages/react-shared/src/ts/globals.d.ts
+++ b/packages/react-shared/src/ts/globals.d.ts
@@ -0,0 +1 @@
+declare module 'react-highlight';
diff --git a/packages/react-shared/src/ts/index.ts b/packages/react-shared/src/ts/index.ts
index d33638e62..dde77b7b9 100644
--- a/packages/react-shared/src/ts/index.ts
+++ b/packages/react-shared/src/ts/index.ts
@@ -1,6 +1,12 @@
 export { AnchorTitle } from './components/anchor_title';
+export { MarkdownLinkBlock } from './components/markdown_link_block';
+export { MarkdownCodeBlock } from './components/markdown_code_block';
+export { MarkdownSection } from './components/markdown_section';
+export { NestedSidebarMenu } from './components/nested_sidebar_menu';
+export { SectionHeader } from './components/section_header';
 
-export { HeaderSizes, Styles } from './types';
+export { HeaderSizes, Styles, MenuSubsectionsBySection } from './types';
 
-export { utils } from './utils';
-export { constants } from './constants';
+export { utils } from './utils/utils';
+export { constants } from './utils/constants';
+export { colors } from './utils/colors';
diff --git a/packages/react-shared/src/ts/types.ts b/packages/react-shared/src/ts/types.ts
index e4fe7bff9..f9d561d1a 100644
--- a/packages/react-shared/src/ts/types.ts
+++ b/packages/react-shared/src/ts/types.ts
@@ -7,3 +7,7 @@ export enum HeaderSizes {
     H2 = 'h2',
     H3 = 'h3',
 }
+
+export interface MenuSubsectionsBySection {
+    [section: string]: string[];
+}
diff --git a/packages/react-shared/src/ts/utils.ts b/packages/react-shared/src/ts/utils.ts
deleted file mode 100644
index 822b67496..000000000
--- a/packages/react-shared/src/ts/utils.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const utils = {
-    setUrlHash(anchorId: string) {
-        window.location.hash = anchorId;
-    },
-};
diff --git a/packages/react-shared/src/ts/utils/colors.ts b/packages/react-shared/src/ts/utils/colors.ts
new file mode 100644
index 000000000..2eead95c7
--- /dev/null
+++ b/packages/react-shared/src/ts/utils/colors.ts
@@ -0,0 +1,48 @@
+import { colors as materialUiColors } from 'material-ui/styles';
+
+export const colors = {
+    ...materialUiColors,
+    gray40: '#F8F8F8',
+    grey50: '#FAFAFA',
+    grey100: '#F5F5F5',
+    lightestGrey: '#F0F0F0',
+    greyishPink: '#E6E5E5',
+    grey300: '#E0E0E0',
+    beigeWhite: '#E4E4E4',
+    grey350: '#cacaca',
+    grey400: '#BDBDBD',
+    lightGrey: '#BBBBBB',
+    grey500: '#9E9E9E',
+    grey: '#A5A5A5',
+    darkGrey: '#818181',
+    landingLinkGrey: '#919191',
+    grey700: '#616161',
+    grey750: '#515151',
+    grey800: '#424242',
+    darkerGrey: '#393939',
+    heroGrey: '#404040',
+    projectsGrey: '#343333',
+    darkestGrey: '#272727',
+    dharmaDarkGrey: '#252525',
+    lightBlue: '#60A4F4',
+    lightBlueA700: '#0091EA',
+    linkBlue: '#1D5CDE',
+    darkBlue: '#4D5481',
+    turquois: '#058789',
+    lightPurple: '#A81CA6',
+    purple: '#690596',
+    red200: '#EF9A9A',
+    red: '#E91751',
+    red500: '#F44336',
+    red600: '#E53935',
+    limeGreen: '#66DE75',
+    lightGreen: '#4DC55C',
+    lightestGreen: '#89C774',
+    brightGreen: '#00C33E',
+    green400: '#66BB6A',
+    green: '#4DA24B',
+    amber600: '#FFB300',
+    orange: '#E69D00',
+    amber800: '#FF8F00',
+    darkYellow: '#caca03',
+};
diff --git a/packages/react-shared/src/ts/constants.ts b/packages/react-shared/src/ts/utils/constants.ts
index 20d0c6e92..79d1d9ca3 100644
--- a/packages/react-shared/src/ts/constants.ts
+++ b/packages/react-shared/src/ts/utils/constants.ts
@@ -1,4 +1,6 @@
 export const constants = {
     DOCS_SCROLL_DURATION_MS: 0,
     DOCS_CONTAINER_ID: 'documentation',
+    SCROLL_CONTAINER_ID: 'documentation',
+    SCROLL_TOP_ID: 'pageScrollTop',
 };
diff --git a/packages/react-shared/src/ts/utils/utils.ts b/packages/react-shared/src/ts/utils/utils.ts
new file mode 100644
index 000000000..7498342b6
--- /dev/null
+++ b/packages/react-shared/src/ts/utils/utils.ts
@@ -0,0 +1,32 @@
+import * as _ from 'lodash';
+import { scroller } from 'react-scroll';
+
+import { constants } from './constants';
+
+export const utils = {
+    setUrlHash(anchorId: string) {
+        window.location.hash = anchorId;
+    },
+    scrollToHash(hash: string, containerId: string): void {
+        let finalHash = hash;
+        if (_.isEmpty(hash)) {
+            finalHash = constants.SCROLL_TOP_ID; // scroll to the top
+        }
+
+        scroller.scrollTo(finalHash, {
+            duration: 0,
+            offset: 0,
+            containerId,
+        });
+    },
+    getIdFromName(name: string) {
+        const id = name.replace(/ /g, '-');
+        return id;
+    },
+    getCurrentBaseUrl() {
+        const port = window.location.port;
+        const hasPort = !_.isUndefined(port);
+        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
+        return baseUrl;
+    },
+};