<commit_before>import styled from '@emotion/styled';
import React from 'react';
import CalendarHeatmap from 'react-calendar-heatmap';
import 'react-calendar-heatmap/dist/styles.css';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import ReactTooltip from 'react-tooltip';
import siteInfo from '../../config/site-info';
import { fetchUserProfile } from '../../redux/reducers/about';
import media from '../../utils/media';
import ContentLoader from '../content-loader';
import PieChart from './PieChart';

const AboutDiv = styled.div`
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    background-color: #fff;
    .resume {
        text-align: center;
        font-size: 24px;
    }
    .about-header {
        flex: 1 0 auto;
        display: flex;
        flex-direction: row;
        border-bottom: 2px solid #444;
        .person-base {
            flex: 1 0 auto;
            .name {
                font-size: 20px;
            }
            .aim {
                font-size: 12px;
            }
            ${media.phone`
                display: none;
            `};
        }
        .person-info {
            flex: 1 0 auto;
            padding: 5px;
            list-style: none;
            li {
                font-size: 12px;
                padding: 5px;
            }
        }
        .person-img {
            flex: 1 0 auto;
            text-align: right;
            img {
                width: 90px;
                height: 90px;
                border-radius: 2px;
            }
            h3{
                display: none;
            }
            ${media.phone`
                flex: auto;
                text-align: left;
                img{
                    width: 70px;
                    height: 70px;
                }
                h3{
                    font-size: 12px;
                    display: block;
                }
            `};
        }
    }

    .pie-chart{
        display: flex;
        ${media.phone`
            display: block;
        `};
    }

    .skills-list {
        display: flex;
    }

    .skills-list ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
        flex: 1 0 auto;
        width: 50%;
    }

    .skills-list ul li .progress {
        position: relative;
        display: block;
        width: 100%;
        height: 4px;
        background: #eee;
    }

    .skills-list ul li .progress .percentage {
        position: absolute;
        left: 0;
        top: 0;
        width: 0%;
        height: 100%;
        background: #2eca7f;
        transition: all 0.6s ease 0s;
        border-radius: 4px;
        &.html{
            background-color: #e892bb;
        }
        &.css{
            background-color: #ac97e0;
        }
        &.javascript{
            background-color: #e0b176;
        }
        &.nodejs{
            background-color: #4cf3ff;
        }
        &.mongodb{
            background-color: #709441;
        }
        &.react{
            background-color: #7fc8f8;
        }
        &.vue{
            background-color: #51b1ef;
        }
    }

    .skills-list ul li .progress {
        position: relative;
        display: block;
        width: 100%;
        height: 8px;
        background: #eee;
        border-radius: 4px;
    }

    .skills-list ul li {
        position: relative;
        padding: 15px 10px 0;
    }

    .skills-list ul li .name {
        margin: 0 0 11px 0;
        line-height: 16px;
        font-weight: 400;
    }
`;

const today = new Date();

class About extends React.Component<any, any> {

    public static asyncData(store: any) {
        return store.dispatch(fetchUserProfile('bs32g1038'));
    }

    constructor(props: any) {
        super(props);
        this.state = {
            isLoading: false
        };
    }

    public componentDidMount() {
        const { profile } = this.props._DB;
        if (profile) {
            return;
        }
        this.setState({
            isLoading: true
        });
        About.asyncData({ dispatch: this.props.dispatch }).then(() => {
            this.setState({
                isLoading: false
            });
        });
    }

    public render() {
        const userProfile = this.props._DB.profile;
        let values = [];
        let userRepos;
        let totalContributionLastYear;
        if (userProfile) {
            userRepos = userProfile.userRepos;
            totalContributionLastYear = userProfile.userCommits && userProfile.userCommits.total || 0;
            if (userProfile && userProfile.userCommits && userProfile.userCommits.contribution) {
                values = userProfile.userCommits.contribution.map((item: any) => {
                    return {
                        year: item.year,
                        date: item.year + '-' + item.month,
                        count: item.count,
                    };
                });
            }
        }
        return (
            <AboutDiv className="about">
                {
                    this.state.isLoading ?
                        <>
                            <Helmet title={siteInfo.name + '-关于'}></Helmet>
                            <h1 className="resume">
                                <ContentLoader width={720} height={40}>
                                    <rect x="260" y="0" width="200" height="40"></rect>
                                </ContentLoader>
                            </h1>
                            <ContentLoader width={720} height={30}>
                                <rect x="0" y="0" rx="2" ry="2" width="720" height="30"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={100}>
                                <rect x="0" y="10" rx="2" ry="2" width="160" height="100"></rect>
                                <rect x="190" y="10" rx="2" ry="2" width="160" height="100"></rect>
                                <rect x="370" y="10" rx="2" ry="2" width="160" height="100"></rect>
                                <rect x="550" y="10" rx="2" ry="2" width="160" height="100"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={30}>
                                <rect x="0" y="20" rx="2" ry="2" width="720" height="30"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={100}>
                                <rect x="0" y="20" rx="2" ry="2" width="720" height="100"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={180}>
                                <rect x="0" y="20" rx="2" ry="2" width="370" height="30"></rect>
                                <rect x="0" y="70" rx="2" ry="2" width="250" height="30"></rect>
                                <rect x="0" y="120" rx="2" ry="2" width="370" height="30"></rect>
                                <circle cx="600" cy="80" r="60"></circle>
                            </ContentLoader>
                            <ContentLoader width={720} height={260}>
                                <rect x="0" y="0" width="720" height="20"></rect>
                                <rect x="40" y="40" width="460" height="30"></rect>
                                <rect x="40" y="90" width="280" height="20"></rect>
                                <rect x="40" y="130" width="280" height="20"></rect>
                                <rect x="40" y="170" width="280" height="20"></rect>
                                <rect x="40" y="210" width="280" height="20"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={260}>
                                <rect x="0" y="0" width="720" height="20"></rect>
                                <rect x="40" y="40" width="460" height="30"></rect>
                                <rect x="40" y="90" width="280" height="20"></rect>
                                <rect x="40" y="130" width="280" height="20"></rect>
                                <rect x="40" y="170" width="280" height="20"></rect>
                                <rect x="40" y="210" width="280" height="20"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={260}>
                                <rect x="0" y="0" width="720" height="20"></rect>
                                <rect x="40" y="40" width="460" height="30"></rect>
                                <rect x="40" y="90" width="280" height="20"></rect>
                                <rect x="40" y="130" width="280" height="20"></rect>
                                <rect x="40" y="170" width="280" height="20"></rect>
                                <rect x="40" y="210" width="280" height="20"></rect>
                            </ContentLoader>
                        </>
                        :
                        <>
                            <Helmet title={siteInfo.name + '-关于'}></Helmet>
                            <h1 className="resume">--关于--</h1>
                            <p style={{ borderLeft: '3px solid #ccc', padding: '5px 10px', backgroundColor: '#efefef' }}>
                                专注于web前端开发。喜欢新事物，关注前端动态，对新的技术有追求；涉猎广泛，喜欢 coding。
                            </p>
                            <p>15年的时候开始接触了前端，直到现在，不敢说擅长什么，只能说勤能补拙。</p>
                            <p>书山有路勤为径，学海无涯苦作舟。</p>
                            <p>
                                本博客是一个技术性博客，平时主要发布一些关于web前端以及后端开发的文章，这其中包括第三方的文章，也包括我自己总结的一些文章。 我会一直坚持写作，把自己的一些笔记记录下来，虽然有些笔记显示稚嫩，但是也算是一个过程，留作以后反思。
                            </p>
                            <div className="about-header">
                                <div className="person-base"><commit_msg>chore: remove about one info description<commit_after>import styled from '@emotion/styled';
import React from 'react';
import CalendarHeatmap from 'react-calendar-heatmap';
import 'react-calendar-heatmap/dist/styles.css';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import ReactTooltip from 'react-tooltip';
import siteInfo from '../../config/site-info';
import { fetchUserProfile } from '../../redux/reducers/about';
import media from '../../utils/media';
import ContentLoader from '../content-loader';
import PieChart from './PieChart';

const AboutDiv = styled.div`
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    background-color: #fff;
    .resume {
        text-align: center;
        font-size: 24px;
    }
    .about-header {
        flex: 1 0 auto;
        display: flex;
        flex-direction: row;
        border-bottom: 2px solid #444;
        .person-base {
            flex: 1 0 auto;
            .name {
                font-size: 20px;
            }
            .aim {
                font-size: 12px;
            }
            ${media.phone`
                display: none;
            `};
        }
        .person-info {
            flex: 1 0 auto;
            padding: 5px;
            list-style: none;
            li {
                font-size: 12px;
                padding: 5px;
            }
        }
        .person-img {
            flex: 1 0 auto;
            text-align: right;
            img {
                width: 90px;
                height: 90px;
                border-radius: 2px;
            }
            h3{
                display: none;
            }
            ${media.phone`
                flex: auto;
                text-align: left;
                img{
                    width: 70px;
                    height: 70px;
                }
                h3{
                    font-size: 12px;
                    display: block;
                }
            `};
        }
    }

    .pie-chart{
        display: flex;
        ${media.phone`
            display: block;
        `};
    }

    .skills-list {
        display: flex;
    }

    .skills-list ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
        flex: 1 0 auto;
        width: 50%;
    }

    .skills-list ul li .progress {
        position: relative;
        display: block;
        width: 100%;
        height: 4px;
        background: #eee;
    }

    .skills-list ul li .progress .percentage {
        position: absolute;
        left: 0;
        top: 0;
        width: 0%;
        height: 100%;
        background: #2eca7f;
        transition: all 0.6s ease 0s;
        border-radius: 4px;
        &.html{
            background-color: #e892bb;
        }
        &.css{
            background-color: #ac97e0;
        }
        &.javascript{
            background-color: #e0b176;
        }
        &.nodejs{
            background-color: #4cf3ff;
        }
        &.mongodb{
            background-color: #709441;
        }
        &.react{
            background-color: #7fc8f8;
        }
        &.vue{
            background-color: #51b1ef;
        }
    }

    .skills-list ul li .progress {
        position: relative;
        display: block;
        width: 100%;
        height: 8px;
        background: #eee;
        border-radius: 4px;
    }

    .skills-list ul li {
        position: relative;
        padding: 15px 10px 0;
    }

    .skills-list ul li .name {
        margin: 0 0 11px 0;
        line-height: 16px;
        font-weight: 400;
    }
`;

const today = new Date();

class About extends React.Component<any, any> {

    public static asyncData(store: any) {
        return store.dispatch(fetchUserProfile('bs32g1038'));
    }

    constructor(props: any) {
        super(props);
        this.state = {
            isLoading: false
        };
    }

    public componentDidMount() {
        const { profile } = this.props._DB;
        if (profile) {
            return;
        }
        this.setState({
            isLoading: true
        });
        About.asyncData({ dispatch: this.props.dispatch }).then(() => {
            this.setState({
                isLoading: false
            });
        });
    }

    public render() {
        const userProfile = this.props._DB.profile;
        let values = [];
        let userRepos;
        let totalContributionLastYear;
        if (userProfile) {
            userRepos = userProfile.userRepos;
            totalContributionLastYear = userProfile.userCommits && userProfile.userCommits.total || 0;
            if (userProfile && userProfile.userCommits && userProfile.userCommits.contribution) {
                values = userProfile.userCommits.contribution.map((item: any) => {
                    return {
                        year: item.year,
                        date: item.year + '-' + item.month,
                        count: item.count,
                    };
                });
            }
        }
        return (
            <AboutDiv className="about">
                {
                    this.state.isLoading ?
                        <>
                            <Helmet title={siteInfo.name + '-关于'}></Helmet>
                            <h1 className="resume">
                                <ContentLoader width={720} height={40}>
                                    <rect x="260" y="0" width="200" height="40"></rect>
                                </ContentLoader>
                            </h1>
                            <ContentLoader width={720} height={30}>
                                <rect x="0" y="0" rx="2" ry="2" width="720" height="30"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={100}>
                                <rect x="0" y="10" rx="2" ry="2" width="160" height="100"></rect>
                                <rect x="190" y="10" rx="2" ry="2" width="160" height="100"></rect>
                                <rect x="370" y="10" rx="2" ry="2" width="160" height="100"></rect>
                                <rect x="550" y="10" rx="2" ry="2" width="160" height="100"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={30}>
                                <rect x="0" y="20" rx="2" ry="2" width="720" height="30"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={100}>
                                <rect x="0" y="20" rx="2" ry="2" width="720" height="100"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={180}>
                                <rect x="0" y="20" rx="2" ry="2" width="370" height="30"></rect>
                                <rect x="0" y="70" rx="2" ry="2" width="250" height="30"></rect>
                                <rect x="0" y="120" rx="2" ry="2" width="370" height="30"></rect>
                                <circle cx="600" cy="80" r="60"></circle>
                            </ContentLoader>
                            <ContentLoader width={720} height={260}>
                                <rect x="0" y="0" width="720" height="20"></rect>
                                <rect x="40" y="40" width="460" height="30"></rect>
                                <rect x="40" y="90" width="280" height="20"></rect>
                                <rect x="40" y="130" width="280" height="20"></rect>
                                <rect x="40" y="170" width="280" height="20"></rect>
                                <rect x="40" y="210" width="280" height="20"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={260}>
                                <rect x="0" y="0" width="720" height="20"></rect>
                                <rect x="40" y="40" width="460" height="30"></rect>
                                <rect x="40" y="90" width="280" height="20"></rect>
                                <rect x="40" y="130" width="280" height="20"></rect>
                                <rect x="40" y="170" width="280" height="20"></rect>
                                <rect x="40" y="210" width="280" height="20"></rect>
                            </ContentLoader>
                            <ContentLoader width={720} height={260}>
                                <rect x="0" y="0" width="720" height="20"></rect>
                                <rect x="40" y="40" width="460" height="30"></rect>
                                <rect x="40" y="90" width="280" height="20"></rect>
                                <rect x="40" y="130" width="280" height="20"></rect>
                                <rect x="40" y="170" width="280" height="20"></rect>
                                <rect x="40" y="210" width="280" height="20"></rect>
                            </ContentLoader>
                        </>
                        :
                        <>
                            <Helmet title={siteInfo.name + '-关于'}></Helmet>
                            <h1 className="resume">--关于--</h1>
                            <p style={{ padding: '10px 18px', backgroundColor: '#efefef', borderRadius: '4px' }}>
                                专注于web前端开发。喜欢新事物，关注前端动态，对新的技术有追求；涉猎广泛，喜欢 coding。
                            </p>
                            <p style={{ padding: '0 10px' }}>
                                本博客是一个技术性博客，平时主要发布一些关于web前端以及后端开发的文章，这其中包括第三方的文章，也包括我自己总结的一些文章。 我会一直坚持写作，把自己的一些笔记记录下来，以作备忘和分享。
                            </p>
                            <div className="about-header">
                                <div className="person-base">
{'fraction_non_alphanumeric': 0.1371213661313275, 'fraction_numerical': 0.04716405773531206, 'mean_word_length': 1.1450997492641448, 'pattern_counts': {'":': 0, '<': 201, '<?xml version=': 0, '>': 205, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6694788', 'n_tokens_mistral': 6214, 'n_tokens_neox': 5573, 'n_words': 1152}