<commit_before>import * as React from "react";

import styled, { keyframes }  from "styled-components";
import { withProps } from "./withProps"

import { logo } from "./../pages/logo-256x256.png"

import { Colors } from "./../components/Colors"

export interface INavBarProps {
    backgroundColor?: string
}

export interface INavBarState {
    isActive: boolean;
}

const NavBarItemContainer = styled.a`
    &.navbar-item:hover, &.navbar-link:hover {
        background-color: ${Colors.Background} !important;
        border-bottom: 2px solid ${Colors.Accent};
        box-shadow:  -9px 0px 20px 0 rgba(0,0,0,0.2), 9px 0px 20px 0 rgba(0, 0, 0, 0.2);
        transform: translateY(-1px);

        z-index: 1;
    }

    font-size: 0.9em;
    color: ${Colors.Foreground} !important;
    border-bottom: 2px solid transparent;
`

const createAnchorItem = (className: string) => {
    return class HOC extends React.PureComponent<{href: string }, {}> {
        public render(): JSX.Element {
            return <NavBarItemContainer className={className} href={this.props.href} onClick={() => sendEvent("navbar", "click", this.props.href)}>{this.props.children}</NavBarItemContainer>;
        }
    };
};

const GitHubIconLarge = () => {
    return <span className="icon" style={{color: "#EEE" }}>
        <i className="fab fa-lg fa-github">
        </i>
    </span>;
};

const YoutubeIconLarge = () => {
    return <span className="icon" style={{color: "#F00" }}>
        <i className="fab fa-lg fa-youtube">
        </i>
    </span>;
};

const DiscordIconLarge = () => {
    return <span className="icon" style={{color: "#7289DA" }}>
        <i className="fab fa-lg fa-discord">
        </i>
    </span>;
}

const TwitterIconLarge = () => {
    return <span className="icon" style={{color: "#55acee" }}>
        <i className="fab fa-lg fa-twitter">
        </i>
    </span>;
};

const RedditIconLarge = () => {
    return <span className="icon" style={{color: "orange" }}>
        <i className="fab fa-lg fa-reddit">
        </i>
    </span>;
};

const NavBarItem = createAnchorItem("navbar-item");
const NavBarItemHiddenOnDesktop = createAnchorItem("navbar-item is-hidden-desktop");
const NavBarItemDesktopOnly = createAnchorItem("navbar-item is-hidden-desktop-only");

const NavigationMenuWrapper = styled.nav`
    color: ${Colors.Foreground};
`

import { sendEvent } from "./../Telemetry"

const NavBarMenu = (props: { isActive: boolean}) => {

    const menuClass = props.isActive ? "navbar-menu is-active" : "navbar-menu";

    return <NavigationMenuWrapper className={menuClass} id="navMenuDocumentation">
        <div className="navbar-start">
            <NavBarItem href={"/Download"}>Download</NavBarItem>
            <NavBarItem href={"https://onivim.github.io/oni-docs/#/"}>Documentation</NavBarItem>
            <NavBarItem href={"/Features"}>Features</NavBarItem>
            <NavBarItem href={"/Insiders"}>Insiders</NavBarItem>
        </div>
        <div className="navbar-end">
            <NavBarItemDesktopOnly href={"https://github.com/onivim/oni"}>
                <GitHubIconLarge />
            </NavBarItemDesktopOnly>
            <NavBarItemDesktopOnly href={"https://twitter.com/oni_vim"}>
                <TwitterIconLarge />
            </NavBarItemDesktopOnly>
            <NavBarItemDesktopOnly href={"https://discord.gg/7maEAxV"}>
                <DiscordIconLarge />
            </NavBarItemDesktopOnly>
            <NavBarItemDesktopOnly href={"https://www.youtube.com/channel/UC0L_Wk0G_VShg8fJTBNIlpw"}>
                <YoutubeIconLarge />
            </NavBarItemDesktopOnly>
            <NavBarItemDesktopOnly href={"https://reddit.com/r/onivim"}>
                <RedditIconLarge />
            </NavBarItemDesktopOnly>
        </div><commit_msg>Add patreon link to nav bar<commit_after>import * as React from "react";

import styled, { keyframes }  from "styled-components";
import { withProps } from "./withProps"

import { logo } from "./../pages/logo-256x256.png"

import { Colors } from "./../components/Colors"

export interface INavBarProps {
    backgroundColor?: string
}

export interface INavBarState {
    isActive: boolean;
}

const NavBarItemContainer = styled.a`
    &.navbar-item:hover, &.navbar-link:hover {
        background-color: ${Colors.Background} !important;
        border-bottom: 2px solid ${Colors.Accent};
        box-shadow:  -9px 0px 20px 0 rgba(0,0,0,0.2), 9px 0px 20px 0 rgba(0, 0, 0, 0.2);
        transform: translateY(-1px);

        z-index: 1;
    }

    font-size: 0.9em;
    color: ${Colors.Foreground} !important;
    border-bottom: 2px solid transparent;
`

const createAnchorItem = (className: string) => {
    return class HOC extends React.PureComponent<{href: string }, {}> {
        public render(): JSX.Element {
            return <NavBarItemContainer className={className} href={this.props.href} onClick={() => sendEvent("navbar", "click", this.props.href)}>{this.props.children}</NavBarItemContainer>;
        }
    };
};

const PatreonIconLarge = () => {
    return <span className="icon" style={{color: "#e8590c" }}>
        <i className="fab fa-lg fa-patreon">
        </i>
    </span>;
};

const GitHubIconLarge = () => {
    return <span className="icon" style={{color: "#EEE" }}>
        <i className="fab fa-lg fa-github">
        </i>
    </span>;
};

const YoutubeIconLarge = () => {
    return <span className="icon" style={{color: "#F00" }}>
        <i className="fab fa-lg fa-youtube">
        </i>
    </span>;
};

const DiscordIconLarge = () => {
    return <span className="icon" style={{color: "#7289DA" }}>
        <i className="fab fa-lg fa-discord">
        </i>
    </span>;
}

const TwitterIconLarge = () => {
    return <span className="icon" style={{color: "#55acee" }}>
        <i className="fab fa-lg fa-twitter">
        </i>
    </span>;
};

const RedditIconLarge = () => {
    return <span className="icon" style={{color: "orange" }}>
        <i className="fab fa-lg fa-reddit">
        </i>
    </span>;
};

const NavBarItem = createAnchorItem("navbar-item");
const NavBarItemHiddenOnDesktop = createAnchorItem("navbar-item is-hidden-desktop");
const NavBarItemDesktopOnly = createAnchorItem("navbar-item is-hidden-desktop-only");

const NavigationMenuWrapper = styled.nav`
    color: ${Colors.Foreground};
`

import { sendEvent } from "./../Telemetry"

const NavBarMenu = (props: { isActive: boolean}) => {

    const menuClass = props.isActive ? "navbar-menu is-active" : "navbar-menu";

    return <NavigationMenuWrapper className={menuClass} id="navMenuDocumentation">
        <div className="navbar-start">
            <NavBarItem href={"/Download"}>Download</NavBarItem>
            <NavBarItem href={"https://onivim.github.io/oni-docs/#/"}>Documentation</NavBarItem>
            <NavBarItem href={"/Features"}>Features</NavBarItem>
            <NavBarItem href={"/Insiders"}>Insiders</NavBarItem>
        </div>
        <div className="navbar-end">
            <NavBarItemDesktopOnly href={"https://www.patreon.com/onivim"}>
                <PatreonIconLarge />
            </NavBarItemDesktopOnly>
            <NavBarItemDesktopOnly href={"https://github.com/onivim/oni"}>
                <GitHubIconLarge />
            </NavBarItemDesktopOnly>
            <NavBarItemDesktopOnly href={"https://twitter.com/oni_vim"}>
                <TwitterIconLarge />
            </NavBarItemDesktopOnly>
            <NavBarItemDesktopOnly href={"https://discord.gg/7maEAxV"}>
                <DiscordIconLarge />
            </NavBarItemDesktopOnly>
            <NavBarItemDesktopOnly href={"https://www.youtube.com/channel/UC0L_Wk0G_VShg8fJTBNIlpw"}>
                <YoutubeIconLarge />
            </NavBarItemDesktopOnly>
            <NavBarItemDesktopOnly href={"https://reddit.com/r/onivim"}>
                <RedditIconLarge />
            </NavBarItemDesktopOnly>
        </div>
{'fraction_non_alphanumeric': 0.1586276743891632, 'fraction_numerical': 0.011647043929611344, 'mean_word_length': 2.8349514563106797, 'pattern_counts': {'":': 0, '<': 112, '<?xml version=': 0, '>': 129, 'https://': 13, 'lorem ipsum': 0, 'www.': 3, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2728495', 'n_tokens_mistral': 2565, 'n_tokens_neox': 2401, 'n_words': 473}