<commit_before>import React from 'react'
import { Link } from 'react-router'
import Breakpoint from 'components/Breakpoint'
import { Container, Grid, Span } from 'react-responsive-grid'
import find from 'lodash/find'
import { prefixLink } from 'gatsby-helpers'
import includes from 'underscore.string/include'
import { colors, activeColors } from 'utils/colors'

import typography from 'utils/typography'
import { config } from 'config'

// Import styles.
import 'css/main.css'
import 'css/github.css'

const { rhythm, adjustFontSizeTo } = typography

module.exports = React.createClass({
  propTypes () {
    return {
      children: React.PropTypes.object,
    }
  },
  contextTypes: {
    router: React.PropTypes.object.isRequired,
  },
  handleTopicChange (e) {
    return this.context.router.push(e.target.value)
  },

  render () {
    const examplesActive = includes(this.props.location.pathname, '/examples/')

    const childPages = config.docPages.map((p) => {
      const page = find(this.props.route.pages, (_p) => _p.path === p)
      return {
        title: page.data.title,
        path: page.path,
      }
    })

    const docOptions = childPages.map((child) =>
      <option
        key={prefixLink(child.path)}
        value={prefixLink(child.path)}
      >
        {child.title}
      </option>
    )

    const docPages = childPages.map((child) => {
      const isActive = prefixLink(child.path) === this.props.location.pathname
      return (
        <li
          key={child.path}>
          <Link
            to={prefixLink(child.path)}>
            {isActive ? <strong>{child.title}</strong> : child.title}
          </Link>
        </li>
      )
    })

    return (
      <div>
        <div
          style={{
            background: colors.bg,
            color: colors.fg,
            marginBottom: rhythm(1.5),
          }}
        >
          <Container
            style={{
              maxWidth: 960,
              paddingLeft: rhythm(3/4),
            }}
          >
            <Grid
              columns={12}
              style={{
                padding: `${rhythm(3/4)} 0`,
              }}
            >
              <Span
                columns={4}
                style={{
                  height: 24, // Ugly hack. How better to constrain height of div?
                }}
              >
                <Link
                  to={prefixLink('/')}
                  style={{
                    textDecoration: 'none',
                    color: colors.fg,
                    fontSize: adjustFontSizeTo('25.5px').fontSize,
                  }}
                >
                  {config.siteTitle}
                </Link>
              </Span>
              <Span columns={8} last>
                <a
                  style={{
                    float: 'right',
                    color: colors.fg,
                    textDecoration: 'none',
                    marginLeft: rhythm(1/2),
                  }}
                  href="https://github.com/w3c/webvr"
                >
                  GitHub
                </a>
                <Link
                  to={prefixLink('/examples/')}
                  style={{
                    background: examplesActive ? activeColors.bg : colors.bg,
                    color: examplesActive ? activeColors.fg : colors.fg,
                    float: 'right',
                    textDecoration: 'none',
                    paddingLeft: rhythm(1/2),
                    paddingRight: rhythm(1/2),
                    paddingBottom: rhythm(3/4),
                    marginBottom: rhythm(-1),
                    paddingTop: rhythm(1),
                    marginTop: rhythm(-1),
                  }}
                >
                  Examples
                </Link>
              </Span>
            </Grid>
          </Container>
        </div>

        <div>
          <Breakpoint
            mobile
          >
            <Container
              style={{
                maxWidth: 960,
                paddingLeft: rhythm(3/4),
              }}
            >
              <nav id="nav" className="nav"
                style={{
                  overflowY: 'auto',
                  paddingRight: `calc(${rhythm(1/2)} - 1px)`,
                  position: 'absolute',
                  width: `calc(${rhythm(8)} - 1px)`,
                  borderRight: '1px solid lightgrey',
                }}
              >
                <ul
                  style={{
                    listStyle: 'none',
                    marginLeft: 0,
                    marginTop: rhythm(1/2),
                  }}
                >
                  {docPages}
                </ul>
              </nav>

              <div
                style={{
                  padding: `0 ${rhythm(1)} 0 calc(${rhythm(8)} + ${rhythm(1)})`,
                }}
              >
                {this.props.children}
              </div>
            </Container>
          </Breakpoint>
          <Breakpoint>
            <strong>Topics:</strong>
            {' '}
            <select
              defaultValue={this.props.location.pathname}
              onChange={this.handleTopicChange}>
              {docOptions}
            </select>
            <br />
            <br />
            {this.props.children}
          </Breakpoint>
        </div>
      </div>
    )
  },
})<commit_msg>fixes padding<commit_after>import React from 'react'
import { Link } from 'react-router'
import Breakpoint from 'components/Breakpoint'
import { Container, Grid, Span } from 'react-responsive-grid'
import find from 'lodash/find'
import { prefixLink } from 'gatsby-helpers'
import includes from 'underscore.string/include'
import { colors, activeColors } from 'utils/colors'

import typography from 'utils/typography'
import { config } from 'config'

// Import styles.
import 'css/main.css'
import 'css/github.css'

const { rhythm, adjustFontSizeTo } = typography

module.exports = React.createClass({
  propTypes () {
    return {
      children: React.PropTypes.object,
    }
  },
  contextTypes: {
    router: React.PropTypes.object.isRequired,
  },
  handleTopicChange (e) {
    return this.context.router.push(e.target.value)
  },

  render () {
    const examplesActive = includes(this.props.location.pathname, '/examples/')

    const childPages = config.docPages.map((p) => {
      const page = find(this.props.route.pages, (_p) => _p.path === p)
      return {
        title: page.data.title,
        path: page.path,
      }
    })

    const docOptions = childPages.map((child) =>
      <option
        key={prefixLink(child.path)}
        value={prefixLink(child.path)}
      >
        {child.title}
      </option>
    )

    const docPages = childPages.map((child) => {
      const isActive = prefixLink(child.path) === this.props.location.pathname
      return (
        <li
          key={child.path}>
          <Link
            to={prefixLink(child.path)}>
            {isActive ? <strong>{child.title}</strong> : child.title}
          </Link>
        </li>
      )
    })

    return (
      <div>
        <div
          style={{
            background: colors.bg,
            color: colors.fg,
            marginBottom: rhythm(1.5),
          }}
        >
          <Container
            style={{
              maxWidth: 960,
              paddingLeft: rhythm(3/4),
            }}
          >
            <Grid
              columns={12}
              style={{
                padding: `${rhythm(3/4)} 0`,
              }}
            >
              <Span
                columns={4}
                style={{
                  height: 24, // Ugly hack. How better to constrain height of div?
                }}
              >
                <Link
                  to={prefixLink('/')}
                  style={{
                    textDecoration: 'none',
                    color: colors.fg,
                    fontSize: adjustFontSizeTo('25.5px').fontSize,
                  }}
                >
                  {config.siteTitle}
                </Link>
              </Span>
              <Span columns={8} last>
                <a
                  style={{
                    float: 'right',
                    color: colors.fg,
                    textDecoration: 'none',
                    marginLeft: rhythm(1/2),
                  }}
                  href="https://github.com/w3c/webvr"
                >
                  GitHub
                </a>
                <Link
                  to={prefixLink('/examples/')}
                  style={{
                    background: examplesActive ? activeColors.bg : colors.bg,
                    color: examplesActive ? activeColors.fg : colors.fg,
                    float: 'right',
                    textDecoration: 'none',
                    paddingLeft: rhythm(1/2),
                    paddingRight: rhythm(1/2),
                    paddingBottom: rhythm(3/4),
                    marginBottom: rhythm(-1),
                    paddingTop: rhythm(1),
                    marginTop: rhythm(-1),
                  }}
                >
                  Examples
                </Link>
              </Span>
            </Grid>
          </Container>
        </div>

        <Container
          style={{
            maxWidth: 960,
            padding: rhythm(3/4),
          }}
        >
          <Breakpoint
            mobile
          >
            <nav id="nav" className="nav"
              style={{
                overflowY: 'auto',
                paddingRight: `calc(${rhythm(1/2)} - 1px)`,
                position: 'absolute',
                width: `calc(${rhythm(8)} - 1px)`,
                borderRight: '1px solid lightgrey',
              }}
            >
              <ul
                style={{
                  listStyle: 'none',
                  marginLeft: 0,
                  marginTop: rhythm(1/2),
                }}
              >
                {docPages}
              </ul>
            </nav>

            <div
              style={{
                padding: `0 ${rhythm(1)} 0 calc(${rhythm(8)} + ${rhythm(1)})`,
              }}
            >
              {this.props.children}
            </div>
          </Breakpoint>
          <Breakpoint>
            <strong>Topics:</strong>
            {' '}
            <select
              defaultValue={this.props.location.pathname}
              onChange={this.handleTopicChange}>
              {docOptions}
            </select>
            <br />
            <br />
            {this.props.children}
          </Breakpoint>
        </Container>
      </div>
    )
  },
})
{'fraction_non_alphanumeric': 0.12169411764705883, 'fraction_numerical': 0.009411764705882352, 'mean_word_length': 1.1079150962110693, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 101, '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': '3470915', 'n_tokens_mistral': 2876, 'n_tokens_neox': 2733, 'n_words': 539}