<commit_before>import React, { Component } from "react"
import Link from "phenomic/lib/Link"

import Color from "color"

import Content from "../Content"
import GradientLine from "../GradientLine"

import styles from "./index.css"
import npmPkg from "../../../package.json"
import Svg from "react-svg-inline"
import phenomicLogoSvg from "../../../logo/phenomic.svg"
import chatSvg from "./chat.svg"
import twitterSvg from "./twitter.svg"
import githubSvg from "./github.svg"

const blue = Color("#006DF4")
const green = Color("#0FE358")
const totalLink = 7

class Header extends Component {

  render() {
    return (
      <header className={ styles.header }>
        <Content>
          <nav className={ styles.nav }>
            <div
              className={ styles.logo }
            >
              <Link
                to="/"
                className={ styles.logoLink }
              >
                <Svg
                  svg={ phenomicLogoSvg }
                  width="100%"
                  fill="#fff"
                  cleanup
                />
              </Link>
              <a
                className={ styles.version }
                href={
                  "https://github.com/MoOx/phenomic/blob/master/CHANGELOG.md"
                }
              >
                { npmPkg.version }
              </a>
            </div>
            <div className={ styles.internal }>
            <Link
              style={ {
                color: green.clone().mix(blue, (1-1) / totalLink).rgbString(),
              } }
              className={ styles.link }
              activeClassName={ styles.linkActive }
              to="/docs/setup/"
            >
              { "Setup" }
            </Link>
            <Link
              style={ {
                color: green.clone().mix(blue, (2-1) / totalLink).rgbString(),
              } }
              className={ styles.link }
              activeClassName={ styles.linkActive }
              to="/docs/usage/"
            >
              { "Usage" }
            </Link>
            <Link
              style={ {
                color: green.clone().mix(blue, (3-1) / totalLink).rgbString(),
              } }
              className={ styles.link }
              activeClassName={ styles.linkActive }
              to="/docs/faq/"
            >
              { "FAQ" }
            </Link>
            <Link
              style={ {
                color: green.clone().mix(blue, (4-1) / totalLink).rgbString(),
              } }
              className={ styles.link }
              activeClassName={ styles.linkActive }
              to="/showcase/"
            >
              { " Showcase" }
            </Link>
            </div>
            <div className={ styles.internal }>
              <a
                style={ {
                  color: green.clone().mix(blue, (5-1) / totalLink).rgbString(),
                } }
                className={ styles.link }
                href={ "https://gitter.im/MoOx/phenomic" }
              >
                <Svg
                  className={ styles.linkIcon }
                  svg={ chatSvg }
                  width={ "1rem" }
                  fill={ "currentColor" }
                  cleanup
                />
                { "Chat" }
              </a>
              <a
                style={ {
                  color: green.clone().mix(blue, (6-1) / totalLink).rgbString(),
                } }
                className={ styles.link }
                href="https://github.com/MoOx/phenomic"
                target="_blank"
              >
                <Svg
                  className={ styles.linkIcon }
                  svg={ githubSvg }
                  width={ "1rem" }
                  fill={ "currentColor" }
                  cleanup
                />
                { "GitHub" }
              </a>
              <a
                style={ {
                  color: blue.rgbString(),
                } }
                className={ styles.link }
                href="https://twitter.com/Phenomic_app"
                target="_blank"
              >
                <Svg
                  className={ styles.linkIcon }
                  svg={ twitterSvg }
                  width={ "1rem" }
                  fill={ "currentColor" }
                  cleanup
                />
                { "Twitter" }
              </a>
            </div>
          </nav>
        </Content>
        <GradientLine height={ 1 } />
      </header>
    )
  }
}

export default Header
<commit_msg>Docs: adjust header links color<commit_after>import React, { Component } from "react"
import Link from "phenomic/lib/Link"

import Color from "color"

import Content from "../Content"
import GradientLine from "../GradientLine"

import styles from "./index.css"
import npmPkg from "../../../package.json"
import Svg from "react-svg-inline"
import phenomicLogoSvg from "../../../logo/phenomic.svg"
import chatSvg from "./chat.svg"
import twitterSvg from "./twitter.svg"
import githubSvg from "./github.svg"

const blue = Color("#006DF4")
const green = Color("#0FE358")
const totalLink = 7 + 1 // + 1 to avoid the real green, too light

class Header extends Component {

  render() {
    return (
      <header className={ styles.header }>
        <Content>
          <nav className={ styles.nav }>
            <div
              className={ styles.logo }
            >
              <Link
                to="/"
                className={ styles.logoLink }
              >
                <Svg
                  svg={ phenomicLogoSvg }
                  width="100%"
                  fill="#fff"
                  cleanup
                />
              </Link>
              <a
                className={ styles.version }
                href={
                  "https://github.com/MoOx/phenomic/blob/master/CHANGELOG.md"
                }
              >
                { npmPkg.version }
              </a>
            </div>
            <div className={ styles.internal }>
            <Link
              style={ {
                color: green.clone().mix(blue, (1-1) / totalLink).rgbString(),
              } }
              className={ styles.link }
              activeClassName={ styles.linkActive }
              to="/docs/setup/"
            >
              { "Setup" }
            </Link>
            <Link
              style={ {
                color: green.clone().mix(blue, (2-1) / totalLink).rgbString(),
              } }
              className={ styles.link }
              activeClassName={ styles.linkActive }
              to="/docs/usage/"
            >
              { "Usage" }
            </Link>
            <Link
              style={ {
                color: green.clone().mix(blue, (3-1) / totalLink).rgbString(),
              } }
              className={ styles.link }
              activeClassName={ styles.linkActive }
              to="/docs/faq/"
            >
              { "FAQ" }
            </Link>
            <Link
              style={ {
                color: green.clone().mix(blue, (4-1) / totalLink).rgbString(),
              } }
              className={ styles.link }
              activeClassName={ styles.linkActive }
              to="/showcase/"
            >
              { " Showcase" }
            </Link>
            </div>
            <div className={ styles.internal }>
              <a
                style={ {
                  color: green.clone().mix(blue, (5-1) / totalLink).rgbString(),
                } }
                className={ styles.link }
                href={ "https://gitter.im/MoOx/phenomic" }
              >
                <Svg
                  className={ styles.linkIcon }
                  svg={ chatSvg }
                  width={ "1rem" }
                  fill={ "currentColor" }
                  cleanup
                />
                { "Chat" }
              </a>
              <a
                style={ {
                  color: green.clone().mix(blue, (6-1) / totalLink).rgbString(),
                } }
                className={ styles.link }
                href="https://github.com/MoOx/phenomic"
                target="_blank"
              >
                <Svg
                  className={ styles.linkIcon }
                  svg={ githubSvg }
                  width={ "1rem" }
                  fill={ "currentColor" }
                  cleanup
                />
                { "GitHub" }
              </a>
              <a
                style={ {
                  color: green.clone().mix(blue, (7-1) / totalLink).rgbString(),
                } }
                className={ styles.link }
                href="https://twitter.com/Phenomic_app"
                target="_blank"
              >
                <Svg
                  className={ styles.linkIcon }
                  svg={ twitterSvg }
                  width={ "1rem" }
                  fill={ "currentColor" }
                  cleanup
                />
                { "Twitter" }
              </a>
            </div>
          </nav>
        </Content>
        <GradientLine height={ 1 } />
      </header>
    )
  }
}

export default Header

{'fraction_non_alphanumeric': 0.12459194776931447, 'fraction_numerical': 0.006528835690968444, 'mean_word_length': 0.9714714714714715, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 73, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3929747', 'n_tokens_mistral': 2423, 'n_tokens_neox': 2244, 'n_words': 467}