<commit_before>import React, { Component, PropTypes } from 'react';
import access from 'safe-access';
import include from 'underscore.string/include';
import { prefixLink } from 'gatsby-helpers';
import { rhythm } from 'utils/typography';

const style = {
  hero: {
    display: 'flex',
    position: 'relative',
    width: '100%',
    height: '100vh',
    margin: '0 auto',
    padding: rhythm(1 / 2),
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center'
  },
  title: {
    margin: '0 auto',
    color: '#e76600',
    fontFamily: 'Montserrat, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif',
    transition: 'opacity 500ms ease'
  },
  meta: {
		display: 'block',
		color: '#777',
		fontSize: '50%'
	}
};

class Hero extends Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll(event) {
    // @TODO: use existing react packages to solve this issue
    // ref: https://github.com/fisshy/react-scroll
    // ref: https://github.com/gilbox/react-track
  }

  render() {
    const { meta, route } = this.props;
    const page = route.page;

    let hero;

    if (page.path === prefixLink('/')) {
      hero = (
        <section className="index hero section" style={style.hero}>
          <h1 className="title" style={style.title}>{meta.title}</h1>
        </section>
      );
    } else if (access(page, 'file.ext') === 'md' && !include(page.path, '/404')) {
      hero = (
        <section className="hero section" style={style.hero}>
          <h2 className="title" style={style.title}><commit_msg>scroll effect on hero wip<commit_after>import React, { Component, PropTypes } from 'react';
import access from 'safe-access';
import include from 'underscore.string/include';
import { prefixLink } from 'gatsby-helpers';
import { rhythm } from 'utils/typography';

const style = {
  hero: {
    display: 'flex',
    position: 'relative',
    width: '100%',
    height: '100vh',
    margin: '0 auto',
    padding: rhythm(1 / 2),
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center'
  },
  title: {
    margin: '0 auto',
    color: '#e76600',
    fontFamily: 'Montserrat, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif',
    transition: 'opacity 500ms ease'
  },
  meta: {
		display: 'block',
		color: '#777',
		fontSize: '50%'
	}
};

class Hero extends Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll(event) {
    // @TODO: reduce opacity of title to 0 as scrolling down to bottom of hero
    // no jquery, try to do this with js only
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

    console.log(scrollTop);
    console.log(itemTranslate);
  }

  render() {
    const { meta, route } = this.props;
    const page = route.page;

    let hero;

    if (page.path === prefixLink('/')) {
      hero = (
        <section className="index hero section" style={style.hero}>
          <h1 className="title" style={style.title}>{meta.title}</h1>
        </section>
      );
    } else if (access(page, 'file.ext') === 'md' && !include(page.path, '/404')) {
      hero = (
        <section className="hero section" style={style.hero}>
          <h2 className="title" style={style.title}>
{'fraction_non_alphanumeric': 0.1554609929078014, 'fraction_numerical': 0.017872340425531916, 'mean_word_length': 3.1239766081871343, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 2, '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': '3903131', 'n_tokens_mistral': 1166, 'n_tokens_neox': 1111, 'n_words': 288}