<commit_before>import React, { CSSProperties, useState } from 'react'
import { graphql } from 'gatsby'
import styled from 'styled-components'

import { Page } from '../layout/Page'
import BackButton from '../components/subcomponents/BackButton'
import { routeLinks } from '../config/routing'
import { HelmetTitleDescription } from '../meta/HelmetTitleDescription'
import { HideDesktop, HideTablet, MoreButton } from '../components/shared'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
import { BlogFeed } from './blog/Feed'
import { createBlogPosts } from '../models/creator'
import {
  CustomContainer,
  CustomSection,
  CustomSectionTitle,
  PageTitle,
  SectionInner,
} from '../components/shared/index.styled'
import variables from '../styles/variables'
import BlogListTemplate from './BlogListTemplate'

const gatsbyStyle: CSSProperties = {
  display: 'block !important',
  margin: '0 auto',
  width: '70%',
  maxWidth: '428px',
}
const AuthorSection = styled(CustomSection)`
  padding-top: 1rem;
`
const AuthorWrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & .content {
    padding-bottom: 2rem;
    color: #131214;
    opacity: 0.75;
    font-size: ${variables.font.customtext.size};
    line-height: 2.5rem;
  }
`

const ImageWrapper = styled.figure`
  width: 100%;
  max-width: 428px;
`
const AuthorPageTitle = styled(PageTitle)`
  margin-bottom: 0.75rem;
  margin-top: 3.375rem;
  color: #000;
`
const Subtitle = styled.div`
  margin-bottom: 5rem;
  text-align: center;
  font-family: ${variables.font.customtext.lato};
  font-size: ${variables.font.customtext.sizeAuthor};
  font-weight: 700;
  color: #000;
`
const AuthorBackButton = styled(BackButton)`
  display: block;
  margin: 0 auto;
  margin-top: 9.5625rem;
  margin-bottom: 7.625rem;
  display: flex;
  align-items: center;
  font-weight: 900;
  color: #000;
  & > span {
    margin-left: 1.125rem;
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
`
export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}: any) {
  console.log(data)
  const { markdownRemark, allMarkdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  const { edges } = allMarkdownRemark
  const avatarImage = getImage(frontmatter.avatar)!

  const [showAll, setShowAll] = useState(false)
  const [numToSliced, setNumToSliced] = useState(6)

  return (
    <Page>
      <HelmetTitleDescription title={`Meet ${frontmatter.short_name}`} description={frontmatter.bio} />
      <AuthorSection>
        <CustomContainer>
          <AuthorWrapper>
            <HideTablet>
              <ImageWrapper>
                <GatsbyImage className='is-rounded' image={avatarImage} alt={frontmatter.name} />
              </ImageWrapper>
            </HideTablet>
            <HideDesktop>
              <figure className='level-left' style={gatsbyStyle}>
                <GatsbyImage imgClassName='is-rounded' image={avatarImage} alt={frontmatter.name} />
              </figure>
            </HideDesktop>
            <SectionInner>
              <AuthorPageTitle>{frontmatter.short_name}</AuthorPageTitle>
              <Subtitle>{frontmatter.bio}</Subtitle>
              <div className='content' dangerouslySetInnerHTML={{ __html: html }} />
            </SectionInner>
          </AuthorWrapper>
          {edges.length > 0 && <CustomSectionTitle>blog post by {frontmatter.short_name} </CustomSectionTitle>}
          <BlogFeed posts={createBlogPosts(data)} numToSliced={numToSliced} />
          {(() => {
            if (edges.length > 6 && numToSliced > 6) {
              return <MoreButton onClick={() => setNumToSliced(6)}>show less posts</MoreButton>
            } else if (edges.length > 6) {
              return <MoreButton onClick={() => setNumToSliced(12)}>more blog posts</MoreButton>
            }
          })()}
          <AuthorBackButton url={routeLinks.aboutUs({ page: 'team' })} label='back to team' arrowColor={'orange'} />
        </CustomContainer>
      </AuthorSection>
      {/*

<script type="application/ld+json">
    {% assign same_as = "" | split: ', ' %}
    {% if page.twitter %}
    {% capture url %}"https://twitter.com/{{ page.twitter }}"{% endcapture %}
    {% assign same_as = same_as | push: url %}
    {% endif %}
    {% if page.github %}
    {% capture url %}"https://github.com/{{ page.github }}"{% endcapture %}
    {% assign same_as = same_as | push: url %}
    {% endif %}
    {% if page.stackoverflow %}
    {% capture url %}"https://stackoverflow.com/users/{{ page.stackoverflow }}"{% endcapture %}
    {% assign same_as = same_as | push: url %}<commit_msg>Update AboutUsTemplate.tsx<commit_after>import React, { CSSProperties, useState } from 'react'
import { graphql } from 'gatsby'
import styled from 'styled-components'

import { Page } from '../layout/Page'
import BackButton from '../components/subcomponents/BackButton'
import { routeLinks } from '../config/routing'
import { HelmetTitleDescription } from '../meta/HelmetTitleDescription'
import { HideDesktop, HideTablet, MoreButton } from '../components/shared'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
import { BlogFeed } from './blog/Feed'
import { createBlogPosts } from '../models/creator'
import {
  CustomContainer,
  CustomSection,
  CustomSectionTitle,
  PageTitle,
  SectionInner,
} from '../components/shared/index.styled'
import variables from '../styles/variables'
import BlogListTemplate from './BlogListTemplate'

const gatsbyStyle: CSSProperties = {
  display: 'block !important',
  margin: '0 auto',
  width: '70%',
  maxWidth: '428px',
}
const AuthorSection = styled(CustomSection)`
  padding-top: 1rem;
`
const AuthorWrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & .content {
    padding-bottom: 2rem;
    color: #131214;
    opacity: 0.75;
    font-size: ${variables.font.customtext.size};
    line-height: 2.5rem;
  }
`

const ImageWrapper = styled.figure`
  width: 100%;
  max-width: 428px;
`
const AuthorPageTitle = styled(PageTitle)`
  margin-bottom: 0.75rem;
  margin-top: 3.375rem;
  color: #000;
`
const Subtitle = styled.div`
  margin-bottom: 5rem;
  text-align: center;
  font-family: ${variables.font.customtext.lato};
  font-size: ${variables.font.customtext.sizeAuthor};
  font-weight: 700;
  color: #000;
`
const AuthorBackButton = styled(BackButton)`
  display: block;
  margin: 0 auto;
  margin-top: 9.5625rem;
  margin-bottom: 7.625rem;
  display: flex;
  align-items: center;
  font-weight: 900;
  color: #000;
  & > span {
    margin-left: 1.125rem;
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
`
export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}: any) {
  console.log(data)
  const { markdownRemark, allMarkdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  const { edges } = allMarkdownRemark
  const avatarImage = getImage(frontmatter.avatar)!

  const [showAll, setShowAll] = useState(false)
  const [numToSliced, setNumToSliced] = useState(6)

  return (
    <Page>
      <HelmetTitleDescription title={`Meet ${frontmatter.short_name}`} description={frontmatter.bio} />
      <AuthorSection>
        <CustomContainer>
          <AuthorWrapper>
            <HideTablet>
              <ImageWrapper>
                <GatsbyImage className='is-rounded' image={avatarImage} alt={frontmatter.name} />
              </ImageWrapper>
            </HideTablet>
            <HideDesktop>
              <figure className='level-left' style={gatsbyStyle}>
                <GatsbyImage imgClassName='is-rounded' image={avatarImage} alt={frontmatter.name} />
              </figure>
            </HideDesktop>
            <SectionInner>
              <AuthorPageTitle>{frontmatter.short_name}</AuthorPageTitle>
              <Subtitle>{frontmatter.bio}</Subtitle>
              <div className='content' dangerouslySetInnerHTML={{ __html: html }} />
            </SectionInner>
          </AuthorWrapper>
          {edges.length > 0 && <CustomSectionTitle>blog posts by {frontmatter.short_name} </CustomSectionTitle>}
          <BlogFeed posts={createBlogPosts(data)} numToSliced={numToSliced} />
          {(() => {
            if (edges.length > 6 && numToSliced > 6) {
              return <MoreButton onClick={() => setNumToSliced(6)}>show less posts</MoreButton>
            } else if (edges.length > 6) {
              return <MoreButton onClick={() => setNumToSliced(12)}>more blog posts</MoreButton>
            }
          })()}
          <AuthorBackButton url={routeLinks.aboutUs({ page: 'team' })} label='back to team' arrowColor={'orange'} />
        </CustomContainer>
      </AuthorSection>
      {/*

<script type="application/ld+json">
    {% assign same_as = "" | split: ', ' %}
    {% if page.twitter %}
    {% capture url %}"https://twitter.com/{{ page.twitter }}"{% endcapture %}
    {% assign same_as = same_as | push: url %}
    {% endif %}
    {% if page.github %}
    {% capture url %}"https://github.com/{{ page.github }}"{% endcapture %}
    {% assign same_as = same_as | push: url %}
    {% endif %}
    {% if page.stackoverflow %}
    {% capture url %}"https://stackoverflow.com/users/{{ page.stackoverflow }}"{% endcapture %}
    {% assign same_as = same_as | push: url %}
{'fraction_non_alphanumeric': 0.14232960540198353, 'fraction_numerical': 0.01645916860097067, 'mean_word_length': 3.0946004319654428, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 87, 'https://': 6, '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': '4605902', 'n_tokens_mistral': 3111, 'n_tokens_neox': 2898, 'n_words': 657}