<commit_before>import React, { Component } from "react";
import PropTypes from "prop-types";
import Helmet from "react-helmet";
import BodyClassName from "react-body-classname";
import graphql from "graphql";
import "babel-polyfill";

if (typeof window !== "undefined") {
  require("intersection-observer");
}

import "styles/base.scss";
import "styles/fonts/tanek.scss";
import "styles/fonts/tiempos.scss";

import Logo from "components/logo";
import Navigation from "components/navigation";
import Footer from "components/footer";

export default class Template extends Component {
  loadElements() {
    const els = document.querySelectorAll(".load-in:not(.visible)");
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        const { isIntersecting, intersectionRatio } = entry;
        if (isIntersecting === true || intersectionRatio > 0) {
          entry.target.classList.add("visible");
        }
      });
    });
    Array.from(els).forEach(el => {
      observer.observe(el);
    });
  }

  componentDidMount() {
    this.loadElements();
  }

  componentDidUpdate() {
    this.loadElements();
  }

  render() {
    const { data, location } = this.props;
    let page = {};
    const colors = ["green", "blue", "orange", "pink"];
    const defaultColor = colors[Math.floor(Math.random() * colors.length)];
    const config = data.site.siteMetadata;
    const currentPage = data.allFile.edges.find(({ node }) => {
      return (
        node.relativeDirectory === location.pathname.replace(/^\/|\/$/g, "") &&
        node.childJsFrontmatter
      );
    });
    if (currentPage) {
      // Assign the nested object page coming from GraphQL to a new name
      const {
        node: {
          childJsFrontmatter: { data: currentPageData = {} }
        }
      } = currentPage;
      page = { ...currentPageData };
    }
    const color = page.color || defaultColor;

    return (
      <div>
        <BodyClassName className={color} />
        <Helmet
          meta={[
            {
              name: "description",
              content: page.description || config.description
            },
            {
              property: "og:url",
              content: `${config.url}${location.pathname}`
            },
            { property: "og:type", content: "website" },
            {
              property: "og:title",
              content: page.title
                ? `${page.title} - ${config.siteTitle}`
                : config.siteTitle
            },
            { property: "og:site_name", content: config.siteTitle },
            { property: "og:image", content: config.shareImage },
            {
              property: "og:description",
              content: page.description || config.description
            },
            {
              name: "twitter:title",
              content: page.title ? page.title : config.siteTitle
            },
            { name: "twitter:card", content: "summary_large_image" },
            { name: "twitter:site", content: config.twitter },
            { name: "twitter:creator", content: config.twitter },
            {
              name: "twitter:description",
              content: page.description || config.description
            },
            { name: "twitter:image", content: config.shareImage }
          ]}
          titleTemplate={`%s - ${config.siteTitle}`}
          title={page.title || config.siteName}
        />

        <Logo {...page} {...this.props} />
        <Navigation {...page} {...this.props} />
        <section className="content-wrapper">{this.props.children()}</section>
        <Footer />
      </div>
    );
  }
}

Template.propTypes = {
  children: PropTypes.any,
  location: PropTypes.object,
  data: PropTypes.object
};

// eslint-disable-next-line no-undef
export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {<commit_msg>No more render prop<commit_after>import React, { Component } from "react";
import PropTypes from "prop-types";
import Helmet from "react-helmet";
import BodyClassName from "react-body-classname";
import graphql from "graphql";
import "babel-polyfill";

if (typeof window !== "undefined") {
  require("intersection-observer");
}

import "styles/base.scss";
import "styles/fonts/tanek.scss";
import "styles/fonts/tiempos.scss";

import Logo from "components/logo";
import Navigation from "components/navigation";
import Footer from "components/footer";

export default class Template extends Component {
  loadElements() {
    const els = document.querySelectorAll(".load-in:not(.visible)");
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        const { isIntersecting, intersectionRatio } = entry;
        if (isIntersecting === true || intersectionRatio > 0) {
          entry.target.classList.add("visible");
        }
      });
    });
    Array.from(els).forEach(el => {
      observer.observe(el);
    });
  }

  componentDidMount() {
    this.loadElements();
  }

  componentDidUpdate() {
    this.loadElements();
  }

  render() {
    const { data, location } = this.props;
    let page = {};
    const colors = ["green", "blue", "orange", "pink"];
    const defaultColor = colors[Math.floor(Math.random() * colors.length)];
    const config = data.site.siteMetadata;
    const currentPage = data.allFile.edges.find(({ node }) => {
      return (
        node.relativeDirectory === location.pathname.replace(/^\/|\/$/g, "") &&
        node.childJsFrontmatter
      );
    });
    if (currentPage) {
      // Assign the nested object page coming from GraphQL to a new name
      const {
        node: {
          childJsFrontmatter: { data: currentPageData = {} }
        }
      } = currentPage;
      page = { ...currentPageData };
    }
    const color = page.color || defaultColor;

    return (
      <div>
        <BodyClassName className={color} />
        <Helmet
          meta={[
            {
              name: "description",
              content: page.description || config.description
            },
            {
              property: "og:url",
              content: `${config.url}${location.pathname}`
            },
            { property: "og:type", content: "website" },
            {
              property: "og:title",
              content: page.title
                ? `${page.title} - ${config.siteTitle}`
                : config.siteTitle
            },
            { property: "og:site_name", content: config.siteTitle },
            { property: "og:image", content: config.shareImage },
            {
              property: "og:description",
              content: page.description || config.description
            },
            {
              name: "twitter:title",
              content: page.title ? page.title : config.siteTitle
            },
            { name: "twitter:card", content: "summary_large_image" },
            { name: "twitter:site", content: config.twitter },
            { name: "twitter:creator", content: config.twitter },
            {
              name: "twitter:description",
              content: page.description || config.description
            },
            { name: "twitter:image", content: config.shareImage }
          ]}
          titleTemplate={`%s - ${config.siteTitle}`}
          title={page.title || config.siteName}
        />

        <Logo {...page} {...this.props} />
        <Navigation {...page} {...this.props} />
        <section className="content-wrapper">{this.props.children}</section>
        <Footer />
      </div>
    );
  }
}

Template.propTypes = {
  children: PropTypes.any,
  location: PropTypes.object,
  data: PropTypes.object
};

// eslint-disable-next-line no-undef
export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
{'fraction_non_alphanumeric': 0.14208909370199693, 'fraction_numerical': 0.0002560163850486431, 'mean_word_length': 2.1152312599681022, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 31, 'https://': 0, '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': '7035658', 'n_tokens_mistral': 2157, 'n_tokens_neox': 2142, 'n_words': 459}