<commit_before>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import dateFormat from 'dateformat'
import { requestStats, requestLatestNews } from '../actions'
import DependencyCountsGraph from '../components/home/dependency-counts-graph.jsx'

class Home extends Component {
  static propTypes = {
    config: PropTypes.object.isRequired,
    stats: PropTypes.object,
    latestNews: PropTypes.array,
    requestStats: PropTypes.func.isRequired,
    requestLatestNews: PropTypes.func.isRequired
  }

  state = {
    badgeUrlClass: 'nope',
    badgeImgClass: '',
    badgeSrc: '/img/status/outofdate.svg'
  }

  componentDidMount () {
    this.props.requestLatestNews()

    const requestStats = () => {
      this.props.requestStats().then(() => {
        this._requestStatsTimeout = setTimeout(requestStats, 5000)
      })
    }

    requestStats()
  }

  componentWillUnmount () {
    clearTimeout(this._requestStatsTimeout)
  }

  render () {
    return (
      <div>
        <Helmet><html className='home-page' /></Helmet>
        <div>

          <h1>
            You depend on other projects.<br />
            You want to stay up to date.<br />
            David's got your back.
          </h1>

          <p>
            David gets you an overview of your project dependencies, the version you use
            and the latest available, so you can quickly see what's drifting.
            Then it's all boiled down into a badge showing the current status,
            which you can embed on your site.
          </p>

          <ul id='examples'>
            <li>bower - <Link to='/bower/bower'>bower<img src='/bower/bower.svg' alt='bower Dependency badge' /></Link></li>
            <li>request - <Link to='/request/request'>request<img src='/request/request.svg' alt='request Dependency badge' /></Link></li>
            <li>gruntjs - <Link to='/gruntjs/grunt'>grunt<img src='/gruntjs/grunt.svg' alt='grunt Dependency badge' /></Link></li>
            <li>expressjs - <Link to='/expressjs/express'>express<img src='/expressjs/express.svg?style=flat' alt='express Dependency badge' /></Link></li>
            <li>alanshaw - <Link to='/alanshaw/david'>david<img src='/alanshaw/david.svg' alt='david Dependency badge' /></Link></li>
          </ul>

          <h2>Giving you badges.</h2>

          <p>
            Got a <a href='http://nodejs.org/'>Node.js</a> project? Get a badge. David is free for public projects on <a href='https://github.com/'>Github</a>.
          </p>

          <p>
            Declare your dependencies in a <a href='http://package.json.nodejitsu.com/'>package.json</a> file and you're good. David will go work the rest out and you'll get your own project status page, listing your dependencies and their freshness. Click on the examples above for a preview.
          </p>

          <p>Type your username / repo name in below and get yours...</p>

          <p className='badge-maker'>
            <strong>{this.props.config.siteUrl}/<span contentEditable className={this.state.badgeUrlClass} id='username' title='[Github username] / [repo name]' onInput={this.onBadgeInput} onKeyPress={this.onBadgeKeyPress}>username/repo</span>.svg</strong>
            <img id='badge' src={this.state.badgeSrc} alt='badge' onLoad={this.onBadgeLoad} onError={this.onBadgeError} className={this.state.badgeImgClass} />
          </p>

          <p>
            David is currently <em>BETA</em>, which means it may be unreliable, unavailable or not working. That said, it's already useful and we're working to make it rock solid.
            It's all in Github so <a href='https://github.com/alanshaw/david-www'>feel free to help</a>.
          </p>

          <h2>Most used dependencies</h2>

          <p>These are the most used NPM dependencies based on open source GitHub projects that are using them.</p>

          <DependencyCountsGraph />

        </div>

        <aside id='stats'>
          {this.renderStats()}
          {this.renderNews()}
        </aside>
      </div>
    )
  }

  renderStats () {
    const stats = this.props.stats
    if (!stats) return
<commit_msg>Explain the various badge colors<commit_after>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import dateFormat from 'dateformat'
import { requestStats, requestLatestNews } from '../actions'
import DependencyCountsGraph from '../components/home/dependency-counts-graph.jsx'

class Home extends Component {
  static propTypes = {
    config: PropTypes.object.isRequired,
    stats: PropTypes.object,
    latestNews: PropTypes.array,
    requestStats: PropTypes.func.isRequired,
    requestLatestNews: PropTypes.func.isRequired
  }

  state = {
    badgeUrlClass: 'nope',
    badgeImgClass: '',
    badgeSrc: '/img/status/outofdate.svg'
  }

  componentDidMount () {
    this.props.requestLatestNews()

    const requestStats = () => {
      this.props.requestStats().then(() => {
        this._requestStatsTimeout = setTimeout(requestStats, 5000)
      })
    }

    requestStats()
  }

  componentWillUnmount () {
    clearTimeout(this._requestStatsTimeout)
  }

  render () {
    return (
      <div>
        <Helmet><html className='home-page' /></Helmet>
        <div>

          <h1>
            You depend on other projects.<br />
            You want to stay up to date.<br />
            David's got your back.
          </h1>

          <p>
            David gets you an overview of your project dependencies, the version you use
            and the latest available, so you can quickly see what's drifting.
            Then it's all boiled down into a badge showing the current status,
            which you can embed on your site.
          </p>

          <ul id='examples'>
            <li>bower - <Link to='/bower/bower'>bower<img src='/bower/bower.svg' alt='bower Dependency badge' /></Link></li>
            <li>request - <Link to='/request/request'>request<img src='/request/request.svg' alt='request Dependency badge' /></Link></li>
            <li>gruntjs - <Link to='/gruntjs/grunt'>grunt<img src='/gruntjs/grunt.svg' alt='grunt Dependency badge' /></Link></li>
            <li>expressjs - <Link to='/expressjs/express'>express<img src='/expressjs/express.svg?style=flat' alt='express Dependency badge' /></Link></li>
            <li>alanshaw - <Link to='/alanshaw/david'>david<img src='/alanshaw/david.svg' alt='david Dependency badge' /></Link></li>
          </ul>

          <h2>Giving you badges.</h2>

          <p>
            Got a <a href='http://nodejs.org/'>Node.js</a> project? Get a badge. David is free for public projects on <a href='https://github.com/'>Github</a>.
          </p>

          <p>
            Declare your dependencies in a <a href='http://package.json.nodejitsu.com/'>package.json</a> file and you're good. David will go work the rest out and you'll get your own project status page, listing your dependencies and their freshness. Click on the examples above for a preview.
          </p>

          <p>Type your username / repo name in below and get yours...</p>

          <p className='badge-maker'>
            <strong>{this.props.config.siteUrl}/<span contentEditable className={this.state.badgeUrlClass} id='username' title='[Github username] / [repo name]' onInput={this.onBadgeInput} onKeyPress={this.onBadgeKeyPress}>username/repo</span>.svg</strong>
            <img id='badge' src={this.state.badgeSrc} alt='badge' onLoad={this.onBadgeLoad} onError={this.onBadgeError} className={this.state.badgeImgClass} />
          </p>

          <p>
            David is currently <em>BETA</em>, which means it may be unreliable, unavailable or not working. That said, it's already useful and we're working to make it rock solid.
            It's all in Github so <a href='https://github.com/alanshaw/david-www'>feel free to help</a>.
          </p>

          <h2>A color full of information.</h2>

          <p>See a dependencies badge on a repo, but you're not sure what the colors mean? We've got you covered. Here are the various badge states you might encounter, so that you can understand and properly react to what you see.</p>

          <ul>
            <li>Green is all up to date</li>
            <li>Yellow is mostly up to date (&lt;25% out of date)</li>
            <li>Red is out of date, or it has a security vulnerability</li>
          </ul>

          <h2>Most used dependencies</h2>

          <p>These are the most used NPM dependencies based on open source GitHub projects that are using them.</p>

          <DependencyCountsGraph />

        </div>

        <aside id='stats'>
          {this.renderStats()}
          {this.renderNews()}
        </aside>
      </div>
    )
  }

  renderStats () {
    const stats = this.props.stats
    if (!stats) return

{'fraction_non_alphanumeric': 0.12959059136802398, 'fraction_numerical': 0.002662820370575835, 'mean_word_length': 2.567075583696082, 'pattern_counts': {'":': 0, '<': 163, '<?xml version=': 0, '>': 167, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, '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': '6680247', 'n_tokens_mistral': 2766, 'n_tokens_neox': 2637, 'n_words': 774}